@extends('layouts.app')

@section('title', 'Panier - ' . $prestataire->company_name)

@section('content')
<div class="bg-gray-50 min-h-screen py-8">
    <div class="container mx-auto px-4">
        <!-- Header -->
        <div class="flex items-center justify-between mb-6">
            <div>
                <nav class="text-sm text-gray-500 mb-2">
                    <a href="{{ route('food.menu', $prestataire) }}" class="hover:text-orange-500">
                        <i class="bi bi-arrow-left me-1"></i>Retour au menu
                    </a>
                </nav>
                <h1 class="text-2xl font-bold text-gray-800">
                    <i class="bi bi-cart3 text-orange-500 me-2"></i>Votre Panier
                </h1>
                <p class="text-gray-500">{{ $prestataire->company_name }}</p>
            </div>
        </div>

        @if(empty($cartItems))
            <!-- Panier Vide -->
            <div class="bg-white rounded-xl shadow-sm p-12 text-center">
                <i class="bi bi-cart text-gray-300 text-7xl"></i>
                <h2 class="text-xl font-semibold text-gray-700 mt-4">Votre panier est vide</h2>
                <p class="text-gray-500 mt-2">Ajoutez des produits depuis le menu</p>
                <a href="{{ route('food.menu', $prestataire) }}" class="inline-block mt-6 bg-orange-500 hover:bg-orange-600 text-white px-6 py-3 rounded-lg font-semibold transition">
                    <i class="bi bi-arrow-left me-2"></i>Voir le menu
                </a>
            </div>
        @else
            <div class="grid lg:grid-cols-3 gap-8">
                <!-- Liste des articles -->
                <div class="lg:col-span-2">
                    <div class="bg-white rounded-xl shadow-sm overflow-hidden">
                        <div class="p-4 bg-gray-50 border-b">
                            <h2 class="font-semibold">Articles ({{ count($cartItems) }})</h2>
                        </div>
                        
                        <div class="divide-y">
                            @foreach($cartItems as $key => $item)
                                <div class="p-4 flex gap-4" id="cart-item-{{ $key }}">
                                    <!-- Image -->
                                    @if($item['product']->image)
                                        <img src="{{ asset('storage/' . $item['product']->image) }}" 
                                             class="w-20 h-20 rounded-lg object-cover flex-shrink-0">
                                    @else
                                        <div class="w-20 h-20 rounded-lg bg-gray-100 flex items-center justify-center flex-shrink-0">
                                            <i class="bi bi-image text-gray-400 text-2xl"></i>
                                        </div>
                                    @endif
                                    
                                    <!-- Détails -->
                                    <div class="flex-1 min-w-0">
                                        <div class="flex justify-between items-start">
                                            <h3 class="font-semibold text-gray-800">{{ $item['product']->name }}</h3>
                                            <button onclick="removeItem('{{ $key }}')" class="text-gray-400 hover:text-red-500">
                                                <i class="bi bi-x-lg"></i>
                                            </button>
                                        </div>
                                        
                                        <p class="text-orange-600 font-bold mt-1">{{ number_format($item['product']->price, 2) }} €</p>
                                        
                                        @if($item['special_instructions'])
                                            <p class="text-sm text-gray-500 mt-1">
                                                <i class="bi bi-chat-text me-1"></i>{{ $item['special_instructions'] }}
                                            </p>
                                        @endif
                                        
                                        <!-- Quantité -->
                                        <div class="flex items-center gap-3 mt-3">
                                            <button onclick="updateQuantity('{{ $key }}', -1)" 
                                                    class="w-8 h-8 rounded-full bg-gray-100 hover:bg-gray-200 flex items-center justify-center transition">
                                                <i class="bi bi-dash"></i>
                                            </button>
                                            <span class="font-semibold text-lg quantity-display" id="quantity-{{ $key }}">{{ $item['quantity'] }}</span>
                                            <button onclick="updateQuantity('{{ $key }}', 1)" 
                                                    class="w-8 h-8 rounded-full bg-orange-100 hover:bg-orange-200 text-orange-600 flex items-center justify-center transition">
                                                <i class="bi bi-plus"></i>
                                            </button>
                                            <span class="ml-auto font-bold text-gray-800" id="item-total-{{ $key }}">
                                                {{ number_format($item['total'], 2) }} €
                                            </span>
                                        </div>
                                    </div>
                                </div>
                            @endforeach
                        </div>
                        
                        <!-- Actions -->
                        <div class="p-4 bg-gray-50 border-t flex justify-between items-center">
                            <form action="{{ route('food.cart.clear', $prestataire) }}" method="POST" class="inline">
                                @csrf
                                @method('DELETE')
                                <button type="submit" class="text-red-500 hover:text-red-600 font-medium" 
                                        onclick="return confirm('Vider le panier ?')">
                                    <i class="bi bi-trash me-1"></i>Vider le panier
                                </button>
                            </form>
                            <a href="{{ route('food.menu', $prestataire) }}" class="text-orange-500 hover:text-orange-600 font-medium">
                                <i class="bi bi-plus-lg me-1"></i>Ajouter des articles
                            </a>
                        </div>
                    </div>
                </div>
                
                <!-- Résumé -->
                <div class="lg:col-span-1">
                    <div class="bg-white rounded-xl shadow-sm p-6 sticky top-4">
                        <h3 class="font-bold text-lg mb-4">Résumé de la commande</h3>
                        
                        <div class="space-y-3 text-sm">
                            <div class="flex justify-between">
                                <span class="text-gray-500">Sous-total</span>
                                <span id="subtotal">{{ number_format($totals['subtotal'], 2) }} €</span>
                            </div>
                            <div class="flex justify-between">
                                <span class="text-gray-500">Frais de service (5%)</span>
                                <span id="service-fee">{{ number_format($totals['service_fee'], 2) }} €</span>
                            </div>
                            <div class="flex justify-between text-gray-400">
                                <span>Frais de livraison</span>
                                <span>Calculé à la prochaine étape</span>
                            </div>
                        </div>
                        
                        <hr class="my-4">
                        
                        <div class="flex justify-between font-bold text-lg">
                            <span>Total estimé</span>
                            <span class="text-orange-600" id="total">{{ number_format($totals['subtotal'] + $totals['service_fee'], 2) }} €</span>
                        </div>
                        
                        <a href="{{ route('food.checkout', $prestataire) }}" 
                           class="block w-full bg-orange-500 hover:bg-orange-600 text-white text-center py-4 rounded-lg font-bold mt-6 transition">
                            <i class="bi bi-credit-card me-2"></i>Passer la commande
                        </a>
                        
                        <p class="text-xs text-gray-400 text-center mt-4">
                            <i class="bi bi-shield-check me-1"></i>Paiement sécurisé
                        </p>
                        
                        {{-- Explication du processus --}}
                        <div class="mt-4 p-3 bg-blue-50 rounded-lg border border-blue-100">
                            <p class="text-xs text-blue-700 font-medium mb-2">💡 Bon à savoir :</p>
                            <ul class="text-xs text-blue-600 space-y-1">
                                <li>• Le paiement se fait à la réception</li>
                                <li>• Vous pouvez suivre votre commande en temps réel</li>
                                <li>• Annulation possible tant que non acceptée</li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        @endif
    </div>
