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


<style>
    #main {
        padding: 5px 10px !important;
    }

    body {
        font-family: "Calibri", "Arial", "Helvetica", sans-serif !important;
        background: #ecf0f9;
    }

    .card-title {
        padding: 10px 0 5px 0;
        font-size: 18px;
        color: #BA434D;
        font-family: "Poppins", sans-serif;
    }



    .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: 10000;
    }

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




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

    #kitchen_edit_chosen {
        width: 100% !important;
    }

    ul.chosen-results {
        height: 75px;
        overflow-y: scroll;
    }

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

    .button-adjust1 {
        float: right;
        margin-top: 1%;
    }



    .calendar {
        display: grid;
        grid-template-columns: repeat(7, 1fr);
        gap: 5px;
        max-width: 400px;
        margin: 20px auto;
    }

    #reportrange {
        border: 1px solid rgba(0, 0, 0, .125);
        padding: 5px;
        border-radius: 5px;
    }

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

    }

    @media (max-width: 500px) {
        #cal_holder {
            overflow-x: scroll;
        }

        .form-floating label {
            font-size: 12px;
            /* Adjust the size as needed */
        }
    }


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

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

    .btn-success {
        color: #fff;
        background-color: #BA434D !important;
        border-color: #BA434D !important;
    }

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


    }

    #btn_excel2 {
        float: right;
        background-color: white;
        color: #963131 !important;
        display: block;
        padding-right: 0px;
        padding-top: 0px;
        font-size: 9px;

    }

    button.dt-button,
    div.dt-button,
    a.dt-button {
        color: #963131 !important;
    }

    @media only screen and (min-width: 200px) and (max-width: 768px) {}
