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

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

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

<!-- Select2 -->
<link rel="stylesheet" href="/adminlte/plugins/select2/css/select2.min.css">
<link rel="stylesheet" href="/adminlte/plugins/select2-bootstrap4-theme/select2-bootstrap4.min.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">

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

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

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

<!-- Active breadcrumb -->
<?= $this->section('breadcrumbs') ?>
<li class="breadcrumb-item active">Employee Payroll Info</li>
<?= $this->endSection() ?>
<!-- .Active breadcrumb -->

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

<!-- Modal Add Employee Payroll Info -->
<div class="modal fade" id="mdlAddEmpPayInfo">
  <div class="modal-dialog">
    <div class="modal-content">
      <form action="<?= url_to('payroll/saveemppayinfo') ?>" method="post">
        <div class="modal-header">
          <h4 class="modal-title" >New Employee Payroll Information</h4>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body">
          <div class="row">
            <div class="col-12">
              <p class="lead">Employee Payroll Information</p>
              <div class="row">
                <div class="col-12">
                    <div class="form-group">
                        <label>Select Employee</label>
                        <select class="form-control select2" style="width: 100%;" name="employee_id">
                            <?php foreach($employees as $employee): ?>
                                <?php $selected = (old('employee_id') == $employee->employee_id) ? 'selected' : ''; ?>
                                <?= '<option value="'.$employee->employee_id.'" '.$selected.'>'.$employee->last_name.', '.$employee->first_name.'</option>' ?>
                            <?php endforeach; ?>
                        </select>
                    </div>
                    <div class="form-group">
                        <label>Select Payroll Type</label>
                        <select class="form-control" style="width: 100%;" name="paytype_id">
                            <?php foreach($paytypes as $paytype): ?>
                                <?php $selected = (old('paytype_id') == $paytype->paytype_id) ? 'selected' : ''; ?>
                                <?= '<option value="'.$paytype->paytype_id.'" '.$selected.'>['.$paytype->paytype_code.'] '.$paytype->paytype_name.'</option>' ?>
                            <?php endforeach; ?>
                        </select>
                    </div>
                    <div class="form-group">
                        <div class="custom-control custom-checkbox">
                            <input class="custom-control-input" type="checkbox" id="chkIsATM" name="is_ATM">
                            <label for="chkIsATM" class="custom-control-label">Salary is through ATM.</label>
                        </div>  
                    </div>
                    <div class="form-group">
                        <label for="txtSavingsAccount">Savings Account Number</label>
                        <input class="form-control" type="text" id="txtSavingsAccount" name="savings_account" value="<?= old('savings_account') ?>">
                    </div>
                    <div class="form-group">
                        <label>Select Work Days</label>
                        <select class="form-control" name="work_days" id="lstWorkDays">
                            <?php foreach($workdaystype as $keys=>$workdays): ?>
                                <option value="<?= $keys ?>"><?= $workdays ?></option>
                            <?php endforeach; ?>
                        </select>
                    </div>
                    <div class="form-group">
                        <label>How Will Basic Pay Be Computed?</label>
                        <select class="form-control" name="basic_sal_computation" id="lstSalComputation">
                            <?php foreach($salarycomputations as $keys=>$salarycomputation): ?>
                                <option value="<?= $keys ?>"><?= $salarycomputation ?></option>
                            <?php endforeach; ?>
                        </select>
                    </div>
                    <div class="form-group">
                      <label for="txtMonthlyBasicPay">Monthly Basic Salary</label>
                      <div class="input-group mb-3">
                          <input class="form-control rounded-0" type="text" id="txtMonthlyBasicPay" name="basic_monthly_pay" values="<?= old('basic_monthly_pay') ?>">
                          <span class="input-group-append">
                            <button type="button" class="btn btn-info btn-flat" onclick="computeBasicPay('fromMonthly')">Compute</button>
                          </span>
                      </div>
                      <p><small><i>Click compute so other salary field will be filled with computed value</i></small></p>
                    </div>
                    <div class="form-group">
                        <label for="txtSemiMonthlyBasicPay">Semi-monthly Basic Salary</label>
                        <input class="form-control" type="text" id="txtSemiMonthlyBasicPay" name="basic_semi_monthly_pay" value="<?= old('basic_semi_monthly_pay') ?>">
                    </div>
                    <div class="form-group">
                      <label for="txtDailyBasicPay">Daily Basic Salary</label>
                      <div class="input-group mb-3">
                          <input class="form-control rounded-0" type="text" id="txtDailyBasicPay" name="basic_daily_pay" values="<?= old('basic_daily_pay') ?>">
                          <span class="input-group-append">
                            <button type="button" class="btn btn-info btn-flat" onclick="computeBasicPay('fromDaily')">Compute</button>
                          </span>
                      </div>
                      <p><small><i>Click compute so other salary field will be filled with computed value</i></small></p>
                    </div>
                    <div class="form-group">
                        <label for="txtHourlyBasicPay">Hourly Basic Salary</label>
                        <input class="form-control" type="text" id="txtHourlyBasicPay" name="basic_hourly_pay" value="<?= old('basic_hourly_pay') ?>">
                    </div>
                    <p id="txtSalaryFormula"></p>
                    <div class="form-group">
                        <div class="custom-control custom-checkbox">
                            <input class="custom-control-input" type="checkbox" id="chkHasCola" name="has_cola">
                            <label for="chkHasCola" class="custom-control-label">Has COLA</label>
                        </div>  
                    </div>
                    <h4>Government Required Contributions</h4>
                    <p>Define statutory deduction below which applies to an employee.</p>
                    <div class="form-group">
                        <div class="custom-control custom-checkbox">
                            <input class="custom-control-input" type="checkbox" id="chkHasPhilhealth" name="has_philhealth">
                            <label for="chkHasPhilhealth" class="custom-control-label">Has PhilHealth</label>
                        </div>  
                    </div>
                    <div class="form-group">
                        <div class="custom-control custom-checkbox">
                            <input class="custom-control-input" type="checkbox" id="chkHasHDMF" name="has_hdmf">
                            <label for="chkHasHDMF" class="custom-control-label">Has Pag-IBIG</label>
                        </div>  
                    </div>
                    <div class="form-group">
                        <div class="custom-control custom-checkbox">
                            <input class="custom-control-input" type="checkbox" id="chkHasSSS" name="has_sss">
                            <label for="chkHasSSS" class="custom-control-label">Has SSS</label>
                        </div>  
                    </div>
                    <div class="form-group">
                        <div class="custom-control custom-checkbox">
                            <input class="custom-control-input" type="checkbox" id="chkHasGSIS" name="has_gsis">
                            <label for="chkHasGSIS" class="custom-control-label">Has GSIS</label>
                        </div>  
                    </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="modal-footer">
            <button type="submit" class="btn btn-primary">Save changes</button>
            <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        </div>
      </form>
    </div>
  </div>
