@extends('layouts.app')
@section('title', 'Dashboard')
@push('styles')
<style>
.flatpickr-input[readonly] {
    text-align: center;
    cursor: pointer;
    width: 25%;
}
</style>
@endpush
@section('content')
{{-- Hero Welcome + Banner Row --}}
<div class="flex flex-col lg:flex-row gap-4 mb-4 w-full">
    <div class="relative overflow-hidden rounded-2xl bg-gradient-to-br from-navy via-primary-800 to-primary-700 p-6 lg:p-8 text-white animate-fade-in w-full lg:w-[80%]">
        <div class="absolute top-0 right-0 w-64 h-64 bg-white/5 rounded-full -translate-y-1/2 translate-x-1/2"></div>
        <div class="absolute bottom-0 left-1/3 w-48 h-48 bg-accent-500/10 rounded-full translate-y-1/2"></div>
        <div class="relative z-10">
            <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
                <div>
                    <h1 class="text-2xl lg:text-3xl font-bold tracking-tight">{{ __('Good ' . (now()->hour < 12 ? 'Morning' : (now()->hour < 17 ? 'Afternoon' : 'Evening')) . ', ' . Auth::user()->name) }}</h1>
                    <p class="text-indigo-200 mt-1 text-sm lg:text-base">Stay Organized, Stay Profitable. Running a business isn’t easy-we make it simpler. From inventory to invoices, everything works.</p>
                </div>
                <a href="{{ route('invoices.create') }}" class="inline-flex items-center gap-2 px-5 py-2.5 bg-white text-primary-700 font-semibold rounded-xl hover:bg-indigo-50 transition-all shadow-lg shadow-black/20 whitespace-nowrap">
                    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"/></svg>
                    Create Invoice
                </a>
            </div>
            <div class="flex items-center gap-2 mt-4 pt-4 border-t border-white/10">
                <input type="text" id="dateRangePicker" class="form-input h-9 text-sm bg-white/10 border-white/20 text-white placeholder:text-white/50 w-52 rounded-xl" placeholder="Select date range...">
                <button type="button" id="clearFilterBtn" class="px-3 py-2 bg-white/10 hover:bg-white/20 text-white text-sm font-medium rounded-xl transition-all">Clear</button>
            </div>
        </div>
    </div>
    @if(optional($globalBanner)->banner)
    <div class="lg:w-[20%]">
        <div class="bg-white dark:bg-dark-card rounded-2xl border border-gray-100 dark:border-dark-border overflow-hidden h-full animate-fade-in">
            <img src="{{ $globalBanner->banner_url }}" alt="Banner" class="w-full h-full object-cover" style="max-height: 300px">
        </div>
    </div>
    @endif
</div>

{{-- License Status Banner --}}
@if($account)
    @php
        $days = $account->daysRemaining();
        $warningLevel = $days <= 7 ? 'danger' : ($days <= 15 ? 'warning' : ($days <= 30 ? 'info' : null));
    @endphp
    @if($warningLevel)
    <div class="mb-6 animate-fade-in">
        <div class="rounded-2xl border p-4 {{ $warningLevel === 'danger' ? 'bg-red-50 border-red-200 dark:bg-red-500/10 dark:border-red-500/20' : ($warningLevel === 'warning' ? 'bg-amber-50 border-amber-200 dark:bg-amber-500/10 dark:border-amber-500/20' : 'bg-blue-50 border-blue-200 dark:bg-blue-500/10 dark:border-blue-500/20') }}">
            <div class="flex items-start gap-3">
                <div class="w-10 h-10 rounded-full flex items-center justify-center flex-shrink-0
                    {{ $warningLevel === 'danger' ? 'bg-red-100 dark:bg-red-500/20 text-red-600' : ($warningLevel === 'warning' ? 'bg-amber-100 dark:bg-amber-500/20 text-amber-600' : 'bg-blue-100 dark:bg-blue-500/20 text-blue-600') }}">
                    <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
                </div>
                <div class="flex-1">
                    <p class="text-sm font-semibold {{ $warningLevel === 'danger' ? 'text-red-800 dark:text-red-300' : ($warningLevel === 'warning' ? 'text-amber-800 dark:text-amber-300' : 'text-blue-800 dark:text-blue-300') }}">
                        License {{ $warningLevel === 'danger' ? 'Expiring Soon' : ($warningLevel === 'warning' ? 'Expiring Soon' : 'Renewal Reminder') }}
                    </p>
                    <p class="text-sm mt-0.5 {{ $warningLevel === 'danger' ? 'text-red-700 dark:text-red-400' : ($warningLevel === 'warning' ? 'text-amber-700 dark:text-amber-400' : 'text-blue-700 dark:text-blue-400') }}">
                        Your {{ $account->license_plan }} plan license expires in <strong>{{ $days }} days</strong> ({{ $account->expiry_date->format('d M Y') }}).
                        @if($warningLevel === 'danger')
                            <span class="font-medium">Please renew immediately to avoid service interruption.</span>
                        @endif
                    </p>
                </div>
            </div>
        </div>
    </div>
    @endif
