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

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

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

<!-- Select2 -->
<link rel="stylesheet" href="<?= base_url() ?>adminlte/plugins/select2/css/select2.min.css">
<link rel="stylesheet" href="<?= base_url() ?>adminlte/plugins/select2-bootstrap4-theme/select2-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 Initialization<?= $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"><a href="/payroll/emppaytrans/<?= $payTrans->paytrans_id ?>">Employee Payroll Transaction</a></li>
<li class="breadcrumb-item active">Employee Payroll Initialization</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 Initial</h3>
            </div>
            <div class="card-body">
              <?= $tblEmpPayTrans ?>
            </div>
            <div class="card-footer">
              <a class="btn btn-secondary" href="/payroll/emppaytrans/<?= $payTrans->paytrans_id ?>?grpid=<?= $payGroup->pay_group_id ?>">Back to Payroll Transaction</a>
            </div>
        </div>
    </div>
</div>

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

<!-- Javascript -->

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

<!-- Select2 -->
<script src="<?= base_url() ?>adminlte/plugins/select2/js/select2.full.min.js"></script>

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

  //Initialize Select2 Elements
  $('.select2').select2();
    
});

function showEmpPayTransDetails(emppaytransid)
{
  $("div[id^='payrollTabInfo']" ).hide();
  $("#payrollTabInfo"+emppaytransid).toggle();

  $("#txtInEmpPayTransId").val(emppaytransid);
  $("#txtDedEmpPayTransId").val(emppaytransid);
}

function editIncomeDeduction(element)
{
  $('#hdnEditInDedEmpPayTransInDedId').val($(element).data("emppaytransinded_id"));
  $('#hdnEditInDedEmpPayTransId').val($(element).data("emppaytrans_id"));
  $('#hdnEditInDedInDedId').val($(element).data("inded_id"));
  $('#txtEditInDedName').val($(element).data('inded_name'));
 
  $('[name="amount_type"][value="' + ($(element).data('is_fixed_amt') ? 'fixed' : ($(element).data('is_percent_amt') ? 'perc' : 'daysbased'))  + '"]').prop('checked', true);

  
  if($(element).data('worked_days_based'))
  {
    $('#txtEditInDedAmount').val($(element).data('base_amount'));
    $('#lblEditInDed_daysbased').html('Computed amount is ' + $(element).data('amount'))
  }
  else
  {
    $('#txtEditInDedAmount').val($(element).data('amount'));
    $('#lblEditInDed_daysbased').html('');
  }
    
  $('#chkEditInDedIsOverride').prop('checked', $(element).data('is_override'));

  $('#mdlEditIncomeDeduction').modal('show');
}

</script>

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

<!-- .Javascript -->