{{-- resources/views/dashboard/user.blade.php --}}
@extends('layouts.app')

@section('page-title', 'User Dashboard')

@push('styles')
<style>
    :root {
        --primary-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        --success-gradient: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);
        --danger-gradient: linear-gradient(135deg, #eb3349 0%, #f45c43 100%);
        --info-gradient: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
        --warning-gradient: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
        --card-shadow: 0 10px 40px -10px rgba(0,0,0,0.08);
        --card-hover-shadow: 0 20px 60px -15px rgba(0,0,0,0.15);
        --border-radius-xl: 24px;
        --border-radius-lg: 20px;
        --border-radius-md: 16px;
        --border-radius-sm: 12px;
        --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }

    /* Page Background */
    .dashboard-wrapper {
        background: linear-gradient(135deg, #f5f7fa 0%, #e4e8f0 100%);
        min-height: 100vh;
        padding: 24px 0;
    }

    /* Modern Card Style */
    .card {
        border: none;
        border-radius: var(--border-radius-lg);
        box-shadow: var(--card-shadow);
        background: #fff;
        transition: var(--transition);
        overflow: hidden;
    }

    .card:hover {
        box-shadow: var(--card-hover-shadow);
        transform: translateY(-4px);
    }

    .card-header {
        background: transparent;
        border-bottom: 1px solid rgba(0,0,0,0.06);
        padding: 20px 24px;
        font-weight: 600;
        font-size: 1.1rem;
        color: #1a1a2e;
    }

    .card-body {
        padding: 24px;
    }

    /* Stat Cards - Modern Design */
    .stat-card {
        background: #fff;
        border-radius: var(--border-radius-lg);
        padding: 24px;
        box-shadow: var(--card-shadow);
        transition: var(--transition);
        position: relative;
        overflow: hidden;
        border: 1px solid rgba(0,0,0,0.04);
    }

    .stat-card::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 4px;
        background: var(--primary-gradient);
        opacity: 0;
        transition: var(--transition);
    }

    .stat-card:hover {
        transform: translateY(-6px);
        box-shadow: var(--card-hover-shadow);
    }

    .stat-card:hover::before {
        opacity: 1;
    }

    .stat-card.income::before { background: var(--success-gradient); }
    .stat-card.expense::before { background: var(--danger-gradient); }
    .stat-card.monthly::before { background: var(--info-gradient); }

    .stat-icon {
        width: 56px;
        height: 56px;
        border-radius: 16px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.4rem;
        background: rgba(102, 126, 234, 0.1);
        color: #667eea;
        transition: var(--transition);
    }

    .stat-card:hover .stat-icon {
        transform: scale(1.1) rotate(5deg);
    }

    .stat-card.income .stat-icon {
        background: rgba(17, 153, 142, 0.12);
        color: #11998e;
    }

    .stat-card.expense .stat-icon {
        background: rgba(235, 51, 73, 0.12);
        color: #eb3349;
    }

    .stat-card.monthly .stat-icon {
        background: rgba(79, 172, 254, 0.12);
        color: #4facfe;
    }

    .stat-card h6 {
        font-weight: 500;
        color: #64748b;
        font-size: 0.9rem;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }

    .stat-card h3 {
        font-weight: 700;
        color: #1a1a2e;
        font-size: 1.75rem;
    }

    /* Filter Form */
    .filter-card {
        background: linear-gradient(135deg, #667eea15 0%, #764ba215 100%);
        border: 1px solid rgba(102, 126, 234, 0.2);
    }

    .filter-card .form-label {
        font-size: 0.875rem;
        color: #475569;
        margin-bottom: 8px;
    }

    .filter-card .form-control {
        border-radius: var(--border-radius-md);
        border: 2px solid #e2e8f0;
        padding: 12px 16px;
        font-weight: 500;
        transition: var(--transition);
        background: #fff;
    }

    .filter-card .form-control:focus {
        border-color: #667eea;
        box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.15);
    }

    .btn {
        border-radius: var(--border-radius-md);
        padding: 12px 24px;
        font-weight: 600;
        transition: var(--transition);
        border: none;
        display: inline-flex;
        align-items: center;
        gap: 8px;
    }

    .btn-primary {
        background: var(--primary-gradient);
        box-shadow: 0 4px 14px rgba(102, 126, 234, 0.4);
    }

    .btn-primary:hover {
        transform: translateY(-2px);
        box-shadow: 0 8px 24px rgba(102, 126, 234, 0.6);
    }

    .btn-secondary {
        background: #f1f5f9;
        color: #475569;
    }

    .btn-secondary:hover {
        background: #e2e8f0;
        transform: translateY(-2px);
    }

    .btn-success {
        background: var(--success-gradient);
        box-shadow: 0 4px 14px rgba(17, 153, 142, 0.4);
    }

    .btn-danger {
        background: var(--danger-gradient);
        box-shadow: 0 4px 14px rgba(235, 51, 73, 0.4);
    }

    .btn-info {
        background: var(--info-gradient);
        color: #1a1a2e;
        box-shadow: 0 4px 14px rgba(79, 172, 254, 0.4);
    }

    .btn-warning {
        background: var(--warning-gradient);
        color: #1a1a2e;
        box-shadow: 0 4px 14px rgba(250, 112, 154, 0.4);
    }

    .badge {
        font-weight: 600;
        padding: 6px 14px;
        border-radius: 20px;
        font-size: 0.8rem;
    }

    .badge.bg-info {
        background: linear-gradient(135deg, #4facfe, #00f2fe) !important;
        color: #1a1a2e;
    }

    /* Account Balance Section */
    .balance-label {
        font-size: 0.95rem;
        color: #64748b;
        font-weight: 500;
    }

    .balance-amount {
        font-size: 1.5rem;
        font-weight: 700;
        color: #1a1a2e;
    }

    .list-group-item {
        border: 1px solid #f1f5f9;
        border-radius: var(--border-radius-md) !important;
        margin-bottom: 12px;
        padding: 16px 20px;
        background: #fafafa;
        transition: var(--transition);
    }

    .list-group-item:hover {
        background: #f1f5f9;
        border-color: #cbd5e1;
        transform: translateX(4px);
    }

    .list-group-item strong {
        color: #1a1a2e;
        font-weight: 600;
    }

    .list-group-item .badge {
        font-size: 0.9rem;
        padding: 8px 16px;
    }

    /* Quick Actions */
    .quick-action-btn {
        border-radius: var(--border-radius-md);
        padding: 14px 12px;
        font-weight: 600;
        font-size: 0.9rem;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        transition: var(--transition);
        border: 2px solid transparent;
    }

    .quick-action-btn:hover {
        transform: translateY(-3px);
        border-color: rgba(255,255,255,0.3);
    }

    .quick-action-btn i {
        font-size: 1.1rem;
    }

    /* Chart Container */
    .chart-card .card-header {
        background: linear-gradient(135deg, rgba(102,126,234,0.08), rgba(118,75,162,0.08));
    }

    .chart-container {
        position: relative;
        height: 300px;
        border-radius: var(--border-radius-md);
        background: linear-gradient(180deg, #fafafa 0%, #fff 100%);
        padding: 16px;
    }

    /* Table Styling */
    .table {
        margin-bottom: 0;
    }

    .table thead th {
        background: #f8fafc;
        border: none;
        font-weight: 600;
        font-size: 0.8rem;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        color: #64748b;
        padding: 16px 12px;
        border-bottom: 2px solid #e2e8f0 !important;
    }

    .table tbody td {
        padding: 16px 12px;
        vertical-align: middle;
        border-color: #f1f5f9;
        font-weight: 500;
        color: #334155;
    }

    .table tbody tr {
        transition: var(--transition);
        cursor: pointer;
    }

    .table tbody tr:hover {
        background: linear-gradient(135deg, rgba(102,126,234,0.05), rgba(118,75,162,0.05));
        transform: scale(1.002);
    }

    .table .badge {
        padding: 6px 12px;
        font-weight: 600;
    }

    .table .badge.bg-success {
        background: rgba(17, 153, 142, 0.15) !important;
        color: #11998e;
    }

    .table .badge.bg-danger {
        background: rgba(235, 51, 73, 0.15) !important;
        color: #eb3349;
    }

    .table .badge.bg-info {
        background: rgba(79, 172, 254, 0.15) !important;
        color: #0366d6;
    }

    .empty-state {
        text-align: center;
        padding: 40px 20px;
        color: #94a3b8;
    }

    .empty-state i {
        opacity: 0.5;
        margin-bottom: 16px;
    }

    /* Low Stock Alert */
    .stock-item {
        border-left: 4px solid #f59e0b;
        background: linear-gradient(135deg, #fffbeb, #fef3c7);
    }

    .stock-item .badge {
        background: #fff !important;
        color: #d97706;
        border: 2px solid #f59e0b;
        font-weight: 700;
    }

    .stock-sufficient {
        text-align: center;
        padding: 40px 20px;
        color: #22c55e;
    }

    .stock-sufficient i {
        opacity: 0.8;
    }

    /* Section Headers */
    .section-title {
        font-size: 1.25rem;
        font-weight: 700;
        color: #1a1a2e;
        margin: 0;
    }

    .btn-sm {
        padding: 8px 16px;
        font-size: 0.85rem;
        border-radius: var(--border-radius-sm);
    }

    /* Responsive Adjustments */
    @media (max-width: 768px) {
        .stat-card h3 {
            font-size: 1.5rem;
        }
        .stat-card {
            margin-bottom: 16px;
        }
        .dashboard-wrapper {
            padding: 16px 0;
        }
    }

    /* Animation Keyframes */
    @keyframes fadeInUp {
        from {
            opacity: 0;
            transform: translateY(20px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    .card {
        animation: fadeInUp 0.4s ease forwards;
        animation-delay: calc(var(--i, 0) * 0.1s);
    }
</style>
@endpush

@section('content')
<div class="dashboard-wrapper">
    <div class="container-fluid px-3 px-md-4">

        {{-- Filter Section - Super Admin Only --}}
        @if(auth()->user()->isSuperAdmin())
            <div class="row mb-4">
                <div class="col-12">
                    <div class="card filter-card">
                        <div class="card-body">
                            <form method="GET" action="{{ route('dashboard') }}" class="row g-3 align-items-end">
                                <div class="col-md-4">
                                    <label for="monthFilter" class="form-label">📅 Select Month</label>
                                    <input type="month" id="monthFilter" name="month" class="form-control"
                                        value="{{ request()->query('month') ? request()->query('month') : now()->format('Y-m') }}">
                                </div>
                                <div class="col-md-8">
                                    <button type="submit" class="btn btn-primary me-2">
                                        <i class="fas fa-filter"></i> Filter
                                    </button>
                                    <a href="{{ route('dashboard') }}" class="btn btn-secondary">
                                        <i class="fas fa-redo"></i> Reset
                                    </a>
                                    @if(request()->query('month'))
                                        <span class="badge bg-info ms-2">
                                            📊 {{ \Carbon\Carbon::createFromFormat('Y-m', request()->query('month'))->format('F Y') }}
                                        </span>
                                    @else
                                        <span class="badge bg-info ms-2">📊 Current Month</span>
                                    @endif
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        @endif

        {{-- Stats Cards --}}
        <div class="row mb-4">
            <div class="col-md-3 col-6">
                <div class="stat-card income" style="--i:1">
                    <div class="d-flex justify-content-between align-items-center">
                        <div>
                            <h6 class="mb-2">Today's Income</h6>
                            <h3 class="mb-0 text-success">৳{{ number_format($todayIncome, 2) }}</h3>
                        </div>
                        <div class="stat-icon">
                            <i class="fas fa-arrow-up"></i>
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-md-3 col-6">
                <div class="stat-card expense" style="--i:2">
                    <div class="d-flex justify-content-between align-items-center">
                        <div>
                            <h6 class="mb-2">Today's Expense</h6>
                            <h3 class="mb-0 text-danger">৳{{ number_format($todayExpense, 2) }}</h3>
                        </div>
                        <div class="stat-icon">
                            <i class="fas fa-arrow-down"></i>
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-md-3 col-6">
                <div class="stat-card monthly" style="--i:3">
                    <div class="d-flex justify-content-between align-items-center">
                        <div>
                            <h6 class="mb-2">Monthly Income</h6>
                            <h3 class="mb-0 text-success">৳{{ number_format($monthlyIncome, 2) }}</h3>
                        </div>
                        <div class="stat-icon">
                            <i class="fas fa-calendar-check"></i>
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-md-3 col-6">
                <div class="stat-card monthly" style="--i:4">
                    <div class="d-flex justify-content-between align-items-center">
                        <div>
                            <h6 class="mb-2">Monthly Expense</h6>
                            <h3 class="mb-0 text-danger">৳{{ number_format($monthlyExpense, 2) }}</h3>
                        </div>
                        <div class="stat-icon">
                            <i class="fas fa-calendar-minus"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        {{-- Account Balances & Quick Actions --}}
        <div class="row mb-4">
            {{-- Account Balances --}}
            <div class="col-lg-6">
                <div class="card h-100" style="--i:5">
                    <div class="card-header d-flex justify-content-between align-items-center">
                        <h5 class="section-title mb-0">💰 Account Balances</h5>
                    </div>
                    <div class="card-body">
                        <div class="mb-4 p-3 rounded-3" style="background: linear-gradient(135deg, rgba(17,153,142,0.08), rgba(56,239,125,0.08)); border: 1px solid rgba(17,153,142,0.2);">
                            <span class="balance-label">Cash Balance</span>
                            <div class="balance-amount text-success mt-1">৳{{ number_format($cashBalance, 2) }}</div>
                        </div>

                        @if($bankAccounts->count() > 0)
                            <h6 class="mt-4 mb-3 fw-semibold text-muted">🏦 Bank Accounts</h6>
                            <div class="list-group list-group-flush">
                                @foreach($bankAccounts as $account)
                                    <div class="list-group-item d-flex justify-content-between align-items-center">
                                        <div>
                                            <strong>{{ $account->account_name }}</strong>
                                            <div class="text-muted small">{{ $account->bank_name }}</div>
                                        </div>
                                        <span class="badge bg-success rounded-pill">৳{{ number_format($account->balance, 2) }}</span>
                                    </div>
                                @endforeach
                            </div>
                        @endif

                        @if($digitalAccounts->count() > 0)
                            <h6 class="mt-4 mb-3 fw-semibold text-muted">📱 Digital Payments</h6>
                            <div class="list-group list-group-flush">
                                @foreach($digitalAccounts as $account)
                                    <div class="list-group-item d-flex justify-content-between align-items-center">
                                        <div>
                                            <strong>{{ $account->provider }}</strong>
                                            <div class="text-muted small">{{ $account->account_number }}</div>
                                        </div>
                                        <span class="badge bg-info rounded-pill text-dark">৳{{ number_format($account->balance, 2) }}</span>
                                    </div>
                                @endforeach
                            </div>
                        @endif
                    </div>
                </div>
            </div>

            {{-- Quick Actions --}}
            <div class="col-lg-6">
                <div class="card h-100" style="--i:6">
                    <div class="card-header">
                        <h5 class="section-title mb-0">⚡ Quick Actions</h5>
                    </div>
                    <div class="card-body">
                        <div class="row g-3">
                            <div class="col-6">
                                <a href="{{ route('transactions.create') }}" class="btn btn-success w-100 quick-action-btn">
                                    <i class="fas fa-plus-circle"></i> Add Income
                                </a>
                            </div>
                            <div class="col-6">
                                <a href="{{ route('expenses.create') }}" class="btn btn-danger w-100 quick-action-btn">
                                    <i class="fas fa-minus-circle"></i> Add Expense
                                </a>
                            </div>
                            <div class="col-6">
                                <a href="{{ route('bank-accounts.create') }}" class="btn btn-primary w-100 quick-action-btn">
                                    <i class="fas fa-university"></i> Add Bank
                                </a>
                            </div>
                            <div class="col-6">
                                <a href="{{ route('digital-payments.create') }}" class="btn btn-info w-100 quick-action-btn text-dark">
                                    <i class="fas fa-mobile-alt"></i> Add Digital
                                </a>
                            </div>
                            <div class="col-6">
                                <a href="{{ route('invoices.create') }}" class="btn btn-warning w-100 quick-action-btn text-dark">
                                    <i class="fas fa-file-invoice"></i> New Invoice
                                </a>
                            </div>
                            <div class="col-6">
                                <a href="{{ route('products.create') }}" class="btn btn-secondary w-100 quick-action-btn">
                                    <i class="fas fa-cube"></i> Add Product
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        {{-- Sales dashboard mini summaries and tables --}}
        <div class="row mb-4">
            <div class="col-lg-4">
                <div class="card" style="--i:7">
                    <div class="card-header">
                        <h5 class="section-title mb-0">💼 Sales Summary</h5>
                    </div>
                    <div class="card-body">
                        <p class="mb-1"><strong>Sales:</strong> ৳{{ number_format($totalSales,2) }}</p>
                        <p class="mb-1"><strong>Payment:</strong> ৳{{ number_format($totalPayment,2) }}</p>
                        <p class="mb-1"><strong>Due:</strong> ৳{{ number_format($totalDue,2) }}</p>
                    </div>
                </div>
            </div>
            <div class="col-lg-4">
                <div class="card" style="--i:8">
                    <div class="card-header">
                        <h5 class="section-title mb-0">💰 Cash Received By</h5>
                    </div>
                    <div class="card-body p-0">
                        <table class="table table-sm mb-0">
                            <thead>
                                <tr>
                                    <th>Method</th>
                                    <th class="text-end">Amount</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach($cashBy as $method => $amt)
                                    <tr>
                                        <td>{{ $method ?: 'Other' }}</td>
                                        <td class="text-end">৳{{ number_format($amt,2) }}</td>
                                    </tr>
                                @endforeach
                                <tr class="fw-bold">
                                    <td>Total</td>
                                    <td class="text-end">৳{{ number_format($cashBy->sum(),2) }}</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
            <div class="col-lg-4">
                <div class="card" style="--i:9">
                    <div class="card-header">
                        <h5 class="section-title mb-0">📅 Day Wise Sales</h5>
                    </div>
                    <div class="card-body p-0">
                        <table class="table table-sm mb-0">
                            <thead>
                                <tr>
                                    <th>Date</th>
                                    <th class="text-end">Qty</th>
                                    <th class="text-end">Sales</th>
                                    <th class="text-end">COGS</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach($dayGroups as $day => $rows)
                                    <tr>
                                        <td>{{ $day }}</td>
                                        <td class="text-end">{{ $rows->sum('qty') }}</td>
                                        <td class="text-end">৳{{ number_format($rows->sum('sales'),2) }}</td>
                                        <td class="text-end">৳{{ number_format($rows->sum('cogs'),2) }}</td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>

        {{-- Segment wise summary --}}
        <div class="row mb-4">
            <div class="col-12">
                <div class="card" style="--i:10">
                    <div class="card-header">
                        <h5 class="section-title mb-0">📊 Segment Wise Sale</h5>
                    </div>
                    <div class="card-body p-0">
                        <table class="table table-sm mb-0">
                            <thead>
                                <tr>
                                    <th>Segment</th>
                                    <th class="text-end">Qty</th>
                                    <th class="text-end">Amount</th>
                                    <th class="text-end">KPI</th>
                                    <th class="text-end">Revenue</th>
                                    <th class="text-end">Achiv (%)</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach($segmentGroups as $seg => $rows)
                                    <tr>
                                        <td>{{ $seg }}</td>
                                        <td class="text-end">{{ $rows->sum('qty') }}</td>
                                        <td class="text-end">৳{{ number_format($rows->sum('amount'),2) }}</td>
                                        <td class="text-end">{{ number_format($rows->sum('kpi'),2) }}</td>
                                        <td class="text-end">৳{{ number_format($rows->sum('revenue'),2) }}</td>
                                        <td class="text-end">{{ number_format($rows->avg('achiv'),2) }}%</td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>

        {{-- Income vs Expense Chart --}}
        <div class="row mb-4">
            <div class="col-12">
                <div class="card chart-card" style="--i:7">
                    <div class="card-header">
                        <h5 class="section-title mb-0">
                            📈 Income vs Expense
                            <small class="text-muted fw-normal">
                                @if(request()->query('month'))
                                    - {{ \Carbon\Carbon::createFromFormat('Y-m', request()->query('month'))->format('F Y') }}
                                @else
                                    (Last 30 Days)
                                @endif
                            </small>
                        </h5>
                    </div>
                    <div class="card-body">
                        <div class="chart-container">
                            <canvas id="incomeExpenseChart"></canvas>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        {{-- Recent Transactions & Low Stock --}}
        <div class="row">
            {{-- Recent Transactions --}}
            <div class="col-lg-7">
                <div class="card" style="--i:8">
                    <div class="card-header d-flex justify-content-between align-items-center">
                        <h5 class="section-title mb-0">📋 Recent Transactions</h5>
                        <a href="{{ route('transactions.index') }}" class="btn btn-sm btn-primary">View All →</a>
                    </div>
                    <div class="card-body p-0">
                        <div class="table-responsive">
                            <table class="table">
                                <thead>
                                    <tr>
                                        <th>Date</th>
                                        <th>Voucher</th>
                                        <th>Details</th>
                                        <th>Type</th>
                                        <th>Method</th>
                                        <th class="text-end">Amount</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @forelse($recentTransactions as $transaction)
                                        <tr>
                                            <td class="fw-medium">{{ $transaction->date->format('d M') }}</td>
                                            <td><code class="small">{{ $transaction->voucher_no }}</code></td>
                                            <td>{{ Str::limit($transaction->details, 25) }}</td>
                                            <td>
                                                @if($transaction->type == 'income')
                                                    <span class="badge bg-success">Income</span>
                                                @elseif($transaction->type == 'expense')
                                                    <span class="badge bg-danger">Expense</span>
                                                @else
                                                    <span class="badge bg-info">Transfer</span>
                                                @endif
                                            </td>
                                            <td class="small text-muted">
                                                @if($transaction->payment_method == 'cash')
                                                    💵 Cash
                                                @elseif($transaction->payment_method == 'bank')
                                                    🏦 {{ $transaction->bankAccount?->bank_name ?? 'Bank' }}
                                                @else
                                                    📱 {{ $transaction->digitalPayment?->provider ?? 'Digital' }}
                                                @endif
                                            </td>
                                            <td class="text-end fw-bold {{ $transaction->type == 'income' ? 'text-success' : 'text-danger' }}">
                                                {{ $transaction->type == 'income' ? '+' : '-' }}৳{{ number_format($transaction->amount, 2) }}
                                            </td>
                                        </tr>
                                    @empty
                                        <tr>
                                            <td colspan="6">
                                                <div class="empty-state">
                                                    <i class="fas fa-inbox fa-3x"></i>
                                                    <p class="mb-3">No transactions found</p>
                                                    <a href="{{ route('transactions.create') }}" class="btn btn-primary btn-sm">
                                                        + Add First Transaction
                                                    </a>
                                                </div>
                                            </td>
                                        </tr>
                                    @endforelse
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>

            {{-- Low Stock Alert --}}
            <div class="col-lg-5">
                <div class="card" style="--i:9">
                    <div class="card-header d-flex justify-content-between align-items-center">
                        <h5 class="section-title mb-0">⚠️ Low Stock Alert</h5>
                        <a href="{{ route('products.index') }}" class="btn btn-sm btn-primary">Manage →</a>
                    </div>
                    <div class="card-body">
                        @if($lowStockProducts->count() > 0)
                            <div class="list-group list-group-flush">
                                @foreach($lowStockProducts as $product)
                                    <div class="list-group-item stock-item">
                                        <div class="d-flex justify-content-between align-items-center">
                                            <div>
                                                <strong class="d-block">{{ $product->name }}</strong>
                                                <small class="text-muted">Code: {{ $product->product_code }}</small>
                                            </div>
                                            <div class="text-end">
                                                <span class="badge">📦 {{ $product->current_stock }}</span>
                                                <div class="small text-muted mt-1">Min: {{ $product->minimum_stock }}</div>
                                            </div>
                                        </div>
                                    </div>
                                @endforeach
                            </div>
                        @else
                            <div class="stock-sufficient">
                                <i class="fas fa-check-circle fa-3x"></i>
                                <p class="mb-0 fw-medium">All products stocked!</p>
                                <small class="text-muted">No low stock alerts</small>
                            </div>
                        @endif
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function() {
    // Chart.js Configuration with Modern Styling
    const ctx = document.getElementById('incomeExpenseChart').getContext('2d');

    // Create gradient fills
    const incomeGradient = ctx.createLinearGradient(0, 0, 0, 300);
    incomeGradient.addColorStop(0, 'rgba(17, 153, 142, 0.3)');
    incomeGradient.addColorStop(1, 'rgba(17, 153, 142, 0.02)');

    const expenseGradient = ctx.createLinearGradient(0, 0, 0, 300);
    expenseGradient.addColorStop(0, 'rgba(235, 51, 73, 0.3)');
    expenseGradient.addColorStop(1, 'rgba(235, 51, 73, 0.02)');

    new Chart(ctx, {
        type: 'line',
        data: {
            labels: {!! json_encode($chartData['labels']) !!},
            datasets: [{
                label: 'Income',
                data: {!! json_encode($chartData['income']) !!},
                borderColor: '#11998e',
                backgroundColor: incomeGradient,
                borderWidth: 3,
                pointBackgroundColor: '#fff',
                pointBorderColor: '#11998e',
                pointBorderWidth: 3,
                pointRadius: 5,
                pointHoverRadius: 7,
                tension: 0.4,
                fill: true
            }, {
                label: 'Expense',
                data: {!! json_encode($chartData['expense']) !!},
                borderColor: '#eb3349',
                backgroundColor: expenseGradient,
                borderWidth: 3,
                pointBackgroundColor: '#fff',
                pointBorderColor: '#eb3349',
                pointBorderWidth: 3,
                pointRadius: 5,
                pointHoverRadius: 7,
                tension: 0.4,
                fill: true
            }]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            interaction: {
                mode: 'index',
                intersect: false,
            },
            plugins: {
                legend: {
                    position: 'top',
                    labels: {
                        padding: 20,
                        font: { size: 12, weight: '600' },
                        usePointStyle: true,
                        pointStyle: 'circle'
                    }
                },
                tooltip: {
                    backgroundColor: 'rgba(26, 26, 46, 0.95)',
                    titleFont: { size: 14, weight: '600' },
                    bodyFont: { size: 13 },
                    padding: 14,
                    cornerRadius: 12,
                    displayColors: true,
                    callbacks: {
                        label: function(context) {
                            return ` ${context.dataset.label}: ৳${context.parsed.y.toLocaleString()}`;
                        }
                    }
                }
            },
            scales: {
                y: {
                    beginAtZero: true,
                    grid: {
                        color: 'rgba(0, 0, 0, 0.04)',
                        drawBorder: false
                    },
                    ticks: {
                        padding: 12,
                        font: { size: 11, weight: '500' },
                        color: '#64748b',
                        callback: function(value) {
                            return '৳' + value.toLocaleString();
                        }
                    },
                    border: { display: false }
                },
                x: {
                    grid: {
                        display: false,
                        drawBorder: false
                    },
                    ticks: {
                        padding: 12,
                        font: { size: 11, weight: '500' },
                        color: '#64748b',
                        maxRotation: 45,
                        minRotation: 45
                    }
                }
            }
        }
    });
});
</script>
@endpush
