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

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

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

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



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





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

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

    .ms-drop {
        z-index: 100 !important;
        /* Make sure it's higher than .card */
    }

    .ms-parent {
        z-index: 100 !important;
    }

    #header {
        z-index: 1000;
    }

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

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


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

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

    .submit-btn {
        border: none;
    }


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

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

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


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


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


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


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

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


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


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


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



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

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

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

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

    #kitchen_edit_chosen {
        width: 100% !important;
    }

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

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

    .button-adjust1 {
        float: right;
        margin-top: 1%;
        background-color: #BA434D;
        outline: none;
        border: none;
    }

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

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

    }

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

        /* width: 353px; */

    }

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

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

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

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

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

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

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

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

    #saveTime {
        margin-top: 25px;
    }

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

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

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


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

    #pageloader img {
        left: 60%;
        margin-left: -90px;
        margin-top: -32px;
        position: absolute;
        top: 40%;
        height: 150px;
        border: black;
        border-style: double;
        background-color: antiquewhite;
        border-radius: 20px;
    }

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



    @media screen and (max-width: 600px) {
        #pageloader img {
            left: 50%;
            margin-left: -90px;
            margin-top: -32px;
            position: absolute;
            top: 50%;
            height: 150px;
            border: black;
            border-style: double;
            background-color: antiquewhite;
            border-radius: 20px;
        }


    }

    @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" id="page_header_container">
                <div class="card-body p-1">
                    <div class="row">
                        <div class="col-md-8">
                            <h5 class="card-title">Assign Users</h5>
                        </div>
                        <div class="col-sm-4"> <button type="button" class="btn btn-primary button-adjust"
                            data-bs-toggle="modal" data-bs-target="#verticalycentered">Add Users</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"> </ul> -->
                    <div class="tab-content pt-1" 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">
                                    <form class="row g-3 pt-3" id="assign_users_form" method="POST">
                                        <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">
                                                    <option value="" disabled selected>Select</option>
                                                    @foreach ($kitchens as $kitchen)
                                                    <option value="{{$kitchen->id}}">{{$kitchen->kitchen_name}}</option>
                                                    @endforeach
                                                </select>
                                                <label for="floatingName" id="">Kitchens</label>
                                                <p id="kitchen_Error_01" style="color:red"></p>
                                            </div>
                                        </div>
                                        <div class="col-md-3">
                                            <div class="form-floating">
                                                <select class="sd-CustomSelect" id="prepared_by" name="prepared_by[]"
                                                    onchange="prepbyChange()" multiple>

                                                </select>
                                                <label for="floatingName" id="multiselect_label">Users</label>
                                                <p id="prepared_by_error" style="color:red"></p>
                                            </div>
                                        </div>

                                        <div class="text-center">
                                            <button type="button" onclick="assign_users();" id="submit_add"
                                                class="btn btn-primary">Submit</button>
                                            <button type="button" onclick="reset_main_data();" id=""
                                                class="btn btn-primary reset-btn">Reset</button>
                                        </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;">Assigned Users</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"
                                data-bs-target="#bordered-home" type="button" role="tab" aria-controls="home"
                                aria-selected="true">Assigned Users List</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">Users</button>
                        </li>


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

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

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

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


                                                </tr>
                                            </thead>
                                        </table>
                                        <!-- End Table with stripped rows -->

                                    </div>
                                </div>

                            </div>
                        </div>

                    </div>

                </div>
            </div>

            <div class="modal fade" id="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">
                                        <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">
                                                        <!-- Floating Labels Form -->
                                                        <form class="row" id="ingrView">
                                                            <input type="hidden" id="view_id" name="view_id">

                                                            <div class="col-md-4">
                                                                <div class="form-floating">
                                                                    <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">
                                                                    <select class="sd-CustomSelect_2" id="view_users" name="view_users[]" multiple>


                                                                    </select>

                                                                    <label for="floatingName">Users</span></label>
                                                                    <p id="view_error_users" style="color:red"></p>
                                                                </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-3 pt-3" id="update_assigned_users_data">
                                            <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">
                                                    <input type="text" class="form-control" id="edit_kitchen"
                                                        name="edit_kitchen" placeholder="Kitchen Name" autocomplete="off"
                                                        readonly>

                                                    <label for="revision">Kitchen Name</label>
                                                    <p id="edit_kitcehn_error" style="color:red"></p>
                                                </div>
                                            </div>



                                            <div class="col-md-4">
                                                <div class="form-floating">
                                                    <select class="sd-CustomSelect_2" id="edit_users" name="edit_users[]" multiple>


                                                    </select>

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

                                            <div class="text-center">
                                                <button type="button" onclick="update_users_assigned();" id="submit_edit"
                                                    class="btn btn-primary submit-btn">Update</button>
                                                <button type="button" onclick="reset_data()"
                                                    class="btn btn-primary 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">
                                        <!-- Floating Labels Form -->
                                        <form class="row g-3 pt-3" 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">
                                                    <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">
                                                    <select class="sd-CustomSelect_2" id="delete_users" name="delete_users[]" multiple>


                                                    </select>

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

                                            <div class="text-center">
                                                <button type="button" onclick="delete_ingr();" id="submit_delete"
                                                    class="btn btn-danger">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">Assigned Users</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="card-body p-1">
                                            <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_user_name"
                                                                name="model_user_name" placeholder="From Date" required=""
                                                                readonly>
                                                            <label for="floatingEmail">User name
                                                            </label>
                                                            <p id="error_hired_name_view"></p>

                                                        </div>




                                                    </div>


                                                </form>
                                            </div>



                                        </div>



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

                                            <div class="row">

                                                <form class="row" id="user_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_user_name"
                                                                name="model_edit_user_name" autocomplete="off"
                                                                placeholder="From Date" required="">
                                                            <label for="floatingEmail">User name
                                                            </label>

                                                            <p id="error_model_edit_user_name" style="color:red"></p>

                                                        </div>
                                                    </div>

                                                    <div class="text-center">
                                                        <button type="submit" class="btn btn-primary submit-btn">Update</button>
                                                        <button type="reset" onclick="reset_user_name_update();"
                                                            class="btn btn-primary reset-btn">Reset</button>
                                                        <input type="hidden" id="reset_ctg_name" name="reset_ctg_name">
                                                    </div>


                                                </form>

                                            </div>
                                        </div>

                                        </form>

                                    </div>
                                    <div class="tab-pane fade" id="bordered-storedelete11-hired" role="tabpanel"
                                        aria-labelledby="storedelete-tab-hired">

                                        <div class="card-body p-2">
                                            <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">User name
                                                            </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 btn-danger">Delete</button>

                                                    </div>
                                                </form>
                                            </div>
                                        </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">Add New Users</h5>
                            <button type="button" class="btn-close" data-bs-dismiss="modal" id="add_cat"
                                aria-label="Close"></button>
                        </div>
                        <div class="modal-body">

                            <!-- Floating Labels Form -->
                            <form class="row g-3" id="user_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="user_name" name="user_name"
                                            placeholder="Your Name" autocomplete="off">
                                        <label for="revision">User Name</label>
                                        <p id="error_user_name" style="color:red"></p>

                                    </div>
                                </div>
                                <div class="text-center">
                                    <button type="submit" class="btn btn-primary" style="background-color: #BA434D;outline: none;border: none;" 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="\assets\js\multi-select.js"></script>
    <link rel="stylesheet" href="\assets\js\multi-select-css.css">
    <script>
        var data = {};
        var arr = {};
        data['_token'] = "{{csrf_token()}}";
        arr['_token'] = "{{csrf_token()}}";

        $('.category_table').hide();


        // function reload() {
        //     location.reload();
        // }
        // SUBMIT HANDLER FUNCTION
        $(document).ready(function(e) {

            $(".sd-CustomSelect").multipleSelect({
                selectAll: true,
                filter: true,
                minimumCountSelected: 1,
                container: 'body'
            });
            $(".sd-CustomSelect").css({
                display: "block",
                visibility: "visible"
            });

            $(".sd-CustomSelect_2").multipleSelect({
                selectAll: true,
                filter: true,
                minimumCountSelected: 1,
                container: '#ExtralargeModal'
            });

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






            $('#assign_users_form').validate({
                rules: {

                    kitchen: "required",
                    prepared_by: "required"

                },
                messages: {

                    prepared_by: "This field is required.",
                    kitchen: "This field is required.",

                },
                errorPlacement: function(error, element) {
                    if (element.attr("name") == "kitchen") {
                        error.appendTo('#kitchen_Error_01');
                    } else if (element.attr("name") == "prepared_by") {
                        error.appendTo('#prepared_by_error');
                    } else {
                        error.insertAfter(element);
                    }
                },

            });


            $('#user_add').validate({
                rules: {
                    user_name: "required",
                },
                messages: {
                    user_name: "User name is required.",

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

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

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

            });


            $('#update_assigned_users_data').validate({
                rules: {
                    edit_kitchen: "required",
                    edit_users: "required",

                },
                messages: {
                    edit_kitchen: "This field is required.",
                    edit_users: "This field is required.",


                },
                errorPlacement: function(error, element) {
                    if (element.attr("name") == "edit_kitchen") {
                        error.appendTo('#edit_kitcehn_error');
                    } else if (element.attr("id") == "edit_users") {
                        error.appendTo('#edit_users_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);
                    }
                },

            });

            load_current_users();
            updateDropdowns();
            load_users_assigned_table();

        });




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


                var data = $('#user_add').serialize();
                $.ajax({
                    url: "insert_user_name_prep_by",
                    type: "POST",
                    data: data,
                    success: function(data) {

                        var obj = jQuery.parseJSON(data);
                        if (obj.status) {
                            alert('Data Inserted Successfully ');
                            $('#user_name').val('');
                            $(".btn-close").click();
                            updateDropdowns();
                            load_current_users();

                        } else {
                            alert('Data Already Exist');
                            $('#user_name').val('');
                        }

                    }


                });
            }
        })

        function assign_users() {
            if ($("#assign_users_form").valid()) {
                let prep_by = $("#prepared_by").val();
                let data = {
                    _token: "{{csrf_token()}}",
                    kitchen: $("#kitchen").val(),
                    prepared_by: prep_by,
                };
                if (prep_by.length == 0) {
                    alert("Select Users");
                    return;
                }


                $.ajax({
                    url: "save_prep_by_assigned_data",
                    type: "POST",
                    data: data,
                    success: function(result) {
                        let response = JSON.parse(result);
                        if (response.status) {
                            alert("Data Added Successfully");
                            $("#assign_users_form")[0].reset();
                            $(".chosen-select").val('').trigger("chosen:updated");
                            load_users_assigned_table();
                        } else {
                            alert("Sorry! Un Able to Insert the Data");
                        }
                        updateDropdowns();


                    },
                    error: function() {}

                });
            }
        }

        function update_users_assigned() {
            if ($("#update_assigned_users_data").valid()) {
                let users = $("#edit_users").val();
                if (users.length == 0) {
                    alert("Select Users")
                    return;
                }
                var data = {};
                data['_token'] = "{{csrf_token()}}";
                data['kitchen_id'] = $("#edit_id").val();
                data['users'] = users;
                $.ajax({
                    url: "update_assigned_prep_by_users",
                    type: "POST",
                    data: data,
                    success: function(result) {
                        let info = JSON.parse(result);
                        if (info.status == 1) {
                            alert("Data Updated Successfully");
                            $(".btn-close").click();
                            load_users_assigned_table();
                        } else {
                            alert("Sorry! Data Already Exist");
                        }
                        updateDropdowns();
                    },

                });
            }
        }

        function delete_ingr() {
            if ($("#ingrDelete").valid()) {
                var data = {};
                data['_token'] = "{{csrf_token()}}";
                data['kitchen_id'] = $("#edit_id").val();

                $.ajax({
                    url: "delete_assigned_prep_by_users",
                    type: "POST",
                    data: data,
                    success: function(data) {
                        let info = JSON.parse(data);
                        alert("Data Deleted Successfully");
                        $(".btn-close").click();
                        load_users_assigned_table();
                        updateDropdowns();
                    },

                });
            }
        }

        function load_current_users() {
            $('#view_catgorytable_data').DataTable().destroy();
            var table = $('#view_catgorytable_data').DataTable({
                "autoWidth": true,
                "ordering": true,
                "order": [0, 'desc'],
                "ajax": {
                    url: "get_prep_by_users_data", // Ajax request
                    type: "get",
                    data: data,
                },

                "columns": [

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

                    {
                        "data": "name",
                        "title": "Users name"
                    }
                ],

                // 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_users_assigned_table() {
            $('#view_addIngr').DataTable().destroy();
            var table = $('#view_addIngr').DataTable({
                "autoWidth": true,
                "ordering": true,
                "order": [0, 'desc'],
                "ajax": {
                    url: "get_mapped_users_prep_by", // Ajax request
                    type: "get",
                    data: data,
                },

                "columns": [

                    {
                        "data": "kitchen_id",
                        "title": "#"
                    },
                    {
                        "data": "kitchen_id",
                        render: function(data, full, type) {
                            return '<button data-bs-toggle="modal" data-bs-target="#ExtralargeModal" type="submit" class="btn btn-danger" 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": "kitchen_name",
                        "title": "Kitchen"
                    },
                    {
                        "data": "assigned_user_names",
                        "title": "Users"
                    },

                ],
                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"
                    },
                    {
                        "width": "10%",
                        "targets": [3],
                        "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 viewmodel(id) {
            arr['id'] = id;

            $.ajax({
                type: 'post',
                url: "get_assigned_users_by_kitchen_id",
                data: arr,
                success: function(returnData) {
                    let info = jQuery.parseJSON(returnData);
                    let infoData = info['data'];
                    let users = info['users'];
                    let kitchen_id = infoData[0]['kitchen_id'];
                    let kitchen_name = infoData[0]['kitchen_name'];
                    $("#edit_id").val(kitchen_id)
                    $("#edit_kitchen").val(kitchen_name)
                    $("#view_kitchen").val(kitchen_name)
                    $("#delete_kitchen").val(kitchen_name)

                    $("#view_users").html('');
                    $("#edit_users").html('');
                    $("#delete_users").html('');
                    let checked_users = [];
                    users.forEach(function(element) {
                        if (element.status === 0) {
                            $("#view_users").append(`
                                <option value="${element.id}" selected disabled>${element.name}</option>
                            `);

                            $("#delete_users").append(`
                            <option value="${element.id}" selected disabled>${element.name}</option>
                        `);
                            checked_users.push(element.id);
                        }

                        $("#edit_users").append(`
                                <option value="${element.id}" selected>${element.name}</option>
                            `);

                    });

                    // Refresh multipleSelect dropdowns
                    $('#edit_users').multipleSelect('refresh');
                    $('#view_users').multipleSelect('refresh');
                    $('#delete_users').multipleSelect('refresh');

                    // Set all as selected in edit_users (redundant if already using `selected`, but ensures JS sync)
                    $('#edit_users').multipleSelect('setSelects', checked_users);

                    // Make sure select fields are visible
                    $(".sd-CustomSelect_2").css({
                        display: "block",
                        visibility: "visible"
                    });

                }
            });
        }

        function reset_data() {
            var id = $("#edit_id").val();

            viewmodel(id);
        }

        function reset_main_data() {
            $("#assign_users_form")[0].reset();
            $("#kitchen").val('').trigger("chosen:updated");
            $("#add_options").val('').trigger("chosen:updated");
            return false;
        }

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


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

        // }



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


            $.ajax({
                type: 'get',
                url: "get_prep_by_users_data_by_id",
                data: data,
                success: function(returnData) {

                    var obj = jQuery.parseJSON(returnData);
                    // VIEW
                    $('#id_view').val(obj[0]['id']);
                    $('#model_user_name').val(obj[0]['name']);

                    // Update
                    $('#id_update').val(obj[0]['id']);
                    $('#model_edit_user_name').val(obj[0]['name']);
                    // delete
                    $('#id_delete').val(obj[0]['id']);
                    $('#model_delete_category').val(obj[0]['name']);


                    // $("#reset_ctg_name").val(id);
                    // $("#user_name_master_update")[0].reset();
                    // $("#id_update").val(id);
                }
            });
        }


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

                var data = {};
                var id_update = $('#id_update').val();
                var user_name = $("#model_edit_user_name").val();
                data['id_update'] = id_update;
                data['user_name'] = user_name;
                // data['_token'] = "{{ csrf_token() }}";

                $.ajax({
                    type: 'get',
                    url: 'update_prep_by_users_by_id',
                    data: data,
                    success: function(result) {
                        var obj = jQuery.parseJSON(result);
                        if (!obj.status) {
                            alert(' Data already Exist!');
                            $('#model_edit_user_name').val('');

                        } else {
                            alert('Updated Successfully');
                            $('#model_edit_user_name').val('');
                            load_current_users();
                            load_users_assigned_table();

                            updateDropdowns();
                            $(".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_prep_users_by_id',
                data: data,
                success: function(returnData) {
                    var data = jQuery.parseJSON(returnData);
                    if (data.status == 1) {
                        alert(" Deleted Successfully");
                        $("#hired_by_name_master_delete")[0].reset();
                        $(".btn-close").click();
                        load_current_users();
                        updateDropdowns();
                    }

                }
            })

        }



        function updateDropdowns() {
            $.ajax({
                url: 'get_users_for_dropdown',
                method: "get",
                success: function(resp) {
                    let users = JSON.parse(resp);
                    $("#prepared_by").html('')
                    users.forEach(element => {
                        $("#prepared_by").append(`
                          <option value="${element.id}">${element.name}</option>
                        `)
                    });
                    $('#prepared_by').multipleSelect('refresh');
                    $(".sd-CustomSelect").css({
                        display: "block",
                        visibility: "visible"
                    });
                }
            })
        }

        function prepbyChange() {

        }
    </script>
    <!--  -->
    <link rel='stylesheet' href='https://harvesthq.github.io/chosen/chosen.css'>
    <script src='//harvesthq.github.io/chosen/chosen.jquery.js'></script>

</body>

</html>