@extends('layouts.app')

@section('title', 'Commande #' . $foodOrder->order_number)

@push('styles')
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
<style>
    .glass-card { background: rgba(255,255,255,0.97); backdrop-filter: blur(12px); }
    .pulse-ring { animation: pulse-ring 2s ease-in-out infinite; }
    @keyframes pulse-ring { 0%,100%{transform:scale(1);opacity:1} 50%{transform:scale(1.05);opacity:0.8} }
    .bounce-soft { animation: bounce-soft 2s ease-in-out infinite; }
    @keyframes bounce-soft { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-5px)} }
    .shimmer { background:linear-gradient(90deg,transparent,rgba(255,255,255,0.3),transparent); background-size:200% 100%; animation:shimmer 2s infinite; }
    @keyframes shimmer { 0%{background-position:-200% 0} 100%{background-position:200% 0} }
    .live-dot { animation: blink 1.5s ease-in-out infinite; }
    @keyframes blink { 0%,100%{opacity:1} 50%{opacity:0.3} }
    #orderMap { height: 180px; border-radius: 12px; }
    .step-line { height: 2px; }
    .accordion-content { max-height: 0; overflow: hidden; transition: max-height 0.3s ease; }
    .accordion-content.open { max-height: 500px; }
</style>
@endpush

@section('content')
@php
    $statusConfig = [
        'pending' => ['gradient' => 'from-amber-400 to-orange-500', 'bg' => 'bg-amber-500', 'icon' => '⏳', 'label' => 'En attente', 'desc' => 'Le prestataire va confirmer votre commande', 'step' => 1],
        'accepted' => ['gradient' => 'from-blue-400 to-indigo-500', 'bg' => 'bg-blue-500', 'icon' => '👍', 'label' => 'Acceptée', 'desc' => 'Votre commande va être préparée', 'step' => 2],
        'preparing' => ['gradient' => 'from-purple-400 to-pink-500', 'bg' => 'bg-purple-500', 'icon' => '👨‍🍳', 'label' => 'En préparation', 'desc' => 'Le chef prépare votre commande', 'step' => 3],
        'ready' => ['gradient' => 'from-green-400 to-emerald-500', 'bg' => 'bg-green-500', 'icon' => $foodOrder->delivery_type === 'pickup' ? '🎉' : '🚚', 'label' => $foodOrder->delivery_type === 'pickup' ? 'Prête !' : 'En route', 'desc' => $foodOrder->delivery_type === 'pickup' ? 'Venez récupérer votre commande' : 'Votre commande arrive bientôt', 'step' => 4],
        'delivered' => ['gradient' => 'from-emerald-400 to-teal-500', 'bg' => 'bg-teal-500', 'icon' => '📦', 'label' => 'Livrée', 'desc' => 'Bon appétit !', 'step' => 5],
        'completed' => ['gradient' => 'from-gray-400 to-gray-500', 'bg' => 'bg-gray-500', 'icon' => '✅', 'label' => 'Terminée', 'desc' => 'Merci pour votre commande', 'step' => 5],
        'cancelled' => ['gradient' => 'from-red-400 to-rose-500', 'bg' => 'bg-red-500', 'icon' => '❌', 'label' => 'Annulée', 'desc' => 'Commande annulée', 'step' => 0],
        'rejected' => ['gradient' => 'from-red-400 to-rose-500', 'bg' => 'bg-red-500', 'icon' => '🚫', 'label' => 'Refusée', 'desc' => 'Le prestataire a refusé', 'step' => 0],
    ];
    $config = $statusConfig[$foodOrder->status] ?? $statusConfig['pending'];
    $isActive = !in_array($foodOrder->status, ['cancelled', 'rejected', 'completed']);
@endphp

