@extends(BaseHelper::getAdminMasterLayoutTemplate())

@section('content')
    <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
                        class="card-header d-flex flex-column flex-md-row justify-content-between align-items-start align-items-md-center gap-3">
                        <div class="">
                            <select id="entries" class="form-select" name="paginate">
                                <option value="10" {{ request('paginate', 10) == 10 ? 'selected' : '' }}>10</option>
                                <option value="20" {{ request('paginate') == 20 ? 'selected' : '' }}>20</option>
                                <option value="30" {{ request('paginate') == 30 ? 'selected' : '' }}>30</option>
                                <option value="50" {{ request('paginate') == 50 ? 'selected' : '' }}>50</option>
                                <option value="75" {{ request('paginate') == 75 ? 'selected' : '' }}>75</option>
                                <option value="all" {{ request('paginate') == 'all' ? 'selected' : '' }}>All</option>
                            </select>
                        </div>
                        <div class="d-flex justify-between w-md-auto">
                            <div class="input-group">
                                <span class="input-group-text"><i class="fas fa-search"></i></span>
                                <input type="text" class="form-control" id="search" name="search"
                                    value="{{ request('search') }}" placeholder="Search by name or SKU">
                            </div>
                        </div>
                    </div>

                    <!-- Loading indicator -->
                    <div id="loading" class="text-center py-5" style="display: none;">
                        <div class="spinner-border text-primary" role="status">
                            <span class="visually-hidden">Loading...</span>
                        </div>
                        <p class="mt-2">Loading data...</p>
                    </div>

                    <!-- Products Table -->
                    <div class="card-body p-0" id="products_listing">
                        @include('backend.report.product.table', ['products' => $products])
                    </div>

                    <!-- Pagination -->
                    <div class="card-footer bg-white" id="pagination_footer">
                        @include('backend.report.product.pagination', ['products' => $products])
                    </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 class="modal-footer">
                    <button type="button" class="btn btn-secondary w-md-auto" data-bs-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('footer')
    <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;

            // 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);

            // Apply filters with AJAX (keeps charts and top products in sync)
            function applyFilters() {
                $('#loading').show();
                var form = $('#filter-form');
                var params = form.serialize();

                $.ajax({
                    url: '{{ route('report.product.index') }}',
                    type: 'GET',
                    data: params,
                    dataType: 'json',
                    success: function (response) {
                        if (response.success) {
                            // Update table listing and pagination
                            if (response.html) $('#products_listing').html(response.html);
                            if (response.pagination) $('#pagination_footer').html(response.pagination);

                            // Chart updates
                            if (response.chartData) {
                                const chartData = {
                                    dates: response.chartData.dates || [],
                                    inData: response.chartData.inData || [],
                                    outData: response.chartData.outData || [],
                                    netData: response.chartData.netData || [],
                                    topProducts: response.chartData.topProducts || []
                                };

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

                                if (stockSummaryBarChart) {
                                    const topN = chartData.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 = chartData.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(chartData.topProducts);
                            }

                            // Update cards if provided
                            if (response.cards) {
                                updateCards(response.cards);
                            }
                           
                        } else {
                            // handle server-side failure
                            alert(response.message || 'No data returned.');
                        }
                        $('#loading').hide();
                    },
                    error: function (xhr, status, error) {
                        $('#loading').hide();
                        console.error('AJAX Error:', status, error);
                        alert('An error occurred while loading data. Please try again.');
                    }
                });
            }

            // 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');
                    }

                    applyFilters();
                });

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

                    applyFilters();
                });

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

            // Pagination click handling
            $(document).on('click', '.pagination a', function (e) {
                e.preventDefault();
                var url = $(this).attr('href');
                var page = url.match(/page=(\d+)/);
                if (page) {
                    if (!$('#filter-form input[name="page"]').length) {
                        $('#filter-form').append('<input type="hidden" name="page" value="">');
                    }
                    $('#filter-form input[name="page"]').val(page[1]);
                    applyFilters();
                }
            });

            // Auto apply filters on change (except search)
            $('#filter-form input, #filter-form select').on('change', function () {
                if ($(this).attr('id') !== 'search') {
                    if (!$('#filter-form input[name="page"]').length) {
                        $('#filter-form').append('<input type="hidden" name="page" value="1">');
                    } else {
                        $('#filter-form input[name="page"]').val('1');
                    }
                    applyFilters();
                }
            });

            // Search on enter
            $('#search').on('keypress', function (e) {
                if (e.which === 13) {
                    e.preventDefault();
                    if (!$('#filter-form input[name="page"]').length) {
                        $('#filter-form').append('<input type="hidden" name="page" value="1">');
                    } else {
                        $('#filter-form input[name="page"]').val('1');
                    }
                    applyFilters();
                }
            });

            // 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();
                $('#filter-form input[name="page"]').remove();
                applyFilters();
            });

            // 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="spinner-border spinner-border-sm" role="status"><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.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 (keeps your existing behavior)
            window.filterByStockLevel = function (level) {
                $('#filter-form')[0].reset();
                $('#filter_type').val(level);
                applyFilters();
            };
            window.filterByTopSelling = function () {
                $('#filter-form')[0].reset();
                $('#filter_type').val('top_selling');
                applyFilters();
            };
            window.filterByTrending = function () {
                $('#filter-form')[0].reset();
                $('#filter_type').val('trending');
                applyFilters();
            };

        });
    </script>
@endpush