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

<!-- <script type="text/javascript" src="DataTables/datatables.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'>
<!-- Load jQuery first -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<!-- Load DataTables (Uncomment this line) -->
<script type="text/javascript" src="https://cdn.datatables.net/1.12.1/js/jquery.dataTables.min.js"></script> <!-- Correct CDN for DataTables -->

<!-- Other JavaScript files -->
<script src="//cdn.rawgit.com/placemarker/jQuery-MD5/master/jquery.md5.js"></script>
<script src="js/jquery-ui.min.js"></script>
<script src="js/jquery.validate.js"></script>
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-beta.1/dist/js/select2.min.js"></script>



<style>
    /* .row>* {
        padding: 0px 3px 0px 8px !important;
    } */
    .form-container {
        /* margin: -2px -10px 0px 0px; */
        padding: 0px;
        border-radius: 2px;
        background-color: white;
    }

    .report-container {
        padding: 0px;
        margin: 0px -10px 0px 0px;
    }
    #weeklyTable_previous,#weeklyTable_next{
        color: #f2e2d2 !important;
    }


    .dataTables_wrapper .dataTables_paginate {
        display: flex;
        justify-content: flex-end;
        margin-top: 10px;

    }

    #weeklyTable_paginate {
        float: right;
    }

    #weeklyTable_info {
        display: inline-block !important;
        margin-top: -10px;
    }

    /* #weeklyTable_paginate{
        display:flex;
        justify-content: center;
        align-items:center;
        margin-top:5px !important;
    } */


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

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

    #header {
        z-index: 100000;
    }

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

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


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


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

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


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


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


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


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


    .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;
        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%;
    }



    .pie {
        display: flex;
        align-items: center;
        flex-direction: column
    }

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

    #btn_excel2 {
        float: right;
        background-color: white;
        color: #963131;
        display: block;
        padding-right: 0px;
        padding-top: 7px;

    }

    .wrapper_data {
        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;
    }

    .no-break {
        white-space: nowrap;
        /* Prevent text from wrapping */
        text-align: center;
    }



    .fas.fa-file-excel {
        color: maroon;
    }

    #label_names {
        padding: 20px 0 15px 0;
        font-size: 18px;
        font-weight: 500;
        color: #BA434D;
    }

    .box-adjust {
        width: 100%;
        display: flex;
        flex-direction: column;
        background: #fff;
        cursor: pointer;
        padding: 5px 10px;
        border: 1px solid #ccc;
        margin-bottom: 10px;
        border-radius: 5px;

    }

    /*  */
    .stat-card {
        padding: 20px;
        border-radius: 10px;
        min-height: 100px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    }

    .stat-title {
        font-size: 14px;
        font-weight: 500;
        opacity: 0.8;
    }

    .stat-value {
        font-size: 24px;
        font-weight: bold;
    }

    .bg-soft-blue {
        background-color: #cfd8dc;
        color: #000;
    }

    .bg-soft-green {
        background-color: #73aca1d8;
        color: #000;
    }

    .bg-soft-red {
        background-color: #d89090;
        color: #000;
    }

    .bg-soft-purple {
        background-color: #d1c4e9;
        color: #000;
    }

    /*  */
    #charts-container {
        display: flex;
        flex-wrap: wrap;
        /* gap: 20px; */
        justify-content: center;
    }

    .chart-box {
        width: 200px;
        text-align: center;
        color: #000;
    }

    .chart-title {
        font-weight: bold;
        margin-bottom: 2px;
    }

    .chart-subtitle {
        white-space: pre-line;
        font-size: 13px;
        margin-bottom: 10px;
    }



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

        .ms-parent {
            position: unset;
        }

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

            .report-container {
                margin: 0px -40px 0px 0px;
                padding: 0px;
            }
}
</style>
<link rel="stylesheet" href="\assets\js\multi-select-css.css">
<script src="\assets\js\multi-select.js"></script>
<script type="text/javascript" src="assets/vendor/moment/moment.min.js"></script>
<script type="text/javascript" src="assets/vendor/date_range_picker/daterangepicker.min.js"></script>
<link rel="stylesheet" type="text/css" href="assets/vendor/date_range_picker/daterangepicker.css" />

