@include('layouts.headElement')
@include('layouts.headerNormal')
@include('layouts.sidebarV2')

<style>

    .mdtp__pm.active,.mdtp__am.active{
        background-color: #BA434D !important;
    }

    .header-and-button-container {
        display: flex;
        justify-content: space-between !important;
        padding: 0px 3px;
    }


    #operations_holder {
        margin: 0 !important;
    }




    .day-btn.selected {
        background-color: #BA434D;
        color: white;
    }

    .mdtp__time_holder {
        background-color: #BA434D !important;
    }

    .sd-CustomSelect {
        display: none;
        visibility: hidden;
    }

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

    .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);
    }



    .flex-box {
        float: right;
        margin-top: -51px;
    }

    input::-webkit-outer-spin-button,
    input::-webkit-inner-spin-button {
        -webkit-appearance: none;
        margin: 0;
    }

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

    #kitchen,
    #kitchen_edit {
        width: 100% !important
    }

    .chosen-container-multi .chosen-choices {
        height: 54px !important;
    }

    #kitchen_edit_chosen {
        width: 100% !important;
    }

    ul.chosen-results {
        height: 75px;
        overflow-y: scroll;
    }

    .button-adjust {
        float: right;
        margin-top: 3%;
        margin-bottom: 3%;
        background-color: #BA434D;
        outline: none;
        border: none;
    }

    span.select2-selection.select2-selection {
        min-height: 52px;
        /* width: 336px; */
    }

    .select2-container .select2-selection--multiple {
        min-height: 52px;
        width: 336px;

    }

    span.select2-selection.select2-selection--single {
        height: 45px !important;
        width: 353px !important;

        /* width: 353px; */

    }

    #operations_holder {
        max-height: 200px;
        overflow-y: auto;
        overflow-x: hidden;
    }

    .chosen-container-multi {
        width: 100% !important;
    }

    .calendar {
        display: grid;
        grid-template-columns: repeat(7, 1fr);
        gap: 5px;
        max-width: 400px;
        margin: 20px auto;
    }

    .day {
        padding: 10px;
        background: #eee;
        text-align: center;
        cursor: pointer;
        border-radius: 4px;
    }

    .day.selected {
        background: #BA434D;
        color: white;
    }

    .time-popup {
        /* position: absolute; */
        background: #fff;
        padding: 10px;
        border: 1px solid #ccc;
        z-index: 10;
        display: none;
        flex-direction: column;
        gap: 8px;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
        top: 10%;
        left: 25%;
    }

    .time-popup label {
        display: block;
        margin-bottom: 20px;
    }

    .time-popup input {
        width: 100%;
        padding: 5px 0px;
        margin-bottom: 10px;
    }

    #saveTime {
        margin-top: 25px;
    }

    table {
        /* margin: 5px auto; */
        border-collapse: collapse;
        width: 100%;
    }

    #table-container {
        max-height: 300px;
        overflow-y: auto;
    }

    .flatpickr-calendar {
        min-width: auto !important;
        width: 170px !important;
        /* Adjust as needed */
    }

    .flatpickr-time {
        justify-content: center;
    }

    .flatpickr-time input {
        width: 40px !important;
        /* Narrower input fields */
    }

    @media (max-width: 500px) {
        #cal_holder {
            overflow-x: scroll;
        }

        .form-floating label {
            font-size: 12px;
            /* Adjust the size as needed */
        }
    }

    @media (max-width:780px) {
        .button-adjust {
            width: 100%;
            margin-top: 3%;
            margin-bottom: 3%;
        }
    }


    @media (max-width: 500px) {
        .modal-dialog {
            margin: auto !important;
            /* centers horizontally */
        }
    }



    .btn-success {
        color: #fff;
        background-color: #BA434D !important;
        border-color: #BA434D !important;
    }


    @media only screen and (min-width: 200px) and (max-width: 768px) {}


    .sd-CustomSelect+.dropdown-menu,
    .select2-container .select2-dropdown {
        z-index: 9999 !important;
    }

    .added-list-container {
        margin-top: 5px;
        margin-right: -2px
    }

    @media screen and (max-width:768px) {
        .dataTables_filter{
            display: flex !important;
            justify-content: center !important;
        }
    }

    @media screen and (max-width:512px) {
        .header-and-button-container {
            display: block;
        }
    }
