@extends('layouts.master')

@section('content')
<div class="container-fluid">

    {{-- PAGE HEADER + DATE FILTER --}}
    <div class="d-sm-flex align-items-center justify-content-between mb-4">
        <div>
            <h1 class="h3 mb-0 text-gray-800">Home</h1>
            <div class="small text-muted">{{ $rangeLabel }} ({{ $fromDate }} to {{ $toDate }})</div>
        </div>

        <form method="GET" action="{{ route('home') }}" class="form-inline align-items-end flex-wrap no-print">
            <div class="mr-2 mb-2">
                <label class="small text-muted mb-1 d-block">Date Range</label>
                <select name="range" id="rangeSelect" class="form-control form-control-sm">
                    <option value="today"        @selected($range === 'today')>Today</option>
                    <option value="this_week"    @selected($range === 'this_week')>This Week</option>
                    <option value="this_month"   @selected($range === 'this_month')>This Month</option>
                    <option value="this_quarter" @selected($range === 'this_quarter')>This Quarter</option>
                    <option value="this_year"    @selected($range === 'this_year')>This Year</option>
                    <option value="custom"       @selected($range === 'custom')>Custom</option>
                </select>
            </div>
            <div id="customDates" class="d-flex align-items-end" style="{{ $range === 'custom' ? '' : 'display:none;' }}">
                <div class="mr-2 mb-2">
                    <label class="small text-muted mb-1 d-block">From</label>
                    <input type="date" name="from_date" value="{{ request('from_date', $fromDate) }}" class="form-control form-control-sm">
                </div>
                <div class="mr-2 mb-2">
                    <label class="small text-muted mb-1 d-block">To</label>
                    <input type="date" name="to_date" value="{{ request('to_date', $toDate) }}" class="form-control form-control-sm">
                </div>
            </div>
            <button class="btn btn-primary btn-sm mb-2">Apply</button>
        </form>
    </div>

    {{-- ═══════════════════════════════════════════════════════════════
         EXECUTIVE SCORECARD RIBBON  (replaces the old 4-card row)
         Kept: Net Cash Position · Net Tax Liability
         Added: Gross Profit · A/R Health
    ════════════════════════════════════════════════════════════════ --}}
    <div class="row">

        {{-- Net Cash Position --}}
        <div class="col-xl-3 col-md-6 mb-4">
            <div class="card border-left-success shadow h-100 py-2">
                <div class="card-body">
                    <div class="row no-gutters align-items-center">
                        <div class="col mr-2">
                            <div class="text-xs font-weight-bold text-success text-uppercase mb-1">Net Cash Position</div>
                            <div class="h5 mb-1 font-weight-bold text-gray-800">{{ number_format($netCashPosition, 2) }}</div>
                            <div class="small text-muted">Cash less supplier payments due (7 days)</div>
                        </div>
                        <div class="col-auto"><i class="fas fa-wallet fa-2x text-gray-300"></i></div>
                    </div>
                </div>
            </div>
        </div>

        {{-- Net Tax Liability --}}
        <div class="col-xl-3 col-md-6 mb-4">
            <div class="card border-left-warning shadow h-100 py-2">
                <div class="card-body">
                    <div class="row no-gutters align-items-center">
                        <div class="col mr-2">
                            <div class="text-xs font-weight-bold text-warning text-uppercase mb-1">Net Tax Liability (Range)</div>
                            <div class="h5 mb-1 font-weight-bold text-gray-800">{{ number_format($netTaxLiability, 2) }}</div>
                            <div class="small text-muted">Collected: {{ number_format($vatCollected, 2) }} &nbsp;|&nbsp; Paid: {{ number_format($vatPaid, 2) }}</div>
                        </div>
                        <div class="col-auto"><i class="fas fa-receipt fa-2x text-gray-300"></i></div>
                    </div>
                </div>
            </div>
        </div>

        {{-- Gross Profit (new) --}}
        <div class="col-xl-3 col-md-6 mb-4">
            <div class="card border-left-primary shadow h-100 py-2">
                <div class="card-body">
                    <div class="row no-gutters align-items-center">
                        <div class="col mr-2">
                            <div class="text-xs font-weight-bold text-primary text-uppercase mb-1">Gross Profit (Range)</div>
                            <div class="h5 mb-1 font-weight-bold text-gray-800">{{ number_format($grossProfitThisRange, 2) }}</div>
                            <div class="small text-muted">
                                Rev: {{ number_format($revenueThisRange, 2) }}
                                &nbsp;|&nbsp;
                                @php
                                    $gpMargin = $revenueThisRange > 0 ? round(($grossProfitThisRange / $revenueThisRange) * 100, 1) : 0;
                                @endphp
                                Margin: {{ $gpMargin }}%
                            </div>
                        </div>
                        <div class="col-auto"><i class="fas fa-chart-line fa-2x text-gray-300"></i></div>
                    </div>
                </div>
            </div>
        </div>

        {{-- A/R Health (new) --}}
        <div class="col-xl-3 col-md-6 mb-4">
            <a href="{{ route('reports.ar-aging') }}" class="text-decoration-none">
                <div class="card border-left-info shadow h-100 py-2">
                    <div class="card-body">
                        <div class="row no-gutters align-items-center">
                            <div class="col mr-2">
                                <div class="text-xs font-weight-bold text-info text-uppercase mb-1">A/R Health</div>
                                <div class="h5 mb-1 font-weight-bold text-gray-800">{{ number_format($totalOutstandingReceivables, 2) }}</div>
                                @php
                                    $arOverduePct = $totalOutstandingReceivables > 0
                                        ? round((($arAgeing['31-60'] + $arAgeing['61-90'] + $arAgeing['90+']) / $totalOutstandingReceivables) * 100, 1)
                                        : 0;
                                @endphp
                                <div class="small text-muted">
                                    Overdue &gt;30 days: <span class="{{ $arOverduePct > 20 ? 'text-danger font-weight-bold' : 'text-success' }}">{{ $arOverduePct }}%</span>
                                </div>
                            </div>
                            <div class="col-auto"><i class="fas fa-hand-holding-usd fa-2x text-gray-300"></i></div>
                        </div>
                    </div>
                </div>
            </a>
        </div>
    </div>

    {{-- ═══════════════════════════════════════════════════════════════
         CASH FLOW CHART + QUICK ACTIONS + BANK BREAKDOWN
    ════════════════════════════════════════════════════════════════ --}}
    <div class="row">
        <div class="col-xl-8 col-lg-7">
            <div class="card shadow mb-4">
                <div class="card-header py-3 d-flex flex-row align-items-center justify-content-between">
                    <h6 class="m-0 font-weight-bold text-primary">Cash Flow Trend (Last 12 Months)</h6>
                </div>
                <div class="card-body">
                    <div class="chart-area">
                        <canvas id="cashFlowTrendChart"></canvas>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-xl-4 col-lg-5">
            <div class="card shadow mb-4">
                <div class="card-header py-3">
                    <h6 class="m-0 font-weight-bold text-primary">Quick Actions</h6>
                </div>
                <div class="card-body">
                    <div class="d-flex flex-column">
                        <a class="btn btn-primary btn-sm mb-2" href="{{ route('customer.invoice') }}"><i class="fas fa-file-invoice mr-1"></i> New Invoice</a>
                        <a class="btn btn-primary btn-sm mb-2" href="{{ route('receipts.create') }}"><i class="fas fa-money-bill-wave mr-1"></i> New Receipt</a>
                        <a class="btn btn-primary btn-sm mb-2" href="{{ route('supplier.payment-vouchers.create') }}"><i class="fas fa-money-check-alt mr-1"></i> New Payment Voucher</a>
                        <a class="btn btn-primary btn-sm mb-2" href="{{ route('supplier.purchase-order') }}"><i class="fas fa-shopping-cart mr-1"></i> New Purchase Order</a>
                        <a class="btn btn-primary btn-sm" href="{{ route('customer.quotation') }}"><i class="fas fa-file-alt mr-1"></i> New Quotation</a>
                    </div>
                </div>
            </div>
            <div class="card shadow mb-4">
                <div class="card-header py-3">
                    <h6 class="m-0 font-weight-bold text-primary">Bank Account Breakdown</h6>
                </div>
                <div class="card-body">
                    <div class="chart-pie pt-2 pb-2">
                        <canvas id="bankBreakdownChart"></canvas>
                    </div>
                    <div class="small text-muted">Balances as at {{ $toDate }}</div>
                </div>
            </div>
        </div>
    </div>

    {{-- ═══════════════════════════════════════════════════════════════
         RECEIVABLES + PAYABLES
    ════════════════════════════════════════════════════════════════ --}}
    <div class="row">
        <div class="col-lg-6">
            <div class="card shadow mb-4">
                <div class="card-header py-3">
                    <h6 class="m-0 font-weight-bold text-primary">Receivables</h6>
                </div>
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-4 mb-3">
                            <div class="text-xs font-weight-bold text-primary text-uppercase mb-1">Outstanding</div>
                            <div class="h5 mb-0 font-weight-bold text-gray-800">{{ number_format($totalOutstandingReceivables, 2) }}</div>
                        </div>
                        <div class="col-md-4 mb-3">
                            <div class="text-xs font-weight-bold text-danger text-uppercase mb-1">Overdue</div>
                            <div class="h5 mb-0 font-weight-bold text-gray-800">{{ number_format($overdueReceivables, 2) }}</div>
                        </div>
                        <div class="col-md-4 mb-3">
                            <div class="text-xs font-weight-bold text-success text-uppercase mb-1">Collected This Month</div>
                            <div class="h5 mb-0 font-weight-bold text-gray-800">{{ number_format($collectedThisMonth, 2) }}</div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-7">
                            <div class="chart-bar" style="height:260px;">
                                <canvas id="arAgeingChart"></canvas>
                            </div>
                        </div>
                        <div class="col-md-5">
                            <div class="chart-bar" style="height:260px;">
                                <canvas id="topCustomersChart"></canvas>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-lg-6">
            <div class="card shadow mb-4">
                <div class="card-header py-3">
                    <h6 class="m-0 font-weight-bold text-primary">Payables</h6>
                </div>
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-4 mb-3">
                            <div class="text-xs font-weight-bold text-primary text-uppercase mb-1">Outstanding</div>
                            <div class="h5 mb-0 font-weight-bold text-gray-800">{{ number_format($totalOutstandingPayables, 2) }}</div>
                        </div>
                        <div class="col-md-4 mb-3">
                            <div class="text-xs font-weight-bold text-danger text-uppercase mb-1">Overdue</div>
                            <div class="h5 mb-0 font-weight-bold text-gray-800">{{ number_format($overduePayables, 2) }}</div>
                        </div>
                        <div class="col-md-4 mb-3">
                            <div class="text-xs font-weight-bold text-success text-uppercase mb-1">Paid This Month</div>
                            <div class="h5 mb-0 font-weight-bold text-gray-800">{{ number_format($paidToSuppliersThisMonth, 2) }}</div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-7">
                            <div class="chart-bar" style="height:260px;">
                                <canvas id="apAgeingChart"></canvas>
                            </div>
                        </div>
                        <div class="col-md-5">
                            <div class="chart-bar" style="height:260px;">
                                <canvas id="topSuppliersChart"></canvas>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    {{-- ═══════════════════════════════════════════════════════════════
         REVENUE & EXPENSES
    ════════════════════════════════════════════════════════════════ --}}
    <div class="row">
        <div class="col-lg-12">
            <div class="card shadow mb-4">
                <div class="card-header py-3">
                    <h6 class="m-0 font-weight-bold text-primary">Revenue &amp; Expenses</h6>
                </div>
                <div class="card-body">
                    <div class="row mb-3">
                        <div class="col-xl-3 col-md-6 mb-2">
                            <div class="text-xs font-weight-bold text-primary text-uppercase mb-1">Revenue (Range)</div>
                            <div class="h5 mb-0 font-weight-bold text-gray-800">{{ number_format($revenueThisRange, 2) }}</div>
                        </div>
                        <div class="col-xl-3 col-md-6 mb-2">
                            <div class="text-xs font-weight-bold text-primary text-uppercase mb-1">Expenses (Range)</div>
                            <div class="h5 mb-0 font-weight-bold text-gray-800">{{ number_format($expensesThisRange, 2) }}</div>
                        </div>
                        <div class="col-xl-3 col-md-6 mb-2">
                            <div class="text-xs font-weight-bold text-success text-uppercase mb-1">Gross Profit (Range)</div>
                            <div class="h5 mb-0 font-weight-bold text-gray-800">{{ number_format($grossProfitThisRange, 2) }}</div>
                        </div>
                        <div class="col-xl-3 col-md-6 mb-2">
                            <div class="text-xs font-weight-bold {{ $netProfitThisRange >= 0 ? 'text-success' : 'text-danger' }} text-uppercase mb-1">Net Profit / (Loss)</div>
                            <div class="h5 mb-0 font-weight-bold text-gray-800">{{ number_format($netProfitThisRange, 2) }}</div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-lg-8">
                            <div class="chart-area">
                                <canvas id="revenueExpenseChart"></canvas>
                            </div>
                        </div>
                        <div class="col-lg-4">
                            <div class="chart-pie pt-2 pb-2">
                                <canvas id="expenseBreakdownChart"></canvas>
                            </div>
                            <div class="small text-muted text-center">Expense Breakdown (Top Accounts)</div>
                        </div>
                    </div>
                    <div class="row mt-4">
                        <div class="col-lg-6">
                            <div class="chart-area">
                                <canvas id="revenueTrendChart"></canvas>
                            </div>
                        </div>
                        <div class="col-lg-6">
                            <div class="chart-area">
                                <canvas id="profitMarginChart"></canvas>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    {{-- ═══════════════════════════════════════════════════════════════
         DOCUMENT PIPELINE  (enhanced)
    ════════════════════════════════════════════════════════════════ --}}
    <div class="row">
        <div class="col-lg-8">
            <div class="card shadow mb-4">
                <div class="card-header py-3">
                    <h6 class="m-0 font-weight-bold text-primary">Document Pipeline</h6>
                </div>
                <div class="card-body">

                    {{-- ── Rich KPI cards ── --}}
                    <div class="row">

                        {{-- Open Quotations --}}
                        <div class="col-md-4 mb-3">
                            <a href="{{ route('customer.quotation', ['status' => 'open']) }}" class="text-decoration-none">
                                <div class="card border-left-primary h-100 shadow-sm pipeline-card">
                                    <div class="card-body py-2 px-3">
                                        <div class="text-xs font-weight-bold text-primary text-uppercase mb-1">
                                            <i class="fas fa-file-alt mr-1"></i> Open Quotations
                                        </div>
                                        <div class="h5 mb-0 font-weight-bold text-gray-800">{{ number_format($openQuotations) }}</div>
                                        <div class="small text-muted mt-1">Value: {{ number_format($openQuotationsValue, 2) }}</div>
                                        @if($openQuotations > 0)
                                        <div class="small text-muted">Avg: {{ number_format($openQuotationsValue / $openQuotations, 2) }}</div>
                                        @endif
                                        @if(($quotationsExpiring ?? collect())->count())
                                        <div class="small text-warning mt-1">
                                            <i class="fas fa-exclamation-triangle mr-1"></i>
                                            {{ $quotationsExpiring->count() }} expiring in 7 days
                                        </div>
                                        @endif
                                    </div>
                                </div>
                            </a>
                        </div>

                        {{-- Open Sales Orders --}}
                        <div class="col-md-4 mb-3">
                            <a href="{{ route('customer.sales-order', ['status' => 'open']) }}" class="text-decoration-none">
                                <div class="card border-left-success h-100 shadow-sm pipeline-card">
                                    <div class="card-body py-2 px-3">
                                        <div class="text-xs font-weight-bold text-success text-uppercase mb-1">
                                            <i class="fas fa-shopping-bag mr-1"></i> Open Sales Orders
                                        </div>
                                        <div class="h5 mb-0 font-weight-bold text-gray-800">{{ number_format($openSalesOrders) }}</div>
                                        <div class="small text-muted mt-1">Value: {{ number_format($openSalesOrdersValue, 2) }}</div>
                                        @if(isset($readyToInvoice))
                                        <div class="small text-success mt-1">
                                            <i class="fas fa-check-circle mr-1"></i> {{ $readyToInvoice }} ready to invoice
                                        </div>
                                        @endif
                                    </div>
                                </div>
                            </a>
                        </div>

                        {{-- Unprocessed Invoices --}}
                        <div class="col-md-4 mb-3">
                            <a href="{{ route('customer.invoice', ['status' => 'unprocessed']) }}" class="text-decoration-none">
                                <div class="card border-left-warning h-100 shadow-sm pipeline-card">
                                    <div class="card-body py-2 px-3">
                                        <div class="text-xs font-weight-bold text-warning text-uppercase mb-1">
                                            <i class="fas fa-file-invoice mr-1"></i> Unprocessed Invoices
                                        </div>
                                        <div class="h5 mb-0 font-weight-bold text-gray-800">{{ number_format($unprocessedInvoicesCount) }}</div>
                                        @if(isset($draftInvoices))
                                        <div class="small text-muted mt-1">Draft: {{ $draftInvoices }}</div>
                                        @endif
                                        @if(isset($awaitingApprovalInvoices))
                                        <div class="small text-muted">Awaiting approval: {{ $awaitingApprovalInvoices }}</div>
                                        @endif
                                    </div>
                                </div>
                            </a>
                        </div>

                        {{-- Pending Purchase Orders --}}
                        <div class="col-md-6 mb-3">
                            <a href="{{ route('supplier.purchase-order', ['status' => 'pending']) }}" class="text-decoration-none">
                                <div class="card border-left-info h-100 shadow-sm pipeline-card">
                                    <div class="card-body py-2 px-3">
                                        <div class="text-xs font-weight-bold text-info text-uppercase mb-1">
                                            <i class="fas fa-shopping-cart mr-1"></i> Pending Purchase Orders
                                        </div>
                                        <div class="h5 mb-0 font-weight-bold text-gray-800">{{ number_format($pendingPurchaseOrders) }}</div>
                                        @if(isset($pendingPoValue))
                                        <div class="small text-muted mt-1">Value: {{ number_format($pendingPoValue, 2) }}</div>
                                        @endif
                                        @if(isset($overduePurchaseOrders) && $overduePurchaseOrders > 0)
                                        <div class="small text-danger mt-1">
                                            <i class="fas fa-exclamation-circle mr-1"></i> {{ $overduePurchaseOrders }} overdue
                                        </div>
                                        @endif
                                    </div>
                                </div>
                            </a>
                        </div>

                        {{-- Pending GRVs --}}
                        <div class="col-md-6 mb-3">
                            <a href="{{ route('supplier.grv', ['status' => 'pending']) }}" class="text-decoration-none">
                                <div class="card border-left-secondary h-100 shadow-sm pipeline-card">
                                    <div class="card-body py-2 px-3">
                                        <div class="text-xs font-weight-bold text-secondary text-uppercase mb-1">
                                            <i class="fas fa-truck mr-1"></i> Pending GRVs
                                        </div>
                                        <div class="h5 mb-0 font-weight-bold text-gray-800">{{ number_format($pendingGrvs) }}</div>
                                        @if(isset($goodsAwaitingInspection))
                                        <div class="small text-muted mt-1">Awaiting inspection: {{ $goodsAwaitingInspection }}</div>
                                        @endif
                                        @if(isset($delayedReceipts) && $delayedReceipts > 0)
                                        <div class="small text-danger mt-1">
                                            <i class="fas fa-clock mr-1"></i> {{ $delayedReceipts }} delayed
                                        </div>
                                        @endif
                                    </div>
                                </div>
                            </a>
                        </div>
                    </div>{{-- /row KPI cards --}}

                    {{-- ── Animated Conversion Funnel ── --}}
                    <hr>
                    <h6 class="font-weight-bold text-primary mb-3">Sales Conversion Funnel</h6>
                    @php
                        $funnelStages = [
                            ['label' => 'Quotations',    'icon' => 'fa-file-alt',     'color' => 'primary',   'key' => 'Quotations'],
                            ['label' => 'Sales Orders',  'icon' => 'fa-shopping-bag', 'color' => 'success',   'key' => 'Sales Orders'],
                            ['label' => 'Invoices',      'icon' => 'fa-file-invoice', 'color' => 'warning',   'key' => 'Invoices'],
                            ['label' => 'Receipts',      'icon' => 'fa-money-bill',   'color' => 'info',      'key' => 'Receipts'],
                        ];
                        $maxFunnel = max(1, max($funnel));
                    @endphp

                    @foreach($funnelStages as $i => $stage)
                        @php
                            $count      = $funnel[$stage['key']] ?? 0;
                            $prevCount  = $i > 0 ? ($funnel[$funnelStages[$i-1]['key']] ?? 0) : $count;
                            $convRate   = $prevCount > 0 ? round(($count / $prevCount) * 100, 1) : 0;
                            $barWidth   = $maxFunnel > 0 ? round(($count / $maxFunnel) * 100) : 0;
                        @endphp
                        <div class="mb-2">
                            <div class="d-flex justify-content-between align-items-center mb-1">
                                <span class="small font-weight-bold text-{{ $stage['color'] }}">
                                    <i class="fas {{ $stage['icon'] }} mr-1"></i>{{ $stage['label'] }}
                                </span>
                                <span class="small text-gray-800 font-weight-bold">{{ number_format($count) }}</span>
                                @if($i > 0)
                                    <span class="badge badge-{{ $convRate >= 70 ? 'success' : ($convRate >= 40 ? 'warning' : 'danger') }} ml-auto">
                                        {{ $convRate }}% conversion
                                    </span>
                                @endif
                            </div>
                            <div class="progress" style="height:14px; border-radius:7px;">
                                <div class="progress-bar bg-{{ $stage['color'] }} funnel-bar"
                                     role="progressbar"
                                     data-width="{{ $barWidth }}"
                                     style="width:0%; border-radius:7px; transition: width 1s ease;">
                                </div>
                            </div>
                        </div>
                        @if($i < count($funnelStages) - 1)
                            <div class="text-center text-muted" style="line-height:1; margin-bottom:4px;">
                                <i class="fas fa-chevron-down small"></i>
                            </div>
                        @endif
                    @endforeach

                    <hr>

                    {{-- ── Recent Documents ── --}}
                    <h6 class="font-weight-bold text-primary mb-2">Recent Documents</h6>
                    <div class="table-responsive">
                        <table class="table table-bordered table-hover mb-0">
                            <thead class="table-light">
                                <tr>
                                    <th>Type</th>
                                    <th>Reference</th>
                                    <th>Customer / Supplier</th>
                                    <th>Date</th>
                                    <th>Status</th>
                                    <th class="text-end">Total</th>
                                </tr>
                            </thead>
                            <tbody>
                                @forelse($recentDocuments as $doc)
                                    <tr>
                                        <td>{{ $doc['type'] }}</td>
                                        <td>{{ $doc['document_number'] }}</td>
                                        <td>
                                            @if($doc['side'] === 'customer')
                                                {{ $customerAccountNames[$doc['party_id']] ?? ('Customer #'.$doc['party_id']) }}
                                            @else
                                                {{ $supplierAccountNames[$doc['party_id']] ?? ('Supplier #'.$doc['party_id']) }}
                                            @endif
                                        </td>
                                        <td>{{ $doc['document_date'] }}</td>
                                        <td>{{ $doc['status'] }}</td>
                                        <td class="text-end">{{ number_format((float) $doc['inclusive_total'], 2) }}</td>
                                    </tr>
                                @empty
                                    <tr><td colspan="6" class="text-muted small">No recent documents found.</td></tr>
                                @endforelse
                            </tbody>
                        </table>
                    </div>

                </div>
            </div>
        </div>{{-- /col-lg-8 --}}

        {{-- ── ALERTS + ACTIVITY ── --}}
        <div class="col-lg-4">
            <div class="card shadow mb-4">
                <div class="card-header py-3">
                    <h6 class="m-0 font-weight-bold text-primary">Smart Alerts</h6>
                </div>
                <div class="card-body p-0">

                    {{-- Overdue invoices 30+ days --}}
                    <div class="alert-section border-bottom px-3 py-2">
                        <div class="d-flex justify-content-between align-items-center mb-1">
                            <span class="font-weight-bold text-danger small">
                                <i class="fas fa-exclamation-circle mr-1"></i> Invoices Overdue 30+ Days
                            </span>
                            <span class="badge badge-danger">{{ $overdueInvoices30->count() }}</span>
                        </div>
                        @if($overdueInvoices30->isEmpty())
                            <div class="text-muted small pl-3">No overdue invoices.</div>
                        @else
                            <ul class="mb-0 pl-3">
                                @foreach($overdueInvoices30->take(4) as $inv)
                                    <li class="small">
                                        {{ $customerAccountNames[$inv['customer_account_id']] ?? ('Customer #'.$inv['customer_account_id']) }}
                                        &mdash; {{ $inv['document_number'] }}
                                        <span class="font-weight-bold">({{ number_format($inv['outstanding'], 2) }})</span>
                                    </li>
                                @endforeach
                                @if($overdueInvoices30->count() > 4)
                                    <li class="small text-muted">+ {{ $overdueInvoices30->count() - 4 }} more</li>
                                @endif
                            </ul>
                        @endif
                    </div>

                    {{-- Quotations expiring --}}
                    <div class="alert-section border-bottom px-3 py-2">
                        <div class="d-flex justify-content-between align-items-center mb-1">
                            <span class="font-weight-bold text-warning small">
                                <i class="fas fa-clock mr-1"></i> Quotations Expiring (7 Days)
                            </span>
                            <span class="badge badge-warning">{{ $quotationsExpiring->count() }}</span>
                        </div>
                        @if($quotationsExpiring->isEmpty())
                            <div class="text-muted small pl-3">No expiring quotations.</div>
                        @else
                            <ul class="mb-0 pl-3">
                                @foreach($quotationsExpiring->take(4) as $q)
                                    <li class="small">
                                        {{ $q->document_number }}
                                        &mdash; {{ $customerAccountNames[$q->customer_account_id] ?? ('Customer #'.$q->customer_account_id) }}
                                    </li>
                                @endforeach
                            </ul>
                        @endif
                    </div>

                    {{-- Supplier payments due --}}
                    <div class="alert-section border-bottom px-3 py-2">
                        <div class="d-flex justify-content-between align-items-center mb-1">
                            <span class="font-weight-bold text-info small">
                                <i class="fas fa-calendar-check mr-1"></i> Supplier Payments Due (7 Days)
                            </span>
                            <span class="badge badge-info">{{ count($supplierPaymentsDue) }}</span>
                        </div>
                        @if(empty($supplierPaymentsDue) || $supplierPaymentsDue->isEmpty())
                            <div class="text-muted small pl-3">No supplier payments due.</div>
                        @else
                            <ul class="mb-0 pl-3">
                                @foreach($supplierPaymentsDue->take(4) as $p)
                                    <li class="small">
                                        {{ $supplierAccountNames[$p['supplier_account_id']] ?? ('Supplier #'.$p['supplier_account_id']) }}
                                        &mdash; {{ $p['document_number'] }}
                                        <span class="font-weight-bold">({{ number_format($p['outstanding'], 2) }})</span>
                                    </li>
                                @endforeach
                            </ul>
                        @endif
                    </div>

                    {{-- Overdue POs --}}
                    @if(isset($overduePurchaseOrders) && $overduePurchaseOrders > 0)
                    <div class="alert-section border-bottom px-3 py-2">
                        <div class="d-flex justify-content-between align-items-center">
                            <span class="font-weight-bold text-danger small">
                                <i class="fas fa-shopping-cart mr-1"></i> Overdue Purchase Orders
                            </span>
                            <span class="badge badge-danger">{{ $overduePurchaseOrders }}</span>
                        </div>
                    </div>
                    @endif

                    {{-- Delayed GRVs --}}
                    @if(isset($delayedReceipts) && $delayedReceipts > 0)
                    <div class="alert-section border-bottom px-3 py-2">
                        <div class="d-flex justify-content-between align-items-center">
                            <span class="font-weight-bold text-warning small">
                                <i class="fas fa-truck mr-1"></i> GRVs Pending Over 3 Days
                            </span>
                            <span class="badge badge-warning">{{ $delayedReceipts }}</span>
                        </div>
                    </div>
                    @endif

                    {{-- Below reorder level --}}
                    @if(isset($belowReorderCount) && $belowReorderCount > 0)
                    <div class="alert-section px-3 py-2">
                        <div class="d-flex justify-content-between align-items-center">
                            <a href="{{ route('inventory.index', ['filter' => 'below_reorder']) }}" class="font-weight-bold text-danger small text-decoration-none">
                                <i class="fas fa-boxes mr-1"></i> Products Below Reorder Level
                            </a>
                            <span class="badge badge-danger">{{ $belowReorderCount }}</span>
                        </div>
                    </div>
                    @endif

                </div>
            </div>

            {{-- Recent Activity --}}
            <div class="card shadow mb-4">
                <div class="card-header py-3">
                    <h6 class="m-0 font-weight-bold text-primary">Recent Activity</h6>
                </div>
                <div class="card-body">
                    @if($activityLog->isEmpty())
                        <div class="text-muted small">No activity yet.</div>
                    @else
                        <ul class="mb-0 pl-3">
                            @foreach($activityLog as $a)
                                <li class="small mb-1">
                                    <span class="text-muted">{{ \Carbon\Carbon::parse($a->created_at)->format('Y-m-d H:i') }}</span>
                                    &mdash; {{ $a->user_name ?? 'System' }} {{ $a->action }} {{ $a->document_type }} #{{ $a->document_id }}
                                    <span class="text-muted">({{ $a->from_status ?? '-' }} &rarr; {{ $a->to_status }})</span>
                                </li>
                            @endforeach
                        </ul>
                    @endif
                </div>
            </div>
        </div>{{-- /col-lg-4 --}}
    </div>

    {{-- ═══════════════════════════════════════════════════════════════
         QUOTATION ANALYTICS
    ════════════════════════════════════════════════════════════════ --}}
    <div class="row">
        <div class="col-lg-12">
            <div class="card shadow mb-4">
                <div class="card-header py-3">
                    <h6 class="m-0 font-weight-bold text-primary">Quotation Analytics</h6>
                </div>
                <div class="card-body">
                    <div class="row mb-3">
                        @php
                            $totalQuotes     = ($quotationStats['total']       ?? 0);
                            $convertedQuotes = ($quotationStats['converted']   ?? 0);
                            $notConverted    = ($quotationStats['not_converted']?? 0);
                            $expiredQuotes   = ($quotationStats['expired']     ?? 0);
                            $rejectedQuotes  = ($quotationStats['rejected']    ?? 0);
                            $convPct         = $totalQuotes > 0 ? round(($convertedQuotes / $totalQuotes) * 100, 1) : 0;
                            $avgConvDays     = $quotationStats['avg_days_to_convert'] ?? 0;
                            $avgQuoteVal     = $quotationStats['avg_quote_value']     ?? 0;
                        @endphp
                        <div class="col-xl-2 col-md-4 mb-2">
                            <div class="text-xs font-weight-bold text-primary text-uppercase mb-1">Total Quotations</div>
                            <div class="h5 mb-0 font-weight-bold text-gray-800">{{ number_format($totalQuotes) }}</div>
                        </div>
                        <div class="col-xl-2 col-md-4 mb-2">
                            <div class="text-xs font-weight-bold text-success text-uppercase mb-1">Converted</div>
                            <div class="h5 mb-0 font-weight-bold text-gray-800">{{ number_format($convertedQuotes) }}</div>
                        </div>
                        <div class="col-xl-2 col-md-4 mb-2">
                            <div class="text-xs font-weight-bold text-danger text-uppercase mb-1">Not Converted</div>
                            <div class="h5 mb-0 font-weight-bold text-gray-800">
                                <a href="{{ route('customer.quotation', ['filter' => 'not_converted']) }}" class="text-danger">{{ number_format($notConverted) }}</a>
                            </div>
                        </div>
                        <div class="col-xl-2 col-md-4 mb-2">
                            <div class="text-xs font-weight-bold {{ $convPct >= 60 ? 'text-success' : 'text-warning' }} text-uppercase mb-1">Conversion %</div>
                            <div class="h5 mb-0 font-weight-bold text-gray-800">{{ $convPct }}%</div>
                        </div>
                        <div class="col-xl-2 col-md-4 mb-2">
                            <div class="text-xs font-weight-bold text-secondary text-uppercase mb-1">Expired</div>
                            <div class="h5 mb-0 font-weight-bold text-gray-800">{{ number_format($expiredQuotes) }}</div>
                        </div>
                        <div class="col-xl-2 col-md-4 mb-2">
                            <div class="text-xs font-weight-bold text-muted text-uppercase mb-1">Avg Quote Value</div>
                            <div class="h5 mb-0 font-weight-bold text-gray-800">{{ number_format($avgQuoteVal, 2) }}</div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-lg-4">
                            <div class="chart-pie pt-2 pb-2" style="height:220px;">
                                <canvas id="quotationConversionPieChart"></canvas>
                            </div>
                            <div class="small text-muted text-center">Converted vs Not Converted</div>
                        </div>
                        <div class="col-lg-8">
                            <div class="chart-area" style="height:220px;">
                                <canvas id="quotationMonthlyTrendChart"></canvas>
                            </div>
                            <div class="small text-muted text-center">Monthly Quotation & Conversion Trend</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    {{-- ═══════════════════════════════════════════════════════════════
         PERIOD COMPARISON
    ════════════════════════════════════════════════════════════════ --}}
    <div class="row">
        <div class="col-lg-12 mb-4">
            <div class="card shadow">
                <div class="card-header py-3">
                    <h6 class="m-0 font-weight-bold text-primary">Period Comparison</h6>
                </div>
                <div class="card-body">
                    <div class="table-responsive">
                        <table class="table table-bordered mb-0">
                            <thead class="table-light">
                                <tr>
                                    <th>Metric</th>
                                    <th class="text-end">This Month</th>
                                    <th class="text-end">Last Month</th>
                                    <th class="text-end">This Year</th>
                                    <th class="text-end">Last Year</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <th>Revenue</th>
                                    <td class="text-end">{{ number_format($periodSummary['this_month']['revenue'] ?? 0, 2) }}</td>
                                    <td class="text-end">{{ number_format($periodSummary['last_month']['revenue'] ?? 0, 2) }}</td>
                                    <td class="text-end">{{ number_format($periodSummary['this_year']['revenue'] ?? 0, 2) }}</td>
                                    <td class="text-end">{{ number_format($periodSummary['last_year']['revenue'] ?? 0, 2) }}</td>
                                </tr>
                                <tr>
                                    <th>Expenses</th>
                                    <td class="text-end">{{ number_format($periodSummary['this_month']['expenses'] ?? 0, 2) }}</td>
                                    <td class="text-end">{{ number_format($periodSummary['last_month']['expenses'] ?? 0, 2) }}</td>
                                    <td class="text-end">{{ number_format($periodSummary['this_year']['expenses'] ?? 0, 2) }}</td>
                                    <td class="text-end">{{ number_format($periodSummary['last_year']['expenses'] ?? 0, 2) }}</td>
                                </tr>
                                <tr>
                                    <th>Net Profit</th>
                                    <td class="text-end">{{ number_format($periodSummary['this_month']['net_profit'] ?? 0, 2) }}</td>
                                    <td class="text-end">{{ number_format($periodSummary['last_month']['net_profit'] ?? 0, 2) }}</td>
                                    <td class="text-end">{{ number_format($periodSummary['this_year']['net_profit'] ?? 0, 2) }}</td>
                                    <td class="text-end">{{ number_format($periodSummary['last_year']['net_profit'] ?? 0, 2) }}</td>
                                </tr>
                                <tr>
                                    <th>Receivables (Outstanding)</th>
                                    <td class="text-end">{{ number_format($periodSummary['this_month']['receivables'] ?? 0, 2) }}</td>
                                    <td class="text-end">{{ number_format($periodSummary['last_month']['receivables'] ?? 0, 2) }}</td>
                                    <td class="text-end">{{ number_format($periodSummary['this_year']['receivables'] ?? 0, 2) }}</td>
                                    <td class="text-end">{{ number_format($periodSummary['last_year']['receivables'] ?? 0, 2) }}</td>
                                </tr>
                                <tr>
                                    <th>Payables (Outstanding)</th>
                                    <td class="text-end">{{ number_format($periodSummary['this_month']['payables'] ?? 0, 2) }}</td>
                                    <td class="text-end">{{ number_format($periodSummary['last_month']['payables'] ?? 0, 2) }}</td>
                                    <td class="text-end">{{ number_format($periodSummary['this_year']['payables'] ?? 0, 2) }}</td>
                                    <td class="text-end">{{ number_format($periodSummary['last_year']['payables'] ?? 0, 2) }}</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>

