@extends('template.desktop.app')
@push('styles')
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&display=swap"
        rel="stylesheet">
    <script src="https://unpkg.com/lucide@latest"></script>
    <style>
        :root {
            --brand-red: #e11d48;
            --surface-gray: #f8fafc;
            --border-subtle: rgba(0, 0, 0, 0.04);
        }

        body {
            font-family: 'Plus Jakarta Sans', sans-serif;
            background-color: #fcfcfc;
            color: #0f172a;
            letter-spacing: -0.01em;
        }

        .container-full {
            max-width: 1440px;
            margin: 0 auto;
            padding: 2.5rem;
        }

        /* Card Refinement */
        .card-premium {
            background: #ffffff;
            border: 1px solid var(--border-subtle);
            border-radius: 24px;
            padding: 1.25rem 1.5rem;
            height: 195px;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            position: relative;
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            overflow: hidden;
        }

        .card-premium:hover {
            transform: translateY(-2px);
            box-shadow: 0 12px 30px -10px rgba(0, 0, 0, 0.04);
            border-color: rgba(225, 29, 72, 0.1);
        }

        .bg-icon {
            position: absolute;
            right: -12px;
            bottom: -12px;
            color: rgba(15, 23, 42, 0.02);
            z-index: 0;
            width: 100px;
            height: 100px;
        }

        /* Typography Scale */
        .text-label {
            color: #64748b;
            font-size: 0.7rem;
            letter-spacing: 0.05em;
            text-transform: uppercase;
            font-weight: 700;
            z-index: 10;
        }

        .stat-number {
            font-size: 1.6rem;
            /* Slightly reduced font size to accommodate longer numbers */
            font-weight: 800;
            letter-spacing: -0.04em;
            color: #1e293b;
            line-height: 1.2;
            z-index: 10;
        }

        /* Sub Data Boxes */
        .data-pill {
            background: #f8fafc;
            border-radius: 12px;
            padding: 0.5rem 0.75rem;
            border: 1px solid rgba(0, 0, 0, 0.02);
        }

        .sub-label {
            font-size: 0.6rem;
            font-weight: 700;
            color: #94a3b8;
            text-transform: uppercase;
        }

        .sub-value {
            font-size: 0.8rem;
            font-weight: 800;
            color: #1e293b;
        }

        @media (min-width: 1024px) {
            .grid-main {
                grid-template-columns: repeat(4, 1fr);
            }
        }
    </style>