<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">Operations Report</h5>
                        </div>

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

            <ul class="nav nav-tabs d-flex " style="border:none" id="myTabjustified" role="tablist"> </ul>
            <div class="tab-content form-container" id="myTabjustifiedContent">
                <div class="tab-pane fade show active" id="home-justified" role="tabpanel"
                    aria-labelledby="home-tab">
                    <div class="card p-0">

                        <div class="card-body p-1">
                            <!-- Floating Labels Form -->
                            <form class="row g-2 p-2" id="ingrAdd" method="POST">
                                <input type="hidden" value="{{csrf_token()}}" name="_token">

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



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

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

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



                                <div class="col-md-3">
                                    <div class="form-floating">
                                        <select class="form-select" id="report_type" name="report_type" aria-label=""
                                            autocomplete="off" data-placeholder="Select Users" required>

                                            <option value="All">All</option>
                                            @foreach ($categories as $categorie)
                                            <option value=" {{ $categorie->id }} "> {{ $categorie->category_name }}
                                            </option>
                                            @endforeach

                                        </select>
                                        <label for="floatingName">Category</label>

                                        <p id="categories_error_data" style="color:red"></p>
                                    </div>
                                </div>
                                <div class="col-md-3">
                                    <div id="reportrange" class="box-adjust">
                                        <p style="padding-top: 40px;">
                                        <h5 style="font-size: 14px; margin-top: -54px;">Select Date</h5>
                                        </p>
                                        <input type="hidden" id="from_date" name="from_date" />
                                        <input type="hidden" id="to_date" name="to_date" />
                                        <span style="margin-top: -21px;" id="alldates"></span>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>

            <section class="section report-container">
                <div class="card">
                    <div class="card-body px-0">
                        <div class="containe">
                            <div class="row g-3 justify-content-center">

                                <div class="col-md-3 col-sm-6">
                                    <div class="stat-card" style="background-color:#D9A441;color:#F2E2D2">
                                        <div class="stat-title">Total</div>
                                        <div class="stat-value"><span id="total_count"></span></div>
                                    </div>
                                </div>

                                <div class="col-md-3 col-sm-6">
                                    <div class="stat-card" style="background-color:#264653;color:#F2E2D2">
                                        <div class="stat-title">Updated</div>
                                        <div class="stat-value"><span id="updated_count"></span></div>
                                    </div>
                                </div>

                                <div class="col-md-3 col-sm-6">
                                    <div class="stat-card" style="background-color:#4f8a8b;color:#F2E2D2">
                                        <div class="stat-title">Not Updated</div>
                                        <div class="stat-value"><span id="non_count"></span></div>
                                    </div>
                                </div>

                                <div class="col-md-3 col-sm-6">
                                    <div class="stat-card" style="background-color:#c77dff;color:#F2E2D2">
                                        <div class="stat-title">Avg. Updated Rate</div>
                                        <div class="stat-value"><span id="average_count"></span></div>
                                    </div>
                                </div>

                            </div>
                        </div>
                        <ul class="nav nav-tabs mt-4" id="borderedTab" role="tablist">
                            <li class="nav-item" role="presentation">
                                <button
                                    class="nav-link active"
                                    id="home-tab"
                                    data-bs-toggle="tab"
                                    data-bs-target="#bordered-home"
                                    type="button"
                                    role="tab"
                                    aria-controls="home"
                                    aria-selected="true">Stacked Bar Chart</button>
                            </li>
                            <li class="nav-item" role="presentation">
                                <button
                                    class="nav-link"
                                    id="profile-tab"
                                    data-bs-toggle="tab"
                                    data-bs-target="#bordered-profile"
                                    type="button"
                                    role="tab"
                                    aria-controls="profile"
                                    aria-selected="false">Area Chart</button>
                            </li>
                            <li class="nav-item" role="presentation">
                                <button
                                    class="nav-link"
                                    id="salary-tab"
                                    data-bs-toggle="tab"
                                    data-bs-target="#bordered-salary-tab"
                                    type="button"
                                    role="tab"
                                    aria-controls="contact"
                                    aria-selected="false">Heat Map Calender</button>
                            </li>
                            <li class="nav-item" role="presentation">
                                <button
                                    class="nav-link"
                                    id="contact-tab1"
                                    data-bs-toggle="tab"
                                    data-bs-target="#bordered-contact"
                                    type="button"
                                    role="tab"
                                    aria-controls="contact"
                                    aria-selected="false">Weekly Progress</button>
                            </li>

                        </ul>



                        <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>
                                <div class="container">
                                    <button></button>
                                </div>
                            </div> -->
                                <div class="col-lg-12" id="tcp_table1">
                                    <div class="card">
                                        <div class="card-body" style="overflow-x:auto;">
                                            <!-- <div class="m-3"> -->
                                            <div id="stack_bar_chart"></div>
                                            <!-- </div> -->
                                            <div class="mt-5" style="font-weight: 800;" id="hidden_drill_down">
                                                <h3>Drill Down for Date : <span id="drill_down_for_stack_graph"></span></h3>
                                                <div id="retrive_stack_bar_chart_by_category"></div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div
                                class="tab-pane fade"
                                id="bordered-profile"
                                role="tabpanel"
                                aria-labelledby="profile-tab">
                                <div class="col-lg-12" id="tcp_table1">
                                    <div class="card">
                                        <div class="card-body" style="overflow-x:auto;">
                                            <div class="row m-3">
                                                <div id="view_area_chart"></div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div
                                class="tab-pane fade"
                                id="bordered-salary-tab"
                                role="tabpanel"
                                aria-labelledby="salary-tab">
                                <div class="col-lg-12" id="tcp_table1">
                                    <div class="card">
                                        <div class="card-body">
                                            <div class="row mt-2">
                                                <div id="chart_heap_map"></div>
                                            </div>
                                            <div class="mt-5" style="font-weight: 800;" id="hidden_drill_down_heat">
                                                <h3>Drill Down for Date : <span id="drill_down_for_heat_graph"></span></h3>
                                                <div id="retrive_heat_chart_by_category"></div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div
                                class="tab-pane fade"
                                id="bordered-contact"
                                role="tabpanel"
                                aria-labelledby="contact-tab">
                                <div class="col-lg-12" id="tcp_table1">
                                    <div class="card">
                                        <div class="card-body payment_mode_data">
                                            <div class="row m-3">
                                                <div id="charts-container"></div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-12" id="tcp_table1">
                                    <div class="card" style="width: 100%;">
                                        <div class="card-body payment_mode_data">
                                            <div class="row" style="width:100%;overflow:auto">
                                                <h5 class="card-title">Daily Completion Breakdown</h5>
                                                <table id="weeklyTable" class="table table-striped " style="width:100%;overflow:auto">
                                                    <thead>
                                                        <tr>
                                                            <th>Date</th>
                                                            <th>Total</th>
                                                            <th>Updated</th>
                                                            <th>Non-Updated</th>
                                                            <th>Completion Rate (%)</th>
                                                        </tr>
                                                    </thead>
                                                    <tbody></tbody>
                                                </table>

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

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


    <script src="assets/vendor/excel_datatable/buttons.html5.min.js"></script>
    <script src="assets/vendor/excel_datatable/dataTables.buttons.min.js"></script>
    @include('layouts.footer');

    <script>
        var data = {};
        data['_token'] = "{{csrf_token()}}";
        let debounceChecklistTimer;
        $(document).ready(function() {

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

            $('#hidden_drill_down').hide();
            $('#hidden_drill_down_heat').hide();


            $(function() {
                var start = moment().subtract(1, 'days');
                var end = moment();
                // get_kitchens();

                function cb(start, end) {
                    $('#reportrange span').html(start.format('YYYY-MM-DD') + ' - ' + end.format(
                        'YYYY-MM-DD'));
                    //change_input(start.format('Y-M-D'), end.format('Y-M-D'));
                    $('#from_date').val(start.format('YYYY-MM-DD'));
                    $('#to_date').val(end.format('YYYY-MM-DD'));
                    // get_dashboard_data();
                    $('#from_date, #to_date').trigger('change');

                }

                $('#reportrange').daterangepicker({

                    startDate: start,
                    endDate: end,
                    ranges: {
                        'Today': [moment(), moment()],
                        'Yesterday': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
                        'Last 7 Days': [moment().subtract(6, 'days'), moment()],
                        'Last 30 Days': [moment().subtract(29, 'days'), moment()],
                        'This Month': [moment().startOf('month'), moment().endOf('month')],
                        'Last Month': [moment().subtract(1, 'month').startOf('month'), moment()
                            .subtract(1, 'month').endOf('month')
                        ]
                    }
                }, cb);
                cb(start, end);

            });

            // get_checklist_data();
            // load_heap_map_graph();
            // load_stacked_bar();

            $("#operation_entry").validate({
                rules: {
                    kitchen: "required",
                    report_dtype: "required",
                    from_date: "required",
                    to_date: "required",
                    // brands_name: "required",

                },
                messages: {
                    kitchen: "This field is required",
                    report_type: "This field is required",
                    from_date: "This field is required",
                    to_date: "This field is required",
                    // brands_name: "required",

                },
                errorPlacement: function(error, element) {
                    if (element.attr("name") == "kitchen") {
                        error.appendTo('#kitchen_ErrorID_1');
                    } else if (element.attr("name") == "from_date") {
                        error.appendTo('#ErrorID_2');

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

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

                    }
                },

            });
        })

        $('#kitchen, #user_id, #report_type, #from_date, #to_date').on('change', function() {
            clearTimeout(debounceChecklistTimer);

            debounceChecklistTimer = setTimeout(function() {
                var kitchen = $('#kitchen').multipleSelect('getSelects');
                var user_id = $('#user_id').multipleSelect('getSelects');

                if (kitchen.length > 0 && user_id.length > 0) {
                    get_checklist_data();
                }
            }, 800);
        });



        function get_checklist_data() {
            // if ($('#operation_entry').valid()) {

            var kitchen = $("#kitchen").val();
            var report_type = $('#report_type').val();
            var from_date = $('#from_date').val();
            var to_date = $('#to_date').val();
            var brands_name = $('#brands_name').val();
            var user_id = $('#user_id').val();
            $('#hidden_drill_down').hide();
            $('#hidden_drill_down_heat').hide();

            if (kitchen && report_type && to_date && to_date) {
                data['kitchen'] = kitchen;
                data['report_type'] = report_type;
                data['from_date'] = from_date;
                data['to_date'] = to_date;
                data['brands_name'] = brands_name;
                data['operation_status'] = 1;
                data['user_id'] = user_id;
                data['_token'] = "{{ csrf_token() }}";
                $("#pageloader").fadeIn();
                $("#pageloader").fadeIn();
                $.ajax({
                    type: 'POST',
                    url: 'retrive_operation_entry_data_v2',
                    data: data,

                    success: function(result) {
                        $("#pageloader").fadeOut();
                        var data_array = jQuery.parseJSON(result);
                        load_stacked_bar(data_array);
                        load_area_chart(data_array);
                        load_heap_map_graph(data_array);
                        donutchart(data_array);
                        view_weekly_process_data(data_array);

                        var res = data_array['overAllCount'];
                        // console.log(res);

                        $('#total_count').html(res.total);
                        $('#updated_count').html(res.updated);
                        $('#non_count').html(res.nonupdated);
                        $('#average_count').html(res.calculateRate)
                        // view_operation_checklist_status(data_array)
                    }

                })

            }
        }



        function view_operation_checklist_status(data_array) {
            $('#chartSpeaker').remove();
            $('#divSpeaker').append('<div id="chartSpeaker"><div>');

            var total_data = data_array['total'];
            if (total_data != 0) {
                var total = total_data;
            }
            var dates = data_array['dates'];
            var non_update = data_array['nonUpdate'];
            var update = data_array['update'];

            var in_time = data_array['inTime'];
            var out_time = data_array['outTime'];

            var nonupdate = [];
            var update_percentages = [];
            var non_update_percentages = [];
            var total_percentages = [];

            var in_time_percentages = [];
            var out_time_total_percentages = [];

            if (total_data != 0) {
                for (var i = 0; i < total.length; i++) {
                    var total_items = total[i];
                    var total_percentages_data = ((total_items / total_items) * 100).toFixed(2);
                    total_percentages.push(total_percentages_data);

                    var update_percentages_data = ((update[i] / total_items) * 100).toFixed(2);
                    update_percentages.push(update_percentages_data);

                    var non_update_percentages_data = ((non_update[i] / total_items) * 100).toFixed(2);
                    non_update_percentages.push(non_update_percentages_data);

                    var in_time_percentages_data = ((in_time[i] / total_items) * 100).toFixed(2);
                    in_time_percentages.push(in_time_percentages_data);

                    var out_time_total_percentages_data = ((out_time[i] / total_items) * 100).toFixed(2);
                    out_time_total_percentages.push(out_time_total_percentages_data);
                }
            }

            var options = {
                series: [{
                        name: 'Total',
                        data: total
                    },
                    {
                        name: 'Update',
                        data: update
                    },
                    {
                        name: 'Non-Update',
                        data: non_update
                    },
                    {
                        name: 'In Time',
                        data: in_time
                    },
                    {
                        name: 'Out Time',
                        data: out_time
                    }
                ],
                chart: {
                    height: 400,
                    width: "100%",
                    type: 'bar',
                    stacked: true, // Enable stacking
                    events: {
                        click: function(chart, w, e) {
                            var labelname = e.seriesIndex;

                            var dataPointIndex = e.dataPointIndex;

                            var clickedDate = dates[dataPointIndex];
                            // clickedDate in 01-10-2024 format
                            // console.log("Clicked Date: ", clickedDate);
                            // console.log("Event object: ", e.seriesIndex);
                            retrive_data_based_on_clicked_bar_chart(labelname, clickedDate);

                        }
                    },
                    toolbar: {
                        show: true
                    },
                },
                plotOptions: {
                    bar: {
                        horizontal: false,
                        endingShape: 'rounded',
                        columnWidth: '30%'
                    },
                },
                stroke: {
                    show: true,
                    width: 1,
                    colors: ['transparent']
                },
                dataLabels: {
                    enabled: true,
                    style: {
                        fontSize: '9px',
                        colors: ["#FFFFFF"]
                    },
                    enabledOnSeries: [0, 1, 2, 3, 4] // Enable data labels on all series
                },
                legend: {
                    show: true
                },
                xaxis: {
                    tickPlacement: 'between',
                    show: true,
                    categories: dates,
                    labels: {
                        rotate: 360,
                        hideOverlappingLabels: false,
                        style: {
                            fontSize: '8px',
                            paddingBottom: '21px'
                        }
                    },
                },
                tooltip: {
                    y: {
                        formatter: function(val, {
                            series,
                            seriesIndex,
                            dataPointIndex,
                            w
                        }) {
                            if (seriesIndex === 0) {
                                return val.toFixed(0) + '';
                            } else {
                                var percentage = '';
                                if (seriesIndex === 1) {
                                    percentage = update_percentages[dataPointIndex] + "% ";
                                } else if (seriesIndex === 2) {
                                    percentage = non_update_percentages[dataPointIndex] + "% ";
                                } else if (seriesIndex === 3) {
                                    percentage = in_time_percentages[dataPointIndex] + "% ";
                                } else if (seriesIndex === 4) {
                                    percentage = out_time_total_percentages[dataPointIndex] + "% ";
                                }
                                return percentage;
                            }
                        }
                    }
                },
                noData: {
                    text: 'No Data',
                    align: 'center',
                    verticalAlign: 'middle',
                    offsetX: 0,
                    offsetY: 0,
                    style: {
                        color: '#BA434D',
                        fontSize: '24px',
                    }
                }
            };

            var chart = new ApexCharts(document.querySelector("#chartSpeaker"), options);
            chart.render();

        }



        function retrive_data_based_on_clicked_bar_chart(labelname, clickedDate) {

            $("#pageloader").fadeIn();
            data['kitchen'] = $("#kitchen").val();
            data['report_type'] = $('#report_type').val();
            data['from_date'] = $('#from_date').val();
            data['to_date'] = $('#to_date').val();
            data['brands_name'] = $('#brands_name').val();
            data['label_name'] = labelname;
            data['clickedDate'] = clickedDate;
            data['_token'] = "{{ csrf_token() }}";
            data['user_id'] = $("#user_id").val();
            $.ajax({
                type: 'POST',
                url: 'retrive_data_based_on_cliecked_bar_graph_v2',
                data: data,

                success: function(result) {
                    $("#pageloader").fadeOut();
                    var data_array = jQuery.parseJSON(result);

                    // label_names
                    if (data_array != 0) {

                        load_table(data_array);

                        if (labelname == 0) {
                            $('#label_names').text("Total");
                        } else if (labelname == 1) {
                            $('#label_names').text("Update");
                        } else if (labelname == 3) {
                            $('#label_names').text("In-Time");
                        } else if (labelname == 4) {
                            $('#label_names').text("Out-Time");
                        }
                    } else {

                        alert("No records found. Try something else");
                    }


                }

            })

        }




        var table_active_2;

        function load_table(data_array) {

            $('#user_view_table').DataTable().destroy();
            table_active_2 = $('#user_view_table').DataTable({

                // "autoWidth": false,
                data: data_array,
                // "order": [0, 'ASC'],
                "ordering": false,
                "scrollY": "400px",
                "scrollX": true,
                "scrollCollapse": true,
                "bPaginate": false,
                "responsive": true,
                dom: 'Blfrtip',
                language: {
                    search: "_INPUT_",
                    searchPlaceholder: "Search table..."
                },

                "columns": [{

                        "data": "kitchen_name",
                        "title": "Kitchen",
                        "className": "no-break",

                    },
                    {
                        "data": "particulars",
                        "title": "Activity",
                        "className": "no-break",
                    },

                    {
                        "data": "category_name",
                        "title": "Category Name",
                        "className": "no-break",

                    },
                    {
                        "data": "options",
                        "title": "Operation",
                        "className": "no-break",
                        render: function(data, type, row) {
                            if (data == "Camera") {
                                var image_name = row['image_name'];
                                return `<button type="button" class="btn btn-danger" onclick="image_view('${image_name}')"><i class="bi bi-eye"></i></button>`;

                            } else if (data == "Text Box") {
                                var text_value = row['text_value'];
                                return text_value;
                            } else {
                                var options = row['options'];
                                return options;

                            }
                        }
                    },
                    {
                        "data": "timestamp",
                        "title": "Date & Time",
                        "className": "no-break",

                    },
                    {
                        "data": "time_bound",
                        "title": "Status",
                        "className": "no-break",

                    },


                ],

                buttons: [{
                    extend: 'excelHtml5',
                    text: '<i class="fas fa-file-excel" title="Employee_details"></i>',
                    titleAttr: 'Excel',
                    filename: function() {
                        var current_date = new Date();
                        var months = [
                            "Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"
                        ];
                        var formatted_date = current_date.getDate() + '-' +
                            months[current_date.getMonth()] + '-' +
                            current_date.getFullYear();
                        return 'Salary_Details_' + formatted_date;
                    },



                }],



                columnDefs: [

                    {
                        "width": "10%",
                        "targets": [0],
                        "className": "dt-center",
                        // "visible": false
                    },
                    {
                        "width": "10%",
                        "targets": [1],
                        "className": "dt-center"
                    },
                    {
                        "width": "10%",
                        "targets": [2],
                        "className": "dt-center"
                    },
                    {
                        "width": "10%",
                        "targets": [3],
                        "className": "dt-center"
                    },
                    {
                        "width": "10%",
                        "targets": [4],
                        "className": "dt-center"
                    },
                    {
                        "width": "10%",
                        "targets": [5],
                        "className": "dt-center"
                    },


                ],

                initComplete: function() {
                    $("#pageloader").fadeOut();

                    $('#salary-tab').on('click', function() {
                        setTimeout(function() {
                            table_active_2.columns.adjust().draw();
                        }, 300);
                    })

                    setTimeout(function() {
                        table_active_2.columns.adjust().draw();
                    }, 300);


                }
                

            });




            var excelButton = table_active_2.buttons(0, null).container().appendTo($('#btn_excel2'));
            excelButton.addClass('export');

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

        };



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

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

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

        $(".img_producto_container")

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




        function load_heap_map_graph(data_array) {
            $('#chart_heap_map').html('');
            $('#chart_heap_map').html('<div id="chart_heap_map_canvas"></div>');

            const dates = data_array['dates'];
            const rate = data_array['rate'];

            const rawDataArray = [];
            for (let i = 0; i < dates.length; i++) {
                const [dd, mm, yyyy] = dates[i].split('-');
                const key = `${mm}-${dd}-${yyyy}`;
                const dateObj = new Date(`${yyyy}-${mm}-${dd}`);
                const parsedValue = Math.round(parseFloat(rate[i])); // Round to match color ranges
                rawDataArray.push({
                    date: dateObj,
                    value: parsedValue,
                    key
                });
            }

            rawDataArray.sort((a, b) => a.date - b.date);

            const dayLabels = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
            const weeks = [];

            let currentWeek = Array(7).fill(null).map((_, i) => ({
                x: dayLabels[i],
                y: 0,
                showLabel: false,
                dateKey: ''
            }));

            const firstDay = rawDataArray[0].date.getDay();
            for (let i = 0; i < firstDay; i++) {
                currentWeek[i] = {
                    x: dayLabels[i],
                    y: 0,
                    showLabel: false,
                    dateKey: ''
                };
            }

            rawDataArray.forEach((entry, index) => {
                const dayOfWeek = entry.date.getDay();

                currentWeek[dayOfWeek] = {
                    x: dayLabels[dayOfWeek],
                    y: entry.value,
                    showLabel: true,
                    dateKey: entry.key
                };

                const isLast = index === rawDataArray.length - 1;
                if (dayOfWeek === 6 || isLast) {
                    weeks.push({
                        name: `Week ${weeks.length + 1}`,
                        data: [...currentWeek]
                    });

                    currentWeek = Array(7).fill(null).map((_, i) => ({
                        x: dayLabels[i],
                        y: 0,
                        showLabel: false,
                        dateKey: ''
                    }));
                }
            });

            const options = {
                chart: {
                    height: 450,
                    type: 'heatmap',
                    toolbar: {
                        show: false
                    },
                    events: {
                        dataPointSelection: function(event, chartContext, config) {
                            const point = config.w.config.series[config.seriesIndex].data[config.dataPointIndex];
                            if (point.showLabel) {
                                var res = point.dateKey;
                                load_heat_data_by_category(res);
                            }
                        }
                    }
                },
                plotOptions: {
                    heatmap: {
                        shadeIntensity: 0.1,
                        colorScale: {

                            ranges: [{
                                    from: 0,
                                    to: 89,
                                    name: '<90%',
                                    color: '#f08080'
                                },
                                {
                                    from: 90,
                                    to: 94,
                                    name: '90-94%',
                                    color: '#ffa500'
                                },
                                {
                                    from: 95,
                                    to: 100,
                                    name: '>95%',
                                    color: '#28a745'
                                }
                            ]
                        }
                    }
                },
                dataLabels: {
                    enabled: true,
                    useHTML: true,
                    style: {
                        colors: ['#000'],
                        fontSize: '12px',
                        textAlign: 'center'
                    },
                    formatter: function(val, {
                        seriesIndex,
                        dataPointIndex,
                        w
                    }) {
                        const point = w.config.series[seriesIndex].data[dataPointIndex];
                        const ddd = point.dateKey;
                        const [month, day, year] = ddd.split('-');
                        const outputDate = `${day}-${month}-${year}`;
                        return point.showLabel ? `${outputDate} (${val}%)` : '';
                    }
                },
                xaxis: {
                    type: 'category',
                    categories: dayLabels,
                    position: 'top',
                    labels: {
                        style: {
                            fontWeight: 'bold'
                        }
                    }
                },
                tooltip: {
                    enabled: true,
                    y: {
                        formatter: val => val > 0 ? `${val}%` : ''
                    }
                },
                legend: {
                    show: true,
                    position: 'bottom',
                    horizontalAlign: 'center'
                },
                series: weeks
            };

            const chart = new ApexCharts(document.querySelector("#chart_heap_map_canvas"), options);
            chart.render();
        }




        function load_heat_data_by_category(inputDate) {

            const [month, day, year] = inputDate.split("-");
            const formattedDate = `${year}-${month}-${day}`;
               const displayDate = `${day}-${month}-${year}`;
            // console.log(formattedDate);

            var kitchen = $("#kitchen").val();
            var report_type = $('#report_type').val();
            var from_date = formattedDate;
            var to_date = formattedDate;
            var brands_name = $('#brands_name').val();



            if (kitchen && report_type && to_date && to_date) {
                var data = {};
                data['kitchen'] = kitchen;
                data['report_type'] = report_type;
                data['from_date'] = from_date;
                data['to_date'] = to_date;
                data['brands_name'] = brands_name;
                data['operation_status'] = 2;
                data['user_id'] = $("#user_id").val();
                data['_token'] = "{{ csrf_token() }}";
                $("#pageloader").fadeIn();
                // console.log(data);
                $.ajax({
                    type: 'POST',
                    url: 'retrive_operation_entry_data_v2',
                    data: data,

                    success: function(result) {
                        $("#pageloader").fadeOut();
                        $('#hidden_drill_down_heat').show();
                        var data_array = jQuery.parseJSON(result);
                        get_heat_graph_chart_by_category(data_array);

                        $('#drill_down_for_heat_graph').html(displayDate);
                        // var data_array = jQuery.parseJSON(result);

                    }
                })
            }
        }




        function get_heat_graph_chart_by_category(data_array) {
            $('#retrive_heat_chart_by_category').html('<div id="heatBarChartCanvas"></div>');

            const nonUpdatedData = sanitizeData(data_array['nonUpdate']).slice(0, data_array['catorory'].length);
            const updatedData = sanitizeData(data_array['update']).slice(0, data_array['catorory'].length);
            const originalCategories = data_array['catorory'];

            const options = {
                chart: {
                    type: 'bar',
                    height: 450,
                    stacked: true,
                    toolbar: {
                        show: false
                    }
                },
                plotOptions: {
                    bar: {
                        horizontal: false,
                        columnWidth: '50%'
                    }
                },
                dataLabels: {
                    enabled: false
                },
                series: [{
                        name: 'Updated',
                        data: updatedData
                    },
                    {
                        name: 'Non-Updated',
                        data: nonUpdatedData
                    }
                ],
                colors: ['#21685AD8', '#83172CDA'],
                xaxis: {
                    categories: originalCategories,
                    labels: {
                        show: false
                    },
                    axisTicks: {
                        show: false
                    },
                    axisBorder: {
                        show: false
                    }
                },
                yaxis: {
                    min: 0,
                    labels: {
                        style: {
                            fontSize: '12px'
                        }
                    }
                },
                legend: {
                    position: 'bottom'
                },
                tooltip: {
                    y: {
                        formatter: val => val
                    }
                }
            };

            const chart = new ApexCharts(document.querySelector("#heatBarChartCanvas"), options);
            chart.render();
        }

        function sanitizeData(data) {
            return data.map(item => (isNaN(item) || item === undefined || item === null) ? 0 : item);
        }




        // stacked bar chart

        function load_stacked_bar(data_array) {
            $('#hidden_drill_down').hide();
            $('#stack_bar_chart').html('');
            $('#stack_bar_chart').html('<div id="stack_bar_chart_canvas"></div>');
            const categories = data_array['dates'] || [];
            const nonUpdatedData = data_array['nonUpdate'] || [];
            const updatedData = data_array['update'] || [];
            const rateData = data_array['rate'] || [];
            const totalData = data_array['total'] || [];

            const hasRateData = rateData.some(val => val !== 0); // <-- Check if any non-zero rate exists

            const series = [{
                    name: 'Non-Updated',
                    type: 'bar',
                    data: nonUpdatedData
                },
                {
                    name: 'Updated',
                    type: 'bar',
                    data: updatedData
                }
            ];

            if (hasRateData) {
                series.push({
                    name: 'Completion Rate',
                    type: 'line',
                    data: rateData
                });
            }

            const options = {
                chart: {
                    height: 400,
                    type: 'line',
                    stacked: true,
                    toolbar: {
                        show: false
                    },
                    events: {
                        dataPointSelection: function(event, chartContext, config) {
                            const dataPointIndex = config.dataPointIndex;
                            const clickedDate = categories[dataPointIndex];
                            stack_bar_graph_by_category(clickedDate);
                        }
                    }
                },
                series: series,
                xaxis: {
                    categories: categories
                },
                yaxis: [{},
                    {
                        opposite: true,
                        max: 100,
                        min: 0
                    }
                ],
                colors: ['#83172CDA', '#21685AD8', '#4e73df'],
                tooltip: {
                    shared: true,
                    custom: function({
                        dataPointIndex,
                        w
                    }) {
                        const total = data_array.total[dataPointIndex];
                        const nonUpdated = w.globals.initialSeries[0].data[dataPointIndex];
                        const updated = w.globals.initialSeries[1].data[dataPointIndex];
                        const rate = (hasRateData && w.globals.initialSeries[2]) ? w.globals.initialSeries[2].data[dataPointIndex] : 0;

                        return `
                <div style="padding: 10px;">
                    <strong>${w.globals.categoryLabels[dataPointIndex]}</strong><br/>
                    <span style="color: #FFA500;">Total: ${total}</span><br/>
                    <span style="color: #dc3545;">Non-Updated: ${nonUpdated}</span><br/>
                    <span style="color: #28a745;">Updated: ${updated}</span><br/>
                    <span style="color: #4e73df;">Completion Rate: ${rate}%</span>
                </div>
            `;
                    }
                },
                stroke: {
                    width: [0, 0, 3]
                },
                plotOptions: {
                    bar: {
                        columnWidth: '50%',
                        endingShape: 'flat'
                    }
                },
                legend: {
                    position: 'bottom'
                }
            };

            const chart = new ApexCharts(document.querySelector("#stack_bar_chart_canvas"), options);
            chart.render();

        }

        function stack_bar_graph_by_category(clickedDate) {
            var kitchen = $("#kitchen").val();
            var report_type = $('#report_type').val();
            var from_date = clickedDate;
            var to_date = clickedDate;
            var brands_name = $('#brands_name').val();
            // console.log(clickedDate);
            if (kitchen && report_type && to_date && to_date) {
                data['kitchen'] = kitchen;
                data['report_type'] = report_type;
                data['from_date'] = from_date;
                data['to_date'] = to_date;
                data['brands_name'] = brands_name;
                data['operation_status'] = 2;
                data['user_id'] = $("#user_id").val();
                data['_token'] = "{{ csrf_token() }}";
                $("#pageloader").fadeIn();
                $.ajax({
                    type: 'POST',
                    url: 'retrive_operation_entry_data_v2',
                    data: data,

                    success: function(result) {
                        $("#pageloader").fadeOut();

                        $('#hidden_drill_down').show();

                        $('#drill_down_for_stack_graph').html(clickedDate);
                        var data_array = jQuery.parseJSON(result);
                        get_stack_bar_chart_by_category(data_array);

                        var res = data_array['overAllCount'];
                        // console.log(res);
                        // $('#total_count').html(res.total);
                        // $('#updated_count').html(res.updated);
                        // $('#non_count').html(res.nonupdated);
                        // $('#average_count').html(res.calculateRate)

                    }
                })
            }
        }

        function get_stack_bar_chart_by_category(data_array) {

            $('#retrive_stack_bar_chart_by_category').html('<div id="stackBarChartCanvas"></div>');

            const nonUpdatedData = data_array['nonUpdate'];
            const updatedData = data_array['update'];
            const originalCategories = data_array['catorory'];

            const options = {
                chart: {
                    type: 'bar',
                    height: 450,
                    stacked: true,
                    toolbar: {
                        show: false
                    }
                },
                plotOptions: {
                    bar: {
                        horizontal: false,
                        columnWidth: '50%',
                    }
                },
                dataLabels: {
                    enabled: false
                },
                series: [{
                        name: 'Updated',
                        data: updatedData
                    },
                    {
                        name: 'Non-Updated',
                        data: nonUpdatedData
                    }
                ],
                colors: ['#3e3e3e', '#BA434D'],
                xaxis: {
                    categories: originalCategories,
                    // show the label at below
                    // labels: {
                    //     style: {
                    //         fontSize: '12px',
                    //         whiteSpace: 'normal' // allow wrapping
                    //     }
                    // }

                    labels: {
                        show: false
                    },
                    axisTicks: {
                        show: false
                    },
                    axisBorder: {
                        show: false
                    }
                },
                yaxis: {
                    min: 0,
                    labels: {
                        style: {
                            fontSize: '12px'
                        }
                    }
                },
                legend: {
                    position: 'bottom'
                },
                tooltip: {
                    y: {
                        formatter: function(val) {
                            return val;
                        }
                    }
                }
            };

            const chart = new ApexCharts(document.querySelector("#stackBarChartCanvas"), options);
            chart.render();
        }






        //area chart
        function load_area_chart(data_array) {
            $('#view_area_chart').html('');

            const updates = data_array['update'];
            const dates = data_array['dates'];

            const pairedData = dates.map((date, index) => ({
                x: date,
                y: updates[index]
            }));

            const options = {
                series: [{
                    name: "Updated",
                    data: pairedData
                }],
                chart: {
                    type: 'area',
                    height: 350,
                    zoom: {
                        enabled: false
                    }
                },
                colors: ['#c77dff'], // Added custom color
                dataLabels: {
                    enabled: false
                },
                stroke: {
                    curve: 'straight'
                },
                fill: {
                    type: 'solid',
                    opacity: 1
                },
                xaxis: {
                    type: 'category',
                    labels: {
                        rotate: -45,
                        style: {
                            fontSize: '12px'
                        }
                    }
                },
                yaxis: {
                    opposite: true
                },
                legend: {
                    horizontalAlign: 'left'
                }
            };

            const chart = new ApexCharts(document.querySelector("#view_area_chart"), options);
            chart.render();
        }


        // weekly progress

        function donutchart(data_array) {
            $('#charts-container').html('');

            const dates = data_array['dates'];
            const update = data_array['update'];
            const nonUpdate = data_array['nonUpdate'];

            const weeks = [];
            for (let i = 0; i < dates.length; i += 7) {
                weeks.push({
                    dates: dates.slice(i, i + 7),
                    update: update.slice(i, i + 7),
                    nonUpdate: nonUpdate.slice(i, i + 7)
                });
            }

            weeks.forEach((week, index) => {
                const updateSum = week.update.reduce((a, b) => a + b, 0);
                const nonUpdateSum = week.nonUpdate.reduce((a, b) => a + b, 0);
                const total = updateSum + nonUpdateSum;
                // const percentage = total ? ((updateSum / total) * 100).toFixed(1) : 0;
                const percentage = total > 0 ? ((updateSum / total) * 100).toFixed(1) : "0";


                const weekRange = `${week.dates[0]} - ${week.dates[week.dates.length - 1]}`;
                console.log(`Week ${index + 1}`, {
                    updateSum,
                    nonUpdateSum,
                    total,
                    percentage
                });

                let color;
                if (percentage >= 95) {
                    color = "#28a745"; // green
                } else if (percentage >= 90) {
                    color = "#ff8c00"; // dark orange
                } else {
                    color = "#ff8095"; // light pink
                }

                const chartId = `chart-week-${index + 1}`;
                const container = document.createElement("div");
                container.className = "chart-box";

                const title = document.createElement("div");
                title.className = "chart-title";
                title.innerText = `Week ${index + 1}`;

                const subtitle = document.createElement("div");
                subtitle.className = "chart-subtitle";
                subtitle.innerText = `(${weekRange})\nTotal: ${total} | Completed: ${updateSum}`;

                const chartDiv = document.createElement("div");
                chartDiv.id = chartId;

                container.appendChild(title);
                container.appendChild(subtitle);
                container.appendChild(chartDiv);
                document.getElementById("charts-container").appendChild(container);

                const options = {
                    series: [parseFloat(percentage)],
                    chart: {
                        type: "radialBar",
                        height: 170,
                        sparkline: {
                            enabled: true // hide axes, etc.
                        }
                    },
                    plotOptions: {
                        radialBar: {
                            hollow: {
                                size: "60%"
                            },
                            dataLabels: {
                                name: {
                                    show: false
                                },
                                value: {
                                    fontSize: "20px",
                                    fontWeight: "bold",
                                    color: "#000",
                                    formatter: val => `${val}%`
                                }
                            }
                        }
                    },
                    colors: [color],
                    labels: [""]
                };

                const chart = new ApexCharts(chartDiv, options);
                chart.render();
            });

        }

        function view_weekly_process_data(data_array) {
            $('#weeklyTable').DataTable().clear().destroy();
            const dates = data_array.dates;
            const total = data_array.total;
            const update = data_array.update;
            const nonUpdate = data_array.nonUpdate;
            const rate = data_array.rate;

            const tbody = document.querySelector("#weeklyTable tbody");
            tbody.innerHTML = "";

            for (let i = 0; i < dates.length; i++) {

                const date = convertToYMD(dates[i]);
                const totalVal = isFinite(total[i]) ? total[i] : 0;
                const updateVal = isFinite(update[i]) ? update[i] : 0;
                const nonUpdateVal = isFinite(nonUpdate[i]) ? nonUpdate[i] : 0;
                const rateVal = isFinite(rate[i]) ? rate[i] : 0;

                const row = `
                    <tr>
                        <td>${date}</td>
                        <td>${totalVal}</td>
                        <td>${updateVal}</td>
                        <td>${nonUpdateVal}</td>
                        <td>${rateVal}%</td>
                    </tr>`;
                tbody.innerHTML += row;
            }

            if (!$.fn.DataTable.isDataTable('#weeklyTable')) {
                $('#weeklyTable').DataTable();
            }
        }

        function convertToYMD(dateStr) {
            const parts = dateStr.split("-");
            return `${parts[2]}-${parts[1]}-${parts[0]}`;
        }

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

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

                    // get_checklist_data();
                }
            })
        }
    </script>
</body>

</html>