<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 Shift
                </h5>

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

            </div>

            <div class="table-responsive">

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

                    <thead class="table-light">
                        <tr>
                            <th width="5%">No</th>
                            <th>Kode</th>
                            <th>Nama Shift</th>
                            <th>Jam Masuk</th>
                            <th>Jam Pulang</th>
                            <th>Toleransi</th>
                            <th>Jam Kerja</th>
                            <th>Type</th>
                            <th width="15%">Aksi</th>
                        </tr>
                    </thead>

                    <tbody></tbody>

                </table>

            </div>

        </div>

    </div>

</div>

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

    <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 Shift
                </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">
                    Kode Shift
                </label>

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

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

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

                <div class="row">

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

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

                        <input type="time"
                               class="form-control"
                               id="checkin_time">

                    </div>

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

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

                        <input type="time"
                               class="form-control"
                               id="checkout_time">

                    </div>

                </div>

                <div class="row">

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

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

                        <input type="number"
                               class="form-control"
                               id="late_tolerance_minutes">

                    </div>

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

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

                        <input type="number"
                               step="0.1"
                               class="form-control"
                               id="work_hours">

                    </div>

                </div>

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

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

                    <option value="0">
                        Normal Shift
                    </option>

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

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

        $('#inputId').val('');
        $('#shift_code').val('');
        $('#shift_name').val('');
        $('#checkin_time').val('');
        $('#checkout_time').val('');
        $('#late_tolerance_minutes').val(0);
        $('#work_hours').val(8);
        $('#is_night_shift').val(0);

        $('#modalShift .modal-title')
            .text('Tambah Shift');
    }

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

        resetForm();

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

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

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

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

        let data = {
            id: $('#inputId').val(),
            shift_code: $('#shift_code').val(),
            shift_name: $('#shift_name').val(),
            checkin_time: $('#checkin_time').val(),
            checkout_time: $('#checkout_time').val(),
            late_tolerance_minutes: $('#late_tolerance_minutes').val(),
            work_hours: $('#work_hours').val(),
            is_night_shift: $('#is_night_shift').val()
        };

        if(
            !data.shift_code ||
            !data.shift_name
        ){
            Swal.fire(
                'Warning',
                'Kode & Nama Shift wajib diisi',
                'warning'
            );

            return;
        }

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

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

                if(res.status){

                    $('#modalShift').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(); ?>` + 'shifts/detail/' + id,
            function(res){

                $('#inputId').val(res.id);
                $('#shift_code').val(res.shift_code);
                $('#shift_name').val(res.shift_name);
                $('#checkin_time').val(res.checkin_time);
                $('#checkout_time').val(res.checkout_time);
                $('#late_tolerance_minutes').val(res.late_tolerance_minutes);
                $('#work_hours').val(res.work_hours);
                $('#is_night_shift').val(res.is_night_shift);

                $('#modalShift .modal-title')
                    .text('Edit Shift');

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

                $('#modalShift').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(); ?>` + 'shifts/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>