@extends('Branch.layout')

@section('content')

    <style>
        .action-btns {
            display: flex;
            align-items: center;
            gap: 8px;
            flex-wrap: nowrap;
        }

        .action-btns .btn {
            margin: 0 !important;
        }
    </style>

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">


    <meta name="csrf-token" content="{{ csrf_token() }}">

    <link rel="stylesheet" href="https://cdn.datatables.net/1.13.6/css/jquery.dataTables.min.css">

    <div class="row align-items-center justify-content-between mb-3 mt-3 m-2">
        <div class="col-auto">
            <h5>Attendance</h5>
        </div>
        <div class="col-auto d-flex gap-2">
            <button class="btn btn-label-secondary" id="printBtn">
                <i class="bi bi-printer"></i> Print
            </button>
            <button class="btn btn-label-secondary" id="exportBtn">
                <i class="bi bi-download"></i> Export
            </button>
            <a href="{{ route('branch.add_attendance') }}"><button class="btn btn-primary">Add Attendance</button></a>
        </div>
    </div>

    <div class="card p-0 m-2 border-0 shadow-sm">

        {{-- Filters --}}
        <div class="row m-2 mt-1 g-3">
            <div class="col-lg-3">
                <label class="form-label">From Date</label>
                {{-- <input type="date" id="fromDate" class="form-control"> --}}
                <input type="text" class="form-control" id="fromDate" placeholder="DD/MM/YYYY">

            </div>
            <div class="col-lg-3">
                <label class="form-label">To Date</label>
                {{-- <input type="date" id="toDate" class="form-control" value="{{ now()->format('Y-m-d') }}"> --}}
                <input type="text" class="form-control" id="toDate" placeholder="DD/MM/YYYY">

            </div>
            <div class="col-lg-3">
                <label class="form-label">Attendance Type</label>
                <select id="attendanceType" class="form-select">
                    <option value="">All</option>
                    <option value="present">Present</option>
                    <option value="absent">Absent</option>
                </select>
            </div>

            <div class="col-lg-3">
                <label class="form-label">Duty Type</label>
                <select id="dutyType" class="form-select">
                    <option value="">All</option>
                    <option value="full_day">Full Day</option>
                    <option value="half_day">Half Day</option>
                    <option value="one_half_day">One & Half Day</option>
                    <option value="double_duty">Double Duty</option>
                </select>
            </div>

            <div class="col-lg-3">
                <label class="form-label">Search Staff</label>
                <input type="text" id="staffSearch" class="form-control" placeholder="Search Staff">
            </div>

            <div class="col-lg-2 d-flex align-items-end">
                <button class="btn btn-outline-secondary w-100" id="resetBtn">Reset</button>
            </div>
        </div>

        {{-- Table Controls --}}
        <div class="row mb-3 align-items-center p-3 g-2">

            {{-- <div class="col-md-1">

                <select id="pageLength" class="form-select">

                    <option value="10">10</option>
                    <option value="25">25</option>
                    <option value="50">50</option>
                    <option value="100">100</option>

                </select>

            </div> --}}

            <div class="col-md-3 ms-auto">

                <input type="text" id="customSearch" class="form-control" placeholder="Search">

            </div>

        </div>

        <div class="table-responsive p-3">

            <table class="table table-hover" id="usersTable" width="100%">

                <thead>

                    <tr>

                        <th>S.No</th>

                        <th>Date</th>

                        <th>ID</th>

                        <th>Name</th>

                        <th>Check In</th>

                        <th>Check Out</th>
                        <th>working Hours</th>

                        <th>Attendance Type</th>

                        <th>Assign</th>

                        <th>Salary</th>

                        <th>Duty Type</th>

                        <th>Action</th>

                    </tr>

                </thead>

                <tbody></tbody>

            </table>

        </div>

    </div>

    {{-- Salary Modal --}}
    <div class="modal fade" id="salaryModal" tabindex="-1">

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

            <div class="modal-content">

                <form id="salaryForm">

                    @csrf

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

                    <div class="modal-header">

                        <h5 class="modal-title">
                            Assign Duty Type
                        </h5>

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

                    </div>

                    <div class="modal-body">

                        <div class="mb-3">

                            <label class="form-label">
                                Duty Type
                            </label>

                            {{-- <select class="form-select" id="duty_type">

                                <option value="">
                                    Select
                                </option>

                                <option value="full_day">
                                    Full Day
                                </option>

                                <option value="half_day">
                                    Half Day
                                </option>

                                <option value="one_half_day">
                                    One & Half Day
                                </option>

                                <option value="double_duty">
                                    Double Duty
                                </option>

                            </select> --}}

                            <select class="form-select" id="duty_type">

                                <option value="">
                                    Select
                                </option>

                                <option value="full_day">
                                    Full Day
                                </option>

                                <option value="half_day">
                                    Half Day
                                </option>

                                <option value="one_half_day">
                                    One & Half Day
                                </option>

                                <option value="double_duty">
                                    Double Duty
                                </option>

                                <option value="hour_based">
                                    Hour Based
                                </option>

                            </select>

                            <div class="mt-2 d-none" id="workingHoursRow">
                                <label class="form-label">Working Hours</label>
                                <input type="text" class="form-control" id="working_hours_display" readonly>
                            </div>

                        </div>

                        {{-- <div class="mb-3">

                            <label class="form-label">
                                Salary
                            </label>

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

                        </div> --}}

                        <div class="mb-3">

                            <label class="form-label">
                                Salary
                            </label>

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

                            <small class="text-danger d-none" id="hourBasedError">
                                Checkin & Checkout time required for hour-based duty.
                            </small>

                        </div>

                    </div>

                    <div class="modal-footer">

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

                            Cancel
                        </button>

                        <button type="submit" class="btn btn-primary" id="salarySubmitBtn">

                            Save
                        </button>

                    </div>

                </form>

            </div>

        </div>

    </div>

    {{-- Checkout Modal --}}
    <div class="modal fade" id="checkoutModal" tabindex="-1">

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

            <div class="modal-content">

                <form action="{{ route('branch.store_checkout') }}" method="POST" id="addcheckoutForm">

                    @csrf

                    <input type="hidden" name="id" id="checkout_attendance_id">

                    <div class="modal-header">

                        <h5 class="modal-title">
                            Mark Checkout
                        </h5>

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

                    </div>

                    <div class="modal-body">

                        <div class="mb-3">

                            <label class="form-label">
                                Staff ID
                            </label>

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

                        </div>

                        <div class="mb-3">

                            <label class="form-label">
                                Staff Name
                            </label>

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

                        </div>

                        <div class="mb-3">

                            <label class="form-label">
                                Checkout Time
                                <span class="text-danger">*</span>
                            </label>

                            <input type="time" name="attendance_checkout" id="checkout_time" class="form-control" required>
                            {{-- <input type="text" name="attendance_checkout" id="checkout_time" class="form-control"
                                placeholder="hh:mm AM/PM" required> --}}


                        </div>

                    </div>

                    <div class="modal-footer">

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

                            Cancel
                        </button>

                        <button type="submit" class="btn btn-primary" id="checkoutModalSubmit">

                            Save Checkout
                        </button>

                    </div>

                </form>

            </div>

        </div>

    </div>

    {{-- Delete Attendance Modal --}}
    <div class="modal fade" id="deleteAttendanceModal" tabindex="-1">

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

            <div class="modal-content rounded-4 text-center p-4 py-4">

                <div class="mb-3">

                    <i class="bi bi-exclamation-triangle-fill text-danger" style="font-size: 42px;"></i>

                </div>

                <h5 class="fw-bold mb-2">
                    Are you sure?
                </h5>

                <p class="text-muted">
                    Do you want to delete this attendance record?
                </p>

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

                <div class="d-flex justify-content-center gap-2 mt-3">

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

                        Cancel
                    </button>

                    <button type="button" class="btn btn-danger" id="confirmDeleteAttendance">

                        <i class="bi bi-trash me-1"></i>
                        Delete
                    </button>

                </div>

            </div>

        </div>

    </div>



    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

    <script src="https://cdn.datatables.net/1.13.6/js/jquery.dataTables.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>

    <script>
        let table;
        let baseSalary = 0;

        let checkinTime = '';
        let checkoutTime = '';

        const STANDARD_WORKING_HOURS = 10;

        $(document).ready(function () {

            flatpickr("#fromDate", {
                dateFormat: "Y-m-d",
                altInput: true,
                altFormat: "d/m/Y",
                allowInput: true,
                onChange: function () {
                    table.ajax.reload();
                }
            });

            flatpickr("#toDate", {
                dateFormat: "Y-m-d",
                altInput: true,
                altFormat: "d/m/Y",
                allowInput: true,
                defaultDate: new Date(),
                onChange: function () {
                    table.ajax.reload();
                }
            });

            // flatpickr("#checkout_time", {
            //     enableTime: true,
            //     noCalendar: true,
            //     dateFormat: "H:i",
            //     altInput: true,
            //     altFormat: "h:i K",
            //     time_24hr: false,
            //     allowInput: false
            // });


            table = $('#usersTable').DataTable({

                processing: true,
                serverSide: true,

                ajax: {

                    url: "{{ route('branch.attendanceSummaryData') }}",

                    type: "GET",

                    data: function (d) {
                        d.fromDate = $('#fromDate').val();
                        d.toDate = $('#toDate').val();
                        d.attendance_type = $('#attendanceType').val();
                        d.duty_type = $('#dutyType').val();
                        d.staff = $('#staffSearch').val();
                    },

                    error: function (xhr) {

                        console.error(
                            'Attendance DataTable Error:',
                            xhr.responseText
                        );

                        showToast('error', xhr.responseJSON?.message ?? 'Unable to load attendance records.');
                    }
                },

                searching: true,
                paging: true,
                info: true,
                ordering: true,
                lengthChange: true,
                lengthMenu: [[10, 25, 50, 100, -1], [10, 25, 50, 100, "All"]], pageLength: 10,

                dom: 'lrtip',

                columnDefs: [{
                    targets: '_all',
                    className: 'text-nowrap align-middle'
                }],

                columns: [

                    {
                        data: null,
                        orderable: false,
                        searchable: false,

                        render: function (data, type, row, meta) {

                            return meta.row +
                                meta.settings._iDisplayStart +
                                1;
                        }
                    },

                    {
                        data: 'attendance_date',

                        render: function (data) {
                            return data ?? '-';
                        }
                    },

                    {
                        data: 'staff_id',

                        render: function (data) {
                            return data ?? '-';
                        }
                    },

                    {
                        data: 'name',

                        render: function (data) {
                            return data ?? '-';
                        }
                    },

                    {
                        data: 'attendance_checkin',

                        render: function (data) {
                            return data ?? '-';
                        }
                    },

                    {
                        data: 'attendance_checkout',

                        render: function (data) {
                            return data ?? '-';
                        }
                    },
                    {
                        data: 'working_hours',
                        render: function (data) {
                            return data ?? '-';
                        }
                    },

                    {
                        data: 'attendance_type',

                        render: function (data) {

                            if (data === 'present') {

                                return `
                                                                                                                                                                                                            <span class="badge bg-success">
                                                                                                                                                                                                                Present
                                                                                                                                                                                                            </span>
                                                                                                                                                                                                        `;
                            }

                            if (data === 'absent') {

                                return `
                                                                                                                                                                                                            <span class="badge bg-danger">
                                                                                                                                                                                                                Absent
                                                                                                                                                                                                            </span>
                                                                                                                                                                                                        `;
                            }

                            return '-';
                        }
                    },

                    {
                        data: 'assign',
                        orderable: false,
                        searchable: false
                    },

                    {
                        data: 'calculated_salary',

                        render: function (data) {

                            return data
                                ? '₹ ' + data
                                : '-';
                        }
                    },

                    // {
                    //     data: 'duty_type',

                    //     render: function (data) {

                    //         if (data === 'full_day') {

                    //             return `
                    //                                                                                 <span class="badge bg-label-success">
                    //                                                                                     Full Day
                    //                                                                                 </span>
                    //                                                                             `;
                    //         }

                    //         if (data === 'half_day') {

                    //             return `
                    //                                                                                 <span class="badge bg-label-warning">
                    //                                                                                     Half Day
                    //                                                                                 </span>
                    //                                                                             `;
                    //         }

                    //         if (data === 'one_half_day') {

                    //             return `
                    //                                                                                 <span class="badge bg-label-info">
                    //                                                                                     One & Half Day
                    //                                                                                 </span>
                    //                                                                             `;
                    //         }

                    //         if (data === 'double_duty') {

                    //             return `
                    //                                                                                 <span class="badge bg-label-primary">
                    //                                                                                     Double Duty
                    //                                                                                 </span>
                    //                                                                             `;
                    //         }

                    //         return `
                    //                                                                             <span class="badge bg-label-secondary">
                    //                                                                                 Not Assigned
                    //                                                                             </span>
                    //                                                                         `;
                    //     }
                    // },

                    {
                        data: 'duty_type',

                        render: function (data) {

                            if (data === 'full_day') {

                                return `
                                                                                                                                                                    <span class="badge bg-label-success">
                                                                                                                                                                        Full Day
                                                                                                                                                                    </span>
                                                                                                                                                                `;
                            }

                            if (data === 'half_day') {

                                return `
                                                                                                                                                                    <span class="badge bg-label-warning">
                                                                                                                                                                        Half Day
                                                                                                                                                                    </span>
                                                                                                                                                                `;
                            }

                            if (data === 'one_half_day') {

                                return `
                                                                                                                                                                    <span class="badge bg-label-info">
                                                                                                                                                                        One & Half Day
                                                                                                                                                                    </span>
                                                                                                                                                                `;
                            }

                            if (data === 'double_duty') {

                                return `
                                                                                                                                                                    <span class="badge bg-label-primary">
                                                                                                                                                                        Double Duty
                                                                                                                                                                    </span>
                                                                                                                                                                `;
                            }

                            if (data === 'hour_based') {

                                return `
                                                                                                                                                                    <span class="badge bg-label-dark">
                                                                                                                                                                        Hour Based
                                                                                                                                                                    </span>
                                                                                                                                                                `;
                            }

                            return `
                                                                                                                                                                <span class="badge bg-label-secondary">
                                                                                                                                                                    Not Assigned
                                                                                                                                                                </span>
                                                                                                                                                            `;
                        }
                    },

                    {
                        data: 'action',
                        orderable: false,
                        searchable: false
                    }

                ]
            });

            /**
             * Custom Search
             */
            $('#customSearch').on('keyup', function () {

                table.search(this.value).draw();

            });

            /**
             * Page Length
             */
            $('#pageLength').on('change', function () {

                table.page.len(this.value).draw();

            });

            /**
             * Date Filters
             */

            $('#attendanceType, #dutyType').on('change', function () {
                table.ajax.reload(null, true);
            });

            let staffTimer;
            $('#staffSearch').on('keyup', function () {
                clearTimeout(staffTimer);
                staffTimer = setTimeout(() => table.ajax.reload(null, true), 400);
            });

            $('#resetBtn').on('click', function () {
                $('#fromDate')[0]._flatpickr.clear();
                $('#toDate')[0]._flatpickr.setDate(new Date());
                $('#attendanceType').val('');
                $('#dutyType').val('');
                $('#staffSearch').val('');
                $('#customSearch').val('');
                table.search('').ajax.reload();
            });

            function getFilterParams() {
                return new URLSearchParams({
                    fromDate: $('#fromDate').val(),
                    toDate: $('#toDate').val(),
                    attendance_type: $('#attendanceType').val(),
                    duty_type: $('#dutyType').val(),
                    staff: $('#staffSearch').val(),
                    search: $('#customSearch').val()
                });
            }

            $('#exportBtn').click(function () {
                window.location.href = "{{ route('branch.attendance_export') }}?" + getFilterParams().toString();
            });

            $('#printBtn').click(function () {
                window.open("{{ route('branch.attendance_print') }}?" + getFilterParams().toString(), '_blank');
            });

        });

        /**
         * Open Delete Modal
         */
        $(document).on('click', '.deleteAttendanceBtn', function () {

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

            $('#delete_attendance_id').val(id);

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

        });

        /**
         * Confirm Attendance Delete
         */
        $('#confirmDeleteAttendance').on('click', function () {

            const button = $(this);

            const attendanceId =
                $('#delete_attendance_id').val();

            if (!attendanceId) {

                showToast('error', 'Attendance ID is missing.');

                return;
            }

            button
                .prop('disabled', true)
                .html(`
                                                                                                                                                                                            <span class="spinner-border spinner-border-sm me-1"></span>
                                                                                                                                                                                            Processing...
                                                                                                                                                                                        `);

            $.ajax({

                url: "{{ route('branch.attendanceDelete') }}",

                type: "POST",

                data: {

                    _token:
                        $('meta[name="csrf-token"]').attr('content'),

                    id: attendanceId

                },

                success: function (response) {

                    if (response.status === true) {

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

                        table.ajax.reload(null, false);

                        // showToast(
                        //     response.message ??
                        //     'Attendance deleted successfully.',
                        //     'success'
                        // );

                        showToast('success', response.message ?? 'Attendance deleted successfully.');


                    } else {
                        showToast('error', response.message ?? 'Unable to delete attendance.');
                    }

                },

                error: function (xhr) {

                    console.error(
                        'Attendance Delete Error:',
                        xhr.responseText
                    );

                    let message = 'Unable to delete attendance.';

                    if (
                        xhr.responseJSON &&
                        xhr.responseJSON.message
                    ) {
                        message = xhr.responseJSON.message;
                    }

                    showToast('error', message);

                },

                complete: function () {

                    button
                        .prop('disabled', false)
                        .html(`
                                                                                                                                                                                                    <i class="bi bi-trash me-1"></i>
                                                                                                                                                                                                    Delete
                                                                                                                                                                                                `);

                }

            });

        });

        // /**
        //  * Open Salary Modal
        //  */
        // $(document).on('click', '.salaryBtn', function () {

        //     $('#attendance_id').val(
        //         $(this).data('id')
        //     );

        //     baseSalary =
        //         parseFloat($(this).data('salary')) || 0;

        //     const dutyType =
        //         $(this).data('duty') || '';

        //     $('#duty_type').val(dutyType);

        //     calculateSalary(dutyType);

        //     $('#salaryModal').modal('show');

        // });

        // /**
        //  * Calculate Salary
        //  */
        // function calculateSalary(dutyType) {

        //     let salary = 0;

        //     if (dutyType === 'full_day') {

        //         salary = baseSalary;

        //     } else if (dutyType === 'half_day') {

        //         salary = baseSalary / 2;

        //     } else if (dutyType === 'one_half_day') {

        //         salary = baseSalary * 1.5;

        //     } else if (dutyType === 'double_duty') {

        //         salary = baseSalary * 2;

        //     } else {

        //         $('#calculated_salary').val('');

        //         return;
        //     }

        //     $('#calculated_salary').val(
        //         salary.toFixed(2)
        //     );
        // }

        // $('#duty_type').on('change', function () {

        //     calculateSalary(
        //         $(this).val()
        //     );

        // });



        /**
    * Open Salary Modal
    */
        $(document).on('click', '.salaryBtn', function () {

            $('#attendance_id').val(
                $(this).data('id')
            );

            baseSalary =
                parseFloat($(this).data('salary')) || 0;

            checkinTime = $(this).data('checkin') || '';
            checkoutTime = $(this).data('checkout') || '';

            const dutyType =
                $(this).data('duty') || '';

            $('#duty_type').val(dutyType);

            calculateSalary(dutyType);

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

        });

        /**
         * Get worked hours as decimal, or null if checkin/checkout missing
         */
        function getWorkedHoursDecimal() {

            if (!checkinTime || !checkoutTime) return null;

            function toMinutes(t) {
                const parts = t.split(':').map(Number);
                return parts[0] * 60 + parts[1];
            }

            let start = toMinutes(checkinTime);
            let end = toMinutes(checkoutTime);

            if (end < start) end += 24 * 60; // overnight shift

            return (end - start) / 60;
        }

        function formatHoursMinutes(decimalHours) {
            const totalMinutes = Math.round(decimalHours * 60);
            const h = Math.floor(totalMinutes / 60);
            const m = totalMinutes % 60;
            return `${String(h).padStart(2, '0')}:${String(m).padStart(2, '0')}`;
        }

        /**
         * Calculate Salary
         */
        function calculateSalary(dutyType) {

            let salary = 0;

            $('#hourBasedError').addClass('d-none');
            $('#workingHoursRow').addClass('d-none');

            if (dutyType === 'full_day') {

                salary = baseSalary;

            } else if (dutyType === 'half_day') {

                salary = baseSalary / 2;

            } else if (dutyType === 'one_half_day') {

                salary = baseSalary * 1.5;

            } else if (dutyType === 'double_duty') {

                salary = baseSalary * 2;

            } else if (dutyType === 'hour_based') {

                const hours = getWorkedHoursDecimal();

                if (hours === null) {
                    $('#calculated_salary').val('');
                    $('#hourBasedError').removeClass('d-none');
                    return;
                }

                $('#working_hours_display').val(formatHoursMinutes(hours) + ' hrs');
                $('#workingHoursRow').removeClass('d-none');

                const hourlyRate = baseSalary / STANDARD_WORKING_HOURS;
                salary = hourlyRate * hours;

            } else {

                $('#calculated_salary').val('');

                return;
            }

            // $('#calculated_salary').val(
            //     salary.toFixed(2)
            // );
            $('#calculated_salary').val(Math.round(salary));
        }

        $('#duty_type').on('change', function () {

            calculateSalary(
                $(this).val()
            );

        });

        /**
         * Save Duty Type
         */
        // $('#salaryForm').on('submit', function (e) {

        //     e.preventDefault();

        //     const button =
        //         $('#salarySubmitBtn');

        //     const attendanceId =
        //         $('#attendance_id').val();

        //     const dutyType =
        //         $('#duty_type').val();

        //     if (!dutyType) {

        //         showToast(
        //             'Please select duty type.',
        //             'danger'
        //         );

        //         return;
        //     }


        $('#salaryForm').on('submit', function (e) {

            e.preventDefault();

            const button =
                $('#salarySubmitBtn');

            const attendanceId =
                $('#attendance_id').val();

            const dutyType =
                $('#duty_type').val();

            if (!dutyType) {

                showToast('error', 'Please select duty type.');


                return;
            }

            if (dutyType === 'hour_based' && getWorkedHoursDecimal() === null) {

                $('#hourBasedError').removeClass('d-none');

                return;
            }

            button
                .prop('disabled', true)
                .html(`
                                                                                                                                                                                            <span class="spinner-border spinner-border-sm me-1"></span>
                                                                                                                                                                                            Saving...
                                                                                                                                                                                        `);

            $.ajax({

                url: "{{ route('branch.update_duty') }}",

                type: "POST",

                data: {

                    _token:
                        $('meta[name="csrf-token"]').attr('content'),

                    id: attendanceId,

                    duty_type: dutyType

                },

                success: function (response) {

                    if (response.status === false) {

                        showToast('error', response.message ?? 'Unable to update duty.');


                        return;
                    }

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

                    table.ajax.reload(null, false);

                    showToast('success', response.message ?? 'Duty updated successfully.');


                },

                error: function (xhr) {

                    console.error(
                        'Duty Update Error:',
                        xhr.responseText
                    );

                    showToast('error', xhr.responseJSON?.message ?? 'Something went wrong.');

                },

                complete: function () {

                    button
                        .prop('disabled', false)
                        .text('Save');

                }

            });

        });

        /**
         * Open Checkout Modal
         */
        $(document).on('click', '.checkoutBtn', function () {

            $('#checkout_attendance_id').val($(this).data('id'));
            $('#checkout_staff_id').val($(this).data('staffid'));
            $('#checkout_staff_name').val($(this).data('name'));

            let existingCheckout = $(this).data('checkout');

            if (existingCheckout) {

                // Database value: 22:18:00
                // Input value: 22:18
                $('#checkout_time').val(existingCheckout.substring(0, 5));

            } else {

                // Set current time as HH:mm
                const now = new Date();

                const hh = String(now.getHours()).padStart(2, '0');
                const mm = String(now.getMinutes()).padStart(2, '0');

                $('#checkout_time').val(`${hh}:${mm}`);
            }

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


        // $(document).on('click', '.checkoutBtn', function () {

        //     $('#checkout_attendance_id').val($(this).data('id'));

        //     $('#checkout_staff_id').val($(this).data('staffid'));

        //     $('#checkout_staff_name').val($(this).data('name'));

        //     const existingCheckout = $(this).data('checkout');

        //     const checkoutPicker = $('#checkout_time')[0]._flatpickr;

        //     if (existingCheckout) {
        //         checkoutPicker.setDate(existingCheckout, true, "H:i");
        //     } else {
        //         checkoutPicker.setDate(new Date());
        //     }

        //     $('#checkoutModal').modal('show');
        // });

        /**
         * Save Checkout
         */
        $('#addcheckoutForm').on('submit', function (e) {

            e.preventDefault();

            const form = $(this);

            const button =
                $('#checkoutModalSubmit');

            const checkoutTime =
                $('#checkout_time').val();

            if (!checkoutTime) {

                showToast('error', 'Checkout time is required.');


                return;
            }

            button
                .prop('disabled', true)
                .html(`
                                                                                                                                                                                            <span class="spinner-border spinner-border-sm me-1"></span>
                                                                                                                                                                                            Processing...
                                                                                                                                                                                        `);

            $.ajax({

                url: form.attr('action'),

                type: 'POST',

                data: form.serialize(),

                success: function (response) {

                    if (response.status === false) {

                        showToast('error', response.message ?? 'Unable to save checkout.');


                        return;
                    }

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

                    table.ajax.reload(null, false);

                    showToast('success', response.message ?? 'Checkout saved successfully.');


                },

                error: function (xhr) {

                    console.error(
                        'Checkout Error:',
                        xhr.responseText
                    );

                    showToast('error', xhr.responseJSON?.message ?? 'Something went wrong.');

                },

                complete: function () {

                    button
                        .prop('disabled', false)
                        .text('Save Checkout');

                }

            });

        });


    </script>

@endsection