@extends(BaseHelper::getAdminMasterLayoutTemplate())
@section('content')
    <!-- DataTables Bootstrap -->
    <link rel="stylesheet"
        href="{{ asset('vendor/core/core/base/libraries/datatables/media/css/dataTables.bootstrap.min.css') }}">
    @php use Carbon\Carbon; @endphp

    <!-- Page Header -->
    <div class="row align-items-center mb-2">
        <div class="col-auto">
            <h4 class="mb-0">Items Sales Report</h4>
        </div>

        <div class="col-auto ms-auto">
            <form id="filter-form" class="row g-2 align-items-center">

                <div class="col-auto">
                    <x-core::button type="button" color="primary" :outlined="true" id="date-range-picker"
                        data-format-value="{{ trans('plugins/ecommerce::reports.date_range_format_value', ['from' => '__from__', 'to' => '__to__']) }}"
                        data-format="{{ Str::upper(config('core.base.general.date_format.js.date')) }}"
                        data-href="{{ route('report.items.sales.index') }}" data-start-date="{{ $startDate }}"
                        data-end-date="{{ $endDate }}" data-current-view="default" data-active-view="default"
                        icon="ti ti-calendar">
                        {{ $startDate && $endDate
        ? trans('plugins/ecommerce::reports.date_range_format_value', [
            'from' => BaseHelper::formatDate($startDate),
            'to' => BaseHelper::formatDate($endDate),
        ])
        : trans('plugins/ecommerce::reports.date_range_format_value', [
            'from' => BaseHelper::formatDate(Carbon::now()->startOfMonth()),
            'to' => BaseHelper::formatDate(Carbon::now()->endOfMonth()),
        ])
                                                                                                                                    }}
                    </x-core::button>

                    <input type="hidden" id="start_date" name="start_date" value="{{ $startDate }}">
                    <input type="hidden" id="end_date" name="end_date" value="{{ $endDate }}">
                </div>

                {{-- <div class="col-auto">
                    <select class="form-select" id="order_status" name="status">
                        <option value="">All Statuses</option>
                        <option value="confirmed" {{ $status=='confirmed' ? 'selected' : '' }}>Confirmed</option>
                        <option value="picked_up" {{ $status=='picked_up' ? 'selected' : '' }}>Picked Up</option>
                        <option value="on_the_way" {{ $status=='on_the_way' ? 'selected' : '' }}>On The Way</option>
                        <option value="delivered" {{ $status=='delivered' ? 'selected' : '' }}>Delivered</option>
                    </select>
                </div> --}}

                <div class="col-auto">
                    <button type="button" id="reset_filters" class="btn btn-outline-secondary">
                        <i class="fas fa-redo me-2"></i>Reset Filters
                    </button>
                </div>

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

    <!-- Charts Section -->
    <div class="row mb-2">
        <!-- Top 10 Items Donut Chart -->
        <div class="col-md-6 mb-2">
            <div class="card shadow-sm h-100">
                <div class="card-header bg-white py-2">
                    <h5 class="mb-0">Top 10 Selling Items</h5>
                </div>
                <div class="card-body py-2">
                    <div class="row align-items-center">
                        <div class="col-md-6">
                            <div class="chart-container" style="height:250px;">
                                <canvas id="topItemsChart"></canvas>
                            </div>
                        </div>

                        <div class="col-md-6">
                            <div id="chartLegend" class="ps-md-3"></div>
                        </div>
                    </div>
                </div>

            </div>
        </div>

        <!-- Top 10 Items Table -->
        <div class="col-md-6 mb-2">
            <div class="card shadow-sm h-100">
                <div class="card-header bg-white py-2">
                    <h5 class="mb-0">Top 10 Selling Items</h5>
                </div>
                <div class="card-body py-2">
                    <div class="table-responsive">
                        <table class="table table-sm table-hover mb-0">
                            <thead class="table-light sticky-top">
                                <tr>
                                    <th>Item Name</th>
                                    <th class="text-center">Quantity</th>
                                    <th class="text-center">Percentage</th>
                                </tr>
                            </thead>
                            <tbody id="topProductsTbody">
                                @if(!empty($chartData['topProducts']))
                                    @foreach($chartData['topProducts'] as $product)
                                        <tr>
                                            <td>{{ Str::limit($product['name'], 28) }}</td>
                                            <td class="text-center">{{ $product['total_qty'] }}</td>
                                            <td class="text-center">{{ $product['percentage'] }}%</td>
                                        </tr>
                                    @endforeach
                                @endif
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Table Section -->
    <div class="row">
        <div class="col-12">
            <div class="card shadow-sm" id="products_card">
                <div id="loading" class="text-center py-3" style="display: none;">
                    <div class="spinner-border text-primary" role="status">
                        <span class="visually-hidden">Loading...</span>
                    </div>
                    <p class="mt-2 mb-0">Loading data...</p>
                </div>

                <div class="card-body" id="items_listing">
                    <div class="table-responsive p-1">
                        <table class="table table-hover mb-0" id="itemsTable" style="width: 100% !important;">
                            <thead>
                                <!-- Your existing table headers -->
                                <tr>
                                    <th>Product Name</th>
                                    <th>Brand</th>
                                    <th>Size</th>
                                    <th>Load Rating</th>
                                    <th>Pattern</th>
                                    <th>Qty</th>
                                    <th>Cost</th>
                                    <th>Total Amount</th>
                                    <th>Tax</th>
                                    <th>Profit</th>
                                    <th>Action</th>
                                </tr>
                            </thead>
                            <tfoot>
                                <tr>
                                    <th colspan="5" style="text-align:right;">TOTALS:</th>
                                    <th id="footer_qty" style="text-align:center;"></th>
                                    <th id="footer_cost" style="text-align:right;"></th>
                                    <th id="footer_total_amount" style="text-align:right;"></th>
                                    <th id="footer_tax" style="text-align:right;"></th>
                                    <th id="footer_profit" style="text-align:right;"></th>
                                    <th></th>
                                </tr>
                            </tfoot>

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

    <!-- Order Details Modal -->
    <div class="modal fade" id="orderDetailsModal" tabindex="-1" aria-labelledby="orderDetailsModalLabel"
        aria-hidden="true">
        <div class="modal-dialog modal-xl">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="orderDetailsModalLabel">Order Details</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div class="mb-3">
                        <h4 id="modalProductName" class="fw-bold"></h4>
                    </div>
                    <div class="table-responsive">
                        <table class="table table-striped table-hover" id="orderDetailsTable">
                            <thead class="table-dark">
                                <tr>
                                    <th>Order Code</th>
                                    <th>Customer Name</th>
                                    <th>Source</th>
                                    <th>Order Date</th>
                                </tr>
                            </thead>
                            <tbody>
                                <!-- Order details will be loaded here -->
                            </tbody>
                        </table>
                    </div>
                    <div id="noOrdersMessage" class="alert alert-info" style="display: none;">
                        No orders found for this product within the selected date range.
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('footer')
    <script src="{{ asset('vendor/core/core/base/libraries/datatables/media/js/jquery.dataTables.min.js') }}"></script>
    <script src="{{ asset('vendor/core/core/base/libraries/datatables/media/js/dataTables.bootstrap.min.js') }}"></script>

    <script src="https://cdn.jsdelivr.net/npm/moment@2.29.4/moment.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script>
    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css" />
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels@2"></script>

    <script>
        $(document).ready(function () {
            let topItemsChart;
            let itemsTable;
            const dateRangePicker = $("#date-range-picker");

            function updateActiveRange(start, end) {
                // placeholder for any UI state updates
            }

            function updateDateRangePickerText(start, end, format) {
                const formatValue = dateRangePicker.data("format-value") || "__from__ - __to__";
                const formattedValue = formatValue
                    .replace("__from__", start.format(format))
                    .replace("__to__", end.format(format));
                dateRangePicker.find("span").text(formattedValue);
            }

            function createLegend(chart, percentages) {
                const legendContainer = document.getElementById('chartLegend');
                legendContainer.innerHTML = '';

                const data = chart.data;
                if (data.labels.length && data.datasets.length) {
                    const dataset = data.datasets[0];
                    const legendItemsContainer = document.createElement('div');
                    legendItemsContainer.className = 'd-flex flex-column gap-1';

                    data.labels.forEach(function (label, i) {
                        const legendItemCol = document.createElement('div');
                        legendItemCol.className = 'col-md-12';

                        const legendItem = document.createElement('div');
                        legendItem.className = 'd-flex align-items-center gap-2';
                        legendItem.innerHTML = `
                                                                        <span style="
                                                                            width:10px;
                                                                            height:10px;
                                                                            background:${dataset.backgroundColor[i]};
                                                                            border-radius:50%;
                                                                            display:inline-block;
                                                                            flex-shrink:0;
                                                                        "></span>
                                                                        <span class="text-truncate" title="${label}">${label}</span>
                                                                    `;

                        legendItemCol.appendChild(legendItem);
                        legendItemsContainer.appendChild(legendItemCol);
                    });

                    legendContainer.appendChild(legendItemsContainer);
                }
            }

            if (window.moment && jQuery().daterangepicker) {
                moment.locale($("html").attr("lang"));
                const format = dateRangePicker.data("format") || "YYYY-MM-DD";
                const startDate = dateRangePicker.data("start-date") ? moment(dateRangePicker.data("start-date"), format) : moment().startOf('month');
                const now = moment();
                let endDate = dateRangePicker.data("end-date") ? moment(dateRangePicker.data("end-date"), format) : moment().endOf('month');

                if (endDate.isAfter(now)) {
                    endDate = now;
                }

                const ranges = {
                    'Today': [moment().startOf("day"), moment().endOf("day")],
                    'Yesterday': [moment().subtract(1, "days").startOf("day"), moment().subtract(1, "days").endOf("day")],
                    'This Week': [moment().startOf("week"), moment().endOf("week")],
                    'Last 7 Days': [moment().subtract(6, "days").startOf("day"), moment().endOf("day")],
                    'Last 30 Days': [moment().subtract(29, "days").startOf("day"), moment().endOf("day")],
                    'This Month': [moment().startOf("month"), moment().endOf("month")],
                    'Last Month': [moment().subtract(1, "month").startOf("month"), moment().subtract(1, "month").endOf("month")],
                    'This Quarter': [moment().startOf("quarter"), moment().endOf("quarter")],
                    'Last Quarter': [moment().subtract(1, "quarter").startOf("quarter"), moment().subtract(1, "quarter").endOf("quarter")],
                    'This Year': [moment().startOf("year"), moment().endOf("year")],
                    'Last Year': [moment().subtract(1, "year").startOf("year"), moment().subtract(1, "year").endOf("year")],
                };

                dateRangePicker.daterangepicker({
                    ranges: ranges,
                    alwaysShowCalendars: true,
                    startDate: startDate,
                    endDate: endDate,
                    maxDate: moment().endOf("day"),
                    opens: $(window).width() < 768 ? "center" : "left",
                    drops: "auto",
                    locale: {
                        format: format,
                        customRangeLabel: 'Custom Range'
                    },
                    autoUpdateInput: false
                }, function (start, end, label) {
                    updateDateRangePickerText(start, end, format);
                    $('#start_date').val(start.format('YYYY-MM-DD'));
                    $('#end_date').val(end.format('YYYY-MM-DD'));
                    updateActiveRange(start, end);
                });

                dateRangePicker.on("apply.daterangepicker", function (ev, picker) {
                    updateDateRangePickerText(picker.startDate, picker.endDate, format);
                    $('#start_date').val(picker.startDate.format('YYYY-MM-DD'));
                    $('#end_date').val(picker.endDate.format('YYYY-MM-DD'));
                    updateActiveRange(picker.startDate, picker.endDate);
                    refreshData();
                });

                if ($('#start_date').val() && $('#end_date').val()) {
                    updateActiveRange(moment($('#start_date').val()), moment($('#end_date').val()));
                }
            }

            // Initialize chart with server-passed chartData
            const initialChartData = @json($chartData);
            const ctx = document.getElementById('topItemsChart').getContext('2d');

            topItemsChart = new Chart(ctx, {
                type: 'doughnut',
                data: {
                    labels: initialChartData.labels,
                    datasets: [{
                        data: initialChartData.data,
                        backgroundColor: initialChartData.colors,
                        borderWidth: 1
                    }]
                },
                plugins: [ChartDataLabels],
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    cutout: '65%',
                    plugins: {
                        legend: { display: false },
                        tooltip: {
                            callbacks: {
                                label: function (context) {
                                    const percentages = initialChartData.percentages || [];
                                    return `${context.label}: ${context.parsed} (${percentages[context.dataIndex] || 0}%)`;
                                }
                            }
                        },
                        datalabels: {
                            color: '#fff',
                            font: { weight: 'bold', size: 10 },
                            formatter: function (value, context) {
                                const percentages = initialChartData.percentages || [];
                                return (percentages[context.dataIndex] || 0) + '%';
                            },
                            anchor: 'center',
                            align: 'center',
                            clamp: true
                        }
                    }
                }
            });

            createLegend(topItemsChart, initialChartData.percentages || []);

            // Initialize DataTable
            itemsTable = $('#itemsTable').DataTable({
                processing: true,
                serverSide: true,
                scrollCollapse: true,
                paging: true,
                ajax: {
                    url: '{{ route("report.items.sales.index") }}',
                    type: 'GET',
                    data: function (d) {
                        d.start_date = $('#start_date').val();
                        d.end_date = $('#end_date').val();
                        d.status = $('#order_status').val();
                    },
                    dataSrc: function (json) {
                        // update chart when server returns new chartData (attached via ->with())
                        if (json.chartData) {
                            updateChartData(json.chartData);
                        }
                        return json.data;
                    }
                },
                columns: [
                    { data: 'product_name', name: 'ec_products.name' },
                    { data: 'brand_name', name: 'ec_brands.name' },
                    { data: 'size', orderable: false, searchable: false, className: 'text-center' },
                    { data: 'load_rating', orderable: false, searchable: false, className: 'text-center' },
                    { data: 'pattern', orderable: false, searchable: false, className: 'text-center' },
                    { data: 'total_qty', searchable: false, className: 'text-center' },
                    { data: 'cost', searchable: false, className: 'text-end' },
                    { data: 'total_amount', searchable: false, className: 'text-end' },
                    { data: 'tax', searchable: false, className: 'text-end' },
                    { data: 'profit', searchable: false, className: 'text-end' },
                    { data: 'action', orderable: false, searchable: false, className: 'text-center' }
                ],
                order: [[5, 'desc']], // Sort by quantity column
                pageLength: 10,
                lengthMenu: [[10, 20, 30, 50, 75, -1], [10, 20, 30, 50, 75, "All"]],
                initComplete: function () { this.api().columns.adjust(); },
                // Add this footerCallback function
                footerCallback: function (tfoot, data, start, end, display) {
                    let api = this.api();

                    // --- Updated intVal function to handle HTML and negative numbers ---
                    let intVal = function (i) {
                        if (typeof i === 'string') {
                            // Create a temporary div element to parse the HTML and get only the text
                            let el = document.createElement('div');
                            el.innerHTML = i;
                            let text = el.textContent || el.innerText || '';

                            // Remove currency symbols and commas, then convert to number
                            let num = text.replace(/[\$,]/g, '') * 1;
                            // If the result is not a number, return 0
                            return isNaN(num) ? 0 : num;
                        }
                        // If it's already a number, return it. Otherwise, return 0.
                        return typeof i === 'number' ? i : 0;
                    };

                    // --- Calculate Totals for each column ---
                    // Column indexes are 0-based
                    let totalQty = api.column(5).data().reduce(function (a, b) { return intVal(a) + intVal(b); }, 0);
                    let totalCost = api.column(6).data().reduce(function (a, b) { return intVal(a) + intVal(b); }, 0);
                    let totalAmount = api.column(7).data().reduce(function (a, b) { return intVal(a) + intVal(b); }, 0);
                    let totalTax = api.column(8).data().reduce(function (a, b) { return intVal(a) + intVal(b); }, 0);
                    let totalProfit = api.column(9).data().reduce(function (a, b) { return intVal(a) + intVal(b); }, 0);

                    // --- Helper function to format currency for display ---
                    let formatCurrency = function (num) {
                        // Use Math.abs to remove the negative sign for formatting, then add it back if needed
                        let sign = num < 0 ? '-' : '';
                        let absNum = Math.abs(num);
                        return sign + '$' + absNum.toFixed(2).replace(/\B(?=(\d{3})+(?!\d))/g, ",");
                    };

                    // --- Update footer cells with formatted totals ---
                    $(api.column(5).footer()).html(
                        totalQty.toFixed(0).replace(/\B(?=(\d{3})+(?!\d))/g, ",")
                    );
                    $(api.column(6).footer()).html(formatCurrency(totalCost));
                    $(api.column(7).footer()).html(formatCurrency(totalAmount));
                    $(api.column(8).footer()).html(formatCurrency(totalTax));
                    $(api.column(9).footer()).html(formatCurrency(totalProfit));
                }
            });

            function updateChartData(chartData) {
                if (!chartData) return;

                topItemsChart.data.labels = chartData.labels;
                topItemsChart.data.datasets[0].data = chartData.data;
                topItemsChart.data.datasets[0].backgroundColor = chartData.colors || topItemsChart.data.datasets[0].backgroundColor;
                topItemsChart.update();

                createLegend(topItemsChart, chartData.percentages || []);

                // update top products table on the right
                const tbody = $('#topProductsTbody');
                tbody.empty();
                if (Array.isArray(chartData.topProducts)) {
                    chartData.topProducts.forEach(function (product) {
                        const name = product.name || '';
                        const truncated = name.length > 40 ? name.substring(0, 40) + '...' : name;
                        const row = `<tr><td title="${name}">${truncated}</td><td class="text-center">${product.total_qty}</td><td class="text-center">${product.percentage}%</td></tr>`;
                        tbody.append(row);
                    });
                }
            }

            function refreshData() {
                $('#loading').show();
                itemsTable.ajax.reload(function () { $('#loading').hide(); });
            }

            // Handle view orders button click
            $(document).on('click', '.view-orders-btn', function () {
                const productId = $(this).data('product-id');
                const productName = $(this).data('product-name');

                // Set product name in modal
                $('#modalProductName').text('Orders for: ' + productName);

                // Clear previous data
                $('#orderDetailsTable tbody').empty();
                $('#noOrdersMessage').hide();

                // Show loading state
                const modal = new bootstrap.Modal(document.getElementById('orderDetailsModal'));
                modal.show();

                // Fetch order details
                $.ajax({
                    url: '{{ route("report.items.sales.order.details") }}',
                    type: 'GET',
                    data: {
                        product_id: productId,
                        start_date: $('#start_date').val(),
                        end_date: $('#end_date').val(),
                        status: $('#order_status').val()
                    },
                    success: function (response) {
                        if (response.success && response.orders.length > 0) {
                            let rows = '';

                            // Blade creates base URL with placeholder
                            let orderViewUrl = "{{ route('sales.orders.view', ['orderid' => '__ORDER_ID__']) }}";

                            response.orders.forEach(function (order) {
                                let viewUrl = orderViewUrl.replace('__ORDER_ID__', order.order_id);

                                let CustomerName = '';
                                if (
                                    order.customer_company_name !== null &&
                                    order.customer_company_name !== ''
                                ) {
                                    CustomerName = order.customer_company_name;
                                } else {
                                    CustomerName = order.customer_name;
                                }

                                rows += `
                                                    <tr>
                                                        <td>
                                                            <a href="${viewUrl}" target="_blank" class="text-decoration-none">
                                                                ${order.order_code}
                                                            </a>
                                                        </td>
                                                        <td>${CustomerName}</td>
                                                        <td>${order.order_source ?? ''}</td>
                                                        <td>${order.order_date ?? ''}</td>
                                                    </tr>
                                                `;
                            });


                            $('#orderDetailsTable tbody').html(rows);
                            $('#noOrdersMessage').hide();
                        } else {
                            $('#orderDetailsTable tbody').html('');
                            $('#noOrdersMessage').show();
                        }
                    },
                    error: function () {
                        $('#noOrdersMessage').text('Error loading order details. Please try again.').show();
                    }
                });
            });

            $('#reset_filters').click(function () {
                const defaultStartDate = '{{ Carbon::now()->startOfMonth()->format('Y-m-d') }}';
                const defaultEndDate = '{{ Carbon::now()->endOfMonth()->format('Y-m-d') }}';

                $('#start_date').val(defaultStartDate);
                $('#end_date').val(defaultEndDate);
                $('#order_status').val('');

                dateRangePicker.data('start-date', defaultStartDate);
                dateRangePicker.data('end-date', defaultEndDate);
                updateDateRangePickerText(moment(defaultStartDate), moment(defaultEndDate), dateRangePicker.data("format"));

                itemsTable.search('').columns().search('');

                refreshData();
            });

            $('#order_status').change(function () { refreshData(); });
        });
    </script>
@endpush