</div>

<!-- Modal Add Employee Payroll Info -->
<div class="modal fade" id="mdlEditEmpPayInfo">
  <div class="modal-dialog">
    <div class="modal-content">
      <form action="<?= url_to('payroll/saveemppayinfo') ?>" method="post">
        <div class="modal-header bg-warning">
          <h4 class="modal-title" >New Employee Payroll Information</h4>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body">
          <div class="row">
            <div class="col-12">
              <p class="lead">Employee Payroll Information</p>
              <div class="row">
                <div class="col-12">
                    <div class="form-group">
                        <label for="txtEditEmployeeName">[ID] Employee Name</label>
                        <input class="form-control" type="text" id="txtEditEmployeeName" readonly>
                        <input type="hidden" id="hdnEditEmpPayId" name="emppay_id"> <!-- Primary Key -->
                        <input type="hidden" id="hdnEditEmpId" name="employee_id">
                    </div>
                    <div class="form-group">
                        <label>Select Payroll Type</label>
                        <select class="form-control" name="paytype_id" id="cmbEditPayTypeID">
                            <?php foreach($paytypes as $paytype): ?>
                                <?php $selected = (old('paytype_id') == $paytype->paytype_id) ? 'selected' : ''; ?>
                                <?= '<option value="'.$paytype->paytype_id.'" '.$selected.'>['.$paytype->paytype_code.'] '.$paytype->paytype_name.'</option>' ?>
                            <?php endforeach; ?>
                        </select>
                    </div>
                    <div class="form-group">
                        <div class="custom-control custom-checkbox">
                            <input class="custom-control-input" type="checkbox" id="chkEditIsATM" name="is_ATM">
                            <label for="chkEditIsATM" class="custom-control-label">Salary is through ATM.</label>
                        </div>  
                    </div>
                    <div class="form-group">
                        <label for="txtEditSavingsAccount">Savings Account Number</label>
                        <input class="form-control" type="text" id="txtEditSavingsAccount" name="savings_account" value="<?= old('savings_account') ?>">
                    </div>
                    <div class="form-group">
                        <label>Select Work Days</label>
                        <select class="form-control" name="work_days" id="cmbEditWorkDays">
                            <?php foreach($workdaystype as $keys=>$workdays): ?>
                                <option value="<?= $keys ?>"><?= $workdays ?></option>
                            <?php endforeach; ?>
                        </select>
                    </div>
                    <div class="form-group">
                    <label>How Will Basic Pay Be Computed?</label>
                        <select class="form-control" name="basic_sal_computation" id="cmbEditSalComputation">
                            <?php foreach($salarycomputations as $keys=>$salarycomputation): ?>
                                <option value="<?= $keys ?>"><?= $salarycomputation ?></option>
                            <?php endforeach; ?>
                        </select>
                    </div>
                    <div class="form-group">
                      <label for="txtEditMonthlyBasicPay">Monthly Basic Salary</label>
                      <div class="input-group mb-3">
                          <input class="form-control rounded-0" type="text" id="txtEditMonthlyBasicPay" name="basic_monthly_pay" values="<?= old('basic_monthly_pay') ?>">
                          <span class="input-group-append">
                            <button type="button" class="btn btn-info btn-flat" onclick="computeBasicPayOnEditMode('fromMonthly')">Compute</button>
                          </span>
                      </div>
                      <p><small><i>Click compute so other salary field will be filled with computed value</i></small></p>
                    </div>
                    <div class="form-group">
                        <label for="txtEditSemiMonthlyBasicPay">Semi-monthly Basic Salary</label>
                        <input class="form-control" type="text" id="txtEditSemiMonthlyBasicPay" name="basic_semi_monthly_pay" value="<?= old('basic_semi_monthly_pay') ?>">
                    </div>
                    <div class="form-group">
                      <label for="txtEditDailyBasicPay">Daily Basic Salary</label>
                      <div class="input-group mb-3">
                          <input class="form-control rounded-0" type="text" id="txtEditDailyBasicPay" name="basic_daily_pay" values="<?= old('basic_daily_pay') ?>">
                          <span class="input-group-append">
                            <button type="button" class="btn btn-info btn-flat" onclick="computeBasicPayOnEditMode('fromDaily')">Compute</button>
                          </span>
                      </div>
                      <p><small><i>Click compute so other salary field will be filled with computed value</i></small></p>
                    </div>
                    <div class="form-group">
                        <label for="txtEditHourlyBasicPay">Hourly Basic Salary</label>
                        <input class="form-control" type="text" id="txtEditHourlyBasicPay" name="basic_hourly_pay" value="<?= old('basic_hourly_pay') ?>">
                    </div>
                    <p id="txtSalaryFormula"></p>
                    <div class="form-group">
                        <div class="custom-control custom-checkbox">
                            <input class="custom-control-input" type="checkbox" id="chkEditHasCola" name="has_cola">
                            <label for="chkEditHasCola" class="custom-control-label">Has COLA</label>
                        </div>  
                    </div>
                    <h4>Government Required Contributions</h4>
                    <p>Define statutory deduction below which applies to an employee.</p>
                    <div class="form-group">
                        <div class="custom-control custom-checkbox">
                            <input class="custom-control-input" type="checkbox" id="chkEditHasPhilhealth" name="has_philhealth">
                            <label for="chkEditHasPhilhealth" class="custom-control-label">Has PhilHealth</label>
                        </div>  
                    </div>
                    <div class="form-group">
                        <div class="custom-control custom-checkbox">
                            <input class="custom-control-input" type="checkbox" id="chkEditHasHDMF" name="has_hdmf">
                            <label for="chkEditHasHDMF" class="custom-control-label">Has Pag-IBIG</label>
                        </div>  
                    </div>
                    <div class="form-group">
                        <div class="custom-control custom-checkbox">
                            <input class="custom-control-input" type="checkbox" id="chkEditHasSSS" name="has_sss">
                            <label for="chkEditHasSSS" class="custom-control-label">Has SSS</label>
                        </div>  
                    </div>
                    <div class="form-group">
                        <div class="custom-control custom-checkbox">
                            <input class="custom-control-input" type="checkbox" id="chkEditHasGSIS" name="has_gsis">
                            <label for="chkEditHasGSIS" class="custom-control-label">Has GSIS</label>
                        </div>  
                    </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="modal-footer">
            <button type="submit" class="btn btn-primary">Save changes</button>
            <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        </div>
      </form>
    </div>
  </div>
