<div class="table-responsive">
  <div class="d-flex justify-content-between">
    <h5 class="mb-0">Body Vital Details</h5>
    <button type="button" class="btn btn-primary" id="createBodyVitals" data-bs-toggle="modal" data-bs-target="#commonModal"><i class="bx bx-plus-circle"></i> Add New</button>
  </div>
  <hr class="mb-2">
  <table id="body_vitals_table" class="table table-bordered align-middle" style="width:100%">
    <thead class="table-light">
        <tr>
          <th class="thbutton">Sl No</th>
          <th>Date & Time</th>
          {{-- @foreach ($body_vital_columns as $column)
          <th>{{ $column->name }}</th>
          @endforeach --}}
          <th>Body Vitals</th>
          <th class="thbutton">Edit</th>
          <th class="thbutton">Delete</th>
        </tr>
    </thead>
    <tbody>
      @if(count($vital_history) > 0)
        @php $sno = 1; @endphp
        @foreach ($vital_history as $key => $records)
          <tr>
            <td class="text-center">{{ $sno++ }}</td>
            <td>{!! formatedDateTime($records->vitals_date_time) !!}</td>
            @php 
              $body_vital_histories = json_decode($records->body_vital_value,true);
            @endphp
            <td style="white-space: normal;">
              @if(isset($body_vital_histories) && !is_null($body_vital_histories) && count($body_vital_histories) > 0)
                @foreach($body_vital_histories as $vital_key => $value)
                  {!! $body_vital[$vital_key] ?? '' !!}: {!! $value !!} {!! end($body_vital_histories) == $value ? '' : ', ' !!}
                @endforeach
              @endif
            </td>

            {{-- @foreach ($records['vital_history'] as $key => $vital)
              <td>{!! $vital->body_vital_value ?? 'N/A' !!}</td>
            @endforeach --}}
            <td class="text-center">
              <button data-id="{{ $records->batch_no }}" class="btn btn-sm btn-outline-secondary editBodyVitals" data-bs-toggle="modal" data-bs-target="#commonModal" title="Edit">
                <i class="bi bi-pencil-square"></i>
              </button>
            </td>
            <td class="text-center">
              <a data-url="{{route('ipd-admissions-body-vitals.destroy')}}" data-id="{{ $records->batch_no }}" class="btn btn-sm btn-danger deleteDataCustom" class="text-danger" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Delete">
                <i class="bi bi-trash text-white"></i>
              </a>
            </td>
          </tr>
        @endforeach
      @else
          <tr>
              <td colspan="6">No Data Found</td>
          </tr>
      @endif
  </tbody>
	</table>
</div>