<!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-3xl 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-3xl mx-auto px-4 py-6 md:py-8 space-y-6">
        
        @php
            $statusConfig = [
                'pending' => ['label' => 'Menunggu', 'bg' => 'bg-gray-500', 'pill' => 'bg-gray-100 text-gray-700 dark:bg-gray-800 dark:text-gray-300'],
                'proses_cetak' => ['label' => 'Cetak', 'bg' => 'bg-blue-500', 'pill' => 'bg-blue-100 text-blue-700 dark:bg-blue-900/30 dark:text-blue-400'],
                'finishing' => ['label' => 'Finishing', 'bg' => 'bg-orange-500', 'pill' => 'bg-orange-100 text-orange-700 dark:bg-orange-900/30 dark:text-orange-400'],
                'selesai' => ['label' => 'Selesai', 'bg' => 'bg-green-500', 'pill' => 'bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-400'],
            ];
            $config = $statusConfig[$order->production_status] ?? $statusConfig['pending'];
        @endphp
        
        {{-- Status Banner --}}
        <div class="bg-white dark:bg-gray-900 rounded-xl border border-gray-200 dark:border-gray-800 overflow-hidden">
            <div class="p-5 md:p-6 flex flex-col md:flex-row md:items-center md:justify-between gap-4">
                <div>
                    <div class="flex items-center gap-3 mb-2">
                        <span class="px-2.5 py-1 rounded-lg text-xs font-bold {{ $config['pill'] }}">
                            {{ $config['label'] }}
                        </span>
                        @if($order->payment_status === 'paid')
                        <span class="px-2.5 py-1 rounded-lg text-xs font-bold bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-400">
                            LUNAS
                        </span>
                        @else
                        <span class="px-2.5 py-1 rounded-lg text-xs font-bold bg-amber-100 text-amber-700 dark:bg-amber-900/30 dark:text-amber-400">
                            BELUM BAYAR
                        </span>
                        @endif
                        @if($order->pickup_status === 'picked_up')
                        <span class="px-2.5 py-1 rounded-lg text-xs font-bold bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-400">
                            SUDAH DIAMBIL
                        </span>
                        @else
                        <span class="px-2.5 py-1 rounded-lg text-xs font-bold bg-orange-100 text-orange-700 dark:bg-orange-900/30 dark:text-orange-400">
                            BELUM DIAMBIL
                        </span>
                        @endif
                    </div>
                    <h1 class="text-xl md:text-2xl font-bold text-gray-900 dark:text-white">{{ $order->invoice_number }}</h1>
                    <p class="text-sm text-gray-500 dark:text-gray-400 mt-1">{{ $order->customer_name }} • {{ $order->created_at->format('d M Y, H:i') }}</p>
                </div>
                <div class="text-left md:text-right">
                    <p class="text-xs text-gray-500 dark:text-gray-400 mb-1">Total</p>
                    <p class="text-2xl font-bold text-gray-900 dark:text-white">Rp {{ number_format($order->total_price, 0, ',', '.') }}</p>
                </div>
            </div>
        </div>
        
        {{-- Timeline --}}
        <div class="bg-white dark:bg-gray-900 rounded-xl border border-gray-200 dark:border-gray-800 overflow-hidden">
            <div class="p-5 md:p-6 border-b border-gray-100 dark:border-gray-800">
                <h2 class="text-sm font-bold text-gray-900 dark:text-white">Progress Pesanan</h2>
            </div>
            
            {{-- Progress Bar (Desktop) --}}
            <div class="hidden md:block px-6 pt-6">
                @php
                    $completedSteps = collect($timeline)->filter(fn($s) => $s['completed'])->count();
                    $progress = ($completedSteps / count($timeline)) * 100;
                @endphp
                <div class="relative h-2 bg-gray-100 dark:bg-gray-800 rounded-full overflow-hidden">
                    <div class="absolute inset-y-0 left-0 bg-brand-500 rounded-full transition-all duration-500" style="width: {{ $progress }}%"></div>
                </div>
            </div>
            
            {{-- Steps Grid --}}
            <div class="p-5 md:p-6">
                <div class="grid grid-cols-1 md:grid-cols-5 gap-4">
                    @foreach($timeline as $index => $step)
                    @php
                        $stepIcons = [
                            0 => '<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 2m-6 9l2 2 4-4"/>',
                            1 => '<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 17h2a2 2 0 002-2v-4a2 2 0 00-2-2H5a2 2 0 00-2 2v4a2 2 0 002 2h2m2 4h6a2 2 0 002-2v-4a2 2 0 00-2-2H9a2 2 0 00-2 2v4a2 2 0 002 2zm8-12V5a2 2 0 00-2-2H9a2 2 0 00-2 2v4h10z"/>',
                            2 => '<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14.121 14.121L19 19m-7-7l7-7m-7 7l-2.879 2.879M12 12L9.121 9.121m0 5.758a3 3 0 10-4.243 4.243 3 3 0 004.243-4.243zm0-5.758a3 3 0 10-4.243-4.243 3 3 0 004.243 4.243z"/>',
                            3 => '<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"/>',
                            4 => '<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>',
                        ];
                    @endphp
                    <div class="relative flex md:flex-col items-start md:items-center gap-4 md:gap-3 p-4 rounded-xl {{ $step['completed'] ? 'bg-brand-50 dark:bg-brand-900/20 border border-brand-200 dark:border-brand-800' : 'bg-gray-50 dark:bg-gray-800/50 border border-gray-200 dark:border-gray-700' }} {{ isset($step['current']) && $step['current'] ? 'ring-2 ring-brand-500 ring-offset-2 ring-offset-white dark:ring-offset-gray-900' : '' }}">
                        
                        {{-- Step Number/Icon --}}
                        <div class="flex-shrink-0 w-12 h-12 rounded-xl flex items-center justify-center {{ $step['completed'] ? 'bg-brand-500 text-white' : 'bg-gray-200 dark:bg-gray-700 text-gray-400 dark:text-gray-500' }}">
                            @if($step['completed'])
                            <svg class="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                {!! $stepIcons[$index] !!}
                            </svg>
                            @else
                            <span class="text-lg font-bold">{{ $index + 1 }}</span>
                            @endif
                        </div>
                        
                        {{-- Content --}}
                        <div class="flex-1 md:text-center">
                            <p class="text-sm font-bold {{ $step['completed'] ? 'text-gray-900 dark:text-white' : 'text-gray-400 dark:text-gray-500' }}">
                                {{ $step['label'] }}
                            </p>
                            <p class="text-xs mt-1 {{ $step['completed'] ? 'text-gray-500 dark:text-gray-400' : 'text-gray-400 dark:text-gray-600' }}">
                                {{ $step['description'] }}
                            </p>
                            @if($step['completed'] && $step['date'])
                            <p class="text-xs font-medium text-brand-600 dark:text-brand-400 mt-2">
                                {{ $step['date']->format('d M Y, H:i') }}
                            </p>
                            @endif
                        </div>
                        
                        {{-- Completed Badge (Mobile) --}}
                        @if($step['completed'])
                        <div class="md:hidden flex-shrink-0">
                            <svg class="w-5 h-5 text-brand-500" fill="currentColor" viewBox="0 0 20 20">
                                <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"/>
                            </svg>
                        </div>
                        @endif
                    </div>
                    @endforeach
                </div>
            </div>
        </div>
        
        {{-- Order Items --}}
        <div class="bg-white dark:bg-gray-900 rounded-xl border border-gray-200 dark:border-gray-800 overflow-hidden">
            <div class="p-5 md:p-6 border-b border-gray-100 dark:border-gray-800">
                <h2 class="text-sm font-bold text-gray-900 dark:text-white">Detail Pesanan</h2>
            </div>
            
            <div class="divide-y divide-gray-100 dark:divide-gray-800">
                @foreach($order->items as $item)
                <div class="p-4 md:p-5">
                    <div class="flex items-start gap-4">
                        <div class="flex-shrink-0 w-10 h-10 rounded-lg bg-gray-100 dark:bg-gray-800 flex items-center justify-center text-gray-400">
                            <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="M7 21h10a2 2 0 002-2V9.414a1 1 0 00-.293-.707l-5.414-5.414A1 1 0 0012.586 3H7a2 2 0 00-2 2v14a2 2 0 002 2z"/>
                            </svg>
                        </div>
                        <div class="flex-1 min-w-0">
                            <p class="text-sm font-semibold text-gray-900 dark:text-white truncate">{{ $item->file_name }}</p>
                            <p class="text-xs text-gray-500 dark:text-gray-400 mt-0.5">
                                {{ $item->product_name }} • {{ $item->material_name ?? '-' }} • {{ $item->size_description }}
                            </p>
                        </div>
                        <div class="text-right flex-shrink-0">
                            <p class="text-sm font-semibold text-gray-900 dark:text-white">{{ $item->qty }} pcs</p>
                            <p class="text-xs text-gray-500 dark:text-gray-400">Rp {{ number_format($item->subtotal, 0, ',', '.') }}</p>
                        </div>
                    </div>
                </div>
                @endforeach
            </div>
        </div>
        
        {{-- Back Button --}}
        <div class="text-center pt-4">
            <a href="{{ route('tracking.index') }}" 
               class="inline-flex items-center gap-2 text-sm font-medium text-gray-600 dark:text-gray-400 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>
