accounting_dev/application/views/employees/holidays.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">
                    Master Holiday
                </h5>

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

            </div>

            <div class="table-responsive">

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

                    <thead class="table-light">
                        <tr>
                            <th width="5%">No</th>
                            <th>Tanggal</th>
                            <th>Nama Holiday</th>
                            <th>Type</th>
                            <th width="15%">Aksi</th>
                        </tr>
                    </thead>

                    <tbody></tbody>

                </table>

            </div>

        </div>

    </div>

</div>

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

    <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 Holiday
                </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">
                    Tanggal Holiday
                </label>

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

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

                <input type="text"
                       class="form-control"
                       id="holiday_name">

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

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

                    <option value="1">
                        Nasional
                    </option>

                    <option value="0">
                        Perusahaan
                    </option>

                </select>

            </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 = $('#tableHoliday').DataTable({
        processing:true,
        responsive:true,
        autoWidth:false,
        ajax:{
            url:`<?= base_url(); ?>holidays/get_data`,
            dataSrc:'data'
        },
        order:[],
        columns:[
            {data:0, orderable:false},
            {data:1},
            {data:2},
            {data:3},
            {data:4, orderable:false}
        ],
        language:{
            processing:`
                <div class="text-center">
                    <div class="spinner-border text-warning"></div>
                </div>
            `
        }
    });

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

        $('#inputId').val('');
        $('#holiday_date').val('');
        $('#holiday_name').val('');
        $('#is_national').val(1);

        $('#modalHoliday .modal-title')
            .text('Tambah Holiday');
    }

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

        resetForm();

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

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

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

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

        let data = {
            id: $('#inputId').val(),
            holiday_date: $('#holiday_date').val(),
            holiday_name: $('#holiday_name').val(),
            is_national: $('#is_national').val()
        };

        if(
            !data.holiday_date ||
            !data.holiday_name
        ){
            Swal.fire(
                'Warning',
                'Tanggal & Nama Holiday wajib diisi',
                'warning'
            );

            return;
        }

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

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

                if(res.status){

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

                    table.ajax.reload(null,false);

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

                } else {

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

                Swal.fire(
                    'Error',
                    'Terjadi kesalahan server',
                    'error'
                );
            }
        });

    });

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

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

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

                $('#inputId').val(res.id);
                $('#holiday_date').val(res.holiday_date);
                $('#holiday_name').val(res.holiday_name);
                $('#is_national').val(res.is_national);

                $('#modalHoliday .modal-title')
                    .text('Edit Holiday');

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

                $('#modalHoliday').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,
            confirmButtonText:'Ya, hapus'
        }).then((result)=>{

            if(result.isConfirmed){

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

                        if(res.status){

                            table.ajax.reload(null,false);

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

                        } else {

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

                    },
                    'json'
                );

            }

        });

    });

});
</script>