<div class="row">
    <div class="col-md-12 col-lg-8">
      <?php $this->load->view('admin/settings/tabs/shifts/shifts-table'); ?>
    </div>
    <div class="col-md-12 col-lg-4">
      <div class="card card-border-primary">
        <div class="card-body text-center">
          <i class="material-icons-two-tone text-primary d-block f-46">alarm</i>
          <h4 class="mt-3"><span class="text-primary"><?= $total_sifts ?></span> Shifts</h4>
          <p class="mb-3">Total Number of Shifs</p>
          <button class="btn btn-primary btn-sm btn-round" data-bs-toggle="modal" data-bs-target="#add_shifts_modal">
            Add New Shift
          </button>
        </div>
      </div>
  </div>
</div>

<?php $this->load->view('admin/layout/form-status-notification'); ?> 
<?php $this->load->view('admin/layout/delete-confirmation-modal'); ?>
<?php $this->load->view('admin/settings/tabs/shifts/add-shifts-modal'); ?>
<?php $this->load->view('admin/settings/tabs/shifts/edit-shifts-modal'); ?>

<script>
$(document).ready(function () {
  $('#shifts-table').DataTable({
    responsive: true,
    pageLength: 10,
    lengthMenu: [10,25,50,100],
    order: [[2,'asc']]
  });

  $(document).on('click', '.edit-shift-btn', function (e) {
    e.preventDefault();
    $('#editShiftId').val($(this).data('id'));
    $('#editShiftName').val($(this).data('name'));
    $('#editShiftDescription').val($(this).data('description'));
    $('#editShiftStart').val($(this).data('start'));
    $('#editShiftEnd').val($(this).data('end'));
    $('#editShiftModal').modal('show');
  });
});
</script>

