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

<style>
    /* multi select */
    .sd-CustomSelect {
        /* width: 271.2px; */
        display: none;
        visibility: hidden;

        width: 100% !important;
        /* Take full width of parent */
        max-width: 100%;
        /* Prevent overflow */
        box-sizing: border-box;
    }
  
    label#error_kitchen_name {
        padding-top: 58px;
    }

    label#error_emp_name {
        padding-top: 58px;
    }

    .ms-choice>span.placeholder {
        display: none;
    }

    .sd-CustomSelect+.ms-parent {
        width: 100% !important;
    }


    .sd-CustomSelect+.ms-parent .ms-choice {
        height: calc(3.5rem + 2px);
        padding: 1rem 0.75rem 0 0.75rem;
        border-radius: 0.375rem;
        border: 1px solid #ced4da;
        background-color: #fff;
        display: flex;
        align-items: center;
        font-size: 1rem;
        position: relative;
    }

    .ms-drop input[type="checkbox"],
    .ms-drop input[type="radio"] {
        accent-color: brown;
    }


    .sd-CustomSelect+.ms-parent .ms-choice>span {
        position: relative;
        top: 2px;
        color: #6c757d;
    }


    .sd-CustomSelect+.ms-parent .ms-choice::before,
    .sd-CustomSelect+.ms-parent .ms-choice::after {
        display: none !important;
        content: none !important;
    }


    .sd-CustomSelect+.ms-parent .ms-choice>div {
        background-image: none !important;
    }


    .sd-CustomSelect+.ms-parent .ms-drop {
        z-index: 1050;
        border-radius: 0.375rem;
        border: 1px solid #ced4da;
        box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.1);
    }



    .placeholder {
        background-color: transparent;
    }

    .ms-choice {
        height: 56px !important;
    }


    #multiselect_users,
    #multiselect_options {
        margin-top: -11px;
        font-size: 14px;
        /* z-index: 10000; */
    }


    /* multi select */
    #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; */
        height: 50px;
        width: 130px;
    }

    .submit-btn1 {
        background-color: #BA434D !important;
        /* 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;
        }
    }

    .card-box {
        background: #fff;
        border-radius: 14px;
        padding: 20px;
        box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
        margin-bottom: 20px;
    }

    .year-calendar-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 18px;
    }

    .month-card {
        border: 1px solid #e5e7eb;
        border-radius: 12px;
        padding: 12px;
        background: #fff;
        box-shadow: 0 1px 6px rgba(0, 0, 0, 0.05);
    }

    .month-title {
        text-align: center;
        font-weight: 700;
        margin-bottom: 10px;
        color: #111827;
        font-size: 16px;
    }

    .calendar-grid {
        display: grid;
        grid-template-columns: repeat(7, 1fr);
        gap: 4px;
    }

    .day-header {
        font-size: 11px;
        text-align: center;
        font-weight: 700;
        color: #6b7280;
        padding: 4px 0;
    }

    .day-cell {
        height: 38px;
        border-radius: 8px;
        border: 1px solid #e5e7eb;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        font-size: 13px;
        background: #f9fafb;
        transition: 0.2s;
        user-select: none;
        position: relative;
    }

    .day-cell:hover {
        transform: scale(1.03);
        border-color: #9ca3af;
    }

    .day-cell.empty {
        background: transparent;
        border: none;
        cursor: default;
    }

    .day-cell.weekoff {
        background: #d1fae5;
        color: #065f46;
        border-color: #10b981;
        font-weight: 700;
    }

    .day-cell.holiday {
        background: #fee2e2;
        color: #991b1b;
        border-color: #ef4444;
        font-weight: 700;
    }

    .day-cell.both {
        background: linear-gradient(135deg, #d1fae5 50%, #fee2e2 50%);
        color: #111827;
        border-color: #7c3aed;
        font-weight: 700;
    }

    .day-cell.active-edit {
        outline: 3px solid #2563eb;
        transform: scale(1.04);
    }

    .holiday-badge {
        position: absolute;
        bottom: 1px;
        right: 2px;
        font-size: 8px;
        font-weight: bold;
    }

    .legend-item {
        display: inline-block;
        padding: 6px 12px;
        border-radius: 8px;
        font-size: 13px;
        font-weight: 600;
        margin-right: 8px;
        margin-bottom: 6px;
    }

    .legend-weekoff {
        background: #d1fae5;
        border: 1px solid #10b981;
        color: #065f46;
    }

    .legend-holiday {
        background: #fee2e2;
        border: 1px solid #ef4444;
        color: #991b1b;
    }

    .legend-both {
        background: linear-gradient(135deg, #d1fae5 50%, #fee2e2 50%);
        border: 1px solid #7c3aed;
        color: #111827;
    }

    .employee-checkbox-box {
        max-height: 220px;
        overflow-y: auto;
        border: 1px solid #dee2e6;
        border-radius: 8px;
        padding: 10px;
        background: #fff;
    }

    .employee-item {
        display: flex;
        align-items: center;
        margin-bottom: 8px;
    }

    .employee-item label {
        margin-left: 8px;
        margin-bottom: 0;
        font-size: 14px;
        cursor: pointer;
    }

    .sticky-panel {
        position: sticky;
        top: 15px;
    }

    .table-responsive {
        max-height: 450px;
        overflow-y: auto;
    }

    .small-help {
        font-size: 12px;
        color: #6b7280;
    }

    @media (max-width: 1200px) {
        .year-calendar-grid {
            grid-template-columns: repeat(2, 1fr);
        }
    }

    @media (max-width: 768px) {
        .year-calendar-grid {
            grid-template-columns: repeat(1, 1fr);
        }
    }
</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">WeekOff and Holidays Marking </h5>
                        </div>
                    </div>
                </div>
            </div>

            <div class="card form-container" id="desktop_view">
                <div class="card-body">

                    <div class="row g-3">
                        <div class="col-md-3">
                            <div class="form-floating ">
                                <select class="form-select" id="kitchen_name" name="kitchen_name" required>
                                    <option value="">Select</option>
                                    @foreach ($kitchensData as $kitchens)
                                    <option value="{{ $kitchens->id }}"> {{$kitchens->kitchen_name }}</option>
                                    @endforeach
                                </select>

                                <label for="floatingName">Kitchen Name</label>

                                <p id="error_kitchen_name" style="color:red"></p>
                            </div>
                        </div>

                        <div class="col-md-2">
                            <div class="form-floating ">
                                <select class="form-select" id="year">
                                    @for($y = date('Y') - 1; $y <= date('Y') + 2; $y++)
                                        <option value="{{ $y }}" {{ $y == date('Y') ? 'selected' : '' }}>{{ $y }}</option>
                                        @endfor
                                </select>
                                <label for="floatingName">Year</label>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="form-floating">
                                <select class="sd-CustomSelect" id="emp_name" name="emp_name[]" aria-label="" autocomplete="off" required multiple>

                                </select>
                                <label for="floatingName" id="multiselect_users">User Name</label>

                                <p id="error_emp_name" style="color:red"></p>
                            </div>
                        </div>

                        <div class="col-md-4 text-center gap-2">
                            <button type="submit" class="btn submit-btn" type="button" id="loadCalendarBtn">Load Calendar</button>
                            <button class="btn submit-btn" type="button" id="saveCalendarBtn">Save All</button>
                            <!-- <button type="button" class="btn btn-primary w-50" id="loadCalendarBtn">Load Calendar</button>
                            <button type="button" class="btn btn-success w-50" id="saveCalendarBtn">Save All</button> -->
                        </div>


                    </div>


                    <div class="row" style="margin-top: 5px;">
                        <!-- Left Side -->

                        <div class="col-md-9">
                            <!-- Calendar -->
                            <div class="card-box">
                                <div class="d-flex justify-content-between align-items-center flex-wrap mb-3">
                                    <div>
                                        <span class="legend-item legend-weekoff">Week Off</span>
                                        <span class="legend-item legend-holiday">Holiday</span>
                                        <span class="legend-item legend-both">Week Off + Holiday</span>
                                    </div>

                                    <div class="small-help mt-2 mt-md-0">
                                        <b>Left Click:</b> Cycle status → Normal / WeekOff / Holiday / Both <br>
                                        <b>Right Click:</b> Remove selected date
                                    </div>
                                </div>
                                <div class="d-flex justify-content-between align-items-center flex-wrap mb-3">
                                    <button type="button" class="btn btn-outline-success legend-item" id="markAllSundaysBtn">Mark Sundays</button>
                                    <button type="button" class="btn btn-outline-success legend-item" id="markAllMondaysBtn">Mark Mondays</button>
                                    <button type="button" class="btn btn-outline-success legend-item" id="markAllTuesdaysBtn">Mark Tuesdays</button>
                                    <button type="button" class="btn btn-outline-success legend-item" id="markAllWednesdaysBtn">Mark Wednesdays</button>
                                    <button type="button" class="btn btn-outline-success legend-item" id="markAllThrusdaysBtn">Mark Thrusdays</button>
                                    <button type="button" class="btn btn-outline-success legend-item" id="markAllFridaysBtn">Mark Fridays</button>
                                    <button type="button" class="btn btn-outline-success legend-item" id="markAllSaturdaysBtn">Mark Saturdays</button>
                                </div>

                                <div id="yearlyCalendar" class="year-calendar-grid"></div>
                            </div>


                        </div>

                        <!-- Right Side Inline Edit Panel -->
                        <div class="col-md-3">
                            <div class="card-box sticky-panel">
                                <h5 class="mb-3">Selected Date Editor</h5>

                                <div class="mb-3">
                                    <label class="form-label">Selected Date</label>
                                    <input type="text" class="form-control" id="selectedDateDisplay" readonly>
                                </div>

                                <div class="form-check mb-2">
                                    <input class="form-check-input" type="checkbox" id="edit_is_weekoff">
                                    <label class="form-check-label" for="edit_is_weekoff">Week Off</label>
                                </div>

                                <div class="form-check mb-3">
                                    <input class="form-check-input" type="checkbox" id="edit_is_holiday">
                                    <label class="form-check-label" for="edit_is_holiday">Holiday</label>
                                </div>

                                <div class="mb-3" id="holidayNamePanel" style="display:none;">
                                    <label class="form-label">Holiday Name</label>
                                    <input type="text" class="form-control" id="edit_holiday_name" placeholder="Enter holiday name">
                                </div>

                                <div class="mb-3">
                                    <label class="form-label">Remarks</label>
                                    <input type="text" class="form-control" id="edit_remarks" placeholder="Optional remarks">
                                </div>

                                <div class="d-grid gap-2">
                                    <button class="btn submit-btn1" type="button" id="applySelectedDateBtn">Update Selected Date</button>
                                    <button class="btn btn-danger" type="button" id="removeSelectedDateBtn">Remove Selected Date</button>
                                    <button class="btn reset-btn" type="button" id="clearAllBtn">Clear Screen Data</button>
                                </div>

                                <hr>

                                <div class="small-help">
                                    <b>Fast Working:</b><br>
                                    1. Click date quickly to cycle status<br>
                                    2. If holiday, use this panel to enter holiday name<br>
                                    3. Save All
                                </div>
                            </div>
                        </div>
                        <!-- Added Data View -->
                       
                    </div>
                </div>
            </div>
            <section class="section dashboard form-container">
                <div class="card p-0">
                    <div class="card-body p-2">
                        <div class="card-title"> View Added Data</div>
                        <table id="addedDataTable" class="table table-bordered table-striped table-sm w-100">
                            <thead>
                                <tr>
                                    <th>#</th>
                                    <th>Action</th>
                                    <th>Date</th>
                                    <th>Kitchen</th>
                                    <th>Employee</th>
                                    <th>Code</th>
                                    <th>Week Off</th>
                                    <th>Holiday</th>
                                    <th>Holiday Name</th>
                                    <th>Remarks</th>
                                </tr>
                            </thead>
                            <tbody></tbody>
                        </table>
                    </div>
                </div>
            </section>
        </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>
    <!-- DataTables CSS -->
<link rel="stylesheet" href="https://cdn.datatables.net/1.13.6/css/jquery.dataTables.min.css">

<!-- DataTables JS -->
<script src="https://cdn.datatables.net/1.13.6/js/jquery.dataTables.min.js"></script>
    <script src="js/jquery-ui.js"></script>
    <script src='js/jquery.validate.js'></script>
    <link rel="stylesheet" href="\assets\js\multi-select-css.css">
    <script src="\assets\js\multi-select.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">
    <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-beta.1/dist/css/select2.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-beta.1/dist/js/select2.min.js"></script>
    <script>
        let selectedDates = {};
        let activeDate = null;
        var data = {};
        data['_token'] = '{{ csrf_token() }}';
        $(document).ready(function() {
            generateYearCalendar($('#year').val());
            $(".sd-CustomSelect").multipleSelect({
                selectAll: true,
                filter: true,
                minimumCountSelected: 1,
                container: 'body',
                onOptgroupClick: function(view) {
                    $(view).parents("label").addClass("selected-optgroup");
                }
            });



            // $("#kitchen_name").multipleSelect('checkAll');
            $("#emp_name").multipleSelect('checkAll');

            $(".sd-CustomSelect").css({
                display: "block",
                visibility: "visible"
            });
            loadAddedData();
        });

        // =========================
        // Load Employees by Kitchen
        // =========================
        $('#kitchen_name,#staff_type').change(function() {
            let kitchenId = $('#kitchen_name').val();
            if (kitchenId.length <= 0) {
                return;
            }
            var staff_type = 1;
            $("#pageloader").fadeIn();
            $.ajax({
                url: 'get_emp_list_by_kitchen_id_and_staff_type',
                method: 'get',
                data: {
                    id: kitchenId,
                    staff_type: staff_type
                },
                success: function(res) {
                    if (res) {
                        let empData = JSON.parse(res);
                        $("#pageloader").fadeOut();
                        $('#emp_name').html('');

                        if (empData.length === 0) {
                            $('#emp_name').html('');
                        } else {
                            // $('#emp_name').prop('disabled', false);
                            empData.forEach(function(data) {
                                $('#emp_name').append(`<option value="${data.client_user_id}" data-full_name="${data.full_name}" 
                data-emp_code="${data.emp_code}">${data.full_name} (${data.emp_code})</option>`);
                            });
                        }

                        $('#emp_name').multipleSelect('refresh');
                        $('#emp_name').multipleSelect('checkAll');
                        $(".sd-CustomSelect").css({
                            display: "block",
                            visibility: "visible"
                        });
                    } else {
                        $('#user_id').html('');
                        $('#user_id').multipleSelect('refresh');

                    }

                },
                error: function(res) {
                    console.log(res);
                }
            });
        });

        // =========================
        // Select/Unselect All Employees
        // =========================
        $('#selectAllEmployeesBtn').on('click', function() {
            $('.employee-checkbox').prop('checked', true);
        });

        $('#unselectAllEmployeesBtn').on('click', function() {
            $('.employee-checkbox').prop('checked', false);
        });



        // =========================
        // Load Calendar
        // =========================
        $('#loadCalendarBtn').on('click', function() {
            let kitchenId = $('#kitchen_name').val();
            let employeeIds = $("#emp_name").val();
            let year = $('#year').val();

            if (!kitchenId) {
                alert('Please select kitchen');
                return;
            }

            if (employeeIds.length === 0) {
                alert('Please select at least one employee');
                return;
            }

            loadExistingDates(kitchenId, employeeIds, year);
            loadAddedData();
        });

        // =========================
        // Generate Calendar
        // =========================
        function generateYearCalendar(year) {
            const monthNames = [
                "January", "February", "March", "April", "May", "June",
                "July", "August", "September", "October", "November", "December"
            ];
            const dayNames = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];

            let html = '';

            for (let month = 0; month < 12; month++) {
                let firstDay = new Date(year, month, 1).getDay();
                let daysInMonth = new Date(year, month + 1, 0).getDate();

                html += `<div class="month-card">`;
                html += `<div class="month-title">${monthNames[month]} ${year}</div>`;
                html += `<div class="calendar-grid">`;

                dayNames.forEach(day => {
                    html += `<div class="day-header">${day}</div>`;
                });

                for (let i = 0; i < firstDay; i++) {
                    html += `<div class="day-cell empty"></div>`;
                }

                for (let day = 1; day <= daysInMonth; day++) {
                    let monthFormatted = String(month + 1).padStart(2, '0');
                    let dayFormatted = String(day).padStart(2, '0');
                    let fullDate = `${year}-${monthFormatted}-${dayFormatted}`;

                    let dayClass = getDayClass(fullDate);
                    let activeClass = (activeDate === fullDate) ? 'active-edit' : '';
                    let holidayShort = '';

                    if (selectedDates[fullDate] && selectedDates[fullDate].is_holiday && selectedDates[fullDate].holiday_name) {
                        holidayShort = `<span class="holiday-badge">H</span>`;
                    }

                    html += `
                    <div class="day-cell ${dayClass} ${activeClass}" data-date="${fullDate}" title="${fullDate}">
                        ${day}
                        ${holidayShort}
                    </div>
                `;
                }

                html += `</div></div>`;
            }

            $('#yearlyCalendar').html(html);
        }

        function getDayClass(date) {
            if (!selectedDates[date]) return '';

            let isWeekoff = parseInt(selectedDates[date].is_weekoff) === 1;
            let isHoliday = parseInt(selectedDates[date].is_holiday) === 1;

            if (isWeekoff && isHoliday) return 'both';
            if (isWeekoff) return 'weekoff';
            if (isHoliday) return 'holiday';

            return '';
        }

        // =========================
        // LEFT CLICK = CYCLE STATUS
        // =========================
        $(document).on('click', '.day-cell:not(.empty)', function() {
            let date = $(this).data('date');
            activeDate = date;

            cycleDateStatus(date);
            loadDateToSidePanel(date);
            generateYearCalendar($('#year').val());
        });

        function cycleDateStatus(date) {
            if (!selectedDates[date]) {
                // Normal -> WeekOff
                selectedDates[date] = {
                    id: null,
                    is_weekoff: 1,
                    is_holiday: 0,
                    holiday_name: '',
                    remarks: ''
                };
                return;
            }

            let d = selectedDates[date];

            // WeekOff -> Holiday
            if (d.is_weekoff == 1 && d.is_holiday == 0) {
                d.is_weekoff = 0;
                d.is_holiday = 1;
                return;
            }

            // Holiday -> Both
            if (d.is_weekoff == 0 && d.is_holiday == 1) {
                d.is_weekoff = 1;
                d.is_holiday = 1;
                return;
            }

            // Both -> Normal (remove)
            if (d.is_weekoff == 1 && d.is_holiday == 1) {
                delete selectedDates[date];
                return;
            }
        }

        // =========================
        // RIGHT CLICK = REMOVE
        // =========================
        $(document).on('contextmenu', '.day-cell:not(.empty)', function(e) {
            e.preventDefault();

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

            if (selectedDates[date]) {
                delete selectedDates[date];
            }

            if (activeDate === date) {
                activeDate = null;
                clearSidePanel();
            }

            generateYearCalendar($('#year').val());
        });

        // =========================
        // Side Panel Load
        // =========================
        function loadDateToSidePanel(date) {
            $('#selectedDateDisplay').val(date);

            let dayData = selectedDates[date] || {
                is_weekoff: 0,
                is_holiday: 0,
                holiday_name: '',
                remarks: ''
            };

            $('#edit_is_weekoff').prop('checked', parseInt(dayData.is_weekoff) === 1);
            $('#edit_is_holiday').prop('checked', parseInt(dayData.is_holiday) === 1);
            $('#edit_holiday_name').val(dayData.holiday_name || '');
            $('#edit_remarks').val(dayData.remarks || '');

            toggleHolidayPanel();
        }

        function clearSidePanel() {
            $('#selectedDateDisplay').val('');
            $('#edit_is_weekoff').prop('checked', false);
            $('#edit_is_holiday').prop('checked', false);
            $('#edit_holiday_name').val('');
            $('#edit_remarks').val('');
            $('#holidayNamePanel').hide();
        }

        $('#edit_is_holiday').on('change', function() {
            toggleHolidayPanel();
        });

        function toggleHolidayPanel() {
            if ($('#edit_is_holiday').is(':checked')) {
                $('#holidayNamePanel').show();
            } else {
                $('#holidayNamePanel').hide();
                $('#edit_holiday_name').val('');
            }
        }

        // =========================
        // Apply Side Panel Changes
        // =========================
        $('#applySelectedDateBtn').on('click', function() {
            if (!activeDate) {
                alert('Please click a date first');
                return;
            }

            let isWeekoff = $('#edit_is_weekoff').is(':checked') ? 1 : 0;
            let isHoliday = $('#edit_is_holiday').is(':checked') ? 1 : 0;
            let holidayName = $('#edit_holiday_name').val().trim();
            let remarks = $('#edit_remarks').val().trim();

            // if (isHoliday === 1 && holidayName === '') {
            //     alert('Please enter holiday name');
            //     return;
            // }

            if (isWeekoff === 0 && isHoliday === 0) {
                delete selectedDates[activeDate];
                clearSidePanel();
                activeDate = null;
            } else {
                selectedDates[activeDate] = {
                    id: selectedDates[activeDate]?.id || null,
                    is_weekoff: isWeekoff,
                    is_holiday: isHoliday,
                    holiday_name: holidayName,
                    remarks: remarks
                };
            }

            generateYearCalendar($('#year').val());
        });

        // =========================
        // Remove Selected Date
        // =========================
        $('#removeSelectedDateBtn').on('click', function() {
            if (!activeDate) {
                alert('Please click a date first');
                return;
            }

            if (selectedDates[activeDate]) {
                delete selectedDates[activeDate];
            }

            clearSidePanel();
            activeDate = null;
            generateYearCalendar($('#year').val());
        });

        // =========================
        // Clear All Screen Data
        // =========================
        $('#clearAllBtn').on('click', function() {
            if (confirm('Are you sure you want to clear all screen data?')) {
                selectedDates = {};
                activeDate = null;
                clearSidePanel();
                generateYearCalendar($('#year').val());
            }
        });

        // =========================
        // Load Existing Data
        // =========================
        function loadExistingDates(kitchenId, employeeIds, year) {
            $("#pageloader").fadeIn();
            $.ajax({
                url: "weekoff_holiday_load",
                type: "GET",
                data: {
                    kitchen_id: kitchenId,
                    employee_ids: employeeIds,
                    year: year
                },
                success: function(response) {
                    $("#pageloader").fadeOut();
                    if (response.status) {
                        selectedDates = (response.data && !Array.isArray(response.data)) ? response.data : {};
                        activeDate = null;
                        clearSidePanel();
                        generateYearCalendar(year);
                    } else {
                        selectedDates = {};
                        generateYearCalendar(year);
                    }
                },
                error: function(xhr) {
                    console.error(xhr.responseText);
                    alert('Failed to load calendar data');
                }
            });
        }

        // =========================
        // Save All Data
        // =========================
        $('#saveCalendarBtn').on('click', function() {
            $("#pageloader").fadeIn();
            let kitchenId = $('#kitchen_name').val();
            let employeeIds = $("#emp_name").val();
            let year = $('#year').val();

            if (!kitchenId) {
                alert('Please select kitchen');
                return;
            }

            if (employeeIds.length === 0) {
                alert('Please select at least one employee');
                return;
            }
            let selectedEmployees = [];
            let full_name = [];
            let emp_code = [];
            $('#emp_name option:selected').each(function() {
                full_name.push($(this).data('full_name'));
                emp_code.push($(this).data('emp_code'));
            });
            $.ajax({
                url: "weekoff_hoilday_save",
                type: "POST",
                data: {
                    kitchen_id: kitchenId,
                    employee_ids: employeeIds,
                    full_name: full_name,
                    emp_code: emp_code,
                    year: year,
                    dates: selectedDates,
                    _token: '{{ csrf_token() }}'
                },
                success: function(response) {
                    $("#pageloader").fadeOut();
                    if (response.status) {
                        alert(response.message);
                        loadAddedData();
                        loadExistingDates(kitchenId, employeeIds, year);
                    } else {
                        alert(response.message || 'Save failed');
                    }
                },
                error: function(xhr) {
                    console.error(xhr.responseText);
                    alert('Something went wrong while saving');
                }
            });
        });

        // =========================
        // Mark All Sundays
        // =========================
        $('#markAllSundaysBtn').on('click', function() {
            let year = parseInt($('#year').val());

            for (let month = 0; month < 12; month++) {
                let daysInMonth = new Date(year, month + 1, 0).getDate();

                for (let day = 1; day <= daysInMonth; day++) {
                    let dateObj = new Date(year, month, day);
                    if (dateObj.getDay() === 0) {
                        let date = formatDate(year, month + 1, day);

                        if (!selectedDates[date]) {
                            selectedDates[date] = {
                                id: null,
                                is_weekoff: 1,
                                is_holiday: 0,
                                holiday_name: '',
                                remarks: ''
                            };
                        } else {
                            selectedDates[date].is_weekoff = 1;
                        }
                    }
                }
            }

            generateYearCalendar(year);
        });

        $('#markAllMondaysBtn').on('click', function() {
            let year = parseInt($('#year').val());

            for (let month = 0; month < 12; month++) {
                let daysInMonth = new Date(year, month + 1, 0).getDate();

                for (let day = 1; day <= daysInMonth; day++) {
                    let dateObj = new Date(year, month, day);
                    if (dateObj.getDay() === 1) {
                        let date = formatDate(year, month + 1, day);

                        if (!selectedDates[date]) {
                            selectedDates[date] = {
                                id: null,
                                is_weekoff: 1,
                                is_holiday: 0,
                                holiday_name: '',
                                remarks: ''
                            };
                        } else {
                            selectedDates[date].is_weekoff = 1;
                        }
                    }
                }
            }

            generateYearCalendar(year);
        });


        $('#markAllTuesdaysBtn').on('click', function() {
            let year = parseInt($('#year').val());

            for (let month = 0; month < 12; month++) {
                let daysInMonth = new Date(year, month + 1, 0).getDate();

                for (let day = 1; day <= daysInMonth; day++) {
                    let dateObj = new Date(year, month, day);
                    if (dateObj.getDay() === 2) {
                        let date = formatDate(year, month + 1, day);

                        if (!selectedDates[date]) {
                            selectedDates[date] = {
                                id: null,
                                is_weekoff: 1,
                                is_holiday: 0,
                                holiday_name: '',
                                remarks: ''
                            };
                        } else {
                            selectedDates[date].is_weekoff = 1;
                        }
                    }
                }
            }

            generateYearCalendar(year);
        });


        $('#markAllWednesdaysBtn').on('click', function() {
            let year = parseInt($('#year').val());

            for (let month = 0; month < 12; month++) {
                let daysInMonth = new Date(year, month + 1, 0).getDate();

                for (let day = 1; day <= daysInMonth; day++) {
                    let dateObj = new Date(year, month, day);
                    if (dateObj.getDay() === 3) {
                        let date = formatDate(year, month + 1, day);

                        if (!selectedDates[date]) {
                            selectedDates[date] = {
                                id: null,
                                is_weekoff: 1,
                                is_holiday: 0,
                                holiday_name: '',
                                remarks: ''
                            };
                        } else {
                            selectedDates[date].is_weekoff = 1;
                        }
                    }
                }
            }

            generateYearCalendar(year);
        });


        $('#markAllThrusdaysBtn').on('click', function() {
            let year = parseInt($('#year').val());

            for (let month = 0; month < 12; month++) {
                let daysInMonth = new Date(year, month + 1, 0).getDate();

                for (let day = 1; day <= daysInMonth; day++) {
                    let dateObj = new Date(year, month, day);
                    if (dateObj.getDay() === 4) {
                        let date = formatDate(year, month + 1, day);

                        if (!selectedDates[date]) {
                            selectedDates[date] = {
                                id: null,
                                is_weekoff: 1,
                                is_holiday: 0,
                                holiday_name: '',
                                remarks: ''
                            };
                        } else {
                            selectedDates[date].is_weekoff = 1;
                        }
                    }
                }
            }

            generateYearCalendar(year);
        });


        $('#markAllFridaysBtn').on('click', function() {
            let year = parseInt($('#year').val());

            for (let month = 0; month < 12; month++) {
                let daysInMonth = new Date(year, month + 1, 0).getDate();

                for (let day = 1; day <= daysInMonth; day++) {
                    let dateObj = new Date(year, month, day);
                    if (dateObj.getDay() === 5) {
                        let date = formatDate(year, month + 1, day);

                        if (!selectedDates[date]) {
                            selectedDates[date] = {
                                id: null,
                                is_weekoff: 1,
                                is_holiday: 0,
                                holiday_name: '',
                                remarks: ''
                            };
                        } else {
                            selectedDates[date].is_weekoff = 1;
                        }
                    }
                }
            }

            generateYearCalendar(year);
        });


        // =========================
        // Mark All Saturdays
        // =========================
        $('#markAllSaturdaysBtn').on('click', function() {
            let year = parseInt($('#year').val());

            for (let month = 0; month < 12; month++) {
                let daysInMonth = new Date(year, month + 1, 0).getDate();

                for (let day = 1; day <= daysInMonth; day++) {
                    let dateObj = new Date(year, month, day);
                    if (dateObj.getDay() === 6) {
                        let date = formatDate(year, month + 1, day);

                        if (!selectedDates[date]) {
                            selectedDates[date] = {
                                id: null,
                                is_weekoff: 1,
                                is_holiday: 0,
                                holiday_name: '',
                                remarks: ''
                            };
                        } else {
                            selectedDates[date].is_weekoff = 1;
                        }
                    }
                }
            }

            generateYearCalendar(year);
        });

        function formatDate(year, month, day) {
            return `${year}-${String(month).padStart(2, '0')}-${String(day).padStart(2, '0')}`;
        }

        // =========================
        // View Added Data
        // =========================
        function loadAddedData() {
            let kitchenId = $('#kitchen_name').val();
            let employeeIds = $("#emp_name").val() || [];

            if (!Array.isArray(employeeIds)) {
                employeeIds = [employeeIds];
            }

            let year = $('#year').val();
            let firstEmployeeId = employeeIds.length > 0 ? employeeIds[0] : '';

            if ($.fn.DataTable.isDataTable('#addedDataTable')) {
                $('#addedDataTable').DataTable().destroy();
            }

            $('#addedDataTable').DataTable({
                processing: true,
                serverSide: false,
                destroy: true,
                autoWidth: false,
                ordering: false,
                searching: true,
                pageLength: 10,

                ajax: {
                    url: "weekoff_holiday_view",
                    type: "GET",
                    data: {
                        kitchen_id: kitchenId,
                        employee_id: firstEmployeeId,
                        year: year
                    },
                    dataSrc: function(response) {
                        return response.status ? (response.data || []) : [];
                    }
                },

                columns: [{
                        data: null,
                        title: "#",
                        render: function(data, type, row, meta) {
                            return meta.row + 1;
                        }
                    },
                    {
                        data: "id",
                        title: "Action",
                        render: function(data) {
                            return `<button type="button" class="btn btn-sm btn-danger delete-row-btn" data-id="${data}">Delete</button>`;
                        }
                    },
                    {
                        data: "date",
                        title: "Date",
                        defaultContent: ''
                    },
                    {
                        data: "kitchen_name",
                        title: "Kitchen",
                        defaultContent: ''
                    },
                    {
                        data: "employee_name",
                        title: "Employee",
                        defaultContent: ''
                    },
                    {
                        data: "employee_code",
                        title: "Code",
                        defaultContent: ''
                    },
                    {
                        data: "is_weekoff",
                        title: "Week Off",
                        render: function(data) {
                            return parseInt(data) === 1 ? 'Yes' : 'No';
                        }
                    },
                    {
                        data: "is_holiday",
                        title: "Holiday",
                        render: function(data) {
                            return parseInt(data) === 1 ? 'Yes' : 'No';
                        }
                    },
                    {
                        data: "holiday_name",
                        title: "Holiday Name",
                        defaultContent: ''
                    },
                    {
                        data: "remarks",
                        title: "Remarks",
                        defaultContent: ''
                    }
                ],

                columnDefs: [{
                        targets: [0, 1, 6, 7],
                        className: "text-center"
                    },
                    {
                        targets: '_all',
                        className: "align-middle"
                    }
                ],

                language: {
                    emptyTable: "No data found"
                }
            });
        }

        $('#refreshViewBtn').on('click', function() {
            loadAddedData();
        });

        // =========================
        // Delete Record from DB
        // =========================
        $(document).on('click', '.delete-row-btn', function() {
            let id = $(this).data('id');
          
            if (!confirm('Are you sure you want to delete this record?')) {
                return;
            }
         $("#pageloader").fadeIn();
            $.ajax({
                url: `weekoff_holiday_delete/${id}`,
                type: "POST",
                data: {
                    _method: 'DELETE',
                    _token: '{{ csrf_token() }}'
                },
                success: function(response) {
                    $("#pageloader").fadeOut();
                    if (response.status) {
                        alert(response.message);

                        let kitchenId = $('#kitchen_name').val();
                        let employeeIds = $("#emp_name").val();
                        let year = $('#year').val();

                        loadAddedData();

                        if (kitchenId && employeeIds.length > 0) {
                            loadExistingDates(kitchenId, employeeIds, year);
                        }
                    } else {
                        alert(response.message || 'Delete failed');
                    }
                },
                error: function(xhr) {
                    console.error(xhr.responseText);
                    alert('Failed to delete record');
                }
            });
        });

        // =========================
        // Year Change
        // =========================
        $('#year').on('change', function() {
            selectedDates = {};
            activeDate = null;
            clearSidePanel();
            generateYearCalendar($(this).val());
        });
    </script>
</body>

</html>