@extends('master.app')
@section('title', 'Dashboard')

@section('body')
   <style>
    :root{
        /* Light theme + dark red accent */
        --bg:#f5f6f8;
        --card:#ffffff;
        --card2:#ffffff;

        --text:#111111;              /* ✅ black */
        --muted:#4b5563;

        --border:rgba(17,17,17,.12);
        --border2:rgba(17,17,17,.18);

        --gold:#f6c343;
        --good:#16a34a;
        --bad:#dc2626;

        --red1:#b02424;
        --red2:#6c1414;
        --redGlow:rgba(176,36,36,.14);
    }

    body{
        background:
            radial-gradient(1200px 650px at 18% 0%, rgba(176,36,36,.10), transparent 60%),
            radial-gradient(1000px 520px at 88% 10%, rgba(246,195,67,.10), transparent 55%),
            var(--bg) !important;
        color: var(--text) !important;
    }

    .dash-wrap{ padding: 10px 4px 30px; }

    /* HERO */
    .dash-hero{
        background:
            radial-gradient(900px 500px at 12% 10%, rgba(176,36,36,.18), transparent 60%),
            radial-gradient(900px 500px at 90% 30%, rgba(246,195,67,.12), transparent 60%),
            linear-gradient(180deg, rgba(255,255,255,1), rgba(255,255,255,.96));
        border: 1px solid var(--border2);
        border-radius: 22px;
        padding: 18px 18px;
        color: var(--text);
        box-shadow: 0 18px 45px rgba(0,0,0,.10);
        margin-bottom: 18px;
        position:relative;
    }

    .dash-hero:after{
        content:"";
        position:absolute;
        inset:0;
        border-radius:22px;
        pointer-events:none;
        box-shadow: inset 0 0 0 1px rgba(255,255,255,.6);
    }

    .dash-title{
        font-weight: 900;
        margin: 0;
        color: var(--text);
        letter-spacing: .2px;
    }

    .dash-sub{
        color: var(--muted);
        margin: 6px 0 0;
    }

    /* Pills */
    .pill{
        display:inline-flex;
        align-items:center;
        gap:8px;
        padding:8px 12px;
        border-radius:999px;
        border:1px solid var(--border2);
        background: rgba(176,36,36,.06);
        color: var(--text);
        font-size: 12px;
    }
    .pill i{ color: var(--red1); }

    /* Quick actions */
    .quick-actions a{
        display:inline-flex;
        align-items:center;
        gap:8px;
        padding:10px 12px;
        border-radius:14px;
        border:1px solid var(--border2);
        background: #fff;
        color: var(--text);
        text-decoration:none;
        margin:6px 6px 0 0;
        transition:.2s ease;
        font-size: 13px;
        box-shadow: 0 10px 22px rgba(0,0,0,.06);
    }
    .quick-actions a i{ color: var(--red1); }
    .quick-actions a:hover{
        transform: translateY(-1px);
        border-color: rgba(176,36,36,.35);
        box-shadow: 0 14px 28px rgba(0,0,0,.10);
        background: rgba(176,36,36,.06);
    }

    /* KPI Cards */
    .kpi-card{
        background: linear-gradient(180deg, #ffffff, #fbfbfb);
        border: 1px solid var(--border2);
        border-radius: 18px;
        padding: 16px;
        box-shadow: 0 14px 30px rgba(0,0,0,.08);
        height: 100%;
        position: relative;
        overflow: hidden;
    }

    .kpi-card:before{
        content:"";
        position:absolute;
        inset:-40px -60px auto auto;
        width:180px;height:180px;
        background: radial-gradient(circle at center, var(--redGlow), transparent 65%);
        transform: rotate(12deg);
    }

    .kpi-top{
        display:flex;
        align-items:center;
        justify-content:space-between;
        gap:10px;
    }

    .kpi-label{ color: var(--muted); font-size: 12px; margin: 0; }
    .kpi-value{ font-size: 26px; font-weight: 900; margin: 6px 0 0; color: var(--text); }
    .kpi-foot{ margin-top: 10px; color: var(--muted); font-size: 12px; }

    .kpi-icon{
        width:44px;height:44px;
        border-radius:14px;
        display:flex;align-items:center;justify-content:center;
        border:1px solid rgba(176,36,36,.25);
        background: rgba(176,36,36,.08);
        font-size:18px;
        color: var(--red1);
    }

    /* Panels */
    .panel{
        background: #fff;
        border:1px solid var(--border2);
        border-radius: 18px;
        box-shadow: 0 14px 30px rgba(0,0,0,.08);
        overflow:hidden;
        height:100%;
        position:relative;
    }

    .panel-h{
        padding: 14px 16px;
        border-bottom: 1px solid var(--border);
        display:flex;
        align-items:center;
        justify-content:space-between;
        gap:10px;
        background: linear-gradient(90deg, rgba(176,36,36,.12), rgba(255,255,255,1));
        color: var(--text);
    }

    .panel-h h5{
        margin:0;
        font-weight: 900;
        font-size: 14px;
        color: var(--text);
    }

    .panel-b{ padding: 14px 16px; color: var(--text); }

    /* Tables (lines visible) */
    .mini-table{ width:100%; }
    .mini-table td{
        padding: 12px 0;
        border-bottom: 1px solid rgba(17,17,17,.12);
        color: var(--text);
    }
    .mini-table tr:last-child td{ border-bottom:0; }

    .muted{ color: var(--muted) !important; }
    .amt{ font-weight: 800; color: var(--text); }

    .good{ color: var(--good) !important; }
    .bad{ color: var(--bad) !important; }

    /* ApexCharts -> ensure black labels */
    .apexcharts-title-text,
    .apexcharts-legend-text,
    .apexcharts-xaxis-label,
    .apexcharts-yaxis-label{
        fill: rgba(17,17,17,.75) !important;
        color: rgba(17,17,17,.75) !important;
    }
</style>





    <main class="app-content">
        <div class="dash-hero">
            <div class="d-flex flex-wrap align-items-center justify-content-between gap-2">
                <div>
                    <h3 class="dash-title">Finance Dashboard</h3>
                    <p class="dash-sub">Today: <strong>{{ $todayStr }}</strong> • Multi-currency overview • Clean &
                        executive style</p>
                </div>
                <div class="d-flex flex-wrap gap-2">
                    <span class="pill"><i class="fas fa-users"></i> Customers:
                        <strong>{{ number_format($customers) }}</strong></span>
                    <span class="pill"><i class="fas fa-truck"></i> Suppliers:
                        <strong>{{ number_format($suppliers) }}</strong></span>
                    <span class="pill"><i class="fas fa-user-tie"></i> Employees:
                        <strong>{{ number_format($employees) }}</strong></span>
                </div>
            </div>

            <div class="quick-actions mt-3">
                <a href="{{ route('customer_bill.index') }}"><i class="fas fa-receipt"></i> Sales</a>
                <a href="{{ route('customer_recieved.index') }}"><i class="fas fa-hand-holding-usd"></i> Receipts</a>
                <a href="{{ route('msupplier_bill.index') }}"><i class="fas fa-cart-plus"></i> Purchase</a>
                <a href="{{ route('msupplier_payment.index') }}"><i class="fas fa-money-check-alt"></i> Payments</a>
                <a href="{{ route('customers.index') }}"><i class="fas fa-address-book"></i> Customers</a>
                <a href="{{ route('suppliers.index') }}"><i class="fas fa-warehouse"></i> Suppliers</a>
            </div>
        </div>

        {{-- KPIs --}}
        <div class="row">
            <div class="col-lg-3 col-md-6 mb-3">
                <div class="kpi-card">
                    <div class="kpi-top">
                        <div>
                            <p class="kpi-label">Total Sales (Today)</p>
                            <div class="kpi-value">{{ number_format($totalSalesToday, 2) }}</div>
                        </div>
                        <div class="kpi-icon"><i class="fas fa-chart-line"></i></div>
                    </div>
                    <div class="kpi-foot">Sum of all currencies • from invoices today</div>
                </div>
            </div>

            <div class="col-lg-3 col-md-6 mb-3">
                <div class="kpi-card">
                    <div class="kpi-top">
                        <div>
                            <p class="kpi-label">Total Receipts (Today)</p>
                            <div class="kpi-value">{{ number_format($totalReceiptsToday, 2) }}</div>
                        </div>
                        <div class="kpi-icon"><i class="fas fa-wallet"></i></div>
                    </div>
                    <div class="kpi-foot">Cash/Bank receipts today • multi-currency</div>
                </div>
            </div>

            <div class="col-lg-3 col-md-6 mb-3">
                <div class="kpi-card">
                    <div class="kpi-top">
                        <div>
                            <p class="kpi-label">Net (Today)</p>
                            <div class="kpi-value {{ $netToday >= 0 ? 'good' : 'bad' }}">
                                {{ number_format($netToday, 2) }}
                            </div>
                        </div>
                        <div class="kpi-icon"><i class="fas fa-balance-scale"></i></div>
                    </div>
                    <div class="kpi-foot">Receipts − Payments − Expenses (today)</div>
                </div>
            </div>

            <div class="col-lg-3 col-md-6 mb-3">
                <div class="kpi-card">
                    <div class="kpi-top">
                        <div>
                            <p class="kpi-label">Expenses (Today)</p>
                            <div class="kpi-value">{{ number_format($expenseTodayTotal, 2) }}</div>
                        </div>
                        <div class="kpi-icon"><i class="fas fa-file-invoice-dollar"></i></div>
                    </div>
                    <div class="kpi-foot">Total expense journals today</div>
                </div>
            </div>
        </div>

        {{-- Charts --}}
        <div class="row mt-2">
            <div class="col-lg-6 mb-3">
                <div class="panel">
                    <div class="panel-h">
                        <h5><i class="fas fa-chart-area mr-2"></i> Sales Trend (Last 12 Months)</h5>
                        <span class="pill"><i class="fas fa-coins"></i> By Currency</span>
                    </div>
                    <div class="panel-b">
                        <div id="salesChart" style="min-height:320px;"></div>
                        <div class="muted mt-2">High-level trend for management view (per currency series).</div>
                    </div>
                </div>
            </div>

            <div class="col-lg-6 mb-3">
                <div class="panel">
                    <div class="panel-h">
                        <h5><i class="fas fa-chart-area mr-2"></i> Receipts Trend (Last 12 Months)</h5>
                        <span class="pill"><i class="fas fa-hand-holding-usd"></i> By Currency</span>
                    </div>
                    <div class="panel-b">
                        <div id="receiptsChart" style="min-height:320px;"></div>
                        <div class="muted mt-2">Shows collection performance across months.</div>
                    </div>
                </div>
            </div>
        </div>

        {{-- Today Breakdown + Outstanding --}}
        <div class="row">
            <div class="col-lg-6 mb-3">
                <div class="panel">
                    <div class="panel-h">
                        <h5><i class="fas fa-calendar-day mr-2"></i> Today Summary ({{ $todayStr }})</h5>
                        <span class="pill"><i class="fas fa-layer-group"></i> Multi-currency</span>
                    </div>
                    <div class="panel-b">
                        <table class="mini-table">
                            <tbody>
                                @foreach ($currencies as $c)
                                    @php
                                        $sid = $c->id;
                                        $sale = (float) ($saleTodayByCurrency[$sid] ?? 0);
                                        $rec = (float) ($receivedTodayByCurrency[$sid] ?? 0);
                                    @endphp
                                    <tr>
                                        <td>
                                            <div style="font-weight:800;">{{ $c->title_en ?? $c->title_ps }}</div>
                                            <div class="muted" style="font-size:12px;">Sales vs Receipts</div>
                                        </td>
                                        <td class="text-right">
                                            <div class="amt">Sales: {{ number_format($sale, 2) }}</div>
                                            <div class="amt muted">Receipts: {{ number_format($rec, 2) }}</div>
                                        </td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>

                        <div class="muted mt-2">This section helps you see today’s activity per currency quickly.</div>
                    </div>
                </div>
            </div>

            <div class="col-lg-6 mb-3">
                <div class="panel">
                    <div class="panel-h">
                        <h5><i class="fas fa-exclamation-circle mr-2"></i> Outstanding (AR / AP)</h5>
                        <span class="pill"><i class="fas fa-clock"></i> To-date</span>
                    </div>
                    <div class="panel-b">
                        <table class="mini-table">
                            <tbody>
                                @foreach ($currencies as $c)
                                    @php
                                        $cid = $c->id;
                                        $ar = (float) ($outstandingAR[$cid] ?? 0);
                                        $ap = (float) ($outstandingAP[$cid] ?? 0);
                                    @endphp
                                    <tr>
                                        <td>
                                            <div style="font-weight:800;">{{ $c->title_en ?? $c->title_ps }}</div>
                                            <div class="muted" style="font-size:12px;">Receivable / Payable</div>
                                        </td>
                                        <td class="text-right">
                                            <div class="amt {{ $ar >= 0 ? 'good' : 'bad' }}">AR:
                                                {{ number_format($ar, 2) }}</div>
                                            <div class="amt {{ $ap >= 0 ? 'bad' : 'good' }}">AP:
                                                {{ number_format($ap, 2) }}</div>
                                        </td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>

                        <div class="muted mt-2">
                            Outstanding is calculated as: <strong>Sales − Receipts − Advances</strong> (AR) and
                            <strong>Purchase − Payments − Advances</strong> (AP).
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </main>



@endsection

@section('pageJs')
    <script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
    <script>
        const months = @json($months);
        const salesSeries = @json($salesSeries);
        const receiptsSeries = @json($receiptsSeries);

        const baseOptions = {
            chart: {
                type: 'area',
                height: 320,
                toolbar: {
                    show: false
                },
                zoom: {
                    enabled: false
                }
            },
            dataLabels: {
                enabled: false
            },
            stroke: {
                curve: 'smooth',
                width: 2
            },
            grid: {
                borderColor: 'rgba(255,255,255,.08)'
            },
            xaxis: {
                categories: months,
                labels: {
                    style: {
                        colors: 'rgba(255,255,255,.65)'
                    }
                }
            },
            yaxis: {
                labels: {
                    style: {
                        colors: 'rgba(255,255,255,.65)'
                    }
                }
            },
            legend: {
                labels: {
                    colors: 'rgba(255,255,255,.80)'
                },
                position: 'top'
            },
            tooltip: {
                theme: 'dark'
            },
            fill: {
                type: 'gradient',
                gradient: {
                    shadeIntensity: 1,
                    opacityFrom: 0.35,
                    opacityTo: 0.05
                }
            }
        };

        new ApexCharts(document.querySelector("#salesChart"), {
            ...baseOptions,
            series: salesSeries,
            title: {
                text: 'Sales',
                style: {
                    color: 'rgba(255,255,255,.85)',
                    fontWeight: 800
                }
            }
        }).render();

        new ApexCharts(document.querySelector("#receiptsChart"), {
            ...baseOptions,
            series: receiptsSeries,
            title: {
                text: 'Receipts',
                style: {
                    color: 'rgba(255,255,255,.85)',
                    fontWeight: 800
                }
            }
        }).render();
    </script>
@endsection