</style>

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

    <div class="col-lg-12" id="pageloader">
        <img src="images/256x256.gif">
    </div>


    <main id="main" class="main">
        <div class="card" id="desktop_view">
            <div class="card-body" style="padding: 0 10px 0px 15px;">
                <div class="row">
                    <div class="col-sm-8">
                        <!-- <h5 class="card-title">Particulars/Activity Add</h5> -->
                        <h5 class="card-title" style="font-weight: bold;">Clients Usage Report</h5>
                    </div>

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


        <div class="card" style="margin-top:-2% ;">

            <div class="card-body">
                <form class="row g-3 pt-3" id="ingrAdd" method="POST">
                    <input type="hidden" value="{{csrf_token()}}" name="_token">

                    <div class="col-md-3">
                        <div class="form-floating mb-3">
                            <select class="sd-CustomSelect" id="clients" name="clients[]" multiple>
                                                            </select>
                            <label for="floatingName" id="multiselect_label">Clients</label>
                            <p id="Clients_Error_01" style="color:red"></p>
                        </div>
                    </div>
                    <div class="col-xxl-4 col-md-4">
                        <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="start" name="start" />
                            <input type="hidden" id="end" name="end" />
                            <span style="margin-top: -21px;" id="alldates"></span>
                        </div>
                    </div>
                </form>
            </div>

        </div>
        <!-- REPORTS STARTS FROM HERE -->
        <div class="card" id="report_table" style="margin-top: -1%;">
            <div class="card-body">
                <h5 class="card-title" style="font-weight: bold;">Details</h5><span id="btn_excel2"></span>
                <ul class="nav nav-tabs nav-tabs-bordered" id="borderedTab" role="tablist">


                    <li class="nav-item" role="presentation">
                        <button class="nav-link active" id="home-tab" data-bs-toggle="tab"
                            data-bs-target="#bordered-home" type="button" role="tab" aria-controls="home"
                            aria-selected="true">Report Details<span id="daily_count"></span></button>
                    </li>
                    <!-- Quarterly Tab -->
                    <li class="nav-item" role="presentation">
                        <button class="nav-link" id="quarterly_1-tab" data-bs-toggle="tab" data-bs-target="#quarterly_1"
                            type="button" role="tab" aria-controls="quarterly_1"
                            aria-selected="false">Kitchens Access Control<span id="weekly_count"></span></button>
                    </li>
                    <!-- <li class="nav-item" role="presentation">
                        <button class="nav-link" id="quarterly_1-tab22" data-bs-toggle="tab" data-bs-target="#quarterly_122"
                            type="button" role="tab" aria-controls="quarterly_122"
                            aria-selected="false">Analytics<span id="weekly_count"></span></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 class="col-lg-12" id="tcp_table1">

                            <table id="user_view_table" class='display dataTable nowrap' style="width:100%">
                                <thead>
                                    <tr>
                                        <th scope="col">Client Names</th>
                                        <th scope="col">Outlet Names</th>
                                        <th scope="col">Label Sticker</th>
                                        <th scope="col">Photo Capture</th>
                                        <th scope="col">Operation Checklist</th>
                                        <th scope="col">HR Tool</th>
                                        <th scope="col">Speaker</th>
                                        <th scope="col">Production Label</th>
                                        <th scope="col">Ticket System</th>
                                        <th scope="col">TSense</th>
                                    </tr>
                                </thead>
                            </table>
                        </div>
                    </div>
                    <!-- Quarterly Pane -->
                    <div class="tab-pane fade" id="quarterly_1" role="tabpanel" aria-labelledby="quarterly_1-tab">
                        <div class="col-lg-12" id="tcp_table2">
                            <div class="card">
                                <div class="card-body mt-3" style="overflow-x:auto;">

                                    <form class="row g-3 pt-3" id="accessAdd">
                                        <input type="hidden" value="{{csrf_token()}}" name="_token">

                                        <div class="col-md-3">
                                            <div class="form-floating mb-3">
                                                <select class="sd-CustomSelect" id="clients_access" name="clients_access" onchange="get_kitchens();">
                                                    <option value="">Select Client</option>
                                                                                                    </select>
                                                <label for="floatingName" id="multiselect_label">Clients</label>
                                                <p id="Clients_Error_011" style="color:red"></p>
                                            </div>
                                        </div>
                                        <div id="kitchenList" class="col-md-6 mt-4" style="display:none;">
                                            <div class="card p-3 shadow-sm">
                                                <h5>Assign Kitchens</h5>
                                                <div id="kitchenCheckboxContainer"
                                                    style="max-height:250px; overflow-y:auto; border:1px solid #ddd; padding:10px; border-radius:8px;">
                                                </div>
                                                <button class="btn btn-primary" type="button" onclick="save_mapping();">Update</button>
                                            </div>
                                        </div>
                                    </form>
                                </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 rel="stylesheet" href="\assets\js\multi-select-css.css">
    <script src="\assets\js\multi-select.js"></script>
    <script src='assets/vendor/excel_datatable/buttons.html5.min.js'></script>
    <script src='assets/vendor/excel_datatable/dataTables.buttons.min.js'></script>
    <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-beta.1/dist/css/select2.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-beta.1/dist/js/select2.min.js"></script>
    <script src="https://cdn.datatables.net/rowgroup/1.3.1/js/dataTables.rowGroup.min.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" />
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
    <script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>
    <link rel="stylesheet" href="https://cdn.datatables.net/fixedcolumns/4.3.0/css/fixedColumns.dataTables.min.css">
    <script src="https://cdn.datatables.net/fixedcolumns/4.3.0/js/dataTables.fixedColumns.min.js"></script>

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


            var start = moment().subtract(1, 'days');
            var end = moment();

            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'));
                $('#start').val(start.format('YYYY-MM-DD'));
                $('#end').val(end.format('YYYY-MM-DD'));
                //get_dashboard_data();
                $('#start, #end').trigger('change');
            }

            $('#reportrange').daterangepicker({
                startDate: start,
                endDate: end,
                maxDate: moment(),
                maxSpan: {
                    "days": 6
                },
                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);
        });


        $('#clients, #start, #end').on('change', function() {
            clearTimeout(debounceChecklistTimer);

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

                if (clients.length > 0) {
                     get_dashboard_data();
                }
            }, 1000);
        });

        function get_dashboard_data() {
            const mysql_attr = $('#clients').val(); // main value
            const data = {
                "_token": "{{csrf_token()}}",
                "from_date": $("#start").val(),
                "to_date": $("#end").val(),
                "clients": mysql_attr,
            };
            $("#pageloader").fadeIn();
            $.ajax({
                url: "get_client_wise_usage_stat",
                type: "POST",
                data: data,
                success: function(result) {
                    $("#pageloader").fadeOut();
                    //  var data_array = jQuery.parseJSON(result);
                    load_table(result)
                },
                error: function() {

                }
            })
        }

        function get_kitchens() {
            const mysql_attr = $('#clients_access').val(); // main value
            const data = {
                "_token": "{{csrf_token()}}",
                "clients": mysql_attr,
            };
            $("#pageloader").fadeIn();
            $.ajax({
                url: "get_mapped_kitchens",
                type: "POST",
                data: data,
                success: function(result) {
                    $("#pageloader").fadeOut();
                    let container = $('#kitchenCheckboxContainer');
                    container.empty();
                    if (result == false) {
                        container.html('<p class="text-muted">No kitchens found.</p>');
                        return;
                    } else {
                        var arr = jQuery.parseJSON(result);
                        $.each(arr, function(key, val) {

                            $('#kitchen').append('<option value="' + arr[key]['id'] +
                                '">' + arr[key]['kitchen_name'] + '</option>');
                            var checked;
                            if (arr[key]['map_status'] == null || arr[key]['map_status'] == '') {
                                checked = 0 ? 'checked' : '';
                            } else {
                                checked = arr[key]['map_status'] ? 'checked' : '';
                            }
                            container.append(`
                        <div class="form-check">
                            <input class="form-check-input" type="checkbox" name="kitchens[]" 
                                   value="${arr[key]['kids']}" id="kitchen_${arr[key]['kids']}" ${checked}>
                            <label class="form-check-label" for="kitchen_${arr[key]['kids']}">
                                ${arr[key]['knames']}
                            </label>
                        </div>
                    `);
                        });



                        $('#kitchenList').show();
                    }
                },
                error: function() {

                }
            })
        }

        function save_mapping() {
            const mysql_attr = $('#clients_access').val();
            if (!mysql_attr) {
                alert('Please select a client.');
                return;
            }
            let kitchens = [];
            $('input[name="kitchens[]"]:checked').each(function() {
                kitchens.push($(this).val());
            });
            const data = {
                "_token": "{{csrf_token()}}",
                "clients": mysql_attr,
                 "kitchen_id": kitchens,

            };
             $("#pageloader").fadeIn();
            $.ajax({
                url: "update_kitchen_mapped_status",
                type: "POST",
                data: data,
                success: function(res) {
                     $("#pageloader").fadeOut();
                    if (res) {
                        alert('Mapping saved successfully!');
                        get_kitchens();
                    } else {
                        alert('Error saving mapping.');
                    }
                },
                error: function(xhr, status, error) {
                    console.error('Error:', error);
                    alert('Error connecting to server.');
                }
            })
        }

        function load_table(data_array) {
            var collapsedGroups = {};
            [...new Set(data_array.map(r => r.Client))].forEach(client => {
                collapsedGroups[client] = true; // ✅ collapsed by default
            });

            $('#user_view_table').DataTable().destroy();
            var tableData2 = $('#user_view_table').DataTable({
                autoWidth: true,
                ordering: true,
                order: [
                    [0, 'asc']
                ],
                scrollY: "450px",
                scrollX: true,
                scrollCollapse: true,
                bPaginate: false,
                responsive: true,
                dom: 'Blfrtip',
                data: data_array,
                columns: [{
                        data: "Client",
                        title: "Client Names",
                        className: "no-break",

                    },
                    {
                        data: "Kitchen",
                        title: "Outlet Names",
                        className: "no-break"
                    },
                    {
                        data: "label_sticker",
                        title: "Label Sticker",
                        className: "no-break",
                        render: function(data, type, row) {
                            if (data == 'NA') {
                                return data
                            } else {
                                return data + '%';
                            }
                        }
                    },
                    {
                        data: "photo_capture",
                        title: "Photo Capture",
                        className: "no-break",
                        render: function(data, type, row) {
                            if (data == 'NA') {
                                return data
                            } else {
                                return data + '%';
                            }
                        }
                    },
                    {
                        data: "operations_checklist",
                        title: "Operation Checklist",
                        className: "no-break",
                        render: function(data, type, row) {
                            if (data == 'NA') {
                                return data
                            } else {
                                return data + '%';
                            }
                        }
                    },
                    {
                        data: "hr_attendance",
                        title: "HR Tool",
                        className: "no-break",
                        render: function(data, type, row) {
                            if (data == 'NA') {
                                return data
                            } else {
                                return data + '%';
                            }
                        }
                    },
                    {
                        data: "speaker",
                        title: "Speaker",
                        className: "no-break",
                        render: function(data, type, row) {
                            if (data == 'NA') {
                                return data
                            } else {
                                return data + '%';
                            }
                        }
                    },
                    {
                        data: "production_label",
                        title: "Production Label",
                        className: "no-break",
                        render: function(data, type, row) {
                            if (data == 'NA') {
                                return data
                            } else {
                                return data + '%';
                            }
                        }
                    },
                    {
                        data: "ticket_system",
                        title: "Ticket System",
                        className: "no-break",
                        render: function(data, type, row) {
                            if (data == 'NA') {
                                return data
                            } else {
                                return data + '%';
                            }

                        }
                    },
                    {
                        data: "tsense",
                        title: "Tsense",
                        className: "no-break",
                        render: function(data, type, row) {
                            if (data == 'NA') {
                                return data
                            } else {
                                return data + '%';
                            }
                        }
                    }
                ],
                buttons: [{
                    extend: 'excelHtml5',
                    text: '<i class="fas fa-file-excel" title="client_usage"></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 'client_usage_' + formatted_date;
                    },
                }],
                columnDefs: [{
                    className: "dt-center",
                    targets: "_all",
                    width: "10%"
                }],
                rowGroup: {
                    dataSrc: 'Client',
                    startRender: function(rows, group) {
                        var collapsed = !!collapsedGroups[group];

                        var avgCols = [
                            "label_sticker",
                            "photo_capture",
                            "operations_checklist",
                            "hr_attendance",
                            "speaker",
                            "production_label",
                            "ticket_system",
                            "tsense"
                        ];

                        var avgs = avgCols.map(col => {
                            var values = rows.data().pluck(col).toArray();

                            // Check if all values are "NA"
                            var allNA = values.every(v => v === "NA" || v === null || v === undefined || v === "");

                            if (allNA) {
                                return "NA";
                            } else {
                                // Calculate numeric average, treating NA as 0 excluded from count
                                var validValues = values
                                    .map(v => parseFloat(v))
                                    .filter(v => !isNaN(v));

                                var total = validValues.reduce((a, b) => a + b, 0);
                                var avg = validValues.length ? (total / validValues.length).toFixed(1) : "NA";
                                return avg + '%';
                            }
                        });

                        // Collapse behavior
                        rows.nodes().to$().each(function() {
                            this.style.display = collapsed ? 'none' : '';
                        });

                        // Build the group row
                        var avgCells = avgs
                            .map(v => `<td style="text-align:center;">${v}</td>`)
                            .join('');

                        return $('<tr/>')
                            .append(`<td colspan="2" style="background:#f8f9f9"><b>${group}</b> (${rows.count()} Outlets)</td>`)
                            .append(avgCells)
                            .attr('data-name', group)
                            .toggleClass('collapsed', collapsed)
                            .css('background', '#f8f9f9');
                    }
                },
                drawCallback: function() {
                    $('#user_view_table tbody tr').each(function() {
                        const groupName = $(this).data('name');
                        const isHeader = $(this).hasClass('dtrg-start');
                        $(this).toggle(isHeader || !collapsedGroups[groupName]);
                    });
                },

                initComplete: function() {
                    setTimeout(() => tableData2.columns.adjust().draw(), 300);
                    $(".toggle-sidebar-btn").click(() => setTimeout(() => tableData2.columns.adjust().draw(), 300));
                },
                fixedColumns: {
                    leftColumns: 2
                }
            });

            // ✅ Excel export button placement
            tableData2.buttons(0, null).container().appendTo($('#btn_excel2')).addClass('export');

            // ✅ Handle group header click — keeps scroll position fixed
            $('#user_view_table tbody').on('click', 'tr.dtrg-start', function() {
                var group = $(this).data('name');
                var scrollPos = $('.dataTables_scrollBody').scrollTop(); // store current scroll
                collapsedGroups[group] = !collapsedGroups[group];
                tableData2.draw(false);
                tableData2.columns.adjust().draw(false);

                // restore scroll position
                $('.dataTables_scrollBody').scrollTop(scrollPos);
            });
        }
    </script>
</body>

</html>