<div class="row">
  <div class="col-12">
    <div class="card">
      <div class="card-body">

        <style>
          #datatable-fixedheader thead th:nth-child(1),
          #datatable-fixedheader tbody td:nth-child(1){width:4%;text-align:center}
          
          #datatable-fixedheader thead th:nth-child(2),
          #datatable-fixedheader tbody td:nth-child(2){
                max-width:150px;
                white-space:nowrap;
                overflow:hidden;
                text-overflow:ellipsis;
            }
          #datatable-fixedheader thead th:nth-child(3),
          #datatable-fixedheader tbody td:nth-child(3){width:10%; text-align:left}
          #datatable-fixedheader thead th:nth-child(4),
          #datatable-fixedheader tbody td:nth-child(4){
                max-width:150px;
                white-space:nowrap;
                overflow:hidden;
                text-overflow:ellipsis;
            }
          #datatable-fixedheader thead th:nth-child(5),
          #datatable-fixedheader tbody td:nth-child(5){width:8%;text-align:left}
          #datatable-fixedheader thead th:nth-child(6),
          #datatable-fixedheader tbody td:nth-child(6){width:8%;text-align:left}
          #datatable-fixedheader thead th:nth-child(7),
          #datatable-fixedheader tbody td:nth-child(7){width:14%; text-align:left;}
          #datatable-fixedheader thead th:nth-child(8){width:10%;text-align:center}
          #datatable-fixedheader thead th:nth-child(9){width:6%;text-align:center}
        </style>

        <table id="datatable-fixedheader" class="table table-hover table-bordered dt-responsive nowrap">
          <thead>
            <tr>
              <th>No</th>
              <th>Name</th>
              <th>Mobile</th>
              <th>Email</th>
              <th>Date</th>
              <th>Time</th>
              <th>Package</th>
              <th>Status</th>
              <th>Action</th>
            </tr>
          </thead>
          <tbody></tbody>
        </table>

      </div>
    </div>
  </div>
</div>

 
<div id="modal2" class="modal fade" tabindex="-1">
  <div class="modal-dialog modal-md modal-dialog-centered">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Reject Health Checkup</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
      </div>
      <div class="modal-body">
        <form id="reject_checkup_form">
          <div class="mb-3">
            <label class="form-label">Remarks</label>
            <textarea name="remarks" id="remarks" class="form-control" rows="4"></textarea>
            <input type="hidden" name="checkup_id">
            <span id="err_editor" class="text-danger"></span>
          </div>
          <div class="text-end">
            <button type="button" onclick="reject_checkup()" class="btn btn-primary">Send</button>
            <button type="button" class="btn btn-danger" data-bs-dismiss="modal">Cancel</button>
          </div>
        </form>
      </div>
    </div>
  </div>
</div>
<!-- VIEW HEALTH CHECKUP MODAL (SAME AS APPOINTMENT) -->
<div id="viewCheckupModal" class="modal fade">
  <div class="modal-dialog modal-lg modal-dialog-centered">
    <div class="modal-content ap-modal">

      <div class="modal-header">
        <h5 class="modal-title">
          <i class="fa fa-notes-medical me-2"></i>
          Health Checkup Details
        </h5>
        <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
      </div>

      <div class="modal-body">
        <div class="row g-3">

          <div class="col-md-6">
            <div class="info-box">
              <label>Patient Name</label>
              <span id="v_patient_name"></span>
            </div>
          </div>

          <div class="col-md-6">
            <div class="info-box">
              <label>Mobile</label>
              <span id="v_patient_mobile"></span>
            </div>
          </div>

          <div class="col-md-6">
            <div class="info-box">
              <label>Email</label>
              <span id="v_patient_email"></span>
            </div>
          </div>

          <div class="col-md-6">
            <div class="info-box">
              <label>Package</label>
              <span id="v_package"></span>
            </div>
          </div>

          <div class="col-md-4">
            <div class="info-box">
              <label>Date</label>
              <span id="v_date"></span>
            </div>
          </div>

          <div class="col-md-4">
            <div class="info-box">
              <label>Time</label>
              <span id="v_time"></span>
            </div>
          </div>

          <div class="col-md-4">
            <div class="info-box">
              <label>Status</label>
              <span id="v_status" class="status-badge"></span>
            </div>
          </div>

          <div class="col-12">
            <div class="info-box">
              <label>Description</label>
              <span id="v_description"></span>
            </div>
          </div>

        </div>
      </div>

      <div class="modal-footer">
        <button class="btn btn-outline-secondary" data-bs-dismiss="modal">
          Close
        </button>
      </div>

    </div>
  </div>
</div>
<style>
.ap-modal{
  border-radius:16px;
  overflow:hidden;
}
.ap-modal .modal-header{
  background:#fff;
  color:#fff;
  border:none;
}
.info-box{
  background:#f8f9ff;
  padding:12px 15px;
  border-radius:12px;
}
.info-box label{
  font-size:12px;
  color:#6c757d;
}
.info-box span{
  font-weight:600;
}
.status-badge{
  padding:4px 10px;
  border-radius:20px;
  font-size:13px;
}
.btn-outline-secondary:hover,
.btn-outline-secondary:focus,
.btn-outline-secondary:active,
.btn-outline-secondary:active:focus {
    color: #6c757d !important;    
    background-color: transparent !important;
    border-color: #6c757d !important;
    box-shadow: none !important;
}

.status-pending{background:#fff3cd;color:#856404}
.status-confirm{background:#d1e7dd;color:#0f5132}
.status-reject{background:#f8d7da;color:#842029}
</style>

<?php $this->load->view('includes/footer'); ?>