<!-- Extend area where template is defined -->
<?= $this->extend('templates/adminlte/generalcontent') ?>
<!-- .Extend -->

<!-- Title of the page -->
<?= $this->section('title') ?>Employee Payroll Transaction<?= $this->endSection() ?>
<!-- .Title -->

<!-- CSS of the page -->
<?= $this->section('css') ?>

<!-- DataTables -->
<link rel="stylesheet" href="<?= base_url() ?>adminlte/plugins/datatables-bs4/css/dataTables.bootstrap4.min.css">
<link rel="stylesheet" href="<?= base_url() ?>adminlte/plugins/datatables-responsive/css/responsive.bootstrap4.min.css">
<link rel="stylesheet" href="<?= base_url() ?>adminlte/plugins/datatables-buttons/css/buttons.bootstrap4.min.css">

<?= $this->endSection() ?>
<!-- .CSS -->

<!-- body attribute - class definition -->
<?= $this->section('bodyclass') ?>sidebar-mini<?= $this->endSection() ?>
<!-- .body attribute -->

<!-- Container title -->
<?= $this->section('containertitle') ?>Employee Payroll Transaction<?= $this->endSection() ?>
<!-- .Container title -->

<!-- Active breadcrumb -->
<?= $this->section('breadcrumbs') ?>
<li class="breadcrumb-item"><a href="/payroll/paytrans">Payroll Transaction</a></li>
<li class="breadcrumb-item active"><a href="/payroll/emppaytrans/<?= $payTrans->paytrans_id ?>/?grpid=<?= $payGroup->pay_group_id ?>">Employee Payroll Transaction</a></li>
<li class="breadcrumb-item active">Report</li>
<?= $this->endSection() ?>
<!-- .Active breadcrumb -->

<!-- Main content -->
<?= $this->section('main') ?>

<!-- List of Employee for Payroll -->
<div class="row">
    <div class="col-12">
        <div class="card">
            <div class="card-header">
                <h3 class="card-title">List of Employee for Payroll <span class="text-muted"><?= $payGroup->pay_group_name ?></span></h3>
            </div>
            <div class="card-body">
              <?= $tblEmpPayTransInDed ?>
            </div>
            <div class="card-footer">
                <a class="btn btn-primary" href="/payroll/empslip/<?= $payTrans->paytrans_id.'/'.$payGroup->pay_group_id ?>" target="_blank">View Payslip</a>
            </div>
        </div>
    </div>
</div>

<?= $this->endSection() ?>
<!-- .Main content -->

<!-- Javascript -->

<?= $this->section('js') ?>

<!-- DataTables  & Plugins -->
<script src="<?= base_url() ?>adminlte/plugins/datatables/jquery.dataTables.min.js"></script>
<script src="<?= base_url() ?>adminlte/plugins/datatables-bs4/js/dataTables.bootstrap4.min.js"></script>
<script src="<?= base_url() ?>adminlte/plugins/datatables-responsive/js/dataTables.responsive.min.js"></script>
<script src="<?= base_url() ?>adminlte/plugins/datatables-responsive/js/responsive.bootstrap4.min.js"></script>
<script src="<?= base_url() ?>adminlte/plugins/datatables-buttons/js/dataTables.buttons.min.js"></script>
<script src="<?= base_url() ?>adminlte/plugins/datatables-buttons/js/buttons.bootstrap4.min.js"></script>
<script src="<?= base_url() ?>adminlte/plugins/jszip/jszip.min.js"></script>
<script src="<?= base_url() ?>adminlte/plugins/pdfmake/pdfmake.min.js"></script>
<script src="<?= base_url() ?>adminlte/plugins/pdfmake/vfs_fonts.js"></script>
<script src="<?= base_url() ?>adminlte/plugins/datatables-buttons/js/buttons.html5.min.js"></script>
<script src="<?= base_url() ?>adminlte/plugins/datatables-buttons/js/buttons.print.min.js"></script>
<script src="<?= base_url() ?>adminlte/plugins/datatables-buttons/js/buttons.colVis.min.js"></script>

<script>
$(document).ready(function() {

  //Initialize Select2 Elements
  
  $("#tblEmpPayTransInDed").DataTable({
      "responsive": true, "lengthChange": false, "autoWidth": false, "order": [[1, "asc"]],
      "buttons": ["copy", "csv", "excel", "pdf", "print", "colvis"]
    }).buttons().container().appendTo('#tblEmpPayTransInDed_wrapper .col-md-6:eq(0)');
});



</script>

<?= $this->endSection() ?>

<!-- .Javascript -->