@extends('Kitchen.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-bs-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; */
            margin-bottom: 10px;
            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: 84px;
            height: 84px;
            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-stock-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-stock-item:last-child {
            border-bottom: none;
        }

        .pms-stock-item .meta {
            font-size: 12px;
            color: var(--text-muted);
        }

        .pms-pill {
            font-size: 11px;
            font-weight: 700;
            padding: 3px 10px;
            border-radius: 999px;
        }

        .pms-pill.low {
            background: rgba(240, 180, 41, .18);
            color: #B8790A;
        }

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

        .pms-pill.out {
            background: rgba(192, 57, 43, .12);
            color: var(--danger);
        }
    </style>

    {{-- Hero --}}
    <div class="pms-hero">
        <div>
            <h3>{{ $branchName ?? 'Kitchen' }} Overview</h3>
            <p>Track production, stock and prep from one place.</p>
        </div>

    </div>

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

        {{-- Total Products --}}
        <div class="col-lg-3 col-sm-6">
            <div class="pms-stat-card card">
                <div class="pms-stat-top">
                    <div>
                        <div class="pms-stat-label">Products</div>
                        <div class="pms-stat-value">{{ $totalProducts }}</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 kitchen items</span>
                    <a href="{{ route('kitchen.product') }}" 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="pms-stat-card card">
                <div class="pms-stat-top">
                    <div>
                        <div class="pms-stat-label">Out of Stock</div>
                        <div class="pms-stat-value">{{ $outOfStockProducts }}</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('kitchen.out_of_stock_list') }}" class="pms-stat-link">View <i
                            class="ti tabler-arrow-right" style="font-size:13px;"></i></a>
                </div>
            </div>
        </div>

        {{-- Low Stock --}}
        <div class="col-lg-3 col-sm-6">
            <a href="{{ route('kitchen.low_stock_products') }}" style="text-decoration: none; color: inherit;">

                <div class="pms-stat-card card" style="cursor: pointer;">

                    <div class="pms-stat-top">
                        <div>
                            <div class="pms-stat-label">Low Stock</div>

                            <div class="pms-stat-value">
                                {{ $lowStockProducts ?? 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>

        {{-- Prepared Today --}}
        <div class="col-lg-3 col-sm-6">
            <div class="pms-stat-card card">
                <div class="pms-stat-top">
                    <div>
                        <div class="pms-stat-label">Prepared Today</div>
                        <div class="pms-stat-value">{{ $preparedToday ?? 0 }}</div>
                    </div>
                    <div class="pms-stat-icon info"><i class="ti tabler-chef-hat"></i></div>
                </div>
                <div class="pms-stat-footer">
                    <span class="pms-stat-sub">Batches completed</span>
                </div>
            </div>
        </div>

    </div>

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

    <div class="row g-3">

        <div class="col-lg-4">
            <div class="pms-panel">
                <h6>Quick Actions</h6>
                <a href="{{ route('kitchen.product') }}" class="pms-quicklink"><i class="ti tabler-box"></i> Manage
                    Products</a>
                <a href="{{ route('kitchen.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">
                <h6>Stock Watch</h6>
                @forelse($stockWatch ?? [] as $item)
                    <div class="pms-stock-item">
                        <div>
                            <div>{{ $item->product_name }}</div>
                            <div class="meta">{{ $item->qty }} {{ $item->unit ?? 'units' }} remaining</div>
                        </div>
                        <span class="pms-pill {{ $item->qty == 0 ? 'out' : 'low' }}">
                            {{ $item->qty == 0 ? 'Out of stock' : 'Low stock' }}
                        </span>
                    </div>
                @empty
                    <p class="pms-stat-sub mb-0">All products are sufficiently stocked.</p>
                @endforelse
            </div>
        </div>

    </div>

@endsection