{{-- =============================================== --}}
{{-- DESIGNER DASHBOARD — FUTURE AI PRODUCTIVITY MODE --}}
{{-- =============================================== --}}

<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap" rel="stylesheet">

<style>
    .d-wrap{font-family:'Poppins',sans-serif;}
    .neo{
        position:relative; overflow:hidden; border-radius:18px;
        background:
          radial-gradient(900px 350px at 15% -10%, rgba(99,102,241,.18), transparent 60%),
          radial-gradient(900px 350px at 85% 0%, rgba(168,85,247,.16), transparent 60%),
          radial-gradient(900px 350px at 50% 120%, rgba(16,185,129,.10), transparent 60%);
        border: 1px solid rgba(17,24,39,.10);
    }
    .dark .neo{border:1px solid rgba(255,255,255,.08);}
    .glass{
        background: rgba(255,255,255,.68);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        border: 1px solid rgba(17,24,39,.08);
    }
    .dark .glass{
        background: rgba(255,255,255,.04);
        border: 1px solid rgba(255,255,255,.08);
    }
    .chip{
        display:inline-flex; align-items:center; gap:8px;
        border-radius:999px; padding:7px 10px;
        font-size:12px; font-weight:700;
        border:1px solid rgba(17,24,39,.10);
        background: rgba(255,255,255,.75);
        color:#111827;
        white-space:nowrap;
    }
    .dark .chip{
        border:1px solid rgba(255,255,255,.10);
        background: rgba(255,255,255,.05);
        color: rgba(255,255,255,.85);
    }
    .qbtn{
        display:flex; align-items:center; gap:10px;
        border-radius:14px;
        padding:12px 14px;
        border: 1px solid rgba(17,24,39,.08);
        background: rgba(255,255,255,.55);
        transition: .15s ease;
    }
    .qbtn:hover{ transform: translateY(-1px); box-shadow: 0 10px 25px rgba(0,0,0,.08); background: rgba(255,255,255,.80); }
    .dark .qbtn{ border:1px solid rgba(255,255,255,.08); background: rgba(255,255,255,.03); }
    .dark .qbtn:hover{ background: rgba(255,255,255,.05); box-shadow: 0 10px 25px rgba(0,0,0,.25); }

    /* marquee: mulai tampil langsung */
    @keyframes marquee {
        0% { transform: translateX(0); }
        100% { transform: translateX(-100%); }
    }
    .marquee-wrap{ overflow:hidden; white-space:nowrap; width:100%; }
    .marquee-text{
        display:inline-block;
        padding-right: 60px;
        animation: marquee 18s linear infinite;
    }
</style>

