@extends("back.layouts.pages-layout")

@push("stylesheets")
    <link rel="stylesheet" href="{{ asset("vendor/dataTables/dataTables.dataTables.min.css") }}" />
    <link rel="stylesheet" href="{{ asset("vendor/dataTables/buttons.bootstrap5.css") }}">

    <style>
        #sales_report_otc_table {
            white-space: nowrap !important;
        }
    </style>
@endpush

@section("pageTitle", isset($pageTitle) ? $pageTitle : "Sales")
@section("pageHeader", isset($pageHeader) ? $pageHeader : "Sales")
@section("content")

@livewire("sales-report-otc-table")

@endsection

@push("scripts")
    <script src="{{ asset("vendor/dataTables/dataTables.min.js") }}"></script>
    <script src="{{ asset("back/dist/libs/tom-select/dist/js/tom-select.complete.min.js?1692870487") }}"></script>
    <script src="{{ asset("vendor/dataTables/dataTables.buttons.js") }}"></script>
    <script src="{{ asset("vendor/dataTables/buttons.bootstrap5.js") }}"></script>
    <script src="{{ asset("vendor/dataTables/jszip.min.js") }}"></script>
    <script src="{{ asset("vendor/dataTables/pdfmake.min.js") }}"></script>
    <script src="{{ asset("vendor/dataTables/vfs_fonts.js") }}"></script>
    <script src="{{ asset("vendor/dataTables/buttons.html5.min.js") }}"></script>
    <script src="{{ asset("vendor/dataTables/buttons.print.min.js") }}"></script>

    <script>
        var sales_report_otc_table;

        $(document).ready(function () {
            new TomSelect("#supplier");
            new TomSelect("#brand");
            
            let branchTomSelect = new TomSelect("#branch");

            branchTomSelect.disable();

            $("#brand").change(function() {
                let brand_id = $(this).val();

                if (brand_id) {
                    branchTomSelect.clearOptions();

                    $.ajax({
                        url: `https://api.r2groupcfs.ph/supplier-api/branch/getBranches?api-key=WDQOWgM2hgUjQpFngkyr&brand_id=${brand_id}`, // Replace with your API endpoint
                        method: "GET",
                        dataType: "JSON",
                        success: function(data) {
                            branchTomSelect.addOption({value: "All Branches", text: "All Branches" });

                            data.data.forEach(branch => {
                                branchTomSelect.addOption({ value: branch.branch_id, text: branch.branch_name });
                            });

                            branchTomSelect.refreshOptions();
                        },
                        error: function() {
                            console.error("Failed to fetch branches.");
                        },
                        complete: function() {
                            branchTomSelect.enable();
                        }
                    });
                }
            });

            get_categorysalesmonths();
        });

        function get_categorysalesmonths() {
            let monthTomSelect = new TomSelect("#month");

            monthTomSelect.disable();

            $.ajax({
                url: "{{ route("auth.get_categorysalesmonths") }}",  // Use the named route
                method: "GET",
                dataType: "JSON",
                success: function(data) {
                    data.forEach(month => {
                        monthTomSelect.addOption({ value: month.categorysalesmonths_date, text: month.categorysalesmonths_name });
                    });

                    monthTomSelect.refreshOptions();
                },
                error: function() {
                    console.error("Failed to fetch months.");
                },
                complete: function() {
                    monthTomSelect.enable();
                }
            });
        }

        function fetchSalesReportOtc(button) {
            button.disabled = true;
            button.innerHTML = `<span class="spinner-border spinner-border-sm me-2" role="status"></span>`;

            let supplier = $("#supplier").val();
            let brand_id = $("#brand").val();
            let branch_id = $("#branch").val();
            let month = $("#month").val();

            if (!brand_id || !branch_id || !month) {
                toastr.warning("All fields are required");

                button.disabled = false;
                button.innerHTML = `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-search">
                    <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
                    <path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path>
                    <path d="M21 21l-6 -6"></path>
                </svg>
                Search`;
                
                return;
            }

            if ($.fn.DataTable.isDataTable("#sales_report_otc_table")) {
                $("#sales_report_otc_table").DataTable().destroy();
            }

            sales_report_otc_table = $("#sales_report_otc_table").DataTable({
                processing: true,
                /* serverSide: true, */
                language: {
                    /* processing: `<div class="spinner-border"></div>`, */
                    search: "",
                    searchPlaceholder: "Search...",
                },
                paging: false,
                ajax: {
                    url: `https://api.r2groupcfs.ph/supplier-api/supplier/getOtcSalesReport?api-key=WDQOWgM2hgUjQpFngkyr`,
                    method: "GET",
                    data: {
                        "brand_id": brand_id,
                        "branch_id": branch_id,
                        "supplier": supplier,
                        "month": month
                    },
                    dataSrc: function (json) {
                        return json.data;
                    },
                    complete: function() {
                        button.disabled = false;
                        button.innerHTML = `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-search">
                            <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
                            <path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path>
                            <path d="M21 21l-6 -6"></path>
                        </svg>
                        Search`;
                    }
                },
                layout: {
                    topStart: {
                        buttons: [
                            {
                                extend: 'excel', 
                                classname: "btn btn-primary", 
                                title: function() {
                                    return "Sales-" + $("#supplier option:selected").text() + "-" + $("#brand option:selected").text() + "-" + $("#branch option:selected").text() + "-" + $("#month option:selected").text();
                                },
                            },
                        ],
                    }
                },
                order: [[0, "desc"]],
                columns: [
                    { data: "date", name: "date", className: "text-center" },
                    { data: "supplier", name: "supplier", className: "text-center" },
                    { data: "brand_name", name: "brand_name", className: "text-center" },
                    { data: "branch_name", name: "branch_name", className: "text-center" },
                    { data: "otc_name", name: "otc_name" },
                    { 
                        data: "count", 
                        name: "count",
                        className: "text-center", render: function(data, type, row) {
                            return parseInt(data).toLocaleString(undefined, { minimumFractionDigits: 0});
                        } 
                    },
                ],
                footerCallback: function(row, data, start, end, display) {
                    $("#sales_report_otc_table_footer").removeClass("d-none");

                    var api = this.api();

                    // Calculate the grand total for column 2 (index 1)
                    var grand_total_count = api
                        .column(5, {page: "current"})
                        .data()
                        .reduce(function(a, b) {
                            return parseInt(a) + parseInt(b);
                        }, 0);

                    // Update the footer with the grand total
                    $(api.column(5).footer()).html(
                        grand_total_count.toLocaleString(undefined, { minimumFractionDigits: 0 })
                    );
                },
                preDrawCallback: function(settings) {
                    $(".dt-layout-row").addClass("row");
                },
            });
        }
    </script>
@endpush