<!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 ?? 'Status 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-gray-50 dark:bg-gray-950">
    
    {{-- Header --}}
    <header class="sticky top-0 z-50 bg-white dark:bg-gray-900 border-b border-gray-200 dark:border-gray-800">
        <div class="max-w-4xl mx-auto px-4 h-16 flex items-center justify-between">
            <a href="{{ route('tracking.index') }}" class="flex items-center gap-3">
                <img src="{{ \App\Models\Setting::getShopLogoIcon() }}" alt="{{ \App\Models\Setting::getShopName() }}" class="h-9 w-9 rounded-lg" />
                <span class="font-bold text-gray-900 dark:text-white">{{ \App\Models\Setting::getShopName() }}</span>
            </a>
            <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>
        </div>
    </header>
    
    <main class="max-w-4xl mx-auto px-4 py-6 md:py-8">
        {{-- Page Title --}}
        <div class="mb-6">
            <h1 class="text-xl font-bold text-gray-900 dark:text-white">Status Pesanan</h1>
            <p class="text-sm text-gray-500 dark:text-gray-400 mt-1">Ditemukan {{ $orders->count() }} pesanan</p>
        </div>
        
        {{-- Not Found Warning --}}
        @if(!empty($notFoundInvoices))
        <div class="mb-6 p-4 rounded-lg bg-amber-50 dark:bg-amber-900/20 border border-amber-200 dark:border-amber-800">
            <div class="flex items-start gap-3">
                <svg class="w-5 h-5 text-amber-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 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"/>
                </svg>
                <div>
                    <p class="text-sm font-medium text-amber-800 dark:text-amber-300">Invoice tidak ditemukan:</p>
                    <p class="text-sm text-amber-700 dark:text-amber-400 mt-1">{{ implode(', ', $notFoundInvoices) }}</p>
                </div>
            </div>
        </div>
        @endif
        
        {{-- Orders List --}}
        <div class="space-y-4">
            @foreach($orders as $order)
            @php
                $statusConfig = [
                    'pending' => ['color' => 'gray', 'label' => 'Pending', 'bg' => 'bg-gray-100 dark:bg-gray-800', 'text' => 'text-gray-600 dark:text-gray-400'],
                    'proses_cetak' => ['color' => 'blue', 'label' => 'Cetak', 'bg' => 'bg-blue-100 dark:bg-blue-900/30', 'text' => 'text-blue-600 dark:text-blue-400'],
                    'finishing' => ['color' => 'orange', 'label' => 'Finishing', 'bg' => 'bg-orange-100 dark:bg-orange-900/30', 'text' => 'text-orange-600 dark:text-orange-400'],
                    'selesai' => ['color' => 'green', 'label' => 'Selesai', 'bg' => 'bg-green-100 dark:bg-green-900/30', 'text' => 'text-green-600 dark:text-green-400'],
                ];
                $config = $statusConfig[$order->production_status] ?? $statusConfig['pending'];
            @endphp
            
            <a href="{{ route('tracking.show', $order->invoice_number) }}" 
               class="block bg-white dark:bg-gray-900 rounded-xl border border-gray-200 dark:border-gray-800 p-4 md:p-5 hover:border-gray-300 dark:hover:border-gray-700 transition-colors group">
                <div class="flex items-start justify-between gap-4">
                    <div class="min-w-0 flex-1">
                        {{-- Invoice Number --}}
                        <div class="flex items-center gap-3 mb-2">
                            <h3 class="font-bold text-gray-900 dark:text-white group-hover:text-brand-600 dark:group-hover:text-brand-400 transition-colors">
                                {{ $order->invoice_number }}
                            </h3>
                            <span class="px-2 py-0.5 rounded text-xs font-medium {{ $config['bg'] }} {{ $config['text'] }}">
                                {{ $config['label'] }}
                            </span>
                            @if($order->pickup_status === 'picked_up')
                            <span class="px-2 py-0.5 rounded text-xs font-medium bg-green-100 dark:bg-green-900/30 text-green-600 dark:text-green-400">
                                Diambil
                            </span>
                            @endif
                        </div>
                        
                        {{-- Details --}}
                        <div class="flex flex-wrap items-center gap-x-4 gap-y-1 text-sm text-gray-500 dark:text-gray-400">
                            <span class="flex items-center gap-1.5">
                                <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"/>
                                </svg>
                                {{ $order->customer_name }}
                            </span>
                            <span class="flex items-center gap-1.5">
                                <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/>
                                </svg>
                                {{ $order->created_at->format('d M Y') }}
                            </span>
                            <span class="flex items-center gap-1.5">
                                <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l7 7a2 2 0 010 2.828l-7 7a2 2 0 01-2.828 0l-7-7A1.994 1.994 0 013 12V7a4 4 0 014-4z"/>
                                </svg>
                                {{ $order->items->count() }} item
                            </span>
                        </div>
                    </div>
                    
                    {{-- Arrow --}}
                    <div class="flex-shrink-0 text-gray-400 group-hover:text-brand-500 transition-colors">
                        <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 5l7 7-7 7"/>
                        </svg>
                    </div>
                </div>
                
                {{-- Items Preview --}}
                <div class="mt-3 pt-3 border-t border-gray-100 dark:border-gray-800">
                    <p class="text-sm text-gray-600 dark:text-gray-400 truncate">
                        {{ $order->items->pluck('file_name')->take(3)->join(', ') }}
                        @if($order->items->count() > 3)
                            <span class="text-gray-400">+{{ $order->items->count() - 3 }} lainnya</span>
                        @endif
                    </p>
                </div>
            </a>
            @endforeach
        </div>
        
        {{-- Back Button --}}
        <div class="mt-8 text-center">
            <a href="{{ route('tracking.index') }}" 
               class="inline-flex items-center gap-2 px-5 py-2.5 text-sm font-medium text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white transition-colors">
                <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18"/>
                </svg>
                Lacak Pesanan Lain
            </a>
        </div>
    </main>
    
    {{-- Footer --}}
    <footer class="py-6 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>
</body>
</html>
