@include('layouts.headElement')
@include('layouts.headerNormal')
@include('layouts.sidebarV2')
<script src="js/jquery-ui.min.js"></script>
<script src="assets/vendor/timepicker/jquery.timepicker.min.js"></script>
<link rel="stylesheet" href="assets/vendor/timepicker/jquery.timepicker.min.css" />
<!-- <link href='css/jquery-ui.css' rel='stylesheet'> -->
<style>
    #captureSubmit {
        padding: 10px;

    }

    .error {
        color: red;
        font-size: 13px;
        font-weight: 600;
        /* margin-top: 50px; */
    }

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

    .adhar_card,
    .adhar_card:focus {
        border: none !important;
        padding: 7px;
        /* margin-left: 16px; */
        margin-left: 8px;
        width: 108px;

        /* margin-right: 86px; */
        /* margin-top: -5px; */
    }

    .adhar_card::file-selector-button {
        background-color: #963131;
        color: #963131;
        border: none;
        padding: 9px;
        /* margin-right: 86px; */
        margin-top: -5px;

    }

    .adhar_card11,
    .adhar_card11:focus {
        border: none !important;
        padding: 7px;
        /* margin-left: 16px; */
        margin-left: 8px;
        width: 108px;
        /* margin-right: 86px; */
        /* margin-top: -5px; */
    }

    .adhar_card11::file-selector-button {
        background-color: #963131;
        color: #963131;
        border: none;
        padding: 9px;
        /* margin-right: 86px; */
        margin-top: -5px;

    }

    .aadhar_doc_file {
        color: white;
        text-align: center;
        margin-top: -9px;
        margin-left: 11px;
    }

    .aadhar_doc_file22 {
        color: white;
        text-align: center;
        margin-top: -9px;
        margin-left: 11px;

    }

    input[name='order_photo'] {
        color: transparent;
    }

    input[name='order_photo']::before {
        font-size: 14px;
        /* content: 'Choose File'; */
        color: #000000;
        font-weight: bold;

    }

    .custom-file-upload {
        color: #fff;
        display: inline-block;
        padding: 10px 20px;
        cursor: pointer;
        background-color: #963131;
        border: 1px solid #963131;
        border-radius: 4px;
    }

    .custom-file-upload:hover {
        background-color: #963131;
    }

    #order_photo {
        display: none;
    }



    #preview_front {
        width: 300px;
        height: 300px;
        /* border-radius: 50%; */
        border: 1px solid black;
        overflow: hidden;
        position: relative;
    }

    #preview_front img {
        width: 100%;
        height: 100%;
        object-fit: contain;
        /* position: absolute; */

    }

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

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

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

    .uploadfiles {
        margin-bottom: 10px;
    }


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


    .cam-adjust {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        justify-content: center;
        padding: 10px !important;
    }

    .image-design {
        border: 1px solid;
        background: #fff;
        width: 100%;
        height: auto;
        padding: 1%;
    }


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

    .captured {
        background: green !important;
        border: green !important;
    }

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

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

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

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

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

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

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

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

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

    }

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

    .select2-container--default .select2-selection--single .select2-selection__rendered {
        margin-top: 19px;
    }


