accounting_dev/application/views/employees/leave_requests.php

<div class="container mt-4">

    <div class="card modern-card shadow-sm border-0 rounded-4">

        <div class="card-body p-4">

            <div class="d-flex justify-content-between mb-3">

                <h5 class="mb-0">
                    Leave Requests
                </h5>

                <button class="btn btn-warning btn-add">
                    Tambah Leave
                </button>

            </div>

            <div class="table-responsive">

                <table id="tableLeave"
                       class="table modern-table align-middle w-100">

                    <thead class="table-light">

                        <tr>

                            <th width="5%">No</th>
                            <th>Finger ID</th>
                            <th>Employee</th>
                            <th>Jenis Leave</th>
                            <th>Tanggal Mulai</th>
                            <th>Tanggal Selesai</th>
                            <th>Total</th>
                            <th>Status</th>
                            <th width="15%">Aksi</th>

                        </tr>

                    </thead>

                    <tbody></tbody>

                </table>

            </div>

        </div>

    </div>

</div>

<!-- MODAL -->
<div class="modal fade" id="modalLeave">

    <div class="modal-dialog modal-dialog-centered">

        <div class="modal-content rounded-4">

            <div class="modal-header bg-warning text-white">

                <h5 class="modal-title">
                    Tambah Leave
                </h5>

                <button class="btn-close btn-close-white"
                        data-bs-dismiss="modal"></button>

            </div>

            <div class="modal-body">

                <input type="hidden" id="inputId">

                <label class="fw-semibold">
                    Employee
                </label>

                <select class="form-control select-search"
                        id="employee_id">

                    <option value="">
                        Pilih Employee
                    </option>

                    <?php foreach($employees as $e): ?>

                        <option value="<?= $e->id ?>">

                            <?= $e->fingerprint_user_id ?>
                            -
                            <?= $e->full_name ?>

                        </option>

                    <?php endforeach; ?>

                </select>

                <label class="fw-semibold mt-2">
                    Jenis Cuti / Izin
                </label>
                
                <select class="form-control"
                        id="leave_type">
                
                    <option value="annual">
                        Cuti Tahunan
                    </option>
                
                    <option value="sick">
                        Sakit
                    </option>
                
                    <option value="permit">
                        Izin
                    </option>
                
                    <option value="maternity">
                        Cuti Melahirkan
                    </option>
                
                    <option value="unpaid">
                        Cuti Tidak Dibayar
                    </option>
                
                </select>

                <div class="row">

                    <div class="col-md-6">

                        <label class="fw-semibold mt-2">
                            Start Date
                        </label>

                        <input type="date"
                               class="form-control"
                               id="start_date">

                    </div>

                    <div class="col-md-6">

                        <label class="fw-semibold mt-2">
                            End Date
                        </label>

                        <input type="date"
                               class="form-control"
                               id="end_date">

                    </div>

                </div>

                <label class="fw-semibold mt-2">
                    Approval Status
                </label>

                <select class="form-control"
                        id="approval_status">

                    <option value="pending">
                        Pending
                    </option>

                    <option value="approved">
                        Approved
                    </option>

                    <option value="rejected">
                        Rejected
                    </option>

                </select>

                <label class="fw-semibold mt-2">
                    Reason
                </label>

                <textarea class="form-control"
                          id="reason"
                          rows="4"></textarea>

            </div>

            <div class="modal-footer">

                <button class="btn btn-secondary"
                        data-bs-dismiss="modal">

                    Batal

                </button>

                <button class="btn btn-warning"
                        id="btnSimpan">

                    Simpan

                </button>

            </div>

        </div>

    </div>

</div>

<script>

$(function(){

    let table = $('#tableLeave').DataTable({
        processing:true,
        responsive:true,
        autoWidth:false,
        ajax:{
            url:`<?= base_url(); ?>leaverequests/get_data`,
            dataSrc:'data'
        },
        order:[]
    });

    // =====================================
    // RESET
    // =====================================
    function resetForm(){

        $('#inputId').val('');
        $('#employee_id').val('');
        $('#leave_type').val('annual');
        $('#start_date').val('');
        $('#end_date').val('');
        $('#approval_status').val('pending');
        $('#reason').val('');

        $('#modalLeave .modal-title')
            .text('Tambah Leave');
    }

    // =====================================
    // ADD
    // =====================================
    $('.btn-add').click(function(){

        resetForm();

        $('#btnSimpan')
            .data('action','add');

        $('#modalLeave').modal('show');

    });

    // =====================================
    // SAVE UPDATE
    // =====================================
    $('#btnSimpan').click(function(){

        let action = $(this).data('action');

        let data = {

            id: $('#inputId').val(),

            employee_id: $('#employee_id').val(),

            leave_type: $('#leave_type').val(),

            start_date: $('#start_date').val(),

            end_date: $('#end_date').val(),

            approval_status: $('#approval_status').val(),

            reason: $('#reason').val()
        };

        if(
            !data.employee_id ||
            !data.start_date ||
            !data.end_date
        ){

            Swal.fire(
                'Warning',
                'Data wajib diisi',
                'warning'
            );

            return;
        }

        let url = action == 'add'
            ? `<?= base_url(); ?>leaverequests/save`
            : `<?= base_url(); ?>leaverequests/update`;

        $.ajax({
            url:url,
            type:'POST',
            data:data,
            dataType:'json',
            success:function(res){

                if(res.status){

                    $('#modalLeave').modal('hide');

                    table.ajax.reload(null,false);

                    Swal.fire(
                        'Sukses',
                        res.message,
                        'success'
                    );

                } else {

                    Swal.fire(
                        'Error',
                        res.message,
                        'error'
                    );
                }

            }
        });

    });

    // =====================================
    // EDIT
    // =====================================
    $(document).on('click','.btn-edit',function(){

        let id = $(this).data('id');

        $.get(
            `<?= base_url(); ?>leaverequests/detail/` + id,
            function(res){

                $('#inputId').val(res.id);

                $('#employee_id').val(res.employee_id);

                $('#leave_type').val(res.leave_type);

                $('#start_date').val(res.start_date);

                $('#end_date').val(res.end_date);

                $('#approval_status')
                    .val(res.approval_status);

                $('#reason').val(res.reason);

                $('#modalLeave .modal-title')
                    .text('Edit Leave');

                $('#btnSimpan')
                    .data('action','edit');

                $('#modalLeave').modal('show');

            },
            'json'
        );

    });

    // =====================================
    // DELETE
    // =====================================
    $(document).on('click','.btn-delete',function(){

        let id = $(this).data('id');

        Swal.fire({
            title:'Yakin hapus?',
            text:'Data tidak bisa dikembalikan',
            icon:'warning',
            showCancelButton:true
        }).then((result)=>{

            if(result.isConfirmed){

                $.get(
                    `<?= base_url(); ?>leaverequests/delete/` + id,
                    function(res){

                        if(res.status){

                            table.ajax.reload(null,false);

                            Swal.fire(
                                'Sukses',
                                res.message,
                                'success'
                            );
                        }

                    },
                    'json'
                );

            }

        });

    });

});

</script>