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

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-ui-timepicker-addon/1.6.3/jquery-ui-timepicker-addon.min.js"></script>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-ui-timepicker-addon/1.6.3/jquery-ui-timepicker-addon.min.css" />


<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_label,
     #multiselect_options {
        margin-top: -11px;
        font-size: 14px;
        z-index: 99;
    }


    /* ==== multiselect styling start ==== */
    /* .ms-drop.bottom {
        left: 122px !important;
    } */
   
    .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: 58px;
        /* 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 */
    }

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

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


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

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


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


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


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


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


    @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;
        }
            span.select2-selection.select2-selection {
            min-height: 58px;
            width: 100%;
        }
    }

    @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="row g-3 pt-3" id="ingrAdd" method="POST">
                                        <input type="hidden" value="{{csrf_token()}}" name="_token">

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


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

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

                                                    <option value=""></option>
                                                </select>

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


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

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

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




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

                                                <input type="text"
                                                    class="form-control"
                                                    id="operation_time"
                                                    name="operation_time"
                                                    placeholder="From Date"
                                                    required=""
                                                    readonly>

                                                <label for="floatingName">Operation Time</span></label>
                                                <p id="categoryes_operation_time" style="color:red"></p>
                                            </div>
                                        </div>

                                        <div class="col-md-12">
                                            <div class="form-floating">
                                                <input type="text" class="form-control" id="ingr_name" name="ingr_name"
                                                    placeholder="Your Name" autocomplete="off">
                                                <label for="revision">Particulars/Activity/Equipment</label>
                                                <p id="ErrorID_1" style="color:red"></p>
                                            </div>
                                        </div>
                                        <div class="text-center">
                                            <button type="button" onclick="add_ingr();" 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;">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"
                                data-bs-target="#bordered-home" type="button" role="tab" aria-controls="home" onclick="load_submit_ingr()"
                                aria-selected="true">Particulars/Activity/Equipment 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" onclick="load_category()" 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">Operation Time</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">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-3 pt-3" id="ingrView">
                                                        <input type="hidden" id="view_id" name="view_id">

                                                        <div class="col-md-3">
                                                            <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-3">
                                                            <div class="form-floating">
                                                                <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-3">
                                                            <div class="form-floating">
                                                                <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-3">
                                                            <div class="form-floating">
                                                                <input type="text" class="form-control"
                                                                    id="view_operation_time" name="view_operation_time"
                                                                    placeholder="Your Name" autocomplete="off" readonly>
                                                                <label for="revision">Operation Time</label>
                                                            </div>
                                                        </div>

                                                        <div class="col-md-12">
                                                            <div class="form-floating">
                                                                <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-3 pt-3" id="ingrEdit">
                                            <input type="hidden" id="edit_id" name="edit_id">
                                            <input type="hidden" id="" name="_token" value="{{ csrf_token()}}">



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

                                                    <select class="form-select" id="edit_kitchen" name="edit_kitchen"
                                                        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-3">
                                                <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-3">
                                                <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="ON">ON</option>
                                                        <option value="OFF">OFF</option>
                                                        <option value="YES">YES</option>
                                                        <option value="NO">NO</option>
                                                        <option value="ABNT">ABNT</option>
                                                        <option value="PRNT">PRNT</option>
                                                        <option value="WO">WO</option>
                                                        <option value="Camera">CAMERA</option>
                                                        <option value="Text Box">TEXT</option>
                                                    </select>
                                                    <!-- <label for="floatingName">Option to Add</span></label> -->
                                                    <p id="ErrorID_22" style="color:red"></p>
                                                </div>
                                            </div>



                                            <div class="col-md-3">
                                                <div class="form-floating">
                                                    <input type="text" class="form-control"
                                                        id="edit_operation_time" name="edit_operation_time"
                                                        placeholder="Your Name" autocomplete="off" readonly>
                                                    <label for="revision">Operation Time</label>
                                                    <p id="ErrorID_edit_operation_time" style="color:red"></p>
                                                </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 buttons-container">
                                                                    <button type="button" onclick="edit_ingr();"
                                                                        id="submit_add"
                                                                        class="btn submit-btn">Submit</button>
                                                                    <button type="button" onclick="reset_daily_data();" id=""
                                                                        class="btn btn-primary reset-btn">Reset</button>

                                                                </div>


                                        </form>
                                    </div>
                                </div>
                                <div class="tab-pane fade" id="bordered-justified-contact" role="tabpanel"
                                    aria-labelledby="contact-tab">
                                    <div class="card-body p-2">
                                        <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-3">
                                                <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-3">
                                                <div class="form-floating">
                                                    <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-3">
                                                <div class="form-floating">
                                                    <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-3">
                                                <div class="form-floating">
                                                    <input type="text" class="form-control"
                                                        id="delete_operation_time" name="delete_operation_time"
                                                        placeholder="Your Name" autocomplete="off" readonly>
                                                    <label for="revision">Operation Time</label>
                                                </div>
                                            </div>

                                            <div class="col-md-12">
                                                <div class="form-floating">
                                                    <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">
                                                    <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">
                                                    <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_add"
                                                                        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();


        // function reload() {
        //     location.reload();
        // }
        // SUBMIT HANDLER FUNCTION
        $(document).ready(function(e) {
              $(".sd-CustomSelect").multipleSelect({
                selectAll: true,
                filter: true,
                minimumCountSelected: 1,
                onOptgroupClick: function(view) {
                    $(view).parents("label").addClass("selected-optgroup");
                }
            });
              $("#kitchen").multipleSelect('checkAll');
            $("#add_options").multipleSelect('checkAll');
             $(".sd-CustomSelect").css({
                display: "block",
                visibility: "visible"
            });

           // $(".chosen-select").chosen();
            // $(".chosen-select2").chosen();


            $("#operation_time").timepicker({
                timeFormat: "HH:mm:ss",
                controlType: "select",
                showButtonPanel: true,
                onClose: function(timeText) {
                    $(this).val(timeText);
                }
            });

            $("#edit_operation_time").timepicker({
                timeFormat: "HH:mm:ss",
                controlType: "select",
                showButtonPanel: true,
                onClose: function(timeText) {
                    $(this).val(timeText);
                }
            });




            $('#ingrAdd').validate({
                rules: {
                    ingr_name: "required",
                    add_options: "required",
                    category: "required",
                    kitchen: "required",
                    operation_time: "required",


                },
                messages: {
                    ingr_name: "This field is required.",
                    add_options: "This field is required.",
                    category: "This field is required.",
                    kitchen: "This field is required.",
                    operation_time: "This field is required.",


                },
                errorPlacement: function(error, element) {
                    if (element.attr("name") == "ingr_name") {
                        error.appendTo('#ErrorID_1');
                    } else if (element.attr("name") == "add_options") {
                        error.appendTo('#ErrorID_2');
                    } else if (element.attr("name") == "category") {
                        error.appendTo('#categoryes_error_data');
                    } else if (element.attr("id") == "kitchen") {
                        error.appendTo('#kitchen_Error_01');
                    } else if (element.attr("id") == "operation_time") {
                        error.appendTo('#categoryes_operation_time');
                    } 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_operation_time: "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.",
                    edit_operation_time: "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_operation_time") {
                        error.appendTo('#ErrorID_edit_operation_time');
                    } 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();



        });


        $('#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 = jQuery.parseJSON(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()) {
                var data = {};
                data['_token'] = "{{csrf_token()}}";
                data['ingr_name'] = $("#ingr_name").val();
                data['category'] = $("#category").val();
                data['kitchen'] = $("#kitchen").val();
                data['options'] = $("#add_options").val();
                data['operation_time'] = $("#operation_time").val();


                $.ajax({
                    url: "submit_operation_data",
                    type: "POST",
                    data: data,
                    success: function(result) {
                        if (result == 1) {
                            alert("Data Added Successfully");
                            $("#ingrAdd")[0].reset();
                            $(".chosen-select").val('').trigger("chosen:updated");
                            reset_main_data();
                            load_submit_ingr();
                        } else {
                            alert("Sorry! Un Able to Insert the Data");
                        }


                    },
                    error: function() {}

                });
            }
        }

        function edit_ingr() {
            if ($("#ingrEdit").valid()) {
                var data = {};
                data['_token'] = "{{csrf_token()}}";
                data['ingr_name'] = $("#ingr_name_edit").val();
                //data['ingr_qty'] = $("#ingr_qty_edit").val();
                data['options'] = $("#edit_add_options").val();
                data['edit_category'] = $("#edit_category").val();
                data['edit_kitchen'] = $("#edit_kitchen").val();
                data['edit_id'] = $("#edit_id").val();
                data['updated_by'] = $("#updatedBy").val();
                data['updated_reason'] = $("#update_reason").val();
                data['operation_time'] = $("#edit_operation_time").val();


                $.ajax({
                    url: "submit_updated_operation_details",
                    type: "POST",
                    data: data,
                    success: function(result) {
                        if (result) {
                            alert("Data Updated Successfully");
                            $(".btn-close").click();
                            load_submit_ingr();
                        } 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: "submit_deleted_operation_details",
                    type: "POST",
                    data: data,
                    success: function(data) {
                        alert("Data Deleted Successfully");
                        $(".btn-close").click();
                        load_submit_ingr();
                    },

                });
            }
        }

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

                "columns": [

                    {
                        "data": "id",
                        "title": "#"
                    },
                    {
                        "data": "id",
                        render: function(data, full, type) {
                            return '<button data-bs-toggle="modal" data-bs-target="#ExtralargeModalCategory" type="submit" 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": "category_name",
                        "title": "Category"
                    }
                ],

                // Columns Definations for column customizations  
                columnDefs: [

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


                ],
                initComplete: function() {

                }
            });

            table.on('order.dt search.dt', function() {
                let i = 1;

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

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



        function load_submit_ingr() {
            $('#view_addIngr').DataTable().destroy();
            var table = $('#view_addIngr').DataTable({
                "autoWidth": true,
                "ordering": true,
                "order": [0, 'desc'],
                "scrollY": "450px",
                "scrollX": true,
                "scrollCollapse": true,
                "bPaginate": false,
                "responsive": true,
                "ajax": {
                    url: "get_add_operation_data", // 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 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": "date_time",
                        "title": "Operation Time",
                        render: function(data, full, row) {

                            if (data) {
                                return data.split(' ')[1];
                            } else {
                                return '';
                            }

                        }
                    },

                    {
                        "data": "particulars",
                        "title": "Particular/Activity"
                    },
                    {
                        "data": "options",
                        "title": "Added Options"
                    },
                    {
                        "data": "kitchen_name",
                        "title": "Kitchen Name"
                    },
                    {
                        "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": "5%",
                        "targets": [2],
                        "className": "dt-center"
                    },
                    {
                        "width": "15%",
                        "targets": [3],
                        "className": "dt-center"
                    },
                    {
                        "width": "10%",
                        "targets": [4],
                        "className": "dt-center"
                    },
                    {
                        "width": "5%",
                        "targets": [5],
                        "className": "dt-center"
                    },
                    {
                        "width": "5%",
                        "targets": [6],
                        "className": "dt-center"
                    }

                ],
                initComplete: function() {

                }
            });

            table.on('order.dt search.dt', function() {
                let i = 1;

                table.cells(null, 0, {
                    search: 'applied',
                    order: 'applied'
                }).every(function(cell) {
                    this.data(i++);
                });
            }).draw()
                $(".toggle-sidebar-icon").click(function() {
                setTimeout(function() {
                    table.columns.adjust().draw();
                }, 300);
            });
        }


        function 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']);

                    var date = obj[0]['date_time'];
                    if (date) {
                        $('#view_operation_time').val(date.split(' ')[1]);
                        $('#edit_operation_time').val(date.split(' ')[1]);
                        $('#delete_operation_time').val(date.split(' ')[1]);

                    }
                    // EDIT

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

                    // 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']);

                    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();
            $("#kitchen").multipleSelect('checkAll');
            $("#add_options").multipleSelect('checkAll');
             $(".sd-CustomSelect").css({
                display: "block",
                visibility: "visible"
            });
             $("#operation_time").val("00:00:00");
            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) {
                        var obj = jQuery.parseJSON(result);

                        if (obj == '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>');

                    });

                }
            });

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

</body>

</html>