@include('layouts.headElement')
@include('layouts.headerNormal')
@include('layouts.sidebarV2')
<script src="js/jquery-ui.min.js"></script>
<script src="assets/vendor/timepicker/jquery.timepicker.min.js"></script>
<link rel="stylesheet" href="assets/vendor/timepicker/jquery.timepicker.min.css" />
<link rel="stylesheet" href="https://code.jquery.com/ui/1.13.3/themes/base/jquery-ui.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">

<link href='css/jquery-ui.css' rel='stylesheet'>
<style>

    .ui-datepicker-prev-hover,
    .ui-datepicker-next-hover {
        background-color: transparent !important;
        border: none !important;
    }

    .ui-datepicker-prev span,
    .ui-datepicker-next span {
        background: none !important;
        /* remove default sprite */
        text-indent: 0 !important;
        /* reset text hiding */
        font-style: normal;
        font-weight: normal;
        line-height: 1;
        font-size: 1.2em;
    }

    .ui-datepicker-prev span::before {
        content: "\f12c";
        /* Bootstrap Icons chevron-left */
    }

    .ui-datepicker-next span::before {
        content: "\f135";
        /* Bootstrap Icons chevron-right */
    }

    .ui-state-default.ui-state-active {
        background-color: #D9A441;
        color: white !important;
    }

    .ui-datepicker-prev.ui-corner-all,
    .ui-datepicker-next.ui-corner-all {
        color: black !important;

    }

    .ui-datepicker {
        width: 265px !important;
        color: #BA434D;
        margin: 5px auto 0;
        font: 12pt Arial, sans-serif;
    }

    .ui-datepicker-header {
        background: #D9A441;
        color: #BA434D;
        border-width: 1px 0 0 0;
        border-style: solid;
        border-color: #D9A441;
        border-radius: 0px !important;
    }

    .ui-state-default.ui-state-highlight {
        background-color: #D9A441 !important;
        color: white !important;

    }

    .ui-datepicker-calendar .ui-state-default {
        /* background: linear-gradient(#963131, #BA434D); */

        /* color: #ffffff; */
        color: black;
        height: 35px;
        width: 35px;
        border: 1px;
        border-radius: 2px;
    }

    .ui-icon {
        display: block;
        text-indent: -99999px;
        overflow: hidden;
        background-repeat: no-repeat;
    }


    .ui-datepicker-calendar .ui-state-hover {
        background: #D9A441;
        color: white;
    }

    #ui-datepicker-div {
        z-index: 99999 !important;

    }

    .report-container {
        margin: 3px -10px 0px 0px;
    }





    .dataTables_filter {
        display: flex !important;
        justify-content: end !important;
        padding: 0px 10px 0px 0px !important;
    }

    .dataTables_filter input {
        border-radius: 30px !important;
        border: 1px solid #ddd !important;
        padding: 5px 20px !important;
        margin: 0px 0px 5px 0px !important;
    }


    .modal {
        margin: 50px 0px !important;
    }

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

    /* .ms-parent {
        z-index: 1000 !important;
    } */

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

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


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

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

    .form-floating>.form-control {
        width: 99% !important;
    }

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

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


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


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


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


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


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

    .select2-container {
        width: 100% !important;

    }

    .modal-xl {
        max-width: 85% !important;
    }

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

    /* .button-adjust {
        float: right;
        margin-top: 3%;
        margin-bottom: 3%;
    } */




    div.dt-buttons {
        position: relative;
        float: right;
        margin-left: 950px;
        top: -50px;
    }




    #ex_img {
        width: 27px;
        float: right;
        margin-top: 0%;
        margin-bottom: 1%;
        color: #BA434D !important;
    }



    .tbl-adjust {
        width: 100%;
    }



    @media only screen and (min-width: 200px) and (max-width: 767px) {
        .tbl-adjust {
            width: 300%;
        }
    }

    @media screen and (width>1000px) {
        .tab-status-content {
            /* padding: 35px 0px 0px 0px; */
        }
    }

    @media screen and (width<1000px) {
        .tab-status-content {
            /* padding: 10px 0px 0px 0px; */
        }
    }

    @media only screen and (max-width: 100%) {
        .row-adjust_2 {
            padding-right: calc(var(--bs-gutter-x) * .0) !important;
        }
        
    }

    .image-container {
        width: 400px;
        height: 400px;
        display: flex;
        justify-content: center;
    }

    .image-container:hover {
        background-color: #f2e2d2;
    }

    .image {
        background-position: center;
        background-repeat: no-repeat;
        background-size: contain;
        cursor: crosshair;
        display: block;
        max-width: 100%;
        padding-bottom: 10em;
        width: 100em;
    }

    .wrapper {
        display: flex;
        height: 80%;
        width: 100%;
        justify-content: center;
        margin: 10px auto;
    }

    .img_producto_container {
        width: 400px;
        height: 400px;
        position: relative;
        overflow: hidden;
        cursor: zoom-in;
    }

    .img_producto {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
        transition: transform 0.5s ease-out;
    }


    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: 58px !important;
        /* width: 353px !important; */

        /* width: 353px; */

    }

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


    #view_addIngr th {
        background-color: #D9A441;
        margin: 20px 0px !important;
    }


    #ingrView {
        overflow: auto;
    }

    .tab-status-content .row .col-md-4 {
        /* padding: 2px !important; */
        /* margin: 0px !important */
    }

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

        #view_addIngr_filter {
            display: flex !important;
            justify-content: center !important;
        }

         .form-container {
                margin: 0px -40px 0px 0px;
            }

            .report-container {
                margin: 0px -40px 0px 0px;
                padding: 0px;
            }
             .ms-parent {
            position: unset;
        }

    }