@endif

{{-- Top Stats Row --}}
<div class="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-6 gap-4 mb-8">
    <div class="bg-white dark:bg-dark-card rounded-2xl border border-gray-100 dark:border-dark-border p-4 card-hover card-elevated animate-fade-in-up">
        <p class="text-xs font-medium text-gray-500 dark:text-dark-muted uppercase tracking-wider">Active Products</p>
        <p class="text-2xl font-bold text-gray-900 dark:text-dark-text mt-1" id="stat-active-products">{{ $activeProducts }}</p>
        <p class="text-xs text-gray-400 dark:text-dark-muted mt-0.5">Total active</p>
    </div>
    <div class="bg-white dark:bg-dark-card rounded-2xl border border-gray-100 dark:border-dark-border p-4 card-hover card-elevated animate-fade-in-up">
        <p class="text-xs font-medium text-gray-500 dark:text-dark-muted uppercase tracking-wider">Active Customers</p>
        <p class="text-2xl font-bold text-gray-900 dark:text-dark-text mt-1" id="stat-active-customers">{{ $activeCustomers }}</p>
        <p class="text-xs text-gray-400 dark:text-dark-muted mt-0.5">Total active</p>
    </div>
    <div class="bg-white dark:bg-dark-card rounded-2xl border border-gray-100 dark:border-dark-border p-4 card-hover card-elevated animate-fade-in-up">
        <p class="text-xs font-medium text-gray-500 dark:text-dark-muted uppercase tracking-wider">Taxable Revenue</p>
        <p class="text-xl font-bold text-indigo-600 mt-1" id="stat-taxable-revenue">₹{{ number_format($taxableRevenue, 0) }}</p>
        <p class="text-xs text-gray-400 dark:text-dark-muted mt-0.5">Collected</p>
    </div>
    <div class="bg-white dark:bg-dark-card rounded-2xl border border-gray-100 dark:border-dark-border p-4 card-hover card-elevated animate-fade-in-up">
        <p class="text-xs font-medium text-gray-500 dark:text-dark-muted uppercase tracking-wider">Non-Taxable Revenue</p>
        <p class="text-xl font-bold text-gray-900 dark:text-dark-text mt-1" id="stat-non-taxable-revenue">₹{{ number_format($nonTaxableRevenue, 0) }}</p>
        <p class="text-xs text-gray-400 dark:text-dark-muted mt-0.5">Collected</p>
    </div>
    <div class="bg-white dark:bg-dark-card rounded-2xl border border-gray-100 dark:border-dark-border p-4 card-hover card-elevated animate-fade-in-up">
        <p class="text-xs font-medium text-gray-500 dark:text-dark-muted uppercase tracking-wider">Pending Payments</p>
        <p class="text-xl font-bold text-amber-600 mt-1" id="stat-pending-payments">₹{{ number_format($pendingPayments, 0) }}</p>
        <p class="text-xs text-gray-400 dark:text-dark-muted mt-0.5">Unpaid</p>
    </div>
    <div class="bg-white dark:bg-dark-card rounded-2xl border border-gray-100 dark:border-dark-border p-4 card-hover card-elevated animate-fade-in-up">
        <p class="text-xs font-medium text-gray-500 dark:text-dark-muted uppercase tracking-wider">Low Stock</p>
        <p class="text-2xl font-bold text-red-600 mt-1" id="stat-low-stock">{{ $lowStockProducts }}</p>
        <p class="text-xs text-gray-400 dark:text-dark-muted mt-0.5">Alert items</p>
    </div>
</div>

