<!DOCTYPE html>
<html lang="id" class="transition-colors duration-300">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Trace Order</title>

    <script src="https://cdn.tailwindcss.com"></script>
    <script>
        tailwind.config = {
            darkMode: 'class'
        }
    </script>

    <style>
        :root {
            --brand-1: #2563eb;
            --brand-2: #0ea5e9;
            --brand-3: #3b82f6;
        }

        html {
            scroll-behavior: smooth;
        }

        body {
            background:
                radial-gradient(circle at top left, rgba(59,130,246,0.18), transparent 28%),
                radial-gradient(circle at top right, rgba(14,165,233,0.14), transparent 24%),
                radial-gradient(circle at bottom center, rgba(96,165,250,0.10), transparent 26%),
                linear-gradient(180deg, #eff6ff 0%, #f8fafc 55%, #eef2ff 100%);
        }

        .dark body {
            background:
                radial-gradient(circle at top left, rgba(59,130,246,0.12), transparent 28%),
                radial-gradient(circle at top right, rgba(14,165,233,0.10), transparent 24%),
                radial-gradient(circle at bottom center, rgba(96,165,250,0.08), transparent 26%),
                linear-gradient(180deg, #0b1220 0%, #111827 50%, #0f172a 100%);
        }

        .phone-container {
            max-width: 470px;
            margin: 0 auto;
            min-height: 100vh;
            position: relative;
        }

        .glass {
            backdrop-filter: blur(16px);
            -webkit-backdrop-filter: blur(16px);
        }

        .hero-glow::before,
        .hero-glow::after {
            content: "";
            position: absolute;
            border-radius: 9999px;
            filter: blur(50px);
            opacity: .35;
            pointer-events: none;
        }

        .hero-glow::before {
            width: 180px;
            height: 180px;
            top: -40px;
            left: -40px;
            background: rgba(255,255,255,.35);
        }

        .hero-glow::after {
            width: 160px;
            height: 160px;
            right: -20px;
            bottom: -20px;
            background: rgba(191,219,254,.32);
        }

        .marquee-wrap {
            overflow: hidden;
            position: relative;
            white-space: nowrap;
        }

        .marquee-track {
            display: flex;
            width: max-content;
            animation: marqueeLeft 24s linear infinite;
        }

        .marquee-item {
            display: inline-flex;
            align-items: center;
            gap: 12px;
            padding-right: 48px;
        }

        @keyframes marqueeLeft {
            0% { transform: translateX(0); }
            100% { transform: translateX(-50%); }
        }

        .neon-ring {
            box-shadow:
                0 0 0 1px rgba(255,255,255,0.12) inset,
                0 10px 30px rgba(14,165,233,0.18);
        }

        .premium-card {
            box-shadow:
                0 10px 30px rgba(15, 23, 42, 0.07),
                inset 0 1px 0 rgba(255,255,255,0.7);
        }

        .dark .premium-card {
            box-shadow:
                0 12px 34px rgba(2, 6, 23, 0.26),
                inset 0 1px 0 rgba(255,255,255,0.05);
        }

        .progress-shine {
            position: relative;
            overflow: hidden;
        }

        .progress-shine::after {
            content: "";
            position: absolute;
            inset: 0;
            width: 40%;
            transform: skewX(-20deg) translateX(-180%);
            background: linear-gradient(90deg, transparent, rgba(255,255,255,.35), transparent);
            animation: shine 2.8s infinite;
        }

        @keyframes shine {
            100% {
                transform: skewX(-20deg) translateX(360%);
            }
        }

        .grid-noise {
            background-image:
                linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px),
                linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px);
            background-size: 18px 18px;
        }

        .dark .grid-noise {
            background-image:
                linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px),
                linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px);
        }
    </style>
