@extends('Branch.layout')

@section('content')

    <style>
        :root {
            --pms-maroon: #3D1B1B;
            --pms-maroon-dark: #2A1010;
            --pms-gold: #F0B429;
            --pms-gold-soft: #FBDD8E;

            --bg-page: #F6F1E7;
            --bg-card: #FFFFFF;
            --bg-subtle: #FBF6EA;
            --text-main: #2A1B12;
            --text-muted: #8A7666;
            --border-soft: #EBE1CC;
            --shadow: 0 6px 24px rgba(61, 27, 27, 0.08);
            --success: #2E7D4F;
            --danger: #C0392B;
            --info: #2F6FA3;
        }

        [data-theme="dark"] {
            --bg-page: #17110C;
            --bg-card: #221912;
            --bg-subtle: #2A1F16;
            --text-main: #F3E9D8;
            --text-muted: #B6A48C;
            --border-soft: #3A2D20;
            --shadow: 0 6px 24px rgba(0, 0, 0, 0.45);
            --success: #6FCF97;
            --danger: #E07A6B;
            --info: #7BB4E0;
        }

        /* body{ background:var(--bg-page); } */

        .pms-hero {
            background: linear-gradient(135deg, var(--pms-maroon) 0%, var(--pms-maroon-dark) 100%);
            border-radius: 18px;
            /* border-radius: 18px; */
            box-shadow: var(--shadow);
            padding: 15px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            /* gap:20px; */
            flex-wrap: wrap;
            position: relative;
            overflow: hidden;
        }

        .pms-hero::after {
            content: "";
            position: absolute;
            right: -40px;
            top: -40px;
            width: 220px;
            height: 220px;
            border-radius: 50%;
            background: radial-gradient(circle, rgba(240, 180, 41, .18) 0%, transparent 70%);
        }

        .pms-hero-badge {
            background: var(--pms-gold);
            color: var(--pms-maroon-dark);
            font-weight: 700;
            padding: 6px 16px;
            border-radius: 999px;
            font-size: 12.5px;
            letter-spacing: .4px;
            text-transform: uppercase;
            display: inline-block;
            margin-bottom: 12px;
        }

        .pms-hero h3 {
            color: #FFF7E3;
            font-weight: 800;
            margin-bottom: 6px;
        }

        .pms-hero p {
            color: var(--pms-gold-soft);
            margin: 0;
            font-size: 11px;
        }

        .pms-hero-icon {
            width: 50px;
            height: 50px;
            border-radius: 50%;
            background: var(--pms-gold);
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
            box-shadow: 0 8px 20px rgba(0, 0, 0, .25);
            position: relative;
            z-index: 1;
        }

        .pms-hero-icon i {
            font-size: 38px;
            color: var(--pms-maroon-dark);
        }

        .pms-stat-card {
            /* background:var(--bg-card); */
            border: 1px solid var(--border-soft);
            border-radius: 16px;
            box-shadow: var(--shadow);
            padding: 20px 22px;
            height: 100%;
            transition: transform .15s ease, box-shadow .15s ease;
        }

        .pms-stat-card:hover {
            transform: translateY(-3px);
        }

        .pms-stat-top {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
        }

        .pms-stat-label {
            font-size: 12.5px;
            text-transform: uppercase;
            letter-spacing: .5px;
            /* font-weight:700; color:var(--text-muted); margin-bottom:6px; */
        }

        .pms-stat-value {
            font-size: 28px;
            font-weight: 800;
            /* color:var(--text-main); line-height:1;  */
        }

        .pms-stat-icon {
            width: 46px;
            height: 46px;
            border-radius: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
        }

        .pms-stat-icon i {
            font-size: 21px;
        }

        .pms-stat-icon.success {
            background: rgba(46, 125, 79, .12);
            color: var(--success);
        }

        .pms-stat-icon.primary {
            background: rgba(115, 103, 240, .12);
            color: #7367F0;
        }

        .pms-stat-icon.danger {
            background: rgba(192, 57, 43, .12);
            color: var(--danger);
        }

        .pms-stat-icon.info {
            background: rgba(47, 111, 163, .12);
            color: var(--info);
        }

        .pms-stat-icon.gold {
            background: rgba(240, 180, 41, .18);
            color: #B8790A;
        }

        [data-theme="dark"] .pms-stat-icon.gold {
            color: var(--pms-gold);
        }

        .pms-stat-footer {
            margin-top: 14px;
            padding-top: 12px;
            border-top: 1px dashed var(--border-soft);
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .pms-stat-link {
            font-size: 13px;
            font-weight: 700;
            text-decoration: none;
            /* color:var(--pms-maroon); */
            display: inline-flex;
            align-items: center;
            gap: 4px;
        }

        [data-theme="dark"] .pms-stat-link {
            color: var(--pms-gold);
        }

        .pms-stat-link:hover {
            text-decoration: underline;
        }

        .pms-stat-sub {
            font-size: 12px;
            color: var(--text-muted);
        }

        .pms-section-title {
            font-weight: 800;
            /* color:var(--text-main); */
            margin: 32px 0 14px;
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .pms-section-title::before {
            content: "";
            width: 5px;
            height: 20px;
            background: var(--pms-gold);
            border-radius: 3px;
        }

        .pms-panel {
            /* background:var(--bg-card); */
            border: 1px solid var(--border-soft);
            border-radius: 16px;
            box-shadow: var(--shadow);
            padding: 22px;
            height: 100%;
        }

        .pms-panel h6 {
            /* color:var(--text-main); */
            font-weight: 700;
            margin-bottom: 16px;
        }

        .pms-quicklink {
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 12px 14px;
            border-radius: 12px;
            /* background:var(--bg-subtle); */
            border: 1px solid var(--border-soft);
            text-decoration: none;
            /* color:var(--text-main);  */
            font-weight: 600;
            margin-bottom: 10px;
            transition: background .15s ease;
        }

        .pms-quicklink:hover {
            background: var(--pms-gold-soft);
            color: var(--pms-maroon-dark);
        }

        .pms-quicklink i {
            font-size: 18px;
            color: var(--pms-maroon);
            width: 22px;
        }

        [data-theme="dark"] .pms-quicklink i {
            color: var(--pms-gold);
        }

        .pms-activity-item {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 10px 0;
            border-bottom: 1px solid var(--border-soft);
            font-size: 14px;
            /* color:var(--text-main); */
        }

        .pms-activity-item:last-child {
            border-bottom: none;
        }

        .pms-activity-item .amt {
            font-weight: 700;
            color: var(--success);
        }

        .pms-activity-item .meta {
            font-size: 12px;
            color: var(--text-muted);
        }
    </style>

    {{-- Hero --}}
    <div class="pms-hero mb-4">
        <div>
            <!-- <span class="pms-hero-badge">Branch Dashboard</span> -->
            <h3>Welcome back{{ isset($branchName) ? ', ' . $branchName : '' }} 👋</h3>
            <p>Have a great day! Manage your products, bills and stock from here.</p>
        </div>
        <div class="pms-hero-icon d-none d-lg-flex">
            <i class="ti tabler-layout-dashboard"></i>
        </div>
    </div>

    {{-- Primary stats --}}
    <div class="row g-3">

        {{-- Products --}}
        <div class="col-lg-3 col-sm-6">
            <div class="card pms-stat-card">
                <div class="pms-stat-top">
                    <div>
                        <div class="pms-stat-label">Products</div>
                        <div class="pms-stat-value">{{ $productCount }}</div>
                    </div>
                    <div class="pms-stat-icon success"><i class="ti tabler-box"></i></div>
                </div>
                <div class="pms-stat-footer">
                    <span class="pms-stat-sub">Active catalog items</span>
                    <a href="{{ route('branch.product') }}" class="pms-stat-link">View <i class="ti tabler-arrow-right"
                            style="font-size:13px;"></i></a>
                </div>
            </div>
        </div>

        {{-- Bills --}}
        <div class="col-lg-3 col-sm-6">
            <div class="card pms-stat-card">
                <div class="pms-stat-top">
                    <div>
                        <div class="pms-stat-label">Bills</div>
                        <div class="pms-stat-value">{{ $billCount }}</div>
                    </div>
                    <div class="pms-stat-icon primary"><i class="ti tabler-report"></i></div>
                </div>
                <div class="pms-stat-footer">
                    <span class="pms-stat-sub">Total orders billed</span>
                    <a href="{{ route('branch.sales_bill') }}" class="pms-stat-link">View <i class="ti tabler-arrow-right"
                            style="font-size:13px;"></i></a>
                </div>
            </div>
        </div>

        {{-- Today's Sales --}}
        <div class="col-lg-3 col-sm-6">
            <div class="card pms-stat-card">
                <div class="pms-stat-top">
                    <div>
                        <div class="pms-stat-label">Today's Sales</div>
                        <div class="pms-stat-value">₹{{ number_format($todaySales ?? 0, 0) }}</div>
                    </div>
                    <div class="pms-stat-icon gold"><i class="ti tabler-currency-rupee"></i></div>
                </div>
                <div class="pms-stat-footer">
                    <span class="pms-stat-sub">{{ $todayBillCount ?? 0 }} bills today</span>
                    <a href="{{ route('branch.sales_bill') }}" class="pms-stat-link">View <i class="ti tabler-arrow-right"
                            style="font-size:13px;"></i></a>
                </div>
            </div>
        </div>

        {{-- Out Of Stock --}}
        <div class="col-lg-3 col-sm-6">
            <div class="card pms-stat-card">
                <div class="pms-stat-top">
                    <div>
                        <div class="pms-stat-label">Out of Stock</div>
                        <div class="pms-stat-value">{{ $outOfStockCount }}</div>
                    </div>
                    <div class="pms-stat-icon danger"><i class="ti tabler-package-off"></i></div>
                </div>
                <div class="pms-stat-footer">
                    <span class="pms-stat-sub">Needs restocking</span>
                    <a href="{{ route('branch.out_of_stock_list') }}" class="pms-stat-link">View <i
                            class="ti tabler-arrow-right" style="font-size:13px;"></i></a>
                </div>
            </div>
        </div>

    </div>

    {{-- Secondary stats --}}
    <div class="row g-3 mt-1">

        <div class="col-lg-3 col-sm-6">
            <a href="{{ route('branch.low_stock_products') }}" class="text-decoration-none">

                <div class="card pms-stat-card">
                    <div class="pms-stat-top">
                        <div>
                            <div class="pms-stat-label">Low Stock</div>
                            <div class="pms-stat-value">{{ $lowStockCount ?? 0 }}</div>
                        </div>
                        <div class="pms-stat-icon gold"><i class="ti tabler-alert-triangle"></i></div>
                    </div>
                    <div class="pms-stat-footer">
                        <span class="pms-stat-sub">Below reorder level</span>
                    </div>
                </div>
            </a>

        </div>

        <div class="col-lg-3 col-sm-6">
            <div class="card pms-stat-card">
                <div class="pms-stat-top">
                    <div>
                        <div class="pms-stat-label">Customers</div>
                        <div class="pms-stat-value">{{ $customerCount ?? 0 }}</div>
                    </div>
                    <div class="pms-stat-icon info"><i class="ti tabler-users"></i></div>
                </div>
                <div class="pms-stat-footer">
                    <span class="pms-stat-sub">Served this branch</span>
                </div>
            </div>
        </div>

        <div class="col-lg-3 col-sm-6">
            <div class="card pms-stat-card">
                <div class="pms-stat-top">
                    <div>
                        <div class="pms-stat-label">Monthly Sales</div>
                        <div class="pms-stat-value">₹{{ number_format($monthSales ?? 0, 0) }}</div>
                    </div>
                    <div class="pms-stat-icon success"><i class="ti tabler-trending-up"></i></div>
                </div>
                <div class="pms-stat-footer">
                    <span class="pms-stat-sub">This calendar month</span>
                </div>
            </div>
        </div>

        <div class="col-lg-3 col-sm-6">
            <div class="card pms-stat-card">
                <div class="pms-stat-top">
                    <div>
                        <div class="pms-stat-label">Avg. Bill Value</div>
                        <div class="pms-stat-value">₹{{ number_format($avgBillValue ?? 0, 0) }}</div>
                    </div>
                    <div class="pms-stat-icon primary"><i class="ti tabler-receipt"></i></div>
                </div>
                <div class="pms-stat-footer">
                    <span class="pms-stat-sub">Per order, this month</span>
                </div>
            </div>
        </div>

    </div>

    {{-- Quick links + Recent activity --}}
    <div class="pms-section-title">Overview</div>

    <div class="row g-3">

        <div class="col-lg-4">
            <div class="pms-panel card">
                <h6>Quick Actions</h6>
                <a href="{{ route('branch.product') }}" class="pms-quicklink"><i class="ti tabler-box"></i> Manage
                    Products</a>
                <a href="{{ route('branch.sales_bill') }}" class="pms-quicklink"><i class="ti tabler-report"></i> View
                    Bills</a>
                <a href="{{ route('branch.out_of_stock_list') }}" class="pms-quicklink"><i
                        class="ti tabler-package-off"></i> Out of Stock List</a>
            </div>
        </div>

        <div class="col-lg-8">
            <div class="pms-panel card">
                <h6>Recent Bills</h6>
                @forelse($recentBills ?? [] as $bill)
                    <div class="pms-activity-item">
                        <div>
                            <div>#{{ $bill->order_id }} — {{ $bill->customer_name ?? 'Walk-in' }}</div>
                            <div class="meta">{{ \Carbon\Carbon::parse($bill->created_at)->diffForHumans() }}</div>
                        </div>
                        <div class="amt">₹{{ number_format($bill->total, 2) }}</div>
                    </div>
                @empty
                    <p class="pms-stat-sub mb-0">No recent bills to show yet.</p>
                @endforelse
            </div>
        </div>

    </div>

@endsection