{{-- Main Charts Row --}}
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-8">
   
    <div class="lg:col-span-2 bg-white dark:bg-dark-card rounded-2xl border border-gray-100 dark:border-dark-border p-6 card-elevated animate-fade-in-up animate-stagger-2">
        <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4 mb-4">
        <h3 class="text-base font-semibold text-gray-900 dark:text-dark-text">Sales Overview</h3>
        <div class="flex flex-wrap items-center gap-2" id="salesPeriodButtons">
            @foreach(['7days' => '7 Days', '30days' => '30 Days', '6months' => '6 Months', '1year' => '1 Year'] as $key => $label)
                <button type="button" data-period="{{ $key }}"
                   class="period-btn px-4 py-2 rounded-xl text-sm font-medium transition-all duration-200 {{ ($salesPeriod ?? '30days') === $key ? 'bg-accent-500 text-white shadow-lg' : 'bg-gray-50 dark:bg-dark-border border border-gray-200 dark:border-dark-border text-gray-600 dark:text-dark-muted hover:border-accent-300' }}">
                    {{ $label }}
                </button>
            @endforeach
        </div>
    </div>
    <div class="relative" style="height: 320px;">
        <canvas id="salesBarChart"></canvas>
    </div>
</div>


    <div class="bg-white dark:bg-dark-card rounded-2xl border border-gray-100 dark:border-dark-border p-6 card-elevated animate-fade-in-up animate-stagger-3">
        <h3 class="text-base font-semibold text-gray-900 dark:text-dark-text mb-4">Structure</h3>
        <div class="space-y-6">
            <div>
                <div class="flex items-center justify-between text-sm mb-1.5">
                    <span class="text-gray-600 dark:text-dark-muted">Invoiced</span>
                    <span class="font-semibold text-gray-900 dark:text-dark-text" id="struct-invoiced">₹{{ number_format($invoicedTotal, 0) }}</span>
                </div>
                <div class="w-full bg-gray-100 dark:bg-dark-border rounded-full h-2.5 overflow-hidden">
                    @php $invPct = $invoicedTotal > 0 ? 100 : 0; @endphp
                    <div class="h-full rounded-full bg-gradient-to-r from-indigo-500 to-indigo-400" style="width: {{ $invPct }}%"></div>
                </div>
            </div>
             <div>
                <div class="flex items-center justify-between text-sm mb-1.5">
                    <span class="text-gray-600 dark:text-dark-muted">tax invoice Collected</span>
                    <span class="font-semibold text-gray-900 dark:text-dark-text" id="struct-tax-collected">₹{{ number_format($taxableRevenue, 0) }}</span>
                </div>
                <div class="w-full bg-gray-100 dark:bg-dark-border rounded-full h-2.5 overflow-hidden">
                    @php $taxColPct = $taxableInvoiced > 0 ? round(($taxableRevenue / $taxableInvoiced) * 100) : 0; @endphp
                    <div class="h-full rounded-full bg-gradient-to-r from-emerald-500 to-emerald-400" id="struct-tax-bar" style="width: {{ $taxColPct }}%"></div>
                </div>
            </div>
            <div>
                <div class="flex items-center justify-between text-sm mb-1.5">
                    <span class="text-gray-600 dark:text-dark-muted"> non tax invoice Collected</span>
                    <span class="font-semibold text-gray-900 dark:text-dark-text" id="struct-non-tax-collected">₹{{ number_format($nonTaxableRevenue, 0) }}</span>
                </div>
                <div class="w-full bg-gray-100 dark:bg-dark-border rounded-full h-2.5 overflow-hidden">
                    @php $nonTaxColPct = $nonTaxableInvoiced > 0 ? round(($nonTaxableRevenue / $nonTaxableInvoiced) * 100) : 0; @endphp
                    <div class="h-full rounded-full bg-gradient-to-r from-emerald-500 to-emerald-400" id="struct-non-tax-bar" style="width: {{ $nonTaxColPct }}%"></div>
                </div>
            </div>
            <div>
                <div class="flex items-center justify-between text-sm mb-1.5">
                    <span class="text-gray-600 dark:text-dark-muted">Outstanding</span>
                    <span class="font-semibold text-gray-900 dark:text-dark-text" id="struct-outstanding">₹{{ number_format($outstandingTotal, 0) }}</span>
                </div>
                <div class="w-full bg-gray-100 dark:bg-dark-border rounded-full h-2.5 overflow-hidden">
                    @php $outPct = $invoicedTotal > 0 ? round(($outstandingTotal / $invoicedTotal) * 100) : 0; @endphp
                    <div class="h-full rounded-full bg-gradient-to-r from-amber-500 to-amber-400" id="struct-out-bar" style="width: {{ $outPct }}%"></div>
                </div>
            </div>
            @php $totalColPct = $invoicedTotal > 0 ? round(($collectedTotal / $invoicedTotal) * 100) : 0; @endphp
            <div class="pt-4 border-t border-gray-100 dark:border-dark-border">
                <div class="flex items-center justify-between text-sm">
                    <span class="text-gray-500 dark:text-dark-muted">Collection Rate</span>
                    <span class="font-semibold text-emerald-600 dark:text-emerald-400" id="struct-col-rate">{{ $totalColPct }}%</span>
                </div>
            </div>
        </div>
    </div>