<div class="min-h-screen bg-gray-50">
    
    {{-- Header Sticky avec statut --}}
    <div class="sticky top-0 z-40 bg-gradient-to-r {{ $config['gradient'] }} text-white shadow-lg">
        <div class="safe-area-top"></div>
        <div class="px-4 py-3">
            <div class="flex items-center justify-between">
                <a href="{{ route('food.orders') }}" class="w-10 h-10 flex items-center justify-center rounded-full bg-white/20 hover:bg-white/30 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="M15 19l-7-7 7-7"/>
                    </svg>
                </a>
                <div class="text-center">
                    <p class="text-xs opacity-80">Commande</p>
                    <p class="font-bold">#{{ $foodOrder->order_number }}</p>
                </div>
                @if($isActive)
                    <div class="flex items-center gap-1.5 text-xs bg-white/20 px-2 py-1 rounded-full">
                        <span class="w-1.5 h-1.5 bg-white rounded-full live-dot"></span>
                        <span>Live</span>
                    </div>
                @else
                    <div class="w-10"></div>
                @endif
            </div>
        </div>
    </div>

    {{-- Statut principal --}}
    <div class="bg-gradient-to-r {{ $config['gradient'] }} text-white px-4 pb-8 pt-2 relative overflow-hidden">
        <div class="absolute inset-0 shimmer opacity-20"></div>
        <div class="relative text-center">
            <div class="w-20 h-20 mx-auto bg-white/20 rounded-2xl flex items-center justify-center text-4xl mb-3 {{ $isActive ? 'bounce-soft' : '' }}">
                {{ $config['icon'] }}
            </div>
            <h2 class="text-2xl font-bold mb-1">{{ $config['label'] }}</h2>
            <p class="text-white/80 text-sm">{{ $config['desc'] }}</p>
            
            @if($isActive && in_array($foodOrder->status, ['accepted', 'preparing']))
                <div class="mt-3 inline-flex items-center gap-2 bg-white/20 px-4 py-2 rounded-full text-sm">
                    <span>⏱️</span>
                    <span>≈ {{ $foodOrder->prestataire->food_estimated_prep_time ?? 30 }} min</span>
                </div>
            @endif
        </div>
    </div>

    {{-- Progress bar horizontale minimaliste --}}
    @if(!in_array($foodOrder->status, ['cancelled', 'rejected']))
        <div class="bg-white border-b px-4 py-4">
            <div class="flex items-center justify-between max-w-md mx-auto">
                @php
                    $steps = [
                        ['step' => 1, 'icon' => '📝', 'label' => 'Reçue'],
                        ['step' => 2, 'icon' => '✓', 'label' => 'Acceptée'],
                        ['step' => 3, 'icon' => '🔥', 'label' => 'Préparation'],
                        ['step' => 4, 'icon' => $foodOrder->delivery_type === 'pickup' ? '📍' : '🚚', 'label' => $foodOrder->delivery_type === 'pickup' ? 'Prête' : 'Livrée'],
                    ];
                @endphp
                @foreach($steps as $i => $step)
                    <div class="flex flex-col items-center {{ $i > 0 ? 'flex-1' : '' }}">
                        @if($i > 0)
                            <div class="step-line w-full {{ $config['step'] >= $step['step'] ? $config['bg'] : 'bg-gray-200' }} mb-2"></div>
                        @endif
                        <div class="w-8 h-8 rounded-full flex items-center justify-center text-sm {{ $config['step'] >= $step['step'] ? $config['bg'] . ' text-white' : 'bg-gray-200 text-gray-400' }} {{ $config['step'] == $step['step'] ? 'ring-4 ring-opacity-30 ring-current pulse-ring' : '' }}">
                            @if($config['step'] > $step['step'])
                                <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M5 13l4 4L19 7"/></svg>
                            @else
                                {{ $step['icon'] }}
                            @endif
                        </div>
                        <span class="text-xs mt-1 {{ $config['step'] >= $step['step'] ? 'text-gray-900 font-medium' : 'text-gray-400' }}">{{ $step['label'] }}</span>
                    </div>
                @endforeach
            </div>
        </div>
    @endif

    <div class="px-4 py-4 space-y-4 pb-32">
        
        {{-- Alerte action requise --}}
        @if($foodOrder->isDelivered() && !$foodOrder->client_confirmed)
            <div class="bg-green-50 border-2 border-green-200 rounded-2xl p-4">
                <div class="flex items-center gap-3 mb-3">
                    <span class="text-2xl">✅</span>
                    <div>
                        <p class="font-bold text-green-800">Commande reçue ?</p>
                        <p class="text-sm text-green-600">Confirmez la réception pour terminer</p>
                    </div>
                </div>
                <form action="{{ route('food.orders.confirm', $foodOrder) }}" method="POST">
                    @csrf
                    <button type="submit" class="w-full py-3 bg-green-500 hover:bg-green-600 text-white font-bold rounded-xl transition">
                        Confirmer la réception
                    </button>
                </form>
            </div>
        @endif

        {{-- Carte - Adresse livraison/retrait --}}
        @if($foodOrder->delivery_type === 'pickup' || ($foodOrder->delivery_lat && $foodOrder->delivery_lng))
            <div class="bg-white rounded-2xl shadow-sm overflow-hidden">
                <div id="orderMap"></div>
                <div class="p-4">
                    <div class="flex items-start justify-between gap-3">
                        <div class="flex-1 min-w-0">
                            <p class="text-xs text-gray-500 uppercase tracking-wide mb-1">
                                {{ $foodOrder->delivery_type === 'pickup' ? '📍 Adresse de retrait' : '🏠 Livraison' }}
                            </p>
                            <p class="font-medium text-gray-900 truncate">
                                @if($foodOrder->delivery_type === 'pickup')
                                    {{ $foodOrder->prestataire->address }}, {{ $foodOrder->prestataire->city }}
                                @else
                                    {{ $foodOrder->delivery_address }}
                                @endif
                            </p>
                            @if($foodOrder->delivery_floor)
                                <p class="text-sm text-gray-500">Étage {{ $foodOrder->delivery_floor }}@if($foodOrder->delivery_door_code) • Code: {{ $foodOrder->delivery_door_code }}@endif</p>
                            @endif
                        </div>
                        @php
                            $lat = $foodOrder->delivery_type === 'pickup' ? $foodOrder->prestataire->latitude : $foodOrder->delivery_lat;
                            $lng = $foodOrder->delivery_type === 'pickup' ? $foodOrder->prestataire->longitude : $foodOrder->delivery_lng;
                        @endphp
                        @if($lat && $lng)
                            <a href="https://www.google.com/maps/dir/?api=1&destination={{ $lat }},{{ $lng }}" 
                               target="_blank"
                               class="flex-shrink-0 w-12 h-12 bg-blue-500 hover:bg-blue-600 text-white rounded-xl flex items-center justify-center 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="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"/>
                                </svg>
                            </a>
                        @endif
                    </div>
                </div>
            </div>
        @endif

        {{-- Prestataire - Compact --}}
        <div class="bg-white rounded-2xl shadow-sm p-4">
            <div class="flex items-center gap-3">
                @if($foodOrder->prestataire->profile_image)
                    <img src="{{ asset('storage/' . $foodOrder->prestataire->profile_image) }}" class="w-12 h-12 rounded-xl object-cover">
                @else
                    <div class="w-12 h-12 rounded-xl bg-orange-100 flex items-center justify-center text-xl">👨‍🍳</div>
                @endif
                <div class="flex-1 min-w-0">
                    <p class="font-bold text-gray-900 truncate">{{ $foodOrder->prestataire->company_name ?? $foodOrder->prestataire->business_name }}</p>
                    <p class="text-sm text-gray-500">{{ $foodOrder->prestataire->city }}</p>
                </div>
                @if($foodOrder->prestataire->phone)
                    <a href="tel:{{ $foodOrder->prestataire->phone }}" 
                       class="w-12 h-12 bg-green-500 hover:bg-green-600 text-white rounded-xl flex items-center justify-center 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="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z"/>
                        </svg>
                    </a>
                @endif
            </div>
        </div>

        {{-- Articles - Accordion --}}
        <div class="bg-white rounded-2xl shadow-sm overflow-hidden">
            <button onclick="toggleAccordion('itemsAccordion')" class="w-full p-4 flex items-center justify-between text-left">
                <div class="flex items-center gap-3">
                    <span class="text-xl">🛒</span>
                    <div>
                        <p class="font-bold text-gray-900">{{ $foodOrder->items->sum('quantity') }} article{{ $foodOrder->items->sum('quantity') > 1 ? 's' : '' }}</p>
                        <p class="text-sm text-gray-500">{{ number_format($foodOrder->total, 2) }} €</p>
                    </div>
                </div>
                <svg id="itemsAccordionIcon" class="w-5 h-5 text-gray-400 transition-transform" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/>
                </svg>
            </button>
            <div id="itemsAccordion" class="accordion-content">
                <div class="px-4 pb-4 border-t border-gray-100 pt-3">
                    <div class="space-y-3">
                        @foreach($foodOrder->items as $item)
                            <div class="flex items-center gap-3">
                                <span class="w-7 h-7 bg-orange-100 text-orange-600 rounded-lg flex items-center justify-center text-xs font-bold">{{ $item->quantity }}x</span>
                                <span class="flex-1 text-gray-900 text-sm">{{ $item->product_name }}</span>
                                <span class="font-medium text-gray-900 text-sm">{{ number_format($item->total_price, 2) }} €</span>
                            </div>
                            @if($item->special_instructions)
                                <p class="text-xs text-orange-500 ml-10">💬 {{ $item->special_instructions }}</p>
                            @endif
                        @endforeach
                    </div>
                    <div class="border-t border-gray-100 mt-4 pt-3 space-y-1">
                        <div class="flex justify-between text-sm text-gray-500">
                            <span>Sous-total</span>
                            <span>{{ number_format($foodOrder->subtotal, 2) }} €</span>
                        </div>
                        @if($foodOrder->service_fee > 0)
                            <div class="flex justify-between text-sm text-gray-500">
                                <span>Frais de service</span>
                                <span>{{ number_format($foodOrder->service_fee, 2) }} €</span>
                            </div>
                        @endif
                        @if($foodOrder->delivery_fee > 0)
                            <div class="flex justify-between text-sm text-gray-500">
                                <span>Livraison</span>
                                <span>{{ number_format($foodOrder->delivery_fee, 2) }} €</span>
                            </div>
                        @endif
                        <div class="flex justify-between font-bold text-gray-900 pt-2">
                            <span>Total</span>
                            <span class="text-orange-600">{{ number_format($foodOrder->total, 2) }} €</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        {{-- Paiement --}}
        <div class="bg-white rounded-2xl shadow-sm p-4">
            <div class="flex items-center justify-between">
                <div class="flex items-center gap-3">
                    <span class="text-xl">💳</span>
                    <div>
                        <p class="font-medium text-gray-900">
                            @if($foodOrder->payment_method === 'card')
                                Carte bancaire
                            @elseif($foodOrder->payment_method === 'cash')
                                Espèces
                            @else
                                Paiement
                            @endif
                        </p>
                        <p class="text-sm {{ $foodOrder->payment_status === 'paid' ? 'text-green-600' : 'text-amber-600' }}">
                            {{ $foodOrder->payment_status === 'paid' ? '✓ Payé' : 'En attente' }}
                        </p>
                    </div>
                </div>
                <span class="text-lg font-bold text-gray-900">{{ number_format($foodOrder->total, 2) }} €</span>
            </div>
            
            {{-- Bouton payer si pas encore payé ET prestataire a Stripe --}}
            @if(function_exists('feature_enabled') && feature_enabled('food_payment_enabled') && $foodOrder->prestataire->stripe_onboarding_completed)
                @if($foodOrder->payment_status !== 'paid' && !in_array($foodOrder->status, ['cancelled', 'rejected']))
                    <a href="{{ route('food.orders.payment', $foodOrder) }}" 
                       class="mt-3 w-full flex items-center justify-center gap-2 py-3 bg-gradient-to-r from-orange-500 to-amber-500 text-white font-bold rounded-xl">
                        💳 Payer maintenant
                    </a>
                @endif
            @endif
        </div>

        {{-- Infos supplémentaires - Accordion --}}
        <div class="bg-white rounded-2xl shadow-sm overflow-hidden">
            <button onclick="toggleAccordion('infoAccordion')" class="w-full p-4 flex items-center justify-between text-left">
                <div class="flex items-center gap-3">
                    <span class="text-xl">ℹ️</span>
                    <span class="font-medium text-gray-900">Détails & historique</span>
                </div>
                <svg id="infoAccordionIcon" class="w-5 h-5 text-gray-400 transition-transform" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/>
                </svg>
            </button>
            <div id="infoAccordion" class="accordion-content">
                <div class="px-4 pb-4 border-t border-gray-100 pt-3 space-y-3">
                    <div class="flex justify-between text-sm">
                        <span class="text-gray-500">Commandé le</span>
                        <span class="text-gray-900">{{ $foodOrder->created_at->format('d/m/Y à H:i') }}</span>
                    </div>
                    @if($foodOrder->accepted_at)
                        <div class="flex justify-between text-sm">
                            <span class="text-gray-500">Acceptée</span>
                            <span class="text-gray-900">{{ $foodOrder->accepted_at->format('H:i') }}</span>
                        </div>
                    @endif
                    @if($foodOrder->preparing_at)
                        <div class="flex justify-between text-sm">
                            <span class="text-gray-500">En préparation</span>
                            <span class="text-gray-900">{{ $foodOrder->preparing_at->format('H:i') }}</span>
                        </div>
                    @endif
                    @if($foodOrder->ready_at)
                        <div class="flex justify-between text-sm">
                            <span class="text-gray-500">Prête</span>
                            <span class="text-gray-900">{{ $foodOrder->ready_at->format('H:i') }}</span>
                        </div>
                    @endif
                    @if($foodOrder->delivered_at)
                        <div class="flex justify-between text-sm">
                            <span class="text-gray-500">Livrée</span>
                            <span class="text-gray-900">{{ $foodOrder->delivered_at->format('H:i') }}</span>
                        </div>
                    @endif
                    <div class="flex justify-between text-sm">
                        <span class="text-gray-500">Type</span>
                        <span class="text-gray-900">{{ $foodOrder->delivery_type === 'pickup' ? 'À emporter' : 'Livraison' }}</span>
                    </div>
                    @if($foodOrder->delivery_contact_name)
                        <div class="flex justify-between text-sm">
                            <span class="text-gray-500">Contact</span>
                            <span class="text-gray-900">{{ $foodOrder->delivery_contact_name }}</span>
                        </div>
                    @endif
                    @if($foodOrder->notes)
                        <div class="pt-2 border-t border-gray-100">
                            <p class="text-xs text-gray-500 mb-1">Notes</p>
                            <p class="text-sm text-gray-900">{{ $foodOrder->notes }}</p>
                        </div>
                    @endif
                </div>
            </div>
        </div>

        {{-- Annuler la commande --}}
        @if($foodOrder->canBeCancelled())
            <button onclick="document.getElementById('cancelModal').classList.remove('hidden')" 
                    class="w-full py-3 text-red-500 hover:text-red-600 text-sm font-medium">
                Annuler la commande
            </button>
        @endif

    </div>

    {{-- Bottom bar fixe - Commander à nouveau --}}
    @if(in_array($foodOrder->status, ['completed', 'delivered']))
        <div class="fixed bottom-0 left-0 right-0 bg-white border-t shadow-lg p-4 safe-area-bottom">
            <a href="{{ route('food.menu', $foodOrder->prestataire) }}" 
               class="block w-full py-4 bg-gradient-to-r from-orange-500 to-amber-500 text-white text-center font-bold rounded-xl">
                🔄 Commander à nouveau
            </a>
        </div>
    @endif
