@extends('layout.master')

@section('title', 'Dashboard')
@section('header-title', 'Dashboard')

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

                {{-- =========================================================
                 NOTE FOR DEV:
                 - Total Users and Total Leads are now LIVE (from DashboardController).
                 - Clients, Invoices, Revenue, Expenses, and chart data are
                   still STATIC/dummy — wire those up the same way
                   (pass from controller, replace hardcoded values here)
                   once you're ready.
            ========================================================== --}}

                <!-- Page Header -->
                <div class="dash-header">
                    <div>
                        <h4 class="dash-title">Dashboard</h4>
                        <p class="dash-subtitle">Welcome back, <strong>{{ Auth::user()->name ?? 'Admin' }}</strong> 👋</p>
                    </div>
                    <div class="dash-date-pill">
                        <i class="mdi mdi-calendar-blank-outline"></i>
                        <span>{{ now()->format('d M Y') }}</span>
                    </div>
                </div>

                <!-- ROW 1 — Core Stats -->
                <div class="row g-3 mb-3">

                    <div class="col-6 col-md-6 col-xl-3">
                        <div class="stat-card stat-blue">
                            <div class="stat-icon"><i class="mdi mdi-account-group-outline"></i></div>
                            <p class="stat-label">Total Users</p>
                            <h2 class="stat-value">{{ $totalUsers }}</h2>
                            <span class="stat-chip up">All Time</span>
                        </div>
                    </div>

                    <div class="col-6 col-md-6 col-xl-3">
                        <div class="stat-card stat-green">
                            <div class="stat-icon"><i class="mdi mdi-account-tie-outline"></i></div>
                            <p class="stat-label">Total Clients</p>
                            <h2 class="stat-value">64</h2>
                            <span class="stat-chip up">All Time</span>
                        </div>
                    </div>

                    <div class="col-6 col-md-6 col-xl-3">
                        <div class="stat-card stat-amber">
                            <div class="stat-icon"><i class="mdi mdi-bullseye-arrow"></i></div>
                            <p class="stat-label">Total Leads</p>
                            <h2 class="stat-value">{{ $totalLeads }}</h2>
                            <span class="stat-chip up">All Time</span>
                        </div>
                    </div>

                    <div class="col-6 col-md-6 col-xl-3">
                        <div class="stat-card stat-violet">
                            <div class="stat-icon"><i class="mdi mdi-receipt-text-outline"></i></div>
                            <p class="stat-label">Total Invoices</p>
                            <h2 class="stat-value">97</h2>
                            <span class="stat-chip up">All Time</span>
                        </div>
                    </div>

                </div>
                <!-- End Row 1 -->

                <!-- ROW 2 — Finance Stats -->
                <div class="row g-3 mb-3">

                    <div class="col-6 col-md-6 col-xl-4">
                        <div class="finance-card finance-revenue">
                            <div class="finance-top">
                                <div>
                                    <p class="stat-label">Total Revenue</p>
                                    <span class="stat-sublabel">Company Sales</span>
                                </div>
                                <div class="stat-icon"><i class="mdi mdi-trending-up"></i></div>
                            </div>
                            <h2 class="stat-value">2,540,000</h2>
                            <span class="stat-chip up">This Year</span>
                        </div>
                    </div>

                    <div class="col-6 col-md-6 col-xl-4">
                        <div class="finance-card finance-expense">
                            <div class="finance-top">
                                <div>
                                    <p class="stat-label">Total Expenses</p>
                                    <span class="stat-sublabel">Supplier + Self</span>
                                </div>
                                <div class="stat-icon"><i class="mdi mdi-trending-down"></i></div>
                            </div>
                            <h2 class="stat-value">1,120,000</h2>
                            <span class="stat-chip down">This Year</span>
                        </div>
                    </div>

                    <div class="col-12 col-md-12 col-xl-4">
                        <div class="finance-card finance-profit">
                            <div class="finance-top">
                                <div>
                                    <p class="stat-label">Net Profit</p>
                                    <span class="stat-sublabel">Revenue − Expenses</span>
                                </div>
                                <div class="stat-icon"><i class="mdi mdi-cash-multiple"></i></div>
                            </div>
                            <h2 class="stat-value">1,420,000</h2>
                            <span class="stat-chip up">Revenue − Expenses</span>
                        </div>
                    </div>

                </div>
                <!-- End Row 2 -->

                <!-- ROW 3 — Expense Split (Supplier vs Self) -->
                <div class="row g-3 mb-3">

                    <div class="col-12 col-lg-6">
                        <div class="panel-card h-100">
                            <div class="panel-head">
                                <h5>Expense Breakdown</h5>
                                <span class="panel-sub">Supplier vs Self</span>
                            </div>
                            <div class="panel-body">
                                <div id="expense-split-chart" class="chart-wrap-sm"></div>
                            </div>
                        </div>
                    </div>

                    <div class="col-12 col-lg-6">
                        <div class="panel-card h-100">
                            <div class="panel-head">
                                <h5>Expense Sources</h5>
                                <span class="panel-sub">{{ now()->format('Y') }}</span>
                            </div>
                            <div class="panel-body">

                                <div class="source-row">
                                    <div class="source-info">
                                        <span class="source-dot dot-supplier"></span>
                                        <div>
                                            <p class="source-name">Supplier Expenses</p>
                                            <span class="source-desc">Purchases &amp; vendor payments</span>
                                        </div>
                                    </div>
                                    <div class="source-amount">
                                        <strong>780,000</strong>
                                        <span class="source-percent">70%</span>
                                    </div>
                                </div>

                                <div class="source-row">
                                    <div class="source-info">
                                        <span class="source-dot dot-self"></span>
                                        <div>
                                            <p class="source-name">Self Expenses</p>
                                            <span class="source-desc">Internal / personal spend</span>
                                        </div>
                                    </div>
                                    <div class="source-amount">
                                        <strong>340,000</strong>
                                        <span class="source-percent">30%</span>
                                    </div>
                                </div>

                            </div>
                        </div>
                    </div>

                </div>
                <!-- End Row 3 -->

                <!-- ROW 4 — Chart + Top Categories -->
                <div class="row g-3 mb-3">

                    <!-- Revenue vs Expenses Chart -->
                    <div class="col-12 col-xl-8">
                        <div class="panel-card h-100">
                            <div class="panel-head">
                                <h5>Revenue vs Expenses</h5>
                                <span class="panel-sub">{{ now()->format('Y') }} — Monthly Overview</span>
                            </div>
                            <div class="panel-body">
                                <div id="crm-chart" class="chart-wrap"></div>
                            </div>
                        </div>
                    </div>

                    <!-- Top Expense Categories -->
                    <div class="col-12 col-xl-4">
                        <div class="panel-card h-100">
                            <div class="panel-head">
                                <h5>Top Expense Categories</h5>
                                <span class="panel-sub">{{ now()->format('Y') }}</span>
                            </div>
                            <div class="panel-body">

                                <div class="cat-row">
                                    <div class="cat-top">
                                        <span class="cat-name">Raw Material (Supplier)</span>
                                        <span class="cat-amount">420,000</span>
                                    </div>
                                    <div class="cat-bar">
                                        <div class="cat-fill" style="width:38%"></div>
                                    </div>
                                </div>

                                <div class="cat-row">
                                    <div class="cat-top">
                                        <span class="cat-name">Office Rent (Self)</span>
                                        <span class="cat-amount">210,000</span>
                                    </div>
                                    <div class="cat-bar">
                                        <div class="cat-fill fill-2" style="width:19%"></div>
                                    </div>
                                </div>

                                <div class="cat-row">
                                    <div class="cat-top">
                                        <span class="cat-name">Logistics (Supplier)</span>
                                        <span class="cat-amount">180,000</span>
                                    </div>
                                    <div class="cat-bar">
                                        <div class="cat-fill fill-3" style="width:16%"></div>
                                    </div>
                                </div>

                                <div class="cat-row">
                                    <div class="cat-top">
                                        <span class="cat-name">Utilities (Self)</span>
                                        <span class="cat-amount">95,000</span>
                                    </div>
                                    <div class="cat-bar">
                                        <div class="cat-fill fill-4" style="width:9%"></div>
                                    </div>
                                </div>

                            </div>
                        </div>
                    </div>

                </div>
                <!-- End Row 4 -->

                <!-- ROW 5 — Recent Expenses -->
                <div class="row g-3 mb-3">
                    <div class="col-12">
                        <div class="panel-card">
                            <div class="panel-head">
                                <h5>Recent Expenses</h5>
                                <a href="{{ route('expense.transaction.index') }}" class="btn-view-all">View All</a>
                            </div>
                            <div class="panel-body p-0">
                                <div class="table-responsive">
                                    <table class="dash-table">
                                        <thead>
                                            <tr>
                                                <th>Category</th>
                                                <th>Type</th>
                                                <th>Currency</th>
                                                <th>Date</th>
                                                <th class="text-end">Amount</th>
                                                <th class="text-end">PKR Equivalent</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            <tr>
                                                <td class="fw-medium">Raw Material</td>
                                                <td><span class="badge-type type-supplier">Supplier</span></td>
                                                <td><span class="badge-currency ccy-usd">USD</span></td>
                                                <td>12 Jul 2026</td>
                                                <td class="text-end fw-semibold">1,250.00 USD</td>
                                                <td class="text-end fw-semibold text-accent">348,750.00</td>
                                            </tr>
                                            <tr>
                                                <td class="fw-medium">Office Rent</td>
                                                <td><span class="badge-type type-self">Self</span></td>
                                                <td><span class="badge-currency ccy-pkr">PKR</span></td>
                                                <td>10 Jul 2026</td>
                                                <td class="text-end fw-semibold">85,000.00 PKR</td>
                                                <td class="text-end fw-semibold text-accent">85,000.00</td>
                                            </tr>
                                            <tr>
                                                <td class="fw-medium">Logistics</td>
                                                <td><span class="badge-type type-supplier">Supplier</span></td>
                                                <td><span class="badge-currency ccy-pkr">PKR</span></td>
                                                <td>08 Jul 2026</td>
                                                <td class="text-end fw-semibold">62,000.00 PKR</td>
                                                <td class="text-end fw-semibold text-accent">62,000.00</td>
                                            </tr>
                                            <tr>
                                                <td class="fw-medium">Travel</td>
                                                <td><span class="badge-type type-self">Self</span></td>
                                                <td><span class="badge-currency ccy-usd">USD</span></td>
                                                <td>05 Jul 2026</td>
                                                <td class="text-end fw-semibold">140.00 USD</td>
                                                <td class="text-end fw-semibold text-accent">39,060.00</td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- End Row 5 -->

            </div>
        </div>
    </div>

    <style>
        :root {
            --ink: #101828;
            --muted: #667085;
            --line: #eef0f4;
            --card-bg: #ffffff;
            --page-bg: #f6f7fb;
            --blue: #4f6bff;
            --green: #17b26a;
            --amber: #f79009;
            --violet: #9b6bff;
            --red: #f04438;
            --blue-soft: #eef1ff;
            --green-soft: #e9fbf2;
            --amber-soft: #fff6e8;
            --violet-soft: #f4eeff;
            --red-soft: #fef0ef;
            --radius: 16px;
        }

        .content-page {
            background: var(--page-bg);
        }

        /* Header */
        .dash-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            flex-wrap: wrap;
            gap: .75rem;
            padding: 1.25rem 0 1rem;
        }

        .dash-title {
            font-size: 1.5rem;
            font-weight: 700;
            color: var(--ink);
            margin: 0;
        }

        .dash-subtitle {
            color: var(--muted);
            margin: .15rem 0 0;
            font-size: .85rem;
        }

        .dash-date-pill {
            display: inline-flex;
            align-items: center;
            gap: .4rem;
            background: #fff;
            border: 1px solid var(--line);
            color: var(--ink);
            padding: .45rem .9rem;
            border-radius: 999px;
            font-size: .8rem;
            font-weight: 600;
            box-shadow: 0 1px 2px rgba(16, 24, 40, .04);
        }

        .dash-date-pill i {
            color: var(--blue);
        }

        /* Stat cards */
        .stat-card {
            background: var(--card-bg);
            border: 1px solid var(--line);
            border-radius: var(--radius);
            padding: 1.1rem 1.15rem;
            height: 100%;
            position: relative;
            overflow: hidden;
            box-shadow: 0 1px 3px rgba(16, 24, 40, .04);
            transition: transform .15s ease, box-shadow .15s ease;
        }

        .stat-card:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 20px rgba(16, 24, 40, .08);
        }

        .stat-icon {
            width: 38px;
            height: 38px;
            border-radius: 11px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.15rem;
            margin-bottom: .6rem;
        }

        .stat-blue .stat-icon {
            background: var(--blue-soft);
            color: var(--blue);
        }

        .stat-green .stat-icon {
            background: var(--green-soft);
            color: var(--green);
        }

        .stat-amber .stat-icon {
            background: var(--amber-soft);
            color: var(--amber);
        }

        .stat-violet .stat-icon {
            background: var(--violet-soft);
            color: var(--violet);
        }

        .stat-label {
            color: var(--muted);
            font-size: .78rem;
            font-weight: 600;
            margin: 0;
            text-transform: uppercase;
            letter-spacing: .02em;
        }

        .stat-sublabel {
            color: var(--muted);
            font-size: .72rem;
        }

        .stat-value {
            font-size: 1.55rem;
            font-weight: 700;
            color: var(--ink);
            margin: .2rem 0 .5rem;
        }

        .stat-chip {
            display: inline-flex;
            align-items: center;
            font-size: .7rem;
            font-weight: 600;
            padding: .2rem .55rem;
            border-radius: 999px;
        }

        .stat-chip.up {
            background: var(--green-soft);
            color: var(--green);
        }

        .stat-chip.down {
            background: var(--red-soft);
            color: var(--red);
        }

        /* Finance cards */
        .finance-card {
            border-radius: var(--radius);
            padding: 1.15rem 1.25rem;
            height: 100%;
            border: 1px solid var(--line);
            box-shadow: 0 1px 3px rgba(16, 24, 40, .04);
            background: var(--card-bg);
        }

        .finance-top {
            display: flex;
            align-items: flex-start;
            justify-content: space-between;
            margin-bottom: .4rem;
        }

        .finance-revenue .stat-icon {
            background: var(--green-soft);
            color: var(--green);
        }

        .finance-expense .stat-icon {
            background: var(--red-soft);
            color: var(--red);
        }

        .finance-profit .stat-icon {
            background: var(--blue-soft);
            color: var(--blue);
        }

        /* Panels */
        .panel-card {
            background: var(--card-bg);
            border: 1px solid var(--line);
            border-radius: var(--radius);
            box-shadow: 0 1px 3px rgba(16, 24, 40, .04);
            overflow: hidden;
        }

        .panel-head {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 1rem 1.25rem;
            border-bottom: 1px solid var(--line);
        }

        .panel-head h5 {
            margin: 0;
            font-weight: 700;
            font-size: .95rem;
            color: var(--ink);
        }

        .panel-sub {
            font-size: .75rem;
            color: var(--muted);
        }

        .panel-body {
            padding: 1.15rem 1.25rem;
        }

        .chart-wrap {
            min-height: 280px;
        }

        .chart-wrap-sm {
            min-height: 220px;
        }

        .btn-view-all {
            font-size: .78rem;
            font-weight: 600;
            color: var(--blue);
            text-decoration: none;
            border: 1px solid var(--blue-soft);
            background: var(--blue-soft);
            padding: .35rem .8rem;
            border-radius: 8px;
        }

        .btn-view-all:hover {
            background: var(--blue);
            color: #fff;
        }

        /* Expense source rows */
        .source-row {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: .85rem 0;
            border-bottom: 1px dashed var(--line);
        }

        .source-row:last-child {
            border-bottom: none;
        }

        .source-info {
            display: flex;
            align-items: center;
            gap: .65rem;
        }

        .source-dot {
            width: 10px;
            height: 10px;
            border-radius: 50%;
            flex-shrink: 0;
        }

        .dot-supplier {
            background: var(--blue);
        }

        .dot-self {
            background: var(--violet);
        }

        .source-name {
            margin: 0;
            font-weight: 600;
            font-size: .85rem;
            color: var(--ink);
        }

        .source-desc {
            font-size: .72rem;
            color: var(--muted);
        }

        .source-amount {
            text-align: right;
        }

        .source-amount strong {
            display: block;
            font-size: .9rem;
            color: var(--ink);
        }

        .source-percent {
            font-size: .72rem;
            color: var(--muted);
        }

        /* Category bars */
        .cat-row {
            margin-bottom: 1rem;
        }

        .cat-row:last-child {
            margin-bottom: 0;
        }

        .cat-top {
            display: flex;
            justify-content: space-between;
            margin-bottom: .3rem;
        }

        .cat-name {
            font-size: .8rem;
            font-weight: 600;
            color: var(--ink);
        }

        .cat-amount {
            font-size: .75rem;
            color: var(--muted);
        }

        .cat-bar {
            height: 7px;
            border-radius: 999px;
            background: #f1f2f6;
            overflow: hidden;
        }

        .cat-fill {
            height: 100%;
            background: var(--blue);
            border-radius: 999px;
        }

        .cat-fill.fill-2 {
            background: var(--violet);
        }

        .cat-fill.fill-3 {
            background: var(--amber);
        }

        .cat-fill.fill-4 {
            background: var(--green);
        }

        /* Table */
        .dash-table {
            width: 100%;
            margin: 0;
            border-collapse: collapse;
        }

        .dash-table thead th {
            background: #fafbfc;
            color: var(--muted);
            font-size: .72rem;
            text-transform: uppercase;
            letter-spacing: .03em;
            font-weight: 700;
            padding: .85rem 1.25rem;
            border-bottom: 1px solid var(--line);
        }

        .dash-table tbody td {
            padding: .9rem 1.25rem;
            font-size: .85rem;
            color: var(--ink);
            border-bottom: 1px solid var(--line);
        }

        .dash-table tbody tr:last-child td {
            border-bottom: none;
        }

        .text-accent {
            color: var(--blue);
        }

        .badge-type {
            font-size: .7rem;
            font-weight: 700;
            padding: .25rem .6rem;
            border-radius: 999px;
        }

        .type-supplier {
            background: var(--blue-soft);
            color: var(--blue);
        }

        .type-self {
            background: var(--violet-soft);
            color: var(--violet);
        }

        .badge-currency {
            font-size: .7rem;
            font-weight: 700;
            padding: .25rem .6rem;
            border-radius: 999px;
        }

        .ccy-usd {
            background: var(--green-soft);
            color: var(--green);
        }

        .ccy-pkr {
            background: var(--blue-soft);
            color: var(--blue);
        }

        /* Responsive tweaks */
        @media (max-width: 575.98px) {

            .stat-card,
            .finance-card {
                padding: .9rem;
            }

            .stat-value {
                font-size: 1.2rem;
            }

            .dash-title {
                font-size: 1.25rem;
            }

            .chart-wrap {
                min-height: 220px;
            }

            .panel-body {
                padding: 1rem;
            }

            .dash-table thead th,
            .dash-table tbody td {
                padding: .7rem .85rem;
                font-size: .78rem;
            }
        }
    </style>

    {{-- ApexCharts — already loaded in master.blade.php --}}
    <script>
        document.addEventListener('DOMContentLoaded', function() {

            /* ===== Revenue vs Expenses (line/area) — STATIC SAMPLE DATA ===== */
            var revenueExpenseOptions = {
                series: [{
                        name: 'Revenue',
                        data: [180, 210, 195, 240, 260, 230, 250, 270, 300, 290, 310, 320]
                    },
                    {
                        name: 'Expenses',
                        data: [90, 110, 95, 120, 130, 115, 125, 140, 150, 145, 155, 160]
                    }
                ],
                chart: {
                    type: 'area',
                    height: 300,
                    toolbar: {
                        show: false
                    },
                    fontFamily: 'inherit'
                },
                colors: ['#4f6bff', '#f04438'],
                fill: {
                    type: 'gradient',
                    gradient: {
                        shadeIntensity: 1,
                        opacityFrom: 0.35,
                        opacityTo: 0.05,
                        stops: [0, 90, 100]
                    }
                },
                stroke: {
                    curve: 'smooth',
                    width: 2.5
                },
                dataLabels: {
                    enabled: false
                },
                xaxis: {
                    categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov',
                        'Dec'
                    ],
                    axisBorder: {
                        show: false
                    },
                    axisTicks: {
                        show: false
                    },
                    labels: {
                        style: {
                            colors: '#9CA3AF',
                            fontSize: '11px'
                        }
                    }
                },
                yaxis: {
                    labels: {
                        style: {
                            colors: '#9CA3AF',
                            fontSize: '11px'
                        }
                    }
                },
                grid: {
                    borderColor: '#f1f1f1',
                    strokeDashArray: 4
                },
                legend: {
                    position: 'top',
                    horizontalAlign: 'right',
                    fontSize: '12px'
                },
                tooltip: {
                    theme: 'light'
                },
                responsive: [{
                    breakpoint: 576,
                    options: {
                        chart: {
                            height: 240
                        },
                        legend: {
                            position: 'bottom',
                            horizontalAlign: 'center'
                        }
                    }
                }]
            };
            new ApexCharts(document.querySelector("#crm-chart"), revenueExpenseOptions).render();

            var expenseSplitOptions = {
                series: [70, 30],
                labels: ['Supplier Expenses', 'Self Expenses'],
                chart: {
                    type: 'donut',
                    height: 220,
                    fontFamily: 'inherit'
                },
                colors: ['#4f6bff', '#9b6bff'],
                legend: {
                    position: 'bottom',
                    fontSize: '12px'
                },
                dataLabels: {
                    enabled: true,
                    style: {
                        fontSize: '11px'
                    }
                },
                plotOptions: {
                    pie: {
                        donut: {
                            size: '65%'
                        }
                    }
                },
                stroke: {
                    width: 0
                }
            };
            new ApexCharts(document.querySelector("#expense-split-chart"), expenseSplitOptions).render();

        });
    </script>

@endsection