</div>


<div class="row">
    <div class="col-12">
        <div class="card">
            <div class="card-header">
                <h3 class="card-title">List of Employee Payroll Information</h3>
            </div>
            <div class="card-body">
                <div class="card-body table-responsive p-0">
                    <?= $tblEmpPayInfo ?>
                </div>
            </div>
            <div class="card-footer">
                <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#mdlAddEmpPayInfo">Add Employee Payroll Information</button>
            </div>
        </div>
    </div>
</div>


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

<!-- Javascript -->

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

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

<!-- 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>
$(document).ready(function() {
    
    //Initialize Select2 Elements
    $('.select2').select2({
        dropdownParent: $('#mdlAddEmpPayInfo')
    });

    //Initialize Select2 Elements
    $('.select2bs4').select2({
    theme: 'bootstrap4'
    });

    $('#tblEmployeeInfo').DataTable({
      "paging": true,
      "lengthChange": false,
      "searching": true,
      "ordering": true,
      "info": true,
      "autoWidth": false,
      "responsive": true,
    });
});

function computeBasicPay(fromSource)
{
    var monthlyBasic = 0;

    switch(fromSource)
    {
        case 'fromDaily':
            monthlyBasic = Number($("#txtDailyBasicPay").val()) * Number($("#lstWorkDays").val()) / 12;
            break;

        case 'fromMonthly':
            monthlyBasic = Number($("#txtMonthlyBasicPay").val());
            break;
    }

    if(fromSource != 'fromMonthly') $("#txtMonthlyBasicPay").val(monthlyBasic);
    $("#txtSemiMonthlyBasicPay").val(monthlyBasic / 2);
    if(fromSource != 'fromDaily') $("#txtDailyBasicPay").val(monthlyBasic * 12 / Number($("#lstWorkDays").val()));
    $("#txtHourlyBasicPay").val(monthlyBasic * 12 / Number($("#lstWorkDays").val()) / 8);

    $("#txtSalaryFormula").html("Formula: Basic Salary x 12 / " + $("#lstWorkDays").val());
}