</div>{{-- /container-fluid --}}
@endsection

@section('scripts')
<style>
    .pipeline-card { transition: transform .15s, box-shadow .15s; cursor: pointer; }
    .pipeline-card:hover { transform: translateY(-2px); box-shadow: 0 .5rem 1rem rgba(0,0,0,.15) !important; }
    .alert-section { transition: background .15s; }
    .alert-section:hover { background: #f8f9fc; }
    .border-left-secondary { border-left: .25rem solid #858796 !important; }

    /*
     * ═══════════════════════════════════════════════════════════════
     *  NAVBAR PATCH — sidebar / topbar green theme + larger top-level
     *  nav font, merged in from navbar-patch.css
     * ═══════════════════════════════════════════════════════════════
     */
    /* ── Sidebar background ── */
    .sidebar,
    #accordionSidebar {
        background-color: #1cc88a !important;   /* SB Admin 2 "success" green */
    }
    /* ── Top-level nav items (the 4 main menu headings) ── */
    #accordionSidebar .nav-item > .nav-link {
        font-size: 1.05rem !important;          /* ~double the default 0.55rem caps label */
        font-weight: 700 !important;
        color: #ffffff !important;
        letter-spacing: 0.03rem;
    }
    /* ── Sidebar dividers / section headings (text labels like "INTERFACE") ── */
    .sidebar-heading {
        font-size: 0.75rem !important;
        color: rgba(255, 255, 255, 0.6) !important;
    }
    /* ── Active nav item highlight ── */
    #accordionSidebar .nav-item.active > .nav-link,
    #accordionSidebar .nav-item > .nav-link:hover {
        color: #ffffff !important;
        background-color: rgba(0, 0, 0, 0.15) !important;
        border-radius: 4px;
    }
    /* ── Sub-menu collapse panel background — match the green ── */
    #accordionSidebar .collapse .bg-white,
    #accordionSidebar .collapse,
    #accordionSidebar .collapsing {
        background-color: #17a673 !important;   /* slightly darker green for depth */
        border-radius: 0 0 6px 6px;
    }
    /* ── Sub-menu individual links ── */
    #accordionSidebar .collapse .collapse-inner .collapse-item,
    #accordionSidebar .collapse .collapse-inner a {
        color: #ffffff !important;
        font-size: 0.85rem;
        font-weight: 500;
        border-radius: 4px;
        transition: background 0.15s;
    }
    #accordionSidebar .collapse .collapse-inner .collapse-item:hover,
    #accordionSidebar .collapse .collapse-inner a:hover {
        background-color: rgba(0, 0, 0, 0.15) !important;
        color: #ffffff !important;
    }
    /* ── Sub-menu divider ── */
    #accordionSidebar .collapse .collapse-inner hr,
    #accordionSidebar .collapse .collapse-divider {
        border-color: rgba(255, 255, 255, 0.2) !important;
    }
    /* ── Sidebar toggle button (hamburger) ── */
    #sidebarToggle,
    #sidebarToggleTop {
        background-color: rgba(0, 0, 0, 0.15) !important;
        color: #ffffff !important;
    }
    /* ── Topbar (top navigation bar) ── */
    .topbar {
        background-color: #ffffff;
        box-shadow: 0 0.15rem 1.75rem 0 rgba(58,59,69,.15) !important;
    }
    /* ── Topbar nav link text ── */
    .topbar .nav-item .nav-link {
        color: #858796;
    }
    /* ── Sidebar brand / logo area ── */
    .sidebar-brand {
        background-color: rgba(0, 0, 0, 0.15) !important;
    }
    .sidebar-brand-text {
        color: #ffffff !important;
        font-size: 1.1rem;
        font-weight: 800;
    }
    /* ── Scrollbar on sidebar ── */
    #accordionSidebar::-webkit-scrollbar {
        width: 4px;
    }
    #accordionSidebar::-webkit-scrollbar-track {
        background: transparent;
    }
    #accordionSidebar::-webkit-scrollbar-thumb {
        background: rgba(255,255,255,0.3);
        border-radius: 2px;
    }