</div>

{{-- Modal annulation --}}
<div id="cancelModal" class="hidden fixed inset-0 bg-black/50 backdrop-blur-sm flex items-end sm:items-center justify-center z-50">
    <div class="bg-white w-full sm:max-w-md sm:rounded-2xl rounded-t-3xl p-6 safe-area-bottom">
        <div class="w-12 h-1 bg-gray-300 rounded-full mx-auto mb-4 sm:hidden"></div>
        <h3 class="font-bold text-xl text-gray-900 mb-2">Annuler la commande ?</h3>
        <p class="text-gray-500 mb-4 text-sm">Cette action est irréversible.</p>
        <form action="{{ route('food.orders.cancel', $foodOrder) }}" method="POST">
            @csrf
            <textarea name="reason" rows="2" class="w-full rounded-xl border-gray-200 text-sm mb-4" placeholder="Raison (optionnel)"></textarea>
            <div class="flex gap-3">
                <button type="button" onclick="document.getElementById('cancelModal').classList.add('hidden')" 
                        class="flex-1 py-3 bg-gray-100 text-gray-700 font-semibold rounded-xl">
                    Non
                </button>
                <button type="submit" class="flex-1 py-3 bg-red-500 text-white font-semibold rounded-xl">
                    Oui, annuler
                </button>
            </div>
        </form>
    </div>