</div>

{{-- Dashboard Widgets Row --}}
<!-- <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-8">
    {{-- Payment Overview --}}
    <div class="bg-white dark:bg-dark-card rounded-2xl border border-gray-100 dark:border-dark-border p-6 card-elevated animate-fade-in-up animate-stagger-4">
        <div class="flex items-center justify-between mb-4">
            <h3 class="text-base font-semibold text-gray-900 dark:text-dark-text">Payment Overview</h3>
            <span class="text-xs text-gray-400 dark:text-dark-muted">Monthly</span>
        </div>
        <div class="flex flex-col sm:flex-row items-center gap-6">
            <div class="relative" style="width: 180px; height: 180px;">
                <canvas id="paymentOverviewChart"></canvas>
            </div>
            <div class="flex-1 space-y-4">
                <div>
                    <div class="flex items-center gap-2">
                        <span class="w-3 h-3 rounded-full bg-emerald-500"></span>
                        <span class="text-sm text-gray-500 dark:text-dark-muted">Received Amount</span>
                    </div>
                    <p class="text-xl font-bold text-gray-900 dark:text-dark-text">₹{{ number_format($collectedTotal, 0) }}</p>
                </div>
                <div>
                    <div class="flex items-center gap-2">
                        <span class="w-3 h-3 rounded-full bg-amber-500"></span>
                        <span class="text-sm text-gray-500 dark:text-dark-muted">Due Amount</span>
                    </div>
                    <p class="text-xl font-bold text-gray-900 dark:text-dark-text">₹{{ number_format($outstandingTotal, 0) }}</p>
                </div>
            </div>
        </div>
    </div>

    {{-- Recent Transactions --}}
    <div class="bg-white dark:bg-dark-card rounded-2xl border border-gray-100 dark:border-dark-border p-6 card-elevated animate-fade-in-up animate-stagger-5">
        <div class="flex items-center justify-between mb-4">
            <div>
                <h3 class="text-base font-semibold text-gray-900 dark:text-dark-text">Recent Transaction</h3>
                <p class="text-sm text-gray-500 dark:text-dark-muted mt-0.5">Latest stock movements</p>
            </div>
            <a href="{{ route('inventory.index') }}" class="text-sm font-medium text-primary-600 dark:text-primary-400 hover:underline">View All</a>
        </div>
        @if($recentTransactions->count() > 0)
            <div class="divide-y divide-gray-100 dark:divide-dark-border">
                @foreach($recentTransactions as $txn)
                    <div class="flex items-center gap-4 py-3.5 animate-fade-in-up" style="animation-delay: {{ $loop->index * 0.05 }}s;">
                        <div class="w-9 h-9 rounded-lg {{ $txn->transaction_type === 'in' ? 'bg-emerald-50 dark:bg-emerald-500/10' : 'bg-red-50 dark:bg-red-500/10' }} flex items-center justify-center flex-shrink-0">
                            @if($txn->transaction_type === 'in')
                                <svg class="w-4 h-4 text-emerald-600 dark:text-emerald-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6"/></svg>
                            @else
                                <svg class="w-4 h-4 text-red-600 dark:text-red-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 12H4"/></svg>
                            @endif
                        </div>
                        <div class="flex-1 min-w-0">
                            <p class="text-sm font-medium text-gray-900 dark:text-dark-text truncate">{{ $txn->product->name ?? 'Unknown Product' }}</p>
                            <p class="text-xs text-gray-500 dark:text-dark-muted">{{ $txn->created_at->format('d M, Y h:i A') }}</p>
                        </div>
                        <span class="text-sm font-semibold {{ $txn->transaction_type === 'in' ? 'text-emerald-600 dark:text-emerald-400' : 'text-red-600 dark:text-red-400' }}">
                            {{ $txn->transaction_type === 'in' ? '+' : '-' }}{{ number_format($txn->quantity, 0) }}
                        </span>
                    </div>
                @endforeach
            </div>
        @else
            <div class="text-center py-8">
                <div class="w-12 h-12 rounded-full bg-gray-100 dark:bg-dark-border flex items-center justify-center mx-auto mb-3">
                    <svg class="w-6 h-6 text-gray-400 dark:text-dark-muted" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
                </div>
                <p class="text-sm text-gray-500 dark:text-dark-muted">No transactions yet</p>
            </div>
        @endif
    </div>
