kwpayroll/app/Views/payroll/incomedeductionview.php

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

<!-- Title of the page -->
<?= $this->section('title') ?>Income and Deduction<?= $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">

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

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

<!-- Container title -->
<?= $this->section('containertitle') ?>Income and Deduction<?= $this->endSection() ?>
<!-- .Container title -->

<!-- Active breadcrumb -->
<?= $this->section('breadcrumbs') ?>
<li class="breadcrumb-item active">Income and Deduction</li>
<?= $this->endSection() ?>
<!-- .Active breadcrumb -->

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

<!-- Modal Add Income and Deduction -->
<div class="modal fade" id="mdlAddInDed">
  <div class="modal-dialog">
    <div class="modal-content">
      <form action="<?= url_to('payroll/saveinded') ?>" method="post">
        <div class="modal-header">
          <h4 class="modal-title" >New Income or Deduction</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">Income or Deduction Information</p>
              <div class="row">
                <div class="col-12">
                    <div class="form-group">
                        <label for="txtInDedName">Income or Deduction Name</label>
                        <input class="form-control" type="text" id="txtInDedName" name="inded_name" values="<?= old('inded_name') ?>">
                    </div>
                    <div class="form-group">
                        <label for="txtPayslipDisplay">Display on Payslip</label>
                        <input class="form-control" type="text" id="txtPayslipDisplay" name="payslip_display" value="<?= old('payslip_display') ?>">
                        <p style="font-size: smaller"><i>Short name that will appear in payslip</i></p>
                    </div>
                    <div class="form-group">
                        <label for="txtCOACode">COA Code</label>
                        <input class="form-control" type="text" id="txtCOACode" name="coa_code" value="<?= old('coa_code') ?>">
                        <p style="font-size: smaller"><i>COA code (Chart of Account) is a code used by accounting department</i></p>
                    </div>
                    <div class="form-group">
                        <div class="custom-control custom-checkbox">
                            <input class="custom-control-input" type="checkbox" id="chkIsIncome" name="is_income">
                            <label for="chkIsIncome" class="custom-control-label">Is Income? this will be treated as deduction if unchecked</label>
                        </div>  
                    </div>
                    <div class="form-group">
                        <div class="custom-control custom-checkbox">
                            <input class="custom-control-input" type="checkbox" id="chkIsTaxable" name="is_taxable">
                            <label for="chkIsTaxable" class="custom-control-label">Is Taxable? this will be treated as non-taxable if unchecked</label>
                        </div>  
                    </div>
                    <div class="form-group">
                        <div class="custom-control custom-checkbox">
                            <input class="custom-control-input" type="checkbox" id="chkIncludeInGross" name="include_in_gross" checked>
                            <label for="chkIncludeInGross" class="custom-control-label">Include in Gross?</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 Edit Income and Deduction -->
<div class="modal fade" id="mdlEditInDed">
  <div class="modal-dialog">
    <div class="modal-content">
      <form action="<?= url_to('payroll/saveinded') ?>" method="post">
        <div class="modal-header bg-warning">
          <h4 class="modal-title" >Edit Income or Deduction</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">Income or Deduction Information</p>
              <div class="row">
                <div class="col-12">
                    <div class="form-group">
                        <label for="txtEditInDedName">Income or Deduction Name</label>
                        <input class="form-control" type="text" id="txtEditInDedName" name="inded_name" readonly>
                        <input type="hidden" name="inded_id" id="hdnEditInDedID">
                    </div>
                    <div class="form-group">
                        <label for="txtEditPayslipDisplay">Display on Payslip</label>
                        <input class="form-control" type="text" id="txtEditPayslipDisplay" name="payslip_display" readonly>
                    </div>
                    <div class="form-group">
                        <label for="txtEditCOACode">COA Code</label>
                        <input class="form-control" type="text" id="txtEditCOACode" name="coa_code" value="<?= old('coa_code') ?>">
                        <p style="font-size: smaller"><i>COA code (Chart of Account) is a code used by accounting department</i></p>
                    </div>
                    <div class="form-group">
                        <div class="custom-control custom-checkbox">
                            <input class="custom-control-input" type="checkbox" id="chkEditIsIncome" name="is_income">
                            <label for="chkEditIsIncome" class="custom-control-label">Is Income? this will be treated as deduction if unchecked</label>
                        </div>  
                    </div>
                    <div class="form-group">
                        <div class="custom-control custom-checkbox">
                            <input class="custom-control-input" type="checkbox" id="chkEditIsTaxable" name="is_taxable">
                            <label for="chkEditIsTaxable" class="custom-control-label">Is Taxable? this will be treated as non-taxable if unchecked</label>
                        </div>  
                    </div>
                    <div class="form-group">
                        <div class="custom-control custom-checkbox">
                            <input class="custom-control-input" type="checkbox" id="chkEditIncludeInGross" name="include_in_gross" checked>
                            <label for="chkEditIncludeInGross" class="custom-control-label">Include in Gross?</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 Income and Deduction</h3>
            </div>
            <div class="card-body">
                <div class="card-body table-responsive p-0">
                    <?= $tblIncomeDeduction ?>
                </div>
            </div>
            <div class="card-footer">
                <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#mdlAddInDed">Add Income or Deduction</button>
            </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>
$(document).ready(function() {
   
  $('#tblIncomeDeduction').DataTable({
      "paging": true,
      "lengthChange": false,
      "searching": true,
      "ordering": true,
      "info": true,
      "autoWidth": false,
      "responsive": true,
    });
  
});

function editIncomeDeduction(element)
{
  $("#hdnEditInDedID").val($(element).data("inded_id"));
  $("#txtEditInDedName").val($(element).data("inded_name"));
  $("#txtEditPayslipDisplay").val($(element).data("payslip_display"));
  $("#txtEditCOACode").val($(element).data("coa_code"));
  $("#chkEditIsIncome").prop("checked", $(element).data("is_income"));
  $("#chkEditIsTaxable").prop("checked", $(element).data("is_taxable"));
  $("#chkEditIncludeInGross").prop("checked", $(element).data("include_in_gross"));
  $("#mdlEditInDed").modal("show");
}

</script>

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

<!-- .Javascript -->