<!DOCTYPE html>
<html lang="id" class="h-full">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <title>{{ $title ?? 'Lacak Pesanan - Posgraf' }}</title>
    
    @vite(['resources/css/app.css', 'resources/js/app.js'])
    
    <script>
        (function() {
            const savedTheme = localStorage.getItem('theme');
            const systemTheme = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
            if ((savedTheme || systemTheme) === 'dark') {
                document.documentElement.classList.add('dark');
            }
        })();
    </script>
</head>
<body class="min-h-screen bg-white dark:bg-gray-950" x-data="trackingForm()">
    
    <div class="min-h-screen flex flex-col lg:flex-row">
        
        {{-- Left Panel - Branding (Desktop Only) --}}
        <div class="hidden lg:flex lg:w-1/2 xl:w-2/5 bg-gray-900 relative overflow-hidden">
            {{-- Background Pattern --}}
            <div class="absolute inset-0 opacity-10">
                <svg class="w-full h-full" viewBox="0 0 100 100" preserveAspectRatio="none">
                    <defs>
                        <pattern id="grid" width="10" height="10" patternUnits="userSpaceOnUse">
                            <path d="M 10 0 L 0 0 0 10" fill="none" stroke="white" stroke-width="0.5"/>
                        </pattern>
                    </defs>
                    <rect width="100" height="100" fill="url(#grid)"/>
                </svg>
            </div>
            
            {{-- Content --}}
            <div class="relative z-10 flex flex-col justify-between p-12 xl:p-16 w-full">
                {{-- Logo --}}
                <div>
                    <img src="{{ \App\Models\Setting::getShopLogoIcon() }}" alt="{{ \App\Models\Setting::getShopName() }}" class="h-14 w-14 rounded-2xl" />
                </div>
                
                {{-- Main Content --}}
                <div>
                    <h1 class="text-4xl xl:text-5xl font-bold text-white leading-tight mb-6">
                        Lacak Status<br/>Pesanan Anda
                    </h1>
                    <p class="text-lg text-gray-400 max-w-md">
                        Pantau progress cetak pesanan secara real-time. Masukkan nomor invoice untuk melihat status terkini.
                    </p>
                    
                    {{-- Features --}}
                    <div class="mt-10 space-y-4">
                        <div class="flex items-center gap-4 text-gray-300">
                            <div class="w-10 h-10 rounded-xl bg-white/10 flex items-center justify-center">
                                <svg class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"/>
                                </svg>
                            </div>
                            <span>Update status real-time</span>
                        </div>
                        <div class="flex items-center gap-4 text-gray-300">
                            <div class="w-10 h-10 rounded-xl bg-white/10 flex items-center justify-center">
                                <svg class="w-5 h-5" 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-2M9 5a2 2 0 012-2h2a2 2 0 012 2"/>
                                </svg>
                            </div>
                            <span>Cek multiple invoice sekaligus</span>
                        </div>
                        <div class="flex items-center gap-4 text-gray-300">
                            <div class="w-10 h-10 rounded-xl bg-white/10 flex items-center justify-center">
                                <svg class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"/>
                                </svg>
                            </div>
                            <span>Aman tanpa perlu login</span>
                        </div>
                    </div>
                </div>
                
                {{-- Footer --}}
                <div class="text-sm text-gray-500">
                    &copy; {{ date('Y') }} {{ \App\Models\Setting::getShopName() }}
                </div>
            </div>
        </div>
        
        {{-- Right Panel - Form --}}
        <div class="flex-1 flex flex-col">
            {{-- Mobile Header --}}
            <header class="lg:hidden flex items-center justify-between p-4 border-b border-gray-100 dark:border-gray-800">
                <div class="flex items-center gap-3">
                    <img src="{{ \App\Models\Setting::getShopLogoIcon() }}" alt="{{ \App\Models\Setting::getShopName() }}" class="h-10 w-10 rounded-xl" />
                    <div>
                        <h1 class="text-lg font-bold text-gray-900 dark:text-white">{{ \App\Models\Setting::getShopName() }}</h1>
                        <p class="text-xs text-gray-500 dark:text-gray-400">Lacak Pesanan</p>
                    </div>
                </div>
                <button 
                    onclick="document.documentElement.classList.toggle('dark'); localStorage.setItem('theme', document.documentElement.classList.contains('dark') ? 'dark' : 'light')"
                    class="p-2 rounded-lg text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800"
                >
                    <svg class="w-5 h-5 hidden dark:block" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z"/>
                    </svg>
                    <svg class="w-5 h-5 dark:hidden" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z"/>
                    </svg>
                </button>
            </header>
            
            {{-- Form Content --}}
            <div class="flex-1 flex items-center justify-center p-6 md:p-10 lg:p-16">
                <div class="w-full max-w-md">
                    {{-- Desktop Theme Toggle --}}
                    <div class="hidden lg:flex justify-end mb-8">
                        <button 
                            onclick="document.documentElement.classList.toggle('dark'); localStorage.setItem('theme', document.documentElement.classList.contains('dark') ? 'dark' : 'light')"
                            class="p-2.5 rounded-lg border border-gray-200 dark:border-gray-700 text-gray-500 dark:text-gray-400 hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors"
                        >
                            <svg class="w-5 h-5 hidden dark:block" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z"/>
                            </svg>
                            <svg class="w-5 h-5 dark:hidden" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z"/>
                            </svg>
                        </button>
                    </div>
                    
                    {{-- Title (Desktop) --}}
                    <div class="hidden lg:block mb-8">
                        <h2 class="text-2xl font-bold text-gray-900 dark:text-white">Cek Status Pesanan</h2>
                        <p class="text-gray-500 dark:text-gray-400 mt-2">Masukkan nomor invoice untuk melihat status</p>
                    </div>
                    
                    {{-- Title (Mobile) --}}
                    <div class="lg:hidden text-center mb-8">
                        <h2 class="text-xl font-bold text-gray-900 dark:text-white">Cek Status Pesanan</h2>
                        <p class="text-sm text-gray-500 dark:text-gray-400 mt-1">Masukkan nomor invoice</p>
                    </div>
                    
                    {{-- Error Message --}}
                    @if(session('error'))
                    <div class="mb-6 p-4 rounded-lg bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800">
                        <div class="flex items-start gap-3">
                            <svg class="w-5 h-5 text-red-500 flex-shrink-0 mt-0.5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
                            </svg>
                            <p class="text-sm text-red-700 dark:text-red-400">{{ session('error') }}</p>
                        </div>
                    </div>
                    @endif
                    
                    {{-- Search Type Tabs --}}
                    <div class="flex border-b border-gray-200 dark:border-gray-700 mb-6">
                        <button 
                            type="button"
                            @click="searchType = 'invoice'"
                            :class="searchType === 'invoice' 
                                ? 'border-brand-500 text-brand-600 dark:text-brand-400' 
                                : 'border-transparent text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300'"
                            class="flex-1 pb-3 text-sm font-medium border-b-2 transition-colors"
                        >
                            Nomor Invoice
                        </button>
                        <button 
                            type="button"
                            @click="searchType = 'phone'"
                            :class="searchType === 'phone' 
                                ? 'border-brand-500 text-brand-600 dark:text-brand-400' 
                                : 'border-transparent text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300'"
                            class="flex-1 pb-3 text-sm font-medium border-b-2 transition-colors"
                        >
                            HP + Tanggal
                        </button>
                    </div>
                    
                    <form method="POST" action="{{ route('tracking.search') }}">
                        @csrf
                        <input type="hidden" name="search_type" :value="searchType">
                        
                        {{-- Invoice Search --}}
                        <div x-show="searchType === 'invoice'" x-transition.opacity>
                            <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                                Nomor Invoice
                            </label>
                            <p class="text-xs text-gray-500 dark:text-gray-400 mb-3">
                                Masukkan satu atau beberapa invoice (1 baris = 1 invoice)
                            </p>
                            <textarea 
                                name="invoice_numbers" 
                                rows="4"
                                placeholder="INV-20260130-0001&#10;INV-20260130-0002&#10;INV-20260130-0003"
                                class="w-full px-4 py-3 rounded-lg border border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-900 text-gray-900 dark:text-white placeholder-gray-400 dark:placeholder-gray-500 focus:border-brand-500 dark:focus:border-brand-500 focus:ring-2 focus:ring-brand-500/20 focus:outline-none transition-all text-sm font-mono resize-none"
                            >{{ old('invoice_numbers') }}</textarea>
                        </div>
                        
                        {{-- Phone + Date Search --}}
                        <div x-show="searchType === 'phone'" x-transition.opacity class="space-y-4">
                            <div>
                                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                                    Nomor HP
                                </label>
                                <input 
                                    type="tel" 
                                    name="phone" 
                                    placeholder="08123456789"
                                    value="{{ old('phone') }}"
                                    class="w-full h-12 px-4 rounded-lg border border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-900 text-gray-900 dark:text-white placeholder-gray-400 dark:placeholder-gray-500 focus:border-brand-500 dark:focus:border-brand-500 focus:ring-2 focus:ring-brand-500/20 focus:outline-none transition-all text-sm"
                                />
                            </div>
                            <div>
                                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                                    Tanggal Order
                                </label>
                                <input 
                                    type="date" 
                                    name="order_date" 
                                    value="{{ old('order_date', date('Y-m-d')) }}"
                                    class="w-full h-12 px-4 rounded-lg border border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-900 text-gray-900 dark:text-white focus:border-brand-500 dark:focus:border-brand-500 focus:ring-2 focus:ring-brand-500/20 focus:outline-none transition-all text-sm"
                                />
                            </div>
                        </div>
                        
                        {{-- Submit Button --}}
                        <button 
                            type="submit"
                            class="w-full mt-6 h-12 bg-gray-900 dark:bg-white text-white dark:text-gray-900 font-semibold rounded-lg hover:bg-gray-800 dark:hover:bg-gray-100 transition-colors flex items-center justify-center gap-2"
                        >
                            <svg class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/>
                            </svg>
                            Lacak Pesanan
                        </button>
                    </form>
                    
                    {{-- Help --}}
                    <p class="text-center text-sm text-gray-500 dark:text-gray-400 mt-8">
                        Butuh bantuan? <a href="tel:08123456789" class="text-brand-600 dark:text-brand-400 font-medium hover:underline">Hubungi kami</a>
                    </p>
                </div>
            </div>
            
            {{-- Mobile Footer --}}
            <footer class="lg:hidden py-4 text-center text-xs text-gray-400 dark:text-gray-500 border-t border-gray-100 dark:border-gray-800">
                &copy; {{ date('Y') }} {{ \App\Models\Setting::getShopName() }} - Printing Management System
            </footer>
        </div>
    </div>
    
    <script>
        function trackingForm() {
            return {
                searchType: 'invoice'
            }
        }
    </script>
</body>
</html>