</div> -->

{{-- Recently Sold + Top Customers Row --}}
<!-- <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-8">
    {{-- Recently Sold Products --}}
    <div class="bg-white dark:bg-dark-card rounded-2xl border border-gray-100 dark:border-dark-border p-6 card-elevated animate-fade-in-up">
        <div class="flex items-center justify-between mb-4">
            <div>
                <h3 class="text-base font-semibold text-gray-900 dark:text-dark-text">Recently Sold Products</h3>
                <p class="text-sm text-gray-500 dark:text-dark-muted mt-0.5">Latest product sales</p>
            </div>
        </div>
        @if($recentlySoldProducts->count() > 0)
            <div class="divide-y divide-gray-100 dark:divide-dark-border">
                @foreach($recentlySoldProducts as $item)
                    <div class="flex items-center gap-4 py-3">
                        <div class="w-9 h-9 rounded-lg bg-primary-50 dark:bg-primary-500/10 flex items-center justify-center flex-shrink-0">
                            <svg class="w-4 h-4 text-primary-600 dark:text-primary-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4"/></svg>
                        </div>
                        <div class="flex-1 min-w-0">
                            <p class="text-sm font-medium text-gray-900 dark:text-dark-text truncate">{{ $item->product->name ?? 'Unknown' }}</p>
                            <p class="text-xs text-gray-500 dark:text-dark-muted">Qty: {{ $item->quantity }} — ₹{{ number_format($item->line_total, 2) }}</p>
                        </div>
                        <span class="text-xs text-gray-400">{{ $item->created_at->format('d M') }}</span>
                    </div>
                @endforeach
            </div>
        @else
            <div class="text-center py-8">
                <p class="text-sm text-gray-500 dark:text-dark-muted">No sales yet</p>
            </div>
        @endif
    </div>

    {{-- Top Purchased Customers --}}
    <div class="bg-white dark:bg-dark-card rounded-2xl border border-gray-100 dark:border-dark-border p-6 card-elevated animate-fade-in-up">
        <div class="flex items-center justify-between mb-4">
            <div>
                <h3 class="text-base font-semibold text-gray-900 dark:text-dark-text">Top Purchased Customers</h3>
                <p class="text-sm text-gray-500 dark:text-dark-muted mt-0.5">Highest spending customers</p>
            </div>
        </div>
        @if($topCustomers->count() > 0)
            <div class="divide-y divide-gray-100 dark:divide-dark-border">
                @foreach($topCustomers as $index => $entry)
                    <div class="flex items-center gap-4 py-3">
                        <div class="w-8 h-8 rounded-full bg-gradient-to-br from-amber-400 to-amber-600 flex items-center justify-center text-xs font-bold text-white flex-shrink-0">
                            {{ $loop->iteration }}
                        </div>
                        <div class="flex-1 min-w-0">
                            <p class="text-sm font-medium text-gray-900 dark:text-dark-text truncate">{{ $entry->customer->customer_name ?? 'Unknown' }}</p>
                            <p class="text-xs text-gray-500 dark:text-dark-muted">{{ ['dealer' => 'Distributor', 'shop' => 'Shop', 'ecom' => 'Ecom', 'customer' => 'Customer'][$entry->customer->customer_type] ?? $entry->customer->customer_type ?? '' }}</p>
                        </div>
                        <span class="text-sm font-semibold text-emerald-600">₹{{ number_format($entry->total_amount, 0) }}</span>
                    </div>
                @endforeach
            </div>
        @else
            <div class="text-center py-8">
                <p class="text-sm text-gray-500 dark:text-dark-muted">No data yet</p>
            </div>
        @endif
    </div>
</div> -->




{{-- Secondary Charts Row --}}
<!-- <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-8">
    <div class="bg-white dark:bg-dark-card rounded-2xl border border-gray-100 dark:border-dark-border p-6 card-elevated">
        <h3 class="text-base font-semibold text-gray-900 dark:text-dark-text mb-4">Top Selling Products</h3>
        <div class="relative" style="height: 260px;">
            <canvas id="topProductsChart"></canvas>
        </div>
    </div>
    <div class="bg-white dark:bg-dark-card rounded-2xl border border-gray-100 dark:border-dark-border p-6 card-elevated">
        <h3 class="text-base font-semibold text-gray-900 dark:text-dark-text mb-4">Customer Growth (Last 30 Days)</h3>
        <div class="relative" style="height: 260px;">
            <canvas id="customerGrowthChart"></canvas>
        </div>
    </div>
</div> -->

