@extends('layouts.app')

@section('title', 'Cuisine Live')

@push('styles')
<style>
    .tab-btn.active {
        background: linear-gradient(135deg, #f97316, #f59e0b);
        color: white;
        box-shadow: 0 4px 15px rgba(249, 115, 22, 0.4);
    }
    .order-card {
        transition: all 0.3s ease;
    }
    .order-card:active {
        transform: scale(0.98);
    }
    .pulse-urgent {
        animation: pulse 2s infinite;
    }
    @keyframes pulse {
        0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.4); }
        50% { opacity: 0.9; box-shadow: 0 0 0 8px rgba(239, 68, 68, 0); }
    }
    .badge-count {
        min-width: 24px;
        height: 24px;
    }
</style>
@endpush

@section('content')
{{-- Section d'aide intégrée --}}
<div class="px-4 pt-4 bg-gray-100">
    <x-help-section page="prestataire.food-orders.dashboard" />
</div>

<div class="min-h-screen bg-gray-100">
    
    {{-- Header compact --}}
    <div class="bg-gradient-to-r from-gray-900 to-gray-800 text-white px-4 py-3 sticky top-0 z-50">
        <div class="flex items-center justify-between">
            <div class="flex items-center gap-3">
                <div class="w-10 h-10 bg-gradient-to-br from-orange-500 to-red-500 rounded-xl flex items-center justify-center">
                    <span class="text-lg">🔥</span>
                </div>
                <div>
                    <h1 class="font-bold text-lg">Cuisine Live</h1>
                    <p class="text-xs text-gray-400" id="live-clock">--:--</p>
                </div>
            </div>
            <div class="flex items-center gap-2">
                {{-- Bouton d'aide --}}
                <button onclick="document.getElementById('help-modal').classList.toggle('hidden')" class="p-2 bg-white/10 hover:bg-white/20 rounded-lg transition" title="Aide">
                    <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="M8.228 9c.549-1.165 2.03-2 3.772-2 2.21 0 4 1.343 4 3 0 1.4-1.278 2.575-3.006 2.907-.542.104-.994.54-.994 1.093m0 3h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
                    </svg>
                </button>
                <a href="{{ route('prestataire.food-orders.index') }}" class="p-2 bg-white/10 rounded-lg">
                    <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="M4 6h16M4 10h16M4 14h16M4 18h16"/>
                    </svg>
                </a>
                <button onclick="location.reload()" class="p-2 bg-orange-500 rounded-lg">
                    <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="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"/>
                    </svg>
                </button>
            </div>
        </div>
    </div>
    
    {{-- Modal d'aide --}}
    <div id="help-modal" class="hidden fixed inset-0 z-50 flex items-center justify-center bg-black/50 p-4">
        <div class="bg-white rounded-2xl max-w-lg w-full max-h-[80vh] overflow-y-auto shadow-2xl">
            <div class="p-5 border-b bg-gradient-to-r from-orange-500 to-amber-500 text-white rounded-t-2xl">
                <div class="flex items-center justify-between">
                    <h3 class="font-bold text-lg flex items-center gap-2">📚 Guide Cuisine Live</h3>
                    <button onclick="document.getElementById('help-modal').classList.add('hidden')" class="p-1 hover:bg-white/20 rounded-lg transition">
                        <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="M6 18L18 6M6 6l12 12"/>
                        </svg>
                    </button>
                </div>
            </div>
            <div class="p-5 space-y-4">
                <div class="p-3 bg-amber-50 rounded-xl border border-amber-200">
                    <h4 class="font-bold text-amber-800 mb-1">⏳ Commandes en attente</h4>
                    <p class="text-sm text-amber-700">Nouvelles commandes à accepter ou refuser. Répondez rapidement pour satisfaire vos clients !</p>
                </div>
                <div class="p-3 bg-blue-50 rounded-xl border border-blue-200">
                    <h4 class="font-bold text-blue-800 mb-1">✓ Commandes acceptées</h4>
                    <p class="text-sm text-blue-700">Commandes confirmées. Passez-les en "Préparation" quand vous commencez.</p>
                </div>
                <div class="p-3 bg-purple-50 rounded-xl border border-purple-200">
                    <h4 class="font-bold text-purple-800 mb-1">🔥 En préparation</h4>
                    <p class="text-sm text-purple-700">Vous cuisinez ! Le client voit que sa commande est en cours.</p>
                </div>
                <div class="p-3 bg-green-50 rounded-xl border border-green-200">
                    <h4 class="font-bold text-green-800 mb-1">✅ Prêtes</h4>
                    <p class="text-sm text-green-700">Commandes terminées. Le client reçoit une notification pour récupérer/recevoir.</p>
                </div>
                <div class="p-3 bg-gray-50 rounded-xl border border-gray-200">
                    <h4 class="font-bold text-gray-800 mb-1">💡 Astuces</h4>
                    <ul class="text-sm text-gray-600 space-y-1">
                        <li>• La page se rafraîchit automatiquement</li>
                        <li>• Cliquez sur une commande pour voir les détails</li>
                        <li>• Utilisez les onglets pour filtrer par statut</li>
                        <li>• Le temps affiché montre l'ancienneté de la commande</li>
                    </ul>
                </div>
            </div>
        </div>
    </div>

    {{-- Stats en ligne --}}
    <div class="px-4 py-3 bg-white border-b">
        <div class="flex gap-2 overflow-x-auto pb-1">
            {{-- Revenus du jour --}}
            <div class="flex-shrink-0 flex items-center gap-2 px-3 py-2 bg-green-50 rounded-xl border border-green-200">
                <span class="text-lg">💰</span>
                <div>
                    <p class="text-xl font-bold text-green-600">{{ number_format($paymentStats['revenue_today'] ?? 0, 2) }}€</p>
                    <p class="text-xs text-gray-500">Jour</p>
                </div>
            </div>
            <div class="flex-shrink-0 flex items-center gap-2 px-3 py-2 bg-amber-50 rounded-xl border border-amber-200">
                <span class="text-lg">⏳</span>
                <div>
                    <p class="text-xl font-bold text-amber-600">{{ $orders['pending']->count() }}</p>
                    <p class="text-xs text-gray-500">Attente</p>
                </div>
            </div>
            <div class="flex-shrink-0 flex items-center gap-2 px-3 py-2 bg-blue-50 rounded-xl border border-blue-200">
                <span class="text-lg">✓</span>
                <div>
                    <p class="text-xl font-bold text-blue-600">{{ $orders['accepted']->count() }}</p>
                    <p class="text-xs text-gray-500">Acceptées</p>
                </div>
            </div>
            <div class="flex-shrink-0 flex items-center gap-2 px-3 py-2 bg-purple-50 rounded-xl border border-purple-200">
                <span class="text-lg">🔥</span>
                <div>
                    <p class="text-xl font-bold text-purple-600">{{ $orders['preparing']->count() }}</p>
                    <p class="text-xs text-gray-500">Cuisine</p>
                </div>
            </div>
            <div class="flex-shrink-0 flex items-center gap-2 px-3 py-2 bg-green-50 rounded-xl border border-green-200">
                <span class="text-lg">✅</span>
                <div>
                    <p class="text-xl font-bold text-green-600">{{ $orders['ready']->count() }}</p>
                    <p class="text-xs text-gray-500">Prêtes</p>
                </div>
            </div>
            {{-- Paiements en attente --}}
            @if(($paymentStats['pending_count'] ?? 0) > 0)
            <div class="flex-shrink-0 flex items-center gap-2 px-3 py-2 bg-red-50 rounded-xl border border-red-200">
                <span class="text-lg">💳</span>
                <div>
                    <p class="text-xl font-bold text-red-600">{{ $paymentStats['pending_count'] }}</p>
                    <p class="text-xs text-gray-500">Impayées</p>
                </div>
            </div>
            @endif
        </div>
    </div>

    {{-- Tabs de navigation --}}
    <div class="px-4 py-3 bg-white sticky top-[60px] z-40 border-b shadow-sm">
        <div class="flex gap-2">
            <button onclick="showTab('pending')" id="tab-pending" class="tab-btn active flex-1 py-2.5 px-3 rounded-xl font-semibold text-sm flex items-center justify-center gap-2 bg-gray-100 text-gray-600 transition-all">
                ⏳ Attente
                @if($orders['pending']->count() > 0)
                    <span class="badge-count bg-red-500 text-white text-xs font-bold rounded-full flex items-center justify-center">{{ $orders['pending']->count() }}</span>
                @endif
            </button>
            <button onclick="showTab('accepted')" id="tab-accepted" class="tab-btn flex-1 py-2.5 px-3 rounded-xl font-semibold text-sm flex items-center justify-center gap-2 bg-gray-100 text-gray-600 transition-all">
                ✓ Acceptées
                @if($orders['accepted']->count() > 0)
                    <span class="badge-count bg-blue-500 text-white text-xs font-bold rounded-full flex items-center justify-center">{{ $orders['accepted']->count() }}</span>
                @endif
            </button>
            <button onclick="showTab('preparing')" id="tab-preparing" class="tab-btn flex-1 py-2.5 px-3 rounded-xl font-semibold text-sm flex items-center justify-center gap-2 bg-gray-100 text-gray-600 transition-all">
                🔥 Cuisine
                @if($orders['preparing']->count() > 0)
                    <span class="badge-count bg-purple-500 text-white text-xs font-bold rounded-full flex items-center justify-center">{{ $orders['preparing']->count() }}</span>
                @endif
            </button>
            <button onclick="showTab('ready')" id="tab-ready" class="tab-btn flex-1 py-2.5 px-3 rounded-xl font-semibold text-sm flex items-center justify-center gap-2 bg-gray-100 text-gray-600 transition-all">
                ✅ Prêtes
                @if($orders['ready']->count() > 0)
                    <span class="badge-count bg-green-500 text-white text-xs font-bold rounded-full flex items-center justify-center">{{ $orders['ready']->count() }}</span>
                @endif
            </button>
        </div>
    </div>

    {{-- Contenu des tabs --}}
    <div class="px-4 py-4 pb-24">
        
        {{-- Tab: En attente --}}
        <div id="content-pending" class="tab-content space-y-3">
            @forelse($orders['pending'] as $order)
                @php
                    $waitTime = $order->created_at->diffInMinutes(now());
                    $isUrgent = $waitTime > 10;
                @endphp
                <div class="order-card bg-white rounded-2xl shadow-md overflow-hidden {{ $isUrgent ? 'pulse-urgent border-2 border-red-400' : 'border border-gray-100' }}">
                    {{-- Header --}}
                    <div class="p-4 bg-gradient-to-r from-amber-50 to-orange-50 border-b border-amber-100">
                        <div class="flex justify-between items-start">
                            <div>
                                <div class="flex items-center gap-2">
                                    <span class="font-bold text-gray-900 text-lg">#{{ $order->order_number }}</span>
                                    @if($isUrgent)
                                        <span class="px-2 py-0.5 bg-red-500 text-white text-xs font-bold rounded-full animate-pulse">URGENT</span>
                                    @endif
                                    {{-- Badge paiement --}}
                                    @if($order->payment_status === 'paid')
                                        <span class="px-2 py-0.5 bg-green-500 text-white text-xs font-bold rounded-full">💳 Payé</span>
                                    @else
                                        <span class="px-2 py-0.5 bg-amber-400 text-white text-xs font-bold rounded-full">⏳ Impayé</span>
                                    @endif
                                </div>
                                <p class="text-sm text-gray-500 mt-1">
                                    👤 {{ $order->client->name ?? 'Client' }}
                                </p>
                            </div>
                            <div class="text-right">
                                <p class="text-2xl font-bold text-orange-600">{{ number_format($order->total, 2) }}€</p>
                                <p class="text-xs {{ $isUrgent ? 'text-red-500 font-semibold' : 'text-gray-400' }}">
                                    ⏱️ {{ $waitTime }} min
                                </p>
                            </div>
                        </div>
                    </div>
                    
                    {{-- Articles --}}
                    <div class="p-4">
                        <div class="space-y-2 mb-4">
                            @foreach($order->items as $item)
                                <div class="flex items-center gap-3 py-2 {{ !$loop->last ? 'border-b border-gray-100' : '' }}">
                                    <span class="w-8 h-8 bg-orange-100 text-orange-600 rounded-lg flex items-center justify-center font-bold text-sm">
                                        {{ $item->quantity }}
                                    </span>
                                    <span class="flex-1 text-gray-800">{{ $item->product_name }}</span>
                                </div>
                            @endforeach
                        </div>
                        
                        @if($order->notes)
                            <div class="p-3 bg-amber-50 rounded-xl text-sm text-amber-700 mb-4">
                                💬 {{ $order->notes }}
                            </div>
                        @endif
                        
                        {{-- Bouton Voir les détails --}}
                        <a href="{{ route('prestataire.food-orders.show', $order) }}" class="block w-full py-2.5 mb-3 bg-gray-100 text-gray-700 text-center font-semibold rounded-xl hover:bg-gray-200 transition border border-gray-200 text-sm">
                            👁️ Voir les détails de la commande
                        </a>
                        
                        {{-- Actions --}}
                        <div class="flex gap-2">
                            <form action="{{ route('prestataire.food-orders.accept', $order) }}" method="POST" class="flex-1">
                                @csrf
                                <button type="submit" class="w-full py-3.5 bg-gradient-to-r from-green-500 to-emerald-500 text-white font-bold rounded-xl shadow-lg text-base">
                                    ✓ Accepter
                                </button>
                            </form>
                            <button onclick="showRejectModal({{ $order->id }})" class="px-5 py-3.5 bg-red-100 text-red-600 font-bold rounded-xl text-base">
                                ✕
                            </button>
                        </div>
                    </div>
                </div>
            @empty
                <div class="text-center py-16">
                    <div class="w-20 h-20 bg-gray-100 rounded-full flex items-center justify-center mx-auto mb-4">
                        <span class="text-4xl">📭</span>
                    </div>
                    <p class="text-gray-500 font-medium">Aucune commande en attente</p>
                </div>
            @endforelse
        </div>

        {{-- Tab: Acceptées --}}
        <div id="content-accepted" class="tab-content space-y-3 hidden">
            @forelse($orders['accepted'] as $order)
                <div class="order-card bg-white rounded-2xl shadow-md overflow-hidden border border-gray-100">
                    <div class="p-4 bg-gradient-to-r from-blue-50 to-indigo-50 border-b border-blue-100">
                        <div class="flex justify-between items-center">
                            <div>
                                <div class="flex items-center gap-2">
                                    <span class="font-bold text-gray-900 text-lg">#{{ $order->order_number }}</span>
                                    @if($order->payment_status === 'paid')
                                        <span class="px-2 py-0.5 bg-green-500 text-white text-xs font-bold rounded-full">💳 Payé</span>
                                    @else
                                        <span class="px-2 py-0.5 bg-amber-400 text-white text-xs font-bold rounded-full">⏳ Impayé</span>
                                    @endif
                                </div>
                                <p class="text-sm text-gray-500 mt-1">👤 {{ $order->client->name ?? 'Client' }}</p>
                            </div>
                            <p class="text-2xl font-bold text-blue-600">{{ number_format($order->total, 2) }}€</p>
                        </div>
                    </div>
                    
                    <div class="p-4">
                        <div class="space-y-2 mb-4">
                            @foreach($order->items as $item)
                                <div class="flex items-center gap-3 py-2 {{ !$loop->last ? 'border-b border-gray-100' : '' }}">
                                    <span class="w-8 h-8 bg-blue-100 text-blue-600 rounded-lg flex items-center justify-center font-bold text-sm">
                                        {{ $item->quantity }}
                                    </span>
                                    <span class="flex-1 text-gray-800">{{ $item->product_name }}</span>
                                </div>
                            @endforeach
                        </div>
                        
                        {{-- Bouton Voir les détails --}}
                        <a href="{{ route('prestataire.food-orders.show', $order) }}" class="block w-full py-2.5 mb-3 bg-gray-100 text-gray-700 text-center font-semibold rounded-xl hover:bg-gray-200 transition border border-gray-200 text-sm">
                            👁️ Voir les détails
                        </a>
                        
                        <form action="{{ route('prestataire.food-orders.start-preparing', $order) }}" method="POST">
                            @csrf
                            <button type="submit" class="w-full py-3.5 bg-gradient-to-r from-purple-500 to-fuchsia-500 text-white font-bold rounded-xl shadow-lg text-base">
                                🔥 Commencer la préparation
                            </button>
                        </form>
                    </div>
                </div>
            @empty
                <div class="text-center py-16">
                    <div class="w-20 h-20 bg-gray-100 rounded-full flex items-center justify-center mx-auto mb-4">
                        <span class="text-4xl">📋</span>
                    </div>
                    <p class="text-gray-500 font-medium">Aucune commande acceptée</p>
                </div>
            @endforelse
        </div>

        {{-- Tab: En préparation --}}
        <div id="content-preparing" class="tab-content space-y-3 hidden">
            @forelse($orders['preparing'] as $order)
                <div class="order-card bg-white rounded-2xl shadow-md overflow-hidden border border-gray-100">
                    <div class="p-4 bg-gradient-to-r from-purple-50 to-fuchsia-50 border-b border-purple-100">
                        <div class="flex justify-between items-center">
                            <div>
                                <div class="flex items-center gap-2">
                                    <span class="font-bold text-gray-900 text-lg">#{{ $order->order_number }}</span>
                                    @if($order->payment_status === 'paid')
                                        <span class="px-2 py-0.5 bg-green-500 text-white text-xs font-bold rounded-full">💳 Payé</span>
                                    @else
                                        <span class="px-2 py-0.5 bg-amber-400 text-white text-xs font-bold rounded-full">⏳ Impayé</span>
                                    @endif
                                </div>
                                <p class="text-sm text-gray-500 mt-1">👤 {{ $order->client->name ?? 'Client' }}</p>
                            </div>
                            <div class="text-right">
                                <p class="text-xl font-bold text-purple-600">{{ number_format($order->total, 2) }}€</p>
                                @if($order->preparing_at)
                                    <p class="text-xs text-purple-500">🍳 {{ $order->preparing_at->diffInMinutes(now()) }} min</p>
                                @endif
                            </div>
                        </div>
                    </div>
                    
                    <div class="p-4">
                        {{-- Liste détaillée pour la cuisine --}}
                        <div class="bg-gray-50 rounded-xl p-3 mb-4">
                            @foreach($order->items as $item)
                                <div class="flex items-center gap-3 py-2 {{ !$loop->last ? 'border-b border-gray-200' : '' }}">
                                    <span class="w-10 h-10 bg-purple-500 text-white rounded-xl flex items-center justify-center font-bold">
                                        {{ $item->quantity }}
                                    </span>
                                    <span class="flex-1 font-medium text-gray-900">{{ $item->product_name }}</span>
                                </div>
                            @endforeach
                        </div>
                        
                        @if($order->notes)
                            <div class="p-3 bg-purple-50 rounded-xl text-sm text-purple-700 mb-4">
                                💬 {{ $order->notes }}
                            </div>
                        @endif
                        
                        {{-- Bouton Voir les détails --}}
                        <a href="{{ route('prestataire.food-orders.show', $order) }}" class="block w-full py-2.5 mb-3 bg-gray-100 text-gray-700 text-center font-semibold rounded-xl hover:bg-gray-200 transition border border-gray-200 text-sm">
                            👁️ Voir les détails
                        </a>
                        
                        <form action="{{ route('prestataire.food-orders.ready', $order) }}" method="POST">
                            @csrf
                            <button type="submit" class="w-full py-3.5 bg-gradient-to-r from-green-500 to-emerald-500 text-white font-bold rounded-xl shadow-lg text-base">
                                ✅ Marquer comme prêt
                            </button>
                        </form>
                    </div>
                </div>
            @empty
                <div class="text-center py-16">
                    <div class="w-20 h-20 bg-gray-100 rounded-full flex items-center justify-center mx-auto mb-4">
                        <span class="text-4xl">👨‍🍳</span>
                    </div>
                    <p class="text-gray-500 font-medium">Aucune commande en préparation</p>
                </div>
            @endforelse
        </div>

        {{-- Tab: Prêtes --}}
        <div id="content-ready" class="tab-content space-y-3 hidden">
            @forelse($orders['ready'] as $order)
                <div class="order-card bg-white rounded-2xl shadow-md overflow-hidden border border-gray-100 {{ $order->payment_status !== 'paid' ? 'ring-2 ring-amber-400' : '' }}">
                    <div class="p-4 bg-gradient-to-r from-green-50 to-emerald-50 border-b border-green-100">
                        <div class="flex justify-between items-start">
                            <div>
                                <div class="flex items-center gap-2">
                                    <span class="font-bold text-gray-900 text-lg">#{{ $order->order_number }}</span>
                                    @if($order->payment_status === 'paid')
                                        <span class="px-2 py-0.5 bg-green-500 text-white text-xs font-bold rounded-full">💳 Payé</span>
                                    @else
                                        <span class="px-2 py-0.5 bg-red-500 text-white text-xs font-bold rounded-full animate-pulse">💰 À ENCAISSER</span>
                                    @endif
                                </div>
                                <p class="text-sm font-semibold text-green-600 mt-1">👤 {{ $order->client->name ?? 'Client' }}</p>
                                @if($order->client && $order->client->phone)
                                    <a href="tel:{{ $order->client->phone }}" class="text-sm text-green-600 flex items-center gap-1 mt-1">
                                        📞 {{ $order->client->phone }}
                                    </a>
                                @endif
                            </div>
                            <div class="text-right">
                                <p class="text-xl font-bold text-green-600">{{ number_format($order->total, 2) }}€</p>
                                <span class="px-3 py-1.5 rounded-xl text-sm font-bold {{ $order->delivery_type === 'pickup' ? 'bg-cyan-100 text-cyan-700' : 'bg-indigo-100 text-indigo-700' }}">
                                    {{ $order->delivery_type === 'pickup' ? '🏪 Emporter' : '🚚 Livraison' }}
                                </span>
                            </div>
                        </div>
                    </div>
                    
                    <div class="p-4">
                        @if($order->delivery_type === 'delivery' && $order->delivery_address)
                            <div class="p-3 bg-indigo-50 rounded-xl text-sm text-indigo-700 mb-4 flex items-start gap-2">
                                <span>📍</span>
                                <span>{{ $order->delivery_address }}</span>
                            </div>
                        @endif
                        
                        {{-- Bouton encaisser espèces si non payé --}}
                        @if($order->payment_status !== 'paid')
                            <form action="{{ route('prestataire.food-orders.confirm-cash', $order) }}" method="POST" class="mb-3">
                                @csrf
                                <button type="submit" class="w-full py-3 bg-gradient-to-r from-amber-500 to-orange-500 text-white font-bold rounded-xl shadow-lg">
                                    💵 Encaisser {{ number_format($order->total, 2) }}€ en espèces
                                </button>
                            </form>
                        @endif
                        
                        {{-- Bouton Voir les détails --}}
                        <a href="{{ route('prestataire.food-orders.show', $order) }}" class="block w-full py-2.5 mb-3 bg-gray-100 text-gray-700 text-center font-semibold rounded-xl hover:bg-gray-200 transition border border-gray-200 text-sm">
                            👁️ Voir les détails de la commande
                        </a>
                        
                        <form action="{{ route('prestataire.food-orders.delivered', $order) }}" method="POST">
                            @csrf
                            <button type="submit" class="w-full py-3.5 bg-gradient-to-r from-emerald-500 to-teal-500 text-white font-bold rounded-xl shadow-lg text-base">
                                {{ $order->delivery_type === 'pickup' ? '🤝 Récupéré' : '📦 Livré' }}
                            </button>
                        </form>
                    </div>
                </div>
            @empty
                <div class="text-center py-16">
                    <div class="w-20 h-20 bg-gray-100 rounded-full flex items-center justify-center mx-auto mb-4">
                        <span class="text-4xl">🎉</span>
                    </div>
                    <p class="text-gray-500 font-medium">Aucune commande prête</p>
                </div>
            @endforelse
        </div>
    </div>
</div>

{{-- Modal de rejet --}}
<div id="rejectModal" class="fixed inset-0 z-50 hidden">
    <div class="absolute inset-0 bg-black/60 backdrop-blur-sm" onclick="hideRejectModal()"></div>
    <div class="absolute bottom-0 left-0 right-0 bg-white rounded-t-3xl p-6 transform transition-transform">
        <div class="w-12 h-1 bg-gray-300 rounded-full mx-auto mb-4"></div>
        <h3 class="text-xl font-bold text-gray-900 mb-4">Refuser la commande</h3>
        <form id="rejectForm" method="POST">
            @csrf
            <textarea name="rejection_reason" rows="3" required
                class="w-full rounded-xl border-gray-300 focus:border-red-500 focus:ring-red-500 text-base"
                placeholder="Raison du refus..."></textarea>
            <div class="flex gap-3 mt-4">
                <button type="button" onclick="hideRejectModal()" class="flex-1 py-3.5 bg-gray-100 text-gray-700 font-bold rounded-xl">
                    Annuler
                </button>
                <button type="submit" class="flex-1 py-3.5 bg-red-500 text-white font-bold rounded-xl">
                    Refuser
                </button>
            </div>
        </form>
    </div>
</div>

@push('scripts')
<script>
    // Horloge
    function updateClock() {
        const now = new Date();
        document.getElementById('live-clock').textContent = now.toLocaleTimeString('fr-FR', {hour: '2-digit', minute: '2-digit'});
    }
    updateClock();
    setInterval(updateClock, 1000);
    
    // Auto-refresh
    setTimeout(() => location.reload(), 30000);
    
    // Tabs
    function showTab(tab) {
        // Hide all
        document.querySelectorAll('.tab-content').forEach(el => el.classList.add('hidden'));
        document.querySelectorAll('.tab-btn').forEach(el => el.classList.remove('active'));
        
        // Show selected
        document.getElementById('content-' + tab).classList.remove('hidden');
        document.getElementById('tab-' + tab).classList.add('active');
    }
    
    // Modal
    function showRejectModal(orderId) {
        document.getElementById('rejectForm').action = `/prestataire/food-orders/${orderId}/reject`;
        document.getElementById('rejectModal').classList.remove('hidden');
    }
    
    function hideRejectModal() {
        document.getElementById('rejectModal').classList.add('hidden');
    }
</script>
@endpush
@endsection