@include('layouts.headElement')
@include('layouts.headerNormal')
@include('layouts.sidebarV2')
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

<style>
    #date_range,
    #month_range {
        height: calc(3.5rem + 2px);
        /* Match Bootstrap form-control height */
        border-radius: 0.375rem;
        /* Match Bootstrap border-radius */
        padding: 0.375rem 0.75rem;
        font-size: 1rem;
        line-height: 1.5;
    }

    /* Calendar popup background */
    .flatpickr-calendar {
        background-color: rgb(188, 78, 114) !important;
        color: white !important;
        border: none;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
    }

    /* Day cells - text color */
    .flatpickr-day {
        color: white !important;
        font-weight: 500;
    }

    /* Day hover effect */
    .flatpickr-day:hover {
        /* background: white !important; */
        color: rgb(199, 41, 54) !important;
        border-radius: 6px;
    }

    /* Selected day */
    .flatpickr-day.selected,
    .flatpickr-day.startRange,
    .flatpickr-day.endRange {
        /* background: blue !important; */
        color: black !important;
        border-radius: 6px;
    }

    /* Month and year in header */
    .flatpickr-current-month,
    .flatpickr-months .flatpickr-prev-month,
    .flatpickr-months .flatpickr-next-month {
        color: black !important;
    }

    /* Weekdays (Sun, Mon, ...) */
    .flatpickr-weekday {
        color: black !important;
    }

    /* Disable future dates */
    .flatpickr-day.flatpickr-disabled,
    .flatpickr-day.flatpickr-disabled:hover {
        background: transparent !important;
        color: #ccc !important;
        cursor: not-allowed !important;
    }

    /* Highlight today */
    .flatpickr-day.today {
        border: 1px solid white;
        font-weight: bold;
    }

    /* Flatpickr month navigation arrows */
    .flatpickr-months .flatpickr-prev-month svg,
    .flatpickr-months .flatpickr-next-month svg {
        fill: black !important;
        /* Your desired arrow color */
        stroke: black !important;
        /* For outlines, if present */
        width: 14px;
        height: 14px;
    }

    /* Optional: Add hover effect */
    .flatpickr-months .flatpickr-prev-month:hover svg,
    .flatpickr-months .flatpickr-next-month:hover svg {
        fill: rgb(255, 215, 0) !important;
        /* Example: gold on hover */
        cursor: pointer;
    }

    .flatpickr-monthSelect-month {
        color: white;
    }

    .flatpickr-monthSelect-month.flatpickr-disabled {
        color: #aaa !important;
        background-color: transparent !important;
        cursor: not-allowed;
    }

    .ui-datepicker {
        position: absolute;
        top: 114px;
        width: 300px !important;
        height: 300px;
        color: #963131;
        margin: 5px auto 0;
        font: 12pt Arial, sans-serif;
    }


    .ui-datepicker-header {
        background: #d9a441;
        color: black;
        border-width: 1px 0 0 0;
        border-style: solid;
        border-color: #111;
    }

    .ui-datepicker-calendar .ui-state-hover {
        background: white;
        color: #963131;
    }



    .ui-timepicker-standard .ui-menu-item {
        margin: 0 auto;
        padding: 0 30%;
    }

    .ui-datepicker .ui-datepicker-buttonpane button {
        background-color: #d9a441 !important;
    }

    .ui-datepicker .ui-datepicker-header {
        border: 1px solid #d9a441 !important;
    }


    /* Chrome, Safari, Edge, Opera */
    input::-webkit-outer-spin-button,
    input::-webkit-inner-spin-button {
        -webkit-appearance: none;
        margin: 0;
    }

    /* Firefox */
    input[type=number] {
        -moz-appearance: textfield;
    }

    #upload_name {
        margin-top: -8px;
    }

    .select2-container .select2-selection--multiple {
        min-height: 58px;
    }

    .edit_box_location {
        width: 300px !important;
        height: auto !important;
    }

    .monthYearPickerOnly {
        display: none !important;
    }




    #pageloader {
        background: rgb(255 255 255 / 20%);
        display: none;
        height: 100%;
        position: fixed;
        width: 100%;
        z-index: 9999;
        top: 0;
        left: 0;
    }

    #pageloader img {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        height: 150px;
        border: double black;
        background-color: antiquewhite;
        border-radius: 20px;
    }


    .dataTables_length,
    .dataTables_filter {
        display: block;
    }

    .filter {
        width: 51px;
    }

    tfoot {
        display: table-header-group !important;
    }

    .info {
        margin-bottom: 0rem !important;
        color: brown;
        font-size: 9px;
        font-weight: bold;
    }

    .toggler {
        position: absolute;
        right: 29px;
        top: 50%;
        transform: translateY(-50%);
        cursor: pointer;
    }

    #toggler {
        position: absolute;
        right: 29px;
        top: 50%;
        transform: translateY(-50%);
        cursor: pointer;
    }


    ul {
        list-style-type: none;
    }

    #edittoggler {
        position: absolute;
        right: 29px;
        top: 50%;
        transform: translateY(-50%);
        cursor: pointer;
    }

    .edit_box_location {
        width: 340px !important;
        height: auto !important;
    }

    @media only screen and (min-width: 200px) and (max-width: 767px) {
        .tbl-adjust {
            width: 150%;
        }

        ul.chosen-choices {
            height: 57px !important;
            width: 250px !important;
        }

        ul.chosen-results {
            height: 75px !important;
            width: 250px !important;
            overflow-y: scroll;
        }

        select option {
            font-size: 13px;
        }
    }


    @media (max-width: 992px) {
        select option {
            font-size: 13px;
        }
    }

    .image-design {
        border: 1px solid;
        background: #fff;
        width: 100%;
        height: auto;
        padding: 1%;
    }

    .request_btn {
        padding: 10px;
        border-radius: 8px;
        background: #BA434D;
        display: flex;
        align-items: center;
        justify-content: space-between;
        color: #fff;
    }



    #parent-form {
        width: 100%;
    }



    .form-card {
        border-radius: 5px;
        /* box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px; */
        border: 2px solid #eee;
    }

    .formData {

        padding: 10px;
    }

    .custom-input {
        border: none !important;
        border-bottom: 2px solid #ddd !important;
        padding: 6px 5px !important;
        width: 100% !important;
        max-width: 100% !important;
        height: 36px;


    }

    .custom-input::placeholder {
        color: #212529;
    }

    .custom-input:focus {
        color: #212529;
        background-color: #fff;
        border-color: #eee;
        outline: 0;
        box-shadow: rgba(0, 0, 0, 0.02) 0px 1px 3px 0px, rgba(27, 31, 35, 0.15) 0px 0px 0px 1px;
        border-radius: 8px;

    }

    .heading-block {

        background: #b19f83;
        padding: 10px;
        border-top-left-radius: 5px;
        border-top-right-radius: 5px;
    }

    .heading-block h5 {
        color: #fff;

    }

    .button-block {
        padding: 10px;
        border-top: 2px solid #F5F5F5;
    }

    .submit-btn {
        background-color: #BA434D;
        /* padding: 8px 20px; */
        border-radius: 5px;
        color: #fff;
        border: none;
        /* font-size: 15px; */
        /* width: 120px; */
    }


    .Reset-btn {
        background: #212529;
        padding: 8px 20px;
        border-radius: 5px;
        color: #fff;
        border: none;
        /* font-size: 15px; */
        /* width: 120px; */
    }

    input:disabled {
        background: #eee;
    }

    .check-icon {
        height: 50px;
        width: 50px;
        background: green;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #fff;
    }

    #close-btn {
        font-size: 25px;
    }

    small {
        font-weight: 600 !important;
    }

    @media(max-width: 767px) {
        .btn-grp {
            display: flex;
            justify-content: space-between;
            gap: 5px;
        }
    }