@endpush
@section('content')
    <div class="container-full p-2">
        <!-- Minimalist Header -->
        <header class="mb-12 flex justify-between items-end">
            <div>
                <div class="flex items-center gap-2 mb-1.5">
                    <div class="w-1.5 h-1.5 rounded-full bg-rose-500"></div>
                    <span class="text-[10px] font-bold text-rose-500 uppercase tracking-widest">Live Terminal</span>
                </div>
                <h1 class="text-2xl font-bold text-slate-900 tracking-tight">Business <span
                        class="text-slate-400 font-light italic underline decoration-rose-500/20 underline-offset-4">Pulse</span>
                </h1>
            </div>
            <div class="hidden md:block text-right">
                <p class="text-[10px] font-bold text-slate-400 uppercase tracking-tighter">Terakhir Diperbarui</p>
                <p class="text-xs font-bold text-slate-800">30 Des 2025 • 13:45</p>
            </div>
        </header>

        <!-- Symmetric Grid -->
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-5 grid-main">

            <!-- 1. Iklan & Biaya -->
            <div class="card-premium border-l-4 border-l-blue-500">
                <i data-lucide="megaphone" class="bg-icon"></i>
                <p class="text-label">Biaya Iklan (ADSPEND)</p>
                <div class="flex items-baseline">
                    <span class="text-xs font-bold text-blue-500 mr-1">Rp</span>
                    <span class="stat-number">4.200.000</span>
                </div>
                <div class="grid grid-cols-2 gap-2 mt-2">
                    <div class="data-pill">
                        <p class="sub-label">Per Box</p>
                        <p class="sub-value">9.300</p>
                    </div>
                    <div class="data-pill">
                        <p class="sub-label">Per Contact</p>
                        <p class="sub-value">3.500</p>
                    </div>
                </div>
            </div>

            <!-- 2. Everpro Sync -->
            <div class="card-premium">
                <i data-lucide="layers" class="bg-icon"></i>
                <p class="text-label">Input Everpro</p>
                <div class="flex items-baseline">
                    <span class="stat-number">1,120</span>
                </div>
                <div class="flex justify-between items-center text-[10px] font-bold pt-3 border-t border-slate-50">
                    <span class="text-slate-400">STATUS SYNC</span>
                    <span class="text-emerald-500 px-2 py-0.5 bg-emerald-50 rounded-md">VERIFIED</span>
                </div>
            </div>

            <!-- 3. Marketplace -->
            <div class="card-premium">
                <i data-lucide="globe" class="bg-icon"></i>
                <p class="text-label">Order Marketplace</p>
                <div class="flex items-baseline">
                    <span class="stat-number">856</span>
                </div>
                <div class="flex justify-between items-center text-[10px] font-bold pt-3 border-t border-slate-50">
                    <span class="text-slate-400">CHANNEL</span>
                    <span class="text-blue-500 px-2 py-0.5 bg-blue-50 rounded-md">OMNI-LIVE</span>
                </div>
            </div>

            <!-- 4. Pendapatan (In Transit) - NO ABBREVIATION -->
            <div class="card-premium border-l-4 border-l-rose-500">
                <i data-lucide="truck" class="bg-icon" style="color: rgba(225, 29, 72, 0.03);"></i>
                <div class="flex justify-between items-center">
                    <p class="text-label text-rose-600">Est. Pendapatan</p>
                    <span
                        class="text-[8px] font-black text-white bg-rose-500 px-1.5 py-0.5 rounded-full uppercase tracking-tighter">In
                        Transit</span>
                </div>
                <div class="flex items-baseline">
                    <span class="text-xs font-bold text-rose-500 mr-1">Rp</span>
                    <span class="stat-number">12.450.000</span>
                </div>
                <div class="grid grid-cols-2 gap-2 mt-2">
                    <div class="data-pill">
                        <p class="sub-label">COD</p>
                        <p class="sub-value">8.150.000</p>
                    </div>
                    <div class="data-pill">
                        <p class="sub-label">Transfer</p>
                        <p class="sub-value">4.300.000</p>
                    </div>
                </div>
            </div>

            <!-- 5. Selesai -->
            <div class="card-premium">
                <i data-lucide="check-circle" class="bg-icon"></i>
                <p class="text-label">Pesanan Selesai</p>
                <div class="flex items-baseline">
                    <span class="stat-number text-emerald-600">1,284</span>
                </div>
                <div class="flex justify-between items-center text-[10px] font-bold pt-3 border-t border-slate-50">
                    <span class="text-slate-400">SUCCESS RATE</span>
                    <span class="text-emerald-500">94.2%</span>
                </div>
            </div>

            <!-- 6. Penjualan Box -->
            <div class="card-premium">
                <i data-lucide="box" class="bg-icon"></i>
                <p class="text-label">Penjualan Box</p>
                <div class="flex items-baseline">
                    <span class="stat-number">450</span>
                </div>
                <div class="flex justify-between items-center text-[10px] font-bold pt-3 border-t border-slate-50">
                    <span class="text-slate-400">SKU</span>
                    <span class="text-slate-700">PREMIUM-BOX</span>
                </div>
            </div>

            <!-- 7. Penjualan Sachet -->
            <div class="card-premium">
                <i data-lucide="layout-grid" class="bg-icon"></i>
                <p class="text-label">Penjualan Sachet</p>
                <div class="flex items-baseline">
                    <span class="stat-number">1,205</span>
                </div>
                <div class="flex justify-between items-center text-[10px] font-bold pt-3 border-t border-slate-50">
                    <span class="text-slate-400">SKU</span>
                    <span class="text-slate-700">SINGLE-SACHET</span>
                </div>
            </div>

            <!-- 8. Return (Risk Management) -->
            <div class="card-premium bg-slate-900">
                <i data-lucide="alert-triangle" class="bg-icon" style="color: rgba(255, 255, 255, 0.05);"></i>
                <div class="flex justify-between items-start">
                    <p class="text-label text-slate-400">Pesanan Return</p>
                    <div class="flex flex-col items-end">
                        <span class="text-[11px] font-black text-rose-400">0.8%</span>
                        <span class="text-[7px] text-slate-500 uppercase font-bold tracking-tighter">Rate</span>
                    </div>
                </div>
                <div class="flex items-center gap-2">
                    <span class="stat-number text-white">08</span>
                    <span
                        class="px-1.5 py-0.5 rounded-md bg-rose-500 text-[8px] font-black text-white uppercase tracking-tighter animate-pulse">Loss
                        Alert</span>
                </div>
                <div class="mt-2 bg-white/5 border border-white/10 rounded-xl p-2.5">
                    <div class="flex justify-between items-center mb-0.5">
                        <span class="text-[8px] font-bold text-slate-500 uppercase">Potensi Kerugian</span>
                    </div>
                    <div class="flex items-baseline">
                        <span class="text-[10px] font-bold text-rose-400 mr-1">Rp</span>
                        <p class="text-[14px] font-black text-white">850.000</p>
                    </div>
                </div>
            </div>

        </div>
    </div>
     <script>
        lucide.createIcons();
    </script>
@endsection