@extends('layouts.app')
@section('title', __('offerandpromotion::lang.promotions') . ' - ' . __('offerandpromotion::lang.dashboard'))

@section('content')

<!-- Content Header (Page header) -->
<section class="content-header" style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); padding: 30px 20px; margin: -20px -15px 30px -15px; border-radius: 0;">
    <div class="container-fluid">
        <div class="row align-items-center">
            <div class="col-md-12 text-center">
                <h1 style="color: #fff; font-size: 32px; font-weight: 700; margin: 0; display: flex; align-items: center; justify-content: center; gap: 15px;">
                    <i class="fa fa-robot" style="font-size: 36px;"></i>
                    {{ __('offerandpromotion::lang.ai_powered_promotion_analytics') }}
                </h1>
                <p style="color: rgba(255,255,255,0.9); font-size: 16px; margin: 10px 0 0 0;">
                    {{ __('offerandpromotion::lang.smart_insights_on_who_used_promotions') }}
                </p>
            </div>
        </div>
    </div>
</section>

<!-- Main content -->
<section class="content">
    <div class="container-fluid">
        <!-- Smart Filters -->
        @component('components.widget', ['class' => 'box-primary'])
            <div class="row">
                <div class="col-md-2 col-xs-12">
                    <div class="form-group">
                        <label>{{ __('offerandpromotion::lang.quick_presets') }}:</label>
                        <select class="form-control" id="date_preset">
                            <option value="custom">{{ __('offerandpromotion::lang.custom_range') }}</option>
                            <option value="today">{{ __('offerandpromotion::lang.today') }}</option>
                            <option value="yesterday">{{ __('offerandpromotion::lang.yesterday') }}</option>
                            <option value="last7">{{ __('offerandpromotion::lang.last_7_days') }}</option>
                            <option value="last30" selected>{{ __('offerandpromotion::lang.last_30_days') }}</option>
                            <option value="this_month">{{ __('offerandpromotion::lang.this_month') }}</option>
                            <option value="last_month">{{ __('offerandpromotion::lang.last_month') }}</option>
                            <option value="this_year">{{ __('offerandpromotion::lang.this_year') }}</option>
                        </select>
                    </div>
                </div>
                <div class="col-md-3 col-xs-12">
                    <div class="form-group">
                        {!! Form::label('start_date', __('offerandpromotion::lang.start_date') . ':') !!}
                        {!! Form::text('start_date', @format_date($start_date), ['class' => 'form-control date-picker', 'readonly', 'id' => 'start_date']) !!}
                    </div>
                </div>
                <div class="col-md-3 col-xs-12">
                    <div class="form-group">
                        {!! Form::label('end_date', __('offerandpromotion::lang.end_date') . ':') !!}
                        {!! Form::text('end_date', @format_date($end_date), ['class' => 'form-control date-picker', 'readonly', 'id' => 'end_date']) !!}
                    </div>
                </div>
                <div class="col-md-2 col-xs-12">
                    <div class="form-group">
                        {!! Form::label('location_id', __('offerandpromotion::lang.location') . ':') !!}
                        {!! Form::select('location_id', $locations ?? [], $location_id, ['class' => 'form-control select2', 'placeholder' => __('offerandpromotion::lang.all'), 'style' => 'width:100%', 'id' => 'location_filter']) !!}
                    </div>
                </div>
                <div class="col-md-2 col-xs-12">
                    <div class="form-group">
                        <label>&nbsp;</label><br>
                        <button type="button" class="btn btn-primary btn-block" id="filter_btn">
                            <i class="fa fa-sync-alt"></i> <span id="filter_text">{{ __('offerandpromotion::lang.apply_filter') }}</span>
                        </button>
                        <a href="{{ route('promotions.index') }}?type=product_discount" class="btn btn-default btn-block" style="margin-top: 5px;">
                            <i class="fa fa-arrow-left"></i> {{ __('offerandpromotion::lang.back') }}
                        </a>
                    </div>
                </div>
            </div>
        @endcomponent

        <!-- AI Insights Section -->
        <div class="row" id="insights_section">
            @if(!empty($insights) && count($insights) > 0)
                @foreach($insights as $insight)
                <div class="col-md-6">
                    <div class="box box-{{ $insight['type'] }} box-solid">
                        <div class="box-header with-border">
                            <h3 class="box-title">
                                <i class="fa {{ $insight['icon'] }}"></i> {{ $insight['title'] }}
                            </h3>
                            <div class="box-tools pull-right">
                                <span class="label label-{{ $insight['type'] }}">{{ __('offerandpromotion::lang.ai_insight') }}</span>
                            </div>
                        </div>
                        <div class="box-body">
                            <p style="font-size: 14px; margin-bottom: 10px;">{{ $insight['message'] }}</p>
                            <div class="alert alert-{{ $insight['type'] }} alert-dismissible" style="margin-bottom: 0;">
                                <i class="fa fa-lightbulb-o"></i> <strong>{{ __('offerandpromotion::lang.recommendation') }}:</strong> {{ $insight['recommendation'] }}
                            </div>
                        </div>
                    </div>
                </div>
                @endforeach
            @endif
        </div>

        <!-- Loading Indicator -->
        <div id="loading_indicator" style="display: none; text-align: center; padding: 20px;">
            <i class="fa fa-spinner fa-spin fa-3x"></i>
            <p>{{ __('offerandpromotion::lang.loading_analytics') }}</p>
        </div>

        <!-- KPI Cards -->
        <div class="row" id="kpi_cards">
            <div class="col-md-3 col-sm-6">
                <div class="info-box bg-green">
                    <span class="info-box-icon"><i class="fa fa-tags"></i></span>
                    <div class="info-box-content">
                        <span class="info-box-text">{{ __('offerandpromotion::lang.total_promotions_used') }}</span>
                        <span class="info-box-number" id="kpi_promotions">{{ $analytics['total_promotions_used'] }}</span>
                        <span class="info-box-text">{{ __('offerandpromotion::lang.different_promotions') }}</span>
                    </div>
                </div>
            </div>
            <div class="col-md-3 col-sm-6">
                <div class="info-box bg-blue">
                    <span class="info-box-icon"><i class="fa fa-cubes"></i></span>
                    <div class="info-box-content">
                        <span class="info-box-text">{{ __('offerandpromotion::lang.total_quantity_sold') }}</span>
                        <span class="info-box-number" id="kpi_quantity">{{ number_format($analytics['total_quantity'], 0) }}</span>
                        <span class="info-box-text">{{ __('offerandpromotion::lang.pieces_with_promotions') }}</span>
                    </div>
                </div>
            </div>
            <div class="col-md-3 col-sm-6">
                <div class="info-box bg-yellow">
                    <span class="info-box-icon"><i class="fa fa-money-bill-wave"></i></span>
                    <div class="info-box-content">
                        <span class="info-box-text">{{ __('offerandpromotion::lang.total_discount_given') }}</span>
                        <span class="info-box-number" id="kpi_discount">@format_currency($analytics['total_discount_given'])</span>
                        <span class="info-box-text">{{ __('offerandpromotion::lang.customer_savings') }}</span>
                    </div>
                </div>
            </div>
            <div class="col-md-3 col-sm-6">
                <div class="info-box bg-aqua">
                    <span class="info-box-icon"><i class="fa fa-users"></i></span>
                    <div class="info-box-content">
                        <span class="info-box-text">{{ __('offerandpromotion::lang.total_customers') }}</span>
                        <span class="info-box-number" id="kpi_customers">{{ $analytics['total_customers'] }}</span>
                        <span class="info-box-text">{{ __('offerandpromotion::lang.used_promotions') }}</span>
                    </div>
                </div>
            </div>
        </div>

        <div class="row" id="kpi_cards_2">
            <div class="col-md-3 col-sm-6">
                <div class="small-box bg-green">
                    <div class="inner">
                        <h3 id="kpi_invoices">{{ $analytics['total_invoices'] }}</h3>
                        <p>{{ __('offerandpromotion::lang.total_invoices_with_promotions') }}</p>
                    </div>
                    <div class="icon"><i class="fa fa-file-invoice"></i></div>
                </div>
            </div>
            <div class="col-md-3 col-sm-6">
                <div class="small-box bg-blue">
                    <div class="inner">
                        <h3 id="kpi_avg_customers">{{ $analytics['total_invoices'] > 0 ? number_format(($analytics['total_customers'] / $analytics['total_invoices']) * 100, 1) : 0 }}%</h3>
                        <p>{{ __('offerandpromotion::lang.average_customers_per_invoice') }}</p>
                    </div>
                    <div class="icon"><i class="fa fa-chart-pie"></i></div>
                </div>
            </div>
            <div class="col-md-3 col-sm-6">
                <div class="small-box bg-yellow">
                    <div class="inner">
                        <h3 id="kpi_avg_quantity">{{ $analytics['total_quantity'] > 0 ? number_format($analytics['total_quantity'] / max($analytics['total_invoices'], 1), 2) : 0 }}</h3>
                        <p>{{ __('offerandpromotion::lang.avg_quantity_per_invoice') }}</p>
                    </div>
                    <div class="icon"><i class="fa fa-calculator"></i></div>
                </div>
            </div>
            <div class="col-md-3 col-sm-6">
                <div class="small-box bg-red">
                    <div class="inner">
                        <h3 id="kpi_avg_discount">@format_currency($analytics['total_invoices'] > 0 ? ($analytics['total_discount_given'] / $analytics['total_invoices']) : 0)</h3>
                        <p>{{ __('offerandpromotion::lang.avg_discount_per_invoice') }}</p>
                    </div>
                    <div class="icon"><i class="fa fa-percent"></i></div>
                </div>
            </div>
        </div>

        <!-- Charts and Tables Row -->
        <div class="row">
            <!-- Daily Usage Chart -->
            <div class="col-md-8">
                <div class="box box-primary">
                    <div class="box-header with-border">
                        <h3 class="box-title"><i class="fa fa-line-chart"></i> {{ __('offerandpromotion::lang.daily_promotion_usage_trend') }}</h3>
                        <div class="box-tools pull-right">
                            <button type="button" class="btn btn-sm btn-default" id="chart_toggle">
                                <i class="fa fa-expand"></i>
                            </button>
                        </div>
                    </div>
                    <div class="box-body">
                        <canvas id="dailyUsageChart" height="100"></canvas>
                    </div>
                </div>
            </div>

            <!-- Top Promotions -->
            <div class="col-md-4">
                <div class="box box-info">
                    <div class="box-header with-border">
                        <h3 class="box-title"><i class="fa fa-trophy"></i> {{ __('offerandpromotion::lang.top_10_promotions') }}</h3>
                    </div>
                    <div class="box-body">
                        <div class="table-responsive" style="max-height: 400px; overflow-y: auto;">
                            <table class="table table-bordered table-striped" id="top_promotions_table">
                                <thead>
                                    <tr>
                                        <th>{{ __('offerandpromotion::lang.promotion') }}</th>
                                        <th>{{ __('offerandpromotion::lang.quantity') }}</th>
                                        <th>{{ __('offerandpromotion::lang.customers') }}</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @forelse($analytics['top_promotions'] as $promo)
                                    <tr>
                                        <td>
                                            <strong>{{ $promo->promotion_name ?: $promo->product_name }}</strong><br>
                                            <small class="text-muted">{{ $promo->discount_percentage }}% off</small>
                                        </td>
                                        <td class="text-right">{{ number_format($promo->total_quantity, 0) }}</td>
                                        <td class="text-right">{{ $promo->customer_count }}</td>
                                    </tr>
                                    @empty
                                    <tr>
                                        <td colspan="3" class="text-center text-muted">{{ __('offerandpromotion::lang.no_promotions_used_in_period') }}</td>
                                    </tr>
                                    @endforelse
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Top Customers Table -->
        <div class="row">
            <div class="col-md-12">
                <div class="box box-success">
                    <div class="box-header with-border">
                        <h3 class="box-title"><i class="fa fa-users"></i> {{ __('offerandpromotion::lang.top_customers_using_promotions') }}</h3>
                    </div>
                    <div class="box-body">
                        <div class="table-responsive">
                            <table class="table table-bordered table-striped" id="top_customers_table">
                                <thead>
                                    <tr>
                                        <th>#</th>
                                        <th>{{ __('offerandpromotion::lang.customer_name') }}</th>
                                        <th>{{ __('offerandpromotion::lang.invoices') }}</th>
                                        <th>{{ __('offerandpromotion::lang.total_quantity') }}</th>
                                        <th>{{ __('offerandpromotion::lang.total_discount') }}</th>
                                        <th>{{ __('offerandpromotion::lang.avg_discount_per_invoice_label') }}</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @forelse($analytics['top_customers'] as $index => $customer)
                                    <tr>
                                        <td>{{ $index + 1 }}</td>
                                        <td>
                                            <strong>{{ $customer->customer_name }}</strong>
                                            @if($customer->supplier_business_name)
                                                <br><small class="text-muted">{{ $customer->supplier_business_name }}</small>
                                            @endif
                                        </td>
                                        <td class="text-center">{{ $customer->invoice_count }}</td>
                                        <td class="text-right">{{ number_format($customer->total_quantity, 0) }}</td>
                                        <td class="text-right">@format_currency($customer->total_discount)</td>
                                        <td class="text-right">@format_currency($customer->invoice_count > 0 ? ($customer->total_discount / $customer->invoice_count) : 0)</td>
                                    </tr>
                                    @empty
                                    <tr>
                                        <td colspan="6" class="text-center text-muted">{{ __('offerandpromotion::lang.no_customers_used_promotions') }}</td>
                                    </tr>
                                    @endforelse
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