</style>
</head>

<body>
    @include ('layouts.loader')

    <main id="body_main_container" class="body_main_container">
        <div id="body_container">
            <div class="card" id="page_header_container">
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-12">
                            <h5 class="card-title">Leave Approval</h5>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-12 ">
                <div class="card  report-container">
                    <div class="card-body p-1">
                        <!-- Bordered Tabs -->
                        <ul class="nav nav-tabs nav-tabs-bordered" id="borderedTab" role="tablist">
                            <li class="nav-item" role="presentation">
                                <button class="nav-link active" id="home-tab" data-bs-toggle="tab" data-bs-target="#bordered-home" type="button" role="tab" aria-controls="home" aria-selected="true">HR/Admin Approval</button>
                            </li>

                        </ul>
                        <div class="tab-content pt-2" id="borderedTabContent">
                            <div class="tab-pane fade show active" id="bordered-home" role="tabpanel" aria-labelledby="home-tab">
                                <div class="card p-0" style="background-color: transparent; border:none;">
                                    <div class="card-body p-1" style="overflow-x:auto;">

                                        <h5 class="card-title" style="padding:10px"></h5>

                                        <!-- Table with stripped rows -->
                                        <table id="itemListHr" class='display dataTable' style="width: 100%;">
                                            <thead>
                                                <tr>
                                                    <th scope="col">#</th>
                                                    <th scope="col">Action</th>
                                                    <th scope="col">Location</th>
                                                    <th scope="col">Emp Name</th>
                                                    <th scope="col">Emp Code</th>
                                                    <th scope="col">Leave Type</th>
                                                    <th scope="col">Days</th>
                                                    <th scope="col">HR/Admin Status</th>
                                                </tr>
                                            </thead>
                                        </table>
                                    </div>
                                </div>
                            </div>
                        </div><!-- End Bordered Tabs -->

                    </div>
                </div>

            </div>

            <div class="modal fade" id="itemModel" tabindex="-1">
                <div class="modal-dialog modal-xl modal-dialog-centered">
                    <div class="modal-content">

                        <div class="modal-header">
                            <h5 class="modal-title">Leave Approval Details</h5>
                            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                        </div>

                        <div class="modal-body">
                            <form class="row g-2" method="POST" id="approvalForm">
                                <input type="hidden" id="view_id" name="view_id">
                                <input type="hidden" id="client_user_id" name="client_user_id">
                                <input type="hidden" id="leave_type_hidden" name="leave_type_hidden">

                                <!-- Employee Info -->
                                <div class="col-md-4">
                                    <div class="form-floating">
                                        <input type="text" class="form-control" id="view_employee_name" readonly>
                                        <label>Emp Name</label>
                                    </div>
                                </div>

                                <div class="col-md-4">
                                    <div class="form-floating">
                                        <input type="text" class="form-control" id="view_emp_code" readonly>
                                        <label>Emp Code</label>
                                    </div>
                                </div>

                                <div class="col-md-4">
                                    <div class="form-floating">
                                        <input type="text" class="form-control" id="view_requested_date" readonly>
                                        <label>Requested Date</label>
                                    </div>
                                </div>

                                <!-- Leave Info -->
                                <!-- SICK LEAVE SECTION -->
                                <div class="col-12" id="sick_section_title" style="display:none;">
                                    <h6 class="fw-bold text-info">Sick Leave Details</h6>
                                </div>

                                <div class="col-md-4" id="sick_days_div" style="display:none;">
                                    <div class="form-floating">
                                        <input type="text" class="form-control" id="view_sick_days" readonly>
                                        <label>Sick Leave Days</label>
                                    </div>
                                </div>

                                <div class="col-md-4" id="sick_from_div" style="display:none;">
                                    <div class="form-floating">
                                        <input type="text" class="form-control" id="view_sick_from" readonly>
                                        <label>Sick Leave From</label>
                                    </div>
                                </div>

                                <div class="col-md-4" id="sick_to_div" style="display:none;">
                                    <div class="form-floating">
                                        <input type="text" class="form-control" id="view_sick_to" readonly>
                                        <label>Sick Leave To</label>
                                    </div>
                                </div>



                                <!-- PAID LEAVE SECTION -->
                                <div class="col-12 mt-2" id="paid_section_title" style="display:none;">
                                    <h6 class="fw-bold text-primary">Privilege Leave Details</h6>
                                </div>

                                <div class="col-md-4" id="paid_days_div" style="display:none;">
                                    <div class="form-floating">
                                        <input type="text" class="form-control" id="view_paid_days" readonly>
                                        <label>Privilege Leave Days</label>
                                    </div>
                                </div>

                                <div class="col-md-4" id="paid_from_div" style="display:none;">
                                    <div class="form-floating">
                                        <input type="text" class="form-control" id="view_paid_from" readonly>
                                        <label>Privilege Leave From</label>
                                    </div>
                                </div>

                                <div class="col-md-4" id="paid_to_div" style="display:none;">
                                    <div class="form-floating">
                                        <input type="text" class="form-control" id="view_paid_to" readonly>
                                        <label>Privilege Leave To</label>
                                    </div>
                                </div>



                                <!-- Leave Balance -->
                                <div class="col-12 mt-2" id="leave_balance_div" style="display:none;">
                                    <h6 class="fw-bold" style="color: #963131;">Leave Balance</h6>
                                </div>
                                <div class="col-md-6">
                                    <div class="form-floating">
                                        <input type="text" class="form-control" id="view_sick_balance" readonly>
                                        <label>Available Sick Leave</label>
                                    </div>
                                </div>

                                <div class="col-md-6">
                                    <div class="form-floating">
                                        <input type="text" class="form-control" id="view_paid_balance" readonly>
                                        <label>Available Privilege Leave</label>
                                    </div>
                                </div>

                                <!-- Employee Comment -->
                                <div class="col-md-12">
                                    <div class="form-floating">
                                        <textarea class="form-control" id="view_employee_comments" style="height: 80px;" readonly></textarea>
                                        <label>Employee Comments</label>
                                    </div>
                                </div>

                                <hr class="mt-3 mb-2">

                                <!-- HR Section -->
                                <div class="col-12" id="hr_section_div" style="display:none;">
                                    <h6 class="fw-bold text-success">HR/Admin Approval</h6>
                                </div>


                                <div class="col-md-4" id="hr_status_display_div" style="display:none;">
                                    <div class="form-floating">
                                        <input type="text" class="form-control" id="hr_status_display" readonly>
                                        <label>HR/Admin Status</label>
                                    </div>
                                </div>

                                <div class="col-md-8" id="hr_remarks_display_div" style="display:none;">
                                    <div class="form-floating">
                                        <input type="text" class="form-control" id="hr_remarks_display" readonly>
                                        <label>HR/Admin Remarks</label>
                                    </div>
                                </div>

                                <div class="col-md-4" id="hr_action_div" style="display:none;">
                                    <div class="form-floating">
                                        <select class="form-select" id="hr_action">
                                            <option value="">Select Status</option>
                                            <option value="1">Approve</option>
                                            <option value="2">Reject</option>
                                        </select>
                                        <label>HR/Admin Action</label>
                                    </div>
                                </div>

                                <div class="col-md-8" id="hr_remarks_input_div" style="display:none;">
                                    <div class="form-floating">
                                        <input type="text" class="form-control" id="hr_remarks_input" placeholder="HR/Admin remarks">
                                        <label>HR/Admin Remarks</label>
                                    </div>
                                </div>

                                <!-- Half Day -->
                                <div class="col-md-3" id="hr_half_day_toggle_div" style="display:none;">
                                    <div class="form-check mt-3">
                                        <input class="form-check-input" type="checkbox" id="is_half_day_hr">
                                        <label class="form-check-label" for="is_half_day_hr">
                                            Mark Half Day
                                        </label>
                                    </div>
                                </div>

                                <div class="col-md-4" id="hr_half_day_date_div" style="display:none;">
                                    <div class="form-floating">
                                        <input type="date" class="form-control" id="half_day_date_hr">
                                        <label>Half Day Date</label>
                                    </div>
                                </div>

                                <div class="col-md-5" id="hr_half_day_note_div" style="display:none;">
                                    <div class="alert alert-info py-2 mb-0 mt-2">
                                        Half day will reduce 0.5 day from total approved leave.
                                    </div>
                                </div>

                                <!-- LOP Preview -->
                                <div class="col-md-12" id="lop_preview_div" style="display:none;">
                                    <div class="alert alert-warning py-2 mb-0 mt-2" id="lop_preview_text">
                                        Partial leave may be marked as LOP due to insufficient balance.
                                    </div>
                                </div>

                                <!-- Buttons -->
                                <div class="text-center mt-3">
                                    <button type="button" class="btn submit-btn" id="submitApprovalBtn" style="display:none;">
                                        Submit Approval
                                    </button>
                                    <button type="button" class="btn reset-btn" data-bs-dismiss="modal">
                                        Close
                                    </button>
                                </div>
                            </form>
                        </div>

                    </div>
                </div>
            </div>

        </div>

    </main>
    @include('layouts.footer')

    <!-- <link rel="stylesheet" href="https://code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css"> -->

    <script src="js/jquery-3.6.0.min.js"></script>
    <script src="js/jquery-ui.js"></script>
    <script src='js/jquery.validate.js'></script>
    <!-- IMPORTANT: Multi-date plugin -->
     <link rel="stylesheet" href="https://cdn.datatables.net/1.13.8/css/jquery.dataTables.min.css">