</div>
@endsection

@push('scripts')
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
<script>
// Accordion toggle
function toggleAccordion(id) {
    const content = document.getElementById(id);
    const icon = document.getElementById(id + 'Icon');
    content.classList.toggle('open');
    icon.style.transform = content.classList.contains('open') ? 'rotate(180deg)' : '';
}

// Map
document.addEventListener('DOMContentLoaded', function() {
    const mapEl = document.getElementById('orderMap');
    if (mapEl) {
        @if($foodOrder->delivery_type === 'pickup' && $foodOrder->prestataire->latitude && $foodOrder->prestataire->longitude)
            const lat = {{ $foodOrder->prestataire->latitude }};
            const lng = {{ $foodOrder->prestataire->longitude }};
        @elseif($foodOrder->delivery_lat && $foodOrder->delivery_lng)
            const lat = {{ $foodOrder->delivery_lat ?? 0 }};
            const lng = {{ $foodOrder->delivery_lng ?? 0 }};
        @else
            const lat = null; const lng = null;
        @endif
        
        if (lat && lng) {
            const map = L.map('orderMap', { zoomControl: false, attributionControl: false }).setView([lat, lng], 15);
            L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png').addTo(map);
            L.marker([lat, lng]).addTo(map);
        }
    }
});

// Auto-refresh toutes les 15 sec si commande active
@if($isActive)
setInterval(() => {
    fetch('{{ route('food.orders.status', $foodOrder) }}')
        .then(r => r.json())
        .then(d => { if(d.status !== '{{ $foodOrder->status }}') location.reload(); })
        .catch(() => {});
}, 15000);
@endif
</script>
@endpush