</div>
@endsection

@push('scripts')
<script>
function updateQuantity(itemKey, delta) {
    const quantityEl = document.getElementById('quantity-' + itemKey);
    let currentQuantity = parseInt(quantityEl.textContent);
    let newQuantity = currentQuantity + delta;
    
    if (newQuantity < 1) {
        if (confirm('Supprimer cet article ?')) {
            removeItem(itemKey);
        }
        return;
    }
    
    fetch('{{ route('food.cart.update', $prestataire) }}', {
        method: 'PATCH',
        headers: {
            'Content-Type': 'application/json',
            'X-CSRF-TOKEN': '{{ csrf_token() }}',
            'Accept': 'application/json'
        },
        body: JSON.stringify({
            item_key: itemKey,
            quantity: newQuantity
        })
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            location.reload();
        }
    })
    .catch(error => console.error('Error:', error));
}

function removeItem(itemKey) {
    if (!confirm('Supprimer cet article ?')) return;
    
    fetch('{{ route('food.cart.remove', $prestataire) }}', {
        method: 'DELETE',
        headers: {
            'Content-Type': 'application/json',
            'X-CSRF-TOKEN': '{{ csrf_token() }}',
            'Accept': 'application/json'
        },
        body: JSON.stringify({
            item_key: itemKey
        })
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            location.reload();
        }
    })
    .catch(error => console.error('Error:', error));
}
</script>
@endpush