{{-- Kasir Admin Dashboard (Future Clean) --}}
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap" rel="stylesheet">

@php
    $today = \Carbon\Carbon::today();

    $dueSoonOrders = collect();
    $overdueOrders = collect();

    if (class_exists(\App\Models\Order::class)) {
        $orderModel = \App\Models\Order::query();

        if (method_exists($orderModel->getModel(), 'notCancelled')) {
            $orderModel->notCancelled();
        }

        if (method_exists($orderModel->getModel(), 'withReceivables')) {
            $orderModel->withReceivables();
        }

        $baseDueQuery = \App\Models\Order::query()
            ->whereNotNull('due_date');

        if (method_exists($baseDueQuery->getModel(), 'notCancelled')) {
            $baseDueQuery->notCancelled();
        }

        if (method_exists($baseDueQuery->getModel(), 'withReceivables')) {
            $baseDueQuery->withReceivables();
        }

        $overdueOrders = (clone $baseDueQuery)
            ->whereDate('due_date', '<', $today)
            ->orderBy('due_date')
            ->limit(5)
            ->get();

        $dueSoonOrders = (clone $baseDueQuery)
            ->whereDate('due_date', '>=', $today)
            ->whereDate('due_date', '<=', $today->copy()->addDays(3))
            ->orderBy('due_date')
            ->limit(5)
            ->get();
    }

    $overdueCount = $overdueOrders->count();
    $dueSoonCount = $dueSoonOrders->count();
@endphp

<style>
    .kasir-wrap{
        font-family:'Poppins',sans-serif;
        background:
            radial-gradient(900px 320px at 15% 0%, rgba(16,185,129,.12), transparent 62%),
            radial-gradient(850px 300px at 85% 10%, rgba(99,102,241,.10), transparent 62%),
            radial-gradient(850px 320px at 50% 110%, rgba(245,158,11,.10), transparent 62%);
        border-radius: 16px;
        padding: 16px;
    }
    .glass{
        background: rgba(255,255,255,.70);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        border: 1px solid rgba(17,24,39,.10);
    }
    .dark .glass{
        background: rgba(255,255,255,.04);
        border: 1px solid rgba(255,255,255,.08);
    }
    .neo-border{ position:relative; overflow:hidden; border-radius:16px; }
    .neo-border:before{
        content:""; position:absolute; inset:-2px;
        background: linear-gradient(90deg, rgba(16,185,129,.35), rgba(99,102,241,.30), rgba(245,158,11,.30));
        filter: blur(14px); opacity:.55; z-index:0;
    }
    .neo-border > *{ position:relative; z-index:1; }
    .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);
    }
    .quick-btn{
        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;
    }
    .quick-btn:hover{ transform: translateY(-1px); box-shadow: 0 10px 25px rgba(0,0,0,.08); background: rgba(255,255,255,.8); }
    .dark .quick-btn{ border:1px solid rgba(255,255,255,.08); background: rgba(255,255,255,.03); }
    .dark .quick-btn:hover{ background: rgba(255,255,255,.05); box-shadow: 0 10px 25px rgba(0,0,0,.25); }

    .due-card{
        border-radius: 16px;
        padding: 14px;
        border: 1px solid rgba(17,24,39,.08);
        background: rgba(255,255,255,.6);
    }
    .dark .due-card{
        background: rgba(255,255,255,.03);
        border: 1px solid rgba(255,255,255,.08);
    }

    .floating-due-popup{
        position: fixed;
        right: 18px;
        bottom: 18px;
        width: min(380px, calc(100vw - 24px));
        z-index: 60;
        border-radius: 18px;
        border: 1px solid rgba(239,68,68,.25);
        background: rgba(255,255,255,.96);
        box-shadow: 0 20px 60px rgba(0,0,0,.18);
        overflow: hidden;
    }
    .dark .floating-due-popup{
        background: rgba(17,24,39,.96);
        border: 1px solid rgba(239,68,68,.18);
        box-shadow: 0 20px 60px rgba(0,0,0,.45);
    }
    .floating-due-header{
        display:flex;
        align-items:center;
        justify-content:space-between;
        gap:12px;
        padding:12px 14px;
        background: linear-gradient(135deg, rgba(239,68,68,.12), rgba(245,158,11,.10));
        border-bottom: 1px solid rgba(17,24,39,.08);
    }
    .dark .floating-due-header{
        border-bottom: 1px solid rgba(255,255,255,.08);
    }
    .floating-due-body{
        padding:12px 14px;
        max-height: 260px;
        overflow-y:auto;
    }
    .due-item{
        display:flex;
        align-items:flex-start;
        justify-content:space-between;
        gap:12px;
        padding:10px 0;
        border-bottom:1px dashed rgba(17,24,39,.10);
    }
    .dark .due-item{
        border-bottom:1px dashed rgba(255,255,255,.08);
    }
    .due-item:last-child{
        border-bottom:none;
        padding-bottom:0;
    }
    .due-badge{
        display:inline-flex;
        align-items:center;
        border-radius:999px;
        padding:4px 8px;
        font-size:10px;
        font-weight:700;
        white-space:nowrap;
    }
    .due-badge.overdue{
        background: rgba(239,68,68,.12);
        color:#dc2626;
    }
    .due-badge.soon{
        background: rgba(245,158,11,.14);
        color:#d97706;
    }

    @keyframes scrollText { 0% { transform: translateX(0); } 100% { transform: translateX(-100%); } }
    @keyframes popupIn {
        from { opacity:0; transform: translateY(16px) scale(.98); }
        to { opacity:1; transform: translateY(0) scale(1); }
    }
    .popup-show { animation: popupIn .25s ease; }