function computeBasicPayOnEditMode(fromSource)
{
    var monthlyBasic = 0;

    switch(fromSource)
    {
        case 'fromDaily':
            monthlyBasic = Number($("#txtEditDailyBasicPay").val()) * Number($("#cmbEditWorkDays").val()) / 12;
            break;

        case 'fromMonthly':
            monthlyBasic = Number($("#txtEditMonthlyBasicPay").val());
            break;
    }

    if(fromSource != 'fromMonthly') $("#txtEditMonthlyBasicPay").val(monthlyBasic);
    $("#txtEditSemiMonthlyBasicPay").val(monthlyBasic / 2);
    if(fromSource != 'fromDaily') $("#txtEditDailyBasicPay").val(monthlyBasic * 12 / Number($("#cmbEditWorkDays").val()));
    $("#txtEditHourlyBasicPay").val(monthlyBasic * 12 / Number($("#cmbEditWorkDays").val()) / 8);

    $("#txtEditSalaryFormula").html("Formula: Basic Salary x 12 / " + $("#cmbEditWorkDays").val());
}

function editEmpPayInfo(element)
{
    $("#hdnEditEmpPayId").val($(element).data("emppay_id"));
    $("#txtEditEmployeeName").val("[" + $(element).data("company_issued_id") + "] " + $(element).data("last_name") + ", " + $(element).data("first_name"));
    $("#hdnEditEmpId").val($(element).data("employee_id"));
    $("#cmbEditPayTypeID").val($(element).data("paytype_id"));
    $("#chkEditIsATM").prop('checked', $(element).data("is_atm"));
    $("#txtEditSavingsAccount").val($(element).data("savings_account"));
    $("#cmbEditWorkDays").val($(element).data("work_days"));
    $("#cmbEditSalComputation").val($(element).data("basic_sal_computation"));
    $("#txtEditMonthlyBasicPay").val($(element).data("basic_monthly_pay"));
    $("#txtEditSemiMonthlyBasicPay").val($(element).data("basic_semi_monthly_pay"));
    $("#txtEditDailyBasicPay").val($(element).data("basic_daily_pay"));
    $("#txtEditHourlyBasicPay").val($(element).data("basic_hourly_pay"));
    $("#chkEditHasCola").prop('checked', $(element).data("has_cola"));
    $("#chkEditHasPhilhealth").prop('checked', $(element).data("has_philhealth"));
    $("#chkEditHasHDMF").prop('checked', $(element).data("has_hdmf"));
    $("#chkEditHasSSS").prop('checked', $(element).data("has_sss"));
    $("#chkEditHasGSIS").prop('checked', $(element).data("has_gsis"));

    $("#mdlEditEmpPayInfo").modal("show");
}

</script>

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

<!-- .Javascript -->