</style>

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

    <main class="body-main-container" id="body_main_container">
        <div id="body_container">
            <div class="card" id="page_header_container">
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-8">
                            <h5 class="card-title">Operations Details</h5>
                        </div>
                    </div>
                </div>
            </div>

            <!-- <ul class="nav nav-tabs d-flex" id="myTabjustified" role="tablist"> </ul> -->

            <div class="tab-status-content " id="myTabjustifiedContent">
                <div class="tab-pane fade show active" id="home-justified"
                    aria-labelledby="home-tab">
                    <div class="card p-0 form-container">
                        <div class="card-body p-1">
                            <!-- Floating Labels Form -->
                            <form id="ingrAdd" method="POST">
                                <div class="row p-2 g-1">
                                    <input type="hidden" value="{{csrf_token()}}" name="_token">
                                    <div class="col-md-4">
                                        <div class="form-floating">
                                            <select class="sd-CustomSelect" id="kitchen" name="kitchen[]"
                                                onchange="OutletChange()" multiple>
                                                @foreach ($kitchens as $kitchen)
                                                <option value="{{$kitchen->id}}">{{$kitchen->kitchen_name}}</option>
                                                @endforeach
                                            </select>
                                            <label for="floatingName" id="multiselect_label">Kitchens</label>
                                            <p id="kitchen_Error_01" style="color:red"></p>
                                        </div>
                                    </div>

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

                                            </select>


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

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

                                    <div class="col-md-4">
                                        <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-4">
                                        <div class="form-floating">
                                            <input type="text" onchange="selectDate();" class="form-control"
                                                id="fromdate" name="fromdate" placeholder="From Date" readonly>
                                            <label for="floatingEmail">From Date</label>
                                            <!-- <span id="projectIDSelectError2"></span> -->
                                            <p id="projectIDSelectError2" style="color:red"></p>
                                        </div>
                                    </div>
                                    <div class="col-md-4">
                                        <div class="form-floating">
                                            <input type="text" class="form-control" id="todate" name="todate"
                                                placeholder="To Date" onchange="selectToDate();" readonly>
                                            <label for="floatingEmail">To Date</label>
                                            <!-- <span id="projectIDSelectError3"></span> -->
                                            <p id="projectIDSelectError3" style="color:red"></p>
                                        </div>
                                    </div>

                                    <div class="text-center my-3">
                                        <button type="submit" class="btn submit-btn"> Submit</button>
                                        <button type="button" onclick="reset_data();"
                                            class="btn reset-btn">Reset</button>
                                    </div>
                                </div>
                            </form>
                            <!-- End floating Labels Form -->

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

            </div>


            <!-- REPORTS STARTS FROM HERE -->
            <div class="card report-container p-2" id="report_table">
                <div class="card-body p-1">
                    <h5 class="card-title" style="padding:10px 4px">Report</h5>

                    <!-- Bordered Tabs -->
                    <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" style="font-weight: bold;">Operation Checklist</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="col-lg-12"> -->
                                <div class="card p-0" style="border:none">
                                    <div class="card-body p-1">
                                        <!-- <h5 class="card-title">Report</h5> -->
                                        <!-- Table with stripped rows -->
                                        <table id="view_addIngr" class='display dataTable nowrap' style="width:100%">
                                            <thead>
                                                <tr>
                                                    <th scope="col" style="border-radius: 8px 0px 0px 0px;">#</th>
                                                    <th scope="col">Kitchen</th>
                                                    <th scope="col">Date</th>
                                                    <th scope="col" style="border-radius: 0px 8px 0px 0px;">Action</th>
                                                </tr>
                                            </thead>
                                        </table>
                                    </div>
                                </div>

                            </div>
                        </div>

                    </div><!-- End Bordered Tabs -->
                </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-header">
                            <h5 class="modal-title">View</h5>
                            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                        </div>
                        <div class="tab-pane fade show " role="tabpanel" aria-labelledby="home-tab">
                            <div class="card-body">
                                <!-- 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-12">

                                        <i id="ex_img" class="fas fa-file-excel" title="Employee_details" onclick="export_e1();"></i>

                                        <table class="table table-bordered tbl-adjust" id="user_view_table" style="width:100%;">
                                            <thead>
                                                <tr>
                                                    <th>Kitchen</th>
                                                    <th>Activity</th>
                                                    <th>Category Name</th>
                                                    <th>Operation</th>
                                                    <th>Image</th>
                                                    <th>Text</th>
                                                    <th>Date & Time</th>
                                                    <th>Status</th>
                                                </tr>
                                            </thead>
                                        </table>

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

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

                        <div class="modal-header">
                            <h5 class="modal-title">Image Details</h5>
                            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                        </div>
                        <div class="tab-pane fade show" id="home-justified_view" role="tabpanel" aria-labelledby="home-tab">
                            <div class="card-body">
                                <div class="wrapper">
                                    <div class="img_producto_container" data-scale="2.6">
                                    </div>

                                </div>
                            </div>
                            <div class="text-center my-3">
                                <button onclick="download_order_images(event)" class="btn submit-btn custom-maroon-btn">Download Image</button>
                            </div>
                        </div>
                        <!-- </div> -->

                    </div>
                </div>
            </div>
            <input type="hidden" id="view_operation_type">
        </div>
    </main>

    @include('layouts.footer');


    <link rel="stylesheet" href="css/jquery.dataTables.min.css">
    <script src="js/jquery-3.6.0.min.js"></script>
    <script src="js/jquery-ui.js"></script>
    <script src="js/jquery.dataTables.min.js"></script>
    <script src='js/jquery.validate.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/jquery-ui-timepicker-addon/1.6.3/jquery-ui-timepicker-addon.min.css" />

    <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-beta.1/dist/css/select2.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-beta.1/dist/js/select2.min.js"></script>

    <script src='js\table2excel.min.js'></script>
    <script src='assets/vendor/excel_datatable/buttons.html5.min.js'></script>
    <script src='assets/vendor/excel_datatable/dataTables.buttons.min.js'></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()}}";
        var checklist_type = 'store_open_check';
        // function reload() {
        //     location.reload();
        // }
        // SUBMIT HANDLER FUNCTION
        $(document).ready(function(e) {


            $(function() {
                $("#fromdate").datepicker({
                    dateFormat: "yy-mm-dd",
                    changeMonth: true,
                    changeYear: true,
                    maxDate: '0',
                    onClose: function(selectedDate) {
                        jQuery("#todate").datepicker("option", "minDate", selectedDate);
                    }
                });
            });
            $(function() {
                $("#todate").datepicker({
                    dateFormat: "yy-mm-dd",
                    changeMonth: true,
                    changeYear: true,
                    maxDate: '0',
                    onClose: function(selectedDate) {
                        jQuery("#fromdate").datepicker("option", "maxDate", selectedDate);
                    }
                });
            });


            $(".sd-CustomSelect").multipleSelect({
                selectAll: true,
                filter: true,
                container: 'body',
                minimumCountSelected: 1,
                onOptgroupClick: function(view) {
                    $(view).parents("label").addClass("selected-optgroup");
                }
            });
            $("#kitchen").multipleSelect('checkAll');
            $("#user_id").multipleSelect('checkAll');
            $(".sd-CustomSelect").css({
                display: "block",
                visibility: "visible"
            });
            //   $("#pageloader").fadeIn();

            // load_handover_table();
            // $("#home-tab").click(function() {
            //     load_handover_table();
            // });
            get_category_drop_down();
            $('#report_table').hide();
            $('#bordered-home').removeClass('show active'); // hide tab content
            $('#home-tab').removeClass('active');
            // $(".chosen-select").chosen();

            $("#todate").keypress(function(event) {
                event.preventDefault();
            });
            $("#fromdate").keypress(function(event) {
                event.preventDefault();
            });


            $('#ingrAdd').validate({

                rules: {
                    kitchen: "required",
                    category: "required",
                    fromdate: "required",
                    todate: "required",
                    operations: "required"
                },
                messages: {
                    kitchen: "This field is required",
                    category: "This field is required",
                    fromdate: "This field is required",
                    todate: "This field is required",
                    operations: "This field is required",


                },

                highlight: function(element) {
                    $(element).addClass('error-border');
                    $(element).removeClass('success-border');
                },
                unhighlight: function(element) {
                    $(element).removeClass('error-border');
                    $(element).addClass('success-border');
                },
                errorPlacement: function(error, element) {

                    if (element.attr("name") == "kitchen") {
                        error.appendTo('#kitchen_Error_01');
                    } else if (element.attr("name") == "fromdate") {
                        error.appendTo('#projectIDSelectError2');
                    } else if (element.attr("name") == "todate") {
                        error.appendTo('#projectIDSelectError3');

                    } else if (element.attr("name") == "category") {
                        error.appendTo('#categoryes_error_data');

                    } else if (element.attr("name") == "operations") {
                        error.appendTo('#operations_ErrorID_2');

                    } else {
                        error.insertAfter(element);
                    }
                },

            })


            // get_category_drop_down();
        });

        function export_e1() {
            $(function() {

                // Now export to Excel
                $("#user_view_table").table2excel({
                    filename: "operation_checklist.xls"
                });

            });
        }





        function selectDate() {
            var fDate = $('#fromdate').val();
            if ($('#fromdate').val() == '') {
                $("#projectIDSelectError2").show();
            } else {
                $("#projectIDSelectError2").hide();
            }
        }

        function selectToDate() {
            if ($('#todate').val() == '') {
                $("#projectIDSelectError3").show();
            } else {
                $("#projectIDSelectError3").hide();
            }
        }



        function get_category_drop_down() {

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

                    var arr = jQuery.parseJSON(data);

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

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


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

                    });

                }
            });

        }


        $('#ingrAdd').submit(function(e) {

            e.preventDefault();


            if ($('#ingrAdd').valid()) {

                $("#pageloader").fadeIn();
                var data = {};
                data['kitchen'] = $("#kitchen").val();
                data['from_date'] = $('#fromdate').val();
                data['to_date'] = $('#todate').val();
                data['category'] = $('#category').val();
                data['operations'] = '';
                data['user_id'] = $('#user_id').val();
                data['_token'] = "{{ csrf_token() }}";
                $.ajax({
                    type: 'POST',
                    url: 'load_operation_data_v2',
                    data: data,

                    success: function(result) {
                        $("#pageloader").fadeOut();
                        var arr = jQuery.parseJSON(result);
                        $("#view_operation_type").val($('#operations').val());
                        if (arr != 0) {
                            var data = arr.data;
                            $('#report_table').show();
                            $('#bordered-home').addClass('show active'); // show tab content only after success
                            $('#home-tab').addClass('active');
                            load_handover_table(data);

                        } else {
                            alert("No records found. Try something else");
                            $('#report_table').hide();

                        }
                    }

                });

            }
        })




        function load_handover_table(arr) {
            $('#view_addIngr').DataTable().destroy();
            var table = $('#view_addIngr').DataTable({
                "autoWidth": true,
                "ordering": true,
                "order": [0, 'ASC'],
                "scrollY": "450px",
                "scrollX": true,
                "scrollCollapse": true,
                "bPaginate": false,
                "responsive": true,
                "data": arr,
                language: {
                    search: "_INPUT_",
                    searchPlaceholder: "Search table..."
                },

                "columns": [

                    {
                        "data": "id",
                        "title": "#"
                    },
                    {
                        "data": "kitchen_name",
                        "title": "Kitchens"
                    },
                    {
                        "data": "date",
                        "title": "Date",
                        render: function(data, full, row) {
                            var date = row['date'];
                            if (date == 0) {
                                return ''
                            } else {
                                return date;

                            }

                        }
                    },
                    {
                        "data": "date1",
                        render: function(data, full, row) {
                            var date = data;
                            var kitchen_id = row['kitchen_id'];
                            var category = row['category'];
                            var particularId = row['particularId'];

                            return '<button data-bs-toggle="modal" data-bs-target="#ExtralargeModal" type="submit" class="btn" style="background: #d9a441 !important;color:#F2E2D2;border: 1px solid #d9a441;" onclick="viewmodel(\'' + data + '\',\'' + kitchen_id + '\',\'' + category + '\',\'' + particularId + '\')"><i class="fa fa-eye"></i></button>';

                        },
                        "title": "Action"
                    },

                ],

                // 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"
                    },
                    {
                        "width": "15%",
                        "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()

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




        function viewmodel(date, kitchen_id, category, particularId) {
            arr['date'] = date;
            arr['kitchen_id'] = kitchen_id;
            arr['checklist_type'] = checklist_type;
            arr['category'] = category;
            arr['particularId'] = particularId;
            arr['user_id'] = $('#user_id').val();
            arr['operations'] = $("#view_operation_type").val();
            $("#user_view_table tbody").remove();
            $("#pageloader").fadeIn();
            $.ajax({
                type: 'post',
                url: "load_added_operation_details_v2",
                data: arr,
                success: function(returnData) {
                    var obj = jQuery.parseJSON(returnData);
                    $("#pageloader").fadeOut();
                    if (obj != 0) {
                        var arr = obj;
                        var i = 0;
                        $('#user_view_table').append('<tbody id="user_view_body"></tbody');
                        $.each(arr, function(key, val) {
                            console.log(arr[key]);
                            $('#user_view_body').append('<tr>' +
                                '<td>' + arr[key]['kitchen_name'] + '</td>' +
                                '<td>' + arr[key]['particulars'] + '</td>' +
                                '<td>' + arr[key]['category_name'] + '</td>' +
                                '<td id="opt' + i + '">' + (arr[key]['operation_option'] ?? "N/A") + '</td>' +
                                '<td id="cam' + i + '">' + '</td>' +
                                '<td id="txt' + i + '">' + (arr[key]['operation_text'] ?? "N/A") + '</td>' +
                                '<td>' + (arr[key]['operation_attend_time'] ?? "N/A") + '</td>' +
                                '<td>' + arr[key]['time_bound'] + '</td>' + // Add the extra column here
                                '</tr>');

                            // if (arr[key]['operation_option'] == 'Camera') {
                            //     $('#opt' + i).append('<button type="button" id="imgBtn' + i + '" class="btn btn-danger" onclick="image_view(\'' + arr[key]['image_name'] + '\')"><i class="bi bi-eye"></i></button>');
                            // } else if (arr[key]['operation_option'] == 'Text Box') {
                            //     $('#opt' + i).append('' + arr[key]['text_value'] + '');
                            // } else {
                            //     $('#opt' + i).append('' + arr[key]['operation_option'] + '');
                            // }
                            if (arr[key]['operation_image'] && arr[key]['operation_image'].trim() !== '' && arr[key]['operation_image'].trim() !== 'Null') {
                                $('#cam' + i).append(
                                    '<button type="button" id="imgBtn' + i +
                                    '" class="btn btn-danger" style="background: #d9a441 !important;color:#F2E2D2;border: 1px solid #d9a441;" onclick="image_view(\'' + arr[key]['operation_image'] + '\')">' +
                                    '<i class="bi bi-eye"></i></button>'
                                );
                            } else {
                                $('#cam' + i).append('N/A');
                            }

                            // const rawText = arr[key]?.operation_text;
                            // const text = typeof rawText === 'string' ? rawText.trim() : '';

                            // if (text && text.toLowerCase() !== 'null') {
                            //     $('#txt' + i).append(text ?? 'N/A');
                            // }
                            i++;
                        });


                    }
                }
            });
        }

        function image_view(b_image) {
            $(".img_producto").remove();
            if (b_image != '') {
                var value = 'https://mykitchenoa.com/assets/img/hob_operation/' + b_image + '';
                $(".img_producto_container").append('<img src="' + value + '" class="dslc-lightbox-image img_producto">');
            }
            $("#imageViewModel").modal('show');
        }

        function download_order_images(event) {
            event.preventDefault();
            var imageSrc = $('.img_producto').attr('src');
            var link = document.createElement('a');
            link.href = imageSrc;
            link.download = 'image.jpg';
            document.body.appendChild(link);
            link.click();
            document.body.removeChild(link);
        }

        function reset_main_data() {
            $("#ingrHandover")[0].reset();
            return false;
        }

        $(".img_producto_container")

            .on("mouseover", function() {
                $(this)
                    .children(".img_producto")
                    .css({
                        transform: "scale(" + $(this).attr("data-scale") + ")"
                    });
            })
            .on("mouseout", function() {
                $(this)
                    .children(".img_producto")
                    .css({
                        transform: "scale(1)"
                    });
            })
            .on("mousemove", function(e) {
                $(this)
                    .children(".img_producto")
                    .css({
                        "transform-origin": ((e.pageX - $(this).offset().left) / $(this).width()) * 100 +
                            "% " +
                            ((e.pageY - $(this).offset().top) / $(this).height()) * 100 +
                            "%"
                    });
            });

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

                        // Refresh and check all options
                        $('#user_id').multipleSelect('refresh');
                        $('#user_id').multipleSelect('checkAll');
                        $(".sd-CustomSelect").css({
                            display: "block",
                            visibility: "visible"
                        });
                    } else {
                        $('#user_id').html('');
                        $('#user_id').multipleSelect('refresh');
                    }
                }
            })
        }
    </script>
    <!--  -->


</body>

</html>