@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="col-lg-12">
        <div class="card">
            <div class="card-header p-2 row justify-content-between">
                <div class="row align-items-center col-lg-6">
                    <div class="col-12 mb-3 mb-md-0">
                        <h1 class="h3 text-center text-md-start">Stock Report</h1>
                    </div>
                </div>
                <div class="row align-items-center col-lg-6">
                    @php
                        use Carbon\Carbon;
                    @endphp
                    <div class="col-12 col-md-6 mb-3 mb-md-0">
                        <div class="date-range-container d-flex justify-content-end">
                            <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.stock.index') }}"
                                data-start-date="{{ BaseHelper::formatDate(Carbon::now()->startOfMonth()) }}"
                                data-end-date="{{ BaseHelper::formatDate(Carbon::now()->endOfMonth()) }}"
                                data-current-view="default" data-active-view="default" icon="fa fa-calendar"
                                class="w-md-auto">

                                {{ trans('plugins/ecommerce::reports.date_range_format_value', [
        'from' => BaseHelper::formatDate(Carbon::now()->startOfMonth()),
        'to' => BaseHelper::formatDate(Carbon::now()->endOfMonth()),
    ]) }}
                            </x-core::button>
                        </div>
                    </div>
                    <div class="col-12 col-md-6 mb-3 mb-md-0">
                        <div class="d-flex justify-content-center">
                            <select class="form-control" id="product-select" data-row="0" style="width: 100%;">
                                <option value="">Select Product</option>
                            </select>
                        </div>
                    </div>
                </div>
            </div>
            <div class="card-body">
                <div class="row mb-3">
                    <div class="col-12">
                        <div class="d-flex justify-content-between align-items-center flex-wrap">
                            <div class="chart-type-selector">
                                <div class="btn-group" role="group">
                                    <button type="button" class="btn btn-sm btn-outline-primary chart-type-btn active"
                                        data-chart-type="bar">
                                        <i class="fa fa-chart-bar"></i> Bar
                                    </button>
                                    <button type="button" class="btn btn-sm btn-outline-primary chart-type-btn"
                                        data-chart-type="line">
                                        <i class="fa fa-chart-line"></i> Line
                                    </button>
                                    <button type="button" class="btn btn-sm btn-outline-primary chart-type-btn"
                                        data-chart-type="area">
                                        <i class="fa fa-chart-area"></i> Area
                                    </button>
                                    <button type="button" class="btn btn-sm btn-outline-primary chart-type-btn"
                                        data-chart-type="mixed">
                                        <i class="fa fa-chart-pie"></i> Mixed
                                    </button>
                                    <button type="button" class="btn btn-sm btn-outline-primary chart-type-btn"
                                        data-chart-type="radar">
                                        <i class="fa fa-chart-line"></i> Radar
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-lg-8">
                        <div class="chart-container" style="position: relative; height:350px; width:100%;">
                            <canvas id="stock-chart"></canvas>
                        </div>
                    </div>
                    <div class="col-lg-4">
                        <input type="hidden" id="repost_status" name="repost_status">
                        <div class="stock-summary-cards row gap-3">
                            <div class="summary-card available-stock clickable col-sm-12 col-lg-auto flex-fill"
                                data-status="in_stock">
                                <div class="card-icon-wrapper">
                                    <div class="card-icon">
                                        <i class="fa fa-box"></i>
                                    </div>
                                </div>
                                <div class="card-content">
                                    <div class="card-title">Available Stock</div>
                                    <div class="card-value" id="available-stock-count">0</div>
                                    <div class="card-description">Products in stock</div>
                                </div>
                            </div>
                            <div class="summary-card coming-soon clickable col-sm-12 col-lg-auto flex-fill"
                                data-status="on_backorder">
                                <div class="card-icon-wrapper">
                                    <div class="card-icon">
                                        <i class="fa fa-truck"></i>
                                    </div>
                                </div>
                                <div class="card-content">
                                    <div class="card-title">Coming Soon</div>
                                    <div class="card-value" id="coming-soon-count">0</div>
                                    <div class="card-description">On backorder</div>
                                </div>
                            </div>
                            <div class="summary-card out-of-stock clickable col-sm-12 col-lg-auto flex-fill"
                                data-status="out_of_stock">
                                <div class="card-icon-wrapper">
                                    <div class="card-icon">
                                        <i class="fa fa-exclamation-circle"></i>
                                    </div>
                                </div>
                                <div class="card-content">
                                    <div class="card-title">Out of Stock</div>
                                    <div class="card-value" id="out-of-stock-count">0</div>
                                    <div class="card-description">Need restocking</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- Table Section -->
    <div class="row">
        <div class="col-12">
            <div class="card shadow-sm" id="stock_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="stock_listing">
                    <div class="table-responsive p-1">
                        <table class="table table-hover mb-0" id="stockTable" 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">Status</th>
                                    <th scope="col">Action</th>
                                </tr>
                            </thead>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Modal for product stock details -->
    <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>

    <!-- Include Chart.js -->
    <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>
        /* Responsive adjustments */
        @media (max-width: 768px) {
            .card-header {
                padding: 1rem 0.5rem !important;
            }

            .h3 {
                font-size: 1.5rem !important;
            }

            .chart-container {
                height: 250px !important;
            }

            .table-responsive {
                font-size: 0.875rem;
            }

            .btn {
                font-size: 0.875rem;
                padding: 0.375rem 0.75rem;
            }

            .form-control {
                font-size: 0.875rem;
            }

            .modal-dialog {
                margin: 0.5rem;
                max-width: calc(100% - 1rem);
            }

            .pagination {
                justify-content: center;
            }

            .page-link {
                padding: 0.25rem 0.5rem;
                font-size: 0.875rem;
            }

            .stock-summary-cards .summary-card {
                margin-bottom: 1rem;
            }

            .chart-type-selector {
                margin-top: 10px;
                width: 100%;
                text-align: center;
            }

            .chart-type-selector .btn-group {
                flex-wrap: wrap;
                justify-content: center;
            }

            .chart-type-selector .btn {
                margin: 2px;
                font-size: 0.75rem;
                padding: 0.25rem 0.5rem;
            }
        }

        @media (max-width: 576px) {
            .chart-container {
                height: 200px !important;
            }

            .table-responsive {
                font-size: 0.8rem;
            }

            .btn {
                font-size: 0.8rem;
                padding: 0.25rem 0.5rem;
            }

            .badge {
                font-size: 0.7rem;
            }

            .stock-summary-cards .summary-card {
                margin-bottom: 0.75rem;
            }
        }

        /* Ensure proper table scrolling on mobile */
        .table-responsive {
            overflow-x: auto;
            -webkit-overflow-scrolling: touch;
        }

        /* Make sure the date range picker is responsive */
        .daterangepicker {
            width: auto !important;
            max-width: 90vw !important;
        }

        /* Ensure select2 dropdown is responsive */
        .select2-container {
            width: 100% !important;
        }

        /* Adjust modal for mobile */
        @media (max-width: 768px) {
            .modal-body {
                padding: 1rem 0.5rem;
            }

            .modal-footer {
                padding: 0.75rem 0.5rem;
            }
        }

        /* Ensure tooltips are responsive */
        .tooltip {
            font-size: 0.75rem;
        }

        /* Responsive chart container */
        @media (max-width: 992px) {
            .chart-container {
                height: 280px;
            }
        }

        /* Make sure the pagination is responsive */
        @media (max-width: 768px) {
            .pagination {
                flex-wrap: wrap;
            }
        }

        /* Fix for daterangepicker active range highlighting */
        .daterangepicker .ranges li.active {
            background-color: #4285f4;
            color: #fff;
        }

        /* Add custom styling for view buttons */
        .daterangepicker .ranges li[data-view="true"] {
            font-weight: 600;
            border-bottom: 1px solid #eee;
        }

        /* Custom style for active view type */
        .daterangepicker .ranges li[data-active-view="true"] {
            background-color: #4285f4;
            color: #fff;
        }

        /* Style for separator */
        .daterangepicker .ranges li.separator {
            background: transparent;
            cursor: default;
            padding: 5px 0;
        }

        /* New Modern Stock Summary Cards Design */
        .stock-summary-cards {
            display: flex;
            flex-direction: column;
            gap: 1rem;
            height: 100%;
        }

        .summary-card {
            display: flex;
            align-items: center;
            background: #ffffff;
            border-radius: 12px;
            padding: 1.25rem;
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            position: relative;
            overflow: hidden;
            border: 1px solid #e5e7eb;
            cursor: pointer;
        }

        .summary-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 4px;
            background: transparent;
            transition: all 0.3s ease;
        }

        .summary-card:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08);
            border-color: transparent;
        }

        .summary-card.active {
            transform: translateY(-2px);
            box-shadow: 0 12px 30px rgba(0, 0, 0, 0.12);
            border-color: transparent;
        }

        .summary-card.active::before {
            height: 4px;
        }

        .summary-card.available-stock::before {
            background: linear-gradient(90deg, #10b981, #34d399);
        }

        .summary-card.coming-soon::before {
            background: linear-gradient(90deg, #f59e0b, #fbbf24);
        }

        .summary-card.out-of-stock::before {
            background: linear-gradient(90deg, #ef4444, #f87171);
        }

        .card-icon-wrapper {
            position: relative;
            margin-right: 1rem;
            flex-shrink: 0;
        }

        .card-icon {
            width: 56px;
            height: 56px;
            border-radius: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.3s ease;
            position: relative;
            overflow: hidden;
        }

        .card-icon::before {
            content: '';
            position: absolute;
            inset: 0;
            border-radius: inherit;
            opacity: 0;
            transition: opacity 0.3s ease;
        }

        .summary-card:hover .card-icon::before,
        .summary-card.active .card-icon::before {
            opacity: 0.1;
        }

        .available-stock .card-icon {
            background: linear-gradient(135deg, #10b981 0%, #34d399 100%);
            color: #ffffff;
        }

        .available-stock .card-icon::before {
            background: #10b981;
        }

        .coming-soon .card-icon {
            background: linear-gradient(135deg, #f59e0b 0%, #fbbf24 100%);
            color: #ffffff;
        }

        .coming-soon .card-icon::before {
            background: #f59e0b;
        }

        .out-of-stock .card-icon {
            background: linear-gradient(135deg, #ef4444 0%, #f87171 100%);
            color: #ffffff;
        }

        .out-of-stock .card-icon::before {
            background: #ef4444;
        }

        .card-icon i {
            font-size: 1.5rem;
            z-index: 1;
            position: relative;
        }

        .card-content {
            flex: 1;
            min-width: 0;
        }

        .card-title {
            font-size: 0.875rem;
            font-weight: 600;
            color: #6b7280;
            margin: 0 0 0.25rem 0;
            text-transform: uppercase;
            letter-spacing: 0.025em;
            line-height: 1.25;
        }

        .card-value {
            font-size: 1.875rem;
            font-weight: 700;
            color: #111827;
            margin: 0 0 0.25rem 0;
            line-height: 1.2;
        }

        .card-description {
            font-size: 0.75rem;
            color: #9ca3af;
            margin: 0;
            line-height: 1.25;
        }

        /* Responsive adjustments for summary cards */
        @media (max-width: 992px) {
            .stock-summary-cards {
                flex-direction: row;
                flex-wrap: wrap;
                gap: 1rem;
            }

            .summary-card {
                flex: 1 1 calc(50% - 0.5rem);
            }
        }

        @media (max-width: 768px) {
            .stock-summary-cards {
                flex-direction: column;
            }

            .summary-card {
                flex: 1 1 100%;
                padding: 1rem;
            }

            .card-icon {
                width: 48px;
                height: 48px;
            }

            .card-icon i {
                font-size: 1.25rem;
            }

            .card-title {
                font-size: 0.8rem;
            }

            .card-value {
                font-size: 1.5rem;
            }

            .card-description {
                font-size: 0.7rem;
            }
        }

        @media (max-width: 576px) {
            .summary-card {
                padding: 0.875rem;
            }

            .card-icon {
                width: 44px;
                height: 44px;
            }

            .card-icon i {
                font-size: 1.125rem;
            }

            .card-title {
                font-size: 0.75rem;
            }

            .card-value {
                font-size: 1.375rem;
            }
        }

        /* Chart styling improvements */
        .chart-container {
            background-color: #fff;
            border-radius: 10px;
            padding: 20px;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
            margin-bottom: 20px;
        }

        /* Chart type selector styling */
        .chart-type-selector {
            margin-top: 10px;
        }

        .chart-type-selector .btn-group {
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
            border-radius: 6px;
            overflow: hidden;
        }

        .chart-type-selector .btn {
            border-radius: 0;
            border: none;
            background-color: #f8f9fa;
            color: #6c757d;
            transition: all 0.2s;
        }

        .chart-type-selector .btn:hover {
            background-color: #e9ecef;
            color: #495057;
        }

        .chart-type-selector .btn.active {
            background-color: #007bff;
            color: white;
        }

        .chart-type-selector .btn i {
            margin-right: 5px;
        }

    </style>

    <script>
        var productsearch = '{{ route('report.stock.products.search') }}';
        var stockDataUrl = '{{ route('report.stock.data') }}';
        var stockTableUrl = '{{ route('report.stock.table') }}';
        var stockDetailsUrl = '{{ route('report.stock.product.details') }}';
        var stockCountsUrl = '{{ route('report.stock.counts') }}';
        var stockChart;
        var stockTable;
        var currentChartType = 'bar'; // Default chart type

        $(document).ready(function () {

            $("th.sortable[data-sort='product_name']").addClass("asc");

            // Initialize date range picker
            if (window.moment && jQuery().daterangepicker) {
                moment.locale($("html").attr("lang"));
                var dateRangePicker = $("#date-range-picker");
                var format = dateRangePicker.data("format") || "YYYY-MM-DD";
                var startDate = dateRangePicker.data("start-date") || moment().subtract(29, "days");
                var now = moment();
                var endDate = moment().endOf("month");

                if (endDate > now) {
                    endDate = now;
                }

                // Custom ranges with Year, Month, and Week options
                var ranges = {
                    'Today': [now, now],
                    'This Week': [moment().startOf("week"), now],
                    'Last 7 Days': [moment().subtract(6, "days"), now],
                    'Last 30 Days': [moment().subtract(29, "days"), now],
                    'This Month': [moment().startOf("month"), endDate],
                    '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")],
                    '2 Years Ago': [moment().subtract(2, "year").startOf("year"), moment().subtract(2, "year").endOf("year")],
                    '---': [moment(), moment()], // Separator
                    'Week View': [moment().startOf("week"), moment().endOf("week")],
                    'Month View': [moment().startOf("month"), moment().endOf("month")],
                    'Year View': [moment().startOf("year"), moment().endOf("year")]
                };

                dateRangePicker.daterangepicker({
                    ranges: ranges,
                    alwaysShowCalendars: true,
                    startDate: startDate,
                    endDate: endDate,
                    maxDate: endDate,
                    opens: $(window).width() < 768 ? "center" : "left",
                    drops: "auto",
                    locale: {
                        format: format,
                        customRangeLabel: 'Custom Range'
                    },
                    autoUpdateInput: false
                }, function (start, end, label) {
                    // Determine view type based on the selected label
                    var viewType = determineViewType(label);

                    // Update the attributes on the button
                    updateViewAttributes(viewType, label);

                    // Update the button text
                    updateDateRangePickerText(label, start, end, format);

                    // Update the active state
                    updateActiveRange(label);

                    // Reload the chart
                    updateData();
                });

                // Function to determine view type based on label
                function determineViewType(label) {
                    if (label === 'Week View') {
                        return 'week_view';
                    } else if (label === 'Month View') {
                        return 'month_view';
                    } else if (label === 'Year View') {
                        return 'year_view';
                    } else if (label.includes('Week')) {
                        return 'week';
                    } else if (label.includes('Month')) {
                        return 'month';
                    } else if (label.includes('Year')) {
                        return 'year';
                    } else if (label === 'Today' || label === 'Last 7 Days' || label === 'Last 30 Days') {
                        return 'day';
                    } else if (label.includes('Quarter')) {
                        return 'quarter';
                    } else {
                        return 'default';
                    }
                }

                // Function to update view attributes
                function updateViewAttributes(viewType, label) {
                    dateRangePicker.attr('data-current-view', viewType);
                    dateRangePicker.attr('data-active-view', viewType);

                    // Store the selected label
                    dateRangePicker.attr('data-selected-label', label);
                }

                // Custom function to update date range picker text
                function updateDateRangePickerText(label, start, end, format) {
                    var element = $("#date-range-picker");
                    var formatValue = element.data("format-value");
                    if (!formatValue) formatValue = "__from__ - __to__";

                    // For view options, show the label instead of date range
                    if (label === 'Week View' || label === 'Month View' || label === 'Year View') {
                        element.find("span").text(label);
                    } else if (label === '---') {
                        // Don't update for separator
                        return;
                    } else {
                        var formattedValue = formatValue
                            .replace("__from__", start.format(format))
                            .replace("__to__", end.format(format));
                        element.find("span").text(formattedValue);
                    }
                }

                // Custom function to update active range
                function updateActiveRange(label) {
                    $('.daterangepicker .ranges li').removeClass('active');
                    $('.daterangepicker .ranges li').each(function () {
                        if ($(this).text() === label) {
                            $(this).addClass('active');
                        }
                    });
                }

                dateRangePicker.on("apply.daterangepicker", function (ev, picker) {
                    var element = $(this);
                    var label = picker.chosenLabel;

                    // Determine view type based on the selected label
                    var viewType = determineViewType(label);

                    // Update the attributes on the button
                    updateViewAttributes(viewType, label);

                    var formatValue = element.data("format-value");
                    if (!formatValue) formatValue = "__from__ - __to__";

                    // For view options, show the label instead of date range
                    if (label === 'Week View' || label === 'Month View' || label === 'Year View') {
                        element.find("span").text(label);
                    } else if (label === '---') {
                        return;
                    } else {
                        var formattedValue = formatValue
                            .replace("__from__", picker.startDate.format(format))
                            .replace("__to__", picker.endDate.format(format));
                        element.find("span").text(formattedValue);
                    }

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

                    // Update active state
                    updateActiveRange(label);
                });

                // Add event listener to restore the selected view when the picker is opened
                dateRangePicker.on("show.daterangepicker", function () {
                    var selectedLabel = dateRangePicker.attr('data-selected-label');
                    if (selectedLabel) {
                        // Use a timeout to ensure the ranges list is fully rendered
                        setTimeout(function () {
                            updateActiveRange(selectedLabel);
                        }, 10);
                    }
                });

                $('.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');
                    $(this).css('pointer-events', 'none');
                    var defaultStartDate = moment().startOfMonth();
                    var defaultEndDate = moment().endOf("month");
                    var formatValue = dateRangeInput.data("format-value");
                    if (!formatValue) formatValue = "__from__ - __to__";
                    var formattedValue = formatValue
                        .replace("__from__", defaultStartDate.format(format))
                        .replace("__to__", defaultEndDate.format(format));
                    dateRangeInput.find("span").text(formattedValue);

                    // Reset attributes to default
                    dateRangeInput.attr('data-current-view', 'default');
                    dateRangeInput.attr('data-active-view', 'default');
                    dateRangeInput.attr('data-selected-label', '');

                    updateActiveRange('');
                    updateData();
                });

                // Customize the ranges list after initialization
                setTimeout(function () {
                    $('.daterangepicker .ranges li').each(function () {
                        var text = $(this).text();
                        if (text === 'Week View' || text === 'Month View' || text === 'Year View') {
                            $(this).attr('data-view', 'true');
                        } else if (text === '---') {
                            $(this).addClass('disabled separator').css('cursor', 'default');
                            $(this).html('<hr style="margin: 5px 0;">');
                        }
                    });

                    // Check if there's a previously selected view and highlight it
                    var selectedLabel = dateRangePicker.attr('data-selected-label');
                    if (selectedLabel) {
                        updateActiveRange(selectedLabel);
                    }
                }, 100);
            }

            // Initialize select2 for product selection
            $('#product-select').select2({
                placeholder: 'Search and select product',
                allowClear: true,
                width: '100%',
                ajax: {
                    url: productsearch,
                    dataType: 'json',
                    delay: 250,
                    data: function (params) {
                        return { q: params.term || '' };
                    },
                    processResults: function (data) {
                        return {
                            results: data.data.map(function (product) {
                                return {
                                    id: product.id,
                                    text: product.name + ' - ' + (product.sale_price || product.price),
                                    product: product
                                };
                            })
                        };
                    },
                    cache: true
                },
                templateResult: formatProduct,
                templateSelection: formatProductSelection
            });

            // Chart type selector event handler
            $('.chart-type-btn').on('click', function () {
                $('.chart-type-btn').removeClass('active');
                $(this).addClass('active');
                currentChartType = $(this).data('chart-type');
                updateChartWithCurrentData();
            });

            // Initialize DataTable first
            stockTable = $('#stockTable').DataTable({
                processing: true,
                serverSide: true,
                scrollCollapse: true,
                paging: true,
                ajax: {
                    url: stockTableUrl,
                    type: 'GET',
                    data: function (d) {
                        d.date_from = getDateFrom();
                        d.date_to = getDateTo();
                        d.product_id = $('#product-select').val();
                        d.status = $('#repost_status').val();
                        d.view_type = $('#date-range-picker').attr('data-current-view') || 'default';
                        
                        var viewType = d.view_type;
                        var groupBy = 'product';
                        if (viewType === 'week_view' || viewType === 'week') {
                            groupBy = 'week';
                        } else if (viewType === 'month_view' || viewType === 'month') {
                            groupBy = 'month';
                        } else if (viewType === 'year_view' || viewType === 'year') {
                            groupBy = 'year';
                        } else if (viewType === 'day') {
                            groupBy = 'day';
                        } else if (viewType === 'quarter') {
                            groupBy = 'quarter';
                        }
                        d.group_by = groupBy;
                    }
                },
                columns: [
                    {
                        data: 'product_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' },
                    { data: 'size', orderable: false, searchable: false },
                    { data: 'load_rating', orderable: false, searchable: false },
                    { data: 'pattern', orderable: false, searchable: false },
                    { data: 'sale_price', searchable: false },
                    { data: 'wholesale_price', searchable: false },
                    { data: 'category_name', name: 'ec_product_categories.name' },
                    {
                        data: 'current_stock',
                        searchable: false,
                        render: function(data, type, row) {
                            var stockColor = data > 0 ? 'primary' : 'danger';
                            return `<span class="badge status-${stockColor}-label">${Number(data || 0).toFixed(0)}</span>`;
                        }
                    },
                    {
                        data: 'status',
                        searchable: false,
                        render: function(data, type, row) {
                            var statusColor = '';
                            var statusText = '';
                            if (data == 'in_stock') {
                                statusColor = 'success';
                                statusText = 'Available';
                            } else if (data == 'on_backorder') {
                                statusColor = 'warning';
                                statusText = 'Coming soon';
                            } else if (data == 'out_of_stock') {
                                statusColor = 'danger';
                                statusText = 'Out of stock';
                            }
                            return `<span class="badge status-${statusColor}-label">${statusText}</span>`;
                        }
                    },
                    {
                        data: 'id',
                        orderable: false,
                        searchable: false,
                        render: function(data, type, row) {
                            return `
                                <button type="button" class="btn btn-sm btn-success view-stock-details" data-product-id="${data}">
                                    <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();
                stockTable.ajax.reload(function () { $('#loading').hide(); });
            }

            // Initialize Chart
            initChart();
            updateData();

            // Event listeners for filters
            $('#product-select').on('change', function () {
                updateData();
                refreshData();
            });

            // Handle click on view button
            $(document).on('click', '.view-stock-details', function () {
                var productId = $(this).data('product-id');
                loadProductStockDetails(productId);
            });

            // Handle window resize for chart responsiveness
            $(window).on('resize', function () {
                if (stockChart) {
                    stockChart.resize();
                }
            });

            function getDateFrom() {
                if ($('#date-range-picker').data('daterangepicker')) {
                    return $('#date-range-picker').data('daterangepicker').startDate.format('YYYY-MM-DD');
                }
                return moment().startOfMonth().format('YYYY-MM-DD');
            }

            function getDateTo() {
                if ($('#date-range-picker').data('daterangepicker')) {
                    return $('#date-range-picker').data('daterangepicker').endDate.format('YYYY-MM-DD');
                }
                return moment().endOfMonth().format('YYYY-MM-DD');
            }

            function updateData() {
                $('#loading').show();
                var dateFrom = getDateFrom();
                var dateTo = getDateTo();
                var productId = $('#product-select').val();
                var status = $('#repost_status').val();

                // Get the view type from the data-current-view attribute
                var viewType = $('#date-range-picker').attr('data-current-view') || 'default';

                // Use viewType directly to determine group_by
                var groupBy = 'product'; // default
                if (viewType === 'week_view' || viewType === 'week') {
                    groupBy = 'week';
                } else if (viewType === 'month_view' || viewType === 'month') {
                    groupBy = 'month';
                } else if (viewType === 'year_view' || viewType === 'year') {
                    groupBy = 'year';
                } else if (viewType === 'day') {
                    groupBy = 'day';
                } else if (viewType === 'quarter') {
                    groupBy = 'quarter';
                } else {
                    groupBy = 'product';
                }

                // Update stock counts
                updateStockCounts(dateFrom, dateTo, productId);

                // Update chart data
                $.ajax({
                    url: stockDataUrl,
                    type: 'GET',
                    data: {
                        date_from: dateFrom,
                        date_to: dateTo,
                        product_id: productId,
                        group_by: groupBy,
                        view_type: viewType,
                        status: status
                    },
                    success: function (response) {
                        updateChart(response.data, groupBy, response.view_type || viewType);
                    },
                    error: function (xhr) {
                        console.error(xhr.responseText);
                    }
                });

                // Update table data
                refreshData();
            }

            function updateStockCounts(dateFrom, dateTo, productId) {
                $.ajax({
                    url: stockCountsUrl,
                    type: 'GET',
                    data: {
                        date_from: dateFrom,
                        date_to: dateTo,
                        product_id: productId
                    },
                    success: function (response) {
                        $('#available-stock-count').text(response.available_count || 0);
                        $('#coming-soon-count').text(response.coming_soon_count || 0);
                        $('#out-of-stock-count').text(response.out_of_stock_count || 0);
                    },
                    error: function (xhr) {
                        console.error(xhr.responseText);
                        $('#available-stock-count').text('0');
                        $('#coming-soon-count').text('0');
                        $('#out-of-stock-count').text('0');
                    }
                });
            }

            function loadProductStockDetails(productId) {
                var dateFrom = getDateFrom();
                var dateTo = getDateTo();

                $.ajax({
                    url: stockDetailsUrl,
                    type: 'GET',
                    data: {
                        product_id: productId,
                        date_from: dateFrom,
                        date_to: dateTo
                    },
                    success: function (response) {
                        $('#product-name-header').text(response.product_name);

                        // Clear existing table data
                        $('#stock-details-table tbody').empty();

                        // Add new data to table
                        response.data.forEach(function (item, index) {
                            var row = '<tr>' +
                                '<td>' + (index + 1) + '</td>' +
                                '<td>' + item.date + '</td>' +
                                // '<td class="d-none d-md-table-cell"><img src="' + item.image_url + '" width="50" height="50" class="rounded"></td>' +
                                // '<td>' + item.product_sku + '</td>' +
                                '<td>' + item.reference_type + '</td>' +
                                '<td>' + item.stock_movement + '</td>' +
                                '<td><span class="badge text-white ' + (item.running_stock > 0 ? 'bg-primary' : 'bg-danger') + '">' + item.running_stock + '</span></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>';
                            $('#stock-details-table tbody').append(row);
                        });

                        // Show modal using Bootstrap 5 method if available, otherwise fallback to Bootstrap 4
                        if (typeof bootstrap !== 'undefined') {
                            var modal = new bootstrap.Modal(document.getElementById('stockDetailsModal'));
                            modal.show();
                        } else {
                            $('#stockDetailsModal').modal('show');
                        }
                    },
                    error: function (xhr) {
                        console.error(xhr.responseText);
                    }
                });
            }

            // Store current chart data for type switching
            var currentChartData = {
                labels: [],
                inData: [],
                outData: [],
                stockData: [],
                groupBy: '',
                viewType: ''
            };

            function initChart() {
                var ctx = document.getElementById('stock-chart').getContext('2d');
                stockChart = new Chart(ctx, {
                    type: 'bar',
                    data: {
                        labels: [],
                        datasets: [
                            {
                                label: 'In Quantity',
                                data: [],
                                backgroundColor: 'rgba(75, 192, 192, 0.6)',
                                borderColor: 'rgba(75, 192, 192, 1)',
                                borderWidth: 1,
                                borderRadius: 5,
                                yAxisID: 'y'
                            },
                            {
                                label: 'Out Quantity',
                                data: [],
                                backgroundColor: 'rgba(255, 99, 132, 0.6)',
                                borderColor: 'rgba(255, 99, 132, 1)',
                                borderWidth: 1,
                                borderRadius: 5,
                                yAxisID: 'y'
                            },
                            {
                                label: 'Running Stock',
                                data: [],
                                type: 'line',
                                fill: false,
                                borderColor: 'rgba(54, 162, 235, 1)',
                                backgroundColor: 'rgba(54, 162, 235, 0.2)',
                                tension: 0.3,
                                yAxisID: 'y1',
                                pointRadius: 4,
                                pointHoverRadius: 6,
                                pointBackgroundColor: 'rgba(54, 162, 235, 1)',
                                pointBorderColor: '#fff',
                                pointBorderWidth: 2
                            }
                        ]
                    },
                    options: {
                        responsive: true,
                        maintainAspectRatio: false,
                        interaction: {
                            mode: 'index',
                            intersect: false,
                        },
                        scales: {
                            y: {
                                beginAtZero: true,
                                position: 'left',
                                title: {
                                    display: true,
                                    text: 'Quantity',
                                    font: {
                                        size: 12,
                                        weight: 'bold'
                                    }
                                },
                                grid: {
                                    drawBorder: false,
                                    color: 'rgba(0, 0, 0, 0.05)'
                                }
                            },
                            y1: {
                                beginAtZero: true,
                                position: 'right',
                                title: {
                                    display: true,
                                    text: 'Running Stock',
                                    font: {
                                        size: 12,
                                        weight: 'bold'
                                    }
                                },
                                grid: {
                                    drawOnChartArea: false
                                }
                            },
                            x: {
                                grid: {
                                    drawBorder: false,
                                    color: 'rgba(0, 0, 0, 0.05)'
                                }
                            }
                        },
                        plugins: {
                            tooltip: {
                                backgroundColor: 'rgba(0, 0, 0, 0.8)',
                                titleFont: {
                                    size: 14
                                },
                                bodyFont: {
                                    size: 13
                                },
                                padding: 10,
                                cornerRadius: 4,
                                displayColors: true,
                                callbacks: {
                                    label: function (context) {
                                        var label = context.dataset.label || '';
                                        if (label) {
                                            label += ': ';
                                        }
                                        if (context.parsed.y !== null) {
                                            label += context.parsed.y;
                                        }
                                        return label;
                                    }
                                }
                            },
                            title: {
                                display: true,
                                text: 'Stock Report',
                                font: {
                                    size: 16,
                                    weight: 'bold'
                                },
                                padding: {
                                    top: 10,
                                    bottom: 20
                                }
                            },
                            legend: {
                                position: 'top',
                                align: 'end',
                                labels: {
                                    boxWidth: 15,
                                    padding: 15,
                                    usePointStyle: true,
                                    font: {
                                        size: 12
                                    }
                                }
                            }
                        }
                    }
                });
            }

            function updateChart(data, groupBy, viewType) {
                // Store current data for type switching
                currentChartData.groupBy = groupBy;
                currentChartData.viewType = viewType;

                var labels = [];
                var inData = [];
                var outData = [];
                var stockData = [];
                var chartTitle = 'Stock Report';
                var xTitle = '';

                // Special handling for week_view and month_view
                if (viewType === 'week_view') {
                    // Generate all weeks for the current year
                    var currentYear = moment().year();
                    for (var week = 1; week <= 52; week++) {
                        labels.push('W' + week);
                    }

                    // Initialize arrays with zeros
                    inData = new Array(52).fill(0);
                    outData = new Array(52).fill(0);
                    stockData = new Array(52).fill(0);

                    // Fill with actual data
                    data.forEach(function (item) {
                        var weekNum = parseInt(item.period_label.split('-W')[1]);
                        if (weekNum >= 1 && weekNum <= 52) {
                            inData[weekNum - 1] = item.total_in || 0;
                            outData[weekNum - 1] = item.total_out || 0;
                            stockData[weekNum - 1] = item.current_stock || 0;
                        }
                    });

                    chartTitle = 'Weekly Stock Report - ' + currentYear;
                    xTitle = 'Weeks of ' + currentYear;
                } else if (viewType === 'month_view') {
                    // Generate all months for the current year
                    var currentYear = moment().year();
                    var months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
                    labels = months;

                    // Initialize arrays with zeros
                    inData = new Array(12).fill(0);
                    outData = new Array(12).fill(0);
                    stockData = new Array(12).fill(0);

                    // Fill with actual data
                    data.forEach(function (item) {
                        var monthNum = parseInt(item.period_label.split('-')[1]) - 1; // Adjust for 0-based index
                        if (monthNum >= 0 && monthNum < 12) {
                            inData[monthNum] = item.total_in || 0;
                            outData[monthNum] = item.total_out || 0;
                            stockData[monthNum] = item.current_stock || 0;
                        }
                    });

                    chartTitle = 'Monthly Stock Report - ' + currentYear;
                    xTitle = 'Months of ' + currentYear;
                } else if (viewType === 'year_view') {
                    // Generate labels for the last 3 years
                    var currentYear = moment().year();
                    var years = [];
                    for (var i = 2; i >= 0; i--) {
                        years.push(currentYear - i);
                    }
                    labels = years;

                    // Initialize arrays with zeros
                    inData = new Array(3).fill(0);
                    outData = new Array(3).fill(0);
                    stockData = new Array(3).fill(0);

                    // Fill with actual data
                    data.forEach(function (item) {
                        var yearNum = parseInt(item.period_label);
                        var index = years.indexOf(yearNum);
                        if (index !== -1) {
                            inData[index] = item.total_in || 0;
                            outData[index] = item.total_out || 0;
                            stockData[index] = item.current_stock || 0;
                        }
                    });

                    chartTitle = 'Yearly Stock Report';
                    xTitle = 'Years';
                } else if (viewType === 'week') {
                    // Handle regular week view
                    data.forEach(function (item) {
                        labels.push(item.period_label);
                        inData.push(item.total_in || 0);
                        outData.push(item.total_out || 0);
                        stockData.push(item.current_stock || 0);
                    });

                    chartTitle = 'Weekly Stock Report';
                    xTitle = 'Weeks';
                } else if (viewType === 'month') {
                    // Handle regular month view
                    data.forEach(function (item) {
                        labels.push(item.period_label);
                        inData.push(item.total_in || 0);
                        outData.push(item.total_out || 0);
                        stockData.push(item.current_stock || 0);
                    });

                    chartTitle = 'Monthly Stock Report';
                    xTitle = 'Months';
                } else if (viewType === 'year') {
                    // Handle regular year view
                    data.forEach(function (item) {
                        labels.push(item.period_label);
                        inData.push(item.total_in || 0);
                        outData.push(item.total_out || 0);
                        stockData.push(item.current_stock || 0);
                    });

                    chartTitle = 'Yearly Stock Report';
                    xTitle = 'Years';
                } else if (viewType === 'day') {
                    // Handle day view
                    data.forEach(function (item) {
                        labels.push(item.period_label);
                        inData.push(item.total_in || 0);
                        outData.push(item.total_out || 0);
                        stockData.push(item.current_stock || 0);
                    });

                    chartTitle = 'Daily Stock Report';
                    xTitle = 'Days';
                } else if (viewType === 'quarter') {
                    // Handle quarter view
                    data.forEach(function (item) {
                        labels.push(item.period_label);
                        inData.push(item.total_in || 0);
                        outData.push(item.total_out || 0);
                        stockData.push(item.current_stock || 0);
                    });

                    chartTitle = 'Quarterly Stock Report';
                    xTitle = 'Quarters';
                } else {
                    // Default handling for other views
                    data.forEach(function (item) {
                        if (groupBy === 'product') {
                            labels.push(item.product_name);
                        } else {
                            labels.push(item.period_label);
                        }
                        inData.push(item.total_in || 0);
                        outData.push(item.total_out || 0);
                        stockData.push(item.current_stock || 0);
                    });

                    chartTitle = 'Stock Report';
                }

                // Store data for type switching
                currentChartData.labels = labels;
                currentChartData.inData = inData;
                currentChartData.outData = outData;
                currentChartData.stockData = stockData;

                // Create chart with selected type
                createChartWithType(currentChartType, labels, inData, outData, stockData, chartTitle, xTitle);
            }

            function updateChartWithCurrentData() {
                if (currentChartData.labels.length > 0) {
                    createChartWithType(
                        currentChartType,
                        currentChartData.labels,
                        currentChartData.inData,
                        currentChartData.outData,
                        currentChartData.stockData,
                        getChartTitle(currentChartData.viewType),
                        getXTitle(currentChartData.viewType)
                    );
                }
            }

            function getChartTitle(viewType) {
                if (viewType === 'week_view') {
                    return 'Weekly Stock Report - ' + moment().year();
                } else if (viewType === 'month_view') {
                    return 'Monthly Stock Report - ' + moment().year();
                } else if (viewType === 'year_view') {
                    return 'Yearly Stock Report';
                } else if (viewType === 'week') {
                    return 'Weekly Stock Report';
                } else if (viewType === 'month') {
                    return 'Monthly Stock Report';
                } else if (viewType === 'year') {
                    return 'Yearly Stock Report';
                } else if (viewType === 'day') {
                    return 'Daily Stock Report';
                } else if (viewType === 'quarter') {
                    return 'Quarterly Stock Report';
                } else {
                    return 'Stock Report';
                }
            }

            function getXTitle(viewType) {
                if (viewType === 'week_view') {
                    return 'Weeks of ' + moment().year();
                } else if (viewType === 'month_view') {
                    return 'Months of ' + moment().year();
                } else if (viewType === 'year_view') {
                    return 'Years';
                } else if (viewType === 'week') {
                    return 'Weeks';
                } else if (viewType === 'month') {
                    return 'Months';
                } else if (viewType === 'year') {
                    return 'Years';
                } else if (viewType === 'day') {
                    return 'Days';
                } else if (viewType === 'quarter') {
                    return 'Quarters';
                } else {
                    return '';
                }
            }

            function createChartWithType(chartType, labels, inData, outData, stockData, chartTitle, xTitle) {
                // Properly destroy the existing chart instance
                if (stockChart) {
                    stockChart.destroy();
                    stockChart = null; // Clear the reference
                }

                var ctx = document.getElementById('stock-chart').getContext('2d');

                // Common chart options
                var commonOptions = {
                    responsive: true,
                    maintainAspectRatio: false,
                    interaction: {
                        mode: 'index',
                        intersect: false,
                    },
                    scales: {
                        y: {
                            beginAtZero: true,
                            position: 'left',
                            title: {
                                display: true,
                                text: 'Quantity',
                                font: {
                                    size: 12,
                                    weight: 'bold'
                                }
                            },
                            grid: {
                                drawBorder: false,
                                color: 'rgba(0, 0, 0, 0.05)'
                            }
                        },
                        y1: {
                            beginAtZero: true,
                            position: 'right',
                            title: {
                                display: true,
                                text: 'Running Stock',
                                font: {
                                    size: 12,
                                    weight: 'bold'
                                }
                            },
                            grid: {
                                drawOnChartArea: false
                            }
                        },
                        x: {
                            title: {
                                display: xTitle !== '',
                                text: xTitle,
                                font: {
                                    size: 12,
                                    weight: 'bold'
                                }
                            },
                            grid: {
                                drawBorder: false,
                                color: 'rgba(0, 0, 0, 0.05)'
                            }
                        }
                    },
                    plugins: {
                        tooltip: {
                            backgroundColor: 'rgba(0, 0, 0, 0.8)',
                            titleFont: {
                                size: 14
                            },
                            bodyFont: {
                                size: 13
                            },
                            padding: 10,
                            cornerRadius: 4,
                            displayColors: true,
                            callbacks: {
                                label: function (context) {
                                    var label = context.dataset.label || '';
                                    if (label) {
                                        label += ': ';
                                    }
                                    if (context.parsed.y !== null) {
                                        label += context.parsed.y;
                                    }
                                    return label;
                                }
                            }
                        },
                        title: {
                            display: true,
                            text: chartTitle,
                            font: {
                                size: 16,
                                weight: 'bold'
                            },
                            padding: {
                                top: 10,
                                bottom: 20
                            }
                        },
                        legend: {
                            position: 'top',
                            align: 'end',
                            labels: {
                                boxWidth: 15,
                                padding: 15,
                                usePointStyle: true,
                                font: {
                                    size: 12
                                }
                            }
                        }
                    }
                };

                // Dataset configurations for different chart types
                var datasets = [];

                if (chartType === 'bar') {
                    datasets = [
                        {
                            label: 'In Quantity',
                            data: inData,
                            backgroundColor: 'rgba(75, 192, 192, 0.6)',
                            borderColor: 'rgba(75, 192, 192, 1)',
                            borderWidth: 1,
                            borderRadius: 5,
                            yAxisID: 'y'
                        },
                        {
                            label: 'Out Quantity',
                            data: outData,
                            backgroundColor: 'rgba(255, 99, 132, 0.6)',
                            borderColor: 'rgba(255, 99, 132, 1)',
                            borderWidth: 1,
                            borderRadius: 5,
                            yAxisID: 'y'
                        },
                        {
                            label: 'Running Stock',
                            data: stockData,
                            type: 'line',
                            fill: false,
                            borderColor: 'rgba(54, 162, 235, 1)',
                            backgroundColor: 'rgba(54, 162, 235, 0.2)',
                            tension: 0.3,
                            yAxisID: 'y1',
                            pointRadius: 4,
                            pointHoverRadius: 6,
                            pointBackgroundColor: 'rgba(54, 162, 235, 1)',
                            pointBorderColor: '#fff',
                            pointBorderWidth: 2
                        }
                    ];
                } else if (chartType === 'line') {
                    datasets = [
                        {
                            label: 'In Quantity',
                            data: inData,
                            borderColor: 'rgba(75, 192, 192, 1)',
                            backgroundColor: 'rgba(75, 192, 192, 0.2)',
                            borderWidth: 2,
                            fill: false,
                            tension: 0.3,
                            yAxisID: 'y',
                            pointRadius: 4,
                            pointHoverRadius: 6
                        },
                        {
                            label: 'Out Quantity',
                            data: outData,
                            borderColor: 'rgba(255, 99, 132, 1)',
                            backgroundColor: 'rgba(255, 99, 132, 0.2)',
                            borderWidth: 2,
                            fill: false,
                            tension: 0.3,
                            yAxisID: 'y',
                            pointRadius: 4,
                            pointHoverRadius: 6
                        },
                        {
                            label: 'Running Stock',
                            data: stockData,
                            borderColor: 'rgba(54, 162, 235, 1)',
                            backgroundColor: 'rgba(54, 162, 235, 0.2)',
                            borderWidth: 2,
                            fill: false,
                            tension: 0.3,
                            yAxisID: 'y1',
                            pointRadius: 4,
                            pointHoverRadius: 6,
                            pointBackgroundColor: 'rgba(54, 162, 235, 1)',
                            pointBorderColor: '#fff',
                            pointBorderWidth: 2
                        }
                    ];
                } else if (chartType === 'area') {
                    datasets = [
                        {
                            label: 'In Quantity',
                            data: inData,
                            borderColor: 'rgba(75, 192, 192, 1)',
                            backgroundColor: 'rgba(75, 192, 192, 0.3)',
                            borderWidth: 2,
                            fill: true,
                            tension: 0.3,
                            yAxisID: 'y'
                        },
                        {
                            label: 'Out Quantity',
                            data: outData,
                            borderColor: 'rgba(255, 99, 132, 1)',
                            backgroundColor: 'rgba(255, 99, 132, 0.3)',
                            borderWidth: 2,
                            fill: true,
                            tension: 0.3,
                            yAxisID: 'y'
                        },
                        {
                            label: 'Running Stock',
                            data: stockData,
                            borderColor: 'rgba(54, 162, 235, 1)',
                            backgroundColor: 'rgba(54, 162, 235, 0.3)',
                            borderWidth: 2,
                            fill: true,
                            tension: 0.3,
                            yAxisID: 'y1',
                            pointRadius: 4,
                            pointHoverRadius: 6,
                            pointBackgroundColor: 'rgba(54, 162, 235, 1)',
                            pointBorderColor: '#fff',
                            pointBorderWidth: 2
                        }
                    ];
                } else if (chartType === 'mixed') {
                    datasets = [
                        {
                            label: 'In Quantity',
                            data: inData,
                            type: 'bar',
                            backgroundColor: 'rgba(75, 192, 192, 0.6)',
                            borderColor: 'rgba(75, 192, 192, 1)',
                            borderWidth: 1,
                            borderRadius: 5,
                            yAxisID: 'y'
                        },
                        {
                            label: 'Out Quantity',
                            data: outData,
                            type: 'line',
                            borderColor: 'rgba(255, 99, 132, 1)',
                            backgroundColor: 'rgba(255, 99, 132, 0.2)',
                            borderWidth: 2,
                            fill: false,
                            tension: 0.3,
                            yAxisID: 'y',
                            pointRadius: 4,
                            pointHoverRadius: 6
                        },
                        {
                            label: 'Running Stock',
                            data: stockData,
                            type: 'line',
                            borderColor: 'rgba(54, 162, 235, 1)',
                            backgroundColor: 'rgba(54, 162, 235, 0.2)',
                            borderWidth: 2,
                            fill: false,
                            tension: 0.3,
                            yAxisID: 'y1',
                            pointRadius: 4,
                            pointHoverRadius: 6,
                            pointBackgroundColor: 'rgba(54, 162, 235, 1)',
                            pointBorderColor: '#fff',
                            pointBorderWidth: 2
                        }
                    ];
                } else if (chartType === 'radar') {
                    // For radar chart, we need different scales
                    commonOptions.scales = {
                        r: {
                            beginAtZero: true,
                            angleLines: {
                                display: true
                            },
                            suggestedMin: 0
                        }
                    };

                    datasets = [
                        {
                            label: 'In Quantity',
                            data: inData,
                            borderColor: 'rgba(75, 192, 192, 1)',
                            backgroundColor: 'rgba(75, 192, 192, 0.2)',
                            borderWidth: 2,
                            pointBackgroundColor: 'rgba(75, 192, 192, 1)',
                            pointBorderColor: '#fff',
                            pointHoverBackgroundColor: '#fff',
                            pointHoverBorderColor: 'rgba(75, 192, 192, 1)'
                        },
                        {
                            label: 'Out Quantity',
                            data: outData,
                            borderColor: 'rgba(255, 99, 132, 1)',
                            backgroundColor: 'rgba(255, 99, 132, 0.2)',
                            borderWidth: 2,
                            pointBackgroundColor: 'rgba(255, 99, 132, 1)',
                            pointBorderColor: '#fff',
                            pointHoverBackgroundColor: '#fff',
                            pointHoverBorderColor: 'rgba(255, 99, 132, 1)'
                        },
                        {
                            label: 'Running Stock',
                            data: stockData,
                            borderColor: 'rgba(54, 162, 235, 1)',
                            backgroundColor: 'rgba(54, 162, 235, 0.2)',
                            borderWidth: 2,
                            pointBackgroundColor: 'rgba(54, 162, 235, 1)',
                            pointBorderColor: '#fff',
                            pointHoverBackgroundColor: '#fff',
                            pointHoverBorderColor: 'rgba(54, 162, 235, 1)'
                        }
                    ];
                }

                // Fix for "area" chart type - use "line" with fill: true
                var actualChartType = chartType;
                if (chartType === 'area') {
                    actualChartType = 'line';
                }

                try {
                    stockChart = new Chart(ctx, {
                        type: chartType === 'radar' ? 'radar' : actualChartType,
                        data: {
                            labels: labels,
                            datasets: datasets
                        },
                        options: commonOptions
                    });
                } catch (error) {
                    console.error('Error creating chart:', error);
                }
            }

            function formatProductSelection(product) {
                return product.text || product.name;
            }

            function formatProduct(product) {
                if (!product.product) return product.text;
                let p = product.product;
                let image = p.image_url ? p.image_url : '/images/no-image.png';

                return $(`
                    <div class="d-flex align-items-center">
                    <img src="${image}" width="40" height="40" class="me-2 rounded"/>
                    <div>
                    <div><strong>${p.name}</strong></div>
                    <small>SKU: ${p.sku || '-'}</small>
                    </div>
                    </div>
                    `);
            }
            $(document).on('click', '.summary-card.clickable', function (e) {
                // Prevent any default action if necessary
                e.preventDefault();

                // Remove active class from all cards
                $('.summary-card.clickable').removeClass('active');

                // Add active class to the clicked card
                $(this).addClass('active');

                // Get the status from the data-status attribute of the clicked card
                var status = $(this).data('status');

                // Set the hidden input and reload the data
                $('#repost_status').val(status);
                updateData();
                refreshData();
            });
        });
    </script>
@endpush