</style>

<div class="kasir-wrap">

    {{-- Banner --}}
    <div class="neo-border mb-5">
        <div class="glass px-4 py-3 flex items-center gap-3 rounded-2xl">
            <div class="flex-1 overflow-hidden whitespace-nowrap">
                <div id="scroll-text" style="display:inline-block; padding-left:100%; animation:scrollText 16s linear infinite; font-weight:700; color:#0f9d58;">
                    Loading...
                </div>
            </div>

            <a href="https://wa.me/6282280626951" target="_blank"
               class="rounded-full px-4 py-2 text-xs font-bold text-white"
               style="background:#0f9d58;text-decoration:none;">
               💬 Bantuan
            </a>
        </div>
    </div>

    <script>
        function getUcapan(){
            const jam = new Date().getHours();
            if (jam >= 5 && jam < 12) return "Pagi guys";
            if (jam >= 12 && jam < 15) return "Siang guys";
            if (jam >= 15 && jam < 18) return "Sore guys";
            return "Malam guys";
        }
        document.addEventListener('DOMContentLoaded', () => {
            const el = document.getElementById('scroll-text');
            if(el) el.innerHTML =
                `${getUcapan()}! ✅ Anda sedang dalam mode demo. Jika ada berimat, hubungi <b>Developer</b>.`;
        });
    </script>

    {{-- KPI --}}
    <div class="grid grid-cols-1 gap-4 sm:grid-cols-2 xl:grid-cols-4 mb-6">
        <x-posgraf.stat-card title="Belum Dibayar" value="{{ $stats['unpaid_orders'] ?? 0 }}" color="warning"
            icon='<svg class="size-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z" /></svg>' />
        <x-posgraf.stat-card title="Piutang/Cicilan" value="{{ $stats['partial_orders'] ?? 0 }}" color="orange"
            icon='<svg class="size-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2" /></svg>' />
        <x-posgraf.stat-card title="Dibayar Hari Ini" value="{{ $stats['paid_today'] ?? 0 }}" color="success"
            icon='<svg class="size-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" /></svg>' />
        <x-posgraf.stat-card title="Pendapatan Hari Ini" value="Rp {{ number_format($stats['revenue_today'] ?? 0, 0, ',', '.') }}" color="brand"
            icon='<svg class="size-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 9V7a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2m2 4h10a2 2 0 002-2v-6a2 2 0 00-2-2H9a2 2 0 00-2 2v6a2 2 0 002 2z" /></svg>' />
    </div>

    {{-- Quick Actions --}}
    <div class="grid grid-cols-1 lg:grid-cols-12 gap-6 mb-6">
        <div class="lg:col-span-8 neo-border">
            <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">Aksi Cepat Kasir</h3>
                    <span class="chip">⚡ fokus transaksi</span>
                </div>

                <div class="mt-4 grid grid-cols-1 sm:grid-cols-2 gap-3">
                    <a href="{{ route('kasir.index') }}" class="quick-btn">
                        <div class="flex size-10 items-center justify-center rounded-full bg-success-100 text-success-600 dark:bg-success-500/20 dark:text-success-400">
                            <svg class="size-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 9V7a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2m2 4h10a2 2 0 002-2v-6a2 2 0 00-2-2H9a2 2 0 00-2 2v6a2 2 0 002 2z"/></svg>
                        </div>
                        <div>
                            <div class="font-semibold text-gray-800 dark:text-white/90">Tagihan</div>
                            <div class="text-xs text-gray-500 dark:text-gray-400">Proses pembayaran</div>
                        </div>
                    </a>

                    <a href="{{ route('kasir.pelunasan') }}" class="quick-btn">
                        <div class="flex size-10 items-center justify-center rounded-full bg-orange-100 text-orange-700 dark:bg-orange-500/20 dark:text-orange-400">
                            <svg class="size-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6"/></svg>
                        </div>
                        <div>
                            <div class="font-semibold text-gray-800 dark:text-white/90">Pelunasan</div>
                            <div class="text-xs text-gray-500 dark:text-gray-400">Tambah cicilan/piutang</div>
                        </div>
                    </a>

                    <a href="{{ route('kasir.history') }}" class="quick-btn">
                        <div class="flex size-10 items-center justify-center rounded-full bg-brand-100 text-brand-700 dark:bg-brand-500/20 dark:text-brand-400">
                            <svg class="size-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
                        </div>
                        <div>
                            <div class="font-semibold text-gray-800 dark:text-white/90">Riwayat</div>
                            <div class="text-xs text-gray-500 dark:text-gray-400">Cek histori transaksi</div>
                        </div>
                    </a>

                    <a href="{{ route('reports.receivables') }}" class="quick-btn">
                        <div class="flex size-10 items-center justify-center rounded-full bg-warning-100 text-warning-700 dark:bg-warning-500/20 dark:text-warning-400">
                            <svg class="size-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2"/></svg>
                        </div>
                        <div>
                            <div class="font-semibold text-gray-800 dark:text-white/90">Laporan Piutang</div>
                            <div class="text-xs text-gray-500 dark:text-gray-400">Print per customer</div>
                        </div>
                    </a>
                </div>

                <div class="mt-4 flex flex-wrap gap-2">
                    <a href="{{ route('reports.cash-ledger') }}" class="chip">📒 Buku Besar</a>
                    <a href="{{ route('finance.cash') }}" class="chip">💰 Laporan Kas</a>
                    <a href="{{ route('finance.deposits.index') }}" class="chip">🏦 Setoran</a>
                </div>
            </div>
        </div>

        {{-- SOP / Reminder --}}
        <div class="lg:col-span-4 neo-border">
            <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">SOP Kasir</h3>
                    <span class="chip">✅ anti salah</span>
                </div>

                <ol class="mt-4 space-y-2 text-sm text-gray-700 dark:text-gray-300">
                    <li><b>1.</b> Pastikan invoice & nama customer benar.</li>
                    <li><b>2.</b> Cek <b>total</b> dan item sebelum proses pembayaran.</li>
                    <li><b>3.</b> Jika <b>transfer</b>, pastikan rekening benar & bukti jelas.</li>
                    <li><b>4.</b> Jika <b>cicilan</b>, pastikan sisa muncul sesuai.</li>
                    <li><b>5.</b> Setelah selesai produksi, WA customer + tandai diambil saat pick-up.</li>
                </ol>

                <div class="mt-4 rounded-xl border border-gray-200 p-3 text-xs text-gray-600 dark:border-gray-800 dark:text-gray-400">
                    Jika ada data tidak sinkron: kirim screenshot + invoice ke Developer.
                </div>
            </div>
        </div>
    </div>

    {{-- Due Date Summary --}}
    <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-6">
        <div class="neo-border">
            <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">Jatuh Tempo Terlewat</h3>
                    <span class="chip">🚨 {{ $overdueCount }} invoice</span>
                </div>

                <div class="mt-4 space-y-3">
                    @forelse($overdueOrders as $order)
                        <div class="due-card">
                            <div class="flex items-start justify-between gap-3">
                                <div>
                                    <div class="font-semibold text-gray-800 dark:text-white/90">{{ $order->invoice_number }}</div>
                                    <div class="text-xs text-gray-500 dark:text-gray-400">{{ $order->customer_name }}</div>
                                </div>
                                <span class="due-badge overdue">
                                    {{ \Carbon\Carbon::parse($order->due_date)->format('d/m/Y') }}
                                </span>
                            </div>
                            <div class="mt-2 text-sm text-error-600 dark:text-error-400">
                                Sisa: Rp {{ number_format((float) $order->getRemainingBalance(), 0, ',', '.') }}
                            </div>
                        </div>
                    @empty
                        <div class="rounded-xl border border-dashed border-gray-200 px-4 py-5 text-sm text-gray-500 dark:border-gray-700 dark:text-gray-400">
                            Belum ada piutang yang lewat jatuh tempo.
                        </div>
                    @endforelse
                </div>
            </div>
        </div>

        <div class="neo-border">
            <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">Jatuh Tempo Dekat</h3>
                    <span class="chip">⏰ {{ $dueSoonCount }} invoice</span>
                </div>

                <div class="mt-4 space-y-3">
                    @forelse($dueSoonOrders as $order)
                        <div class="due-card">
                            <div class="flex items-start justify-between gap-3">
                                <div>
                                    <div class="font-semibold text-gray-800 dark:text-white/90">{{ $order->invoice_number }}</div>
                                    <div class="text-xs text-gray-500 dark:text-gray-400">{{ $order->customer_name }}</div>
                                </div>
                                <span class="due-badge soon">
                                    {{ \Carbon\Carbon::parse($order->due_date)->format('d/m/Y') }}
                                </span>
                            </div>
                            <div class="mt-2 text-sm text-warning-700 dark:text-warning-400">
                                Sisa: Rp {{ number_format((float) $order->getRemainingBalance(), 0, ',', '.') }}
                            </div>
                        </div>
                    @empty
                        <div class="rounded-xl border border-dashed border-gray-200 px-4 py-5 text-sm text-gray-500 dark:border-gray-700 dark:text-gray-400">
                            Tidak ada piutang yang akan jatuh tempo dalam 3 hari.
                        </div>
                    @endforelse
                </div>
            </div>
        </div>
    </div>

    {{-- READY FOR PICKUP (pakai blok kamu, tetap) --}}
    {!! /* kamu boleh tetap pakai blok Siap Diambil yang sudah ada di bawah ini */ '' !!}