</style>
<script>
document.addEventListener('DOMContentLoaded', function () {

    /* ── Date-range toggle ── */
    const rangeSelect = document.getElementById('rangeSelect');
    const customDates = document.getElementById('customDates');
    if (rangeSelect && customDates) {
        rangeSelect.addEventListener('change', function () {
            customDates.style.display = this.value === 'custom' ? '' : 'none';
        });
    }

    /* ── Animate funnel bars ── */
    setTimeout(function () {
        document.querySelectorAll('.funnel-bar').forEach(function (bar) {
            bar.style.width = bar.dataset.width + '%';
        });
    }, 200);

    /* ── Safe chart helper ── */
    function safeChart(ctxId, config) {
        const el = document.getElementById(ctxId);
        if (!el || typeof Chart === 'undefined') return;
        return new Chart(el, config);
    }

    /* ════════════════════════════════════════
       CHARTS
    ════════════════════════════════════════ */

    // Cash flow trend
    safeChart('cashFlowTrendChart', {
        type: 'line',
        data: {
            labels: @json($months12Labels),
            datasets: [
                { label: 'Inflows',  data: @json($cashInByMonth),  borderColor: 'rgba(28,200,138,1)',  backgroundColor: 'rgba(28,200,138,0.1)',  fill: true, lineTension: 0.3 },
                { label: 'Outflows', data: @json($cashOutByMonth), borderColor: 'rgba(231,74,59,1)',   backgroundColor: 'rgba(231,74,59,0.1)',   fill: true, lineTension: 0.3 }
            ]
        },
        options: { maintainAspectRatio: false, legend: { display: true }, scales: { yAxes: [{ ticks: { beginAtZero: true } }] } }
    });

    // Bank breakdown doughnut
    safeChart('bankBreakdownChart', {
        type: 'doughnut',
        data: {
            labels: @json($bankBreakdownLabels),
            datasets: [{ data: @json($bankBreakdownBalances), backgroundColor: ['#4e73df','#1cc88a','#36b9cc','#f6c23e','#e74a3b','#858796'] }]
        },
        options: { maintainAspectRatio: false, legend: { display: true, position: 'bottom' }, cutoutPercentage: 60 }
    });

    // AR ageing
    safeChart('arAgeingChart', {
        type: 'horizontalBar',
        data: {
            labels: ['Current','1-30','31-60','61-90','90+'],
            datasets: [{ label: 'Receivables', data: [@json($arAgeing['Current']),@json($arAgeing['1-30']),@json($arAgeing['31-60']),@json($arAgeing['61-90']),@json($arAgeing['90+'])], backgroundColor: ['#1cc88a','#36b9cc','#f6c23e','#fd7e14','#e74a3b'] }]
        },
        options: { maintainAspectRatio: false, legend: { display: false }, scales: { xAxes: [{ ticks: { beginAtZero: true } }] } }
    });

    // Top customers
    safeChart('topCustomersChart', {
        type: 'bar',
        data: {
            labels: @json($topCustomerChartLabels),
            datasets: [{ label: 'Outstanding', data: @json($topCustomerChartValues), backgroundColor: 'rgba(78,115,223,0.8)' }]
        },
        options: { maintainAspectRatio: false, legend: { display: false }, scales: { yAxes: [{ ticks: { beginAtZero: true } }] } }
    });

    // AP ageing
    safeChart('apAgeingChart', {
        type: 'horizontalBar',
        data: {
            labels: ['Current','1-30','31-60','61-90','90+'],
            datasets: [{ label: 'Payables', data: [@json($apAgeing['Current']),@json($apAgeing['1-30']),@json($apAgeing['31-60']),@json($apAgeing['61-90']),@json($apAgeing['90+'])], backgroundColor: ['#1cc88a','#36b9cc','#f6c23e','#fd7e14','#e74a3b'] }]
        },
        options: { maintainAspectRatio: false, legend: { display: false }, scales: { xAxes: [{ ticks: { beginAtZero: true } }] } }
    });

    // Top suppliers
    safeChart('topSuppliersChart', {
        type: 'bar',
        data: {
            labels: @json($topSupplierChartLabels),
            datasets: [{ label: 'Outstanding', data: @json($topSupplierChartValues), backgroundColor: 'rgba(28,200,138,0.8)' }]
        },
        options: { maintainAspectRatio: false, legend: { display: false }, scales: { yAxes: [{ ticks: { beginAtZero: true } }] } }
    });

    // Revenue vs Expenses (grouped bar)
    safeChart('revenueExpenseChart', {
        type: 'bar',
        data: {
            labels: @json($revExpLabels),
            datasets: [
                { label: 'Revenue',  backgroundColor: 'rgba(78,115,223,0.8)',  borderColor: 'rgba(78,115,223,1)',  data: @json($revByMonth) },
                { label: 'Expenses', backgroundColor: 'rgba(231,74,59,0.7)',   borderColor: 'rgba(231,74,59,1)',   data: @json($expByMonth) }
            ]
        },
        options: { maintainAspectRatio: false, legend: { display: true }, scales: { yAxes: [{ ticks: { beginAtZero: true } }] } }
    });

    // Revenue trend
    safeChart('revenueTrendChart', {
        type: 'line',
        data: {
            labels: @json($revExpLabels),
            datasets: [{ label: 'Revenue', data: @json($revByMonth), borderColor: 'rgba(78,115,223,1)', backgroundColor: 'rgba(78,115,223,0.1)', fill: true, lineTension: 0.3 }]
        },
        options: { maintainAspectRatio: false, legend: { display: true }, scales: { yAxes: [{ ticks: { beginAtZero: true } }] } }
    });

    // Profit margin trend
    safeChart('profitMarginChart', {
        type: 'line',
        data: {
            labels: @json($revExpLabels),
            datasets: [{ label: 'Profit Margin %', data: @json($profitMarginByMonth), borderColor: 'rgba(28,200,138,1)', backgroundColor: 'rgba(28,200,138,0.1)', fill: true, lineTension: 0.3 }]
        },
        options: { maintainAspectRatio: false, legend: { display: true }, scales: { yAxes: [{ ticks: { beginAtZero: true, callback: function(v){ return v + '%'; } } }] } }
    });

    // Expense breakdown donut
    safeChart('expenseBreakdownChart', {
        type: 'doughnut',
        data: {
            labels: @json($expenseBreakdownLabels),
            datasets: [{ data: @json($expenseBreakdownValues), backgroundColor: ['#e74a3b','#f6c23e','#36b9cc','#4e73df','#1cc88a','#858796'] }]
        },
        options: { maintainAspectRatio: false, legend: { display: true, position: 'bottom' }, cutoutPercentage: 60 }
    });

    // Quotation conversion pie
    safeChart('quotationConversionPieChart', {
        type: 'doughnut',
        data: {
            labels: ['Converted', 'Not Converted', 'Expired', 'Rejected'],
            datasets: [{
                data: [
                    @json($quotationStats['converted']    ?? 0),
                    @json($quotationStats['not_converted']?? 0),
                    @json($quotationStats['expired']      ?? 0),
                    @json($quotationStats['rejected']     ?? 0)
                ],
                backgroundColor: ['#1cc88a','#e74a3b','#f6c23e','#858796']
            }]
        },
        options: { maintainAspectRatio: false, legend: { display: true, position: 'bottom' }, cutoutPercentage: 55 }
    });

    // Quotation monthly trend (created vs converted)
    safeChart('quotationMonthlyTrendChart', {
        type: 'bar',
        data: {
            labels: @json($quotationMonthlyLabels ?? $revExpLabels),
            datasets: [
                { label: 'Created',   data: @json($quotationMonthlyCreated   ?? []), backgroundColor: 'rgba(78,115,223,0.8)' },
                { label: 'Converted', data: @json($quotationMonthlyConverted ?? []), backgroundColor: 'rgba(28,200,138,0.8)' }
            ]
        },
        options: { maintainAspectRatio: false, legend: { display: true }, scales: { yAxes: [{ ticks: { beginAtZero: true } }] } }
    });

});
</script>
@endsection