<script src="https://cdn.datatables.net/1.13.8/js/jquery.dataTables.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/jquery-ui-multidatespicker/jquery-ui.multidatespicker.js"></script>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/jquery-ui-multidatespicker/jquery-ui.multidatespicker.css">
    <script>
        var data = {};
        data['_token'] = '{{ csrf_token() }}';

        $(document).ready(function(e) {
            get_hradmin_approve_status();

        })

        function get_hradmin_approve_status() {
            $('#itemListHr').DataTable().destroy();

            let table = $('#itemListHr').DataTable({
                autoWidth: true,
                ordering: false,
                searching: true,
                ajax: {
                    url: "load_leave_approval",
                    type: "get",
                    data: {
                        level: 2
                    }
                },
                columns: [{
                        data: null,
                        title: "#",
                        render: function(data, type, row, meta) {
                            return meta.row + 1;
                        }
                    },
                    {
                        data: null,
                        title: "Action",
                        className: "dt-center",
                        render: function(data, type, row) {
                            return '<button type="button" class="btn btn-danger btn-open-leave-approval-hr" data-level="2" ' +
                                'style="background: #d9a441 !important;color:#F2E2D2;border: 1px solid #d9a441;">' +
                                '<i class="fa-solid fa-pen-to-square style_actions"></i>' +
                                '</button>';
                        }
                    },
                    {
                        data: "location",
                        title: "Location",
                        className: "dt-center"
                    },
                    {
                        data: "emp_name",
                        title: "Emp Name",
                        className: "dt-center"
                    },
                    {
                        data: "emp_code",
                        title: "Emp Code",
                        className: "dt-center"
                    },
                    {
                        data: null,
                        title: "Leave Type",
                        className: "dt-center",
                        render: function(data, type, row) {
                            let types = [];

                            if (parseInt(row.is_sick) === 1) {
                                types.push('<span class="badge bg-info">Sick Leave</span>');
                            }

                            if (parseInt(row.is_paid) === 1) {
                                types.push('<span class="badge bg-primary">Paid Leave</span>');
                            }

                            if (types.length > 0) {
                                return types.join(' ');
                            }

                            return '<span class="badge bg-secondary">N/A</span>';
                        }
                    }, {
                        data: null,
                        title: "Days",
                        className: "dt-center",
                        render: function(data, type, row) {
                            // if (parseInt(row.is_sick) === 1) return row.sick_days || 0;
                            // if (parseInt(row.is_paid) === 1) return row.paid_days || 0;
                            return row.number_of_days;
                        }
                    },

                    {
                        data: "is_approve_by_hr",
                        title: "HR/Admin Status",
                        className: "dt-center",
                        render: function(data) {
                            if (data == 0) return '<span style="color:#f39c12;font-weight:600;">Pending</span>';
                            if (data == 1) return '<span style="color:#28a745;font-weight:600;">Approved</span>';
                            if (data == 2) return '<span style="color:#dc3545;font-weight:600;">Rejected</span>';
                            return '<span style="color:#6c757d;">N/A</span>';
                        }
                    }
                ]
            });

            $(document).off('click', '.btn-open-leave-approval-hr').on('click', '.btn-open-leave-approval-hr', function() {
                let rowData = table.row($(this).closest('tr')).data();
                let userLevel = $(this).data('level');
                openLeaveApprovalModal(rowData, userLevel);
            });
        }
        $('#itemModel').on('hidden.bs.modal', function() {
            $('#approvalForm')[0].reset();
            $('#hr_section_div, #hr_waiting_message, #hr_status_display_div, #hr_remarks_display_div, #hr_action_div, #hr_remarks_input_div').hide();
            $('#hr_half_day_toggle_div, #hr_half_day_date_div, #hr_half_day_note_div').hide();
            $('#lop_preview_div, #submitApprovalBtn').hide();
        });

        function getStatusText(status) {
            status = parseInt(status || 0);
            if (status === 0) return 'Pending';
            if (status === 1) return 'Approved';
            if (status === 2) return 'Rejected';
            return 'N/A';
        }


        function openLeaveApprovalModal(rowData, userLevel) {
            $('#view_id').val(rowData.id || '');
            $('#client_user_id').val(rowData.client_user_id || '');
            $('#view_employee_name').val(rowData.emp_name || rowData.fullName || '');
            $('#view_emp_code').val(rowData.emp_code || '');
            $('#view_requested_date').val(rowData.timestamp || '');
            $('#view_employee_comments').val(rowData.reason || '');

            let leaveType = '';
            let leaveFrom = '';
            let leaveTo = '';
            let leaveDays = 0;
            let balance = 0;

            // Reset mixed leave sections
            $('#sick_section_title, #sick_days_div, #sick_from_div, #sick_to_div, #leave_balance_div').hide();
            $('#paid_section_title, #paid_days_div, #paid_from_div, #paid_to_div, #leave_balance_div').hide();

            $('#view_sick_days, #view_sick_from, #view_sick_to').val('');
            $('#view_paid_days, #view_paid_from, #view_paid_to').val('');

            $('#view_sick_balance').val(rowData.sick_leave_balance || 0);
            $('#view_paid_balance').val(rowData.paid_leave_balance || 0);

            // Show sick leave block if available
            if (parseInt(rowData.is_sick) === 1) {
                $('#sick_section_title, #sick_days_div, #sick_from_div, #sick_to_div, #leave_balance_div').show();
                $('#view_sick_days').val(rowData.sick_days || 0);
                $('#view_sick_from').val(rowData.sick_start || '');
                $('#view_sick_to').val(rowData.sick_end || '');
            }

            // Show paid leave block if available
            if (parseInt(rowData.is_paid) === 1) {
                $('#paid_section_title, #paid_days_div, #paid_from_div, #paid_to_div, #leave_balance_div').show();
                $('#view_paid_days').val(rowData.paid_days || 0);
                $('#view_paid_from').val(rowData.paid_start || '');
                $('#view_paid_to').val(rowData.paid_end || '');
            }

            $('#view_sick_balance').val(rowData.sick_leave_balance || 0);
            $('#view_paid_balance').val(rowData.paid_leave_balance || 0);


            $('#hr_action').val('');
            $('#hr_remarks_input').val('');
            $('#is_half_day_hr').prop('checked', false);
            $('#half_day_date_hr').val('');


            $('#hr_section_div, #hr_waiting_message, #hr_status_display_div, #hr_remarks_display_div, #hr_action_div, #hr_remarks_input_div').hide();
            $('#hr_half_day_toggle_div, #hr_half_day_date_div, #hr_half_day_note_div').hide();
            $('#lop_preview_div, #submitApprovalBtn').hide();


            let hrStatus = parseInt(rowData.is_approve_by_hr || 0);



            // HR display values
            $('#hr_status_display').val(getStatusText(hrStatus));
            $('#hr_remarks_display').val(rowData.comment_by_hr || '');


            // ===== HR Login =====
            if (parseInt(userLevel) === 2) {
                $('#hr_section_div').show();
                if (hrStatus === 0) {
                    $('#hr_action_div').show();
                    $('#hr_remarks_input_div').show();
                    $('#hr_half_day_toggle_div').show();
                    $('#submitApprovalBtn').show();

                    // LOP preview
                    let effectiveRequested = leaveDays;
                    if (balance < effectiveRequested) {
                        let lop = (effectiveRequested - Math.floor(balance)).toFixed(1);
                        $('#lop_preview_text').text('Insufficient balance. Some day(s) may be marked as LOP.');
                        $('#lop_preview_div').show();
                    }
                } else {
                    $('#hr_status_display_div').show();
                    $('#hr_remarks_display_div').show();
                }

            }

            $('#itemModel').modal('show');
        }
        $(document).on('change', '#is_half_day_hr', function() {
            if ($(this).is(':checked')) {
                $('#hr_half_day_date_div, #hr_half_day_note_div').show();

                let fromDate = $('#view_leave_from').val();
                let toDate = $('#view_leave_to').val();

                $('#half_day_date_hr').attr('min', fromDate);
                $('#half_day_date_hr').attr('max', toDate);
            } else {
                $('#hr_half_day_date_div, #hr_half_day_note_div').hide();
                $('#half_day_date_hr').val('');
            }
        });

        $('#submitApprovalBtn').off('click').on('click', function() {
            let payload = {
                id: $('#view_id').val(),
                client_user_id: $('#client_user_id').val(),
                emp_code: $('#view_emp_code').val(),
                leave_type: $('#leave_type_hidden').val(),
                user_level: ($('#hr_action_div').is(':visible') ? 2 : 1),
                hr_status: $('#hr_action').val(),
                hr_remarks: $('#hr_remarks_input').val(),
                is_half_day_hr: $('#is_half_day_hr').is(':checked') ? 1 : 0,
                half_day_date_hr: $('#half_day_date_hr').val(),
                _token: '{{ csrf_token() }}'
            };
            if (payload.user_level == 2) {
                if (!payload.hr_status) {
                    alert('Please select HR/Admin status');
                    return;
                }

                if (payload.is_half_day_hr == 1 && !payload.half_day_date_hr) {
                    alert('Please select Half Day Date');
                    return;
                }
            }

            $.ajax({
                url: 'update_leave_approve',
                type: 'POST',
                data: payload,
                success: function(response) {
                    if (response.status) {
                        alert(response.message || 'Leave approval updated successfully');
                        $('#itemModel').modal('hide');
                        get_hradmin_approve_status();
                    } else {
                        alert(response.message || 'Something went wrong');
                    }
                },
                error: function() {
                    alert('Server error');
                }
            });
        });
    </script>
</body>

</html>