@extends(BaseHelper::getAdminMasterLayoutTemplate())

@section('content')
    <!-- DataTables Bootstrap -->
    <link rel="stylesheet"
        href="{{ asset('vendor/core/core/base/libraries/datatables/media/css/dataTables.bootstrap.min.css') }}">
    <div class="container-fluid">
        @php
            use Carbon\Carbon;
        @endphp
        <!-- Filter Section -->
        <div class="row align-items-center mb-4">
            <div class="col-md-6">
                <h4 class="mb-0">Product Report</h4>
            </div>

            <div class="col-md-6">
                <form id="filter-form" class="row g-2">
                    <div class="col-sm-6 col-lg-auto flex-fill">
                        <div class="date-range-container position-relative">
                            <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.product.index') }}" data-start-date="{{ $startDate }}"
                                data-end-date="{{ $endDate }}" data-current-view="default" data-active-view="default"
                                icon="ti ti-calendar" class="w-100">
                                {{ $startDateDisplay && $endDateDisplay
        ? trans('plugins/ecommerce::reports.date_range_format_value', [
            'from' => $startDateDisplay,
            'to' => $endDateDisplay,
        ])
        : trans('plugins/ecommerce::reports.date_range_format_value', [
            'from' => Carbon::now()->startOfMonth()->format('d-m-Y'),
            'to' => Carbon::now()->endOfMonth()->format('d-m-Y'),
        ])
            }}
                            </x-core::button>
                            <button type="button" class="clear-filter-btn" data-filter="date_range"
                                style="position: absolute; right: 10px; top: 50%; transform: translateY(-50%); background: none; border: none; color: #6c757d; opacity: 0; pointer-events: none;">
                                <i class="fas fa-times"></i>
                            </button>
                        </div>
                        <input type="hidden" id="start_date" name="start_date" value="{{ $startDate }}">
                        <input type="hidden" id="end_date" name="end_date" value="{{ $endDate }}">
                        <input type="hidden" id="filter_type" name="filter_type" value="{{ request('filter_type') }}">
                    </div>

                    <div class="col-sm-6 col-lg-auto flex-fill">
                        <select id="status" class="form-select" name="status">
                            <option value="">All Status</option>
                            <option value="published" {{ request('status') == 'published' ? 'selected' : '' }}>
                                Published
                            </option>
                            <option value="draft" {{ request('status') == 'draft' ? 'selected' : '' }}>
                                Draft</option>
                        </select>
                    </div>

                    <div class="col-sm-6 col-lg-auto flex-fill">
                        <select id="stock_level" class="form-select" name="stock_level">
                            <option value="">All Levels</option>
                            <option value="in_stock" {{ request('stock_level') == 'in_stock' ? 'selected' : '' }}>
                                In Stock</option>
                            <option value="coming_soon" {{ request('stock_level') == 'coming_soon' ? 'selected' : '' }}>Coming
                                Soon</option>
                            <option value="out_of_stock" {{ request('stock_level') == 'out_of_stock' ? 'selected' : '' }}>Out
                                of Stock</option>
                        </select>
                    </div>

                    <div class="col-sm-6 col-lg-auto flex-fill d-flex justify-content-end">
                        <button type="button" id="reset_filters" class="btn btn-outline-secondary btn-sm w-100">
                            <i class="fas fa-redo me-2"></i>Reset Filters
                        </button>
                    </div>
                </form>
            </div>
        </div>

        <!-- Cards Section -->
        <div class="row mt-4" id="cards-section">
            <div class="col-12 col-sm-6 col-md-6 col-lg-3 mb-4 ">
                @include('backend.report.product.growth-card', ['item' => $outOfStockCard])
            </div>
            <div class="col-12 col-sm-6 col-md-6 col-lg-3 mb-4 ">
                @include('backend.report.product.growth-card', ['item' => $lowStockCard])
            </div>
            <div class="col-12 col-sm-6 col-md-6 col-lg-3 mb-4 ">
                @include('backend.report.product.growth-card', ['item' => $topSellingCard])
            </div>
            <div class="col-12 col-sm-6 col-md-6 col-lg-3 mb-4 ">
                @include('backend.report.product.growth-card', ['item' => $trendingCard])
            </div>
        </div>

        <!-- Stock Movement Graph Section (3 chart types with switch) -->
        <div class="row mt-4">
            <div class="col-12">
                <div class="card shadow-sm">
                    <div class="card-header bg-white py-3 d-flex justify-content-between align-items-center">
                        <div>
                            <h5 class="mb-0">Stock Movement Report</h5>
                        </div>

                        <div class="d-flex align-items-center gap-2">
                            <div class="btn-group" role="group" aria-label="Chart switch">
                                <button type="button" class="btn btn-outline-primary btn-sm chart-switch active"
                                    data-target="chart-line">
                                    <i class="fas fa-chart-line"></i> Line
                                </button>
                                <button type="button" class="btn btn-outline-primary btn-sm chart-switch"
                                    data-target="chart-bar">
                                    <i class="fas fa-chart-bar"></i> Bar
                                </button>
                                <button type="button" class="btn btn-outline-primary btn-sm chart-switch"
                                    data-target="chart-horizontal">
                                    <i class="fas fa-chart-network"></i> Horizontal
                                </button>
                            </div>
                        </div>
                    </div>

                    <div class="card-body">
                        <div class="row">
                            <!-- Chart column -->
                            <div class="col-12 col-lg-8">
                                <div class="chart-wrapper" style="position: relative; height: 320px;">
                                    <canvas id="stockMovementChart" class="chart-canvas chart-line"></canvas>
                                    <canvas id="stockSummaryBarChart" class="chart-canvas chart-bar"
                                        style="display:none;"></canvas>
                                    <canvas id="stockNetHorizontalChart" class="chart-canvas chart-horizontal"
                                        style="display:none;"></canvas>
                                </div>
                            </div>

                            <!-- Top products column (redesigned table) -->
                            <div class="col-12 col-lg-4 mt-4 mt-lg-0">
                                <h6 class="mb-3">Top Products by Net Movement</h6>
                                <div class="table-responsive">
                                    <table class="table table-sm table-hover" id="top-products-table">
                                        <thead class="table-light">
                                            <tr>
                                                <th>Product</th>
                                                <th class="text-center">Net</th>
                                                <th class="text-center">Trend</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            @foreach($stockMovementData['topProducts'] as $product)
                                                <tr>
                                                    <td>{{ Str::limit($product->name, 28) }}</td>
                                                    <td
                                                        class="text-center {{ $product->net_movement >= 0 ? 'text-success' : 'text-danger' }}">
                                                        {{ $product->net_movement }}
                                                    </td>

                                                    <td class="text-center">
                                                        @if($product->net_movement > 0)
                                                            <i class="fas fa-arrow-up text-success"></i>
                                                        @elseif($product->net_movement < 0)
                                                            <i class="fas fa-arrow-down text-danger"></i>
                                                        @else
                                                            <i class="fas fa-minus text-muted"></i>
                                                        @endif
                                                    </td>
                                                </tr>
                                            @endforeach
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>

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

        <!-- Products Table Section -->
        <div class="row mt-4">
            <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="products_listing">
                        <div class="table-responsive p-1">
                            <table class="table table-hover mb-0" id="productsTable" style="width: 100% !important;">
                                <thead class="table-light sticky-top">
                                    <tr>
                                        <th scope="col">Product Name</th>
                                        <th scope="col">Brand</th>
                                        <th scope="col">Size</th>
                                        <th scope="col">Load Rating</th>
                                        <th scope="col">Pattern</th>
                                        <th scope="col">Price</th>
                                        <th scope="col">W. Price</th>
                                        {{-- <th scope="col">Category</th> --}}
                                        <th scope="col">Current Stock</th>
                                        <th scope="col">Coming Stock</th>
                                        <th scope="col">Stock Level</th>
                                        <th scope="col">Status</th>
                                        <th scope="col">Action</th>
                                    </tr>
                                </thead>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </div>

    <!-- Stock Details Modal -->
    <div class="modal fade" id="stockDetailsModal" tabindex="-1" role="dialog" aria-labelledby="stockDetailsModalLabel"
        aria-hidden="true">
        <div class="modal-dialog modal-xl modal-dialog-centered modal-dialog-scrollable" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="stockDetailsModalLabel">Stock Details</h5>
                    <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"
                        aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div class="row">
                        <div class="col-12">
                            <h5 id="product-name-header" class="mb-3"></h5>
                        </div>
                    </div>
                    <div class="table-responsive">
                        <table class="table table-hover aiz-table mb-0" id="stock-details-table">
                            <thead class="table-light">
                                <tr>
                                    <th>#</th>
                                    <th>Date</th>
                                    {{-- <th class="d-none d-md-table-cell">Product Image</th>
                                    <th>Product SKU</th> --}}
                                    <th>Reference</th>
                                    <th>Stock Movement</th>
                                    <th>Running Stock</th>
                                    <th class="d-none d-lg-table-cell">Remark</th>
                                </tr>
                            </thead>
                            <tbody>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('footer')
    <!-- DataTable CSS and JS -->
    <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/chart.js"></script>
    <!-- Make sure jQuery and daterangepicker are included -->
    <script src="https://cdn.jsdelivr.net/npm/moment@2.29.4/moment.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/daterangepicker@3.1.0/daterangepicker.min.js"></script>
    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/daterangepicker@3.1.0/daterangepicker.css" />

    <style>
        /* small styling refinements for the top-products table */
        #top-products-table tbody td {
            vertical-align: middle;
            white-space: nowrap;
        }

        .chart-canvas {
            width: 100% !important;
            height: 320px !important;
        }
    </style>

    <script>
        $(document).ready(function () {
            // Parse initial data from server (safely encoded)
            const initialChartData = {
                dates: @json($stockMovementData['dates'] ?? []),
                inData: @json($stockMovementData['inData'] ?? []),
                outData: @json($stockMovementData['outData'] ?? []),
                netData: @json($stockMovementData['netData'] ?? []),
                topProducts: @json($stockMovementData['topProducts'] ?? [])
            };

            // Chart instances
            let stockMovementChart = null;
            let stockSummaryBarChart = null;
            let stockNetHorizontalChart = null;
            let productsTable;

            // Initialize DataTable
            productsTable = $('#productsTable').DataTable({
                processing: true,
                serverSide: true,
                scrollCollapse: true,
                paging: true,
                ajax: {
                    url: '{{ route('report.product.index') }}',
                    type: 'GET',
                    data: function (d) {
                        d.start_date = $('#start_date').val();
                        d.end_date = $('#end_date').val();
                        d.status = $('#status').val();
                        d.stock_level = $('#stock_level').val();
                        d.filter_type = $('#filter_type').val();
                    },
                    dataSrc: function (json) {
                        // Update charts when server returns new chartData
                        if (json.chartData) {
                            updateChartsFromData(json.chartData);
                        }
                        // Update cards if provided
                        if (json.cards) {
                            updateCards(json.cards);
                        }
                        return json.data;
                    }
                },
                columns: [
                    {
                        data: 'name',
                        name: 'ec_products.name',
                        render: function(data, type, row) {
                            return `
                                <div class="d-flex align-items-center">
                                    <img src="${row.image_url || '/images/no-image.png'}" width="40" height="40" class="me-2 rounded">
                                    <div>
                                        <div class="fw-medium">${data}</div>
                                    </div>
                                </div>
                            `;
                        }
                    },
                    { data: 'brand', name: 'ec_brands.name', defaultContent: '-' },
                    { data: 'size', orderable: false, searchable: false, defaultContent: '-' },
                    { data: 'load_rating', orderable: false, searchable: false, defaultContent: '-' },
                    { data: 'pattern', orderable: false, searchable: false, defaultContent: '-' },
                    { data: 'sale_price', searchable: false, defaultContent: '-' },
                    { data: 'wholesale_price', searchable: false, defaultContent: '-' },
                    // { data: 'category_name', name: 'ec_product_categories.name', defaultContent: '-' },
                    {
                        data: 'current_stock',
                        searchable: false,
                        render: function(data, type, row) {
                            if (row.with_storehouse_management) {
                                var stockColor = data > 0 ? 'primary' : 'danger';
                                return `<span class="badge status-${stockColor}-label">${Number(data || 0).toFixed(0)}</span>`;
                            } else {
                                return '<span class="text-muted">Not Managed</span>';
                            }
                        }
                    },
                    {
                        data: 'pending_qty',
                        searchable: false,
                        render: function(data, type, row) {
                            if (row.with_storehouse_management) {
                                return `<span class="fw-bold text-info">${Number(data || 0).toFixed(0)}</span>`;
                            } else {
                                return '<span class="text-muted">Not Managed</span>';
                            }
                        }
                    },
                    {
                        data: 'stock_level',
                        name: 'stock_level',
                        render: function (data) {
                            if (!data) return '-';
                            if (data === 'Out of Stock') {
                                return '<span class="badge status-danger-label">Out of Stock</span>';
                            } else if (data === 'Coming Soon') {
                                return '<span class="badge status-info-label">Coming Soon</span>';
                            } else {
                                return '<span class="badge status-success-label">In Stock</span>';
                            }
                        }
                    },
                  {
                    data: 'status',
                    name: 'p.status',
                    searchable: false,
                    orderable: true,
                    render: function (data) {
                        if (!data) return '-';

                        switch (data) {
                            case 'draft':
                                return '<span class="badge status-secondary-label">Draft</span>';

                            case 'pending':
                                return '<span class="badge status-warning-label">Pending</span>';

                            case 'published':
                                return '<span class="badge status-success-label">Published Both</span>';

                            case 'published_public':
                                return '<span class="badge status-primary-label">Published Public</span>';

                            case 'published_wholesaler':
                                return '<span class="badge status-info-label">Published Wholesaler</span>';

                            default:
                                return '<span class="badge status-secondary-label">' + data + '</span>';
                        }
                    }
                },
                    {
                        data: null,
                        orderable: false,
                        searchable: false,
                        render: function(data, type, row) {
                            return `
                                <button type="button" class="btn btn-sm btn-success view-stock-btn" data-product-id="${row.id}" data-product-name="${row.name}">
                                    <i class="fas fa-eye"></i> View
                                </button>
                            `;
                        }
                    }
                ],
                order: [[0, 'asc']],
                pageLength: 10,
                lengthMenu: [[10, 20, 30, 50, 75, -1], [10, 20, 30, 50, 75, "All"]],
                initComplete: function () { this.api().columns.adjust(); }
            });

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

            // Helper to create a gradient for the area (optional)
            function createGradient(ctx, colorStops) {
                try {
                    const gradient = ctx.createLinearGradient(0, 0, 0, 300);
                    colorStops.forEach(stop => gradient.addColorStop(stop.pos, stop.color));
                    return gradient;
                } catch (e) {
                    return undefined;
                }
            }

            // Initialize all charts
            function initializeCharts(data) {
                // Line chart (stockMovementChart)
                const lineCtx = document.getElementById('stockMovementChart');
                if (lineCtx) {
                    if (stockMovementChart) stockMovementChart.destroy();
                    const ctx = lineCtx.getContext('2d');

                    const gradientIn = createGradient(ctx, [{ pos: 0, color: 'rgba(76,175,80,0.18)' }, { pos: 1, color: 'rgba(76,175,80,0.02)' }]);
                    const gradientOut = createGradient(ctx, [{ pos: 0, color: 'rgba(244,67,54,0.18)' }, { pos: 1, color: 'rgba(244,67,54,0.02)' }]);
                    const gradientNet = createGradient(ctx, [{ pos: 0, color: 'rgba(33,150,243,0.18)' }, { pos: 1, color: 'rgba(33,150,243,0.02)' }]);

                    stockMovementChart = new Chart(ctx, {
                        type: 'line',
                        data: {
                            labels: data.dates,
                            datasets: [
                                {
                                    label: 'Stock In',
                                    data: data.inData,
                                    borderWidth: 2,
                                    borderColor: '#4caf50',
                                    backgroundColor: gradientIn,
                                    tension: 0.35,
                                    fill: true,
                                    pointRadius: 2
                                },
                                {
                                    label: 'Stock Out',
                                    data: data.outData,
                                    borderWidth: 2,
                                    borderColor: '#f44336',
                                    backgroundColor: gradientOut,
                                    tension: 0.35,
                                    fill: true,
                                    pointRadius: 2
                                },
                                {
                                    label: 'Net Movement',
                                    data: data.netData,
                                    borderWidth: 2,
                                    borderColor: '#2196f3',
                                    backgroundColor: gradientNet,
                                    tension: 0.35,
                                    fill: true,
                                    pointRadius: 2
                                }
                            ]
                        },
                        options: {
                            responsive: true,
                            maintainAspectRatio: false,
                            plugins: {
                                legend: { position: 'top' },
                                tooltip: { mode: 'index', intersect: false }
                            },
                            interaction: { mode: 'index', intersect: false },
                            scales: {
                                x: { display: true },
                                y: { beginAtZero: true }
                            }
                        }
                    });
                }

                // Vertical bar chart: top N products net movement (visual summary)
                const barCtxEl = document.getElementById('stockSummaryBarChart');
                if (barCtxEl) {
                    if (stockSummaryBarChart) stockSummaryBarChart.destroy();
                    const ctx = barCtxEl.getContext('2d');

                    // Prepare top products limited set
                    const topN = data.topProducts ? data.topProducts.slice(0, 8) : [];
                    const labels = topN.map(p => (p.name.length > 18 ? p.name.substring(0, 18) + '…' : p.name));
                    const values = topN.map(p => p.net_movement);

                    stockSummaryBarChart = new Chart(ctx, {
                        type: 'bar',
                        data: {
                            labels: labels,
                            datasets: [{
                                label: 'Net Movement',
                                data: values,
                                borderWidth: 0,
                                borderRadius: 6,
                                barPercentage: 0.7
                            }]
                        },
                        options: {
                            indexAxis: 'x',
                            responsive: true,
                            maintainAspectRatio: false,
                            plugins: {
                                legend: { display: false },
                                tooltip: {
                                    callbacks: {
                                        label: function (context) {
                                            return 'Net: ' + context.parsed.y ?? context.parsed;
                                        }
                                    }
                                }
                            },
                            scales: {
                                x: { ticks: { autoSkip: false } },
                                y: { beginAtZero: true }
                            }
                        }
                    });
                }

                // Horizontal bar: net movement for top products (easy rank)
                const horizCtxEl = document.getElementById('stockNetHorizontalChart');
                if (horizCtxEl) {
                    if (stockNetHorizontalChart) stockNetHorizontalChart.destroy();
                    const ctx = horizCtxEl.getContext('2d');

                    const topN = data.topProducts ? data.topProducts.slice(0, 10) : [];
                    // sort by net_movement descending for horizontal chart (copy to avoid mutation)
                    const sorted = topN.slice().sort((a, b) => b.net_movement - a.net_movement);
                    const labels = sorted.map(p => (p.name.length > 28 ? p.name.substring(0, 28) + '…' : p.name));
                    const values = sorted.map(p => p.net_movement);

                    stockNetHorizontalChart = new Chart(ctx, {
                        type: 'bar',
                        data: {
                            labels: labels,
                            datasets: [{
                                label: 'Net Movement',
                                data: values,
                                borderWidth: 0,
                                borderRadius: 6
                            }]
                        },
                        options: {
                            indexAxis: 'y',
                            responsive: true,
                            maintainAspectRatio: false,
                            plugins: {
                                legend: { display: false },
                                tooltip: {
                                    callbacks: {
                                        label: function (context) {
                                            return 'Net: ' + context.parsed.x ?? context.parsed;
                                        }
                                    }
                                }
                            },
                            scales: {
                                x: { beginAtZero: true },
                                y: { ticks: { autoSkip: false } }
                            }
                        }
                    });
                }
            }

            // Initialize charts with initial data
            initializeCharts(initialChartData);

            // toggle chart views
            $('.chart-switch').on('click', function () {
                $('.chart-switch').removeClass('active');
                $(this).addClass('active');

                const target = $(this).data('target');
                $('.chart-canvas').hide();
                if (target === 'chart-line') {
                    $('#stockMovementChart').show();
                    if (stockMovementChart) stockMovementChart.resize();
                } else if (target === 'chart-bar') {
                    $('#stockSummaryBarChart').show();
                    if (stockSummaryBarChart) stockSummaryBarChart.resize();
                } else if (target === 'chart-horizontal') {
                    $('#stockNetHorizontalChart').show();
                    if (stockNetHorizontalChart) stockNetHorizontalChart.resize();
                }
            });

            // Update Top Products table (rebuild tbody) — unified function used from AJAX result too
            function updateTopProductsTable(topProducts) {
                var $tbody = $('#top-products-table tbody');
                var html = '';
                (topProducts || []).forEach(function (product) {
                    var name = product.name || '';
                    var displayName = name.length > 28 ? name.substring(0, 28) + '…' : name;
                    var netClass = (product.net_movement >= 0) ? 'text-success' : 'text-danger';
                    var trendIcon = product.net_movement > 0 ? '<i class="fas fa-arrow-up text-success"></i>' :
                        (product.net_movement < 0 ? '<i class="fas fa-arrow-down text-danger"></i>' : '<i class="fas fa-minus text-muted"></i>');
                    html += '<tr>'
                        + '<td>' + $('<div>').text(displayName).html() + '</td>'
                        + '<td class="text-center ' + netClass + '">' + (product.net_movement ?? '-') + '</td>'
                        + '<td class="text-center">' + trendIcon + '</td>'
                        + '</tr>';
                });
                if (html === '') {
                    html = '<tr><td colspan="4" class="text-center py-3">No products found.</td></tr>';
                }
                $tbody.html(html);
            }

            // Call updateTopProductsTable for initial server-provided topProducts
            updateTopProductsTable(initialChartData.topProducts);

            // Update charts from DataTable AJAX response
            function updateChartsFromData(chartData) {
                const data = {
                    dates: chartData.dates || [],
                    inData: chartData.inData || [],
                    outData: chartData.outData || [],
                    netData: chartData.netData || [],
                    topProducts: chartData.topProducts || []
                };

                // Update existing charts
                if (stockMovementChart) {
                    stockMovementChart.data.labels = data.dates;
                    stockMovementChart.data.datasets[0].data = data.inData;
                    stockMovementChart.data.datasets[1].data = data.outData;
                    stockMovementChart.data.datasets[2].data = data.netData;
                    stockMovementChart.update();
                }

                if (stockSummaryBarChart) {
                    const topN = data.topProducts.slice(0, 8);
                    stockSummaryBarChart.data.labels = topN.map(p => (p.name.length > 18 ? p.name.substring(0, 18) + '…' : p.name));
                    stockSummaryBarChart.data.datasets[0].data = topN.map(p => p.net_movement);
                    stockSummaryBarChart.update();
                }

                if (stockNetHorizontalChart) {
                    const topN = data.topProducts.slice(0, 10).slice().sort((a, b) => b.net_movement - a.net_movement);
                    stockNetHorizontalChart.data.labels = topN.map(p => (p.name.length > 28 ? p.name.substring(0, 28) + '…' : p.name));
                    stockNetHorizontalChart.data.datasets[0].data = topN.map(p => p.net_movement);
                    stockNetHorizontalChart.update();
                }

                // Update Top Products table
                updateTopProductsTable(data.topProducts);
            }

            // Date range picker initialization (keeps your existing logic but safer checks)
            function initializeDateRangePicker() {
                if (typeof moment === 'undefined') {
                    console.error('Moment.js not loaded.');
                    return;
                }
                if (typeof jQuery().daterangepicker === 'undefined') {
                    console.error('daterangepicker not loaded.');
                    return;
                }

                moment.locale($("html").attr("lang") || 'en');

                var dateRangePicker = $("#date-range-picker");
                if (!dateRangePicker.length) return;

                var format = dateRangePicker.data("format") || "YYYY-MM-DD";
                var startDate = $('#start_date').val() ? moment($('#start_date').val(), 'YYYY-MM-DD') : moment().startOf('month');
                var endDate = $('#end_date').val() ? moment($('#end_date').val(), 'YYYY-MM-DD') : moment().endOf('month');

                var now = moment();
                if (endDate > now) endDate = now;

                var 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) {
                    var formatValue = dateRangePicker.data("format-value") || "__from__ - __to__";
                    var formattedValue = formatValue.replace("__from__", start.format(format)).replace("__to__", end.format(format));
                    dateRangePicker.find("span").text(formattedValue);

                    $('#start_date').val(start.format('YYYY-MM-DD'));
                    $('#end_date').val(end.format('YYYY-MM-DD'));

                    const container = dateRangePicker.closest('.date-range-container');
                    const clearBtn = container.find('.clear-filter-btn[data-filter="date_range"]');
                    container.addClass('has-value');
                    dateRangePicker.addClass('has-value');
                    if (clearBtn.length) {
                        clearBtn.css('opacity', '1').css('pointer-events', 'auto');
                    }

                    refreshData();
                });

                var formatValue = dateRangePicker.data("format-value") || "__from__ - __to__";
                var formattedValue = formatValue.replace("__from__", startDate.format(format)).replace("__to__", endDate.format(format));
                dateRangePicker.find("span").text(formattedValue);

                $('.clear-filter-btn[data-filter="date_range"]').on('click', function () {
                    var container = $(this).closest('.date-range-container');
                    var dateRangeInput = container.find('#date-range-picker');
                    container.removeClass('has-value');
                    dateRangeInput.removeClass('has-value');
                    $(this).css('opacity', '0').css('pointer-events', 'none');

                    var defaultStartDate = moment().startOf('month');
                    var defaultEndDate = moment().endOf('month');
                    var formatValue = dateRangeInput.data("format-value") || "__from__ - __to__";
                    var formattedValue = formatValue.replace("__from__", defaultStartDate.format(format)).replace("__to__", defaultEndDate.format(format));
                    dateRangeInput.find("span").text(formattedValue);

                    $('#start_date').val('');
                    $('#end_date').val('');
                    dateRangeInput.data('daterangepicker').setStartDate(defaultStartDate);
                    dateRangeInput.data('daterangepicker').setEndDate(defaultEndDate);

                    refreshData();
                });

                if ($('#start_date').val() && $('#end_date').val()) {
                    const container = dateRangePicker.closest('.date-range-container');
                    const clearBtn = container.find('.clear-filter-btn[data-filter="date_range"]');
                    container.addClass('has-value');
                    dateRangePicker.addClass('has-value');
                    if (clearBtn.length) {
                        clearBtn.css('opacity', '1').css('pointer-events', 'auto');
                    }
                }
            }

            initializeDateRangePicker();

            // Helper: update small cards (keeps your existing function)
            function updateCards(cards) {
                updateCard('outOfStockCard', cards.outOfStockCard);
                updateCard('lowStockCard', cards.lowStockCard);
                updateCard('topSellingCard', cards.topSellingCard);
                updateCard('trendingCard', cards.trendingCard);
            }
            function updateCard(cardId, cardData) {
                var cardElement = $('#' + cardId);
                if (cardElement.length && cardData) {
                    cardElement.find('.count').text(cardData.currentCount);
                    var growthElement = cardElement.find('.growth');
                    growthElement.text((cardData.growth > 0 ? '+' : '') + cardData.growth);
                    var growthIcon = cardElement.find('.growth-icon');
                    growthIcon.toggleClass('fa-arrow-up', cardData.growth > 0).toggleClass('fa-arrow-down', cardData.growth < 0);
                    growthElement.toggleClass('text-success', cardData.growth > 0).toggleClass('text-danger', cardData.growth < 0);
                    var chartElement = cardElement.find('.mini-chart');
                    if (chartElement.length && cardData.chartData) {
                        var chart = Chart.getChart(chartElement[0]);
                        if (chart) {
                            chart.data.datasets[0].data = cardData.chartData;
                            chart.update();
                        }
                    }
                }
            }

            // Auto apply filters on change
            $('#filter-form input, #filter-form select').on('change', function () {
                refreshData();
            });

            // Reset filters
            $('#reset_filters').on('click', function () {
                $('#filter-form')[0].reset();
                var dateRangePicker = $("#date-range-picker");
                if (dateRangePicker.length) {
                    var format = dateRangePicker.data("format") || "YYYY-MM-DD";
                    var defaultStartDate = moment().startOf('month');
                    var defaultEndDate = moment().endOf('month');
                    var formatValue = dateRangePicker.data("format-value") || "__from__ - __to__";
                    var formattedValue = formatValue.replace("__from__", defaultStartDate.format(format)).replace("__to__", defaultEndDate.format(format));
                    dateRangePicker.find("span").text(formattedValue);

                    $('#start_date').val('');
                    $('#end_date').val('');
                    $('#filter_type').val('');
                    dateRangePicker.data('daterangepicker').setStartDate(defaultStartDate);
                    dateRangePicker.data('daterangepicker').setEndDate(defaultEndDate);

                    const container = dateRangePicker.closest('.date-range-container');
                    const clearBtn = container.find('.clear-filter-btn[data-filter="date_range"]');
                    container.removeClass('has-value');
                    dateRangePicker.removeClass('has-value');
                    if (clearBtn.length) {
                        clearBtn.css('opacity', '0').css('pointer-events', 'none');
                    }
                }

                $('.card-header .badge.bg-info').remove();
                refreshData();
            });

            // Stock details modal handling (keeps your existing logic)
            $(document).on('click', '.view-stock-btn', function (e) {
                e.preventDefault();
                var productId = $(this).data('product-id');
                var productName = $(this).data('product-name');
                $('#product-name-header').text(productName);
                $('#stock-details-table tbody').html(
                    '<tr><td colspan="8" class="text-center py-4">' +
                    '<div class="sc-preloader text-center p-3 text-primary" role="status"><i class="fa fa-spinner fa-spin fa-2x"></i><span class="visually-hidden">Loading...</span></div> Loading stock details...</td></tr>'
                );
                $('#stockDetailsModal').modal('show');

                $.ajax({
                    url: '{{ route('report.product.stock.details') }}',
                    type: 'GET',
                    data: {
                        product_id: productId,
                        date_from: $('#start_date').val(),
                        date_to: $('#end_date').val()
                    },
                    dataType: 'json',
                    success: function (response) {
                        $('#stock-details-table tbody').empty();
                        if (response.data && response.data.length > 0) {
                            response.data.forEach(function (item, index) {
                                $('#stock-details-table tbody').append(
                                    '<tr>' +
                                    '<td>' + (index + 1) + '</td>' +
                                    '<td>' + item.date + '</td>' +
                                    // '<td class="d-none d-md-table-cell">' +
                                    // '<img src="' + item.image_url + '" alt="Product" width="40" height="40" class="rounded">' +
                                    // '</td>' +
                                    // '<td>' + item.product_sku + '</td>' +
                                    '<td>' + item.reference_type + '</td>' +
                                    '<td>' + item.stock_movement + '</td>' +
                                    '<td>' + item.running_stock + '</td>' +
                                    '<td class="d-none d-lg-table-cell">' +
                                    (item.ref_link
                                        ? `<a href="${item.ref_link}" target="_blank">
                                            ${item.remark}
                                        </a>`
                                        : item.remark
                                    )
                                + '</td>' +
                                    '</tr>'
                                );
                            });
                        } else {
                            $('#stock-details-table tbody').html(
                                '<tr><td colspan="8" class="text-center py-4">No stock details found.</td></tr>'
                            );
                        }
                    },
                    error: function (xhr, status, error) {
                        console.error('AJAX Error:', status, error);
                        $('#stock-details-table tbody').html(
                            '<tr><td colspan="8" class="text-center py-4 text-danger">Error loading stock details. Please try again.</td></tr>'
                        );
                    }
                });
            });

            // Make charts responsive on window resize
            $(window).resize(function () {
                [stockMovementChart, stockSummaryBarChart, stockNetHorizontalChart].forEach(function (c) {
                    if (c) c.resize();
                });
            });

            // Card click helper functions - Updated to refresh both DataTable and charts/cards
            window.filterByStockLevel = function (level) {
                $('#filter-form')[0].reset();
                $('#filter_type').val(level);
                refreshData();
            };
            window.filterByTopSelling = function () {
                $('#filter-form')[0].reset();
                $('#filter_type').val('top_selling');
                refreshData();
            };
            window.filterByTrending = function () {
                $('#filter-form')[0].reset();
                $('#filter_type').val('trending');
                refreshData();
            };


        });
    </script>
@endpush

<style>
    tbody {
        font-size:0.875rem;
    }

</style>