{{-- Low Stock Alerts --}}
<div class="bg-white dark:bg-dark-card rounded-2xl border border-gray-100 dark:border-dark-border p-6 card-elevated mb-8 animate-fade-in-up">
    <div class="flex items-center justify-between mb-6">
        <div>
            <h3 class="text-base font-semibold text-gray-900 dark:text-dark-text">Low Stock Alerts</h3>
            <p class="text-sm text-gray-500 dark:text-dark-muted mt-0.5">Products that need restocking</p>
        </div>
        @if($lowStockProductsList->count() > 0)
            <span class="badge badge-danger text-sm px-3 py-1">{{ $lowStockProductsList->count() }} products</span>
        @endif
    </div>
    @if($lowStockProductsList->count() > 0)
        <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
            @foreach($lowStockProductsList as $index => $product)
                <div class="alert-card alert-card-danger rounded-2xl p-5 card-hover animate-fade-in-up" style="animation-delay: {{ $index * 0.08 }}s;">
                    <div class="flex items-start gap-4">
                        <div class="w-12 h-12 rounded-xl bg-red-50 dark:bg-red-500/10 flex items-center justify-center flex-shrink-0">
                            <svg class="w-6 h-6 text-red-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4"/></svg>
                        </div>
                        <div class="flex-1 min-w-0">
                            <div class="flex items-start justify-between gap-2">
                                <div>
                                    <p class="text-sm font-semibold text-gray-900 dark:text-dark-text">{{ $product->name }}</p>
                                    <p class="text-xs text-gray-500 dark:text-dark-muted mt-0.5">SKU: #{{ $product->id }}</p>
                                </div>
                                <span class="badge badge-danger whitespace-nowrap">{{ $product->stock_quantity }} left</span>
                            </div>
                            <div class="mt-3">
                                <div class="flex items-center justify-between text-xs text-gray-500 dark:text-dark-muted mb-1.5">
                                    <span>Stock level</span>
                                    <span>{{ $product->stock_quantity }} / {{ $product->stock_alert_limit }} (alert limit)</span>
                                </div>
                                <div class="w-full bg-gray-100 dark:bg-dark-border rounded-full h-2 overflow-hidden">
                                    @php $pct = $product->stock_alert_limit > 0 ? ($product->stock_quantity / $product->stock_alert_limit) * 100 : 0; @endphp
                                    <div class="h-full rounded-full transition-all duration-1000 ease-out" style="width: 0%; background: linear-gradient(90deg, #dc2626, #ef4444);" x-init="$nextTick(() => { $el.style.width = '{{ min($pct, 100) }}%'; })"></div>
                                </div>
                            </div>
                            <div class="mt-3">
                                <a href="{{ route('inventory.ledger', $product->id) }}" class="inline-flex items-center text-xs font-medium text-indigo-600 dark:text-indigo-400 hover:text-indigo-800 dark:hover:text-indigo-300 transition-colors">View Ledger <svg class="w-3.5 h-3.5 ml-1" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/></svg></a>
                            </div>
                        </div>
                    </div>
                </div>
            @endforeach
        </div>
    @else
        <div class="text-center py-8">
            <div class="w-16 h-16 rounded-full bg-emerald-50 dark:bg-emerald-500/10 flex items-center justify-center mx-auto mb-3">
                <svg class="w-8 h-8 text-emerald-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
            </div>
            <p class="text-sm font-medium text-gray-900 dark:text-dark-text">All stocked up!</p>
            <p class="text-sm text-gray-500 dark:text-dark-muted mt-1">No low stock products to worry about.</p>
        </div>
    @endif
