kwpayroll/app/Views/payroll/paytransactionview.php

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

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

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

<!-- daterange picker -->
<link rel="stylesheet" href="<?= base_url() ?>adminlte/plugins/daterangepicker/daterangepicker.css">

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

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

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

<!-- Active breadcrumb -->
<?= $this->section('activebreadcrumb') ?>Payroll Transaction<?= $this->endSection() ?>
<!-- .Active breadcrumb -->

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

<!-- Modal Add Branch -->
<div class="modal fade" id="mdlAddPayTrans">
  <div class="modal-dialog">
    <div class="modal-content">
      <form action="<?= url_to('payroll/addpaytrans') ?>" method="post">
        <div class="modal-header">
          <h4 class="modal-title" >New Payroll Transaction</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">Payroll Group Information</p>
              <div class="row">
                <div class="col-12">
                    <div class="form-group">
                        <label>Select Payroll Type</label>
                        <select class="form-control" 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">
                        <label>Select Schedule</label>
                        <select class="form-control" name="payschedule_id">
                            <?php foreach($paySchedules as $paySchedule): ?>
                                <?= '<option value="'.$paySchedule->payschedule_id.'" '.$selected.'>['.$paySchedule->sched_code.'] '.$paySchedule->sched_name.'</option>' ?>
                            <?php endforeach; ?>
                        </select>
                    </div>
                    <div class="form-group">
                        <label>Payroll period:</label>
                        <div class="input-group">
                            <div class="input-group-prepend">
                            <span class="input-group-text">
                                <i class="far fa-calendar-alt"></i>
                            </span>
                            </div>
                            <input type="text" class="form-control float-right" id="txtPayrollFromTo" name="payroll_from_to">
                            <input type="hidden" id="txtPayrollFrom" name="payroll_from">
                            <input type="hidden" id="txtPayrollTo" name="payroll_to">
                            
                            <!-- set default value -->
                            <input type="hidden" name="total_emp" value="0">
                            <input type="hidden" name="total_gross" value="0">
                            <input type="hidden" name="is_open" value="1">
                        </div>
                        <!-- /.input group -->
                    </div>
                    <div class="form-group">
                        <label for="txtNoOfDays">Number of Days</label>
                        <input class="form-control" type="text" id="txtNoOfDays" name="no_of_days" value="<?= old('no_of_days') ?>" readonly>
                    </div>
                    <div class="form-group">
                        <label for="txtRemarks">Remarks</label>
                        <textarea class="form-control" rows="3" placeholder="Enter remarks here..." name="remarks" id="txtRemarks"><?= old('remarks') ?></textarea>
                    </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 Payroll Transaction</h3>
            </div>
            <div class="card-body">
                <div class="card-body table-responsive p-0">
                    <?= $tblPayTrans ?>
                </div>
            </div>
            <div class="card-footer">
                <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#mdlAddPayTrans">Add Payroll Transaction</button>
            </div>
        </div>
    </div>
</div>

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

<!-- Javascript -->

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

<!-- InputMask -->
<script src="<?= base_url() ?>adminlte/plugins/moment/moment.min.js"></script>
<script src="<?= base_url() ?>adminlte/plugins/inputmask/jquery.inputmask.min.js"></script>
<!-- date-range-picker -->
<script src="<?= base_url() ?>adminlte/plugins/daterangepicker/daterangepicker.js"></script>

<script>
$(document).ready(function() {
    //Date range picker
    $('#txtPayrollFromTo').daterangepicker();

    $("#txtPayrollFromTo").on("change", function() {
        var from = $(this).data('daterangepicker').startDate.format('YYYY-MM-DD');
        var to = $(this).data('daterangepicker').endDate.format('YYYY-MM-DD');
        $("#txtNoOfDays").val(moment(to).diff(moment(from), 'days') + 1);

        $("#txtPayrollFrom").val(from);
        $("#txtPayrollTo").val(to);
    });
});

</script>

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

<!-- .Javascript -->