</style>

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

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

                    </div>
                </div>
            </div>
            <div class="card form-container p-0">
                <div class="card-body p-1">
                    <!-- <h5 class="card-title">Search</h5> -->
                    <ul class="nav nav-tabs d-flex" id="myTabjustified" role="tablist" style="border:none">
                    </ul>
                    <div class="tab-content pt-0" id="myTabjustifiedContent">
                        <div class="tab-pane fade show active" id="home-justified" role="tabpanel" aria-labelledby="home-tab">
                            <div class="card p-0" style="border:none">
                                <div class="card-body p-1">
                                    <form class="" id="get_order_form" method="POST">
                                        <div class="row p-2 g-2">
                                            <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->id }} "> {{ $kitchen->kitchen_name }} </option>
                                                        @endforeach
                                                    </select>
                                                    <label for="floatingName">Select Kitchen</span></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="order_id" name="order_id" autocomplete="off" placeholder="Your Name" required="">
                                                    <label for="floatingName">Enter Order ID</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="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="col-md-3">
                                            <div class="form-floating">
                                                <select class="selUser form-select" name="brands_name" id="brands_name" data-placeholder="Select Brand Name">
                                                 
                                                    <option value="0">All</option>
                                                    @foreach ($brand_name as $brand)
                                                    <option value=" {{ $brand->order_rest_name }} "> {{ $brand->order_rest_name }} </option>
                                                    @endforeach
                                                </select>
                                                <label for="floatingName">Brank Name</span></label>
                                                <p id="ErrorID_brands_name" style="color:red"></p>
                                            </div>
                                        </div> -->

                                        </div>

                                        <div class="text-center buttons-container">
                                            <button type="button" id="submit_assign_hub" onclick="send_id();" class="btn submit-btn">Submit</button>
                                            <button type="reset" id="reset_main" class="btn  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" class="delete_modal">
                        <div class="modal-header">
                            <h5 class="modal-title">Order Details</h5>
                            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                        </div>
                        <div class="tab-content" id="myTabjustifiedContent">

                            <form action="" id="detailed_form" enctype="multipart/form-data">
                                <div class="tab-pane fade show active" id="home-justified_view" role="tabpanel" aria-labelledby="home-tab">
                                    <div class="col-md-12">
                                        <div class="card p-0" style="border:none">
                                            <div class="card-body p-1">
                                                <div class="row g-1">
                                                    <!-- <div class="col-md-4">
                                                    <div class="form-floating mb-3">
                                                        <input type="text" class="form-control" id="kitchen" name="kitchen" autocomplete="off" placeholder="Your Name" readonly>
                                                        <label for="floatingName">Kitchen</label>
                                                        <p id=""></p>
                                                    </div>
                                                </div>

                                                <div class="col-md-4">
                                                    <div class="form-floating mb-3">
                                                        <input type="text" class="form-control" id="brand" name="brand" autocomplete="off" placeholder="Your Name" readonly>
                                                        <label for="floatingName">Brand</label>
                                                        <p id=""></p>
                                                    </div>
                                                </div> -->


                                                    <div class="col-md-4">
                                                        <div class="form-floating mb-3">
                                                            <input type="text" class="form-control" id="bill_no" name="bill_no" autocomplete="off" readonly placeholder="Your Name">
                                                            <label for="floatingName">Order ID</label>
                                                        </div>
                                                    </div>

                                                    <div class="col-md-8">
                                                        <div class="form-floating mb-3">
                                                            <input type="text" class="form-control" id="items" name="items" autocomplete="off" readonly placeholder="Your Name" required>
                                                            <label for="floatingName">Items</label>
                                                            <p id="ErrorID_1"></p>
                                                        </div>
                                                    </div>

                                                    <!-- <div class="col-md-3">
                                                    <div class="form-floating mb-3">
                                                        <input type="text" class="form-control" id="quantity" name="quantity" autocomplete="off" readonly placeholder="Your Name" required>
                                                        <label for="floatingName">Quantity</label>
                                                        <p id="ErrorID_1"></p>
                                                    </div>
                                                </div> -->
                                                    <div class="col-md-3">
                                                        <div class="form-floating mb-3">
                                                            <input type="text" class="form-control" id="order_from" name="order_from" autocomplete="off" readonly placeholder="Your Name" required>
                                                            <label for="floatingName">Order From</label>
                                                            <p id="ErrorID_1"></p>
                                                        </div>
                                                    </div>
                                                    <div class="col-md-3">
                                                        <div class="form-floating mb-3">
                                                            <input type="text" class="form-control" id="customer" name="customer" autocomplete="off" readonly placeholder="Your Name" required>
                                                            <label for="floatingName">Customer Name</label>
                                                            <p id="ErrorID_1"></p>
                                                        </div>
                                                    </div>
                                                    <div class="col-md-3">
                                                        <div class="form-floating mb-3">
                                                            <input type="text" class="form-control" id="update_by" name="update_by" autocomplete="off" readonly placeholder="Your Name" required>
                                                            <label for="floatingName">Delivery By</label>
                                                            <p id="ErrorID_1"></p>
                                                        </div>
                                                    </div>

                                                    <div class="wrapper">
                                                        <div class="img_producto_container" data-scale="2.6">
                                                        </div>

                                                    </div>

                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </form>
                            <div class="text-center mt-3 mb-3">
                                <button onclick="download_order_images(event)" class="btn btn-primary custom-maroon-btn">Download Image</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

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

                        <div class="modal-header">
                            <h5 class="modal-title" style="color:#BA434D">Recipe Item Image Capture</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">
                                <!-- Floating Labels Form -->
                                <form class="row  g-1" id="captureSubmit">
                                    <input type="hidden" name="_token" value="{{ csrf_token() }} ">
                                    <input type="hidden" class="form-control" id="order_item_id" name="order_item_id" autocomplete="off" placeholder="Your Name" readonly required="">
                                    <input type="hidden" class="form-control" id="order_auto_id" name="order_auto_id" autocomplete="off" placeholder="Your Name" readonly required="">
                                    <input type="hidden" class="form-control" id="order_qty_dummy" name="order_qty_dummy" autocomplete="off" placeholder="Your Name" readonly required="">
                                    <input type="hidden" class="form-control" id="update_qty" name="update_qty" value=0 autocomplete="off" placeholder="Your Name" readonly required="">

                                    <!-- <input type="hidden" class="form-control" id="updated_by_name" name="updated_by_name" autocomplete="off" placeholder="Your Name" readonly required=""> -->
                                    <div class="multiple row row-adjust cam-adjust">
                                        <div class="col-md-5 cam-adjust">
                                            <div id="preview_front"></div>

                                        </div>

                                        <div class="col-md-12 text-center">
                                            <div style="margin:10px;"> <label for="order_photo" class="custom-file-upload">
                                                    Browse
                                                </label><input type="file" accept=".jpg,.jpeg,.png" class="adhar_card" id="order_photo" name="order_photo" required=""></div>
                                            <button type="submit" id="submit" name="submit" class="btn  btn-adjust upload-btn ">Upload</button>
                                            <button type="button" name="reset" class="btn reset-btn btn-adjust" onclick="reset_data();">Reset</button>
                                        </div>
                                        <div class="picture">
                                        </div>
                                    </div>





                                    <div class="col-md-2">
                                        <div class="form-floating">
                                            <input type="text" class="form-control" id="order_label" name="order_label" autocomplete="off" placeholder="Your Name" readonly required="">
                                            <input type="hidden" class="form-control" id="order_bill_no" name="order_bill_no" autocomplete="off" placeholder="Your Name" readonly required="">
                                            <label for="floatingName">Order ID</span></label>
                                        </div>
                                    </div>

                                    <div class="col-md-10">
                                        <div class="form-floating">
                                            <input type="text" class="form-control" id="order_items" name="order_items" autocomplete="off" placeholder="Your Name" readonly required="">

                                            <label for="floatingName">Recipe Name</span></label>
                                        </div>
                                    </div>



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

                            </div>


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

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

                    <!-- Bordered Tabs -->


                    <div class="tab-content" id="borderedTabContent">
                        <div class="tab-pane fade show active" id="bordered-home" role="tabpanel" aria-labelledby="home-tab">
                            <div class="col-lg-12" id="tcp_table1">
                                <div class="card p-0" style="border:none">
                                    <div class="card-body p-1" style="overflow-x: auto;">
                                        <table id="order_list_table" style="width: 100%;" class='display dataTable'>
                                            <thead>
                                                <tr>
                                                    <th scope="col">#</th>
                                                    <th scope="col">Order ID</th>
                                                    <th scope="col">Upload</th>
                                                    <th scope="col">Brank Name</th>
                                                    <th scope="col">Items</th>
                                                    <!-- <th scope="col">Quantity</th> -->
                                                    <th scope="col">Kitchen</th>
                                                    <th scope="col">Aggregator</th>
                                                    <th scope="col">Items Count</th>
                                                    <th scope="col">Order Date&Time</th>
                                                    <!-- <th scope="col">Dispatched Date&Time</th> -->
                                                    <th scope="col">Status</th>
                                                </tr>
                                            </thead>
                                        </table>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </main>

    @include('layouts.footer');
    <link rel="stylesheet" href="css/jquery.dataTables.min.css">
    <script src="js/jquery-3.6.0.min.js"></script>
    <script src="js/jquery-ui.js"></script>
    <script src="js/jquery.dataTables.min.js"></script>
    <script src='js/jquery.validate.js'></script>

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

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

        $(document).ready(function() {


            $(".selUser").select2();


            // $("#pageloader").fadeIn();
            $(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: {
                    order_id: "required",
                },
                messages: {
                    order_id: "This field is required",
                },
                errorPlacement: function(error, element) {
                    if (element.attr("name") == "order_id") {
                        error.appendTo('#ErrorID_2');
                    } else {
                        error.insertAfter(element);
                    }
                },

            });

        })


        $("#reset_main").click(function() {
            $("#brands_name").val('0').trigger('change');

        });


        function send_id() {
            $("#pageloader").fadeIn();
            // if ($("#get_order_form").valid()) {
            data['order_id'] = $("#order_id").val();
            data['kitchen_id'] = $("#kitchen").val();
            data['from_date'] = $("#from_date").val();
            data['to_date'] = $("#to_date").val();
            data['brands_name'] = $("#brands_name").val();
            $.ajax({
                url: "get_uncapture_order_details", // 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 Order ID");
                        $("#get_order_form")[0].reset();
                        $("#brands_name").val('0').trigger('change');

                        $("#borderedTabContent").hide();
                    } else if (arr == -1) {
                        $("#pageloader").fadeOut();
                        alert("Please Input Atleast one value");
                        $("#borderedTabContent").hide();
                        // }  else if (arr = -2) {
                        //     $("#pageloader").fadeOut();
                        //     alert("Please Select Properly from and to dates");
                        //     $("#borderedTabContent").hide();
                    } else {
                        makeTable(arr);
                        $("#pageloader").fadeOut();
                    }
                }
            })
            //}
        }

        function makeTable(arr) {
            // console.log(arr);
            $("#borderedTabContent").show();
            $('#order_list_table').DataTable().destroy();
            var table = $('#order_list_table').DataTable({
                "autoWidth": true,
                "ordering": false,
                "scrollX": true,
                "pageLength": 100,
                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": "label",
                        "title": "Order ID"
                    },

                    // {
                    //     "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'];
                    //         var status = row['is_image_captured'];

                    //         if (status == 1) {
                    //             return '<input type="hidden" id="table_id"  value="' + data + '"></input> <button data-bs-toggle="modal" data-bs-target="#ExtralargeModal12" type="submit" class="btn btn-danger captured" onclick="viewHistorymodel(\'' + bill_no + '\',\'' + item_id + '\',\'' + id + '\')"><i class="fa-solid fa-eye"></i></button>';
                    //         } else {
                    //             return '<input type="hidden" id="table_id"  value="' + data + '"></input> <button data-bs-toggle="modal" data-bs-target="#ExtralargeModal12" type="submit" class="btn btn-danger" onclick="viewHistorymodel(\'' + bill_no + '\',\'' + item_id + '\',\'' + id + '\')"><i class="fa-solid fa-eye"></i></button>';
                    //         }
                    //     }
                    // },

                    {
                        "data": "id",
                        render: function(data, full, row) {

                            var id = data;
                            var image_status = row['is_order_image_captured'];
                            var kitchen_name = row['kitchen_name'];
                            var brand_name = row['brand_name'];
                            var order_items = row['order_items'];
                            var customer_name = row['customer_name'];
                            var order_from = row['order_from'];
                            var bill_no = row['bill_no'];
                            var label = row['label'];
                            var item_id = row['item_id'];

                            if (image_status == 0) {
                                return '<input type="hidden" id="table_id"  value="' + data +
                                    '"></input> <button data-bs-toggle="modal" data-bs-target="#ExtralargeModal12" type="submit" class="btn btn-danger" style="background: #d9a441;border: 1px solid #d9a441;" id="' +
                                    id + '" onclick=\"(view_capture(\'' + item_id + '\',\'' + bill_no +
                                    '\',\'' + id + '\',\'' + brand_name + '\',\'' + kitchen_name +
                                    '\',\'' + order_items + '\',\'' + customer_name + '\',\'' + label +
                                    '\'))"\><i class="fas fa-upload style_actions"></i></button>';

                            } else {
                                return 'Uploaded';
                            }

                        }
                    },

                    {
                        "data": "restorent_names",
                        "title": "Brand Name"
                    },
                    {
                        "data": "order_items",
                        "title": "Items"
                    },
                    // {
                    //     "data": "order_quantity",
                    //     "title": "Quantity"
                    // },

                    {
                        "data": "kitchen_name",
                        "title": "Kitchen"
                    },
                    {
                        "data": "order_from",
                        "title": "Aggregator"
                    },
                    {
                        "data": "item_count",
                        "title": "Items Count"
                    },

                    {
                        "data": "created_on",
                        "title": "Order Date&Time"
                    },
                    // {
                    //     "data": "dispatched_time",
                    //     render: function(data, full, type) {
                    //         //console.log(data);
                    //         if(data !='' && data != null){
                    //             var offset = new Date(data).getTime();
                    //             var time1 = offset + 19800000;
                    //             var timestamp1 = new Date(time1);
                    //             var localDate = new Date(timestamp1);
                    //            // var newdate = localDate.toLocaleString();
                    //             //var onlyDateTime = newdate.split("G");
                    //             var dateStr =   localDate.getFullYear() + "-" +
                    //                             ("00" + (localDate.getMonth() + 1)).slice(-2) + "-" +
                    //                             ("00" + localDate.getDate()).slice(-2) + " " +
                    //                             ("00" + localDate.getHours()).slice(-2) + ":" +
                    //                             ("00" + localDate.getMinutes()).slice(-2) + ":" +
                    //                             ("00" + localDate.getSeconds()).slice(-2);
                    //             return dateStr;
                    //         } else {
                    //             return '';
                    //         }
                    //     },
                    //     "title": "Dispatched Date&Time"
                    // },
                    {
                        "data": "is_order_image_captured",
                        render: function(data, full, row) {
                            // console.log(data);
                            var status = data;
                            if (status == 1) {
                                return "Captured"
                            } else {
                                return "Not Captured"
                            }
                        },
                        "title": "Status"
                    },
                ],

                columnDefs: [{
                        "width": "1%",
                        "targets": [0],
                        "orderable": false,
                        "className": "dt-center",
                        "searching": true,
                    },
                    {
                        "width": "5%",
                        "targets": [1],
                        "className": "dt-center"
                    },
                    {
                        "width": "10%",
                        "targets": [2],
                        "className": "dt-center"
                    },
                    {
                        "width": "25%",
                        "targets": [3],
                        "className": "dt-center"
                    },
                    {
                        "width": "25%",
                        "targets": [4],
                        "className": "dt-center"
                    },
                    {
                        "width": "20%",
                        "targets": [5],
                        "className": "dt-center"
                    },
                    {
                        "width": "10%",
                        "targets": [6],
                        "className": "dt-center"
                    },
                    {
                        "width": "10%",
                        "targets": [7],
                        "className": "dt-center"
                    },
                    {
                        "width": "15%",
                        "targets": [8],
                        "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();
              $(".toggle-sidebar-icon").click(function() {
                setTimeout(function() {
                    table.columns.adjust().draw();
                }, 300);
            });
        }




        function viewHistorymodel(bill_no, id, order_auto_id, ) {
            $(".img_producto").remove();
            $(".desired_image_green").remove();
            $("#detailed_form")[0].reset();
            data['order_id'] = bill_no;
            data['inc_id'] = id;
            data['order_auto_id'] = order_auto_id;
            $.ajax({
                url: "get_uncapture_id_details", // Ajax request
                type: "post",
                data: data,
                success: function(returnData) {
                    // $("#kitchen").val(returnData[0]['kitchen_name']);
                    // $("#brand").val(returnData[0]['order_rest_name']);``
                    $("#bill_no").val(returnData[0]['label']);
                    $("#items").val(returnData[0]['order_name']);
                    // $("#quantity").val(returnData[0]['order_quantity']);
                    $("#update_by").val(returnData[0]['recipe_captured_by']);
                    $("#order_from").val(returnData[0]['order_from']);
                    $("#customer").val(returnData[0]['customer_name']);
                    var imageName = returnData[0]['recipe_image_name'];
                    // var desired_image=returnData[0]['desired_image'];
                    // if(desired_image != null){
                    //     $(".multiple").append('<div class="col-md-5 text-center desired_image_green"><img src="assets/img/desired_images/' + desired_image + '" class="image-design" id="desired_image_green" /> <figcaption class="text-center"> Desired Image </figcaption></div>');
                    // } 
                    // console.log(imageName); 
                    var client_name = returnData[1]['client_name'];
                    if (imageName != null) {
                        var temp = new Array();
                        temp = imageName.split(",");
                        var i = 1;
                        $.each(temp, function(key, val) {
                            var value = 'assets/img/' + client_name + '_uploads/' + val + '';
                            $(".img_producto_container").append('<img src="' + value + '" class="dslc-lightbox-image img_producto">');
                            i++;
                        });
                    }



                }
            })
        }

        function view_capture(id, order_id, order_auto_id, brand_name, kitchen_name, order_items, customer_name, label) {
            $("#ExtralargeModal12").show();
            // console.log(label);
            // Remove any existing images
            $('#preview_front').html('');
            $('#desired_output').remove();
            $('#image_fig').text('');
            $(".image-tag").val('');
            $("#update_qty").val(0);
            $("#kitchenID_view").val(kitchen_name);
            $("#brands_view").val(brand_name);
            $("#order_items").val(order_items);
            $("#order_qty_dummy").val(0);
            $("#customer_name").val(customer_name);
            $("#order_bill_no").val(order_id);
            $("#order_auto_id").val(order_auto_id);
            $("#order_item_id").val(id);
            $("#order_label").val(label);
        }

        function download_order_images(event) {

            event.preventDefault();
            var imageSrc = $('.img_producto').attr('src');
            var imageName = $("#bill_no").val();
            var link = document.createElement('a');

            link.href = imageSrc;
            link.download = imageName + '.jpg';

            document.body.appendChild(link);
            link.click();
            document.body.removeChild(link);
        }

        $(".img_producto_container")

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




        function preview_front_aadhar(input) {
            if (input.files && input.files[0]) {
                var file = input.files[0];
                var reader = new FileReader();

                if (file.type.startsWith('image/')) {
                    reader.onload = function(e) {
                        $('#preview_front').html('<img src="' + e.target.result +
                            '" style="max-width: 100%;" />');
                    }
                    reader.readAsDataURL(file);
                } else {

                    $('#preview_front').html('<p>' + file.name + '</p>');
                }
            }
        }

        $('#captureSubmit').submit(function(e) {
            e.preventDefault(); // Prevent the default form submission behavior
            let formData = new FormData(this);
            $.ajax({
                type: 'POST',
                url: 'upload_uncaptured_photo',
                data: formData,
                contentType: false,
                processData: false,
                success: function(returndata) {
                    if (returndata == true) {
                        alert("Image Uploaded Successfully");
                        $('#preview_front').html('');
                        $('.btn-close').click();
                        send_id();
                    } else {
                        alert("Failed to Upload Image");
                    }
                },
            });

        });

        $('#order_photo').change(function() {
            $('#preview_front').html(''); // Clear previous preview
            preview_front_aadhar(this); // Call preview function
        });

        function reset_data() {
            $('#preview_front').html('');
        }
    </script>
</body>

</html>