<div class="d-wrap">

    {{-- ================= AI SMART BANNER ================= --}}
    <div class="neo mb-6">
        <div class="glass p-5 rounded-2xl flex items-center gap-4">
            <div class="flex-1 overflow-hidden">
                <div class="flex items-center gap-2 font-semibold text-indigo-700 dark:text-indigo-300">
                    <span class="chip">🎨 Designer AI Mode</span>

                    <div class="marquee-wrap">
                        <div id="designer-banner-text" class="marquee-text">
                            Loading...
                        </div>
                    </div>
                </div>
            </div>

            <a href="https://wa.me/62895809409966" target="_blank"
               class="inline-flex items-center gap-2 rounded-full px-5 py-2.5 text-sm font-semibold text-white shadow-lg transition"
               style="background:#4338ca;"
               onmouseover="this.style.background='#3730a3'"
               onmouseout="this.style.background='#4338ca'">
                💬 Bantuan
            </a>
        </div>
    </div>

    <script>
        document.addEventListener("DOMContentLoaded", function () {
            function getUcapanDesigner() {
                const jam = new Date().getHours();
                if (jam >= 5 && jam < 12) return "Selamat Pagi Tim Design 🎨";
                if (jam >= 12 && jam < 15) return "Selamat Siang Tim Design ✨";
                if (jam >= 15 && jam < 18) return "Selamat Sore Tim Design 🧠";
                return "Selamat Malam Tim Design 🌙";
            }
            const banner = document.getElementById("designer-banner-text");
            if (!banner) return;

            banner.textContent = `${getUcapanDesigner()} — ✅ Anda sedang dalam mode demo. Jika ada berimat, hubungi kami.`;
        });
    </script>

    {{-- ================= PERFORMANCE STATS ================= --}}
    <div class="grid grid-cols-1 gap-4 sm:grid-cols-2 xl:grid-cols-4 mb-6">
        <x-posgraf.stat-card title="Order Saya Hari Ini" value="{{ $stats['my_orders_today'] ?? 0 }}" color="brand"/>
        <x-posgraf.stat-card title="SPK Belum Dicetak" value="{{ $stats['pending_spk'] ?? 0 }}" color="warning"/>
        <x-posgraf.stat-card title="Total Order Hari Ini" value="{{ $stats['all_orders_today'] ?? 0 }}" color="blue"/>
        <x-posgraf.stat-card title="Siap Diambil" value="{{ $stats['ready_for_pickup'] ?? 0 }}" color="success"/>
    </div>

    {{-- ================= INSIGHT + QUICK ACTIONS ================= --}}
    {{-- FIX UTAMA: pakai col-span yang pasti ada di theme (8/4) --}}
    <div class="grid grid-cols-1 lg:grid-cols-12 gap-6 mb-6">

        {{-- Insight --}}
        <div class="lg:col-span-8 neo">
            <div class="glass rounded-2xl p-5">
                <div class="flex items-center justify-between">
                    <h3 class="text-lg font-semibold text-gray-800 dark:text-white/90">🤖 AI Productivity Insight</h3>
                    <span class="chip">⚡ Fokus Produksi</span>
                </div>

                <div class="mt-4 space-y-2 text-sm text-gray-600 dark:text-gray-300">
                    <p>📌 Anda menangani <strong>{{ $stats['my_orders_today'] ?? 0 }}</strong> order hari ini.</p>
                    <p>🖨️ Ada <strong>{{ $stats['pending_spk'] ?? 0 }}</strong> SPK menunggu dicetak.</p>

                    @if(($stats['pending_spk'] ?? 0) > 5)
                        <div class="mt-3 rounded-xl border border-red-200 bg-red-50 p-3 text-red-700 dark:border-red-500/20 dark:bg-red-500/10 dark:text-red-300">
                            🚨 SPK menumpuk. Prioritaskan cetak SPK untuk mempercepat produksi.
                        </div>
                    @elseif(($stats['my_orders_today'] ?? 0) >= 5)
                        <div class="mt-3 rounded-xl border border-indigo-200 bg-indigo-50 p-3 text-indigo-700 dark:border-indigo-500/20 dark:bg-indigo-500/10 dark:text-indigo-300">
                            🔥 Produktivitas tinggi. Pertahankan ritme + pastikan file rapi.
                        </div>
                    @else
                        <div class="mt-3 rounded-xl border border-gray-200 bg-gray-50 p-3 text-gray-600 dark:border-gray-800 dark:bg-white/[0.03] dark:text-gray-300">
                            💡 Tips: Pastikan file “final” sebelum kirim ke produksi (hindari revisi di tengah proses).
                        </div>
                    @endif
                </div>
            </div>
        </div>

        {{-- Quick Actions --}}
        <div class="lg:col-span-4 neo">
            <div class="glass rounded-2xl p-5 h-full">
                <div class="flex items-center justify-between">
                    <h3 class="text-lg font-semibold text-gray-800 dark:text-white/90">⚡ Quick Actions</h3>
                    <span class="chip">🚀 Super Fast</span>
                </div>

                <div class="mt-4 space-y-3">
                    <a href="{{ route('orders.create') }}" class="qbtn">
                        <div class="flex size-10 items-center justify-center rounded-full bg-gray-900 text-white">➕</div>
                        <div>
                            <div class="font-semibold text-gray-800 dark:text-white/90">Input Order Baru</div>
                            <div class="text-xs text-gray-500 dark:text-gray-400">Buat order cepat</div>
                        </div>
                    </a>

                    <a href="{{ route('orders.index') }}" class="qbtn">
                        <div class="flex size-10 items-center justify-center rounded-full bg-indigo-100 text-indigo-700 dark:bg-indigo-500/20 dark:text-indigo-300">📂</div>
                        <div>
                            <div class="font-semibold text-gray-800 dark:text-white/90">Semua Order</div>
                            <div class="text-xs text-gray-500 dark:text-gray-400">Cari invoice & status</div>
                        </div>
                    </a>

                    <a href="{{ route('reports.revenue') }}" class="qbtn">
                        <div class="flex size-10 items-center justify-center rounded-full bg-purple-100 text-purple-700 dark:bg-purple-500/20 dark:text-purple-300">📈</div>
                        <div>
                            <div class="font-semibold text-gray-800 dark:text-white/90">Rincian Pendapatan</div>
                            <div class="text-xs text-gray-500 dark:text-gray-400">Cek transaksi & item</div>
                        </div>
                    </a>
                </div>
            </div>
        </div>

    </div>

    {{-- ================= SIAP CETAK SPK ================= --}}
    @if(isset($paid_orders) && $paid_orders->count() > 0)
    <div class="rounded-2xl border border-gray-200 bg-white dark:border-gray-800 dark:bg-white/[0.03] shadow-sm mb-6">
        <div class="border-b border-gray-200 px-5 py-4 dark:border-gray-800 flex items-center justify-between">
            <div>
                <h3 class="text-lg font-semibold text-gray-800 dark:text-white/90">🖨️ Siap Cetak SPK</h3>
                <p class="text-sm text-gray-500 dark:text-gray-400">Order sudah dibayar & menunggu SPK</p>
            </div>
            <span class="chip">Total: {{ $paid_orders->count() }}</span>
        </div>

        <div class="divide-y divide-gray-200 dark:divide-gray-800 max-h-96 overflow-y-auto">
            @foreach($paid_orders as $order)
            <div class="p-4 flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3 hover:bg-gray-50 dark:hover:bg-white/[0.02]">
                <div class="min-w-0">
                    <p class="font-semibold text-gray-800 dark:text-white/90">{{ $order->invoice_number }}</p>
                    <p class="text-xs text-gray-500 dark:text-gray-400 truncate">
                        {{ $order->customer_name }} | {{ $order->file_name }}
                    </p>
                    <p class="text-xs text-gray-500 dark:text-gray-400">
                        {{ $order->size }} | {{ $order->qty }} lembar
                    </p>
                </div>

                <a href="{{ route('print.spk', $order) }}"
                   target="_blank"
                   class="inline-flex items-center justify-center gap-2 rounded-lg px-4 py-2 text-xs font-semibold text-white transition"
                   style="background:#4f46e5;"
                   onmouseover="this.style.background='#4338ca'"
                   onmouseout="this.style.background='#4f46e5'">
                    🖨️ Cetak SPK
                </a>
            </div>
            @endforeach
        </div>
    </div>
    @endif

    {{-- ================= ORDER SAYA HARI INI ================= --}}
    <div class="rounded-2xl border border-gray-200 bg-white dark:border-gray-800 dark:bg-white/[0.03] shadow-sm">
        <div class="border-b border-gray-200 px-5 py-4 dark:border-gray-800 flex justify-between items-center">
            <h3 class="text-lg font-semibold text-gray-800 dark:text-white/90">📋 Order Saya Hari Ini</h3>
            <a href="{{ route('orders.index') }}" class="text-sm text-indigo-600 hover:text-indigo-700 dark:text-indigo-300 dark:hover:text-indigo-200">
                Lihat Semua
            </a>
        </div>

        <div class="divide-y divide-gray-200 dark:divide-gray-800 max-h-[450px] overflow-y-auto">
            @forelse($my_orders ?? [] as $order)
            <div class="p-4 hover:bg-gray-50 dark:hover:bg-white/[0.02]">
                <div class="flex justify-between items-center gap-3">
                    <div class="min-w-0">
                        <p class="font-semibold text-gray-800 dark:text-white/90">{{ $order->invoice_number }}</p>
                        <p class="text-xs text-gray-500 dark:text-gray-400 truncate">
                            {{ $order->customer_name }} | {{ $order->file_name }}
                        </p>
                        <p class="text-xs text-gray-500 dark:text-gray-400">
                            Rp {{ number_format($order->total_price, 0, ',', '.') }}
                        </p>
                    </div>

                    <span class="shrink-0 inline-flex rounded-full px-3 py-1 text-xs font-medium {{ $order->getPaymentStatusBadgeClass() }}">
                        {{ $order->getPaymentStatusLabel() }}
                    </span>
                </div>
            </div>
            @empty
            <div class="p-8 text-center text-sm text-gray-400">
                Belum ada order hari ini
            </div>
            @endforelse
        </div>
    </div>

    {{-- ================= FOOTER ================= --}}
    <div class="mt-12 border-t border-gray-200 pt-6 text-center text-xs text-gray-500 dark:border-gray-800 dark:text-gray-400">
        © 2026 <span class="font-semibold text-gray-700 dark:text-gray-300">aplikasipercetakan.com</span>.
        All rights reserved.
    </div>

</div>