@include('layouts.header');
@include('layouts.sidebar');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="//cdn.rawgit.com/placemarker/jQuery-MD5/master/jquery.md5.js"></script>
<script src="js/jquery.dataTables.min.js"></script>
<script src="js/jquery-ui.min.js"></script>
<script src="js/jquery.validate.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="css/jquery.dataTables.min.css">
<link href='css/jquery-ui.css' rel='stylesheet'>
<script src="//cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<!-- sweet alert -->
<script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>
<style>
    .error {
        color: red;
        font-size: 13px;
        font-weight: 600;
        /* margin-top: 50px; */
    }

    .success-border {
        border: 2px lightgreen ridge;
    }

    .error-border {
        border: 2px red ridge;
    }

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

    label#kitchenId_edit-error {
        padding-top: 58px;
    }


    .ui-datepicker {
        position: absolute;
        top: 114px;
        width: 300px;
        height: 300px;
        color: #963131;
        margin: 5px auto 0;
        font: 12pt Arial, sans-serif;
    }

    .ui-datepicker-header {
        background: #963131;
        color: #963131;
        font-family: 'Times New Roman';
        border-width: 1px 0 0 0;
        border-style: solid;
        border-color: #111;
    }

    .ui-datepicker-calendar .ui-state-default {
        background: linear-gradient(#963131, #963131);
        color: #ffffff;
        height: 35px;
        width: 35px;
        border: 1px;
        border-radius: 2px;
    }

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

    .ui-timepicker-standard a {
        border: 1px solid #d4d4d4;
        color: #ffffff;
        display: block;
        padding: 0.2em 0.4em;
        text-decoration: none;
        background-color: #963131;
    }


    .ui-timepicker-standard .ui-menu-item {
        margin: 0 auto;
        padding: 0 30%;
    }

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

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

    .cam-adjust {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        justify-content: center;
    }

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

    .td-adjust-right {
        padding-right: 20px;

    }

    .td-adjust-left {
        padding-left: 20px;
    }

    .btn-pre-next {
        display: inline-block;
        font-weight: 400;
        line-height: 1.5;
        color: #ffffff;
        text-align: center;
        text-decoration: none;
        vertical-align: middle;
        cursor: pointer;
        -webkit-user-select: none;
        -moz-user-select: none;
        user-select: none;
        background-color: #963131;
        border: 1px solid transparent;
        padding: 0.1rem 0.5rem;
        font-size: 1rem;
        border-radius: 0.25rem;
        transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
    }

    .tbl-head {
        font-size: 12px;
        font-weight: normal;
    }

    #page-wrapper {
        margin: 0 auto;
        position: relative;
        width: 100%;
    }

    #slider-wrapper {
        width: 100%;
    }

    #slider {
        width: 100%;
        position: relative;
    }

    .btn-red {
        background-color: red;
        display: inline-block;
        font-weight: bold;
        line-height: 1;
        color: white;
        text-align: center;
        text-decoration: none;
        vertical-align: middle;
        cursor: pointer;
        -webkit-user-select: none;
        -moz-user-select: none;
        user-select: none;
        border: 1px solid transparent;
        padding: 0.2rem 0.8rem;
        font-size: 12px;
        border-radius: 1.25rem;
        transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
    }

    .btn-green {
        background-color: green;
        display: inline-block;
        font-weight: bold;
        line-height: 1;
        color: white;
        text-align: center;
        text-decoration: none;
        vertical-align: middle;
        cursor: pointer;
        -webkit-user-select: none;
        -moz-user-select: none;
        user-select: none;
        border: 1px solid transparent;
        padding: 0.2rem 0.8rem;
        font-size: 12px;
        border-radius: 1.25rem;
        transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
    }

    .note-size {
        font-size: 15px;
    }

    .redcolor {
        color: red;
    }

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


    }

    .row-adjust {
        padding-right: calc(var(--bs-gutter-x) * .0) !important;
    }

    .image-fit {
        width: 100%;
        height: 300px;
    }

    .ul-fit {
        padding-left: 7rem !important;
    }

    @media only screen and (max-width: 767px) {
        .row-adjust {
            padding-right: calc(var(--bs-gutter-x) * .0) !important;
        }
    }
</style>