@endsection

@section('javascript')
<script src="https://cdn.jsdelivr.net/npm/chart.js@3.9.1/dist/chart.min.js"></script>
<script type="text/javascript">
    var dailyUsageChart = null;
    var currencySymbol = '{{ session("business.currency_symbol") ?? "$" }}';
    
    $(document).ready(function(){
        // Initialize date pickers
        $('.date-picker').datepicker({
            autoclose: true,
            format: datepicker_date_format
        });

        $('.select2').select2();

        // Date preset handler
        $('#date_preset').on('change', function(){
            var preset = $(this).val();
            var startDate, endDate;
            var today = new Date();
            
            switch(preset) {
                case 'today':
                    startDate = endDate = today;
                    break;
                case 'yesterday':
                    var yesterday = new Date(today);
                    yesterday.setDate(yesterday.getDate() - 1);
                    startDate = endDate = yesterday;
                    break;
                case 'last7':
                    startDate = new Date(today);
                    startDate.setDate(startDate.getDate() - 7);
                    endDate = today;
                    break;
                case 'last30':
                    startDate = new Date(today);
                    startDate.setDate(startDate.getDate() - 30);
                    endDate = today;
                    break;
                case 'this_month':
                    startDate = new Date(today.getFullYear(), today.getMonth(), 1);
                    endDate = today;
                    break;
                case 'last_month':
                    startDate = new Date(today.getFullYear(), today.getMonth() - 1, 1);
                    endDate = new Date(today.getFullYear(), today.getMonth(), 0);
                    break;
                case 'this_year':
                    startDate = new Date(today.getFullYear(), 0, 1);
                    endDate = today;
                    break;
                default:
                    return; // Custom range, don't change dates
            }
            
            if (startDate && endDate) {
                $('#start_date').datepicker('setDate', startDate);
                $('#end_date').datepicker('setDate', endDate);
            }
        });

        // Auto-filter on change (debounced)
        var filterTimeout;
        $('#start_date, #end_date, #location_filter').on('change', function(){
            clearTimeout(filterTimeout);
            filterTimeout = setTimeout(function(){
                loadDashboardData();
            }, 500);
        });

        // Filter button
        $('#filter_btn').on('click', function(){
            loadDashboardData();
        });

        // Initialize chart
        initializeChart();

        // Load dashboard data function
        function loadDashboardData() {
            var start_date = $('#start_date').val();
            var end_date = $('#end_date').val();
            var location_id = $('#location_filter').val();
            
            // Show loading
            $('#loading_indicator').show();
            $('#kpi_cards, #kpi_cards_2, #insights_section').fadeOut(300);
            $('#filter_btn').prop('disabled', true);
            $('#filter_text').html('<i class="fa fa-spinner fa-spin"></i> {{ __('offerandpromotion::lang.loading') }}');
            
            $.ajax({
                url: '{{ route("promotions.dashboard.data") }}',
                type: 'GET',
                data: {
                    start_date: start_date,
                    end_date: end_date,
                    location_id: location_id
                },
                success: function(response) {
                    if (response.success) {
                        updateDashboard(response.analytics, response.insights);
                    } else {
                        toastr.error(response.msg || '{{ __('offerandpromotion::lang.error_loading_data') }}');
                    }
                },
                error: function(xhr) {
                    console.error('Error:', xhr);
                    toastr.error('{{ __('offerandpromotion::lang.error_loading_dashboard_data') }}');
                },
                complete: function() {
                    $('#loading_indicator').hide();
                    $('#kpi_cards, #kpi_cards_2, #insights_section').fadeIn(300);
                    $('#filter_btn').prop('disabled', false);
                    $('#filter_text').html('{{ __('offerandpromotion::lang.apply_filter') }}');
                }
            });
        }

        // Update dashboard with new data
        function updateDashboard(analytics, insights) {
            // Update KPIs
            $('#kpi_promotions').text(analytics.total_promotions_used || 0);
            $('#kpi_quantity').text(formatNumber(analytics.total_quantity || 0));
            $('#kpi_discount').text(formatCurrency(analytics.total_discount_given || 0));
            $('#kpi_customers').text(analytics.total_customers || 0);
            $('#kpi_invoices').text(analytics.total_invoices || 0);
            
            var avgCustomers = analytics.total_invoices > 0 ? ((analytics.total_customers / analytics.total_invoices) * 100).toFixed(1) : 0;
            $('#kpi_avg_customers').text(avgCustomers + '%');
            
            var avgQuantity = analytics.total_quantity > 0 ? (analytics.total_quantity / Math.max(analytics.total_invoices, 1)).toFixed(2) : 0;
            $('#kpi_avg_quantity').text(avgQuantity);
            
            var avgDiscount = analytics.total_invoices > 0 ? (analytics.total_discount_given / analytics.total_invoices) : 0;
            $('#kpi_avg_discount').text(formatCurrency(avgDiscount));

            // Update insights
            var insightsHtml = '';
            if (insights && insights.length > 0) {
                insights.forEach(function(insight) {
                    insightsHtml += '<div class="col-md-6">';
                    insightsHtml += '<div class="box box-' + insight.type + ' box-solid">';
                    insightsHtml += '<div class="box-header with-border">';
                    insightsHtml += '<h3 class="box-title"><i class="fa ' + insight.icon + '"></i> ' + insight.title + '</h3>';
                    insightsHtml += '<div class="box-tools pull-right"><span class="label label-' + insight.type + '">{{ __('offerandpromotion::lang.ai_insight') }}</span></div>';
                    insightsHtml += '</div>';
                    insightsHtml += '<div class="box-body">';
                    insightsHtml += '<p style="font-size: 14px; margin-bottom: 10px;">' + insight.message + '</p>';
                    insightsHtml += '<div class="alert alert-' + insight.type + ' alert-dismissible" style="margin-bottom: 0;">';
                    insightsHtml += '<i class="fa fa-lightbulb-o"></i> <strong>{{ __('offerandpromotion::lang.recommendation') }}:</strong> ' + insight.recommendation;
                    insightsHtml += '</div>';
                    insightsHtml += '</div>';
                    insightsHtml += '</div>';
                    insightsHtml += '</div>';
                });
            }
            $('#insights_section').html(insightsHtml);

            // Update top promotions table
            var promotionsHtml = '';
            if (analytics.top_promotions && analytics.top_promotions.length > 0) {
                analytics.top_promotions.forEach(function(promo) {
                    promotionsHtml += '<tr>';
                    promotionsHtml += '<td><strong>' + (promo.promotion_name || promo.product_name) + '</strong><br>';
                    promotionsHtml += '<small class="text-muted">' + promo.discount_percentage + '% off</small></td>';
                    promotionsHtml += '<td class="text-right">' + formatNumber(promo.total_quantity) + '</td>';
                    promotionsHtml += '<td class="text-right">' + promo.customer_count + '</td>';
                    promotionsHtml += '</tr>';
                });
            } else {
                promotionsHtml = '<tr><td colspan="3" class="text-center text-muted">{{ __('offerandpromotion::lang.no_promotions_used_in_period') }}</td></tr>';
            }
            $('#top_promotions_table tbody').html(promotionsHtml);

            // Update top customers table
            var customersHtml = '';
            if (analytics.top_customers && analytics.top_customers.length > 0) {
                analytics.top_customers.forEach(function(customer, index) {
                    customersHtml += '<tr>';
                    customersHtml += '<td>' + (index + 1) + '</td>';
                    customersHtml += '<td><strong>' + customer.customer_name + '</strong>';
                    if (customer.supplier_business_name) {
                        customersHtml += '<br><small class="text-muted">' + customer.supplier_business_name + '</small>';
                    }
                    customersHtml += '</td>';
                    customersHtml += '<td class="text-center">' + customer.invoice_count + '</td>';
                    customersHtml += '<td class="text-right">' + formatNumber(customer.total_quantity) + '</td>';
                    customersHtml += '<td class="text-right">' + formatCurrency(customer.total_discount) + '</td>';
                    var avgDisc = customer.invoice_count > 0 ? (customer.total_discount / customer.invoice_count) : 0;
                    customersHtml += '<td class="text-right">' + formatCurrency(avgDisc) + '</td>';
                    customersHtml += '</tr>';
                });
            } else {
                customersHtml = '<tr><td colspan="6" class="text-center text-muted">{{ __('offerandpromotion::lang.no_customers_used_promotions') }}</td></tr>';
            }
            $('#top_customers_table tbody').html(customersHtml);

            // Update chart
            updateChart(analytics.daily_usage || []);
        }

        // Initialize chart
        function initializeChart() {
            var ctx = document.getElementById('dailyUsageChart');
            if (!ctx) return;
            
            dailyUsageChart = new Chart(ctx.getContext('2d'), {
                type: 'line',
                data: {
                    labels: [],
                    datasets: []
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: true,
                    interaction: {
                        mode: 'index',
                        intersect: false,
                    },
                    scales: {
                        y: {
                            type: 'linear',
                            display: true,
                            position: 'left',
                            title: {
                                display: true,
                                text: 'Invoices'
                            }
                        },
                        y1: {
                            type: 'linear',
                            display: true,
                            position: 'right',
                            title: {
                                display: true,
                                text: 'Quantity'
                            },
                            grid: {
                                drawOnChartArea: false,
                            },
                        }
                    },
                    plugins: {
                        legend: {
                            display: true,
                            position: 'top',
                        },
                        tooltip: {
                            callbacks: {
                                label: function(context) {
                                    var label = context.dataset.label || '';
                                    if (label) {
                                        label += ': ';
                                    }
                                    if (context.dataset.label === 'Discount Amount') {
                                        label += formatCurrency(context.parsed.y);
                                    } else {
                                        label += context.parsed.y;
                                    }
                                    return label;
                                }
                            }
                        }
                    }
                }
            });
        }

        // Update chart with new data
        function updateChart(dailyUsage) {
            if (!dailyUsageChart) return;
            
            var labels = dailyUsage.map(function(item) { return item.usage_date; });
            var invoiceData = dailyUsage.map(function(item) { return item.invoice_count; });
            var quantityData = dailyUsage.map(function(item) { return parseFloat(item.total_quantity || 0); });
            var discountData = dailyUsage.map(function(item) { return parseFloat(item.total_discount || 0); });

            dailyUsageChart.data.labels = labels;
            dailyUsageChart.data.datasets = [
                {
                    label: 'Invoices',
                    data: invoiceData,
                    borderColor: 'rgb(75, 192, 192)',
                    backgroundColor: 'rgba(75, 192, 192, 0.2)',
                    yAxisID: 'y',
                    tension: 0.4
                },
                {
                    label: 'Quantity',
                    data: quantityData,
                    borderColor: 'rgb(255, 99, 132)',
                    backgroundColor: 'rgba(255, 99, 132, 0.2)',
                    yAxisID: 'y1',
                    tension: 0.4
                },
                {
                    label: 'Discount Amount',
                    data: discountData,
                    borderColor: 'rgb(54, 162, 235)',
                    backgroundColor: 'rgba(54, 162, 235, 0.2)',
                    yAxisID: 'y',
                    tension: 0.4,
                    hidden: true
                }
            ];
            dailyUsageChart.update();
        }

        // Helper functions
        function formatNumber(num) {
            return parseFloat(num).toLocaleString('en-US', {maximumFractionDigits: 0});
        }

        function formatCurrency(amount) {
            return currencySymbol + parseFloat(amount).toLocaleString('en-US', {minimumFractionDigits: 2, maximumFractionDigits: 2});
        }

        // Initialize with current data
        var initialData = @json($analytics['daily_usage']);
        updateChart(initialData);
    });
</script>
@endsection