</div>
@endsection
@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function() {
    const monthlyLabels = {!! json_encode($incomeKeys ?? []) !!};
    const incomeData = {!! json_encode($incomeValues ?? []) !!};
    const expenseData = {!! json_encode($expenseValues ?? []) !!};

    const defaultScales = {
        y: { beginAtZero: true, grid: { color: 'rgba(0,0,0,0.04)' }, border: { display: false }, ticks: { font: { size: 11 } } },
        x: { grid: { display: false }, border: { display: false }, ticks: { font: { size: 10 }, maxRotation: 45 } }
    };
    const defaultPlugins = {
        legend: { display: false },
        tooltip: { backgroundColor: 'rgba(26, 26, 46, 0.9)', titleColor: '#fff', bodyColor: '#fff', padding: 12, cornerRadius: 8, boxPadding: 6 }
    };

    const paymentActivityEl = document.getElementById('paymentActivityChart');
    if (paymentActivityEl && monthlyLabels.length > 0) {
        new Chart(paymentActivityEl, {
            type: 'line',
            data: {
                labels: monthlyLabels,
                datasets: [
                    {
                        label: 'Income',
                        data: incomeData,
                        borderColor: '#6366f1',
                        backgroundColor: (ctx) => {
                            const grad = ctx.chart.ctx.createLinearGradient(0, 0, 0, 300);
                            grad.addColorStop(0, 'rgba(99, 102, 241, 0.25)');
                            grad.addColorStop(1, 'rgba(99, 102, 241, 0.01)');
                            return grad;
                        },
                        fill: true,
                        tension: 0.4,
                        pointBackgroundColor: '#6366f1',
                        pointBorderColor: '#fff',
                        pointBorderWidth: 2,
                        pointRadius: 4,
                        pointHoverRadius: 6,
                        borderWidth: 2,
                    },
                    {
                        label: 'Expense',
                        data: expenseData,
                        borderColor: '#f59e0b',
                        backgroundColor: (ctx) => {
                            const grad = ctx.chart.ctx.createLinearGradient(0, 0, 0, 300);
                            grad.addColorStop(0, 'rgba(245, 158, 11, 0.15)');
                            grad.addColorStop(1, 'rgba(245, 158, 11, 0.01)');
                            return grad;
                        },
                        fill: true,
                        tension: 0.4,
                        pointBackgroundColor: '#f59e0b',
                        pointBorderColor: '#fff',
                        pointBorderWidth: 2,
                        pointRadius: 4,
                        pointHoverRadius: 6,
                        borderWidth: 2,
                        borderDash: [5, 5],
                    }
                ]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                plugins: {
                    ...defaultPlugins,
                    legend: { display: true, position: 'top', labels: { usePointStyle: true, boxWidth: 8, font: { size: 11 }, padding: 16 } }
                },
                scales: defaultScales
            }
        });
    }

    const paymentOverviewEl = document.getElementById('paymentOverviewChart');
    if (paymentOverviewEl && ({{ $collectedTotal }} > 0 || {{ $outstandingTotal }} > 0)) {
        new Chart(paymentOverviewEl, {
            type: 'doughnut',
            data: {
                labels: ['Received', 'Due'],
                datasets: [{
                    data: [{{ $collectedTotal }}, {{ $outstandingTotal }}],
                    backgroundColor: ['#10b981', '#f59e0b'],
                    borderWidth: 0,
                    hoverOffset: 8,
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                cutout: '70%',
                plugins: {
                    legend: { display: false },
                    tooltip: defaultPlugins.tooltip,
                }
            }
        });
    }

    const salesBarCtx = document.getElementById('salesBarChart');
    let salesChart = null;
    if (salesBarCtx) {
        salesChart = new Chart(salesBarCtx, {
            type: 'line',
            data: {
                labels: @json($salesChartLabels),
                datasets: [{
                    label: 'Revenue',
                    data: @json($salesChartValues),
                    backgroundColor: 'rgba(99, 102, 241, 0.7)',
                    borderColor: '#6366f1',
                    borderWidth: 1,
                    borderRadius: 4,
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                plugins: {
                    ...defaultPlugins,
                    tooltip: {
                        backgroundColor: 'rgba(26, 26, 46, 0.9)',
                        padding: 12,
                        cornerRadius: 8,
                        callbacks: {
                            label: function(ctx) {
                                return '₹ ' + Number(ctx.raw).toLocaleString('en-IN');
                            }
                        }
                    }
                },
                scales: defaultScales
            }
        });
    }

    document.getElementById('salesPeriodButtons')?.addEventListener('click', function(e) {
        const btn = e.target.closest('.period-btn');
        if (!btn) return;

        const period = btn.dataset.period;
        const url = '{{ route("dashboard.sales-chart-data") }}?sales_period=' + period;

        this.querySelectorAll('.period-btn').forEach(b => {
            b.className = 'period-btn px-4 py-2 rounded-xl text-sm font-medium transition-all duration-200 bg-gray-50 dark:bg-dark-border border border-gray-200 dark:border-dark-border text-gray-600 dark:text-dark-muted hover:border-accent-300';
        });
        btn.className = 'period-btn px-4 py-2 rounded-xl text-sm font-medium transition-all duration-200 bg-accent-500 text-white shadow-lg';

        fetch(url)
            .then(res => res.json())
            .then(data => {
                if (salesChart) {
                    salesChart.data.labels = data.labels;
                    salesChart.data.datasets[0].data = data.values;
                    salesChart.update();
                }
            });
    });

    const topProductsEl = document.getElementById('topProductsChart');
    if (topProductsEl) {
        new Chart(topProductsEl, {
            type: 'bar',
            data: {
                labels: {!! json_encode($topProducts->pluck('name')) !!},
                datasets: [{
                    label: 'Qty Sold', data: {!! json_encode($topProducts->pluck('total_qty')) !!},
                    backgroundColor: ['rgba(16, 185, 129, 0.7)','rgba(16, 185, 129, 0.5)','rgba(16, 185, 129, 0.3)','rgba(16, 185, 129, 0.2)','rgba(16, 185, 129, 0.1)'],
                    borderColor: 'rgb(16, 185, 129)', borderWidth: 1, borderRadius: 4,
                }]
            },
            options: { ...{ responsive: true, maintainAspectRatio: false, plugins: defaultPlugins, scales: defaultScales }, indexAxis: 'y' }
        });
    }

    const customerGrowthEl = document.getElementById('customerGrowthChart');
    if (customerGrowthEl) {
        new Chart(customerGrowthEl, {
            type: 'line',
            data: {
                labels: {!! json_encode($customerGrowth->keys()) !!},
                datasets: [{
                    label: 'New Customers', data: {!! json_encode($customerGrowth->values()) !!},
                    borderColor: 'rgb(245, 158, 11)',
                    backgroundColor: (ctx) => { const g = ctx.chart.ctx.createLinearGradient(0, 0, 0, 260); g.addColorStop(0, 'rgba(245, 158, 11, 0.3)'); g.addColorStop(1, 'rgba(245, 158, 11, 0.01)'); return g; },
                    fill: true, tension: 0.4,
                    pointBackgroundColor: 'rgb(245, 158, 11)', pointBorderColor: '#fff', pointBorderWidth: 2, pointRadius: 4, pointHoverRadius: 6, borderWidth: 2,
                }]
            },
            options: {
                responsive: true, maintainAspectRatio: false, plugins: defaultPlugins,
                scales: { ...defaultScales, y: { ...defaultScales.y, ticks: { ...defaultScales.y.ticks, stepSize: 1 } } }
            }
        });
    }

    const dateRangePicker = flatpickr('#dateRangePicker', {
        mode: 'range',
        dateFormat: 'Y-m-d',
        defaultDate: ['{{ $startDate }}', '{{ $endDate }}'],
        onChange: function(selectedDates, dateStr) {
            if (selectedDates.length === 2) {
                applyDateFilter();
            }
        }
    });

    function applyDateFilter() {
        const dates = dateRangePicker.selectedDates;
        if (dates.length < 2) return;
        const start_date = flatpickr.formatDate(dates[0], 'Y-m-d');
        const end_date = flatpickr.formatDate(dates[1], 'Y-m-d');
        const params = new URLSearchParams({ start_date, end_date });
        fetch('{{ route("dashboard.filter-data") }}?' + params)
            .then(res => res.json())
            .then(data => {
                document.getElementById('stat-active-products').textContent = data.activeProducts;
                document.getElementById('stat-active-customers').textContent = data.activeCustomers;
                document.getElementById('stat-taxable-revenue').textContent = '₹' + data.taxableRevenue;
                document.getElementById('stat-non-taxable-revenue').textContent = '₹' + data.nonTaxableRevenue;
                document.getElementById('stat-pending-payments').textContent = '₹' + data.pendingPayments;
                document.getElementById('stat-low-stock').textContent = data.lowStockProducts;
                document.getElementById('struct-invoiced').textContent = '₹' + data.invoicedTotal;
                document.getElementById('struct-tax-collected').textContent = '₹' + data.taxableRevenue;
                document.getElementById('struct-tax-bar').style.width = data.taxColPct + '%';
                document.getElementById('struct-non-tax-collected').textContent = '₹' + data.nonTaxableRevenue;
                document.getElementById('struct-non-tax-bar').style.width = data.nonTaxColPct + '%';
                document.getElementById('struct-outstanding').textContent = '₹' + data.outstandingTotal;
                document.getElementById('struct-out-bar').style.width = data.outPct + '%';
                document.getElementById('struct-col-rate').textContent = data.totalColPct + '%';
            });
    }

    document.getElementById('clearFilterBtn').addEventListener('click', function() {
        const today = new Date();
        const startOfMonth = new Date(today.getFullYear(), today.getMonth(), 1);
        const endOfMonth = new Date(today.getFullYear(), today.getMonth() + 1, 0);
        dateRangePicker.setDate([startOfMonth, endOfMonth]);
        applyDateFilter();
    });
});
</script>
@endpush