<body>
    @include ('layouts.head')
    <div class="col-lg-12" id="pageloader">
        <img src="images/256x256.gif">
    </div>

    <main id="main" class="main">

        <div class="card">
            <div class="card-body">
                <h5 class="card-title">Search</h5>
                <ul class="nav nav-tabs d-flex" id="myTabjustified" role="tablist">
                </ul>
                <div class="tab-content pt-3" id="myTabjustifiedContent">
                    <div class="tab-pane fade show active" id="home-justified" role="tabpanel" aria-labelledby="home-tab">
                        <div class="card">
                            <div class="card-body">

                                <form class="row g-3 pt-3" id="get_order_form" method="POST">
                                    <input type="hidden" name="close_cnf" id="close_cnf" value="">
                                    <div class="col-md-3">
                                        <div class="form-floating">
                                            <select class="form-select" name="kitchen" id="kitchen">
                                                <option value="">All</option>
                                                @foreach ($kitchens as $kitchen)
                                                <option value=" {{ $kitchen->kitchen_new_id }} "> {{ $kitchen->kitchen_name }} </option>
                                                @endforeach
                                            </select>
                                            <label for="floatingName">Select Kitchen</span></label>

                                        </div>
                                    </div>

                                    <div class="col-md-3">
                                        <div class="form-floating">
                                            <select class="form-select" name="v_type" id="v_type">
                                                <option value="">Select</option>
                                                <option value="all_orders">All Orders</option>
                                                <option value="pending_orders">Pending Review Orders</option>
                                                <!-- <option value="voilation_report">Orderwise Voilation Analysis Report</option>
                                                <option value="recipe_voilation">Recipewise Voilation Analysis Report</option> -->
                                            </select>
                                            <label for="floatingName">Select Reports</label>
                                            <p id="ErrorID_1" style="color:red"></p>
                                        </div>
                                    </div>

                                    <div class="col-md-3">
                                        <div class="form-floating">
                                            <input type="text" class="form-control" id="from_date" name="from_date" autocomplete="off" placeholder="Your Name" required="" readonly='true'>
                                            <label for="floatingName">From Date</span></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="to_date" name="to_date" autocomplete="off" placeholder="Your Name" required="" readonly='true'>
                                            <label for="floatingName">To Date</span></label>
                                            <p id="ErrorID_3" style="color:red"></p>
                                        </div>
                                    </div>


                                    <div class="text-center">
                                        <button type="button" onclick="get_orders();" class="btn btn-primary">Submit</button>
                                        <button type="reset" id="" class="btn btn-primary reset-btn">Reset</button>
                                    </div>


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

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

            </div>
        </div>
        <div class="modal fade" id="ExtralargeModalHistory" tabindex="-1">
            <div class="modal-dialog modal-xl modal-dialog-centered">
                <div class="modal-content">

                    <div class="modal-header">
                        <h5 class="modal-title">Order Details</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" onclick="refresh_table();" aria-label="Close"></button>
                    </div>
                    <div class="tab-pane fade show active" id="home-justified_view" role="tabpanel" aria-labelledby="home-tab">
                        <div class="card-body">
                            <!-- <h5 class="card-title text-center"></h5> -->
                            <!-- Floating Labels Form -->
                            <div id="page-wrapper">
                                <div id="slider-wrapper">
                                    <div id="slider">

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


                    </div>
                    <!-- </div> -->

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

        <div class="modal fade" id="voilationHistory" tabindex="-1">
            <div class="modal-dialog modal-xl modal-dialog-centered">
                <div class="modal-content">

                    <div class="modal-header">
                        <h5 class="modal-title">Voilation Analysis</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="tab-pane fade show active" id="home-justified_view" role="tabpanel" aria-labelledby="home-tab">
                        <div class="card-body">
                            <h5 class="card-title text-center"></h5>
                            <!-- Floating Labels Form -->
                            <form id="captureVoilation">
                                <input type="hidden" name="_token" value="{{ csrf_token()}} ">
                                <input type="hidden" class="form-control" id="order_item_id_voilation" name="order_item_id_voilation" autocomplete="off" placeholder="Your Name" readonly required="">
                                <input type="hidden" class="form-control" id="order_auto_id_voilation" name="order_auto_id_voilation" autocomplete="off" placeholder="Your Name" readonly required="">
                                <input type="hidden" class="form-control" id="order_id_voilation" name="order_id_voilation" autocomplete="off" placeholder="Your Name" readonly required="">
                            </form><!-- End floating Labels Form -->

                        </div>


                    </div>
                    <!-- </div> -->

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


        <!-- REPORTS STARTS FROM HERE -->
        <div class="card">
            <div class="card-body">
                <h5 class="card-title" id="type_view">Orders</h5>

                <!-- Bordered Tabs -->

                <h6 class="note-size">*IM stands for Ingredient missing, WP stands for Wrong Placement, ID stands for Incorrect Dish, WG stands for Wrong Garnish, NI stands for Needs Improvement, NC stands for Not Captured.</h6>
                <div class="tab-content pt-2" id="borderedTabContent">
                    <div class="tab-pane fade show active" id="bordered-home" role="tabpanel" aria-labelledby="home-tab">
                        <div class="col-lg-12" id="tcp_table1">
                            <div class="card">
                                <div class="card-body" style="overflow-x: auto;">
                                    <h5 class="card-title"></h5>
                                    <table id="order_list_table" width="100%" class='display dataTable nowrap'>
                                        <thead>
                                            <tr>
                                                <th scope="col">#</th>
                                                <th scope="col">View</th>
                                                <th scope="col">Order ID</th>
                                                <th scope="col">Channel</th>
                                                <th scope="col">Order Date</th>
                                                <th scope="col">Customer Name</th>
                                                <th scope="col">Mobile</th>
                                                <th scope="col">Reviews/Order</th>
                                                <th scope="col">View Status</th>
                                                <th scope="col">Manager</th>
                                                <th scope="col">Duration</th>
                                                <th scope="col">Reviewed On</th>
                                            </tr>
                                        </thead>
                                    </table>

                                    <table id="order_list_voilation_table" width="100%" class='display dataTable nowrap'>
                                        <thead>
                                            <tr>
                                                <th scope="col">#</th>
                                                <th scope="col">View</th>
                                                <th scope="col">Order ID</th>
                                                <th scope="col">Dish Name</th>
                                                <th scope="col">Segment</th>
                                                <th scope="col">Date & Time</th>
                                                <th scope="col">Manager</th>
                                                <th scope="col">Reviewer</th>
                                                <th scope="col">Outlet</th>
                                                <th scope="col">Duration</th>
                                            </tr>
                                        </thead>
                                    </table>

                                    <table id="order_list_voilation_analysis_table" width="100%" class='display dataTable nowrap'>
                                        <thead>
                                            <tr>
                                                <th scope="col">#</th>
                                                <th scope="col">Dish Name</th>
                                                <th scope="col">Segment</th>
                                                <th scope="col">Outlet</th>
                                            </tr>
                                        </thead>
                                    </table>

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


    </main>

    @include('layouts.footer');

    <script type="text/javascript">
        var data = {};
        data['_token'] = "{{csrf_token()}}";

        $(document).ready(function() {
            $("#borderedTabContent").hide();
            $(function() {
                $("#from_date").datepicker({
                    dateFormat: "yy-mm-dd",
                    changeMonth: true,
                    changeYear: true,
                    maxDate: '0',
                    onClose: function(selectedDate) {
                        jQuery("#to_date").datepicker("option", "minDate", selectedDate);
                    }
                });
            });
            $(function() {
                $("#to_date").datepicker({
                    dateFormat: "yy-mm-dd",
                    changeMonth: true,
                    changeYear: true,
                    maxDate: '0',
                    onClose: function(selectedDate) {
                        jQuery("#from_date").datepicker("option", "maxDate", selectedDate);
                    }
                });
            });

            $("#get_order_form").validate({ //Vaildation
                rules: {
                    v_type: "required",
                    from_date: "required",
                    to_date: "required",

                },
                messages: {
                    v_type: "This field is required",
                    from_date: "This field is required",
                    to_date: "This field is required",
                },
                errorPlacement: function(error, element) {
                    if (element.attr("name") == "v_type") {
                        error.appendTo('#ErrorID_1');
                    } else if (element.attr("name") == "from_date") {
                        error.appendTo('#ErrorID_2');
                    } else if (element.attr("name") == "to_date") {
                        error.appendTo('#ErrorID_3');
                    } else {
                        error.insertAfter(element);
                    }
                },

            });

        })



        function get_orders() {
            if ($("#get_order_form").valid()) {
                $("#pageloader").show();
                $('#close_cnf').val("");
                data['from_date'] = $("#from_date").val();
                data['to_date'] = $("#to_date").val();
                data['v_type'] = $("#v_type").val();
                data['kitchen_id'] = $("#kitchen").val();
                var type = $("#v_type").val();
                $.ajax({
                    url: "get_reviewer_orders", // Ajax request
                    type: "post",
                    data: data,
                    success: function(returnData) {
                        var arr = jQuery.parseJSON(returnData)
                        if (arr == 0) {
                            $("#pageloader").hide();
                            alert("No Details found for this Search");
                            $("#get_order_form")[0].reset();
                            $("#borderedTabContent").hide();
                        } else {
                            if (type == 'voilation_report') {
                                $('#order_list_table').hide();
                                $('#order_list_voilation_table').show();
                                $('#order_list_voilation_analysis_table').hide();
                                makeTable_voilation(arr);
                            } else if (type == 'recipe_voilation') {
                                $('#order_list_table').hide();
                                $('#order_list_voilation_table').hide();
                                $('#order_list_voilation_analysis_table').show();
                                makeTable_recipe_voilation(arr);
                            } else {
                                $('#order_list_table').show();
                                $('#order_list_voilation_table').hide();
                                $('#order_list_voilation_analysis_table').hide();
                                makeTable(arr);
                            }
                            $("#pageloader").fadeOut();
                            $("#type_view").text($("#v_type option:selected").text());

                        }
                    }
                })
            }
        }

        function makeTable(arr) {
            // console.log(arr);
            $("#borderedTabContent").show();
            $('#order_list_table').DataTable().destroy();
            $('#order_list_voilation_table').DataTable().destroy();
            $('#order_list_voilation_analysis_table').DataTable().destroy();

            var table = $('#order_list_table').DataTable({
                "autoWidth": true,
                "ordering": false,
                "scrollX": true,
                data: arr,
                "order": [0, 'desc'],

                "columns": [{
                        "data": "id",
                        render: function(data, full, row) {
                            // console.log(data);
                            var id = row['id'];
                            // if(status == 1){
                            return id;
                            // } else {
                            // return "Not Captured"
                            // }
                        },
                        "title": "#"
                    },
                    {
                        "data": 'order_id',
                        render: function(data, full, row) {
                            // console.log(row);
                            var review = row['is_reviewd']
                            var bill_no = row['bill_no'];
                            var item_id = row['item_id'];
                            var id = row['id'];
                            if (review == 0) {
                                return '<button data-bs-toggle="modal" data-bs-target="#ExtralargeModalHistory" type="submit" class="btn btn-danger" onclick="viewHistorymodel(\'' + bill_no + '\',\'' + item_id + '\',\'' + id + '\')"><i class="fa-solid fa-eye"></i></button>';
                            } else {
                                return '<button type="button" class="btn btn-danger" onclick="view_review()"><i class="fa-solid fa-eye"></i></button>';
                            }
                        }
                    },

                    {
                        "data": "label",
                        "title": "Order ID"
                    },

                    {
                        "data": "order_from",
                        "title": "Channel"
                    },
                    {
                        "data": "created_on",
                        "title": "Order Date"
                    },

                    {
                        "data": "customer_name",
                        render: function(data, full, row) {
                            // console.log(row);
                            var order_from = row['order_from'];
                            var customer_name = row['customer_name'];
                            if (order_from == 'pos' && customer_name == '' || customer_name == 'null') {
                                return order_from;
                            } else {
                                var result = customer_name.substr(0, 6);
                                return result;
                            }
                        }

                    },
                    {
                        "data": "customer_phone",
                        "title": "Mobile"
                    },
                    {
                        "data": "is_image_captured",
                        render: function(data, full, row) {
                            // console.log(data);
                            var r_count = row.review_count;
                            var item_count = row.item_total;
                            return r_count + "/" + item_count;
                        },
                        "title": "Reviews/Orders"
                    },

                    {
                        "data": "is_reviewd",
                        render: function(data, full, row) {
                            var status = row['is_reviewd'];
                            if (status == 0) {
                                return "Pending";
                            } else {
                                return "Reviewed";
                            }

                        },
                        "title": "View Status"
                    },

                    {
                        "data": "kds_captured_by",
                        render: function(data, full, row) {
                            // console.log(row);
                            var manager = row['kds_captured_by'];
                            if (manager == null || manager == '') {
                                return manager;
                            } else {
                                var result = manager.substr(0, 6);
                                return result;
                            }

                        }
                    },

                    {
                        "data": "kds_last_duration",
                        "title": "Duration"
                    },
                    {
                        "data": "reviewed_on",
                        "title": "Reviewed On"
                    },
                ],

                columnDefs: [{
                        "width": "1%",
                        "targets": [0],
                        "orderable": false,
                        "className": "dt-center",
                        "searching": true,
                    },
                    {
                        "width": "1%",
                        "targets": [1],
                        "className": "dt-center"
                    },
                    {
                        "width": "5%",
                        "targets": [2],
                        "className": "dt-center"
                    },
                    {
                        "width": "10%",
                        "targets": [3],
                        "className": "dt-center"
                    },
                    {
                        "width": "1%",
                        "targets": [4],
                        "className": "dt-center"
                    },
                    {
                        "width": "5%",
                        "targets": [5],
                        "className": "dt-center"
                    },
                    {
                        "width": "1%",
                        "targets": [6],
                        "className": "dt-center"
                    },
                    {
                        "width": "1%",
                        "targets": [7],
                        "className": "dt-center"
                    }
                ],
            });

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

        function makeTable_voilation(arr) {
            // console.log(arr);
            $("#borderedTabContent").show();
            $('#order_list_table').DataTable().destroy();
            $('#order_list_voilation_table').DataTable().destroy();
            $('#order_list_voilation_analysis_table').DataTable().destroy();
            var table = $('#order_list_voilation_table').DataTable({
                "autoWidth": true,
                "ordering": false,
                "scrollX": true,
                data: arr,
                "order": [0, 'desc'],

                "columns": [{
                        "data": "id",
                        render: function(data, full, row) {
                            // console.log(data);
                            var id = row['id'];
                            // if(status == 1){
                            return id;
                            // } else {
                            // return "Not Captured"
                            // }
                        },
                        "title": "#"
                    },
                    {
                        "data": 'order_id',
                        render: function(data, full, row) {
                            // console.log(row);
                            var order_id = row['bill_no'];
                            var item_id = row['item_id'];
                            var order_auto_id = row['order_auto_id'];
                            var perfect = row['perfect'];
                            var im = row['im'];
                            var wp = row['wp'];
                            var idi = row['idi'];
                            var wg = row['wg'];
                            var ni = row['ni'];
                            var nc = row['nc'];
                            var item_count = row['item_count'];
                            var kds_captured_name = row['kds_captured_name'];
                            var desired_image = row['desired_image'];
                            var kds_captured_by = row['kds_captured_by'];
                            var kds_duration = row['kds_duration'];
                            var kitchen = row['kitchen_name'];
                            var created_on = row['created_on'];
                            var label = row['label'];
                            var source = row['order_from'];
                            var comment = row['comment'];
                            var order_items = row['order_items'];

                            return '<input type="hidden" id="table_id"  value="' + data + '"></input> <button data-bs-toggle="modal" data-bs-target="#voilationHistory" type="submit" class="btn btn-danger" onclick="view_voilation(\'' + order_id + '\',\'' + item_id + '\',\'' + order_auto_id + '\',\'' + perfect + '\',\'' + im + '\',\'' + wp + '\',\'' + idi + '\',\'' + wg + '\',\'' + ni + '\',\'' + nc + '\',\'' + comment + '\',\'' + kitchen + '\',\'' + created_on + '\',\'' + item_count + '\',\'' + kds_duration + '\',\'' + kds_captured_by + '\',\'' + desired_image + '\',\'' + label + '\',\'' + source + '\',\'' + kds_captured_name + '\',\'' + order_items + '\')"><i class="fa-solid fa-eye"></i></button>';
                        }
                    },

                    {
                        "data": "label",
                        "title": "Order ID"
                    },

                    {
                        "data": "order_items",
                        "title": "Dish Name"
                    },
                    {
                        "data": "perfect",
                        render: function(data, full, row) {
                            var s = '';
                            var perfect = row['perfect'];
                            var im = row['im'];
                            var wp = row['wp'];
                            var idi = row['idi'];
                            var wg = row['wg'];
                            var ni = row['ni'];
                            var nc = row['nc'];
                            if (perfect == 1) {
                                s += '<button class="btn-green">Perfect</button>';
                            } else {
                                if (im == 0) {
                                    s += ' <button class="btn-green">IM</button>';
                                } else if (im == 1) {
                                    s += ' <button class="btn-red">IM</button>';
                                } else {
                                    s += '';
                                }
                                if (wp == 0) {
                                    s += ' <button class="btn-green">WP</button>';
                                } else if (wp == 1) {
                                    s += ' <button class="btn-red">WP</button>';
                                } else {
                                    s += '';
                                }
                                if (idi == 0) {
                                    s += ' <button class="btn-green">ID</button>';
                                } else if (idi == 1) {
                                    s += ' <button class="btn-red">ID</button>';
                                } else {
                                    s += '';
                                }
                                if (wg == 0) {
                                    s += ' <button class="btn-green">WG</button>';
                                } else if (wg == 1) {
                                    s += ' <button class="btn-red">WG</button>';
                                } else {
                                    s += '';
                                }
                                if (ni == 0) {
                                    s += ' <button class="btn-green">NI</button>';
                                } else if (ni == 1) {
                                    s += ' <button class="btn-red">NI</button>';
                                } else {
                                    s += '';
                                }
                                if (nc == 0) {
                                    s += ' <button class="btn-green">NC</button>';
                                } else if (nc == 1) {
                                    s += ' <button class="btn-red">NC</button>';
                                } else {
                                    s += '';
                                }
                            }
                            return s;

                        },
                        "title": "Segment"
                    },

                    {
                        "data": "created_on",
                        "title": "Date & Time"
                    },
                    {
                        "data": "kds_captured_by",
                        "title": "Manager"
                    },
                    {
                        "data": "reviewed_by",
                        "title": "Reviewer"
                    },
                    {
                        "data": "kitchen_name",
                        "title": "Outlet"
                    },
                    {
                        "data": "kds_last_duration",
                        "title": "Duration"
                    },
                ],

                columnDefs: [{
                        "width": "1%",
                        "targets": [0],
                        "orderable": false,
                        "className": "dt-center",
                        "searching": true,
                    },
                    {
                        "width": "1%",
                        "targets": [1],
                        "className": "dt-center"
                    },
                    {
                        "width": "5%",
                        "targets": [2],
                        "className": "dt-center"
                    },
                    {
                        "width": "10%",
                        "targets": [3],
                        "className": "dt-center"
                    },
                    {
                        "width": "1%",
                        "targets": [4],
                        "className": "dt-center"
                    },
                    {
                        "width": "5%",
                        "targets": [5],
                        "className": "dt-center"
                    },
                    {
                        "width": "1%",
                        "targets": [6],
                        "className": "dt-center"
                    },
                    {
                        "width": "1%",
                        "targets": [7],
                        "className": "dt-center"
                    }
                ],
            });

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


        function makeTable_recipe_voilation(arr) {
            // console.log(arr);
            $("#borderedTabContent").show();
            $('#order_list_table').DataTable().destroy();
            $('#order_list_voilation_table').DataTable().destroy();
            $('#order_list_voilation_analysis_table').DataTable().destroy();
            var table = $('#order_list_voilation_analysis_table').DataTable({
                "autoWidth": true,
                "ordering": false,
                "scrollX": true,
                data: arr,
                "order": [0, 'desc'],

                "columns": [{
                        "data": "id",
                        render: function(data, full, row) {
                            // console.log(data);
                            var id = row['id'];
                            // if(status == 1){
                            return id;
                            // } else {
                            // return "Not Captured"
                            // }
                        },
                        "title": "#"
                    },
                    {
                        "data": "order_items",
                        "title": "Dish Name"
                    },
                    {
                        "data": "perfect",
                        render: function(data, full, row) {
                            var s = '';
                            var perfect = row['perfect_check_count'];
                            var perfect_sts = row['perfect'];
                            var im_sts = row['im'];
                            var wp_sts = row['wp'];
                            var idi_sts = row['idi'];
                            var wg_sts = row['wg'];
                            var ni_sts = row['ni'];
                            var nc_sts = row['nc'];
                            var im = row['im_check_count'];
                            var wp = row['wp_check_count'];
                            var idi = row['idi_check_count'];
                            var wg = row['wg_check_count'];
                            var ni = row['ni_check_count'];
                            var nc = row['nc_check_count'];
                            if (perfect_sts != null) {
                                if (perfect == 0) {
                                    s += '<button class="btn-red">Perfect</button>';
                                } else if (perfect > 0) {
                                    s += '<button class="btn-green">Perfect(' + perfect + ')</button>';
                                }
                            } else {
                                s += '';
                            }
                            if (im_sts != null) {
                                if (im == 0) {
                                    s += ' <button class="btn-green">IM</button>';
                                } else if (im > 0) {
                                    s += ' <button class="btn-red">IM(' + im + ')</button>';
                                }
                            } else {
                                s += '';
                            }
                            if (wp_sts != null) {
                                if (wp == 0) {
                                    s += ' <button class="btn-green">WP</button>';
                                } else if (wp > 0) {
                                    s += ' <button class="btn-red">WP(' + wp + ')</button>';
                                }
                            } else {
                                s += '';
                            }
                            if (idi_sts != null) {
                                if (idi == 0) {
                                    s += ' <button class="btn-green">ID</button>';
                                } else if (idi > 0) {
                                    s += ' <button class="btn-red">ID(' + idi + ')</button>';
                                }
                            } else {
                                s += '';
                            }
                            if (wg_sts != null) {
                                if (wg == 0) {
                                    s += ' <button class="btn-green">WG</button>';
                                } else if (wg > 0) {
                                    s += ' <button class="btn-red">WG(' + wg + ')</button>';
                                }
                            } else {
                                s += '';
                            }
                            if (ni_sts != null) {
                                if (ni == 0) {
                                    s += ' <button class="btn-green">NI</button>';
                                } else if (ni > 0) {
                                    s += ' <button class="btn-red">NI(' + ni + ')</button>';
                                }
                            } else {
                                s += '';
                            }
                            if (nc_sts != null) {
                                if (nc == 0) {
                                    s += ' <button class="btn-green">NC</button>';
                                } else if (nc > 0) {
                                    s += ' <button class="btn-red">NC(' + nc + ')</button>';
                                }
                            } else {
                                s += '';
                            }

                            return s;

                        },
                        "title": "Segment"
                    },
                    {
                        "data": "kitchen_name",
                        "title": "Outlet"
                    }
                ],

                columnDefs: [{
                        "width": "2%",
                        "targets": [0],
                        "orderable": false,
                        "className": "dt-center",
                        "searching": true,
                    },
                    {
                        "width": "10%",
                        "targets": [1],
                        "className": "dt-center"
                    },
                    {
                        "width": "25%",
                        "targets": [2],
                        "className": "dt-center"
                    }
                ],
            });

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

        function check_event(checkbox, id) {
            if (checkbox.checked == true) {
                $('#im' + id).attr("disabled", "disabled");
                $('#wp' + id).attr("disabled", "disabled");
                $('#idd' + id).attr("disabled", "disabled");
                $('#wg' + id).attr("disabled", "disabled");
                $('#ni' + id).attr("disabled", "disabled");
                $('#nc' + id).attr("disabled", "disabled");
            } else {
                $('#im' + id).removeAttr('disabled');
                $('#wp' + id).removeAttr('disabled');
                $('#idd' + id).removeAttr('disabled');
                $('#wg' + id).removeAttr('disabled');
                $('#ni' + id).removeAttr('disabled');
                $('#nc' + id).removeAttr('disabled');
            }
        }

        function check_event_next(checkbox, id) {
            if (checkbox.checked == true) {
                $('#perfect' + id).attr("disabled", "disabled");
            } else {
                if (($('#im' + id).prop('checked') == false) && ($('#wp' + id).prop('checked') == false) && ($('#idd' + id).prop('checked') == false) && ($('#wg' + id).prop('checked') == false) && ($('#ni' + id).prop('checked') == false) && ($('#nc' + id).prop('checked') == false)) {
                    $('#perfect' + id).removeAttr('disabled');
                } else {
                    $('#perfect' + id).attr("disabled", "disabled");
                }
            }
        }

        function viewHistorymodel(order_id, item_id, order_auto_id) {
            $(".desired-info").remove();
            $(".cap-info").remove();
            $(".sp").remove();
            $(".normalcolor").remove();
            $(".redcolor").remove();
            var data = {};
            data['item_id'] = item_id;
            data['order_id'] = order_id;
            data['order_auto_id'] = order_auto_id;
            data['_token'] = "{{ csrf_token() }}";
            $.ajax({
                type: 'POST',
                url: "get_reviewer_items_info", // Ajax request  
                data: data,
                success: function(data) {
                    var arr = jQuery.parseJSON(data);
                    if (arr.length > 0) {
                        var i = 1;
                        var item_count = arr.length;
                        $.each(arr, function(key, val) {
                            if (arr[key]['kds_captured_by'] == null) {
                                arr[key]['kds_captured_by'] = ''
                            }
                            if (arr[key]['kds_duration'] == null) {
                                arr[key]['kds_duration'] = ''
                            }
                            $("#slider").append('<div class="sp"> <form id="captureSubmit' + arr[key]['item_id'] + '"><input type="hidden" name="_token" value="{{ csrf_token()}} "><input type="hidden" value="' + arr[key]['item_id'] + '" class="form-control" id="order_item_id' + arr[key]['item_id'] + '" name="order_item_id" readonly><input type="hidden" class="form-control" id="order_auto_id' + arr[key]['item_id'] + '" name="order_auto_id" value="' + arr[key]['order_auto_id'] + '"><input type="hidden" class="form-control" id="order_id' + arr[key]['item_id'] + '" name="order_id" value="' + arr[key]['order_id'] + '"><input type="hidden" value="' + arr[key]['kitchen_id'] + '" class="form-control" id="kitchen_id' + arr[key]['item_id'] + '" name="kitchen_id" readonly>' +
                                '<div class="row"><div class="col-md-12 text-center"><h5><b><u>' + arr[key]['order_items'] + '</u></b></h5></div><div class="col-md-4 text-center"><b>ACTUAL</b><br><div> <img src="assets/img/kds_images/' + arr[key]['desired_image'] + '" class="image-fit" /></div></div>' +
                                '<div class="col-md-4" ><ul class="align-items-center ul-fit"><li><b> Order No:</b>' + arr[key]['label'] + '</li><li><b> Outlet:</b> ' + arr[key]['kitchen_name'] + ' </li><li><b> Date:</b>' + arr[key]['created_on'] + '</li><li><b> Dish No/Total Dish:</b>' + i + '/' + item_count + '</li><li><b> Channel:</b>' + arr[key]['order_from'] + '</li><li><b> Manager:</b> ' + arr[key]['kds_captured_by'] + '</li><li id="duration_red' + i + '"><b> Duration:</b></li>' +
                                '<table><tr><td><b>Perfect</b></td><td><input type="checkbox" name="perfect" id="perfect' + arr[key]['item_id'] + '" onchange="check_event(this,' + arr[key]['item_id'] + ');" /></td></tr><tr><td><br></td><td><br></td></tr>' +
                                '<tr><td><b>Ingredient Missing</b></td><td><input type="checkbox" name="im" id="im' + arr[key]['item_id'] + '" onchange="check_event_next(this,' + arr[key]['item_id'] + ');" /> </td></tr>' +
                                '<tr><td><b>Wrong Placement</b></td><td><input type="checkbox" name="wp" id="wp' + arr[key]['item_id'] + '" onchange="check_event_next(this,' + arr[key]['item_id'] + ');" /></td></tr>' +
                                '<tr><td><b>Incorrect Dish</b></td><td><input type="checkbox" name="idd" id="idd' + arr[key]['item_id'] + '" onchange="check_event_next(this,' + arr[key]['item_id'] + ');" /></td></tr>' +
                                '<tr><td><b>Wrong Garnish</b></td><td><input type="checkbox" name="wg" id="wg' + arr[key]['item_id'] + '" onchange="check_event_next(this,' + arr[key]['item_id'] + ');" /></td></tr>' +
                                '<tr><td><b>Needs Improvement</b></td><td><input type="checkbox" name="ni" id="ni' + arr[key]['item_id'] + '" onchange="check_event_next(this,' + arr[key]['item_id'] + ');" /></td></tr>' +
                                '<tr><td><b>Not Captured</b></td><td><input type="checkbox" name="nc" id="nc' + arr[key]['item_id'] + '" onchange="check_event_next(this,' + arr[key]['item_id'] + ');" /></td></tr></table></ul>' +
                                '<table><tr><td class="td-adjust-right"><button type="button" class="btn-pre-next button-previous" id="button-previous" onclick="btn_prev(' + arr[key]['order_auto_id'] + ')"><i class="bi bi-arrow-left"></i></button></td>' +
                                '<td width="400"><textarea rows="3" cols="3" class="form-control" id="comment' + arr[key]['item_id'] + '" name="comment" autocomplete="off" placeholder="Your Comment..." required=""></textarea></td>' +
                                '<td class="td-adjust-left"><button type="button" class="btn-pre-next button-next" id="' + arr[key]['item_id'] + '" onclick="submit_next(this.id,' + arr[key]['order_auto_id'] + ')"><i class="bi bi-arrow-right"></i></button></td></tr></table></div>' +
                                '<div class="col-md-4 text-center"><b>CAPTURED</b><br><div> <img src="assets/img/kds_uploads/' + arr[key]['kds_captured_name'] + '" class="image-fit" /></div></div></div></form></div>');
                            if (arr[key]['kds_duration'] == '') {
                                $("#duration_red" + i).append('<span class="normalcolor">' + arr[key]['kds_duration'] + '</span>');
                            } else {
                                var text = arr[key]['kds_duration'];
                                var myArray = text.split(":");
                                if (myArray[0] == 0 && myArray[1] <= 15) {
                                    $("#duration_red" + i).append('<span class="normalcolor">' + arr[key]['kds_duration'] + '</span>');
                                } else {
                                    $("#duration_red" + i).append('<span class="redcolor">' + arr[key]['kds_duration'] + '</span>');
                                }
                            }
                            i++;
                            if (arr[key]['perfect'] == 1) {
                                $('#perfect' + arr[key]['item_id']).prop('checked', true);
                            }
                            if (arr[key]['im'] == 1) {
                                $('#im' + arr[key]['item_id']).prop('checked', true);
                            }
                            if (arr[key]['wp'] == 1) {
                                $('#wp' + arr[key]['item_id']).prop('checked', true);
                            }
                            if (arr[key]['idd'] == 1) {
                                $('#idd' + arr[key]['item_id']).prop('checked', true);
                            }
                            if (arr[key]['wg'] == 1) {
                                $('#wg' + arr[key]['item_id']).prop('checked', true);
                            }
                            if (arr[key]['ni'] == 1) {
                                $('#ni' + arr[key]['item_id']).prop('checked', true);
                            }
                            if (arr[key]['nc'] == 1) {
                                $('#nc' + arr[key]['item_id']).prop('checked', true);
                            }
                            $('#comment' + arr[key]['item_id']).val(arr[key]['comment']);

                        });

                        $('.sp').first().addClass('currentActive');
                        $('.sp').hide();
                        $('.currentActive').show();
                    }
                }
            })
        }



        function view_voilation(order_id, item_id, order_auto_id, perfect, im, wp, idi, wg, ni, nc, comment, kitchen, created_on, item_count, duration, manager, desired_img, label, source, kds_captured_name, dish_name) {
            $('.voilation-data').remove();
            $('#order_item_id_voilation').val(item_id);
            $('#order_id_voilation').val(order_id);
            $('#order_auto_id_voilation').val(order_auto_id);
            $("#captureVoilation").append('<div class="row pt-3 g-3 voilation-data"><div class="col-md-12 text-center"><h5><b><u>' + dish_name + '</u></b></h5></div>' +
                '<div class="col-md-1 text-center"></div><div class="col-md-4 text-center"><b>ACTUAL</b><br><div> <img src="assets/img/kds_images/' + desired_img + '" width="320" height="250" /></div></div>' +
                '<div class="col-md-2"><ul class="align-items-center"><li><b> Order No:</b>' + label + '</li><li><b> Outlet:</b>' + kitchen + ' </li><li><b> Date:</b>' + created_on + '</li><li><b> Total Dish:</b>' + item_count + '</li><li><b> Channel:</b>' + source + '</li><li><b> Manager:</b>' + manager + '</li><li><b> Duration:</b>' + duration + '</li>' +
                '<table><tr><td><b>Perfect</b></td><td><input type="checkbox" name="perfect_v" id="perfect_v" disabled /></td></tr>' +
                '<tr><td><br></td><td><br></td></tr><tr><td><b>Ingredient Missing</b></td><td><input type="checkbox" name="im_v" id="im_v" disabled /> </td></tr>' +
                '<tr><td><b>Wrong Placement</b></td><td><input type="checkbox" name="wp_v" id="wp_v" disabled /></td></tr>' +
                '<tr><td><b>Incorrect Dish</b></td><td><input type="checkbox" name="idi_v" id="idi_v" disabled /></td></tr>' +
                '<tr><td><b>Wrong Garnish</b></td><td><input type="checkbox" name="wg_v" id="wg_v" disabled /></td></tr>' +
                '<tr><td><b>Needs Improvement</b></td><td><input type="checkbox" name="ni_v" id="ni_v" disabled /></td></tr>' +
                '<tr><td><b>Not Captured</b></td><td><input type="checkbox" name="nc_v" id="nc_v" disabled /></td></tr></table>' +
                '</ul><textarea rows="3" cols="6" class="form-control" id="comment_v" name="comment_v" autocomplete="off" placeholder="Reviewer Comments" readonly>' + comment + '</textarea></div>' +
                '<div class="col-md-4 text-center"><b>CAPTURED</b><br><div> <img src="assets/img/kds_uploads/' + kds_captured_name + '" width="320" height="250" /></div><div class="col-md-1 text-center"></div></div></div>');
            if (perfect == 1) {
                $('#perfect_v').prop('checked', true);
            } else {
                if (im == 1) {
                    $('#im_v').prop('checked', true);
                } else {
                    $('#im_v').prop('checked', false);
                }
                if (wp == 1) {
                    $('#wp_v').prop('checked', true);
                } else {
                    $('#wp_v').prop('checked', false);
                }
                if (idi == 1) {
                    $('#idi_v').prop('checked', true);
                } else {
                    $('#idi_v').prop('checked', false);
                }
                if (wg == 1) {
                    $('#wg_v').prop('checked', true);
                } else {
                    $('#wg_v').prop('checked', false);
                }
                if (ni == 1) {
                    $('#ni_v').prop('checked', true);
                } else {
                    $('#ni_v').prop('checked', false);
                }
                if (nc == 1) {
                    $('#nc_v').prop('checked', true);
                } else {
                    $('#nc_v').prop('checked', false);
                }

            }

        }

        function submit_next(id, auto_id) {
            $('#close_cnf').val("yes");
            var data = {};
            data['item_id'] = $("#order_item_id" + id).val();
            data['order_id'] = $("#order_id" + id).val();
            data['order_auto_id'] = $("#order_auto_id" + id).val();
            data['kitchen_id'] = $("#kitchen_id" + id).val();
            data['perfect'] = $("#perfect" + id).prop("checked") ? 1 : 0;
            data['im'] = $("#im" + id).prop("checked") ? 1 : 0;
            data['wp'] = $("#wp" + id).prop("checked") ? 1 : 0;
            data['idd'] = $("#idd" + id).prop("checked") ? 1 : 0;
            data['wg'] = $("#wg" + id).prop("checked") ? 1 : 0;
            data['ni'] = $("#ni" + id).prop("checked") ? 1 : 0;
            data['nc'] = $("#nc" + id).prop("checked") ? 1 : 0;
            data['comment'] = $("#comment" + id).val();
            data['_token'] = "{{ csrf_token() }}";
            if ($("#perfect" + id).prop("checked") || $("#im" + id).prop("checked") || $("#wp" + id).prop("checked") || $("#idd" + id).prop("checked") || $("#wg" + id).prop("checked") || $("#ni" + id).prop("checked") || $("#nc" + id).prop("checked")) {
                $.ajax({
                    type: 'POST',
                    url: "submit_reviewer_data", // Ajax request  
                    data: data,
                    success: function(result) {
                        if (result) {
                            btn_nxt(auto_id);
                        } else {
                            alert("Sorry! Error While Submitting the Data")
                        }
                    }
                })
            } else {
                Swal.fire({
                    icon: 'error',
                    text: 'Sorry! Please Review Atleast one check Box',
                })
            }
        }

        function btn_prev(auto_id) {
            $('.currentActive').removeClass('currentActive').addClass('oldActive');
            if ($('.oldActive').is(':first-child')) {
                //$('.sp').last().addClass('active');
                // Swal.fire({
                //             icon: 'error',
                //             text: 'This is First data cannot go previous',
                //         })
                var data = {};
                data['_token'] = "{{ csrf_token() }}";
                data['auto_id'] = auto_id;
                data['from_date'] = $("#from_date").val();
                data['to_date'] = $("#to_date").val();
                data['v_type'] = $("#v_type").val();
                data['kitchen_id'] = $("#kitchen").val();
                $.ajax({
                    type: 'POST',
                    url: "get_prev_order_id", // Ajax request  
                    data: data,
                    success: function(result) {
                        var arr = jQuery.parseJSON(result);
                        if (arr.length > 0) {
                            var order_id = arr[0]['order_id'];
                            var order_auto_id = arr[0]['id'];
                            var item_id = '';
                            // $('.btn-close').click();
                            // $('#ExtralargeModalHistory').modal();  
                            viewHistorymodel(order_id, item_id, order_auto_id);
                        } else {
                            // Swal.fire({
                            //     icon: 'success',
                            //     text: 'Hey! Thank you For Reviewing all items in Particular Order',
                            // })
                            Swal.fire({
                                icon: 'error',
                                text: 'This is First data cannot go previous',
                            })
                           // get_orders();
                            $('.btn-close').click();
                        }
                    }
                })

            } else {
                $('.oldActive').prev().addClass('currentActive');
                $('.oldActive').removeClass('oldActive');
                $('.sp').fadeOut();
                $('.currentActive').fadeIn();
            }

        }

        function btn_nxt(auto_id) {
            $('.currentActive').removeClass('currentActive').addClass('oldActive');
            if ($('.oldActive').is(':last-child')) {
                // Swal.fire({
                //     icon: 'success',
                //     text: 'Hey! Thank you For Reviewing all items in Particular Order. Next order items appear here...',
                // })
                var data = {};
                data['_token'] = "{{ csrf_token() }}";
                data['auto_id'] = auto_id;
                data['from_date'] = $("#from_date").val();
                data['to_date'] = $("#to_date").val();
                data['v_type'] = $("#v_type").val();
                data['kitchen_id'] = $("#kitchen").val();
                $.ajax({
                    type: 'POST',
                    url: "get_next_order_id", // Ajax request  
                    data: data,
                    success: function(result) {
                        var arr = jQuery.parseJSON(result);
                        if (arr.length > 0) {
                            var order_id = arr[0]['order_id'];
                            var order_auto_id = arr[0]['id'];
                            var item_id = '';
                            // $('.btn-close').click();
                            // $('#ExtralargeModalHistory').modal();  
                            viewHistorymodel(order_id, item_id, order_auto_id);
                        } else {
                            Swal.fire({
                                icon: 'success',
                                text: 'Hey! Thank you For Reviewing all items in Particular Order',
                            })
                            get_orders();
                            $('.btn-close').click();
                        }
                    }
                })
            } else {
                $('.oldActive').next().addClass('currentActive');
                $('.oldActive').removeClass('oldActive');
                $('.sp').fadeOut();
                $('.currentActive').fadeIn();
            }

        }

        function view_review() {

            Swal.fire({
                icon: 'success',
                text: 'Hey! You already reviewed this order',

            })
        }

        function refresh_table() {
            var res = $('#close_cnf').val();
            if (res == 'yes') {
                get_orders();
            }

        }
    </script>
</body>

</html>