@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">Employee 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">
                            @if(session('role')== config('constants.SUPERVISOR'))
                            <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">Manager Approval</button>
                            </li>
                            @endif
                            @if(session('role')== config('constants.ADMIN') || session('role')== config('constants.HUBMANAGER') || session('role')== config('constants.HRMANAGER'))
                            <li class="nav-item" role="presentation">
                                <button class="nav-link active" id="quarterly_1-tab" data-bs-toggle="tab" data-bs-target="#quarterly_1" type="button" role="tab" aria-controls="quarterly_1" aria-selected="false">HR/Admin Approval</button>
                            </li>
                            @endif
                        </ul>
                        <div class="tab-content pt-2" id="borderedTabContent">
                            @if(session('role')== config('constants.SUPERVISOR'))
                            <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="itemList" class='display dataTable' style="width: 100%;">
                                            <thead>
                                                <tr>
                                                    <th scope="col">#</th>
                                                    <th scope="col">Action</th>
                                                    <th scope="col">Kitchen</th>
                                                    <th scope="col">Emp Name</th>
                                                    <th scope="col">Emp Code</th>
                                                    <th scope="col">Manager Status</th>
                                                    <th scope="col">HR/Admin Status</th>
                                                </tr>
                                            </thead>
                                        </table>
                                    </div>
                                </div>
                            </div>
                            @endif
                            @if(session('role')== config('constants.ADMIN') || session('role')== config('constants.HUBMANAGER') || session('role')== config('constants.HRMANAGER'))
                            <div class="tab-pane show active" id="quarterly_1" role="tabpanel" aria-labelledby="quarterly_1-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="itemList1" class='display dataTable' style="width: 100%;">
                                            <thead>
                                                <tr>
                                                    <th scope="col">#</th>
                                                    <th scope="col">Action</th>
                                                    <th scope="col">Kitchen</th>
                                                    <th scope="col">Emp Name</th>
                                                    <th scope="col">Emp Code</th>
                                                    <th scope="col">Manager Status</th>
                                                    <th scope="col">HR/Admin Status</th>
                                                </tr>
                                            </thead>
                                        </table>
                                    </div>
                                </div>
                            </div>
                            @endif

                        </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">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="approval_level" name="approval_level">

                                <!-- Employee Name -->
                                <div class="col-md-4">
                                    <div class="form-floating">
                                        <input type="text" class="form-control" id="view_employee_name" name="view_employee_name" readonly>
                                        <label>Emp Name</label>
                                    </div>
                                </div>
                                <input type="hidden" id="request_location_id" name="request_location_id">
                                <input type="hidden" id="request_designation_id" name="request_designation_id">
                                <input type="hidden" id="request_department_id" name="request_department_id">
                                <input type="hidden" id="client_user_id" name="client_user_id">

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


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

                                <!-- Current Kitchen -->
                                <div class="col-md-3">
                                    <div class="form-floating">
                                        <input type="text" class="form-control" id="view_current_kitchen" name="view_current_kitchen" readonly>
                                        <label>Current Kitchen Name</label>
                                    </div>
                                </div>

                                <!-- Transfer Kitchen -->
                                <div class="col-md-3">
                                    <div class="form-floating">
                                        <input type="text" class="form-control" id="view_transfer_kitchen" name="view_transfer_kitchen" readonly>
                                        <label>Transfer Kitchen Name</label>
                                    </div>
                                </div>

                                     <!-- Current Designation -->
                                <div class="col-md-3">
                                    <div class="form-floating">
                                        <input type="text" class="form-control" id="view_old_designation" name="view_old_designation" readonly>
                                        <label>Current Designation Name</label>
                                    </div>
                                </div>

                                <!-- Transfer Designation -->
                                <div class="col-md-3">
                                    <div class="form-floating">
                                        <input type="text" class="form-control" id="view_new_designation" name="view_new_designation" readonly>
                                        <label>Transfer Designation Name</label>
                                    </div>
                                </div>

                                        <!-- Current Department -->
                                <div class="col-md-3">
                                    <div class="form-floating">
                                        <input type="text" class="form-control" id="view_old_department" name="view_old_department" readonly>
                                        <label>Current Department Name</label>
                                    </div>
                                </div>

                                <!-- Transfer Department -->
                                <div class="col-md-3">
                                    <div class="form-floating">
                                        <input type="text" class="form-control" id="view_new_department" name="view_new_department" readonly>
                                        <label>Transfer Department Name</label>
                                    </div>
                                </div>

                                <!-- Request Remarks -->
                                <div class="col-md-6">
                                    <div class="form-floating">
                                        <textarea class="form-control" id="view_remarks" name="view_remarks" style="height: 80px;" readonly></textarea>
                                        <label>Request Remarks</label>
                                    </div>
                                </div>

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

                                <div class="col-12">
                                    <h6 class="fw-bold text-primary">Manager Approval</h6>
                                </div>

                                <!-- Level 1 Current Status (Readonly display) -->
                                <div class="col-md-3" id="l1_status_display_div" style="display:none;">
                                    <div class="form-floating">
                                        <input type="text" class="form-control" id="l1_status_display" readonly>
                                        <label>Manger Current Status</label>
                                    </div>
                                </div>
                                <!-- Requested Date -->
                                <div class="col-md-3" id="view_manager_date_div" style="display:none;">
                                    <div class="form-floating">
                                        <input type="text" class="form-control" id="view_manager_date" name="view_manager_date" readonly>
                                        <label>Approve Date</label>
                                    </div>
                                </div>

                                <!-- Level 1 Action -->
                                <div class="col-md-4" id="l1_action_div" style="display:none;">
                                    <div class="form-floating">
                                        <select class="form-select" id="l1_action" name="l1_action">
                                            <option value="">Select Status</option>
                                            <option value="1">Approve</option>
                                            <option value="2">Reject</option>
                                        </select>
                                        <label>Manager Action</label>
                                    </div>
                                </div>

                                <!-- Level 1 Remarks Input -->
                                <div class="col-md-8" id="l1_remarks_input_div" style="display:none;">
                                    <div class="form-floating">
                                        <input type="text" class="form-control" id="l1_remarks_input" name="l1_remarks_input" placeholder="Level 1 remarks">
                                        <label>Manager Remarks</label>
                                    </div>
                                </div>

                                <!-- Level 1 Remarks Display -->
                                <div class="col-md-6" id="l1_remarks_display_div" style="display:none;">
                                    <div class="form-floating">
                                        <input type="text" class="form-control" id="l1_remarks_display" readonly>
                                        <label>Manager Remarks</label>
                                    </div>
                                </div>

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

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

                                <!-- Waiting Message -->
                                <div class="col-md-12" id="l2_waiting_message" style="display:none;">
                                    <div class="alert alert-warning py-2 mb-2">
                                        Waiting for Manager approval. HR/Admin action is disabled.
                                    </div>
                                </div>

                                <!-- Level 2 Current Status -->
                                <div class="col-md-3" id="l2_status_display_div" style="display:none;">
                                    <div class="form-floating">
                                        <input type="text" class="form-control" id="l2_status_display" readonly>
                                        <label>HR/Admin Current Status</label>
                                    </div>
                                </div>
                                <div class="col-md-3" id="view_hr_date_div" style="display:none;">
                                    <div class="form-floating">
                                        <input type="text" class="form-control" id="view_hr_date" name="view_hr_date" readonly>
                                        <label>Approve Date</label>
                                    </div>
                                </div>

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

                                <!-- Level 2 Remarks Input -->
                                <div class="col-md-4" id="l2_remarks_input_div" style="display:none;">
                                    <div class="form-floating">
                                        <input type="text" class="form-control" id="l2_remarks_input" name="l2_remarks_input" placeholder="Level 2 remarks">
                                        <label>HR/Admin Remarks</label>
                                    </div>
                                </div>

                                <!-- Level 2 Remarks Display -->
                                <div class="col-md-6" id="l2_remarks_display_div" style="display:none;">
                                    <div class="form-floating">
                                        <input type="text" class="form-control" id="l2_remarks_display" readonly>
                                        <label>HR/Admin Remarks</label>
                                    </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>
    <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>
    <!-- IMPORTANT: Multi-date plugin -->
    <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_manager_approve_status();
            get_hradmin_approve_status();

        })


  

        function get_manager_approve_status() {
            $('#itemList').DataTable().destroy();
            var table = $('#itemList').DataTable({
                "autoWidth": true,
                "ordering": false,
                "searching": true,
                "order": [0, 'desc'],

                "ajax": {
                    url: "load_approval_level1", // Ajax request
                    type: "get",
                    data: data,

                },

                "columns": [{
                        data: null,
                        title: "#",
                        render: function(data, type, row, meta) {
                            return meta.row + 1;
                        }
                    },
                    {
                        data: null,
                        title: "Action",
                        orderable: false,
                        searchable: false,
                        render: function(data, type, row) {
                            return '<button type="button" class="btn btn-danger btn-open-approvall1" ' +
                                'style="background: #d9a441 !important;color:#F2E2D2;border: 1px solid #d9a441;" ' +
                                'data-level="1">' +
                                '<i class="fa-solid fa-pen-to-square style_actions"></i>' +
                                '</button>';
                        }
                    },
                    {
                        "data": "current_kitchen_name",
                        "title": "Kitchen"
                    },
                    {
                        "data": "emp_name",
                        "title": "Emp Name"
                    },
                    {
                        "data": "emp_code",
                        "className": "dt-center",
                        "title": "Emp Code"
                    },
                    {
                        "data": "is_approved_l1",
                        "title": "Manager Status",
                        "className": "dt-center",
                        "render": function(data, type, row) {
                            if (data == 0) {
                                return '<span style="color:#f39c12; font-weight:600;">Pending</span>';
                            } else if (data == 1) {
                                return '<span style="color:#28a745; font-weight:600;">Approved</span>';
                            } else if (data == 2) {
                                return '<span style="color:#dc3545; font-weight:600;">Rejected</span>';
                            } else {
                                return '<span style="color:#6c757d;">N/A</span>';
                            }
                        }
                    },
                    {
                        "data": "is_approved_l2",
                        "title": "HR/Admin Status",
                        "className": "dt-center",
                        "render": function(data, type, row) {
                            if (data == 0) {
                                return '<span style="color:#f39c12; font-weight:600;">Pending</span>';
                            } else if (data == 1) {
                                return '<span style="color:#28a745; font-weight:600;">Approved</span>';
                            } else if (data == 2) {
                                return '<span style="color:#dc3545; font-weight:600;">Rejected</span>';
                            } else {
                                return '<span style="color:#6c757d;">N/A</span>';
                            }
                        }
                    }

                ],
                columnDefs: [

                    {
                        "width": "10%",
                        "targets": [0],
                        "orderable": false,
                        "className": "dt-center",
                        "searching": true,
                    }, // data alignments  
                    {
                        "width": "15%",
                        "targets": [1],
                        "className": "dt-center"
                    },

                    {
                        "width": "15%",
                        "targets": [2],
                        "className": "dt-center",

                        "searching": true,
                    },
                    {
                        "width": "15%",
                        "targets": [3],
                        "className": "dt-center"
                    },

                ],



                initComplete: function() {
                    var api = this.api();

                    $('.filterhead', api.table().header()).each(function(i) {
                        var column = api.column(i);
                        var select = $('<input type="text" class="filter" />').appendTo($(
                                this).empty())
                            .on('keyup change', function() {
                                var val = $.fn.dataTable.util.escapeRegex(
                                    $(this).val()
                                );
                                column
                                    .search(val ? '^' + val + '$' : '', true, false)
                                    .draw();
                            });

                        if (title == '#' || title == '') {
                            $(".filter").attr('type', 'hidden');
                        }
                    });
                }
            });
            table.on('order.dt search.dt', function() {
                let i = 1;

                table.cells(null, 0, {
                    search: 'applied',
                    order: 'applied'
                }).every(function(cell) {
                    this.data(i++);
                });
            }).draw();
        }

        $('#itemModel').on('hidden.bs.modal', function() {
            $('#approvalForm')[0].reset();

            $(
                '#l1_status_display_div, ' +
                '#view_manager_date_div, ' +
                '#l1_action_div, ' +
                '#l1_remarks_input_div, ' +
                '#l1_remarks_display_div, ' +
                '#l2_approval_div, ' +
                '#l2_waiting_message, ' +
                '#l2_status_display_div, ' +
                '#view_hr_date_div, ' +
                '#l2_action_div, ' +
                '#l2_remarks_input_div, ' +
                '#l2_remarks_display_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 openApprovalModal(rowData, userLevel) {
            console.log('rowData =>', rowData, 'userLevel =>', userLevel);

            // =========================
            // 1. SET COMMON DATA
            // =========================
            $('#view_id').val(rowData.id || '');
            $('#approval_level').val(userLevel || '');

            $('#view_employee_name').val(rowData.emp_name || '');
            $('#request_location_id').val(rowData.location_id || '');
            $('#request_designation_id').val(rowData.designation_id || '');
            $('#request_department_id').val(rowData.department_id || '');
            $('#client_user_id').val(rowData.client_user_id || '');
            $('#view_emp_code').val(rowData.emp_code || '');
            $('#view_requested_date').val(rowData.date || '');
            $('#view_current_kitchen').val(rowData.current_kitchen_name || '');
            $('#view_transfer_kitchen').val(rowData.transfer_kitchen_name || '');
            $('#view_old_designation').val(rowData.old_designation || '');
            $('#view_new_designation').val(rowData.new_designation || '');
            $('#view_old_department').val(rowData.old_department || '');
            $('#view_new_department').val(rowData.new_department || '');
            $('#view_remarks').val(rowData.remarks || '');

            // Status values
            let l1Status = parseInt(rowData.is_approved_l1 || 0);
            let l2Status = parseInt(rowData.is_approved_l2 || 0);

            $('#l1_status_display').val(getStatusText(l1Status));
            $('#l2_status_display').val(getStatusText(l2Status));

            $('#l1_remarks_display').val(rowData.remark_l1 || '');
            $('#l2_remarks_display').val(rowData.remark_l2 || '');

            $('#view_manager_date').val(rowData.approved_date_l1 || '');
            $('#view_hr_date').val(rowData.approved_date_l2 || '');

            // Reset action fields
            $('#l1_action').val('');
            $('#l2_action').val('');
            $('#l1_remarks_input').val('');
            $('#l2_remarks_input').val('');

            // =========================
            // 2. HIDE ALL CONDITIONAL SECTIONS FIRST
            // =========================
            $(
                '#l1_status_display_div, ' +
                '#view_manager_date_div, ' +
                '#l1_action_div, ' +
                '#l1_remarks_input_div, ' +
                '#l1_remarks_display_div, ' +
                '#l2_approval_div, ' +
                '#l2_waiting_message, ' +
                '#l2_status_display_div, ' +
                '#view_hr_date_div, ' +
                '#l2_action_div, ' +
                '#l2_remarks_input_div, ' +
                '#l2_remarks_display_div, ' +
                '#submitApprovalBtn'
            ).hide();

            // =========================
            // 3. LEVEL 1 USER LOGIC
            // =========================
            if (parseInt(userLevel) === 1) {

                // -------- L1 Pending => show input only --------
                if (l1Status === 0) {
                    $('#l1_action_div').show();
                    $('#l1_remarks_input_div').show();
                    $('#submitApprovalBtn').show();

                    // Do NOT show L1 readonly
                    // Do NOT show any L2 section
                }

                // -------- L1 Completed => show readonly --------
                if (l1Status === 1 || l1Status === 2) {
                    $('#l1_status_display_div').show();
                    $('#view_manager_date_div').show();
                    $('#l1_remarks_display_div').show();

                    // Show L2 readonly ONLY if L2 completed
                    if (l2Status === 1 || l2Status === 2) {
                        $('#l2_approval_div').show();
                        $('#l2_status_display_div').show();
                        $('#view_hr_date_div').show();
                        $('#l2_remarks_display_div').show();
                    }

                    // If L2 pending, hide L2 section for L1 user
                }
            }

            // =========================
            // 4. LEVEL 2 USER LOGIC
            // =========================
            if (parseInt(userLevel) === 2) {

                // Always show Level 2 section heading for L2 user
                $('#l2_approval_div').show();

                // -------- If L1 Pending => wait --------
                if (l1Status === 0) {
                    $('#l1_status_display_div').show();
                    $('#l1_remarks_display_div').show(); // optional if available
                    $('#view_manager_date_div').show(); // optional blank if no date
                    $('#l2_waiting_message').show();

                    // No L2 input / readonly
                }

                // -------- If L1 Completed => show L1 readonly --------
                if (l1Status === 1 || l1Status === 2) {
                    $('#l1_status_display_div').show();
                    $('#view_manager_date_div').show();
                    $('#l1_remarks_display_div').show();

                    // If L2 Pending => show L2 input
                    if (l2Status === 0) {
                        $('#l2_action_div').show();
                        $('#l2_remarks_input_div').show();
                        $('#submitApprovalBtn').show();
                    }

                    // If L2 Completed => show L2 readonly
                    if (l2Status === 1 || l2Status === 2) {
                        $('#l2_status_display_div').show();
                        $('#view_hr_date_div').show();
                        $('#l2_remarks_display_div').show();
                    }
                }
            }

            // =========================
            // 5. OPEN MODAL
            // =========================
            $('#itemModel').modal('show');
        }

        $('#submitApprovalBtn').on('click', function() {
            let approvalLevel = $('#approval_level').val();
            let location_id = $('#request_location_id').val();
            let designation_id = $('#request_designation_id').val();
            let department_id = $('#request_department_id').val();
            let client_user_id = $('#client_user_id').val();
            let emp_code = $('#view_emp_code').val();
            let payload = {
                id: $('#view_id').val(),
                approval_level: approvalLevel,
                location_id: location_id,
                designation_id: designation_id,
                department_id: department_id,
                client_user_id: client_user_id,
                emp_code: emp_code,
                _token: '{{ csrf_token() }}'
            };

            if (approvalLevel == 1) {
                payload.status = $('#l1_action').val();
                payload.remarks = $('#l1_remarks_input').val();

                if (!payload.status) {
                    alert('Please select Manager status');
                    return;
                }
            }

            if (approvalLevel == 2) {
                payload.status = $('#l2_action').val();
                payload.remarks = $('#l2_remarks_input').val();

                if (!payload.status) {
                    alert('Please select HR/Admin status');
                    return;
                }
            }

            $.ajax({
                url: 'update_emp_approve', // change your route
                type: 'POST',
                data: payload,
                success: function(response) {
                    if (response.status) {
                        alert(response.message || 'Approval updated successfully');
                        $('#itemModel').modal('hide');
                        get_manager_approve_status();
                        get_hradmin_approve_status();
                    } else {
                        alert(response.message || 'Something went wrong');
                    }
                },
                error: function() {
                    alert('Server error');
                }
            });
        });


        $(document).on('click', '.btn-open-approvall1', function() {
            let table = $('#itemList').DataTable();
            let rowData = table.row($(this).closest('tr')).data();
            openApprovalModal(rowData, 1);

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

        $(document).on('click', '.btn-open-approvall2', function() {
            let table = $('#itemList1').DataTable();
            let rowData = table.row($(this).closest('tr')).data();
            openApprovalModal(rowData, 2);

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




        function get_hradmin_approve_status() {
            $('#itemList1').DataTable().destroy();
            var table = $('#itemList1').DataTable({
                "autoWidth": true,
                "ordering": false,
                "searching": true,
                "order": [0, 'desc'],

                "ajax": {
                    url: "load_approval_level2", // Ajax request
                    type: "get",
                    data: data,

                },

                "columns": [{
                        data: null,
                        title: "#",
                        render: function(data, type, row, meta) {
                            return meta.row + 1;
                        }
                    },
                    {
                        data: null,
                        title: "Action",
                        orderable: false,
                        searchable: false,
                        render: function(data, type, row) {
                            return '<button type="button" class="btn btn-danger btn-open-approvall2" ' +
                                'style="background: #d9a441 !important;color:#F2E2D2;border: 1px solid #d9a441;" ' +
                                'data-level="1">' +
                                '<i class="fa-solid fa-pen-to-square style_actions"></i>' +
                                '</button>';
                        }
                    },
                    {
                        "data": "current_kitchen_name",
                        "title": "Kitchen"
                    },
                    {
                        "data": "emp_name",
                        "title": "Emp Name"
                    },
                    {
                        "data": "emp_code",
                        "title": "Emp Code",
                        "className": "dt-center"
                    },
                    {
                        "data": "is_approved_l1",
                        "className": "dt-center",
                        "title": "Manager Status",
                        "render": function(data, type, row) {
                            if (data == 0) {
                                return '<span style="color:#f39c12; font-weight:600;">Pending</span>';
                            } else if (data == 1) {
                                return '<span style="color:#28a745; font-weight:600;">Approved</span>';
                            } else if (data == 2) {
                                return '<span style="color:#dc3545; font-weight:600;">Rejected</span>';
                            } else {
                                return '<span style="color:#6c757d;">N/A</span>';
                            }
                        }
                    },
                    {
                        "data": "is_approved_l2",
                        "className": "dt-center",
                        "title": "HR/Admin Status",
                        "render": function(data, type, row) {
                            if (data == 0) {
                                return '<span style="color:#f39c12; font-weight:600;">Pending</span>';
                            } else if (data == 1) {
                                return '<span style="color:#28a745; font-weight:600;">Approved</span>';
                            } else if (data == 2) {
                                return '<span style="color:#dc3545; font-weight:600;">Rejected</span>';
                            } else {
                                return '<span style="color:#6c757d;">N/A</span>';
                            }
                        }
                    }

                ],
                columnDefs: [

                    {
                        "width": "10%",
                        "targets": [0],
                        "orderable": false,
                        "className": "dt-center",
                        "searching": true,
                    }, // data alignments  
                    {
                        "width": "15%",
                        "targets": [1],
                        "className": "dt-center"
                    },

                    {
                        "width": "15%",
                        "targets": [2],
                        "className": "dt-center",

                        "searching": true,
                    },
                    {
                        "width": "15%",
                        "targets": [3],
                        "className": "dt-center"
                    },

                ],



                initComplete: function() {
                    var api = this.api();

                    $('.filterhead', api.table().header()).each(function(i) {
                        var column = api.column(i);
                        var select = $('<input type="text" class="filter" />').appendTo($(
                                this).empty())
                            .on('keyup change', function() {
                                var val = $.fn.dataTable.util.escapeRegex(
                                    $(this).val()
                                );
                                column
                                    .search(val ? '^' + val + '$' : '', true, false)
                                    .draw();
                            });

                        if (title == '#' || title == '') {
                            $(".filter").attr('type', 'hidden');
                        }
                    });
                }
            });
            table.on('order.dt search.dt', function() {
                let i = 1;

                table.cells(null, 0, {
                    search: 'applied',
                    order: 'applied'
                }).every(function(cell) {
                    this.data(i++);
                });
            }).draw();
        }
    </script>
</body>

</html>