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

    /* .btn-close {
        width: 30px; font-weight:500;
    } */

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

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

    .btn-red-v {
        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-v {
        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;
    }

    .btn-red {
        width:90px;
        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 {
        width:90px;
        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;
    }

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

    @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">

                                    <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 Violation  Analysis Report</option>
                                                <option value="recipe_voilation">Recipewise Violation  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="voilationHistory" tabindex="-1">
            <div class="modal-dialog modal-xl modal-dialog-centered">
                <div class="modal-content">

                    <div class="modal-header">
                        <h5 class="modal-title">Report</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;">
                                <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">Manager</th>
                                                <th scope="col">Duration</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").fadeIn();
                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").fadeOut();
                            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 bill_no = row['bill_no'];
                            var item_id = row['item_id'];
                            var id = row['id'];
                            return '<input type="hidden" id="table_id"  value="' + data + '"></input> <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>';
                        }
                    },

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

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

                    {
                        "data": "customer_name",
                        "title": "Customer Name"
                    },
                    {
                        "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_count;
                            return r_count + "/" + item_count;
                        },
                        "title": "Reviews/Orders"
                    },

                    {
                        "data": "kds_captured_by",
                        "title": "Manager"
                    },

                    {
                        "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_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-v">Perfect</button>';
                            } else {
                                if(im == 0) { s+= ' <button class="btn-green-v">IM</button>'; } else if(im == 1) { s+= ' <button class="btn-red-v">IM</button>'; } else { s+='';}
                                if(wp == 0) { s+= ' <button class="btn-green-v">WP</button>'; } else if(wp == 1) { s+= ' <button class="btn-red-v">WP</button>'; } else { s+='';}
                                if(idi == 0){ s+= ' <button class="btn-green-v">ID</button>'; } else if(idi == 1) { s+= ' <button class="btn-red-v">ID</button>'; } else { s+='';}
                                if(wg == 0) { s+= ' <button class="btn-green-v">WG</button>'; } else if(wg == 1) { s+= ' <button class="btn-red-v">WG</button>'; } else { s+='';}
                                if(ni == 0) { s+= ' <button class="btn-green-v">NI</button>'; } else if(ni == 1) { s+= ' <button class="btn-red-v">NI</button>'; } else { s+='';}
                                if(nc == 0) { s+= ' <button class="btn-green-v">NC</button>'; } else if(nc == 1) { s+= ' <button class="btn-red-v">NC</button>'; } else { s+='';}
                            }
                            return s;

                      },
                        "title": "Segment"
                    },

                    {
                        "data": "created_on",
                        "title": "Date & Time"
                    },
                    {
                        "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": "reviewed_by",
                        render: function(data, full, row) {
                            // console.log(row);
                            var reviewer=row['reviewed_by'];
                            if(reviewer == null || reviewer ==''){
                                return reviewer;
                            } else {
                                var result = reviewer.substr(0, 6);
                                return result;  
                            }
                            
                        }
                    },
                    // {
                    //     "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(0)</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 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) {
            if(manager == 'null'){
                manager='';
            }
            if(duration == 'null'){
                duration='';
            }
            $('.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> 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); }
                
            }

        }

    </script>
</body>

</html>