@include('layouts.headElement')
@include('layouts.headerNormal')
@include('layouts.sidebarV2')
<!-- <link rel="stylesheet" type="text/css" href="{{asset('jquery.dataTables.min')}}" /> -->



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

    .chosen-choices {
        border: 1px solid #dee2e6 !important;
        border-radius: 5px !important;
    }
    

    /* ==== multiselect styling start ==== */
    /* .ms-drop.bottom {
        left: 122px !important;
    } */
    .ms-choice>span.placeholder {
        color: #fffbfb !important;
    }

    .ms-choice span {
        display: inline-block;
        margin-top: 26px !important;
    }

    .ms-choice {
        border: none !important;
    }

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

    .icon-caret {
        display: none;
    }


    /* ==== multiselect styling end ==== */


    /* #myTabjustifiedContent {
        padding: 30px 0px 0px 0px;
        margin: -25px 0px 0px 0px !important;
    } */

    #submit_add {
        background-color: #BA434D;
        outline: none;
        border: none;
    }


    /* .submit-reset-container {
        margin: -20px 0px 0px 0px;
    } */


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

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

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

    #cal_holder {
        /* min-height: 300px; */
    }

    .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 */
        }
    }


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

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

    @media screen and (max-width: 768px) {

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

    @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;">App 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="card form-container p-0" id="desktop_view">
                <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 " id="myTabjustifiedContent">
                        <div class="tab-pane fade show active" id="home-justified" role="tabpanel"
                            aria-labelledby="home-tab">
                            <div class="card p-0" style="border:none">
                                <div class="card-body p-0">
                                    <!-- 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="form-select" id="kitchen" name="kitchen" onchange="OutletChange()">
                                                        <option value="" selected disabled>Select Kitchen</option>
                                                        @foreach ($kitchens as $kitchen)
                                                        <option value="{{$kitchen->id}}">{{$kitchen->kitchen_name}}</option>
                                                        @endforeach
                                                    </select>
                                                    <label for="floatingName">Kitchen</label>
                                                    <p id="kitchen_Error_01" style="color:red"></p>
                                                </div>
                                            </div>

                                            <div class="col-md-3">
                                                <div class="form-floating">
                                                    <select class="form-select chosen-select" id="user_id" name="user_id[]" multiple="true">

                                                    </select>
                                                    <p id="users_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  form-select" 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" id="multiselect_options">Options</span></label>
                                                    <p id="ErrorID_2" style="color:red"></p>
                                                </div>
                                            </div>


                                            <div id="operations_holder">
                                                <div class="row operation-row  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>
                                                            <!-- <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">Opertaion 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">
                                                    <input type="text" class="form-control" id="d_start_time" name="d_start_time"
                                                        placeholder="" autocomplete="off">
                                                    <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">
                                                    <input type="text" class="form-control" id="d_end_time" name="d_end_time"
                                                        placeholder="" autocomplete="off">
                                                    <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>
                                            <div class="col-md-6">
                                                <div class="row">
                                                    <div class="col-md-5">
                                                        <div class="time-popup" id="timePopup">
                                                            <label>Start Time: <input type="text" id="startTime" class="form-control" /></label>
                                                            <label>End Time: <input type="text" id="endTime" class="form-control" /></label>
                                                            <button type="button" class="btn btn-success" id="saveTime">Save</button>
                                                        </div>
                                                    </div>
                                                    <div class="col-md-6">
                                                    </div>
                                                </div>
                                            </div>



                                            <div class="col-md-8" 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 submit-reset-container my-3">
                                                <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>

                </div>
            </div>
            <!-- REPORTS STARTS FROM HERE -->


            <div class="card report-container p-2">
                <div class="card-body p-1">
                    <h5 class="card-title" style="padding: 10px 4px;">Report</h5>

                    <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</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</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</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" aria-controls="profile"
                                aria-selected="false"> Category</button>
                        </li>



                    </ul>
                    <div class="tab-content " 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">Particulars/Activity</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">Particulars/Activity</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-body 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">Particulars/Activity</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 p-5" id="ExtralargeModal" tabindex="-1">
                <div class="modal-dialog modal-xl modal-dialog-centered">
                    <div class="modal-content">

                        <!-- <div class="modal-body"> -->
                        <!-- View Form in Edit option -->
                        <div class="card p-2">
                            <!-- <div class="card-body"> -->
                            <!-- <h5 class="card-title">Bordered Tabs Justified</h5> -->

                            <!-- Bordered Tabs Justified -->
                            <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" data-bs-toggle="tab"
                                        data-bs-target="#bordered-justified-home" 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" data-bs-toggle="tab"
                                        data-bs-target="#bordered-justified-new" 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" data-bs-toggle="tab"
                                        data-bs-target="#bordered-justified-contact" 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 class="tab-content" id="borderedTabJustifiedContent">
                                <div class="tab-pane fade show active" id="bordered-justified-home" role="tabpanel"
                                    aria-labelledby="home-tab">
                                    <div class="card p-0" style="border:none">
                                        <!-- <div class="card-body"> -->
                                        <!-- <h5 class="card-title">Assign Area Manager</h5> -->
                                        <!-- Default Tabs -->
                                        <ul class="nav nav-tabs d-flex" id="myTabjustified" role="tablist" style="border:none"></ul>
                                        <div class="tab-content" id="myTabjustifiedContent">
                                            <div class="tab-pane fade show active" id="home-justified" role="tabpanel"
                                                aria-labelledby="home-tab">
                                                <div class="card-body p-1">
                                                    <!-- Floating Labels Form -->
                                                    <form class="row g-1" id="ingrView">
                                                        <input type="hidden" id="view_id" name="view_id">

                                                        <div class="col-md-4 ">
                                                            <div class="form-floating my-2 ">
                                                                <input type="text" class="form-control"
                                                                    id="view_kitchen" name="view_kitchen"
                                                                    placeholder="Category" autocomplete="off" readonly>
                                                                <label for="revision">Kitchen Name</label>
                                                            </div>
                                                        </div>

                                                        <div class="col-md-4">
                                                            <div class="form-floating my-2">
                                                                <input type="text" class="form-control"
                                                                    id="view_category" name="view_category"
                                                                    placeholder="Category" autocomplete="off" readonly>
                                                                <label for="revision">Category</label>
                                                            </div>
                                                        </div>


                                                        <div class="col-md-4">
                                                            <div class="form-floating my-2">
                                                                <input type="text" class="form-control"
                                                                    id="view_add_options" name="view_add_options"
                                                                    placeholder="Your Name" autocomplete="off" readonly>
                                                                <label for="revision">Option to Add</label>
                                                            </div>
                                                        </div>
                                                        <div class="col-md-4">
                                                            <div class="form-floating my-2">
                                                                <select class="form-select" id="view_operation_type" name="view_operation_type" aria-label="" disabled
                                                                    autocomplete="off" required>
                                                                    <option value="">select</option>
                                                                    <option value="1">Daily</option>
                                                                    <option value="2">Weekly</option>
                                                                    <option value="3">Monthly</option>
                                                                </select>
                                                                <label for="view_operation_type">Opertaion Type</span></label>
                                                            </div>
                                                        </div>
                                                        <div class="col-md-4">
                                                            <div class="form-floating my-2">
                                                                <input type="text" class="form-control"
                                                                    id="view_week_day" name="view_week_day"
                                                                    placeholder="week day" autocomplete="off" readonly>
                                                                <label for="view_week_day">Week Day</label>
                                                            </div>
                                                        </div>

                                                        <div class="col-md-4">
                                                            <div class="form-floating my-2">
                                                                <input type="text" class="form-control"
                                                                    id="view_start_time" name="view_start_time"
                                                                    placeholder="Date" autocomplete="off" readonly>
                                                                <label for="revision">Start Time</label>
                                                            </div>
                                                        </div>
                                                        <div class="col-md-4">
                                                            <div class="form-floating my-2">
                                                                <input type="text" class="form-control"
                                                                    id="view_end_time" name="view_end_time"
                                                                    placeholder="Date" autocomplete="off" readonly>
                                                                <label for="revision">End Time</label>
                                                            </div>
                                                        </div>



                                                        <div class="col-md-12">
                                                            <div class="form-floating my-2">
                                                                <input type="text" class="form-control"
                                                                    id="ingr_name_view" name="ingr_name_view"
                                                                    placeholder="Your Name" autocomplete="off" readonly>
                                                                <label for="revision">Particulars/Activity</label>
                                                            </div>
                                                        </div>

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

                                                </div>
                                            </div>

                                        </div>

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



                                        <form class="row g-1" id="ingrEdit">
                                            <input type="hidden" id="edit_id" name="edit_id">
                                            <input type="hidden" id="" name="_token" value="{{ csrf_token()}}">
                                            <div class="col-md-4">
                                                <div class="form-floating">
                                                    <select class="form-select" id="edit_kitchen" name="edit_kitchen" disabled
                                                        aria-label="" autocomplete="off" required>
                                                        @foreach ($kitchens as $kitchen)
                                                        <option value="{{$kitchen->id}}">{{$kitchen->kitchen_name}}</option>
                                                        @endforeach
                                                    </select>
                                                    <label for="floatingName">Kitchen Name</span></label>
                                                    <p id="Error_id_kitchen_name" style="color:red"></p>
                                                </div>
                                            </div>


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

                                                    <select class="form-select" id="edit_category" name="edit_category"
                                                        aria-label="" autocomplete="off" required>

                                                    </select>

                                                    <label for="floatingName">Category</span></label>
                                                    <p id="ErrorID_34" style="color:red"></p>
                                                </div>
                                            </div>


                                            <div class="col-md-4">
                                                <div class="form-floating">
                                                    <select class="selUser form-select" id="edit_add_options"
                                                        data-placeholder="Select Option" name="edit_add_option"
                                                        aria-label="" multiple="true">
                                                        <option value="YES">YES</option>
                                                        <option value="NO">NO</option>
                                                        <option value="Camera">CAMERA</option>
                                                        <option value="Text Box">TEXT</option>
                                                    </select>
                                                    <p id="ErrorID_22" style="color:red"></p>
                                                </div>
                                            </div>

                                            {{-- <div class="col-md-4">
                                        <div class="form-floating">
                                            <input type="text" class="form-control"
                                                id="edit_date_date" name="edit_date_date"
                                                placeholder="Date" autocomplete="off" readonly>
                                            <label for="edit_date_date">Date</label>
                                            <p id="edit_date_error" style="color:red"></p>
                                        </div>
                                    </div> --}}
                                            <div class="col-md-4">
                                                <div class="form-floating">
                                                    <input type="text" class="form-control"
                                                        id="edit_start_time" name="edit_start_time"
                                                        placeholder="start time" autocomplete="off" readonly>
                                                    <label for="edit_start_time">Start Time</label>
                                                    <p id="edit_start_time_error" style="color:red"></p>
                                                </div>
                                            </div>
                                            <div class="col-md-4">
                                                <div class="form-floating">
                                                    <input type="text" class="form-control"
                                                        id="edit_end_time" name="edit_end_time"
                                                        placeholder="end Time" autocomplete="off" readonly>
                                                    <label for="edit_end_time_error">End Time</label>
                                                </div>
                                            </div>


                                            <div class="col-md-12">
                                                <div class="form-floating">
                                                    <input type="text" class="form-control" id="ingr_name_edit"
                                                        name="ingr_name_edit" placeholder="Your Name" autocomplete="off">
                                                    <label for="revision">Particulars/Activity</label>
                                                    <p id="ErrorID_11" style="color:red"></p>
                                                </div>
                                            </div>


                                            <div class="col-md-6">
                                                <div class="form-floating">
                                                    <input type="text" class="form-control" id="updatedBy" name="updatedBy"
                                                        value="{{$userInfo[0]->first_name.' '.$userInfo[0]->last_name}}"
                                                        readonly autocomplete="off" placeholder="Your Name" required="">
                                                    <label for="floatingName">Updated By</span></label>
                                                </div>
                                            </div>
                                            <div class="col-md-6">
                                                <div class="form-floating mb-6">
                                                    <input type="text" class="form-control" id="update_reason"
                                                        name="update_reason" autocomplete="off" placeholder="Your Name"
                                                        required="">
                                                    <label for="floatingName">Reason</label>
                                                    <p id="ErrorID_33" style="color:red"></p>
                                                </div>
                                            </div>

                                            <div class="text-center">
                                                <button type="button" onclick="edit_ingr();" id="submit_edit"
                                                    class="btn update-btn">Update</button>
                                                <button type="button" onclick="reset_data()"
                                                    class="btn reset-btn">Reset</button>
                                                <input type="hidden" value="" id="edit_reset_id">
                                            </div>
                                        </form>
                                    </div>
                                </div>
                                <div class="tab-pane fade" id="bordered-justified-contact" role="tabpanel"
                                    aria-labelledby="contact-tab">
                                    <div class="card-body p-2">
                                        <form class="row g-1" id="ingrDelete">
                                            <input type="hidden" id="" name="_token" value="{{ csrf_token()}}">
                                            <input type="hidden" id="delete_id" name="delete_id">



                                            <div class="col-md-4">
                                                <div class="form-floating my-2">
                                                    <input type="text" class="form-control" id="delete_kitchen"
                                                        name="delete_kitchen" placeholder="Kitchen Name" autocomplete="off"
                                                        readonly>
                                                    <label for="revision">Kitchen Name</label>
                                                </div>
                                            </div>


                                            <div class="col-md-4">
                                                <div class="form-floating my-2">
                                                    <input type="text" class="form-control" id="delete_category"
                                                        name="delete_category" placeholder="Category" autocomplete="off"
                                                        readonly>
                                                    <label for="revision">Category</label>
                                                </div>
                                            </div>

                                            <div class="col-md-4">
                                                <div class="form-floating my-2">
                                                    <input type="text" class="form-control" id="delete_add_options"
                                                        name="delete_add_options" placeholder="Your Name" autocomplete="off"
                                                        readonly>
                                                    <label for="revision">Option to Add</label>
                                                </div>
                                            </div>

                                            <div class="col-md-4">
                                                <div class="form-floating my-2">
                                                    <select class="form-select" id="delete_operation_type" name="delete_operation_type" aria-label="" disabled
                                                        autocomplete="off" required>
                                                        <option value="">select</option>
                                                        <option value="1">Daily</option>
                                                        <option value="2">Weekly</option>
                                                        <option value="3">Monthly</option>
                                                    </select>
                                                    <label for="delete_operation_type">Opertaion Type</span></label>
                                                </div>
                                            </div>
                                            <div class="col-md-4">
                                                <div class="form-floating my-2">
                                                    <input type="text" class="form-control"
                                                        id="delete_week_day" name="delete_week_day"
                                                        placeholder="week day" autocomplete="off" readonly>
                                                    <label for="delete_week_day">Week Day</label>
                                                </div>
                                            </div>
                                            <div class="col-md-4">
                                                <div class="form-floating my-2">
                                                    <input type="text" class="form-control"
                                                        id="delete_start_time" name="delete_start_time"
                                                        placeholder="Date" autocomplete="off" readonly>
                                                    <label for="revision">Start Time</label>
                                                </div>
                                            </div>
                                            <div class="col-md-4">
                                                <div class="form-floating my-2">
                                                    <input type="text" class="form-control"
                                                        id="delete_end_time" name="delete_end_time"
                                                        placeholder="Date" autocomplete="off" readonly>
                                                    <label for="revision">End Time</label>
                                                </div>
                                            </div>


                                            <div class="col-md-12">
                                                <div class="form-floating my-2">
                                                    <input type="text" class="form-control" id="ingr_name_delete"
                                                        name="ingr_name_delete" placeholder="Your Name" autocomplete="off"
                                                        readonly>
                                                    <label for="revision">Particulars/Activity</label>
                                                </div>
                                            </div>


                                            <div class="col-md-6">
                                                <div class="form-floating my-2">
                                                    <input type="text" class="form-control" id="deletedBy"
                                                        value="{{$userInfo[0]->first_name.' '.$userInfo[0]->last_name}}"
                                                        readonly name="deletedBy" autocomplete="off" placeholder="Your Name"
                                                        required="">
                                                    <label for="floatingName">Deleted By</span></label>
                                                </div>
                                            </div>

                                            <div class="col-md-6">
                                                <div class="form-floating my-2">
                                                    <input type="text" class="form-control" id="delete_reason"
                                                        name="delete_reason" autocomplete="off" placeholder="Your Name"
                                                        required="">
                                                    <label for="floatingName">Reason</span></label>
                                                    <p id="ErrorID_44" style="color:red"></p>
                                                </div>
                                            </div>


                                            <div class="text-center">
                                                <button type="button" onclick="delete_ingr();" id="submit_delete"
                                                    class="btn delete-btn">Delete</button>
                                            </div>
                                        </form><!-- End floating Labels Form -->
                                    </div>
                                </div>
                            </div><!-- End Bordered Tabs Justified -->
                        </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">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" 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">
                    <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 pt-2" 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>
    </main>

    @include('layouts.footer');


    <link rel="stylesheet" href="//cdn.datatables.net/1.12.1/css/jquery.dataTables.min.css">
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <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>
    <link rel="stylesheet" href="\assets\js\multi-select-css.css">
    <script src="\assets\js\multi-select.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("Start time must be earlier than 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("End time must be later than 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);
            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() {
            for (let i = 1; i < 6; i++) {
                $(`#calendar${i}`).html('');
            }
            $("#d-start").hide()
            $("#d-end").hide()
            $("#timeTable tbody").html("");
            let operation = $("#operation_type").val()
            let weekcount = 0;
            $("#table-container").hide()
            $("#cal_holder").hide()

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

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


            if (operation == 2) {
                weekcount = 1
                $("#calendar1").show()
                $("#table-container").show()
                $("#cal_holder").show()
                $(".hide_calendar").show();
            } else if (operation == 3) {
                weekcount = 5
                $("#table-container").show()
                $("#cal_holder").show()
                $("#calendar1").show()
                $("#calendar2").show()
                $("#calendar3").show()
                $("#calendar4").show()
                $("#calendar5").show()
                $(".hide_calendar").show();
            } else if (operation == 1) {
                $("#d-start").show()
                $("#d-end").show()
                $(".hide_calendar").hide();
            }
            for (let week = 0; week < weekcount; week++) {
                generateCalendar('calendar' + (week + 1), week);
            }
        }

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

            $('#startTime').val(dayTimes[dayIndex]?.start || '');
            $('#endTime').val(dayTimes[dayIndex]?.end || '');
        });


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

            const dayIndex = currentDayElement.data('day-index');
            const start = $('#startTime').val();
            const end = $('#endTime').val();

            if (start && end) {
                const week = Math.floor(dayIndex / 7) + 1;
                const weekday = days[dayIndex % 7];

                // Optional: store multiple times per day
                if (!dayTimes[dayIndex]) {
                    dayTimes[dayIndex] = [];
                }
                dayTimes[dayIndex].push({
                    start,
                    end
                });

                currentDayElement.addClass('selected');
                // Use unique ID or allow duplicates
                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>
                `);

                $('#timePopup').hide();
            } else {
                alert("Please select both start and end times.");
            }
        });


        $(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) {
            $("#pageloader").fadeOut();
            $(".chosen-select").chosen();
            $(".sd-CustomSelect").multipleSelect({
                selectAll: true,
                filter: true,
                minimumCountSelected: 1,
                onOptgroupClick: function(view) {
                    $(view).parents("label").addClass("selected-optgroup");
                }
            });
            $(".sd-CustomSelect").css({
                display: "block",
                visibility: "visible"
            });

            $("#cal_holder").hide()

            const dStartTimePicker = flatpickr("#d_start_time", {
                enableTime: true,
                noCalendar: true,
                dateFormat: "H:i",
                time_24hr: true,
                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: true,
                noCalendar: true,
                dateFormat: "H:i",
                time_24hr: true,
                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;
                }
            }

            $('#ingrAdd').validate({
                rules: {
                    kitchen: "required",
                    category: "required",
                    add_options: "required",
                    operation_type: "required",
                    users: "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.",
                    users: "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") == "users") {
                        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);
                    }
                },

            });


            $('#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();
        });


        $('#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('Data Inserted Successfully ');
                            $('#category_name').val('');
                            $(".btn-close").click();
                            get_category_drop_down();
                        } else {
                            alert('Data Already Exist');
                            $('#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("Select Kitchens")
                    return;
                }
                if (add_options.length == 0) {
                    alert("Select Options")
                    return;
                }
                if (user_id.length == 0) {
                    alert("Select users")
                    return;
                }
                const allEmpty = [...document.querySelectorAll('.plc_holder')]
                    .every(input => input.value.trim() === '');

                if (allEmpty) {
                    alert("Please add operation");
                    return;
                }

                let operation_type = $("#operation_type").val();
                if (operation_type == 2 || operation_type == 3) {
                    if ($('#timeTable tbody tr').length == 0) {
                        alert("Select Week day and time")
                        return;
                    }
                }
                formData.append('_token', '{{ csrf_token() }}');
                $("#pageloader").fadeIn();
                $.ajax({
                    url: "save_operation_entry",
                    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();
                            // $("#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 <= 5; i++) {
                            //     $(`#calendar${i}`).html('')
                            // }
                            // $("#timeTable tbody").html("");
                            // $("#table-container").hide()
                            // $('#user_id').trigger("chosen:updated");
                            // $("#user_id").val('').trigger("chosen:updated");
                            // $("#d-start").hide()
                            // $("#d-end").hide()
                            reset_main_data();
                            alert("Data Added Successfully");
                        } else {
                            $("#pageloader").fadeOut();
                            alert("Sorry! Un Able to Insert the Data");
                        }
                    },
                    error: function() {}

                });
            }
        }

        function edit_ingr() {
            if ($("#ingrEdit").valid()) {
                // const firstDate = edit_picker.selectedDates[0];
                // let formattedFirstDate = '';

                // if (firstDate) {
                //     const year = firstDate.getFullYear();
                //     const month = String(firstDate.getMonth() + 1).padStart(2, '0');
                //     const day = String(firstDate.getDate()).padStart(2, '0');
                //     formattedFirstDate = `${year}-${month}-${day}`;
                // }
                var data = {};
                data['_token'] = "{{csrf_token()}}";
                data['edit_id'] = $("#edit_id").val();
                data['ingr_name'] = $("#ingr_name_edit").val();
                data['edit_kitchen'] = $("#edit_kitchen").val();
                data['edit_category'] = $("#edit_category").val();
                data['options'] = $("#edit_add_options").val();
                // data['date'] = $("#edit_date_date").val();
                data['start_time'] = $("#edit_start_time").val();
                data['end_time'] = $("#edit_end_time").val();

                //data['ingr_qty'] = $("#ingr_qty_edit").val();
                data['updated_by'] = $("#updatedBy").val();
                data['updated_reason'] = $("#update_reason").val();
                // data['operation_date'] = formattedFirstDate;

                $.ajax({
                    url: "update_operation_entry",
                    type: "POST",
                    data: data,
                    success: function(result) {
                        if (result) {
                            alert("Data Updated Successfully");
                            $(".btn-close").click();
                            $(".nav-link.active").click();
                        } else {
                            alert("Sorry! Data Already Exist");
                        }
                    },
                });
            }
        }

        function delete_ingr() {
            if ($("#ingrDelete").valid()) {
                var data = {};
                data['_token'] = "{{csrf_token()}}";
                data['delete_id'] = $("#delete_id").val();
                data['deleted_by'] = $("#deletedBy").val();
                data['deleted_reason'] = $("#delete_reason").val();
                $.ajax({
                    url: "delete_operation_entry",
                    type: "POST",
                    data: data,
                    success: function(data) {
                        alert("Data Deleted 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'],
                "ajax": {
                    url: "get_category_data", // Ajax request
                    type: "post",
                    data: data,
                },
                language: {
                    search: "_INPUT_",
                    searchPlaceholder: "Search table..."
                },

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



        function load_submit_ingr() {
            let data = {};
            data['_token'] = "{{csrf_token()}}";
            data['operation_type'] = "daily";
            $('#view_addIngr').DataTable().destroy();
            var table = $('#view_addIngr').DataTable({
                "autoWidth": true,
                "ordering": true,
                language: {
                    search: "_INPUT_",
                    searchPlaceholder: "Search table..."
                },
                "order": [0, 'desc'],
                "ajax": {
                    url: "get_app_operation_entries", // Ajax request
                    type: "post",
                    data: data,
                },

                "columns": [

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

                    {
                        "data": "particulars",
                        "title": "Particular/Activity"
                    },
                    {
                        "data": "options",
                        "title": "Added Options"
                    },
                    {
                        "data": "kitchen_name",
                        "title": "Kitchen Name"
                    },
                    {
                        "data": "category_name",
                        "title": "Category"
                    },
                    {
                        "data": "weekday",
                        "title": "Weekday",
                        render: function(data) {
                            return data ?? "Daily"
                        }
                    },
                    {
                        "data": "operation_type",
                        "title": "Operation Type",
                        render: function(data) {
                            if (data == 1) {
                                return "Daily"
                            } else if (data == 2) {
                                return "Weekly"
                            } else if (data == 3) {
                                return "Monthly"
                            } else {
                                return "";
                            }
                        }
                    },
                    {
                        "data": "op_start_time",
                        "title": "Start Time"
                    },
                    {
                        "data": "op_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": "1%",
                        "targets": [1],
                        "className": "dt-center"
                    },
                    {
                        "width": "1%",
                        "targets": [2],
                        "className": "dt-center"
                    },
                    {
                        "width": "1%",
                        "targets": [3],
                        "className": "dt-center"
                    },
                    {
                        "width": "1%",
                        "targets": [4],
                        "className": "dt-center"
                    },
                    {
                        "width": "1%",
                        "targets": [5],
                        "className": "dt-center"
                    },
                    {
                        "width": "1%",
                        "targets": [6],
                        "className": "dt-center"
                    },
                    {
                        "width": "1%",
                        "targets": [7],
                        "className": "dt-center"
                    },
                    {
                        "width": "1%",
                        "targets": [8],
                        "className": "dt-center"
                    },
                    {
                        "width": "1%",
                        "targets": [9],
                        "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()
        }

        function load_submit_ingr2() {
            let data = {};
            data['_token'] = "{{csrf_token()}}";
            data['operation_type'] = "weekly";
            $('#view_addIngr_weekly').DataTable().destroy();
            let table = $('#view_addIngr_weekly').DataTable({
                "autoWidth": true,
                "ordering": true,
                language: {
                    search: "_INPUT_",
                    searchPlaceholder: "Search table..."
                },
                "order": [0, 'desc'],
                "ajax": {
                    url: "get_app_operation_entries", // Ajax request
                    type: "post",
                    data: data,
                },

                "columns": [

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

                    {
                        "data": "particulars",
                        "title": "Particular/Activity"
                    },
                    {
                        "data": "options",
                        "title": "Added Options"
                    },
                    {
                        "data": "kitchen_name",
                        "title": "Kitchen Name"
                    },
                    {
                        "data": "category_name",
                        "title": "Category"
                    },
                    {
                        "data": "weekday",
                        "title": "Weekday",
                        render: function(data) {
                            return data ?? "Daily"
                        }
                    },
                    {
                        "data": "operation_type",
                        "title": "Operation Type",
                        render: function(data) {
                            if (data == 1) {
                                return "Daily"
                            } else if (data == 2) {
                                return "Weekly"
                            } else if (data == 3) {
                                return "Monthly"
                            } else {
                                return "";
                            }
                        }
                    },
                    {
                        "data": "op_start_time",
                        "title": "Start Time"
                    },
                    {
                        "data": "op_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": "1%",
                        "targets": [1],
                        "className": "dt-center"
                    },
                    {
                        "width": "1%",
                        "targets": [2],
                        "className": "dt-center"
                    },
                    {
                        "width": "1%",
                        "targets": [3],
                        "className": "dt-center"
                    },
                    {
                        "width": "1%",
                        "targets": [4],
                        "className": "dt-center"
                    },
                    {
                        "width": "1%",
                        "targets": [5],
                        "className": "dt-center"
                    },
                    {
                        "width": "1%",
                        "targets": [6],
                        "className": "dt-center"
                    },
                    {
                        "width": "1%",
                        "targets": [7],
                        "className": "dt-center"
                    },
                    {
                        "width": "1%",
                        "targets": [8],
                        "className": "dt-center"
                    },
                    {
                        "width": "1%",
                        "targets": [9],
                        "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()
        }

        function load_submit_ingr3() {
            let data = {};
            data['_token'] = "{{csrf_token()}}";
            data['operation_type'] = "monthly";
            $('#view_addIngr_monthly').DataTable().destroy();
            let table = $('#view_addIngr_monthly').DataTable({
                "autoWidth": true,
                "ordering": true,
                language: {
                    search: "_INPUT_",
                    searchPlaceholder: "Search table..."
                },
                "order": [0, 'desc'],
                "ajax": {
                    url: "get_app_operation_entries", // Ajax request
                    type: "post",
                    data: data,
                },

                "columns": [

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

                    {
                        "data": "particulars",
                        "title": "Particular/Activity"
                    },
                    {
                        "data": "options",
                        "title": "Added Options"
                    },
                    {
                        "data": "kitchen_name",
                        "title": "Kitchen Name"
                    },
                    {
                        "data": "category_name",
                        "title": "Category"
                    },
                    {
                        "data": "weekday",
                        "title": "Weekday",
                        render: function(data) {
                            return data ?? "Daily"
                        }
                    },
                    {
                        "data": "operation_type",
                        "title": "Operation Type",
                        render: function(data) {
                            if (data == 1) {
                                return "Daily"
                            } else if (data == 2) {
                                return "Weekly"
                            } else if (data == 3) {
                                return "Monthly"
                            } else {
                                return "";
                            }
                        }
                    },
                    {
                        "data": "op_start_time",
                        "title": "Start Time"
                    },
                    {
                        "data": "op_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": "1%",
                        "targets": [1],
                        "className": "dt-center"
                    },
                    {
                        "width": "1%",
                        "targets": [2],
                        "className": "dt-center"
                    },
                    {
                        "width": "1%",
                        "targets": [3],
                        "className": "dt-center"
                    },
                    {
                        "width": "1%",
                        "targets": [4],
                        "className": "dt-center"
                    },
                    {
                        "width": "1%",
                        "targets": [5],
                        "className": "dt-center"
                    },
                    {
                        "width": "1%",
                        "targets": [6],
                        "className": "dt-center"
                    },
                    {
                        "width": "1%",
                        "targets": [7],
                        "className": "dt-center"
                    },
                    {
                        "width": "1%",
                        "targets": [8],
                        "className": "dt-center"
                    },
                    {
                        "width": "1%",
                        "targets": [9],
                        "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()
        }

        let edit_picker;

        function viewmodel(id) {
            arr['id'] = id;
            $("#edit_reset_id").val(id);
            $("#update_reason").val('');
            $("#delete_reason").val('');
            $.ajax({
                type: 'post',
                url: "get_added_operation_details",
                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 <= 5; i++) {
                $(`#calendar${i}`).html('')
            }
            $("#timeTable tbody").html("");
            $("#table-container").hide()
            $("#calendar1").hide()
            $("#calendar2").hide()
            $("#calendar3").hide()
            $("#calendar4").hide()
            $("#calendar5").hide()
            $("#d-start").hide()
            $("#d-end").hide()
            return false;
        }

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


        // function seluserexe() {
        //     $(".selUser").select2();
        //     $(".selUser3").select2();

        // }



        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(' Data already Exist!');
                            $('#model_edit_category').val('');

                        } else {
                            alert('Updated Successfully');
                            $('#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(" Deleted Successfully");
                        $("#hired_by_name_master_delete")[0].reset();
                        $(".btn-close").click();
                        load_category();
                        load_submit_ingr();
                        get_category_drop_down();
                    }

                }
            })

        }

        function get_category_drop_down() {

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

                    var arr = jQuery.parseJSON(data);

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

                    var s = '<option value="">select</option>';
                    $('#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>');
                        $('#edit_category').append('<option value = "' + val.id + '">' + val.category_name + '</option>');

                    });

                }
            });

        }

        function OutletChange() {
            let data = {};
            data['_token'] = "{{csrf_token()}}";
            data['kitchen'] = $("#kitchen").val();
            $.ajax({
                url: "get_sup_by_kitchen_id",
                type: 'post',
                data: data,
                success: function(data) {
                    let arr = jQuery.parseJSON(data);
                    let users = arr['users'];
                    // $("#user_id").html('');
                    //  $("#user_id").append('<option value="" seleced disabled>Select</option>');
                    // users.forEach(function(val) {
                    //     $("#user_id").append('<option value="' + val.user_id + '">' + val.full_name + '</option>');
                    // })
                    $('#user_id').empty();
                    // let s = '<option value="">select</option>';
                    // $('#user_id').append(s);
                    $.each(users, function(key, val) {
                        $('#user_id').append('<option value = "' + val.user_id + '">' + val.full_name + '</option>');
                    });
                    $('#user_id').trigger("chosen:updated");
                }
            })
        }
    </script>
    <!--  -->
    <link rel='stylesheet' href='https://harvesthq.github.io/chosen/chosen.css'>
    <script src='//harvesthq.github.io/chosen/chosen.jquery.js'></script>

</body>

</html>