</style>

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

    <main id="body_main_container" class="body-main-container">
        <div id="body_container">
            <div class="card p-0" id="page_header_container">
                <div class="card-body p-1">
                    <div class="header-and-button-container">
                        <div class="">
                            <h5 class="card-title" style="padding: 10px;">Operations Entry</h5>
                        </div>
                        <div class="" style="display: flex; justify-content:center; align-items:center;">
                            <button type="button" class="btn submit-btn button-adjust"
                                data-bs-toggle="modal" data-bs-target="#verticalycentered" >Add Category</button>
                        </div>
                    </div>
                </div>
            </div>
            <div class="tab-content form-container" id="myTabjustifiedContent">
                <div class="tab-pane fade show active" id="home-justified" role="tabpanel"
                    aria-labelledby="home-tab">
                    <div class="card p-0">

                        <div class="card-body p-1">
                            <!-- Floating Labels Form -->
                            <form class="" id="ingrAdd" method="POST">
                                <div class="row p-2 g-2">
                                <input type="hidden" value="{{csrf_token()}}" name="_token">

                                <div class="col-md-3">
                                    <div class="form-floating">
                                        <select class="sd-CustomSelect" id="kitchen" name="kitchen[]"
                                            onchange="OutletChange()" multiple>
                                            @foreach ($kitchens as $kitchen)
                                            <option value="{{$kitchen->id}}">{{$kitchen->kitchen_name}}</option>
                                            @endforeach
                                        </select>
                                        <label for="floatingName" id="multiselect_label">Kitchens</label>
                                        <p id="kitchen_Error_01" style="color:red"></p>
                                    </div>
                                </div>
                                <div class="col-md-3">
                                    <div class="form-floating">
                                        <select class="sd-CustomSelect" id="user_id" name="user_id[]" multiple>

                                        </select>
                                        <label for="floatingName" id="multiselect_users">Users</label>

                                        <p id="select_user_error" style="color:red"></p>
                                    </div>
                                </div>
                                <div class="col-md-3">
                                    <div class="form-floating">
                                        <select class="form-select" id="category" name="category" aria-label=""
                                            autocomplete="off" data-placeholder="Select Users" required>
                                            <option value=""></option>
                                        </select>
                                        <label for="floatingName">Category</label>

                                        <p id="categories_error_data" style="color:red"></p>
                                    </div>
                                </div>
                                <div class="col-md-3">
                                    <div class="form-floating">
                                        <select class="sd-CustomSelect" id="add_options" name="add_options[]"
                                            data-placeholder="Option to Add" multiple="true">

                                            <option value="YES">YES</option>
                                            <option value="NO">NO</option>
                                            <option value="Camera">CAMERA</option>
                                            <option value="Text Box">TEXT</option>

                                        </select>
                                        <!-- <label for="floatingName">Option to Add</span></label> -->
                                        <label for="floatingName" id="multiselect_options">Options</label>
                                        <p id="ErrorID_2" style="color:red"></p>
                                    </div>
                                </div>


                                <div id="operations_holder">
                                    <div class="row operation-row">
                                        <div class="col-md-11 mt-1">
                                            <div class="form-floating">
                                                <input type="text" class="form-control plc_holder"
                                                    name="ingr_name[]" placeholder="operation" autocomplete="off">
                                                <label>Checklist Point</label>
                                                <!-- <p class="error-text" style="color:red"></p> -->
                                            </div>
                                        </div>
                                        <div class="col-md-1 mt-2 mb-2">
                                            <button type="button" class="btn btn-success add-btn">+</button>
                                        </div>
                                    </div>
                                </div>

                                <div class="col-md-4">
                                    <div class="form-floating">
                                        <select class="form-select" id="operation_type" name="operation_type"
                                            aria-label="" autocomplete="off" required
                                            onchange="changeoperationType()">
                                            <option value="">Select</option>
                                            <option value="1">Daily</option>
                                            <option value="2">Weekly</option>
                                            <option value="3">Monthly</option>
                                        </select>
                                        <label for="floatingName">Operation Type</span></label>
                                        <p id="operations_type_error" style="color:red"></p>
                                    </div>
                                </div>

                                <div class="col-md-8 hide_calendar"></div>



                                <!-- <div class="col-md-4">
                                        <div class="form-floating">
                                            <select class="chosen-select form-select"
                                                data-placeholder="Choose Users..." id="users" name="users[]"
                                                multiple="true">
                                                @foreach ($users as $user)
                                                <option value="{{$user->id}}">{{$user->first_name.' '.$user->last_name}}</option>
                                                @endforeach
                                            </select>
                                            <p id="select_user_error" style="color:red"></p>
                                        </div>
                                    </div> -->

                                <div class="col-md-4" id="d-start">
                                    <div class="form-floating timepicker_div">
                                        <input type="text" class="form-control timepicker" id="d_start_time"
                                            name="d_start_time" placeholder="Start Time">
                                        <label for="start_time">Start Time</label>
                                        <p id="start_time_error" style="color:red"></p>
                                    </div>
                                </div>
                                <div class="col-md-4" id="d-end">
                                    <div class="form-floating timepicker_div">
                                        <input type="text" class="form-control timepicker1" id="d_end_time"
                                            name="d_end_time" placeholder="End Time">
                                        <label for="end_time">End Time</label>
                                        <p id="end_time_error" style="color:red"></p>
                                    </div>
                                </div>




                                <div class="col-md-6" style="position: relative;" id="cal_holder">
                                    <div class="calendar" id="calendar1"></div>
                                    <div class="calendar" id="calendar2"></div>
                                    <div class="calendar" id="calendar3"></div>
                                    <div class="calendar" id="calendar4"></div>
                                    <div class="calendar" id="calendar5"></div>
                                    <div class="calendar" id="calendar6"></div>

                                </div>




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

                                    <div class="time-popup" id="timePopup">
                                        <span id="closePopup"
                                            style="float: inline-end;top: 5px; right: 10px; cursor: pointer; font-weight: bold; font-size: 18px;">X
                                        </span>
                                        <div class="container">
                                            <label>Start Time: <input type="text" id="startTime"
                                                    class="form-control timepickerWeekStart" /></label>
                                            <label>End Time: <input type="text" id="endTime"
                                                    class="form-control timepickerWeekEnd" /></label>
                                            <button type="button" class="btn btn-success"
                                                id="saveTime">Save</button>
                                        </div>
                                    </div>
                                </div>

                                <div class="col-md-6" id="table-container">
                                    <table class="table" id="timeTable">
                                        <thead>
                                            <tr>
                                                <th>Week-no</th>
                                                <th>Day</th>
                                                <th>Start-Time</th>
                                                <th>End-Time</th>
                                                <th>Remove</th>
                                            </tr>
                                        </thead>
                                        <tbody></tbody>
                                    </table>
                                </div>

                                <div class="text-center buttons-container">
                                    <button type="button" onclick="add_ingr();" id="submit_add"
                                        class="btn submit-btn">Submit</button>
                                    <button type="button" onclick="reset_main_data();" id=""
                                        class="btn reset-btn">Reset</button>
                                </div>
                                </div>

                            </form><!-- End floating Labels Form -->

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

            </div>


            <!-- REPORTS STARTS FROM HERE -->


            <div class="card report-container p-2">
                <div class="card-body p-1">
                    <div class="row">
                        <div class="col-sm-8">
                            <!-- <h5 class="card-title">Particulars/Activity Add</h5> -->
                            <h5 class="card-title" style="padding:10px 4px">Added List</h5>
                        </div>

                        <div class="col-md-4 button-adjust1">
                            <div class="form-floating">
                                <select class="form-select" id="search_category" name="search_category"
                                    onchange="change_category_res();" aria-label="" autocomplete="off"
                                    data-placeholder="Select Users" required>
                                    <option value=""></option>
                                </select>
                                <label for="floatingName">Category</label>

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


                    </div>

                    <ul class="nav nav-tabs nav-tabs-bordered" id="borderedTab" role="tablist">
                        <li class="nav-item" role="presentation">
                            <button class="nav-link active" id="home-tab" data-bs-toggle="tab" onclick="load_submit_ingr()"
                                data-bs-target="#bordered-home" type="button" role="tab" aria-controls="home"
                                aria-selected="true">Daily Checklist<span id="daily_count"></span></button>
                        </li>



                        <!-- Quarterly Tab -->
                        <li class="nav-item" role="presentation">
                            <button class="nav-link" id="quarterly_1-tab" data-bs-toggle="tab" data-bs-target="#quarterly_1"
                                type="button" role="tab" aria-controls="quarterly_1" onclick="load_submit_ingr2()"
                                aria-selected="false">Weekly Checklist <span id="weekly_count"></span></button>
                        </li>
                        <!-- Monthly Tab -->
                        <li class="nav-item" role="presentation">
                            <button class="nav-link" id="monthly_1-tab" data-bs-toggle="tab" onclick="load_submit_ingr3()"
                                data-bs-target="#monthly_1" type="button" role="tab" aria-controls="monthly_1"
                                aria-selected="false">Monthly Checklist<span id="monthly_count"></span></button>
                        </li>
                        <li class="nav-item" role="presentation">
                            <button class="nav-link" id="profile-tab" data-bs-toggle="tab"
                                data-bs-target="#bordered-profile" type="button" role="tab" onclick="load_category()"  aria-controls="profile"
                                aria-selected="false">Category<span id="category_count"></span></button>
                        </li>



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

                                        <table id="view_addIngr" class='display dataTable ' style="width:100%">
                                            <thead>
                                                <tr>
                                                    <th scope="col">#</th>
                                                    <th scope="col">Action</th>
                                                    <th scope="col">Checklist Points</th>
                                                    <th scope="col">Start Time</th>
                                                    <th scope="col">End Time</th>
                                                    <!-- <th scope="col">Added Options</th>
                                                <th scope="col">Kitchen Name</th>
                                                <th scope="col">Category</th>
                                                <th scope="col">Weekday</th>
                                                <th scope="col">Operation Type</th>
                                                <th scope="col">Start Time</th>
                                                <th scope="col">End Time</th> -->

                                                    <!-- <th scope="col">Created Date</th> -->
                                                </tr>
                                            </thead>
                                        </table>
                                    </div>
                                </div>
                            </div>
                        </div>


                        <!-- Quarterly Pane -->
                        <div class="tab-pane fade" id="quarterly_1" role="tabpanel" aria-labelledby="quarterly_1-tab">
                            <div class="col-lg-12" id="tcp_table2">
                                <div class="card p-0">
                                    <div class="card-body p-1" style="overflow-x:auto;">

                                        <table id="view_addIngr_weekly" class='display dataTable ' style="width:100%">
                                            <thead>
                                                <tr>
                                                    <th scope="col">#</th>
                                                    <th scope="col">Action</th>
                                                    <th scope="col">Checklist Points</th>
                                                    <!-- <th scope="col">Added Options</th>
                                                <th scope="col">Kitchen Name</th>
                                                <th scope="col">Category</th>
                                                <th scope="col">Weekday</th>
                                                <th scope="col">Operation Type</th>
                                                <th scope="col">Start Time</th>
                                                <th scope="col">End Time</th> -->

                                                    <!-- <th scope="col">Created Date</th> -->
                                                </tr>
                                            </thead>
                                        </table>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="tab-pane fade" id="monthly_1" role="tabpanel" aria-labelledby="monthly_1-tab">
                            <div class="col-lg-12" id="tcp_table2">
                                <div class="card p-0">
                                    <div class="card- p-1" style="overflow-x:auto;">

                                        <table id="view_addIngr_monthly" class='display dataTable ' style="width:100%">
                                            <thead>
                                                <tr>
                                                    <th scope="col">#</th>
                                                    <th scope="col">Action</th>
                                                    <th scope="col">Checklist Points</th>
                                                    <!-- <th scope="col">Added Options</th>
                                                <th scope="col">Kitchen Name</th>
                                                <th scope="col">Category</th>
                                                <th scope="col">Weekday</th>
                                                <th scope="col">Operation Type</th>
                                                <th scope="col">Start Time</th>
                                                <th scope="col">End Time</th> -->
                                                    <!-- <th scope="col">Created Date</th> -->
                                                </tr>
                                            </thead>
                                        </table>
                                    </div>
                                </div>
                            </div>
                        </div>



                        <div class="tab-pane fade" id="bordered-profile" role="tabpanel" aria-labelledby="profile-tab">
                            <div class="col-lg-12" id="tcp_table1">
                                <!-- <div class="col-lg-12"> -->
                                <div class="card p-0">
                                    <div class="card-body p-1" style="overflow-x:auto;">

                                        <table id="view_catgorytable_data" class='display dataTable ' style="width:100%">
                                            <thead>
                                                <tr>
                                                    <th scope="col">#</th>

                                                    <th scope="col">Action</th>

                                                    <th scope="col">Category</th>
                                                </tr>
                                            </thead>
                                        </table>
                                        <!-- End Table with stripped rows -->

                                    </div>
                                </div>

                            </div>
                        </div>


                    </div>

                </div>
            </div>





            <div class="modal fade" id="ExtralargeModalDaily" tabindex="-1">
                <div class="modal-dialog modal-xl modal-dialog-centered" style="padding-top: 40px;">
                    <div class="modal-content">

                        <div class="card p-0">
                            <div class="card-body p-1">
                                <div class="row">
                                    <div class="col-sm-12">
                                        <!-- <h5 class="card-title">Particulars/Activity Add</h5> -->
                                        <h5 class="card-title" style="padding: 10px;">Daily Checklist</h5>
                                    </div>
                                </div>
                                <div>
                                    <ul class="nav nav-tabs nav-tabs-bordered d-flex" id="borderedTabJustified"
                                        role="tablist">

                                        <li class="nav-item flex-fill" role="presentation">
                                            <button class="nav-link w-100 active" id="home-tab_daily" data-bs-toggle="tab"
                                                data-bs-target="#bordered-justified-home_daily" type="button" role="tab"
                                                aria-controls="home" aria-selected="true">View</button>
                                        </li>

                                        <li class="nav-item flex-fill" role="presentation">
                                            <button class="nav-link w-100" id="new-tab_daily" data-bs-toggle="tab"
                                                data-bs-target="#bordered-justified-edit_daily" type="button" role="tab"
                                                aria-controls="new" aria-selected="false">Edit</button>
                                        </li>

                                        <li class="nav-item flex-fill" role="presentation">
                                            <button class="nav-link w-100" id="home-tab_daily_delete" data-bs-toggle="tab"
                                                data-bs-target="#bordered-justified-delete_daily" type="button" role="tab"
                                                aria-controls="contact" aria-selected="false">Delete</button>
                                        </li>

                                        <button type="button" class="btn-close" style="width: 30px; font-weight:500;margin-top:-40px!important "
                                            data-bs-dismiss="modal" aria-label="Close"></button>

                                    </ul>
                                </div>

                                <div class="tab-content p-0" id="borderedTabJustifiedContent">
                                    <div class="tab-pane fade show active" id="bordered-justified-home_daily" role="tabpanel"
                                        aria-labelledby="home-tab_daily">
                                        <div class="card p-0" style="border:none">
                                            <div class="card-body m-0 p-0">

                                                <ul class="nav nav-tabs d-flex" id="myTabjustified" role="tablist" style="border:none"></ul>
                                                <div class="tab-content p-0 m-0" id="myTabjustifiedContent">
                                                    <div class="tab-pane fade show active" id="home-justified"
                                                        role="tabpanel" aria-labelledby="home-tab">
                                                        <div class="card-body p-2">


                                                            <form class="row g-1" id="daily_view" method="POST">
                                                                <input type="hidden" value="{{csrf_token()}}" name="_token">


                                                                <div class="col-md-3">
                                                                    <div class="form-floating mb-1">

                                                                        <select class="sd-CustomSelect" id="kitchen_daily_data_view" name="kitchen_daily_data_view[]"
                                                                            multiple="true">
                                                                            @foreach ($kitchens as $kitchen)
                                                                            <option value="{{$kitchen->id}}">{{$kitchen->kitchen_name}}</option>
                                                                            @endforeach
                                                                        </select>


                                                                        <label for="kitchen_daily_view"
                                                                            id="multiselect_label">Kitchens</label>
                                                                        <p id="kitchen_Error_kitchen_daily_view"
                                                                            style="color:red"></p>
                                                                    </div>
                                                                </div>


                                                                <div class="col-md-3">
                                                                    <div class="form-floating">

                                                                        <select class="sd-CustomSelect" id="user_name_daily__dataview" name="user_name_daily__dataview[]"
                                                                            multiple>

                                                                        </select>

                                                                        <label for="user_name_daily_view" id="multiselect_label">User
                                                                            Names</label>
                                                                    </div>
                                                                </div>

                                                                <div class="col-md-3">
                                                                    <div class="form-floating">
                                                                        <input type="text" class="form-control"
                                                                            id="category_daily_data_view" name="category_daily_data_view" readonly />
                                                                        <label
                                                                            for="category_daily_data_view">Category</label>
                                                                        <p id="error_category_daily_data_view" style="color:red"></p>
                                                                    </div>
                                                                </div>



                                                                <div class="col-md-3">
                                                                    <div class="form-floating mb-1">

                                                                        <select class="sd-CustomSelect"
                                                                            id="options_daily_view"
                                                                            name="options_daily_view[]"
                                                                            data-placeholder="Option to Add"
                                                                            multiple="true">

                                                                            <option value="YES">YES</option>
                                                                            <option value="NO">NO</option>
                                                                            <option value="Camera">CAMERA</option>
                                                                            <option value="Text Box">TEXT</option>

                                                                        </select>


                                                                        <label
                                                                            for="options_daily_view" id="multiselect_label">Options</label>
                                                                        <p id="ErrorID_options_daily_view" style="color:red"></p>
                                                                    </div>
                                                                </div>

                                                                <div id="operations_holder_daily_data_view">
                                                                    <div class="row operation-row_daily_view mb-1">
                                                                        <div class="col-md-11 mb-2">
                                                                            <div class="form-floating">
                                                                                <input type="text"
                                                                                    class="form-control plc_holder"
                                                                                    name="ingr_daily_data_view[]"
                                                                                    placeholder="operation"
                                                                                    autocomplete="off">
                                                                                <label>Checklist Point</label>
                                                                                <!-- <p class="error-text" style="color:red"></p> -->
                                                                            </div>
                                                                        </div>

                                                                    </div>
                                                                </div>

                                                                <div class="col-md-4">
                                                                    <div class="form-floating">
                                                                        <select class="form-select"
                                                                            id="operation_type_daily_view"
                                                                            name="operation_type_daily_view" aria-label=""
                                                                            autocomplete="off" required disabled
                                                                            onchange="changeoperationType()">
                                                                            <option value="">Select</option>
                                                                            <option value="1">Daily</option>
                                                                            <option value="2">Weekly</option>
                                                                            <option value="3">Monthly</option>
                                                                        </select>
                                                                        <label for="floatingName">Opertaion
                                                                            Type</span></label>
                                                                        <p id="operation_type_daily_view"
                                                                            style="color:red"></p>
                                                                    </div>
                                                                </div>


                                                                <div class="col-md-4" id="d-start">
                                                                    <div class="form-floating timepicker_div_daily_view">
                                                                        <input type="text" class="form-control timepicker_daily_view"
                                                                            id="d_start_time_daily_view" name="d_start_time_daily_view"
                                                                            placeholder="Start Time" readonly>
                                                                        <label for="start_time">Start Time</label>
                                                                        <p id="start_time_error" style="color:red"></p>
                                                                    </div>
                                                                </div>
                                                                <div class="col-md-4" id="d-end">
                                                                    <div class="form-floating timepicker_div_daily_view">
                                                                        <input type="text" class="form-control timepicker_daily_view"
                                                                            id="d_to_time_daily_view" name="d_to_time_daily_view"
                                                                            placeholder="End Time" readonly>
                                                                        <label for="end_time">End Time</label>
                                                                        <p id="end_time_error" style="color:red"></p>
                                                                    </div>
                                                                </div>




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

                                                                    <div class="time-popup" id="timePopup">
                                                                        <span id="closePopup"
                                                                            style="float: inline-end;top: 5px; right: 10px; cursor: pointer; font-weight: bold; font-size: 18px;">X
                                                                        </span>
                                                                        <div class="container">
                                                                            <label>Start Time: <input type="text"
                                                                                    id="startTime"
                                                                                    class="form-control timepickerWeekStart" /></label>
                                                                            <label>End Time: <input type="text" id="endTime"
                                                                                    class="form-control timepickerWeekEnd" /></label>
                                                                            <button type="button" class="btn btn-success"
                                                                                id="saveTime">Save</button>
                                                                        </div>
                                                                    </div>
                                                                </div>



                                                            </form>



                                                        </div>
                                                    </div>

                                                </div>

                                            </div>
                                        </div>
                                    </div>
                                    <div class="tab-pane fade " id="bordered-justified-edit_daily" role="tabpanel"
                                        aria-labelledby="new-tab_daily">
                                        <div class="card p-0" style="border:none">
                                            <div class="card-body p-1">

                                                <ul class="nav nav-tabs d-flex" id="myTabjustified" role="tablist" style="border:none"></ul>
                                                <div class="tab-content p-0 m-0" id="myTabjustifiedContent">
                                                    <div class="tab-pane fade show active" id="home-justified"
                                                        role="tabpanel" aria-labelledby="home-tab">
                                                        <div class="card-body p-1">

                                                            <form class="row g-1 p-1" id="daily_data_editIng" method="POST">
                                                                <input type="hidden" value="{{csrf_token()}}" name="_token">

                                                                <div class="hidden_container" style="display: none;"></div>

                                                                <input type="hidden" value="" id="hidden_particular_name_daily" name="hidden_particular_name_daily">

                                                                <input type="hidden" value="" id="hidden_start_date_daily" name="hidden_start_date_daily">

                                                                <input type="hidden" value="" id="hidden_to_date_daily" name="hidden_to_date_daily">

                                                                <input type="hidden" value="" id="hidden_operation_type_daily" name="hidden_operation_type_daily">


                                                                <div class="col-md-3">
                                                                    <div class="form-floating mb-3">

                                                                        <select class="sd-CustomSelect" id="kitchen_daily_data_edit" name="kitchen_daily_data_edit[]"
                                                                            multiple>
                                                                            @foreach ($kitchens as $kitchen)
                                                                            <option value="{{$kitchen->id}}">{{$kitchen->kitchen_name}}</option>
                                                                            @endforeach
                                                                        </select>



                                                                        <label for="kitchen_daily_edit" id="multiselect_label">Kitchens</label>

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


                                                                <div class="col-md-3">
                                                                    <div class="form-floating">

                                                                        <select class="sd-CustomSelect" id="user_name_daily__dataedit" name="user_name_daily__dataedit[]"
                                                                            multiple>

                                                                        </select>

                                                                        <label for="user_name_daily__dataedit" id="multiselect_label">User
                                                                            Names</label>
                                                                    </div>
                                                                </div>




                                                                <div class="col-md-3">
                                                                    <div class="form-floating">
                                                                        <input type="text" class="form-control"
                                                                            id="category_daily_data_edit" name="category_daily_data_edit" readonly />
                                                                        <label
                                                                            for="category_daily_data_edit">Category</label>
                                                                        <p id="error_category_daily_data_edit" style="color:red"></p>
                                                                    </div>
                                                                </div>





                                                                <div class="col-md-3">
                                                                    <div class="form-floating">

                                                                        <select class="sd-CustomSelect"
                                                                            id="options_daily_edit"
                                                                            name="options_daily_edit[]"
                                                                            data-placeholder="Option to Add"
                                                                            multiple="true">

                                                                            <option value="YES">YES</option>
                                                                            <option value="NO">NO</option>
                                                                            <option value="Camera">CAMERA</option>
                                                                            <option value="Text Box">TEXT</option>

                                                                        </select>


                                                                        <label
                                                                            for="options_daily_edit" id="multiselect_label">Options</label>
                                                                        <p id="ErrorID_options_daily_edit" style="color:red"></p>
                                                                    </div>
                                                                </div>

                                                                <div id="operations_holder_daily_edit">
                                                                    <div class="row operation-row_daily_data mt-1 mb-2">
                                                                        <div class="col-md-11 mb-2">
                                                                            <div class="form-floating">
                                                                                <input type="text"
                                                                                    class="form-control plc_holder"
                                                                                    name="ingr_daily_dataedit[]"
                                                                                    placeholder="operation"
                                                                                    autocomplete="off">
                                                                                <label>Checklist Point</label>
                                                                                 <p id="ingr_daily_dataedit_error"
                                                                            style="color:red"></p>
                                                                            </div>
                                                                        </div>
                                                                        <div class="col-md-1 mt-2 mb-2">
                                                                            <button type="button"
                                                                                class="btn btn-success add-btn">+</button>
                                                                        </div>
                                                                    </div>
                                                                </div>

                                                                <div class="col-md-4">
                                                                    <div class="form-floating">
                                                                        <select class="form-select"
                                                                            id="operation_type_daily_edit"
                                                                            name="operation_type_daily_edit" aria-label=""
                                                                            autocomplete="off" required disabled
                                                                            onchange="changeoperationType()">
                                                                            <option value="">Select</option>
                                                                            <option value="1">Daily</option>
                                                                            <option value="2">Weekly</option>
                                                                            <option value="3">Monthly</option>
                                                                        </select>
                                                                        <label for="floatingName">Opertaion
                                                                            Type</span></label>
                                                                        <p id="operation_type_daily_edit"
                                                                            style="color:red"></p>
                                                                    </div>
                                                                </div>





                                                                <div class="col-md-4" id="d-start">
                                                                    <div class="form-floating timepicker_div_daily_edit">
                                                                        <input type="text" class="form-control timepicker_daily_edit"
                                                                            id="d_start_time_daily_edit" name="d_start_time_daily_edit"
                                                                            placeholder="Start Time" readonly>
                                                                        <label for="start_time">Start Time</label>
                                                                        <p id="start_time_errord_start_time_daily_edit" style="color:red"></p>
                                                                    </div>
                                                                </div>
                                                                <div class="col-md-4" id="d-end">
                                                                    <div class="form-floating timepicker_div_daily_edit1">
                                                                        <input type="text" class="form-control timepicker_daily_edit"
                                                                            id="d_to_time_daily_edit" name="d_to_time_daily_edit"
                                                                            placeholder="End Time" readonly>
                                                                        <label for="end_time">End Time</label>
                                                                        <p id="end_time_error_d_to_time_daily_edit" style="color:red"></p>
                                                                    </div>
                                                                </div>







                                                                <div class="text-center buttons-container">
                                                                    <button type="button" onclick="edit_ingr();"
                                                                        id="submit_add"
                                                                        class="btn submit-btn">Submit</button>
                                                                    <button type="button" onclick="reset_daily_data();" id=""
                                                                        class="btn btn-primary reset-btn">Reset</button>

                                                                </div>
                                                            </form>


                                                        </div>
                                                    </div>

                                                </div>

                                            </div>
                                        </div>
                                    </div>
                                    <div class="tab-pane fade" id="bordered-justified-delete_daily" role="tabpanel"
                                        aria-labelledby="home-tab_daily_delete">
                                        <div class="card p-0" style="border:none">
                                            <div class="card-body p-1">

                                                <ul class="nav nav-tabs d-flex" id="myTabjustified" role="tablist" style="border:none"></ul>
                                                <div class="tab-content p-1 m-0" id="myTabjustifiedContent">
                                                    <div class="tab-pane fade show active" id="home-justified"
                                                        role="tabpanel" aria-labelledby="home-tab">
                                                        <div class="card-body p-1">

                                                            <form class="row g-1" id="daily_delete_data" method="POST">
                                                                <input type="hidden" value="{{csrf_token()}}" name="_token">


                                                                <div class="hidden_container_delete" style="display: none;"></div>

                                                                <div class="col-md-3">
                                                                    <div class="form-floating mb-1">

                                                                        <select class="sd-CustomSelect" id="kitchen_daily_data_delete" name="kitchen_daily_data_delete[]"
                                                                            multiple>
                                                                            @foreach ($kitchens as $kitchen)
                                                                            <option value="{{$kitchen->id}}">{{$kitchen->kitchen_name}}</option>
                                                                            @endforeach
                                                                        </select>




                                                                        <label for="kitchen_daily_delete"
                                                                            id="multiselect_label">Kitchens</label>
                                                                        <p id="kitchen_Error_kitchen_daily_delete"
                                                                            style="color:red"></p>
                                                                    </div>
                                                                </div>


                                                                <div class="col-md-3">
                                                                    <div class="form-floating">

                                                                        <select class="sd-CustomSelect" id="user_name_daily_datadelete" name="user_name_daily_datadelete[]"
                                                                            multiple>

                                                                        </select>

                                                                        <label for="user_name_daily_delete" id="multiselect_label">User
                                                                            Names</label>
                                                                    </div>
                                                                </div>




                                                                <div class="col-md-3">
                                                                    <div class="form-floating">
                                                                        <input type="text" class="form-control"
                                                                            id="category_daily_data_delete" name="category_daily_data_delete" readonly />
                                                                        <label
                                                                            for="category_daily_data_delete">Category</label>
                                                                        <p id="error_category_daily_data_delete" style="color:red"></p>
                                                                    </div>
                                                                </div>





                                                                <div class="col-md-3">
                                                                    <div class="form-floating mb-1">

                                                                        <select class="sd-CustomSelect"
                                                                            id="options_daily_delete"
                                                                            name="options_daily_delete[]"
                                                                            data-placeholder="Option to Add"
                                                                            multiple="true" disabled>

                                                                            <option value="YES">YES</option>
                                                                            <option value="NO">NO</option>
                                                                            <option value="Camera">CAMERA</option>
                                                                            <option value="Text Box">TEXT</option>

                                                                        </select>



                                                                        <label
                                                                            for="options_daily_delete" id="multiselect_label">Options</label>
                                                                        <p id="ErrorID_options_daily_delete" style="color:red"></p>
                                                                    </div>
                                                                </div>

                                                                <div id="operations_holder_daily_delete">
                                                                    <div class="row operation-row_daily_delete_data mb-1">
                                                                        <div class="col-md-11 mb-2">
                                                                            <div class="form-floating">
                                                                                <input type="text"
                                                                                    class="form-control plc_holder"
                                                                                    name="ingr_daily_delete_data[]"
                                                                                    placeholder="operation"
                                                                                    autocomplete="off">
                                                                                <label>Checklist Point</label>

                                                                            </div>
                                                                        </div>

                                                                    </div>
                                                                </div>

                                                                <div class="col-md-4">
                                                                    <div class="form-floating">
                                                                        <select class="form-select"
                                                                            id="operation_type_daily_delete"
                                                                            name="operation_type_daily_delete" aria-label=""
                                                                            autocomplete="off" required disabled
                                                                            onchange="changeoperationType()">
                                                                            <option value="">Select</option>
                                                                            <option value="1">Daily</option>
                                                                            <option value="2">Weekly</option>
                                                                            <option value="3">Monthly</option>
                                                                        </select>
                                                                        <label for="floatingName">Opertaion
                                                                            Type</span></label>
                                                                        <p id="operation_type_daily_delete"
                                                                            style="color:red"></p>
                                                                    </div>
                                                                </div>





                                                                <div class="col-md-4" id="d-start">
                                                                    <div class="form-floating timepicker_div_daily_delete">
                                                                        <input type="text" class="form-control timepicker_daily_delete"
                                                                            id="d_start_time_daily_delete" name="d_start_time_daily_delete"
                                                                            placeholder="Start Time" readonly>
                                                                        <label for="start_time">Start Time</label>
                                                                        <p id="start_time_error" style="color:red"></p>
                                                                    </div>
                                                                </div>
                                                                <div class="col-md-4" id="d-end">
                                                                    <div class="form-floating timepicker_div_daily_delete">
                                                                        <input type="text" class="form-control timepicker_daily_delete"
                                                                            id="d_to_time_daily_delete" name="d_to_time_daily_delete"
                                                                            placeholder="End Time" readonly>
                                                                        <label for="end_time">End Time</label>
                                                                        <p id="end_time_error" style="color:red"></p>
                                                                    </div>
                                                                </div>







                                                                <div class="text-center">

                                                                    <button type="button" onclick="delete_ingr();"
                                                                        id="submit_add"
                                                                        class="btn delete-btn">Delete</button>


                                                                </div>
                                                            </form>




                                                        </div>
                                                    </div>

                                                </div>

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


                                </div><!-- End Bordered Tabs Justified -->
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- total model ExtralargeModalWeekly use this  -->
            <div class="modal fade" id="ExtralargeModalWeekly" tabindex="-1">
                <div class="modal-dialog modal-xl modal-dialog-centered" style="padding-top: 40px;">
                    <div class="modal-content">

                        <div class="card">
                            <div class="card-body">
                                <div class="row">
                                    <div class="col-sm-12">
                                        <!-- <h5 class="card-title">Particulars/Activity Add</h5> -->
                                        <h5 class="card-title" style="padding: 10px;">Weekly Checklist</h5>
                                    </div>
                                </div>
                                <div>
                                    <ul class="nav nav-tabs nav-tabs-bordered d-flex" id="borderedTabJustified"
                                        role="tablist">

                                        <li class="nav-item flex-fill" role="presentation">
                                            <button class="nav-link w-100 active" id="home-tab_weekly_data"
                                                data-bs-toggle="tab" data-bs-target="#bordered-justified-home_weekly_data"
                                                type="button" role="tab" aria-controls="home"
                                                aria-selected="true">View</button>
                                        </li>

                                        <li class="nav-item flex-fill" role="presentation">
                                            <button class="nav-link w-100" id="new-tab_weekly_data" data-bs-toggle="tab"
                                                data-bs-target="#bordered-justified-edit_weekly_data" type="button"
                                                role="tab" aria-controls="new" aria-selected="false">Edit</button>
                                        </li>

                                        <li class="nav-item flex-fill" role="presentation">
                                            <button class="nav-link w-100" id="contact-tab_weekly_data" data-bs-toggle="tab"
                                                data-bs-target="#bordered-justified-delete_weekly_data" type="button"
                                                role="tab" aria-controls="contact" aria-selected="false">Delete</button>
                                        </li>

                                        <button type="button" class="btn-close" style="width: 30px; font-weight:500; "
                                            data-bs-dismiss="modal" aria-label="Close"></button>

                                    </ul>
                                </div>

                                <div class="tab-content" id="borderedTabJustifiedContent">
                                    <div class="tab-pane fade show active" id="bordered-justified-home_weekly_data"
                                        role="tabpanel" aria-labelledby="home-tab_weekly_data">
                                        <div class="card p-0">
                                            <div class="card-body m-0 p-1">

                                                <ul class="nav nav-tabs d-flex" id="myTabjustified" role="tablist"></ul>
                                                <div class="tab-content m-0 p-1" id="myTabjustifiedContent">
                                                    <div class="tab-pane fade show active" id="home-justified"
                                                        role="tabpanel" aria-labelledby="home-tab">
                                                        <div class="card-body p-1">


                                                            <form class="row g-1" id="ingrAddWeekly_view"
                                                                method="POST">
                                                                <input type="hidden" value="{{csrf_token()}}" name="_token">
                                                                <div class="col-md-3">
                                                                    <div class="form-floating mb-3">
                                                                        <select class="sd-CustomSelect" id="kitchen_weekly_data_view"
                                                                            name="kitchen_weekly_data_view[]"
                                                                            multiple>
                                                                            @foreach ($kitchens as $kitchen)
                                                                            <option value="{{$kitchen->id}}">
                                                                                {{$kitchen->kitchen_name}}
                                                                            </option>
                                                                            @endforeach
                                                                        </select>
                                                                        <label for="floatingName"
                                                                            id="multiselect_label">Kitchens</label>
                                                                        <p id="kitchen_Error_01_kitchen_monthly_view" style="color:red"></p>
                                                                    </div>
                                                                </div>


                                                                <div class="col-md-3">
                                                                    <div class="form-floating">
                                                                        <select class="sd-CustomSelect" id="user_id_weekly_view"
                                                                            name="user_id_weekly_view[]" multiple>

                                                                        </select>

                                                                        <label for="user_id_weekly_view"
                                                                            id="multiselect_users">Users</label>

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


                                                                <div class="col-md-3">
                                                                    <div class="form-floating">

                                                                        <input type="text" class="form-control" name="category_view_weekly_data" id="category_view_weekly_data" value="" readonly>
                                                                        <label for="floatingName">Category</label>

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





                                                                <div class="col-md-3">
                                                                    <div class="form-floating">
                                                                        <select class="sd-CustomSelect"
                                                                            id="add_options_data_view_weekly"
                                                                            name="add_options_data_view_weekly[]"
                                                                            data-placeholder="Option to Add"
                                                                            multiple="true" disabled>

                                                                            <option value="YES">YES</option>
                                                                            <option value="NO">NO</option>
                                                                            <option value="Camera">CAMERA</option>
                                                                            <option value="Text Box">TEXT</option>

                                                                        </select>
                                                                        <!-- <label for="floatingName">Option to Add</span></label> -->
                                                                        <label for="add_options_data_view_weekly"
                                                                            id="multiselect_options">Options</label>
                                                                        <p id="ErrorID_2add_options_data_view_weekly" style="color:red"></p>
                                                                    </div>
                                                                </div>

                                                                <div id="operations_holder_weekly_view">
                                                                    <div class="row operation-row mt-1 mb-2">
                                                                        <div class="col-md-11 mb-2">
                                                                            <div class="form-floating">
                                                                                <input type="text"
                                                                                    class="form-control plc_holder"
                                                                                    name="ingr_name[]"
                                                                                    placeholder="operation"
                                                                                    autocomplete="off">
                                                                                <label>Checklist Point</label>
                                                                                <!-- <p class="error-text" style="color:red"></p> -->
                                                                            </div>
                                                                        </div>
                                                                        <div class="col-md-1 mt-2 mb-2">
                                                                            <button type="button"
                                                                                class="btn btn-success add-btn">+</button>
                                                                        </div>
                                                                    </div>
                                                                </div>

                                                                <div class="col-md-4">
                                                                    <div class="form-floating">
                                                                        <select class="form-select"
                                                                            id="operation_type_weekly_view"
                                                                            name="operation_type_weekly_view"
                                                                            aria-label="" autocomplete="off" required
                                                                            disabled>
                                                                            <option value="">Select</option>
                                                                            <option value="1">Daily</option>
                                                                            <option value="2">Weekly</option>
                                                                            <option value="3">Monthly</option>
                                                                        </select>
                                                                        <label for="operation_type_weekly_view">Opertaion
                                                                            Type</span></label>
                                                                        <p id="operation_type_operation_type_weekly_viewr"
                                                                            style="color:red"></p>
                                                                    </div>
                                                                </div>

                                                                <!-- <div class="col-md-8 hide_calder_view"></div> -->


                                                                <div class="row">
                                                                    <!-- Left: Calendar Holder -->
                                                                    <div class="col-md-6" id="cal_holder_view_weekly" style="position: relative;">
                                                                        <div class="calendar" id="calendar1"></div>
                                                                        <div class="calendar" id="calendar2"></div>
                                                                        <div class="calendar" id="calendar3"></div>
                                                                        <div class="calendar" id="calendar4"></div>
                                                                        <div class="calendar" id="calendar5"></div>
                                                                        <div class="calendar" id="calendar6"></div>
                                                                    </div>

                                                                    <!-- Right: Table -->
                                                                    <div class="col-md-6 text-start" id="table-container">
                                                                        <table class="table" id="timeTable_weekly_view">
                                                                            <thead>
                                                                                <tr>
                                                                                    <th>Week-no</th>
                                                                                    <th>Day</th>
                                                                                    <th>Start-Time</th>
                                                                                    <th>End-Time</th>
                                                                                </tr>
                                                                            </thead>
                                                                            <tbody></tbody>
                                                                        </table>
                                                                    </div>
                                                                </div>










                                                            </form>



                                                        </div>
                                                    </div>

                                                </div>

                                            </div>
                                        </div>
                                    </div>
                                    <div class="tab-pane fade p-0 " id="bordered-justified-edit_weekly_data" role="tabpanel"
                                        aria-labelledby="home-tab_weekly_data">
                                        <div class="card p-0" style="border:none">
                                            <div class="card-body p-1">

                                                <ul class="nav nav-tabs d-flex" id="myTabjustified" role="tablist" style="border:none"></ul>
                                                <div class="tab-content p-1 m-0" id="myTabjustifiedContent">
                                                    <div class="tab-pane fade show active" id="home-justified"
                                                        role="tabpanel" aria-labelledby="home-tab">
                                                        <div class="card-body p-1">


                                                            <form class="row g-1" id="ingrAddDailyWeekly_edit"
                                                                method="POST">
                                                                <input type="hidden" value="{{csrf_token()}}" name="_token">

                                                                <div class="hidden_container_weekly" style="display: none;"></div>


                                                                <input type="hidden" value="" name="hidden_particular_name_weekly" id="hidden_particular_name_weekly">
                                                                <input type="hidden" value="" name="hidden_start_date_weekly" id="hidden_start_date_weekly">
                                                                <input type="hidden" value="" name="hidden_to_date_weekly" id="hidden_to_date_weekly">
                                                                <input type="hidden" value="" name="hidden_operation_type_weekly" id="hidden_operation_type_weekly">


                                                                <div class="col-md-3">
                                                                    <div class="form-floating mb-1">
                                                                        <select class="sd-CustomSelect"
                                                                            id="kitchen_view_edit_weekly" name="kitchen_view_edit_weekly[]"
                                                                            multiple>
                                                                            @foreach ($kitchens as $kitchen)
                                                                            <option value="{{$kitchen->id}}">
                                                                                {{$kitchen->kitchen_name}}
                                                                            </option>
                                                                            @endforeach
                                                                        </select>
                                                                        <label for="floatingName"
                                                                            id="multiselect_label">Kitchens</label>
                                                                        <p id="kitchen_Error_01_kitchen_view_edit_monthly" style="color:red"></p>
                                                                    </div>
                                                                </div>


                                                                <div class="col-md-3">
                                                                    <div class="form-floating">
                                                                        <select class="sd-CustomSelect" id="user_id_weekly_edit"
                                                                            name="user_id_weekly_edit[]" multiple="true">

                                                                        </select>
                                                                        <label for="user_id_weekly_edit"
                                                                            id="multiselect_users">Users</label>

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



                                                                <div class="col-md-3">
                                                                    <div class="form-floating">

                                                                        <input type="text" class="form-control" name="category_edit_weekly_data" id="category_edit_weekly_data" value="" readonly>
                                                                        <label for="floatingName">Category</label>

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






                                                                <div class="col-md-3">
                                                                    <div class="form-floating">
                                                                        <select class="sd-CustomSelect"
                                                                            id="add_options_data_edit_weekly"
                                                                            name="add_options_data_edit_weekly[]"
                                                                            data-placeholder="Option to Add"
                                                                            multiple="true">

                                                                            <option value="YES">YES</option>
                                                                            <option value="NO">NO</option>
                                                                            <option value="Camera">CAMERA</option>
                                                                            <option value="Text Box">TEXT</option>

                                                                        </select>
                                                                        <!-- <label for="floatingName">Option to Add</span></label> -->
                                                                        <label for="add_options_data_view_weekly"
                                                                            id="multiselect_options">Options</label>
                                                                        <p id="ErrorID_2add_options_data_view_weekly" style="color:red"></p>
                                                                    </div>
                                                                </div>


                                                                <div id="operations_holder_weekly_edit">
                                                                    <div class="row operation-row mb-1">
                                                                        <div class="col-md-11 mb-2">
                                                                            <div class="form-floating">
                                                                                <input type="text"
                                                                                    class="form-control plc_holder"
                                                                                    name="ingr_name[]"
                                                                                    placeholder="operation"
                                                                                    autocomplete="off">
                                                                                <label>Checklist Point</label>
                                                                                <!-- <p class="error-text" style="color:red"></p> -->
                                                                            </div>
                                                                        </div>
                                                                        <div class="col-md-1 mt-2 mb-2">
                                                                            <button type="button"
                                                                                class="btn btn-success add-btn">+</button>
                                                                        </div>
                                                                    </div>
                                                                </div>

                                                                <div class="col-md-4">
                                                                    <div class="form-floating">
                                                                        <select class="form-select"
                                                                            id="operation_type_weekly_edit"
                                                                            name="operation_type_weekly_edit" aria-label=""
                                                                            autocomplete="off" required
                                                                            disabled>
                                                                            <option value="">Select</option>
                                                                            <option value="1">Daily</option>
                                                                            <option value="2">Weekly</option>
                                                                            <option value="3">Monthly</option>
                                                                        </select>
                                                                        <label for="floatingName">Opertaion
                                                                            Type</span></label>
                                                                        <p id="operation_type_weekly_error"
                                                                            style="color:red"></p>
                                                                    </div>
                                                                </div>

                                                                <!-- <div class="col-md-8 hide_calendar"></div> -->
                                                                <div class="row">
                                                                    <!-- Left: Calendar Holder -->
                                                                    <div class="col-md-6" style="position: relative;" id="cal_holder_edit_weekly">
                                                                        <div class="calendar" id="calendar1"></div>
                                                                        <div class="calendar" id="calendar2"></div>
                                                                        <div class="calendar" id="calendar3"></div>
                                                                        <div class="calendar" id="calendar4"></div>
                                                                        <div class="calendar" id="calendar5"></div>
                                                                        <div class="calendar" id="calendar6"></div>
                                                                    </div>

                                                                    <!-- Right: Table -->
                                                                    <div class="col-md-6" id="table-container">
                                                                        <table class="table" id="timeTable_weekly">
                                                                            <thead>
                                                                                <tr>
                                                                                    <th>Week-no</th>
                                                                                    <th>Day</th>
                                                                                    <th>Start-Time</th>
                                                                                    <th>End-Time</th>
                                                                                </tr>
                                                                            </thead>
                                                                            <tbody></tbody>
                                                                        </table>
                                                                    </div>
                                                                </div>



                                                                <div class="col-md-12" id="time-box-wrapper"
                                                                    style="display:none;">
                                                                    <div class="card border border-primary position-relative"
                                                                        style="border-radius: 10px;">

                                                                        <!-- Small Close Button -->
                                                                        <button type="button"
                                                                            class="btn-close btn-sm position-absolute top-0 end-0 m-2"
                                                                            aria-label="Close" id="close_time_box"
                                                                            style="transform: scale(1);"></button>

                                                                        <div class="row g-3">
                                                                            <!-- End Time First -->
                                                                            <div class="col-md-4" id="d-end_edit">
                                                                                <div class="form-floating timepicker_div">
                                                                                    <input type="text"
                                                                                        class="form-control timepicker1"
                                                                                        id="d_end_time" name="d_end_time"
                                                                                        placeholder="End Time">
                                                                                    <label for="d_end_time">End Time</label>
                                                                                    <p id="end_time_error_weekly"
                                                                                        style="color:red"></p>
                                                                                </div>
                                                                            </div>

                                                                            <!-- Start Time Second -->
                                                                            <div class="col-md-4" id="d-start_edit">
                                                                                <div class="form-floating timepicker_div">
                                                                                    <input type="text"
                                                                                        class="form-control timepicker"
                                                                                        id="d_start_time"
                                                                                        name="d_start_time"
                                                                                        placeholder="Start Time">
                                                                                    <label for="d_start_time">Start
                                                                                        Time</label>
                                                                                    <p id="start_time_error_weekly"
                                                                                        style="color:red"></p>
                                                                                </div>
                                                                            </div>
                                                                        </div>

                                                                        <!-- Save Button -->
                                                                        <div class="text-end mt-3">
                                                                            <button type="button"
                                                                                class="btn btn-sm btn-primary"
                                                                                id="save_time_btn">Save</button>
                                                                        </div>
                                                                    </div>
                                                                </div>






                                                                <div class="text-center">
                                                                    <button type="button" onclick="edit_ingr_edit_data_weekly();"
                                                                        id="submit_add"
                                                                        class="btn submit-btn">Submit</button>
                                                                    <button type="button" onclick="reset_weekly_data();" id=""
                                                                        class="btn reset-btn">Reset</button>

                                                                </div>
                                                            </form>



                                                        </div>
                                                    </div>

                                                </div>

                                            </div>
                                        </div>
                                    </div>
                                    <div class="tab-pane fade" id="bordered-justified-delete_weekly_data" role="tabpanel"
                                        aria-labelledby="home-tab_weekly_data">
                                        <div class="card">
                                            <div class="card-body">

                                                <ul class="nav nav-tabs d-flex" id="myTabjustified" role="tablist"></ul>
                                                <div class="tab-content m-0 p-1" id="myTabjustifiedContent">
                                                    <div class="tab-pane fade show active" id="home-justified"
                                                        role="tabpanel" aria-labelledby="home-tab">
                                                        <div class="card-body">


                                                            <form class="row g-3 pt-3" id="ingrAddDaily_delete_weekly_form" method="POST">
                                                                <input type="hidden" value="{{csrf_token()}}" name="_token">

                                                                <div class="hidden_container_weekly_delete" style="display: none;"></div>

                                                                <div class="col-md-3">
                                                                    <div class="form-floating mb-3">
                                                                        <select class="sd-CustomSelect" id="kitchen_weekly_delete_data"
                                                                            name="kitchen_weekly_delete_data[]"
                                                                            multiple>
                                                                            @foreach ($kitchens as $kitchen)
                                                                            <option value="{{$kitchen->id}}">
                                                                                {{$kitchen->kitchen_name}}
                                                                            </option>
                                                                            @endforeach
                                                                        </select>
                                                                        <label for="floatingName"
                                                                            id="multiselect_label">Kitchens</label>
                                                                        <p id="kitchen_Error_01_kitchen_weekly_delete_data" style="color:red"></p>
                                                                    </div>
                                                                </div>


                                                                <div class="col-md-3">
                                                                    <div class="form-floating">
                                                                        <select class="sd-CustomSelect" id="user_id_weekly_delete"
                                                                            name="user_id_weekly_delete[]" multiple>

                                                                        </select>
                                                                        <label for="user_id_weekly_delete"
                                                                            id="multiselect_users">Users</label>

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


                                                                <div class="col-md-3">
                                                                    <div class="form-floating">

                                                                        <input type="text" class="form-control" name="category_delete_weekly_data" id="category_delete_weekly_data" value="" readonly>
                                                                        <label for="floatingName">Category</label>

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




                                                                <div class="col-md-3">
                                                                    <div class="form-floating">
                                                                        <select class="sd-CustomSelect"
                                                                            id="options_daily_data_weekly_delete"
                                                                            name="options_daily_data_weekly_delete[]"
                                                                            data-placeholder="Option to Add"
                                                                            multiple="true" disabled>

                                                                            <option value="YES">YES</option>
                                                                            <option value="NO">NO</option>
                                                                            <option value="Camera">CAMERA</option>
                                                                            <option value="Text Box">TEXT</option>

                                                                        </select>
                                                                        <!-- <label for="floatingName">Option to Add</span></label> -->
                                                                        <label for="options_daily_data_weekly_delete"
                                                                            id="multiselect_users">Options</label>
                                                                        <p id="ErrorID_2options_daily_data_weekly_delete" style="color:red"></p>
                                                                    </div>
                                                                </div>


                                                                <div id="operations_holder_weekly_delete">
                                                                    <div class="row operation-row mt-1 mb-2">
                                                                        <div class="col-md-11" mb-2>
                                                                            <div class="form-floating">
                                                                                <input type="text"
                                                                                    class="form-control plc_holder"
                                                                                    name="ingr_name[]"
                                                                                    placeholder="operation"
                                                                                    autocomplete="off">
                                                                                <label>Checklist Point</label>
                                                                                <!-- <p class="error-text" style="color:red"></p> -->
                                                                            </div>
                                                                        </div>
                                                                        <div class="col-md-1 mt-2 mb-2">
                                                                            <button type="button"
                                                                                class="btn btn-success add-btn">+</button>
                                                                        </div>
                                                                    </div>
                                                                </div>

                                                                <div class="col-md-4">
                                                                    <div class="form-floating">
                                                                        <select class="form-select"
                                                                            id="operation_type_weekly_delete"
                                                                            name="operation_type_weekly_delete"
                                                                            aria-label="" autocomplete="off" required
                                                                            disabled>
                                                                            <option value="">Select</option>
                                                                            <option value="1">Daily</option>
                                                                            <option value="2">Weekly</option>
                                                                            <option value="3">Monthly</option>
                                                                        </select>
                                                                        <label for="floatingName">Opertaion
                                                                            Type</span></label>
                                                                        <p id="operation_type_weekly_error"
                                                                            style="color:red"></p>
                                                                    </div>
                                                                </div>
                                                                <!-- 
                                                            <div class="col-md-8 hide_calendar"></div> -->


                                                                <!-- 
                                                            <div class="col-md-6" style="position: relative;"
                                                                id="cal_holder">
                                                                <div class="calendar" id="calendar1"></div>
                                                                <div class="calendar" id="calendar2"></div>
                                                                <div class="calendar" id="calendar3"></div>
                                                                <div class="calendar" id="calendar4"></div>
                                                                <div class="calendar" id="calendar5"></div>
                                                                <div class="calendar" id="calendar6"></div>

                                                            </div>


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

                                                                <div class="time-popup" id="timePopup">
                                                                    <span id="closePopup"
                                                                        style="float: inline-end;top: 5px; right: 10px; cursor: pointer; font-weight: bold; font-size: 18px;">X
                                                                    </span>
                                                                    <div class="container">
                                                                        <label>Start Time: <input type="text"
                                                                                id="startTime"
                                                                                class="form-control timepickerWeekStart" /></label>
                                                                        <label>End Time: <input type="text" id="endTime"
                                                                                class="form-control timepickerWeekEnd" /></label>
                                                                        <button type="button" class="btn btn-success"
                                                                            id="saveTime">Save</button>
                                                                    </div>
                                                                </div>
                                                            </div>

                                                            <div class="col-md-6" id="table-container">
                                                                <table class="table" id="timeTable_weekly">
                                                                    <thead>
                                                                        <tr>
                                                                            <th>Week-no</th>
                                                                            <th>Day</th>
                                                                            <th>Start-Time</th>
                                                                            <th>End-Time</th>
                                                                            <th>Remove</th>
                                                                        </tr>
                                                                    </thead>
                                                                    <tbody></tbody>
                                                                </table>
                                                            </div> -->





                                                                <div class="text-center">
                                                                    <button type="button" onclick="delete_weekly_data();"
                                                                        id="submit_add"
                                                                        class="btn delete-btn">Delete</button>

                                                                </div>
                                                            </form>



                                                        </div>
                                                    </div>

                                                </div>

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


                                </div><!-- End Bordered Tabs Justified -->
                            </div>
                        </div>
                    </div>
                </div>
            </div>


            <div class="modal fade" id="ExtralargeModalMonthly" tabindex="-1">
                <div class="modal-dialog modal-xl modal-dialog-centered" style="padding-top: 40px;">
                    <div class="modal-content">


                        <div class="card">


                            <div class="card-body">
                                <div class="row">
                                    <div class="col-sm-12">
                                        <!-- <h5 class="card-title">Particulars/Activity Add</h5> -->
                                        <h5 class="card-title" style="padding: 10px;">Monthly Checklist</h5>
                                    </div>
                                </div>
                                <div>
                                    <ul class="nav nav-tabs nav-tabs-bordered d-flex" id="borderedTabJustified"
                                        role="tablist">

                                        <li class="nav-item flex-fill" role="presentation">
                                            <button class="nav-link w-100 active" id="home-tab_monthly" data-bs-toggle="tab"
                                                data-bs-target="#bordered-justified-home_monthly" type="button" role="tab"
                                                aria-controls="home" aria-selected="true">View</button>
                                        </li>

                                        <li class="nav-item flex-fill" role="presentation">
                                            <button class="nav-link w-100" id="new-tab_monthly" data-bs-toggle="tab"
                                                data-bs-target="#bordered-justified-edit_monthly" type="button" role="tab"
                                                aria-controls="new" aria-selected="false">Edit</button>
                                        </li>

                                        <li class="nav-item flex-fill" role="presentation">
                                            <button class="nav-link w-100" id="home-tab_monthly_delete" data-bs-toggle="tab"
                                                data-bs-target="#bordered-justified-delete_monthly" type="button" role="tab"
                                                aria-controls="contact" aria-selected="false">Delete</button>
                                        </li>

                                        <button type="button" class="btn-close" style="width: 30px; font-weight:500; "
                                            data-bs-dismiss="modal" aria-label="Close"></button>

                                    </ul>
                                </div>

                                <div class="tab-content" id="borderedTabJustifiedContent">
                                    <div class="tab-pane fade show active" id="bordered-justified-home_monthly" role="tabpanel"
                                        aria-labelledby="home-tab_monthly">
                                        <div class="card">
                                            <div class="card-body m-0 p-0">

                                                <ul class="nav nav-tabs d-flex" id="myTabjustified" role="tablist"></ul>
                                                <div class="tab-content m-0 p-1" id="myTabjustifiedContent">
                                                    <div class="tab-pane fade show active" id="home-justified"
                                                        role="tabpanel" aria-labelledby="home-tab">
                                                        <div class="card-body">


                                                            <form class="row g-1" id="monthly_view" method="POST">
                                                                <input type="hidden" value="{{csrf_token()}}" name="_token">


                                                                <div class="col-md-3">
                                                                    <div class="form-floating mb-3">

                                                                        <select class="sd-CustomSelect" id="kitchen_monthly_data_view" name="kitchen_monthly_data_view[]"
                                                                            multiple="true">
                                                                            @foreach ($kitchens as $kitchen)
                                                                            <option value="{{$kitchen->id}}">{{$kitchen->kitchen_name}}</option>
                                                                            @endforeach
                                                                        </select>


                                                                        <label for="kitchen_monthly_data_view"
                                                                            id="multiselect_label">Kitchens</label>
                                                                        <p id="kitchen_Error_kitchen_monthly_data_view"
                                                                            style="color:red"></p>
                                                                    </div>
                                                                </div>


                                                                <div class="col-md-3">
                                                                    <div class="form-floating">

                                                                        <select class="sd-CustomSelect" id="user_name_monthly__dataview" name="user_name_monthly__dataview[]"
                                                                            multiple>

                                                                        </select>


                                                                        <label for="user_name_monthly__dataview" id="multiselect_label">User
                                                                            Names</label>
                                                                    </div>
                                                                </div>

                                                                <div class="col-md-3">
                                                                    <div class="form-floating">
                                                                        <input type="text" class="form-control"
                                                                            id="category_monthly_data_view" name="category_monthly_data_view" readonly />
                                                                        <label
                                                                            for="category_monthly_data_view">Category</label>
                                                                        <p id="error_category_monthly_data_view" style="color:red"></p>
                                                                    </div>
                                                                </div>



                                                                <div class="col-md-3">
                                                                    <div class="form-floating mb-3">

                                                                        <select class="sd-CustomSelect"
                                                                            id="options_monthly_view"
                                                                            name="options_monthly_view[]"
                                                                            data-placeholder="Option to Add"
                                                                            multiple="true" disabled>

                                                                            <option value="YES">YES</option>
                                                                            <option value="NO">NO</option>
                                                                            <option value="Camera">CAMERA</option>
                                                                            <option value="Text Box">TEXT</option>

                                                                        </select>


                                                                        <label
                                                                            for="options_daily_view" id="multiselect_label">Options</label>
                                                                        <p id="ErrorID_options_monthly_view" style="color:red"></p>
                                                                    </div>
                                                                </div>

                                                                <div id="operations_holder_monthly_data_view">
                                                                    <div class="row operation-row_monthly_view">
                                                                        <div class="col-md-11 mb-2">
                                                                            <div class="form-floating">
                                                                                <input type="text"
                                                                                    class="form-control plc_holder"
                                                                                    name="ingr_monthly_data_view[]"
                                                                                    placeholder="operation"
                                                                                    autocomplete="off">
                                                                                <label>Checklist Point</label>
                                                                                <!-- <p class="error-text" style="color:red"></p> -->
                                                                            </div>
                                                                        </div>

                                                                    </div>
                                                                </div>

                                                                <div class="col-md-4">
                                                                    <div class="form-floating">
                                                                        <select class="form-select"
                                                                            id="operation_type_monthly_view"
                                                                            name="operation_type_monthly_view" aria-label=""
                                                                            autocomplete="off" required disabled
                                                                            onchange="changeoperationType()">
                                                                            <option value="">Select</option>
                                                                            <option value="1">Daily</option>
                                                                            <option value="2">Weekly</option>
                                                                            <option value="3">Monthly</option>
                                                                        </select>
                                                                        <label for="floatingName">Opertaion
                                                                            Type</span></label>
                                                                        <p id="error_operation_type_monthly_view"
                                                                            style="color:red"></p>
                                                                    </div>
                                                                </div>






                                                                <div class="row">
                                                                    <!-- Calendar Section (left side) -->
                                                                    <div class="col-md-6" style="position: relative;" id="cal_holder_view_monthly">
                                                                        <div class="calendar" id="calendar1"></div>
                                                                        <div class="calendar" id="calendar2"></div>
                                                                        <div class="calendar" id="calendar3"></div>
                                                                        <div class="calendar" id="calendar4"></div>
                                                                        <div class="calendar" id="calendar5"></div>
                                                                        <div class="calendar" id="calendar6"></div>
                                                                    </div>

                                                                    <!-- Table Section (right side) -->
                                                                    <div class="col-md-6" id="table-container">
                                                                        <table class="table" id="timeTable_monthly_view">
                                                                            <thead>
                                                                                <tr>
                                                                                    <th>Week-no</th>
                                                                                    <th>Day</th>
                                                                                    <th>Start-Time</th>
                                                                                    <th>End-Time</th>
                                                                                </tr>
                                                                            </thead>
                                                                            <tbody></tbody>
                                                                        </table>
                                                                    </div>
                                                                </div>





                                                            </form>



                                                        </div>
                                                    </div>

                                                </div>

                                            </div>
                                        </div>
                                    </div>
                                    <div class="tab-pane fade " id="bordered-justified-edit_monthly" role="tabpanel"
                                        aria-labelledby="new-tab_monthly">
                                        <div class="card">
                                            <div class="card-body">

                                                <ul class="nav nav-tabs d-flex" id="myTabjustified" role="tablist"></ul>
                                                <div class="tab-content m-0 p-1" id="myTabjustifiedContent">
                                                    <div class="tab-pane fade show active" id="home-justified"
                                                        role="tabpanel" aria-labelledby="home-tab">
                                                        <div class="card-body">


                                                            <form class="row g-1" id="monthly_data_editIng" method="POST">
                                                                <input type="hidden" value="{{csrf_token()}}" name="_token">

                                                                <div class="hidden_container_monthly" style="display: none;"></div>
                                                                <input type="hidden" value="" name="hidden_particular_name_monthly" id="hidden_particular_name_monthly">
                                                                <input type="hidden" value="" name="hidden_start_date_monthly" id="hidden_start_date_monthly">
                                                                <input type="hidden" value="" name="hidden_to_date_monthly" id="hidden_to_date_monthly">
                                                                <input type="hidden" value="" name="hidden_operation_type_monthly" id="hidden_operation_type_monthly">

                                                                <div class=" col-md-3">
                                                                    <div class="form-floating mb-3">

                                                                        <select class="sd-CustomSelect" id="kitchen_monthly_data_edit" name="kitchen_monthly_data_edit[]"
                                                                            multiple>
                                                                            @foreach ($kitchens as $kitchen)
                                                                            <option value="{{$kitchen->id}}">{{$kitchen->kitchen_name}}</option>
                                                                            @endforeach
                                                                        </select>



                                                                        <label for="kitchen_monthly_data_edit" id="multiselect_label">Kitchens</label>

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


                                                                <div class="col-md-3">
                                                                    <div class="form-floating">

                                                                        <select class="sd-CustomSelect" id="usernamemonthlydataedit1" name="usernamemonthlydataedit1[]"
                                                                            multiple>

                                                                        </select>

                                                                        <label for="usernamemonthlydataedit1" id="multiselect_label">User
                                                                            Names</label>
                                                                    </div>
                                                                </div>


                                                                <div class="col-md-3">
                                                                    <div class="form-floating">
                                                                        <input type="text" class="form-control"
                                                                            id="category_monthly_data_edit" name="category_monthly_data_edit" readonly />
                                                                        <label
                                                                            for="category_monthly_data_edit">Category</label>
                                                                        <p id="error_category_monthly_data_edit" style="color:red"></p>
                                                                    </div>
                                                                </div>


                                                                <div class="col-md-3">
                                                                    <div class="form-floating mb-3">

                                                                        <select class="sd-CustomSelect"
                                                                            id="options_monthly_edit"
                                                                            name="options_monthly_edit[]"
                                                                            data-placeholder="Option to Add"
                                                                            multiple="true">
                                                                            <option value="YES">YES</option>
                                                                            <option value="NO">NO</option>
                                                                            <option value="Camera">CAMERA</option>
                                                                            <option value="Text Box">TEXT</option>

                                                                        </select>


                                                                        <label for="options_monthly_edit" id="multiselect_label">Options</label>
                                                                        <p id="ErrorID_options_monthly_edit" style="color:red"></p>
                                                                    </div>
                                                                </div>

                                                                <div id="operations_holder_monthly_edit">
                                                                    <div class="row operation-row_monthly_data mt-1 mb-2">
                                                                        <div class="col-md-11 mb-2">
                                                                            <div class="form-floating">
                                                                                <input type="text"
                                                                                    class="form-control plc_holder"
                                                                                    name="ingr_monthly_dataedit[]"
                                                                                    placeholder="operation"
                                                                                    autocomplete="off">
                                                                                <label>Checklist Point</label>
                                                                                <!-- <p class="error-text" style="color:red"></p> -->
                                                                            </div>
                                                                        </div>
                                                                        <div class="col-md-1 mt-2 mb-2">
                                                                            <button type="button"
                                                                                class="btn btn-success add-btn">+</button>
                                                                        </div>
                                                                    </div>
                                                                </div>

                                                                <div class="col-md-4">
                                                                    <div class="form-floating">
                                                                        <select class="form-select"
                                                                            id="operation_type_monthly_edit"
                                                                            name="operation_type_monthly_edit" aria-label=""
                                                                            autocomplete="off" required disabled
                                                                            onchange="changeoperationType()">
                                                                            <option value="">Select</option>
                                                                            <option value="1">Daily</option>
                                                                            <option value="2">Weekly</option>
                                                                            <option value="3">Monthly</option>
                                                                        </select>
                                                                        <label for="floatingName">Opertaion
                                                                            Type</span></label>
                                                                        <p id="operation_type_monthly_edit"
                                                                            style="color:red"></p>
                                                                    </div>
                                                                </div>


                                                                <div class="row">
                                                                    <!-- Left Side: Calendar Holder -->
                                                                    <div class="col-md-6" id="cal_holder_edit_monthly" style="position: relative;">
                                                                        <div class="calendar" id="calendar1"></div>
                                                                        <div class="calendar" id="calendar2"></div>
                                                                        <div class="calendar" id="calendar3"></div>
                                                                        <div class="calendar" id="calendar4"></div>
                                                                        <div class="calendar" id="calendar5"></div>
                                                                        <div class="calendar" id="calendar6"></div>
                                                                    </div>

                                                                    <!-- Right Side: Time Table -->
                                                                    <div class="col-md-6 text-start" id="table-container">
                                                                        <table class="table" id="timeTable_monthly_edit">
                                                                            <thead>
                                                                                <tr>
                                                                                    <th>Week-no</th>
                                                                                    <th>Day</th>
                                                                                    <th>Start-Time</th>
                                                                                    <th>End-Time</th>
                                                                                </tr>
                                                                            </thead>
                                                                            <tbody></tbody>
                                                                        </table>
                                                                    </div>
                                                                </div>



                                                                <div class="text-center">
                                                                    <button type="button" onclick="edit_ingr_monthly();"
                                                                        id="submit_add"
                                                                        class="btn submit-btn">Submit</button>
                                                                    <button type="button" onclick="reset_monthly_data();" id=""
                                                                        class="btn  reset-btn">Reset</button>

                                                                </div>
                                                            </form>

                                                        </div>
                                                    </div>

                                                </div>

                                            </div>
                                        </div>
                                    </div>
                                    <div class="tab-pane fade" id="bordered-justified-delete_monthly" role="tabpanel"
                                        aria-labelledby="home-tab_monthly_delete">
                                        <div class="card">
                                            <div class="card-body">

                                                <ul class="nav nav-tabs d-flex" id="myTabjustified" role="tablist"></ul>
                                                <div class="tab-content m-0 p-1" id="myTabjustifiedContent">
                                                    <div class="tab-pane fade show active" id="home-justified"
                                                        role="tabpanel" aria-labelledby="home-tab">
                                                        <div class="card-body">

                                                            <form class="row g-1" id="monthy_delete_data" method="POST">
                                                                <input type="hidden" value="{{csrf_token()}}" name="_token">


                                                                <div class="hidden_container_delete_monthly" style="display: none;"></div>

                                                                <div class="col-md-3">
                                                                    <div class="form-floating mb-3">

                                                                        <select class="sd-CustomSelect" id="kitchen_monthly_data_delete" name="kitchen_monthly_data_delete[]"
                                                                            multiple>
                                                                            @foreach ($kitchens as $kitchen)
                                                                            <option value="{{$kitchen->id}}">{{$kitchen->kitchen_name}}</option>
                                                                            @endforeach
                                                                        </select>




                                                                        <label for="kitchen_monthly_data_delete"
                                                                            id="multiselect_label">Kitchens</label>
                                                                        <p id="kitchen_Error_kitchen_monthly_data_delete"
                                                                            style="color:red"></p>
                                                                    </div>
                                                                </div>


                                                                <div class="col-md-3">
                                                                    <div class="form-floating">

                                                                        <select class="sd-CustomSelect" id="user_name_monthly_datadelete" name="user_name_monthly_datadelete[]"
                                                                            multiple>

                                                                        </select>

                                                                        <label for="user_name_monthly_datadelete" id="multiselect_label">User
                                                                            Names</label>
                                                                    </div>
                                                                </div>




                                                                <div class="col-md-3">
                                                                    <div class="form-floating">
                                                                        <input type="text" class="form-control"
                                                                            id="category_monthly_data_delete" name="category_monthly_data_delete" readonly />
                                                                        <label
                                                                            for="category_monthly_data_delete">Category</label>
                                                                        <p id="error_category_monthly_data_delete" style="color:red"></p>
                                                                    </div>
                                                                </div>





                                                                <div class="col-md-3">
                                                                    <div class="form-floating mb-3">

                                                                        <select class="sd-CustomSelect"
                                                                            id="options_monthly_delete"
                                                                            name="options_monthly_delete[]"
                                                                            data-placeholder="Option to Add"
                                                                            multiple="true" disabled>

                                                                            <option value="YES">YES</option>
                                                                            <option value="NO">NO</option>
                                                                            <option value="Camera">CAMERA</option>
                                                                            <option value="Text Box">TEXT</option>
                                                                        </select>

                                                                        <label
                                                                            for="options_monthly_delete" id="multiselect_label">Options</label>
                                                                        <p id="ErrorID_options_monthly_delete" style="color:red"></p>
                                                                    </div>
                                                                </div>

                                                                <div id="operations_holder_monthly_delete">
                                                                    <div class="row operation-row_monthly_delete_data mt-1 mb-2">
                                                                        <div class="col-md-11 mb-2">
                                                                            <div class="form-floating">
                                                                                <input type="text"
                                                                                    class="form-control plc_holder"
                                                                                    name="ingr_monthly_delete_data[]"
                                                                                    placeholder="operation"
                                                                                    autocomplete="off">
                                                                                <label>Checklist Point</label>

                                                                            </div>
                                                                        </div>

                                                                    </div>
                                                                </div>

                                                                <div class="col-md-4">
                                                                    <div class="form-floating">
                                                                        <select class="form-select"
                                                                            id="operation_type_monthly_delete"
                                                                            name="operation_type_monthly_delete" aria-label=""
                                                                            autocomplete="off" required disabled
                                                                            onchange="changeoperationType()">
                                                                            <option value="">Select</option>
                                                                            <option value="1">Daily</option>
                                                                            <option value="2">Weekly</option>
                                                                            <option value="3">Monthly</option>
                                                                        </select>
                                                                        <label for="floatingName">Opertaion
                                                                            Type</span></label>
                                                                        <p id="error_operation_type_monthly_delete"
                                                                            style="color:red"></p>
                                                                    </div>
                                                                </div>






                                                                <div class="text-center">

                                                                    <button type="button" onclick="delete_ingr_monthly();"
                                                                        id="submit_add"
                                                                        class="btn delete-btn">Delete</button>


                                                                </div>
                                                            </form>




                                                        </div>
                                                    </div>

                                                </div>

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


                                </div><!-- End Bordered Tabs Justified -->
                            </div>
                        </div>
                    </div>
                </div>
            </div>





            <div class="modal fade" id="ExtralargeModalCategory" tabindex="-1">
                <div class="modal-dialog modal-dialog-centered">
                    <div class="col-md-12">
                        <div class="modal-content">

                            <div class="modal-header">
                                <h5 class="modal-title" style="color: #BA434D;">Add Category</h5>
                                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                            </div>
                            <div class="modal-body">

                                <ul class="nav nav-tabs nav-tabs-bordered" id="borderedTab" role="tablist">
                                    <li class="nav-item" role="presentation">
                                        <button class="nav-link active" id="storehome-tab-hired" data-bs-toggle="tab"
                                            data-bs-target="#bordered-storehome11-hired" type="button" role="tab"
                                            aria-controls="storehome" aria-selected="true">View</button>
                                    </li>
                                    <li class="nav-item" role="presentation">
                                        <button class="nav-link" id="storeedit-tab-hired" data-bs-toggle="tab"
                                            data-bs-target="#bordered-storeedit11-hired" type="button" role="tab"
                                            aria-controls="storeedit" aria-selected="false">Edit</button>
                                    </li>
                                    <li class="nav-item" role="presentation">
                                        <button class="nav-link" id="storedelete-tab-hired" data-bs-toggle="tab"
                                            data-bs-target="#bordered-storedelete11-hired" type="button" role="tab"
                                            aria-controls="storedelete" aria-selected="false">Delete</button>
                                    </li>
                                </ul>
                                <div class="tab-content pt-2" id="borderedTabContent">
                                    <div class="tab-pane fade show active" id="bordered-storehome11-hired" role="tabpanel"
                                        aria-labelledby="storehome-tab-hired">


                                        <div class="row">
                                            <form class="row" id="hired_by_name_master_view" method="POST">
                                                <input type="hidden" id="view_id" name="view_id">

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


                                                    <div class="form-floating">

                                                        <input type="text" class="form-control" id="model_view_category"
                                                            name="model_view_category" placeholder="From Date" required=""
                                                            readonly>
                                                        <label for="floatingEmail">Category
                                                        </label>
                                                        <p id="error_hired_name_view"></p>

                                                    </div>
                                                </div>
                                            </form>
                                        </div>
                                    </div>
                                    <div class="tab-pane fade" id="bordered-storeedit11-hired" role="tabpanel"
                                        aria-labelledby="storeedit-tab-hired">

                                        <div class="row">
                                            <form class="row" id="category_name_master_update">

                                                <input type="hidden" name="_token" value="{{ csrf_token() }}">
                                                <input type="hidden" id="id_update" name="id_update">

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


                                                    <div class="form-floating">
                                                        <input type="text" class="form-control" id="model_edit_category"
                                                            name="model_edit_category" autocomplete="off"
                                                            placeholder="From Date" required="">
                                                        <label for="floatingEmail">Category
                                                        </label>
                                                        <p id="error_model_edit_category" style="color:red"></p>
                                                    </div>
                                                </div>

                                                <div class="text-center">
                                                    <button type="submit" class="btn update-btn">Update</button>
                                                    <button type="reset" onclick="reset_category_name_update();"
                                                        class="btn reset-btn">Reset</button>
                                                    <input type="hidden" id="reset_ctg_name" name="reset_ctg_name">
                                                </div>
                                            </form>
                                        </div>
                                    </div>
                                    <div class="tab-pane fade" id="bordered-storedelete11-hired" role="tabpanel"
                                        aria-labelledby="storedelete-tab-hired">
                                        <div class="row">
                                            <form class="row" id="hired_by_name_master_delete" method="POST">

                                                <input type="hidden" name="_token" value="{{ csrf_token() }}">
                                                <input type="hidden" id="id_delete" name="id_delete">

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

                                                    <div class="form-floating">
                                                        <input type="text" class="form-control" id="model_delete_category"
                                                            name="model_delete_category" placeholder="From Date" required=""
                                                            readonly>
                                                        <label for="floatingEmail">Category
                                                        </label>
                                                        <p id="error_hired_name_delete"></p>

                                                    </div>
                                                </div>

                                                <div class="text-center">
                                                    <button type="button" onclick="category_delete();" id="submit_delete"
                                                        class="btn delete-btn">Delete</button>
                                                </div>
                                            </form>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>



            <div class="modal fade" id="verticalycentered" tabindex="-1">
                <div class="modal-dialog modal-dialog-centered modal-lg">

                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title" style="color:#BA434D">Add New Category</h5>
                            <button type="button" class="btn-close" data-bs-dismiss="modal" id="add_cat"
                                aria-label="Close"></button>
                        </div>
                        <div class="modal-body">

                            <!-- Floating Labels Form -->
                            <form class="row g-3" id="category_add" method="POST">

                                <input type="hidden" name="_token" value="{{csrf_token()}}">

                                <div class="col-md-12">
                                    <div class="form-floating">
                                        <input type="text" class="form-control" id="category_name" name="category_name"
                                            placeholder="Your Name" autocomplete="off">
                                        <label for="revision">Category Name</label>
                                        <p id="error_category_name" style="color:red"></p>
                                    </div>
                                </div>
                                <div class="text-center">
                                    <button type="submit" class="btn submit-btn" id="submit">Submit</button>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        </div>
        </div>
    </main>

    @include('layouts.footer');


    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <link rel="stylesheet" href="\assets\js\multi-select-css.css">
    <script src="\assets\js\multi-select.js"></script>
    <link rel="stylesheet" href="//cdn.datatables.net/1.12.1/css/jquery.dataTables.min.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.5/jquery.validate.min.js"
        integrity="sha512-rstIgDs0xPgmG6RX1Aba4KV5cWJbAMcvRCVmglpam9SoHZiUCyQVDdH2LPlxoHtrv17XWblE/V/PP+Tr04hbtA=="
        crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.5/additional-methods.min.js"
        integrity="sha512-6S5LYNn3ZJCIm0f9L6BCerqFlQ4f5MwNKq+EthDXabtaJvg3TuFLhpno9pcm+5Ynm6jdA9xfpQoMz2fcjVMk9g=="
        crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <script src="//cdn.datatables.net/1.12.1/js/jquery.dataTables.min.js"></script>


    <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 src="https://code.jquery.com/ui/1.13.2/jquery-ui.min.js"></script> -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
    <script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>


    <!-- JS -->
    <link rel="stylesheet" href="\assets\css\clock.css">
    <script src="\assets\js\clock.js"></script>
    <script>
        var data = {};
        var arr = {};
        data['_token'] = "{{csrf_token()}}";
        arr['_token'] = "{{csrf_token()}}";

        $('.category_table').hide();
        $("#table-container").hide()
        $("#d-start").hide()
        $("#d-end").hide()

        // const editstartTimePicker = flatpickr("#edit_start_time", {
        //     enableTime: true,
        //     noCalendar: true,
        //     dateFormat: "H:i"
        // });

        // const editendTimePicker = flatpickr("#edit_end_time", {
        //     enableTime: true,
        //     noCalendar: true,
        //     dateFormat: "H:i"
        // });

        // const editstartTimePicker = flatpickr("#edit_start_time", {
        //     enableTime: true,
        //     noCalendar: true,
        //     dateFormat: "H:i",
        //     time_24hr: true,
        //     onChange: function(selectedDates, dateStr, instance) {
        //         const startTime = selectedDates[0];
        //         const endTime = editendTimePicker.selectedDates[0];

        //         if (startTime && endTime && startTime >= endTime) {
        //             // Subtract 10 minutes from end time to set as start time
        //             const newStartTime = new Date(endTime.getTime() - 10 * 60 * 1000);
        //             instance.setDate(newStartTime, true);
        //             alert("Please select a start time earlier than the end time.");
        //         }
        //     }
        // });

        // const editendTimePicker = flatpickr("#edit_end_time", {
        //     enableTime: true,
        //     noCalendar: true,
        //     dateFormat: "H:i",
        //     time_24hr: true,
        //     onChange: function(selectedDates, dateStr, instance) {
        //         const endTime = selectedDates[0];
        //         const startTime = editstartTimePicker.selectedDates[0];

        //         if (startTime && endTime && endTime <= startTime) {
        //             // Add 10 minutes to start time to set as end time
        //             const newEndTime = new Date(startTime.getTime() + 10 * 60 * 1000);
        //             instance.setDate(newEndTime, true);
        //             alert("Please select an end time after the start time.");
        //         }
        //     }
        // });


        // pikcer logic
        const days = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
        let currentDayElement = null;
        const dayTimes = {};

        function generateCalendar(containerId, weekIndex) {
            const container = $('#' + containerId);
            container.empty();
            for (let i = 0; i < 7; i++) {
                const day = $('<div class="day"></div>').text(days[i]);
                day.attr('data-day-index', i + (weekIndex * 7));
                container.append(day);
            }
        }

        // Generate 5 weeks (35 days)

        function changeoperationType() {
            console.log('changeoperationType triggered');
            for (let i = 1; i < 7; i++) {
                $(`#calendar${i}`).html('');
            }
            $("#d-start").hide()
            $("#d-end").hide()
            $("#timeTable tbody").html("");
            let operation = $("#operation_type").val()
            let operationWeeklyValue = $('#operation_type_weekly_view').val();
            if (operationWeeklyValue > 0 && operation == 0) {
                operation = operationWeeklyValue;
            }

            let weekcount = 0;
            $("#table-container").hide()
            $("#cal_holder").hide()

            $("#calendar1").hide()
            $("#calendar2").hide()
            $("#calendar3").hide()
            $("#calendar4").hide()
            $("#calendar5").hide()
            $("#calendar6").hide()

            $(".hide_calendar").hide();


            if (operation == 2) {
                console.log("trigger ", operation)
                weekcount = 1
                $("#calendar1").show()
                $("#table-container").show()
                console.log("Showing cal_holder_view_weekly");
                $("#cal_holder_view_weekly").show();
                console.log($("#cal_holder_view_weekly").css("display"));
                $("#cal_holder").show()
                $(".hide_calendar").show();

                $('#timePopup').hide();
                $('#startTime').val('');
                $('#endTime').val('');
            } else if (operation == 3) {
                weekcount = 6
                $("#table-container").show()
                $("#cal_holder").show()
                $("#calendar1").show()
                $("#calendar2").show()
                $("#calendar3").show()
                $("#calendar4").show()
                $("#calendar5").show()
                $("#calendar6").show()
                $(".hide_calendar").show();

                $('#timePopup').hide();
                $('#startTime').val('');
                $('#endTime').val('');
            } else if (operation == 1) {
                $("#d-start").show()
                $("#d-end").show()
                $(".hide_calendar").hide();

                $('#timePopup').hide();
            }
            for (let week = 0; week < weekcount; week++) {
                generateCalendar('calendar' + (week + 1), week);
            }
        }

        function change_category_res() {
            load_submit_ingr();
            load_submit_ingr2();
            load_submit_ingr3();
        }

        // Initialize Flatpickr
        // flatpickr("#startTime", {
        //     enableTime: true,
        //     noCalendar: true,
        //     dateFormat: "H:i:ss"
        // });
        // flatpickr("#endTime", {
        //     enableTime: true,
        //     noCalendar: true,
        //     dateFormat: "H:i:ss"
        // });
        // const startTimePicker = flatpickr("#startTime", {
        //     enableTime: true,
        //     noCalendar: true,
        //     dateFormat: "H:i:ss",
        //     time_24hr: true,
        //     onChange: function(selectedDates, dateStr, instance) {
        //         const startTime = selectedDates[0];
        //         const endTime = endTimePicker.selectedDates[0];

        //         if (startTime && endTime && startTime >= endTime) {
        //             const newStartTime = new Date(endTime.getTime() - 10 * 60 * 1000);
        //             instance.setDate(newStartTime, true);
        //             alert("Start time must earlier than end time.");
        //         }
        //     }
        // });

        // const endTimePicker = flatpickr("#endTime", {
        //     enableTime: true,
        //     noCalendar: true,
        //     dateFormat: "H:i:ss",
        //     time_24hr: true,
        //     onChange: function(selectedDates, dateStr, instance) {
        //         const endTime = selectedDates[0];
        //         const startTime = startTimePicker.selectedDates[0];

        //         if (startTime && endTime && endTime <= startTime) {
        //             const newEndTime = new Date(startTime.getTime() + 10 * 60 * 1000);
        //             instance.setDate(newEndTime, true);
        //             alert("End time must be later than start time.");
        //         }
        //     }
        // });


        $(document).on('click', '.day', function() {
            const dayIndex = $(this).data('day-index');
            currentDayElement = $(this);

            const offset = $(this).offset();
            $('#timePopup').show();

        });



        function convertTo24Hour(timeStr) {
            const [time, modifier] = timeStr.split(' ');
            let [hours, minutes] = time.split(':');

            if (modifier.toLowerCase() === 'pm' && hours !== '12') {
                hours = parseInt(hours) + 12;
            } else if (modifier.toLowerCase() === 'am' && hours === '12') {
                hours = '00';
            }

            return `${hours}:${minutes}`;
        }


        $('#saveTime').on('click', function() {
            if (!currentDayElement) return;

            let start = $('#startTime').val(); // use let
            let end = $('#endTime').val(); // use let

            if (!start || !end) {
                alert('Both start and end times are required to proceed.');
                return;
            }

            // Convert 12-hour time to 24-hour format
            start = convertTo24Hour(start);
            end = convertTo24Hour(end);

            const startDate = new Date(`1970-01-01T${start}`);
            const endDate = new Date(`1970-01-01T${end}`);

            // if (startDate >= endDate) {
            //     alert('Please select an end time after the start time.');
            //     $('#endTime').val('');
            //     return;
            // }

            const dayIndex = currentDayElement.data('day-index');
            const week = Math.floor(dayIndex / 7) + 1;
            const weekday = days[dayIndex % 7];

            if (!dayTimes[dayIndex]) {
                dayTimes[dayIndex] = [];
            }

            dayTimes[dayIndex].push({
                start,
                end
            });

            currentDayElement.addClass('selected');
            const uniqueId = `row-${dayIndex}-${Date.now()}`;

            $('#timeTable tbody').append(`
        <tr id="${uniqueId}">
            <td><input class="form-control" style="width:50px" type="text" name="weeknum[]" value="${week}" readonly /></td>
            <td><input class="form-control" style="width:80px" type="text" name="weekday[]" value="${weekday}" readonly /></td>
            <td><input class="form-control" style="width:100px" type="text" name="start_time[]" value="${start}" readonly /></td>
            <td><input class="form-control" style="width:100px" type="text" name="end_time[]" value="${end}" readonly /></td>
            <td><button class="btn btn-success" onclick="$(this).closest('tr').remove()">X</button></td>
        </tr>
    `);

            $('#startTime').val('');
            $('#endTime').val('');
            $('#timePopup').hide();
        });



        $(document).on('mousedown', function(e) {
            if (
                $(e.target).closest('#timePopup').length === 0 &&
                $(e.target).closest('.flatpickr-calendar').length === 0 &&
                $(e.target).closest('.day').length === 0
            ) {
                // $('#timePopup').hide();
            }
        });

        // picker logic end
        $(document).ready(function(e) {

            $(".sd-CustomSelect").multipleSelect({
                selectAll: true,
                filter: true,
                minimumCountSelected: 1,
                onOptgroupClick: function(view) {
                    $(view).parents("label").addClass("selected-optgroup");
                }
            });
            $("#kitchen").multipleSelect('checkAll');
            $("#add_options").multipleSelect('checkAll');
            $("#user_id").multipleSelect('checkAll');
            $("#user_name_daily_edit").multipleSelect('checkAll');

            $("#user_name_daily_edit").multipleSelect('checkAll');
            $(".sd-CustomSelect").css({
                display: "block",
                visibility: "visible"
            });


            $('#ExtralargeModalDaily').on('shown.bs.modal', function() {
                $('#kitchen_daily').multipleSelect({
                    dropdownParent: $('#ExtralargeModalDaily')
                });
            });

            $('#ExtralargeModalWeekly').on('shown.bs.modal', function() {
                $('#kitchen_daily').multipleSelect({
                    dropdownParent: $('#ExtralargeModalWeekly')
                });
            });

            $('#ExtralargeModalMonthly').on('shown.bs.modal', function() {
                $('#kitchen_daily').multipleSelect({
                    dropdownParent: $('#ExtralargeModalMonthly')
                });
            });

            $('.timepicker').mdtimepicker();
            $('.timepicker1').mdtimepicker();
            $('.timepickerWeekStart').mdtimepicker();
            $('.timepickerWeekEnd').mdtimepicker();

            $('#d_start_time_daily_edit').mdtimepicker();
            $('#d_to_time_daily_edit').mdtimepicker();


            $(document).on("click", function(e) {
                if (!$(e.target).closest(".ms-parent").length) {
                    $(".sd-CustomSelect").each(function() {
                        const $select = $(this);
                        const data = $select.data("multipleSelect");
                        if (data) {
                            $select.multipleSelect("close");
                        }
                    });
                }
            });


            $("#pageloader").fadeOut();
            $(".chosen-select").chosen();

            $("#cal_holder").hide()

            // const dStartTimePicker = flatpickr("#d_start_time", {
            //     enableTime: false,
            //     noCalendar: true,
            //     dateFormat: "H:i",
            //     time_24hr: false,
            //     onChange: function(selectedDates, dateStr, instance) {
            //         const startTime = selectedDates[0];
            //         const endTime = dEndTimePicker.selectedDates[0];

            //         if (startTime && endTime && startTime >= endTime) {
            //             const newStartTime = new Date(endTime.getTime() - 10 * 60 * 1000);
            //             instance.setDate(newStartTime, true);
            //             alert("Start time must be earlier than end time.");
            //         }
            //     }
            // });

            // const dEndTimePicker = flatpickr("#d_end_time", {
            //     enableTime: false,
            //     noCalendar: true,
            //     dateFormat: "H:i",
            //     time_24hr: false,
            //     onChange: function(selectedDates, dateStr, instance) {
            //         const endTime = selectedDates[0];
            //         const startTime = dStartTimePicker.selectedDates[0];

            //         if (startTime && endTime && endTime <= startTime) {
            //             const newEndTime = new Date(startTime.getTime() + 10 * 60 * 1000);
            //             instance.setDate(newEndTime, true);
            //             alert("End time must be later than start time.");
            //         }
            //     }
            // });


            function scrollToEnd() {
                const container = document.getElementById('operations_holder');
                if (container) {
                    container.scrollTop = container.scrollHeight;
                }



            }


            function scrollToEndDailyData() {
                const container = document.getElementById('operations_holder_daily_edit');
                if (container) {
                    container.scrollTop = container.scrollHeight;
                }



            }

            // $('#ingrAdd').validate({
            //     rules: {
            //         kitchen: "required",
            //         category: "required",
            //         add_options: "required",
            //         operation_type: "required",
            //         user_id: "required",
            //         datepicker: "required",
            //         start_time: "required",
            //         end_time: "required",
            //         ingr_name: "required",
            //         d_start_time: {
            //             required: function() {
            //                 return $('#operation_type').val() == '1';
            //             }
            //         },
            //         d_end_time: {
            //             required: function() {
            //                 return $('#operation_type').val() == '1';
            //             }
            //         },

            //     },
            //     messages: {

            //         kitchen: "This field is required.",
            //         category: "This field is required.",
            //         add_options: "This field is required.",
            //         operation_type: "This field is required.",
            //         user_id: "This field is required.",
            //         datepicker: "This field is required.",
            //         start_time: "This field is required.",
            //         end_time: "This field is required.",
            //         ingr_name: "This field is required.",

            //     },
            //     errorPlacement: function(error, element) {
            //         if (element.attr("id") == "kitchen") {
            //             error.appendTo('#kitchen_Error_01');
            //         } else if (element.attr("name") == "category") {
            //             error.appendTo('#categories_error_data');
            //         } else if (element.attr("name") == "add_options") {
            //             error.appendTo('#ErrorID_2');
            //         } else if (element.attr("name") == "operation_type") {
            //             error.appendTo('#operations_type_error');
            //         } else if (element.attr("name") == "user_id") {
            //             error.appendTo('#select_user_error');
            //         } else if (element.attr("name") == "datepicker") {
            //             error.appendTo('#datepicker_error');
            //         } else if (element.attr("name") == "d_start_time") {
            //             error.appendTo('#start_time_error');
            //         } else if (element.attr("name") == "d_end_time") {
            //             error.appendTo('#end_time_error');
            //         }
            //         // else if (element.attr("name") == "ingr_name") {
            //         //     error.appendTo('#ErrorID_1');
            //         // } 
            //         else {
            //             error.insertAfter(element);
            //         }
            //     },

            // });

            function convertinsertTo24Hour(timeStr) {
                let [time, modifier] = timeStr.split(" "); // Split into time and AM/PM part
                let [hours, minutes] = time.split(":");

                if (!modifier) {
                    return `${String(hours).padStart(2, "0")}:${minutes}`;
                }

                hours = parseInt(hours, 10);

                if (modifier.toUpperCase() === "PM" && hours < 12) hours += 12;
                if (modifier.toUpperCase() === "AM" && hours === 12) hours = 0;

                return `${String(hours).padStart(2, "0")}:${minutes}`;
            }


            $.validator.addMethod("greaterThanStart", function(value, element) {
                var startTime = $('#d_start_time').val();

                if (!startTime || !value) return true;


                startTime = convertinsertTo24Hour(startTime);
                value = convertinsertTo24Hour(value);



                // Parse the times into Date objects (on the same arbitrary date: 1970-01-01)
                var start = new Date('1970-01-01T' + startTime);
                var end = new Date('1970-01-01T' + value);

                // console.log('Parsed Start:', start);
                // console.log('Parsed End:', end);


                if (isNaN(start.getTime()) || isNaN(end.getTime())) {
                    console.warn("Invalid date parsing:", start, end);
                    return false; // Force validation error if parsing fails
                }

                if (end <= start) {
                    end.setDate(end.getDate() + 1);
                }


                // Check if end time is greater than start time
                return start < end;
            }, "End Time must be greater than Start Time.");



            // jQuery validate setup
            $('#ingrAdd').validate({
                rules: {
                    kitchen: "required",
                    category: "required",
                    add_options: "required",
                    operation_type: "required",
                    user_id: "required",
                    datepicker: "required",
                    start_time: "required",
                    end_time: "required",
                    ingr_name: "required",

                    d_start_time: {
                        required: function() {
                            return $('#operation_type').val() == '1';
                        }
                    },
                    d_end_time: {
                        required: function() {
                            return $('#operation_type').val() == '1';
                        },
                        greaterThanStart: true
                    }
                },

                messages: {
                    kitchen: "This field is required.",
                    category: "This field is required.",
                    add_options: "This field is required.",
                    operation_type: "This field is required.",
                    user_id: "This field is required.",
                    datepicker: "This field is required.",
                    start_time: "This field is required.",
                    end_time: "This field is required.",
                    ingr_name: "This field is required.",
                    d_start_time: "Start Time is required.",
                    d_end_time: {
                        required: "End Time is required.",
                        greaterThanStart: "End Time must be greater than Start Time."
                    }
                },

                errorPlacement: function(error, element) {
                    if (element.attr("id") == "kitchen") {
                        error.appendTo('#kitchen_Error_01');
                    } else if (element.attr("name") == "category") {
                        error.appendTo('#categories_error_data');
                    } else if (element.attr("name") == "add_options") {
                        error.appendTo('#ErrorID_2');
                    } else if (element.attr("name") == "operation_type") {
                        error.appendTo('#operations_type_error');
                    } else if (element.attr("name") == "user_id") {
                        error.appendTo('#select_user_error');
                    } else if (element.attr("name") == "datepicker") {
                        error.appendTo('#datepicker_error');
                    } else if (element.attr("name") == "d_start_time") {
                        error.appendTo('#start_time_error');
                    } else if (element.attr("name") == "d_end_time") {
                        error.appendTo('#end_time_error');
                    } else {
                        error.insertAfter(element); // fallback
                    }
                }
            });



            // Custom method to check if End Time is greater than Start Time
            $.validator.addMethod("greaterThanStartDaily", function(value, element) {
                var startTime = $('#d_to_time_daily_edit').val();

                if (!startTime || !value) return true;

                // Convert to 24-hour format
                startTime = convertTo24Hour(startTime);
                value = convertTo24Hour(value);

                var start = new Date('1970-01-01T' + startTime);
                var end = new Date('1970-01-01T' + value);

                if (isNaN(start.getTime()) || isNaN(end.getTime())) {
                    console.warn("Invalid date parsing:", start, end);
                    return false; // Force validation error if parsing fails
                }



                return start < end;
            }, "End Time must be greater than Start Time.");


            $('#daily_data_editIng').validate({
                rules: {
                    // kitchen_daily_data_edit: "required",
                    category: "required",
                    add_options: "required",
                    operation_type: "required",
                    user_id: "required",
                    datepicker: "required",
                    start_time: "required",
                    end_time: "required",
                    ingr_daily_dataedit: "required",

                    d_start_time_daily_edit: {
                        required: function() {
                            return $('#operation_type').val() == '1';
                        }
                    },
                    d_to_time_daily_edit: {
                        required: function() {
                            return $('#operation_type').val() == '1';
                        },
                        // greaterThanStartDaily: true
                    }
                },

                messages: {
                    // kitchen_daily_data_edit: "This field is required.",
                    category: "This field is required.",
                    options_daily_edit: "This field is required.",
                    operation_type: "This field is required.",
                    user_id: "This field is required.",
                    datepicker: "This field is required.",
                    start_time: "This field is required.",
                    end_time: "This field is required.",
                    ingr_daily_dataedit: "This field is required.",
                    d_start_time_daily_edit: "Start Time is required.",
                    d_to_time_daily_edit: {
                        required: "End Time is required.",
                        // greaterThanStartDaily: "End Time must be greater than Start Time."
                    }
                },

                errorPlacement: function(error, element) {
                    if (element.attr("name") == "category") {
                        error.appendTo('#categories_error_data');
                    } else if (element.attr("name") == "options_daily_edit") {
                        error.appendTo('#ErrorID_options_daily_edit');
                    } else if (element.attr("name") == "d_start_time_daily_edit") {
                        error.appendTo('#start_time_errord_start_time_daily_edit');
                    } else if (element.attr("name") == "d_to_time_daily_edit") {
                        error.appendTo('#end_time_error_d_to_time_daily_edit');
                    } else if (element.attr("name") == "ingr_daily_dataedit") {
                        error.appendTo('#ingr_daily_dataedit_error');
                    } else {
                        error.insertAfter(element); // fallback
                    }
                }
            });

              $('#ingrAddDailyWeekly_edit').validate({
                rules: {
                    // kitchen_daily_data_edit: "required",
                    ingr_weekly_dataedit: "required",
                    start_time: "required",
                    end_time: "required",
                },

                messages: {
                    // kitchen_daily_data_edit: "This field is required.",
                    ingr_weekly_dataedit: "This field is required.",
                    start_time: "This field is required.",
                    end_time: "This field is required.",
                },

                errorPlacement: function(error, element) {
                    if (element.attr("name") == "ingr_weekly_dataedit") {
                        error.appendTo('#ErrorID_2_weekly_edit');
                    } else if (element.attr("name") == "end-time") {
                        error.appendTo('#end_time_error_weekly');
                    } else if (element.attr("name") == "start_time") {
                        error.appendTo('#start_time_error_weekly');
                    }  else {
                        error.insertAfter(element); // fallback
                    }
                }
            });

             $('#monthly_data_editIng').validate({
                rules: {
                    // kitchen_daily_data_edit: "required",
                    ingr_monthly_dataedit: "required",
                    start_timemonthly: "required",
                    totime_timemonthly: "required",
                },

                messages: {
                    // kitchen_daily_data_edit: "This field is required.",
                    ingr_monthly_dataedit: "This field is required.",
                    start_timemonthly: "This field is required.",
                    totime_timemonthly: "This field is required.",
                },

                errorPlacement: function(error, element) {
                    if (element.attr("name") == "ingr_monthly_dataedit") {
                        error.appendTo('#ErrorID_2_monthly_edit');
                    } else if (element.attr("name") == "start_timemonthly") {
                        error.appendTo('#start_time_error_monthly');
                    } else if (element.attr("name") == "totime_timemonthly") {
                        error.appendTo('#end_time_error_monthly');
                    }  else {
                        error.insertAfter(element); // fallback
                    }
                }
            });



            $('#category_add').validate({
                rules: {
                    category_name: "required",
                },
                messages: {
                    category_name: "This field is required.",

                },
                errorPlacement: function(error, element) {
                    if (element.attr("name") == "category_name") {
                        error.appendTo('#error_category_name');
                    } else {
                        error.insertAfter(element);
                    }
                },

            });
            $('#category_name_master_update').validate({
                rules: {
                    model_edit_category: "required",
                },
                messages: {
                    model_edit_category: "This field is required.",

                },
                errorPlacement: function(error, element) {
                    if (element.attr("name") == "model_edit_category") {
                        error.appendTo('#error_model_edit_category');
                    } else {
                        error.insertAfter(element);
                    }
                },

            });


            $('#ingrEdit').validate({
                rules: {
                    ingr_name_edit: "required",
                    edit_add_options: "required",
                    update_reason: "required",
                    edit_category: "required",
                    edit_kitchen: "required",
                    edit_end_time: "required",
                    edit_start_time: "required",
                    // edit_date_date: "required"
                },
                messages: {
                    ingr_name_edit: "This field is required.",
                    edit_add_options: "This field is required.",
                    update_reason: "This field is required.",
                    edit_category: "This field is required.",
                    edit_kitchen: "This field is required.",

                },
                errorPlacement: function(error, element) {
                    if (element.attr("name") == "ingr_name_edit") {
                        error.appendTo('#ErrorID_11');
                    } else if (element.attr("id") == "edit_add_options") {
                        error.appendTo('#ErrorID_22');
                    } else if (element.attr("name") == "update_reason") {
                        error.appendTo('#ErrorID_33');
                    } else if (element.attr("name") == "edit_category") {
                        error.appendTo('#ErrorID_34');
                    } else if (element.attr("name") == "edit_kitchen") {
                        error.appendTo('#Error_id_kitchen_name');
                    } else if (element.attr("name") == "edit_date_date") {
                        error.appendTo('#edit_date_error');
                    } else if (element.attr("name") == "edit_start_time") {
                        error.appendTo('#edit_start_time_error');
                    } else if (element.attr("name") == "edit_end_time") {
                        error.appendTo('#edit_end_time_error');
                    } else {
                        error.insertAfter(element);
                    }
                },

            });


            $('#ingrDelete').validate({

                rules: {
                    delete_reason: "required",
                },
                messages: {
                    delete_reason: "This field is required.",
                },
                errorPlacement: function(error, element) {
                    if (element.attr("name") == "delete_reason") {
                        error.appendTo('#ErrorID_44');
                    } else {
                        error.insertAfter(element);
                    }
                },

            });

            get_category_drop_down();
            load_category();
            load_submit_ingr();
            load_submit_ingr2();
            load_submit_ingr3();

            function updateButtons() {
                const rows = $('#operations_holder .operation-row');
                rows.each(function(index) {
                    const btnCol = $(this).find('.col-md-1');
                    btnCol.empty(); // Clear existing buttons

                    if (index === rows.length - 1) {
                        // Last row gets the add button
                        btnCol.append('<button type="button" class="btn btn-success add-btn">+</button>');
                    } else {
                        // Previous rows get the remove button
                        btnCol.append('<button type="button" class="btn btn-success remove-btn">-</button>');
                    }
                });
            }

            $('#operations_holder').on('click', '.add-btn', function() {
                const newRow = $(this).closest('.operation-row').clone();
                newRow.find('input').val(''); // Clear input
                newRow.find('.error-text').text(''); // Clear error text
                $('#operations_holder').append(newRow);
                updateButtons();
                scrollToEnd();
            });
            $('#operations_holder').on('click', '.remove-btn', function() {
                $(this).closest('.operation-row').remove();
                updateButtons();
            });
            // Initialize the buttons correctly on page load
            updateButtons();

            updateButtonsDailyData();


            function updateButtonsDailyData() {
                const rows = $('#operations_holder_daily_edit .operation-row_daily_data');
                rows.each(function(index) {
                    const btnCol = $(this).find('.col-md-1');
                    btnCol.empty(); // Clear existing buttons

                    if (index === rows.length - 1) {
                        // Last row gets the add button
                        btnCol.append('<button type="button" class="btn btn-success add-btn">+</button>');
                    } else {
                        // Previous rows get the remove button
                        btnCol.append('<button type="button" class="btn btn-success remove-btn">-</button>');
                    }
                });

            }


            $('#operations_holder_daily_edit').on('click', '.add-btn', function() {
                const newRow = $(this).closest('.operation-row_daily_data').clone();
                newRow.find('input').val(''); // Clear input
                newRow.find('.error-text').text(''); // Clear error text
                $('#operations_holder_daily_edit').append(newRow);
                updateButtonsDailyData();
                scrollToEndDailyData();
            });
            $('#operations_holder_daily_edit').on('click', '.remove-btn', function() {
                $(this).closest('.operation-row_daily_data').remove();
                updateButtonsDailyData();
            });

        });


        $('#category_add').submit(function(e) {
            e.preventDefault();
            if ($('#category_add').valid()) {
                var data = $('#category_add').serialize();
                $.ajax({
                    url: "insert_category_data",
                    type: "POST",
                    data: data,
                    success: function(data) {
                        var obj = data;
                        if (obj == '"inserted"') {
                            alert('Nice! Your data was added successfully.');
                            $('#category_name').val('');
                            $(".btn-close").click();
                            get_category_drop_down();
                            load_category();
                        } else {
                            alert('You have already added this try something new.');
                            $('#category_name').val('');
                        }
                    }
                });
            }
        })


        function add_ingr() {
            if ($("#ingrAdd").valid()) {
                const form = document.querySelector('#ingrAdd');
                let formData = new FormData(form);
                let kitchens = $("#kitchen").val()
                let add_options = $("#add_options").val();
                let user_id = $("#user_id").val();
                if (kitchens.length == 0) {
                    alert("Tap to Choose Your Kitchen.")
                    return;
                }
                if (add_options.length == 0) {
                    alert("Tap to Choose Your Options.")
                    return;
                }
                if (user_id.length == 0) {
                    alert("Tap to Choose Your Kitchen Users.")
                    return;
                }
                const allEmpty = [...document.querySelectorAll('.plc_holder')]
                    .every(input => input.value.trim() === '');

                if (allEmpty) {
                    alert("Tap to Choose Your Operation type.");
                    return;
                }

                let operation_type = $("#operation_type").val();
                if (operation_type == 2 || operation_type == 3) {
                    if ($('#timeTable tbody tr').length == 0) {
                        alert("Please Pick a Weekday and Time.")
                        return;
                    }
                }
                formData.append('_token', '{{ csrf_token() }}');
                $("#pageloader").fadeIn();
                $.ajax({
                    url: "save_operation_entry_v2",
                    type: "POST",
                    data: formData,
                    processData: false,
                    contentType: false,
                    success: function(result) {
                        if (result == 1) {
                            $("#ingrAdd")[0].reset();
                            $(".chosen-select").val('').trigger("chosen:updated");
                            load_submit_ingr();
                            load_submit_ingr2();
                            load_submit_ingr3();
                            $(".nav-link.active").click();
                            $("#pageloader").fadeOut();
                            reset_main_data();
                            alert("Great! Your checklist points have been added successfully.");
                        } else {
                            $("#pageloader").fadeOut();
                            alert("Oops! Something went wrong while saving the data.");
                        }
                    },
                    error: function() {}

                });
            }
        }


        function convertToEdit24Hour(timeStr) {
            const [time, modifier] = timeStr.trim().split(' '); // "10:28", "AM"
            let [hours, minutes] = time.split(':').map(Number);

            if (modifier.toUpperCase() === 'PM' && hours < 12) {
                hours += 12;
            }
            if (modifier.toUpperCase() === 'AM' && hours === 12) {
                hours = 0;
            }

            return `${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}:00`;
        }

        function edit_ingr() {
            if ($("#daily_data_editIng").valid()) {


                const form = document.querySelector('#daily_data_editIng');
                let formData = new FormData(form);

                let user_id = $("#user_name_daily__dataedit").val();
                var operation_type_daily_edit = $('#operation_type_daily_edit').val();
                if (user_id.length == 0) {
                    alert("Tap to Choose Your Kitchen Users.")
                    return;
                }

                let options = $("#options_daily_edit").val();
                if (options.length == 0) {
                    alert("Tap to Choose Your Options.")
                    return;
                }


                let d_start_time_daily_edit = $("#d_start_time_daily_edit").val(); // e.g. "9:25 AM"
                let d_to_time_daily_edit = $('#d_to_time_daily_edit').val(); // e.g. "10:28 AM"

                const start = convertToEdit24Hour(d_start_time_daily_edit); // "09:25:00"
                const end = convertToEdit24Hour(d_to_time_daily_edit); // "10:28:00"

                const startDate = new Date(`1970-01-01T${start}`);
                const endDate = new Date(`1970-01-01T${end}`);

                // if (startDate >= endDate) {
                //     alert('End time must be later than start time.');
                //     $('#d_to_time_daily_edit').val('');
                //     return;
                // }

                formData.append('operation_type_daily_edit', operation_type_daily_edit);

                formData.append('_token', '{{ csrf_token() }}');

                $.ajax({
                    url: "update_operation_entry_v2",
                    type: "POST",
                    data: formData,
                    processData: false,
                    contentType: false,
                    success: function(result) {
                        if (result) {
                            alert("Changes saved  you are good to go!");
                            $(".btn-close").click();
                            $(".nav-link.active").click();
                        } else {
                            alert("Hey! You have already added this. Try something else.");
                        }
                    },
                });
            }
        }


        function convertWeeklyTo24Hour(timeStr) {
            // Example logic for converting 12-hour time to 24-hour format
            let [time, modifier] = timeStr.split(" ");
            let [hours, minutes] = time.split(":");

            hours = parseInt(hours, 10);
            if (modifier === "PM" && hours < 12) hours += 12;
            if (modifier === "AM" && hours === 12) hours = 0;

            return `${String(hours).padStart(2, "0")}:${minutes}`;
        }


        function edit_ingr_edit_data_weekly() {
            if ($("#ingrAddDailyWeekly_edit").valid()) {



                let invalidFound = false;

                $('#timeTable_weekly tbody tr').each(function() {
                    const startInput = $(this).find('input[name="start_time[]"]');
                    const endInput = $(this).find('input[name="end_time[]"]');

                    const startTimeStr = startInput.val();
                    const endTimeStr = endInput.val();

                    const start24 = convertWeeklyTo24Hour(startTimeStr);
                    const end24 = convertWeeklyTo24Hour(endTimeStr);

                    if (!start24 || !end24) {
                        alert("Please enter time in a valid format.");
                        invalidFound = true; // Set invalid flag and exit the loop early
                        return false; // Stop looping through rows
                    }

                    const start = new Date('1970-01-01T' + start24);
                    const end = new Date('1970-01-01T' + end24);
                    console.log(start);
                    console.log(end);

                    // Check if the start time is greater than or equal to end time
                    // if (start >= end) {
                    //     // Clear end time if invalid
                    //     endInput.val('');

                    //     if (!invalidFound) {
                    //         alert("End time should be later than the start time.");
                    //         invalidFound = true; // Set flag to true to prevent multiple alerts
                    //         return false; // Stop the loop to prevent further checks
                    //     }
                    // }
                });

                // If any invalid time was found, stop submission
                if (invalidFound) {
                    return;
                }

                // Continue with form submission if all times are valid
                const form = document.querySelector('#ingrAddDailyWeekly_edit');
                let formData = new FormData(form);

                let user_id = $("#user_id_weekly_edit").val();
                var operation_type_daily_edit = $('#operation_type_weekly_edit').val();
                if (user_id.length == 0) {
                    alert("Tap to Choose Your Kitchen Users.");
                    return;
                }

                var options = $('#add_options_data_edit_weekly').val();
                if (options.length == 0) {
                    alert("Tap to Choose Your Options.");
                    return;
                }

                formData.append('operation_type_daily_edit', operation_type_daily_edit);
                formData.append('_token', '{{ csrf_token() }}');

                $.ajax({
                    url: "update_operation_entry_v2",
                    type: "POST",
                    data: formData,
                    processData: false,
                    contentType: false,
                    success: function(result) {
                        if (result) {
                            alert("Changes saved - you are good to go!");
                            $(".btn-close").click();
                            $(".nav-link.active").click();
                        } else {
                            alert("Hey! You have already added this. Try something else.");
                        }
                    },
                });
            }
        }

        function convertMonthlyTo24Hour(timeStr) {
            if (!timeStr || typeof timeStr !== 'string') return null;

            timeStr = timeStr.trim().replace(/\s+/g, ' '); // normalize spacing
            const parts = timeStr.split(" ");
            if (parts.length !== 2) return null;

            const [time, modifier] = parts;
            const [hoursStr, minutesStr] = time.split(":");

            let hours = parseInt(hoursStr, 10);
            let minutes = parseInt(minutesStr, 10);

            if (isNaN(hours) || isNaN(minutes)) return null;

            if (modifier.toUpperCase() === "PM" && hours < 12) hours += 12;
            if (modifier.toUpperCase() === "AM" && hours === 12) hours = 0;

            return `${String(hours).padStart(2, "0")}:${String(minutes).padStart(2, "0")}:00`;
        }


        function edit_ingr_monthly() {
            if ($("#monthly_data_editIng").valid()) {

                let invalidFound = false;

                $('#timeTable_monthly_edit tbody tr').each(function() {
                    const startInput = $(this).find('input[name="start_timemonthly[]"]');
                    const endInput = $(this).find('input[name="totime_timemonthly[]"]');

                    const startTimeStr = startInput.val();
                    const endTimeStr = endInput.val();

                    const start24 = convertWeeklyTo24Hour(startTimeStr);
                    const end24 = convertWeeklyTo24Hour(endTimeStr);

                    if (!start24 || !end24) {
                        alert("Please enter time in a valid format.");
                        invalidFound = true; // Set invalid flag and exit the loop early
                        return false; // Stop looping through rows
                    }

                    const start = new Date('1970-01-01T' + start24);
                    const end = new Date('1970-01-01T' + end24);
                    console.log(start);
                    console.log(end);

                    // Check if the start time is greater than or equal to end time
                    // if (start >= end) {
                    //     // Clear end time if invalid
                    //     endInput.val('');

                    //     if (!invalidFound) {
                    //         alert("End time should be later than the start time.");
                    //         invalidFound = true; // Set flag to true to prevent multiple alerts
                    //         return false; // Stop the loop to prevent further checks
                    //     }
                    // }
                });

                // If any invalid time was found, stop submission
                if (invalidFound) {
                    return;
                }


                // Continue with form submission if all times are valid
                const form = document.querySelector('#monthly_data_editIng');
                let formData = new FormData(form);

                let user_id = $("#usernamemonthlydataedit1").val();
                var operation_type_daily_edit = $('#operation_type_monthly_edit').val();
                if (user_id.length == 0) {
                    alert("Tap to Choose Your Kitchen Users.");
                    return;
                }

                var options = $('#options_monthly_edit').val();
                if (options.length == 0) {
                    alert("Tap to Choose Your Options.");
                    return;
                }

                formData.append('operation_type_daily_edit', operation_type_daily_edit);
                formData.append('_token', '{{ csrf_token() }}');

                $.ajax({
                    url: "update_operation_entry_v2",
                    type: "POST",
                    data: formData,
                    processData: false,
                    contentType: false,
                    success: function(result) {
                        if (result) {
                            alert("Changes saved - you are good to go!");
                            $(".btn-close").click();
                            $(".nav-link.active").click();
                        } else {
                            alert("Hey! You have already added this. Try something else.");
                        }
                    },
                });
            }
        }



        function delete_ingr() {
            if ($("#daily_delete_data").valid()) {



                const form = document.querySelector('#daily_delete_data');
                let formData = new FormData(form);
                var operation_type_daily_delete = $('#operation_type_daily_delete').val();
                formData.append('operation_type_daily_edit', operation_type_daily_delete);

                formData.append('_token', '{{ csrf_token() }}');

                $.ajax({
                    url: "delete_operation_entry_v2",
                    type: "POST",
                    data: formData,
                    processData: false,
                    contentType: false,
                    success: function(data) {
                        alert("Deletion completed successfully.");
                        $(".btn-close").click();
                        $(".nav-link.active").click();
                    },
                });
            }
        }


        function delete_weekly_data() {
            if ($("#ingrAddDaily_delete_weekly_form").valid()) {



                const form = document.querySelector('#ingrAddDaily_delete_weekly_form');
                let formData = new FormData(form);
                var operation_type_daily_delete = $('#operation_type_weekly_delete').val();
                formData.append('operation_type_daily_edit', operation_type_daily_delete);

                formData.append('_token', '{{ csrf_token() }}');

                $.ajax({
                    url: "delete_operation_entry_v2",
                    type: "POST",
                    data: formData,
                    processData: false,
                    contentType: false,
                    success: function(data) {
                        alert("Deletion completed successfully.");
                        $(".btn-close").click();
                        $(".nav-link.active").click();
                    },
                });
            }
        }

        function delete_ingr_monthly() {
            if ($("#monthy_delete_data").valid()) {



                const form = document.querySelector('#monthy_delete_data');
                let formData = new FormData(form);
                var operation_type_daily_delete = $('#operation_type_monthly_delete').val();
                formData.append('operation_type_daily_edit', operation_type_daily_delete);

                formData.append('_token', '{{ csrf_token() }}');

                $.ajax({
                    url: "delete_operation_entry_v2",
                    type: "POST",
                    data: formData,
                    processData: false,
                    contentType: false,
                    success: function(data) {
                        alert("Deletion completed successfully.");
                        $(".btn-close").click();
                        $(".nav-link.active").click();
                    },
                });
            }
        }


        function load_category() {
            $('#view_catgorytable_data').DataTable().destroy();
            var table = $('#view_catgorytable_data').DataTable({
                "autoWidth": true,
                "ordering": true,
                "order": [0, 'desc'],
                "scrollY": "450px",
                "scrollX": true,
                "scrollCollapse": true,
                "bPaginate": false,
                "responsive": true,
                "ajax": {
                    url: "get_category_data", // Ajax request
                    type: "post",
                    data: data,
                },

                "columns": [

                    {
                        "data": "id",
                        "title": "#"
                    },
                    {
                        "data": "id",
                        render: function(data, full, type) {
                            return '<button data-bs-toggle="modal" data-bs-target="#ExtralargeModalCategory" type="submit" class="btn" style="background: #d9a441 !important;color:#F2E2D2;border: 1px solid #d9a441;" onclick="viewmodel2(\'' + data + '\')"><i class="fa-solid fa-pen-to-square style_actions"></i></button>';
                        }
                    },

                    {
                        "data": "category_name",
                        "title": "Category"
                    }
                ],

                // Columns Definations for column customizations  
                columnDefs: [

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


                ],
                initComplete: function() {

                }
            });

            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()

            
            $(".toggle-sidebar-icon").click(function() {
                setTimeout(function() {
                    table.columns.adjust().draw();
                }, 300);
            });
        }

        $('#closePopup').on('click', function() {
            $('#timePopup').hide(); // or .fadeOut();
        });



        $('#view_addIngr_monthly').on('xhr.dt', function(e, settings, json, xhr) {
            if (json && json.recordsTotal !== undefined) {
                $('#monthly_count').text(`(${json.recordsTotal})`);
            }
        });

        $('#view_addIngr_weekly').on('xhr.dt', function(e, settings, json, xhr) {
            if (json && json.recordsTotal !== undefined) {
                $('#weekly_count').text(`(${json.recordsTotal})`);
            }
        });

        $('#view_catgorytable_data').on('xhr.dt', function(e, settings, json, xhr) {
            if (json && json.recordsTotal !== undefined) {
                $('#category_count').text(`(${json.recordsTotal})`);
            }
        });


        $('#view_addIngr').on('xhr.dt', function(e, settings, json, xhr) {
            if (json && json.recordsTotal !== undefined) {
                $('#daily_count').text(`(${json.recordsTotal})`);
            }
        });

        function load_submit_ingr() {
            let data = {};
            data['_token'] = "{{csrf_token()}}";
            data['operation_type'] = "daily";
            data['search_category'] = $("#search_category").val();
            $('#view_addIngr').DataTable().destroy();
            var table = $('#view_addIngr').DataTable({
                "autoWidth": true,
                "ordering": true,
                "order": [0, 'desc'],
                 "scrollY": "450px",
                "scrollX": true,
                "scrollCollapse": true,
                "bPaginate": false,
                "responsive": true,
                "ajax": {
                    url: "get_app_operation_entries_v2", // Ajax request
                    type: "post",
                    data: data,
                    //recordsTotal i want store this in <span id="weekly_count"></span> 
                },

                "columns": [

                    {
                        "data": "id",
                        "title": "#"
                    },
                    {
                        "data": "particulars",

                        render: function(data, full, row) {
                            var startDate = row['operation_start_time'] || '';
                            // console.log(startDate);
                            var endDate = row['operation_end_time'] || '';
                            // console.log(row['operation_end_time']);
                            var operation_type_model = 'daily';
                            return '<button data-bs-toggle="modal" data-bs-target="#ExtralargeModalDaily" type="submit" class="btn" style="background: #d9a441 !important;color:#F2E2D2;border: 1px solid #d9a441;" onclick="viewmodel1(\'' +
                                data + '\', \'' + startDate + '\', \'' + endDate + '\', \'' + operation_type_model + '\')">' +
                                '<i class="fa-solid fa-pen-to-square style_actions"></i></button>';

                        }

                    },

                    {
                        "data": "particulars",
                        "title": "Checklist Points"
                    },
                    {
                        "data": "operation_start_time",
                        "title": "Start Time"
                    },
                    {
                        "data": "operation_end_time",
                        "title": "End Time"
                    },

                ],

                // Columns Definations for column customizations  
                columnDefs: [

                    {
                        "width": "1%",
                        "targets": [0],
                        "orderable": false,
                        "className": "dt-center",
                        "searching": false
                    }, // data alignments  
                    {
                        "width": "2%",
                        "targets": [1],
                        "className": "dt-center"
                    },
                    {
                        "width": "10%",
                        "targets": [2],
                        "className": "dt-center"
                    },
                    {
                        "width": "10%",
                        "targets": [3],
                        "className": "dt-center"
                    },
                    {
                        "width": "10%",
                        "targets": [4],
                        "className": "dt-center"
                    },
                ],
                initComplete: function() {

                }




            });

            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()

               $(".toggle-sidebar-icon").click(function() {
                setTimeout(function() {
                    table.columns.adjust().draw();
                }, 300);
            });
        }



        function load_submit_ingr3() {
            let data = {};
            data['_token'] = "{{csrf_token()}}";
            data['operation_type'] = "monthly";
            data['search_category'] = $("#search_category").val();
            $('#view_addIngr_monthly').DataTable().destroy();
            let table = $('#view_addIngr_monthly').DataTable({
                "autoWidth": true,
                "ordering": true,
                 "scrollY": "450px",
                "scrollX": true,
                "scrollCollapse": true,
                "bPaginate": false,
                "responsive": true,
                "order": [0, 'desc'],
                "ajax": {
                    url: "get_app_operation_entries_v2", // Ajax request
                    type: "post",
                    data: data,
                },

                "columns": [

                    {
                        "data": "id",
                        "title": "#"
                    },
                    {
                        "data": "particulars",

                        render: function(data, full, row) {
                            var startDate = row['operation_start_time'] || '';
                            // console.log(startDate);
                            var endDate = row['operation_end_time'] || '';
                            // console.log(row['operation_end_time']);
                            var operation_type_model = 'monthly';
                            return '<button data-bs-toggle="modal" data-bs-target="#ExtralargeModalMonthly" type="submit" class="btn" style="background: #d9a441 !important;color:#F2E2D2;border: 1px solid #d9a441;" onclick="viewmodel3Monthly(\'' +
                                data + '\', \'' + startDate + '\', \'' + endDate + '\', \'' + operation_type_model + '\')">' +
                                '<i class="fa-solid fa-pen-to-square style_actions"></i></button>';

                        }

                    },

                    {
                        "data": "particulars",
                        "title": "Checklist Points"
                    },

                ],

                // Columns Definations for column customizations  
                columnDefs: [

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

                ],
                initComplete: function() {

                }
            });

            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()

               $(".toggle-sidebar-icon").click(function() {
                setTimeout(function() {
                    table.columns.adjust().draw();
                }, 300);
            });
        }




        function reset_daily_data() {

            var particularid = $("#hidden_particular_name_daily").val();
            var startDate = $("#hidden_start_date_daily").val();
            var endDate = $("#hidden_to_date_daily").val();
            var operation_type_model = $("#hidden_operation_type_daily").val();
            viewmodel1(particularid, startDate, endDate, operation_type_model)

        }

        function viewmodel1(id, startDate, endDate, operation_type_model) {
            let edit_picker;
            arr['particular'] = id;
            arr['startDate'] = startDate;
            arr['endDate'] = endDate;
            arr['operation_type_model'] = operation_type_model;


            $("#hidden_particular_name_daily").val(id);
            $("#hidden_start_date_daily").val(startDate);
            $("#hidden_to_date_daily").val(endDate);
            $("#hidden_operation_type_daily").val(operation_type_model);



            $("#edit_reset_id").val(id);
            $("#update_reason").val('');
            $("#delete_reason").val('');
            $.ajax({
                type: 'post',
                url: "get_added_operation_details_v2",
                data: arr,
                success: function(returnData) {
                    var obj = jQuery.parseJSON(returnData);
                    console.log(returnData)

                    var assignUser = obj[0].assigned_users_by_kitchen;
                    console.log(assignUser)

                    $('#user_name_daily__dataedit').html('');
                    $('#user_name_daily__dataview').html('');
                    $('#user_name_daily_datadelete').html('');


                    $.each(assignUser, function(index, user) {
                        // $('#user_id').append('<option value="' + user.user_id + '">' + user.full_name + '</option>');
                        $('#user_name_daily__dataedit').append('<option value="' + user.user_id + '">' + user.full_name + '</option>');
                        $('#user_name_daily__dataview').append('<option value="' + user.user_id + '">' + user.full_name + '</option>');
                        $('#user_name_daily_datadelete').append('<option value="' + user.user_id + '">' + user.full_name + '</option>');

                    });

                    $('#user_name_daily__dataedit').multipleSelect('refresh');
                    $('#user_name_daily__dataview').multipleSelect('refresh');
                    $('#user_name_daily_datadelete').multipleSelect('refresh');
                    $(".sd-CustomSelect").css({
                        display: "block",
                        visibility: "visible"
                    });

                    // VIEW
                    $('#view_id').val(obj[0]['ingr_id']);

                    $('.hidden_container').html('');
                    $('.hidden_container_delete').html('');
                    var kitchenNames = [];
                    for (var i = 0; i < obj.length; i++) {

                        // Create and append hidden input to a container
                        var hiddenInput = `<input type="hidden" class="form-control" name="hidden_prim_id[]" id="hidden_prim_id" value="${obj[i].id}">`;
                        var hiddenInputDelete = `<input type="hidden" class="form-control" name="hidden_prim_delete_id[]" id="hidden_prim_delete_id" value="${obj[i].id}">`;

                        $('.hidden_container').append(hiddenInput);
                        $('.hidden_container_delete').append(hiddenInputDelete);

                        var name = obj[i].kitchen_id;
                        if ($.inArray(name, kitchenNames) === -1) {
                            kitchenNames.push(name);
                        }
                    }

                    var kitchenNamesString = kitchenNames.join(' | ');

                    $('#kitchen_daily_data_edit').multipleSelect('setSelects', kitchenNames);
                    $('#kitchen_daily_data_view').multipleSelect('setSelects', kitchenNames);
                    $('#kitchen_daily_data_delete').multipleSelect('setSelects', kitchenNames);


                    setTimeout(function() {
                        $('#kitchen_daily_data_delete + .ms-parent .ms-drop input[type="checkbox"]').prop('disabled', true);
                    }, 100);

                    setTimeout(function() {
                        $('#kitchen_daily_data_view + .ms-parent .ms-drop input[type="checkbox"]').prop('disabled', true);
                    }, 100);
                    setTimeout(function() {
                        $('#kitchen_daily_data_edit + .ms-parent .ms-drop input[type="checkbox"]').prop('disabled', true);
                    }, 100);




                    //options
                    var options = obj[0]['options'];
                    var selectedOptions = options.split('|').map(item => item.trim());
                    var displayText = selectedOptions.join(' | ');
                    $('#options_daily_view').multipleSelect('setSelects', selectedOptions);
                    $('#options_daily_delete').multipleSelect('setSelects', selectedOptions);
                    $('#options_daily_edit').multipleSelect('setSelects', selectedOptions);



                    //kitchen
                    var user_id = obj[0]['user_id'];
                    var userIdsData = user_id.split(','); // ["1", "2", "3", "4"]
                    // console.log(userIdsData);

                    $('#user_name_daily__dataview').multipleSelect('setSelects', userIdsData);
                    $('#user_name_daily__dataedit').multipleSelect('setSelects', userIdsData);
                    $('#user_name_daily_datadelete').multipleSelect('setSelects', userIdsData);

                    // setTimeout(function() {
                    //     $('#user_name_daily__dataview input[type="checkbox"]').prop('disabled', true);
                    //     $('#user_name_daily__dataedit input[type="checkbox"]').prop('disabled', true);
                    //     $('#user_name_daily_datadelete input[type="checkbox"]').prop('disabled', true);
                    // }, 100);

                    setTimeout(function() {
                        $('#user_name_daily__dataview + .ms-parent .ms-drop input[type="checkbox"]').prop('disabled', true);
                    }, 100);
                    // setTimeout(function() {
                    //     $('#user_name_daily__dataedit + .ms-parent .ms-drop input[type="checkbox"]').prop('disabled', true);
                    // }, 100);
                    setTimeout(function() {
                        $('#user_name_daily_datadelete + .ms-parent .ms-drop input[type="checkbox"]').prop('disabled', true);
                    }, 100);


                    $('#category_daily_data_view').val(obj[0]['masterCategoryName']);
                    $('#category_daily_data_edit').val(obj[0]['masterCategoryName']);
                    $('#category_daily_data_delete').val(obj[0]['masterCategoryName']);



                    $('#operation_type_daily_view').val(obj[0]['operation_type']);
                    // $('#d_start_time_daily_view').val(obj[0]['operation_start_time']);
                    // $('#d_to_time_daily_view').val(obj[0]['operation_end_time']);
                    $('#d_start_time_daily_view').val(formatTimeToAMPM(obj[0]['operation_start_time']));
                    $('#d_to_time_daily_view').val(formatTimeToAMPM(obj[0]['operation_end_time']));

                    $('#operation_type_daily_edit').val(obj[0]['operation_type']);
                    // $('#d_start_time_daily_edit').val(obj[0]['operation_start_time']);
                    // $('#d_to_time_daily_edit').val(obj[0]['operation_end_time']);
                    $('#d_start_time_daily_edit').val(formatTimeToAMPM(obj[0]['operation_start_time']));
                    $('#d_to_time_daily_edit').val(formatTimeToAMPM(obj[0]['operation_end_time']));

                    $('#operation_type_daily_delete').val(obj[0]['operation_type']);
                    // $('#d_start_time_daily_delete').val(obj[0]['operation_start_time']);
                    // $('#d_to_time_daily_delete').val(obj[0]['operation_end_time']);
                    $('#d_start_time_daily_delete').val(formatTimeToAMPM(obj[0]['operation_start_time']));
                    $('#d_to_time_daily_delete').val(formatTimeToAMPM(obj[0]['operation_end_time']));



                    let particularsSet = new Set();
                    obj.forEach(item => {
                        if (item.particulars) {
                            particularsSet.add(item.particulars.trim());
                        }
                    });

                    $('#operations_holder_daily_data_view').html('');
                    $('#operations_holder_daily_edit').html('');
                    $('#operations_holder_daily_delete').html('');

                    // const firstInput = $('#operations_holder_daily_data_view .plc_holder').first();
                    // if (firstInput.val().trim() === '') {
                    //     firstInput.closest('.operation-row_daily_view').remove();
                    // }

                    particularsSet.forEach(particular => {
                        const newInputHtml = `
                            <div class="row operation-row_daily_view mt-1 mb-2">
                                <div class="col-md-11">
                                    <div class="form-floating">
                                        <input type="text" class="form-control plc_holder" name="ingr_daily_data_view[]" value="${particular}" readonly>
                                        <label>Checklist Point</label>
                                    </div>
                                </div>
                            </div>
                        `;
                        $('#operations_holder_daily_data_view').append(newInputHtml);
                    });




                    // const firstInputView = $('#operations_holder_daily_edit .plc_holder').first();
                    // if (firstInputView.val().trim() === '') {
                    //     firstInputView.closest('.operation-row_daily_data').remove();
                    // }

                    particularsSet.forEach(particular => {
                        const newInputHtml = `
                            <div class="row operation-row_daily_data mt-1 mb-2">
                             <input type="hidden" class="form-control plc_holder" id="hidden_particular_text_data" name="hidden_particular_text_data[]" value="${particular}">
                                <div class="col-md-11">
                                    <div class="form-floating">
                                        <input type="text" class="form-control plc_holder" name="ingr_daily_dataedit" value="${particular}">
                                        <label>Checklist Point</label>
                                           <p id="ingr_daily_dataedit_error"
                                                                            style="color:red"></p>
                                    </div>
                                </div>
                                 <div class="col-md-1 mt-2 mb-2">
                                
                            </div>
                        `;
                        $('#operations_holder_daily_edit').append(newInputHtml);
                    });







                    // const firstInputDelete = $('#operations_holder_daily_delete .plc_holder').first();
                    // if (firstInputDelete.val().trim() === '') {
                    //     firstInputDelete.closest('.operation-row_daily_delete_data').remove();
                    // }

                    particularsSet.forEach(particular => {
                        const newInputHtml = `
                            <div class="row operation-row_daily_delete_data mt-1 mb-2">
                                <div class="col-md-11">
                                    <div class="form-floating">
                                        <input type="text" class="form-control plc_holder" name="ingr_daily_delete_data[]" value="${particular}" readonly>
                                        <label>Checklist Point</label>
                                    </div>
                                </div>
                               
                            </div>
                        `;
                        $('#operations_holder_daily_delete').append(newInputHtml);
                    });

                }
            });
        }








        function viewmodel(id) {
            let edit_picker;
            arr['id'] = id;
            $("#edit_reset_id").val(id);
            $("#update_reason").val('');
            $("#delete_reason").val('');

            $.ajax({
                type: 'post',
                url: "get_added_operation_details_v2",
                data: arr,
                success: function(returnData) {
                    var obj = jQuery.parseJSON(returnData);

                    // VIEW
                    $('#view_id').val(obj[0]['ingr_id']);
                    $('#ingr_name_view').val(obj[0]['particulars']);
                    $('#view_add_options').val(obj[0]['options']);
                    $('#view_category').val(obj[0]['category_name']);
                    $('#view_kitchen').val(obj[0]['kitchen_name']);
                    $('#view_date').val(obj[0]['operation_date']);
                    $('#view_start_time').val(obj[0]['operation_start_time']);
                    $('#view_end_time').val(obj[0]['operation_end_time']);
                    $('#view_operation_type').val(obj[0]['operation_type']);
                    $('#view_week_day').val(obj[0]['weekday'] ?? "Daily");

                    // EDIT

                    $("#edit_id").val(obj[0]['ingr_id']);
                    $('#ingr_name_edit').val(obj[0]['particulars']);;
                    $('#edit_category').val(obj[0]['category_id']);
                    $('#edit_kitchen').val(obj[0]['kitchen_id']);

                    editstartTimePicker.setDate(obj[0]['operation_start_time'], true); // `true` triggers change event
                    editendTimePicker.setDate(obj[0]['operation_end_time'], true);

                    const initialDate = obj[0]['operation_date'];
                    $('#edit_date_date').val(initialDate);

                    // date picker edit;
                    // edit_picker = flatpickr("#edit_date_date", {
                    //     dateFormat: "Y-m-d",
                    //     defaultDate: initialDate,
                    //     onChange: function(selectedDates, dateStr, instance) {
                    //         applyFormattedDates(selectedDates, instance);
                    //     }
                    // });

                    // Apply formatting after initialization
                    // applyFormattedDates([new Date(initialDate)], edit_picker);

                    // function applyFormattedDates(dates, instance) {
                    //     const formattedDates = dates.map(date => {
                    //         const dayName = date.toLocaleDateString('en-US', {
                    //             weekday: 'short'
                    //         });
                    //         const year = date.getFullYear();
                    //         const month = String(date.getMonth() + 1).padStart(2, '0');
                    //         const day = String(date.getDate()).padStart(2, '0');
                    //         const formatted = `${year}-${month}-${day}`;
                    //         return `${formatted}(${dayName})`;
                    //     });
                    //     instance.input.value = formattedDates.join(' | ');
                    // }


                    // DELETE
                    $('#delete_id').val(obj[0]['ingr_id']);
                    $('#ingr_name_delete').val(obj[0]['particulars']);
                    // $('#ingr_qty_delete').val(obj[0]['ingr_qty']);
                    $('#delete_add_options').val(obj[0]['options']);
                    $('#delete_category').val(obj[0]['category_name']);
                    $('#delete_kitchen').val(obj[0]['kitchen_name']);
                    $('#delete_date').val(obj[0]['operation_date']);
                    $('#delete_start_time').val(obj[0]['operation_start_time']);
                    $('#delete_end_time').val(obj[0]['operation_end_time']);
                    $('#delete_operation_type').val(obj[0]['operation_type']);
                    $('#delete_week_day').val(obj[0]['weekday'] ?? "Daily");


                    var options = obj[0]['options'];
                    var cleaned_ids = options.split('|');
                    $('.selUser').val(cleaned_ids).trigger('change');

                    $('.selUser').select2({
                        dropdownParent: $('#ExtralargeModal')
                    });


                }
            });
        }

        function reset_data() {
            var id = $("#edit_reset_id").val();
            $("#update_reason").val('');
            viewmodel(id);
        }

        function reset_main_data() {
            $("#ingrAdd")[0].reset();
            $('#user_id').html('');
            $('#user_id').trigger("chosen:updated");
            $("#user_id").val('').trigger("chosen:updated");
            $("#kitchen").val('').trigger("chosen:updated");
            $("#add_options").val('').trigger("chosen:updated");
            $("#operations_holder").html(` <div class="row operation-row mt-1 mb-2">
                                            <div class="col-md-11">
                                                <div class="form-floating">
                                                    <input type="text" class="form-control plc_holder" name="ingr_name[]" placeholder="operation" autocomplete="off">
                                                    <label>Checklist point/Particulars</label>
                                                   
                                                </div>
                                            </div>
                                            <div class="col-md-1 mt-2 mb-2">
                                                <button type="button" class="btn btn-success add-btn">+</button>
                                            </div>
                                        </div>`)
            for (let i = 0; i <= 6; i++) {
                $(`#calendar${i}`).html('')
            }
            $("#timeTable tbody").html("");
            $("#table-container").hide()
            $("#calendar1").hide()
            $("#calendar2").hide()
            $("#calendar3").hide()
            $("#calendar4").hide()
            $("#calendar5").hide()
            $("#calendar6").hide()
            $("#d-start").hide()
            $("#d-end").hide()
            $('#timePopup').hide();
            // OutletChange();
            $('#kitchen').multipleSelect('checkAll');
            $('#add_options').multipleSelect('checkAll');

            return false;
        }

        function reset_category_name_update() {
            var id = $("#reset_ctg_name").val();
            // $("#edit_reason").val('');
            viewmodel2(id);
        }

        function viewmodel2(id) {
            var data = {};
            data['id'] = id;
            data['_token'] = "{{ csrf_token() }}";

            $("#reset_ctg_name").val(id);
            $("#category_name_master_update")[0].reset();
            $("#id_update").val(id);
            $.ajax({
                type: 'post',
                url: "retrive_category_for_edit_update_delete",
                data: data,
                success: function(returnData) {

                    var obj = jQuery.parseJSON(returnData);

                    // VIEW
                    $('#id_view').val(obj[0]['id']);
                    $('#model_view_category').val(obj[0]['category_name']);

                    // Update
                    $('#id_update').val(obj[0]['id']);
                    $('#model_edit_category').val(obj[0]['category_name']);


                    // delete
                    $('#id_delete').val(obj[0]['id']);
                    $('#model_delete_category').val(obj[0]['category_name']);


                }
            });
        }


        $('#category_name_master_update').submit(function(e) {
            e.preventDefault();
            if ($('#category_name_master_update').valid()) {

                var data = {};
                var id_update = $('#id_update').val();
                var category_name = $("#model_edit_category").val();
                data['id_update'] = id_update;
                data['category_name'] = category_name;
                data['_token'] = "{{ csrf_token() }}";

                $.ajax({
                    type: 'POST',
                    url: 'update_category_by_id',
                    data: data,
                    success: function(result) {
                        if (result == 'Exist') {
                            alert('Hey! You have already added this. Try something else.');
                            $('#model_edit_category').val('');

                        } else {
                            alert('Changes saved - you are good to go!');
                            $('#model_edit_category').val('');
                            load_category();
                            load_submit_ingr();
                            get_category_drop_down();
                            $(".btn-close").click();

                        }
                    }
                })
            }
        })

        function category_delete() {

            var data = {};
            var id_delete = $('#id_delete').val();
            data['id_delete'] = id_delete;
            data['_token'] = "{{ csrf_token() }}";
            $.ajax({
                type: 'post',
                url: 'delete_category_by_id',
                data: data,
                success: function(returnData) {
                    var data = jQuery.parseJSON(returnData);
                    if (data == 'delete') {
                        alert("Deletion completed successfully.");
                        $("#hired_by_name_master_delete")[0].reset();
                        $(".btn-close").click();
                        load_category();
                        load_submit_ingr();
                        get_category_drop_down();

                    }

                }
            })

        }

        function formatTimeToAMPM(timeStr) {
            const [hours, minutes] = timeStr.split(':');
            const date = new Date();
            date.setHours(parseInt(hours));
            date.setMinutes(parseInt(minutes));

            let options = {
                hour: 'numeric',
                minute: '2-digit',
                hour12: true
            };
            return date.toLocaleTimeString('en-US', options);
        }


        function get_category_drop_down() {

            $.ajax({
                type: 'post',
                url: "get_all_category",
                data: data,
                success: function(data) {

                    var arr = jQuery.parseJSON(data);

                    $('#category').empty();
                    $('#search_category').empty();
                    $('#edit_category').empty();

                    var s = '<option value="">Select</option>';
                    $('#category').append(s);
                    $('#search_category').append(s);
                    var s = '<option value="">Select</option>';
                    $('#edit_category').append(s);


                    $.each(arr, function(key, val) {
                        $('#category').append('<option value = "' + val.id + '">' + val.category_name + '</option>');
                        $('#search_category').append('<option value = "' + val.id + '">' + val.category_name + '</option>');
                        $('#edit_category').append('<option value = "' + val.id + '">' + val.category_name + '</option>');

                    });

                }
            });

        }


        function reset_monthly_data() {

            var particularid = $("#hidden_particular_name_monthly").val();
            var startDate = $("#hidden_start_date_monthly").val();
            var endDate = $("#hidden_to_date_monthly").val();
            var operation_type_model = $("#hidden_operation_type_monthly").val();
            viewmodel3Monthly(particularid, startDate, endDate, operation_type_model)

        }


        function viewmodel3Monthly(id, startDate, endDate, operation_type_model) {
            let edit_picker;
            arr['particular'] = id;
            arr['startDate'] = startDate;
            arr['endDate'] = endDate;
            arr['operation_type_model'] = operation_type_model;


            $("#hidden_particular_name_monthly").val(id);
            $("#hidden_start_date_monthly").val(startDate);
            $("#hidden_to_date_monthly").val(endDate);
            $("#hidden_operation_type_monthly").val(operation_type_model);


            $("#edit_reset_id").val(id);
            $("#update_reason").val('');
            $("#delete_reason").val('');
            $.ajax({
                type: 'post',
                url: "get_added_operation_details_v2",
                data: arr,
                success: function(returnData) {
                    var obj = jQuery.parseJSON(returnData);
                    console.log(returnData)

                    var assignUser = obj[0].assigned_users_by_kitchen;
                    // console.log(assignUser)

                    $('#usernamemonthlydataedit1').html('');
                    $('#user_name_monthly__dataview').html('');
                    $('#user_name_monthly_datadelete').html('');

                    if (assignUser) {
                        $.each(assignUser, function(index, user) {
                            // $('#user_id').append('<option value="' + user.user_id + '">' + user.full_name + '</option>');
                            $('#usernamemonthlydataedit1').append('<option value="' + user.user_id + '">' + user.full_name + '</option>');
                            $('#user_name_monthly__dataview').append('<option value="' + user.user_id + '">' + user.full_name + '</option>');
                            $('#user_name_monthly_datadelete').append('<option value="' + user.user_id + '">' + user.full_name + '</option>');

                        });

                        $('#usernamemonthlydataedit1').multipleSelect('refresh');
                        $('#user_name_monthly__dataview').multipleSelect('refresh');
                        $('#user_name_monthly_datadelete').multipleSelect('refresh');
                    }
                    $(".sd-CustomSelect").css({
                        display: "block",
                        visibility: "visible"
                    });


                    // VIEW
                    $('#view_id').val(obj[0]['ingr_id']);

                    $('.hidden_container_monthly').html('');
                    $('.hidden_container_delete_monthly').html('');
                    var kitchenNames = [];
                    for (var i = 0; i < obj.length; i++) {

                        // Create and append hidden input to a container
                        var hiddenInput = `<input type="hidden" class="form-control" name="hidden_monthly_prim_id[]" id="hidden_monthly_prim_id" value="${obj[i].id}">`;
                        var hiddenInputDelete = `<input type="hidden" class="form-control" name="hidden_prim__monthlydelete_id[]" id="hidden_prim__monthlydelete_id" value="${obj[i].id}">`;

                        $('.hidden_container_monthly').append(hiddenInput);
                        $('.hidden_container_delete_monthly').append(hiddenInputDelete);

                        var name = obj[i].kitchen_id;
                        if ($.inArray(name, kitchenNames) === -1) {
                            kitchenNames.push(name);
                        }
                    }

                    var kitchenNamesString = kitchenNames.join(' | ');

                    $('#kitchen_monthly_data_edit').multipleSelect('setSelects', kitchenNames);
                    $('#kitchen_monthly_data_view').multipleSelect('setSelects', kitchenNames);
                    $('#kitchen_monthly_data_delete').multipleSelect('setSelects', kitchenNames);


                    setTimeout(function() {
                        $('#kitchen_monthly_data_delete + .ms-parent .ms-drop input[type="checkbox"]').prop('disabled', true);
                    }, 100);

                    setTimeout(function() {
                        $('#kitchen_monthly_data_view + .ms-parent .ms-drop input[type="checkbox"]').prop('disabled', true);
                    }, 100);
                    setTimeout(function() {
                        $('#kitchen_monthly_data_edit + .ms-parent .ms-drop input[type="checkbox"]').prop('disabled', true);
                    }, 100);




                    //options
                    var options = obj[0]['options'];
                    var selectedOptions = options.split('|').map(item => item.trim());
                    var displayText = selectedOptions.join(' | ');
                    $('#options_monthly_view').multipleSelect('setSelects', selectedOptions);
                    $('#options_monthly_delete').multipleSelect('setSelects', selectedOptions);
                    $('#options_monthly_edit').multipleSelect('setSelects', selectedOptions);



                    //kitchen
                    var user_id = obj[0]['user_id'];
                    var userIdsData = user_id.split(','); // ["1", "2", "3", "4"]
                    // console.log(userIdsData);

                    $('#user_name_monthly__dataview').multipleSelect('setSelects', userIdsData);
                    $('#usernamemonthlydataedit1').multipleSelect('setSelects', userIdsData);
                    $('#user_name_monthly_datadelete').multipleSelect('setSelects', userIdsData);

                    // setTimeout(function() {
                    //     $('#user_name_daily__dataview input[type="checkbox"]').prop('disabled', true);
                    //     $('#user_name_daily__dataedit input[type="checkbox"]').prop('disabled', true);
                    //     $('#user_name_daily_datadelete input[type="checkbox"]').prop('disabled', true);
                    // }, 100);

                    setTimeout(function() {
                        $('#user_name_monthly__dataview + .ms-parent .ms-drop input[type="checkbox"]').prop('disabled', true);
                    }, 100);
                    // setTimeout(function() {
                    //     $('#user_name_daily__dataedit + .ms-parent .ms-drop input[type="checkbox"]').prop('disabled', true);
                    // }, 100);
                    setTimeout(function() {
                        $('#user_name_monthly_datadelete + .ms-parent .ms-drop input[type="checkbox"]').prop('disabled', true);
                    }, 100);


                    $('#category_monthly_data_view').val(obj[0]['masterCategoryName']);
                    $('#category_monthly_data_edit').val(obj[0]['masterCategoryName']);
                    $('#category_monthly_data_delete').val(obj[0]['masterCategoryName']);



                    $('#operation_type_monthly_view').val(obj[0]['operation_type']);
                    $('#operation_type_monthly_delete').val(obj[0]['operation_type']);
                    $('#operation_type_monthly_edit').val(obj[0]['operation_type']);




                    let particularsSet = new Set();
                    obj.forEach(item => {
                        if (item.particulars) {
                            particularsSet.add(item.particulars.trim());
                        }
                    });

                    $('#operations_holder_monthly_data_view').html('');
                    $('#operations_holder_monthly_edit').html('');
                    $('#operations_holder_monthly_delete').html('');

                    // const firstInput = $('#operations_holder_daily_data_view .plc_holder').first();
                    // if (firstInput.val().trim() === '') {
                    //     firstInput.closest('.operation-row_daily_view').remove();
                    // }

                    particularsSet.forEach(particular => {
                        const newInputHtml = `
                            <div class="row operation-row_monthly_view mt-1 mb-2">
                                <div class="col-md-11">
                                    <div class="form-floating">
                                        <input type="text" class="form-control plc_holder" name="ingr_monthly_data_view[]" value="${particular}" readonly>
                                        <label>Checklist Point</label>
                                    </div>
                                </div>
                            </div>
                        `;
                        $('#operations_holder_monthly_data_view').append(newInputHtml);
                    });




                    // const firstInputView = $('#operations_holder_daily_edit .plc_holder').first();
                    // if (firstInputView.val().trim() === '') {
                    //     firstInputView.closest('.operation-row_daily_data').remove();
                    // }

                    particularsSet.forEach(particular => {
                        const newInputHtml = `
                            <div class="row operation-row_monthly_data mt-1 mb-2">
                             <input type="hidden" class="form-control plc_holder" id="hidden_particular_text_data_monthly" name="hidden_particular_text_data_monthly[]" value="${particular}">
                                <div class="col-md-11">
                                    <div class="form-floating">
                                        <input type="text" class="form-control plc_holder" name="ingr_monthly_dataedit" value="${particular}">
                                        <label>Checklist Point</label>
                                         <p id="ErrorID_2_monthly_edit" style="color:red"></p>
                                    </div>
                                </div>
                                 <div class="col-md-1 mt-2 mb-2">
                                
                            </div>
                        `;
                        $('#operations_holder_monthly_edit').append(newInputHtml);
                    });







                    // const firstInputDelete = $('#operations_holder_daily_delete .plc_holder').first();
                    // if (firstInputDelete.val().trim() === '') {
                    //     firstInputDelete.closest('.operation-row_daily_delete_data').remove();
                    // }

                    particularsSet.forEach(particular => {
                        const newInputHtml = `
                            <div class="row operation-row_monthly_delete_data mt-1 mb-2">
                                <div class="col-md-11">
                                    <div class="form-floating">
                                        <input type="text" class="form-control plc_holder" name="ingr_monthly_delete_data[]" value="${particular}" readonly>
                                        <label>Checklist Point</label>
                                    </div>
                                </div>
                               
                            </div>
                        `;
                        $('#operations_holder_monthly_delete').append(newInputHtml);


                        //time table 

                        $('#timeTable_monthly_view tbody').empty();
                        $('#timeTable_monthly_edit tbody').empty();

                        const seen = new Set();

                        obj.forEach((item, index) => {
                            const weekknumber = item['weeknumber'];
                            const weekdays = item['weekdays'];
                            const tr_operation_start_date = item['tr_operation_start_date'];
                            const tr_operation_end_date = item['tr_operation_end_date'];

                            const uniqueKey = `${weekknumber}-${weekdays}`;

                            if (!seen.has(uniqueKey)) {
                                seen.add(uniqueKey);
                                const uniqueId = 'row_' + index;

                                // Table 1: Readonly View Table
                                $('#timeTable_monthly_view tbody').append(`
                                                <tr id="${uniqueId}_view" data-index="${index}">
                                                    <td><input class="form-control" style="width:50px" type="text" name="weeknum[]" value="${weekknumber}" readonly /></td>
                                                    <td><input class="form-control" style="width:80px" type="text" name="weekday[]" value="${weekdays}" readonly /></td>
                                                    <td><input class="form-control" style="width:100px" type="text" name="start_time[]" value="${tr_operation_start_date}" readonly /></td>
                                                    <td><input class="form-control" style="width:100px" type="text" name="end_time[]" value="${tr_operation_end_date}" readonly /></td>

                                                </tr>
                                            `);

                                // Table 2: Editable Input Table
                                $('#timeTable_monthly_edit tbody').append(`
                                        <tr id="${uniqueId}_edit" data-index="${index}">
                                            <td><input class="form-control" style="width:50px" type="text" name="weeknum[]" value="${weekknumber}" readonly /></td>
                                            <td><input class="form-control" style="width:80px" type="text" name="weekday[]" value="${weekdays}" readonly /></td>
                                            <td><input class="form-control timepicker" style="width:100px" type="text" name="start_timemonthly[]" value="${tr_operation_start_date}" /> <p id="start_time_error_monthly" style="color:red"></p></td>
                                            <td><input class="form-control timepicker" style="width:100px" type="text" name="totime_timemonthly[]" value="${tr_operation_end_date}" /><p id="end_time_error_monthly" style="color:red"></p></td>

                                        </tr>
                                    `);
                            }
                        });

                        $('#timeTable_monthly_edit tbody .timepicker').each(function() {
                            if (!$(this).data('mdtimepicker')) {
                                $(this).mdtimepicker();
                            }
                        });


                        // calender
                        $('#cal_holder_view_monthly').css('display', 'block');
                        $('#cal_holder_edit_monthly').css('display', 'block');
                        generateCalendarWithData(obj, 'cal_holder_view_monthly', false);
                        generateCalendarWithData(obj, 'cal_holder_edit_monthly', true);

                    });

                }
            });
        }




        function OutletChange() {
            const kitchen = $("#kitchen").val();
            if (kitchen.length <= 0) {
                return;
            }
            let data = {};
            data['_token'] = "{{csrf_token()}}";
            data['kitchen'] = $("#kitchen").val();
            $.ajax({
                url: "get_sup_by_kitchen_id",
                type: 'post',
                data: data,
                success: function(data) {
                    if (data) {
                        var arr = jQuery.parseJSON(data);
                        $('#user_id').html('');


                        $.each(arr, function(index, user) {
                            $('#user_id').append('<option value="' + user.user_id + '">' + user.full_name + '</option>');

                        });

                        // Refresh and check all options
                        $('#user_id').multipleSelect('refresh');


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


                        $('#user_id').html('');
                        $('#user_id').multipleSelect('refresh');



                    }
                }
            })
        }




        // function OutletChangeWeekly() {
        //     const kitchen = $("#kitchen_daily_data_edit").val();
        //     if (kitchen.length <= 0) {
        //         return;
        //     }
        //     let data = {};
        //     data['_token'] = "{{csrf_token()}}";
        //     data['kitchen'] = $("#kitchen").val();
        //     $.ajax({
        //         url: "get_sup_by_kitchen_id",
        //         type: 'post',
        //         data: data,
        //         success: function(data) {
        //             if (data) {
        //                 var arr = jQuery.parseJSON(data);
        //                 $('#user_id').html('');
        //                 $('#user_name_daily__dataedit').html('');
        //                 $('#user_name_daily__dataview').html('');
        //                 $('#user_name_daily_datadelete').html('');


        //                 $('#usernamemonthlydataedit1').html('');
        //                 $('#user_name_monthly__dataview').html('');
        //                 $('#user_name_monthly_datadelete').html('');


        //                 $('#user_id_weekly_delete').html('');
        //                 $('#user_id_weekly_edit').html('');
        //                 $('#user_id_weekly_view').html('');

        //                 $.each(arr, function(index, user) {
        //                     $('#user_id').append('<option value="' + user.user_id + '">' + user.full_name + '</option>');
        //                     $('#user_name_daily__dataedit').append('<option value="' + user.user_id + '">' + user.full_name + '</option>');
        //                     $('#user_name_daily__dataview').append('<option value="' + user.user_id + '">' + user.full_name + '</option>');
        //                     $('#user_name_daily_datadelete').append('<option value="' + user.user_id + '">' + user.full_name + '</option>');

        //                     $('#usernamemonthlydataedit1').append('<option value="' + user.user_id + '">' + user.full_name + '</option>');
        //                     $('#user_name_monthly__dataview').append('<option value="' + user.user_id + '">' + user.full_name + '</option>');
        //                     $('#user_name_monthly_datadelete').append('<option value="' + user.user_id + '">' + user.full_name + '</option>');

        //                     $('#user_id_weekly_delete').append('<option value="' + user.user_id + '">' + user.full_name + '</option>');
        //                     $('#user_id_weekly_edit').append('<option value="' + user.user_id + '">' + user.full_name + '</option>');
        //                     $('#user_id_weekly_view').append('<option value="' + user.user_id + '">' + user.full_name + '</option>');

        //                 });

        //                 // Refresh and check all options
        //                 $('#user_id').multipleSelect('refresh');
        //                 $('#user_name_daily__dataedit').multipleSelect('refresh');
        //                 $('#user_name_daily__dataview').multipleSelect('refresh');
        //                 $('#user_name_daily_datadelete').multipleSelect('refresh');

        //                 $('#usernamemonthlydataedit1').multipleSelect('refresh');
        //                 $('#user_name_monthly__dataview').multipleSelect('refresh');
        //                 $('#user_name_monthly_datadelete').multipleSelect('refresh');

        //                 $('#user_id_weekly_delete').multipleSelect('refresh');
        //                 $('#user_id_weekly_edit').multipleSelect('refresh');
        //                 $('#user_id_weekly_view').multipleSelect('refresh');


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

        //                 // $('#kitchen_namedaily_view').html('');
        //                 // $('#kitchen_namedaily_view').multipleSelect('refresh');

        //                 // $('#kitchen_daily_delete').html('');
        //                 // $('#kitchen_daily_delete').multipleSelect('refresh');



        //                 // $('#kitchen_monthly_data_edit').html('');
        //                 // $('#kitchen_monthly_data_edit').multipleSelect('refresh');

        //                 // $('#kitchen_monthly_data_view').html('');
        //                 // $('#kitchen_monthly_data_view').multipleSelect('refresh');

        //                 // $('#kitchen_monthly_data_delete').html('');
        //                 // $('#kitchen_monthly_data_delete').multipleSelect('refresh');

        //                 //
        //                 // $('#user_id_weekly_delete').html('');
        //                 // $('#user_id_weekly_delete').multipleSelect('refresh');


        //                 // $('#user_id_weekly_edit').html('');
        //                 // $('#user_id_weekly_edit').multipleSelect('refresh');

        //                 // $('#user_id_weekly_view').html('');
        //                 // $('#user_id_weekly_view').multipleSelect('refresh');


        //                 $('#user_id').html('');
        //                 $('#user_id').multipleSelect('refresh');



        //             }
        //         }
        //     })
        // }

        function load_submit_ingr2() {
            let data = {};
            data['_token'] = "{{csrf_token()}}";
            data['operation_type'] = "weekly";
            data['search_category'] = $("#search_category").val();
            $('#view_addIngr_weekly').DataTable().destroy();
            let table = $('#view_addIngr_weekly').DataTable({
                "autoWidth": true,
                "ordering": true,
                 "scrollY": "450px",
                "scrollX": true,
                "scrollCollapse": true,
                "bPaginate": false,
                "responsive": true,
                "order": [0, 'desc'],
                "ajax": {
                    url: "get_app_operation_entries_v2", // Ajax request
                    type: "post",
                    data: data,
                },

                "columns": [

                    {
                        "data": "id",
                        "title": "#"
                    },
                    {
                        "data": "particulars",

                        render: function(data, full, row) {
                            var startDate = row['operation_start_time'] || '';
                            // console.log(startDate);
                            var endDate = row['operation_end_time'] || '';
                            // console.log(row['operation_end_time']);
                            var operation_type_model = 'weekly';
                            return '<button data-bs-toggle="modal" data-bs-target="#ExtralargeModalWeekly" type="submit" class="btn" style="background: #d9a441 !important;color:#F2E2D2;border: 1px solid #d9a441;" onclick="viewmodel2Weekly(\'' +
                                data + '\', \'' + startDate + '\', \'' + endDate + '\', \'' + operation_type_model + '\')">' +
                                '<i class="fa-solid fa-pen-to-square style_actions"></i></button>';

                        }

                    },

                    {
                        "data": "particulars",
                        "title": "Checklist Points"
                    },

                ],

                // Columns Definations for column customizations  
                columnDefs: [

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

                ],
                initComplete: function() {

                }
            });

            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()

               $(".toggle-sidebar-icon").click(function() {
                setTimeout(function() {
                    table.columns.adjust().draw();
                }, 300);
            });
        }

        //05-07-2025
        // $('#ExtralargeModalWeekly').on('shown.bs.modal', function () {
        //     changeoperationType();
        // });
        function generateCalendarWithData(ajaxData) {
            const days = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];

            // ✅ 1. Clear calendars and hide them
            for (let i = 1; i <= 6; i++) {
                $(`#calendar${i}`).html('').hide();
            }

            const groupedByWeek = {};

            // ✅ 2. Group by week number
            ajaxData.forEach(entry => {
                const weekNo = entry.weeknumber || 1;
                const weekday = entry.weekdays?.trim();

                if (!weekday) return;

                if (!groupedByWeek[weekNo]) {
                    groupedByWeek[weekNo] = new Set();
                }

                groupedByWeek[weekNo].add(weekday);
            });

            console.log("✅ Grouped Days By Week:", groupedByWeek);

            // ✅ 3. Loop and render calendars
            Object.keys(groupedByWeek).forEach(weekNo => {
                const weekIndex = parseInt(weekNo);
                const container = $(`#calendar${weekIndex}`);
                const selectedDays = groupedByWeek[weekNo];

                if (!container.length) {
                    console.warn(`Calendar container calendar${weekIndex} not found`);
                    return;
                }

                container.show();
                container.append(`<label><strong>Week ${weekIndex}</strong></label><br>`);

                days.forEach(day => {
                    const isSelected = selectedDays.has(day);
                    const btn = $(`<button type="button" class="btn day-btn ${isSelected ? 'selected' : ''}" style="margin: 3px;" disabled>${day}</button>`);
                    container.append(btn);
                });
            });

            // ✅ 4. Ensure calendar wrapper is visible
            $('#cal_holder_view_weekly').show();
        }

        //weekly


        function reset_weekly_data() {

            var particularid = $("#hidden_particular_name_weekly").val();
            var startDate = $("#hidden_start_date_weekly").val();
            var endDate = $("#hidden_to_date_weekly").val();
            var operation_type_model = $("#hidden_operation_type_weekly").val();
            viewmodel2Weekly(particularid, startDate, endDate, operation_type_model)

        }



        function viewmodel2Weekly(id, startDate, endDate, operation_type_model) {
            let edit_picker;
            arr['particular'] = id;
            arr['startDate'] = startDate;
            arr['endDate'] = endDate;
            arr['operation_type_model'] = operation_type_model;

            $("#hidden_particular_name_weekly").val(id);
            $("#hidden_start_date_weekly").val(startDate);
            $("#hidden_to_date_weekly").val(endDate);
            $("#hidden_operation_type_weekly").val(operation_type_model);


            $("#edit_reset_id").val(id);
            $("#update_reason").val('');
            $("#delete_reason").val('');
            $.ajax({
                type: 'post',
                url: "get_added_operation_details_v2",
                data: arr,
                success: function(returnData) {
                    var obj = jQuery.parseJSON(returnData);
                    console.log(returnData)

                    var assignUser = obj[0].assigned_users_by_kitchen;
                    // console.log(assignUser)
                    $('#user_id_weekly_delete').html('');
                    $('#user_id_weekly_edit').html('');
                    $('#user_id_weekly_view').html('');

                    if (assignUser) {

                        $.each(assignUser, function(index, user) {
                            // $('#user_id').append('<option value="' + user.user_id + '">' + user.full_name + '</option>');
                            $('#user_id_weekly_delete').append('<option value="' + user.user_id + '">' + user.full_name + '</option>');
                            $('#user_id_weekly_edit').append('<option value="' + user.user_id + '">' + user.full_name + '</option>');
                            $('#user_id_weekly_view').append('<option value="' + user.user_id + '">' + user.full_name + '</option>');

                        });

                        $('#user_id_weekly_delete').multipleSelect('refresh');
                        $('#user_id_weekly_edit').multipleSelect('refresh');
                        $('#user_id_weekly_view').multipleSelect('refresh');
                    }
                    $(".sd-CustomSelect").css({
                        display: "block",
                        visibility: "visible"
                    });


                    // VIEW
                    $('#view_id').val(obj[0]['ingr_id']);

                    $('.hidden_container_weekly').html('');
                    $('.hidden_container_weekly_delete').html('');
                    var kitchenNames = [];
                    for (var i = 0; i < obj.length; i++) {

                        // Create and append hidden input to a container
                        var hiddenInput = `<input type="hidden" class="form-control" name="hidden_prim_weekly_id[]" id="hidden_prim_weekly_id" value="${obj[i].id}">`;
                        var hiddenInputDelete = `<input type="hidden" class="form-control" name="hidden_prim_weekly_delete_id[]" id="hidden_prim_weekly_delete_id" value="${obj[i].id}">`;

                        $('.hidden_container_weekly').append(hiddenInput);
                        $('.hidden_container_weekly_delete').append(hiddenInputDelete);

                        var name = obj[i].kitchen_id;
                        if ($.inArray(name, kitchenNames) === -1) {
                            kitchenNames.push(name);
                        }
                    }

                    var kitchenNamesString = kitchenNames.join(' | ');

                    $('#kitchen_view_edit_weekly').multipleSelect('setSelects', kitchenNames);
                    $('#kitchen_weekly_data_view').multipleSelect('setSelects', kitchenNames);
                    $('#kitchen_weekly_delete_data').multipleSelect('setSelects', kitchenNames);


                    setTimeout(function() {
                        $('#kitchen_weekly_delete_data + .ms-parent .ms-drop input[type="checkbox"]').prop('disabled', true);
                    }, 100);

                    setTimeout(function() {
                        $('#kitchen_weekly_data_view + .ms-parent .ms-drop input[type="checkbox"]').prop('disabled', true);
                    }, 100);
                    setTimeout(function() {
                        $('#kitchen_view_edit_weekly + .ms-parent .ms-drop input[type="checkbox"]').prop('disabled', true);
                    }, 100);




                    //options
                    var options = obj[0]['options'];
                    var selectedOptions = options.split('|').map(item => item.trim());
                    var displayText = selectedOptions.join(' | ');
                    $('#add_options_data_view_weekly').multipleSelect('setSelects', selectedOptions);
                    $('#options_daily_data_weekly_delete').multipleSelect('setSelects', selectedOptions);
                    $('#add_options_data_edit_weekly').multipleSelect('setSelects', selectedOptions);



                    //kitchen
                    var user_id = obj[0]['user_id'];
                    var userIdsData = user_id.split(','); // ["1", "2", "3", "4"]
                    // console.log(userIdsData);

                    $('#user_id_weekly_view').multipleSelect('setSelects', userIdsData);
                    $('#user_id_weekly_edit').multipleSelect('setSelects', userIdsData);
                    $('#user_id_weekly_delete').multipleSelect('setSelects', userIdsData);

                    // setTimeout(function() {
                    //     $('#user_name_daily__dataview input[type="checkbox"]').prop('disabled', true);
                    //     $('#user_name_daily__dataedit input[type="checkbox"]').prop('disabled', true);
                    //     $('#user_name_daily_datadelete input[type="checkbox"]').prop('disabled', true);
                    // }, 100);

                    setTimeout(function() {
                        $('#user_id_weekly_view + .ms-parent .ms-drop input[type="checkbox"]').prop('disabled', true);
                    }, 100);
                    // setTimeout(function() {
                    //     $('#user_name_daily__dataedit + .ms-parent .ms-drop input[type="checkbox"]').prop('disabled', true);
                    // }, 100);
                    setTimeout(function() {
                        $('#user_id_weekly_delete + .ms-parent .ms-drop input[type="checkbox"]').prop('disabled', true);
                    }, 100);


                    $('#category_view_weekly_data').val(obj[0]['masterCategoryName']);
                    $('#category_edit_weekly_data').val(obj[0]['masterCategoryName']);
                    $('#category_delete_weekly_data').val(obj[0]['masterCategoryName']);



                    $('#operation_type_weekly_view').val(obj[0]['operation_type']);
                    $('#operation_type_weekly_edit').val(obj[0]['operation_type']);
                    $('#operation_type_weekly_delete').val(obj[0]['operation_type']);




                    let particularsSet = new Set();
                    obj.forEach(item => {
                        if (item.particulars) {
                            particularsSet.add(item.particulars.trim());
                        }
                    });

                    $('#operations_holder_weekly_view').html('');
                    $('#operations_holder_weekly_edit').html('');
                    $('#operations_holder_weekly_delete').html('');

                    // const firstInput = $('#operations_holder_daily_data_view .plc_holder').first();
                    // if (firstInput.val().trim() === '') {
                    //     firstInput.closest('.operation-row_daily_view').remove();
                    // }

                    particularsSet.forEach(particular => {
                        const newInputHtml = `
                            <div class="row operation-row_weekly_view mt-1 mb-2">
                                <div class="col-md-11">
                                    <div class="form-floating">
                                        <input type="text" class="form-control plc_holder" name="ingr_name[]" value="${particular}" readonly>
                                        <label>Checklist Point</label>
                                    </div>
                                </div>
                            </div>
                        `;
                        $('#operations_holder_weekly_view').append(newInputHtml);
                    });




                    // const firstInputView = $('#operations_holder_daily_edit .plc_holder').first();
                    // if (firstInputView.val().trim() === '') {
                    //     firstInputView.closest('.operation-row_daily_data').remove();
                    // }

                    particularsSet.forEach(particular => {
                        const newInputHtml = `
                            <div class="row operation-row_weekly_data mt-1 mb-2">
                             <input type="hidden" class="form-control plc_holder" id="hidden_particular_weekly_data" name="hidden_particular_weekly_data[]" value="${particular}">
                                <div class="col-md-11">
                                    <div class="form-floating">
                                        <input type="text" class="form-control plc_holder" name="ingr_weekly_dataedit" value="${particular}">
                                        <label>Checklist Point</label>
                                         <p id="ErrorID_2_weekly_edit" style="color:red"></p>
                                    </div>
                                </div>
                                 <div class="col-md-1 mt-2 mb-2">
                                
                            </div>
                        `;
                        $('#operations_holder_weekly_edit').append(newInputHtml);
                    });







                    // const firstInputDelete = $('#operations_holder_daily_delete .plc_holder').first();
                    // if (firstInputDelete.val().trim() === '') {
                    //     firstInputDelete.closest('.operation-row_daily_delete_data').remove();
                    // }

                    particularsSet.forEach(particular => {
                        const newInputHtml = `
                            <div class="row operation-row_weekly_delete_data mt-1 mb-2">
                                <div class="col-md-11">
                                    <div class="form-floating">
                                        <input type="text" class="form-control plc_holder" name="ingr_weekly_delete_data[]" value="${particular}" readonly>
                                        <label>Checklist Point</label>
                                    </div>
                                </div>
                               
                            </div>
                        `;
                        $('#operations_holder_weekly_delete').append(newInputHtml);
                    });


                    $('#timeTable_weekly_view tbody').empty();
                    $('#timeTable_weekly tbody').empty();

                    const seen = new Set();

                    obj.forEach((item, index) => {
                        const weekknumber = item['weeknumber'];
                        const weekdays = item['weekdays'];
                        const tr_operation_start_date = item['tr_operation_start_date'];
                        const tr_operation_end_date = item['tr_operation_end_date'];

                        const uniqueKey = `${weekknumber}-${weekdays}`;

                        if (!seen.has(uniqueKey)) {
                            seen.add(uniqueKey);
                            const uniqueId = 'row_' + index;

                            // Table 1: Readonly View Table
                            $('#timeTable_weekly_view tbody').append(`
                                            <tr id="${uniqueId}_view" data-index="${index}">
                                                <td><input class="form-control" style="width:50px" type="text" name="weeknum[]" value="${weekknumber}" readonly /></td>
                                                <td><input class="form-control" style="width:80px" type="text" name="weekday[]" value="${weekdays}" readonly /></td>
                                                <td><input class="form-control" style="width:100px" type="text" name="start_time[]" value="${tr_operation_start_date}" readonly /></td>
                                                <td><input class="form-control" style="width:100px" type="text" name="end_time[]" value="${tr_operation_end_date}" readonly /></td>

                                            </tr>
                                        `);

                            // Table 2: Editable Input Table
                            $('#timeTable_weekly tbody').append(`
                                    <tr id="${uniqueId}_edit" data-index="${index}">
                                        <td><input class="form-control" style="width:50px" type="text" name="weeknum[]" value="${weekknumber}" readonly /></td>
                                        <td><input class="form-control" style="width:80px" type="text" name="weekday[]" value="${weekdays}" readonly /></td>
                                        <td><input class="form-control timepicker" style="width:100px" type="text" name="start_time[]" value="${tr_operation_start_date}" /></td>
                                        <td><input class="form-control timepicker" style="width:100px" type="text" name="end_time[]" value="${tr_operation_end_date}" /></td>

                                    </tr>
                                `);
                        }
                    });

                    // Re-initialize timepickers after appending rows
                    $('.timepicker').mdtimepicker();


                    $('#cal_holder_view_weekly').show();

                    // $('.hide_calder_view').show();
                    $('#cal_holder_edit_weekly').css('display', 'block');
                    $('#operation_type_weekly_delete').css('display', 'block');


                    generateCalendarWithData(obj, 'cal_holder_view_weekly', false);
                    generateCalendarWithData(obj, 'cal_holder_edit_weekly', true);


                    // console.log("Showing cal_holder_view_weekly");
                    $("#cal_holder_view_weekly").show();
                    $('#cal_holder_edit_weekly').show();
                    // console.log($("#cal_holder_view_weekly").css("display"));
                }
            });
        }


        function generateCalendarWithData(ajaxData, holderId, isEditable = false) {
            const days = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
            const $holder = $(`#${holderId}`);

            $holder.html('');

            const groupedByWeek = {};

            ajaxData.forEach(entry => {
                const weekNo = entry.weeknumber || 1;
                const weekday = entry.weekdays?.trim();

                if (!weekday) return;

                if (!groupedByWeek[weekNo]) {
                    groupedByWeek[weekNo] = new Set();
                }

                groupedByWeek[weekNo].add(weekday);
            });

            Object.keys(groupedByWeek).forEach(weekNo => {
                const selectedDays = groupedByWeek[weekNo];
                const $calendar = $('<div class="calendar mb-3"></div>');

                days.forEach(day => {
                    const isSelected = selectedDays.has(day);
                    const $btn = $(`
                <button type="button"
                        class="btn btn-sm day-btn ${isSelected ? 'btn-success' : 'btn-outline-secondary'}"
                        style="margin: 3px;"
                        ${isEditable ? '' : 'disabled'}>
                        ${day}
                </button>
            `);
                    $calendar.append($btn);
                });

                $holder.append($calendar);
            });

            $holder.show();
        }

        $(document).on('click', '.remove-btn-disabled', function(e) {
            e.preventDefault();
            e.stopPropagation();

        });
        $('button[data-bs-toggle="tab"]').on('shown.bs.tab', function () {
    $.fn.dataTable.tables({ visible: true, api: true })
        .columns.adjust()
        .draw();
});
    </script>
    <!--  -->
    <link rel='stylesheet' href='https://harvesthq.github.io/chosen/chosen.css'>
    <script src='//harvesthq.github.io/chosen/chosen.jquery.js'></script>

</body>

</html>