 
<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:125px;
                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:125px;
                white-space:nowrap;
                overflow:hidden;
                text-overflow:ellipsis; text-align:left;
            }
          #datatable-fixedheader thead th:nth-child(5), #datatable-fixedheader tbody td:nth-child(5){width:6%;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:8%;text-align:left;}
          #datatable-fixedheader thead th:nth-child(8){width:14%}
          #datatable-fixedheader thead th:nth-child(9), #datatable-fixedheader tbody td:nth-child(9){width:10%;text-align:left}
          #datatable-fixedheader thead th:nth-child(10){width:6%;text-align:center}
          #datatable-fixedheader thead th:nth-child(11){width:14%}
        </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>Age</th>
              <th>Date</th>
              <th>Time</th>
              <th>Doctor</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 Appointment</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
      </div>
      <div class="modal-body">
        <form id="reject_ap_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="ap_id">
            <span id="err_editor" class="text-danger"></span>
          </div>
          <div class="text-end">
            <button type="button" onclick="reject_appointment()" 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>
<div id="viewModal" 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-calendar-check me-2"></i>
          Appointment 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_name"></span>
            </div>
          </div>

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

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

          <div class="col-md-3">
            <div class="info-box">
              <label>Age</label>
              <span id="v_age"></span>
            </div>
          </div>

          <div class="col-md-3">
            <div class="info-box">
              <label>Status</label>
              <span id="v_status" class="status-badge"></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>Doctor</label>
              <span id="v_doctor"></span>
            </div>
          </div>

          <div class="col-12">
            <div class="info-box">
              <label>Remarks</label>
              <span id="v_remarks"></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;
}
.ap-modal .modal-title{
    font-weight:600;
}
.info-box{
    background:#f8f9ff;
    padding:12px 15px;
    border-radius:12px;
    height:100%;
}
.info-box label{
    font-size:12px;
    color:#6c757d;
    margin-bottom:4px;
    display:block;
}
.info-box span{
    font-weight:600;
    color:#212529;
}
.status-badge{
    padding:4px 10px;
    border-radius:20px;
    font-size:13px;
}
.btn-outline-secondary:hover,
.btn-outline-secondary:focus,
.btn-outline-secondary:active {
    background: transparent !important;
    color: #6c757d !important;
    box-shadow: none !important;
    border-color: #6c757d !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'); ?>