</div>

@if($overdueCount > 0 || $dueSoonCount > 0)
    <div id="floatingDuePopup" class="floating-due-popup popup-show">
        <div class="floating-due-header">
            <div>
                <div class="text-sm font-bold text-gray-800 dark:text-white">Pengingat Jatuh Tempo</div>
                <div class="text-xs text-gray-500 dark:text-gray-400">
                    {{ $overdueCount }} lewat tempo • {{ $dueSoonCount }} akan jatuh tempo
                </div>
            </div>
            <button type="button" onclick="closeDuePopup()" class="rounded-full px-2 py-1 text-gray-500 hover:bg-white/70 hover:text-gray-700 dark:text-gray-400 dark:hover:bg-white/10 dark:hover:text-white">
                ✕
            </button>
        </div>

        <div class="floating-due-body">
            @foreach($overdueOrders->take(3) as $order)
                <div class="due-item">
                    <div>
                        <div class="text-sm font-semibold text-gray-800 dark:text-white">{{ $order->invoice_number }}</div>
                        <div class="text-xs text-gray-500 dark:text-gray-400">{{ $order->customer_name }}</div>
                        <div class="mt-1 text-xs text-error-600 dark:text-error-400">
                            Sisa Rp {{ number_format((float) $order->getRemainingBalance(), 0, ',', '.') }}
                        </div>
                    </div>
                    <span class="due-badge overdue">
                        {{ \Carbon\Carbon::parse($order->due_date)->format('d/m/Y') }}
                    </span>
                </div>
            @endforeach

            @if($overdueCount === 0)
                @foreach($dueSoonOrders->take(3) as $order)
                    <div class="due-item">
                        <div>
                            <div class="text-sm font-semibold text-gray-800 dark:text-white">{{ $order->invoice_number }}</div>
                            <div class="text-xs text-gray-500 dark:text-gray-400">{{ $order->customer_name }}</div>
                            <div class="mt-1 text-xs text-warning-700 dark:text-warning-400">
                                Sisa Rp {{ number_format((float) $order->getRemainingBalance(), 0, ',', '.') }}
                            </div>
                        </div>
                        <span class="due-badge soon">
                            {{ \Carbon\Carbon::parse($order->due_date)->format('d/m/Y') }}
                        </span>
                    </div>
                @endforeach
            @endif

            <div class="mt-3">
                <a href="{{ route('reports.receivables') }}" class="inline-flex items-center gap-2 rounded-lg bg-brand-500 px-3 py-2 text-xs font-semibold text-white hover:bg-brand-600">
                    Lihat Laporan Piutang
                </a>
            </div>
        </div>
    </div>

    <script>
        function closeDuePopup() {
            const popup = document.getElementById('floatingDuePopup');
            if (popup) popup.style.display = 'none';
        }

        setTimeout(() => {
            const popup = document.getElementById('floatingDuePopup');
            if (popup) popup.style.display = 'none';
        }, 12000);
    </script>
@endif