</head>
<body class="text-gray-800 transition-colors duration-300 dark:text-gray-100">

    <div class="phone-container">
        <div class="relative min-h-screen overflow-hidden bg-white/75 shadow-[0_10px_40px_rgba(15,23,42,0.08)] dark:bg-gray-900/85">

            {{-- HERO --}}
            <section class="hero-glow relative overflow-hidden border-b border-white/10 bg-gradient-to-br from-blue-600 via-blue-600 to-indigo-600 text-white dark:from-blue-900 dark:via-blue-900 dark:to-indigo-900">
                <div class="grid-noise absolute inset-0 opacity-30"></div>

                <div class="relative z-10 px-5 pb-6 pt-5">
                    <div class="mb-5 flex items-start justify-between gap-4">
                        <div>
                            <div class="mb-3 inline-flex items-center gap-2 rounded-full border border-white/15 bg-white/10 px-3 py-1.5 text-[11px] font-bold tracking-wide backdrop-blur-sm">
                                <span class="inline-flex h-2.5 w-2.5 rounded-full bg-white shadow-[0_0_12px_rgba(255,255,255,0.8)]"></span>
                                Live Tracking
                            </div>

                            <h1 class="text-[34px] font-black tracking-tight leading-none">
                                Trace Order
                            </h1>

                            <p class="mt-3 max-w-[300px] text-sm leading-6 text-white/90">
                                Pantau status pesanan Anda secara real-time dengan tampilan modern, cepat, dan nyaman di semua perangkat.
                            </p>
                        </div>

                        <button
                            type="button"
                            onclick="toggleDarkMode()"
                            class="neon-ring inline-flex h-11 w-11 shrink-0 items-center justify-center rounded-2xl border border-white/20 bg-white/10 text-lg hover:bg-white/20"
                            title="Toggle dark mode"
                        >
                            <span id="themeIcon">🌙</span>
                        </button>
                    </div>

                    <div class="rounded-3xl border border-white/15 bg-white/10 px-4 py-4 backdrop-blur-sm">
                        <div class="text-[11px] uppercase tracking-[0.18em] text-white/70">Pencarian</div>
                        <div class="mt-2 text-sm font-bold">Nama Pelanggan / No Invoice</div>
                        <div class="mt-1 text-xs text-white/75">Tanpa filter tanggal agar tracking lebih simpel.</div>
                    </div>
                </div>
            </section>

            {{-- TEXT BERJALAN --}}
            <div class="relative z-10 px-4 pt-4">
                <div class="glass overflow-hidden rounded-2xl border border-blue-100 bg-white/90 premium-card dark:border-gray-700 dark:bg-gray-800/85">
                    <div class="marquee-wrap px-4 py-3">
                        <div class="marquee-track text-sm font-semibold text-blue-700 dark:text-blue-300">
                            <div class="marquee-item">
                                <span class="inline-flex h-2.5 w-2.5 rounded-full bg-blue-500 shadow-[0_0_12px_rgba(14,165,233,0.8)]"></span>
                                Jika berminat dengan aplikasi kasir berbasis web yang bisa memberikan trace order seperti ini, bisa kunjungi https://aplikasipercetakan.com
                            </div>
                            <div class="marquee-item">
                                <span class="inline-flex h-2.5 w-2.5 rounded-full bg-blue-500 shadow-[0_0_12px_rgba(14,165,233,0.8)]"></span>
                                Jika berminat dengan aplikasi kasir berbasis web yang bisa memberikan trace order seperti ini, bisa kunjungi https://aplikasipercetakan.com
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            {{-- SEARCH CARD --}}
            <div class="relative z-10 px-4 pt-4">
                <div class="glass rounded-[28px] border border-blue-100 bg-white/92 p-4 premium-card dark:border-gray-700 dark:bg-gray-800/88">
                    <div>
                        <h2 class="text-sm font-black uppercase tracking-[0.18em] text-gray-500 dark:text-gray-400">
                            Trace Finder
                        </h2>
                    </div>
                </div>
            </div>

            {{-- RESULTS --}}
            <div class="px-4 pb-8 pt-5">
                @if(request('search'))
                    <div class="mb-4 flex items-center justify-between">
                        <div>
                            <h2 class="text-sm font-black uppercase tracking-[0.18em] text-gray-500 dark:text-gray-400">
                                Hasil Trace
                            </h2>
                            <p class="mt-1 text-xs text-gray-500 dark:text-gray-400">
                                Menampilkan order yang sesuai pencarian Anda.
                            </p>
                        </div>

                        <span class="rounded-full bg-blue-50 px-3 py-1.5 text-xs font-bold text-blue-700 dark:bg-blue-500/10 dark:text-blue-300">
                            {{ $orders->count() }} Order
                        </span>
                    </div>

                    <div class="space-y-4">
                        @forelse($orders as $order)
                            @php
                                $summary = $order->getItemStatusSummary();
                                $percent = $summary['total'] > 0
                                    ? round(($summary['selesai'] / $summary['total']) * 100)
                                    : 0;
                            @endphp

                            <div class="overflow-hidden rounded-[28px] border border-blue-100 bg-white premium-card transition hover:-translate-y-[2px] hover:shadow-[0_16px_34px_rgba(15,23,42,0.08)] dark:border-gray-700 dark:bg-gray-800">
                                <div class="border-b border-blue-50 bg-gradient-to-r from-blue-50 via-blue-50 to-white px-4 py-4 dark:border-gray-700 dark:from-gray-800 dark:via-gray-800 dark:to-gray-800">
                                    <div class="flex items-start justify-between gap-3">
                                        <div class="min-w-0">
                                            <div class="truncate text-base font-black tracking-tight text-gray-900 dark:text-white">
                                                {{ $order->invoice_number }}
                                            </div>
                                            <div class="mt-1 truncate text-sm text-gray-500 dark:text-gray-300">
                                                {{ $order->customer_name }}
                                            </div>
                                        </div>

                                        <div class="shrink-0">
                                            {!! $order->getProductionStatusLabel() !!}
                                        </div>
                                    </div>
                                </div>

                                <div class="space-y-4 px-4 py-4">
                                    <div class="grid grid-cols-2 gap-3">
                                        <div class="rounded-2xl bg-blue-50/70 px-3 py-3 dark:bg-gray-700/70">
                                            <div class="text-[11px] font-bold uppercase tracking-[0.16em] text-gray-500 dark:text-gray-400">
                                                Dibuat
                                            </div>
                                            <div class="mt-1 text-xs font-semibold text-gray-800 dark:text-gray-200">
                                                {{ $order->created_at->format('d M Y') }}
                                            </div>
                                            <div class="mt-0.5 text-[11px] text-gray-500 dark:text-gray-400">
                                                {{ $order->created_at->format('H:i') }}
                                            </div>
                                        </div>

                                        <div class="rounded-2xl bg-blue-50/70 px-3 py-3 text-right dark:bg-gray-700/70">
                                            <div class="text-[11px] font-bold uppercase tracking-[0.16em] text-gray-500 dark:text-gray-400">
                                                Progress
                                            </div>
                                            <div class="mt-1 text-lg font-black text-blue-700 dark:text-blue-400">
                                                {{ $percent }}%
                                            </div>
                                            <div class="mt-0.5 text-[11px] text-gray-500 dark:text-gray-400">
                                                {{ $summary['selesai'] }} / {{ $summary['total'] }} selesai
                                            </div>
                                        </div>
                                    </div>

                                    <div class="rounded-2xl border border-blue-100 bg-white p-4 dark:border-gray-700 dark:bg-gray-800/80">
                                        <div class="mb-3 flex items-center justify-between">
                                            <span class="text-xs font-bold uppercase tracking-[0.16em] text-gray-500 dark:text-gray-400">
                                                Production Flow
                                            </span>
                                            <span class="rounded-full bg-blue-50 px-2.5 py-1 text-[11px] font-bold text-blue-700 dark:bg-blue-500/10 dark:text-blue-300">
                                                Real-Time
                                            </span>
                                        </div>

                                        <div class="progress-shine h-3 w-full overflow-hidden rounded-full bg-blue-100 dark:bg-gray-600">
                                            <div
                                                class="h-3 rounded-full bg-gradient-to-r from-blue-500 via-blue-500 to-indigo-500 transition-all duration-700"
                                                style="width: {{ $percent }}%"
                                            ></div>
                                        </div>

                                        <div class="mt-3 flex items-center justify-between text-xs text-gray-500 dark:text-gray-400">
                                            <span>Order sedang diproses</span>
                                            <span class="font-bold text-gray-700 dark:text-gray-200">{{ $percent }}% selesai</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        @empty
                            <div class="rounded-[28px] border border-dashed border-blue-200 bg-white/85 px-6 py-12 text-center premium-card dark:border-gray-700 dark:bg-gray-800">
                                <div class="mx-auto mb-4 flex h-16 w-16 items-center justify-center rounded-full bg-blue-100 text-blue-600 shadow-[0_0_30px_rgba(14,165,233,0.18)] dark:bg-blue-500/10 dark:text-blue-400">
                                    <svg class="h-8 w-8" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.8" d="M21 21l-4.35-4.35m1.85-5.15a7 7 0 11-14 0 7 7 0 0114 0z" />
                                    </svg>
                                </div>

                                <div class="text-base font-black text-gray-700 dark:text-gray-200">
                                    Order tidak ditemukan
                                </div>
                                <p class="mt-2 text-sm leading-6 text-gray-500 dark:text-gray-400">
                                    Coba ubah nama pelanggan atau nomor invoice pencarian Anda.
                                </p>
                            </div>
                        @endforelse
                    </div>
                @else
                    <div class="rounded-[28px] border border-dashed border-blue-200 bg-white/85 px-6 py-12 text-center premium-card dark:border-gray-700 dark:bg-gray-800">
                        <div class="mx-auto mb-4 flex h-16 w-16 items-center justify-center rounded-full bg-blue-100 text-blue-600 shadow-[0_0_30px_rgba(14,165,233,0.18)] dark:bg-blue-500/10 dark:text-blue-400">
                            <svg class="h-8 w-8" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.8" d="M21 21l-4.35-4.35m1.85-5.15a7 7 0 11-14 0 7 7 0 0114 0z" />
                            </svg>
                        </div>

                        <div class="text-base font-black text-gray-700 dark:text-gray-200">
                            Trace order belum ditampilkan
                        </div>
                        <p class="mt-2 text-sm leading-6 text-gray-500 dark:text-gray-400">
                            Data order akan tampil saat halaman dibuka dengan parameter trace yang sesuai.
                        </p>
                    </div>
                @endif
            </div>

        </div>
    </div>

    <script>
        function updateThemeIcon() {
            const icon = document.getElementById('themeIcon');
            if (!icon) return;
            icon.textContent = document.documentElement.classList.contains('dark') ? '☀️' : '🌙';
        }

        function toggleDarkMode() {
            document.documentElement.classList.toggle('dark');
            localStorage.setItem(
                'theme',
                document.documentElement.classList.contains('dark') ? 'dark' : 'light'
            );
            updateThemeIcon();
        }

        if (localStorage.getItem('theme') === 'dark') {
            document.documentElement.classList.add('dark');
        }

        updateThemeIcon();
    </script>

</body>
</html>