@extends('layouts.app')

@section('title', $prestataire->business_name . ' - Menu')

@push('styles')
<style>
    html { scroll-behavior: smooth; }
    .scrollbar-hide::-webkit-scrollbar { display: none; }
    .scrollbar-hide { -ms-overflow-style: none; scrollbar-width: none; }
    .product-card { transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); }
    .product-card:hover { transform: translateY(-4px); }
    
    /* ===== MOBILE OPTIMIZATIONS ===== */
    @media (max-width: 480px) {
        /* Cover plus compact */
        .h-40 { height: 120px !important; }
        
        /* Profile photo plus petite */
        .w-24.h-24 { width: 70px !important; height: 70px !important; }
        .-mt-12 { margin-top: -35px !important; }
        
        /* Titre plus petit */
        .text-2xl { font-size: 1.25rem !important; }
        
        /* Navigation catégories scrollable */
        .sticky.top-0 .flex.gap-2 {
            padding: 8px 0;
            gap: 6px;
        }
        .sticky.top-0 .flex.gap-2 a {
            padding: 8px 12px;
            font-size: 0.8rem;
        }
        
        /* Produits en liste compacte */
        .product-card .flex.h-32 {
            height: auto;
            flex-direction: column;
        }
        .product-card .w-32.h-full {
            width: 100% !important;
            height: 140px !important;
        }
        .product-card .flex-1.p-3 {
            padding: 12px;
        }
        
        /* Bouton commander compact */
        .product-card .p-3.pt-0 button,
        .product-card .p-3.pt-0 a {
            padding: 10px;
            font-size: 0.875rem;
        }
        
        /* Panier flottant adapté */
        .fixed.bottom-20 {
            bottom: 80px !important;
            left: 10px !important;
            right: 10px !important;
        }
        .fixed.bottom-20 a {
            padding: 12px 16px;
        }
        
        /* Espacement container */
        .container { padding-left: 12px !important; padding-right: 12px !important; }
        
        /* Padding bottom pour nav mobile */
        .min-h-screen { padding-bottom: 90px !important; }
    }
    
    @media (min-width: 481px) and (max-width: 640px) {
        /* Ajustements tablette portrait */
        .grid-cols-1 { grid-template-columns: 1fr !important; }
        .product-card .flex.h-32 { height: 110px; }
        .product-card .w-32 { width: 110px !important; }
    }
</style>
@endpush

@section('content')
<div class="min-h-screen bg-gradient-to-br from-orange-50 via-amber-50 to-yellow-50">
    
    {{-- Header du prestataire --}}
    <div class="bg-white shadow-xl">
        {{-- Cover --}}
        <div class="h-40 sm:h-56 bg-gradient-to-r from-orange-400 via-amber-400 to-yellow-400 relative overflow-hidden">
            @if($prestataire->cover_image)
                <img src="{{ asset('storage/' . $prestataire->cover_image) }}" 
                     alt="{{ $prestataire->business_name }}" 
                     class="w-full h-full object-cover">
            @endif
            <div class="absolute inset-0 bg-gradient-to-t from-black/70 via-black/20 to-transparent"></div>
            
            {{-- Bouton retour --}}
            <a href="{{ route('food.explore') }}" 
               class="absolute top-4 left-4 px-4 py-2.5 bg-white/90 backdrop-blur rounded-xl shadow-lg hover:bg-white transition flex items-center gap-2 text-gray-700 font-medium">
                ← Retour
            </a>
        </div>
        
        {{-- Infos prestataire --}}
        <div class="container mx-auto px-4">
            <div class="flex flex-col sm:flex-row gap-4 -mt-12 sm:-mt-16 relative z-10 pb-4">
                {{-- Photo profil --}}
                <div class="w-24 h-24 sm:w-32 sm:h-32 rounded-2xl overflow-hidden border-4 border-white shadow-2xl bg-white flex-shrink-0">
                    @if($prestataire->user && $prestataire->user->profile_photo_path)
                        <img src="{{ asset('storage/' . $prestataire->user->profile_photo_path) }}" 
                             alt="{{ $prestataire->business_name }}" 
                             class="w-full h-full object-cover">
                    @else
                        <div class="w-full h-full flex items-center justify-center text-5xl bg-gradient-to-br from-orange-100 to-amber-100">
                            👨‍🍳
                        </div>
                    @endif
                </div>
                
                {{-- Texte --}}
                <div class="flex-1 pt-2 sm:pt-6">
                    <h1 class="text-2xl sm:text-3xl font-bold text-gray-900">
                        {{ $prestataire->business_name ?? $prestataire->user->name ?? 'Cuisinier' }}
                    </h1>
                    @if($prestataire->description)
                        <p class="text-gray-600 mt-1 line-clamp-2 text-sm sm:text-base">{{ $prestataire->description }}</p>
                    @endif
                    
                    {{-- Stats --}}
                    <div class="flex flex-wrap gap-2 mt-3">
                        <span class="px-3 py-1.5 bg-gradient-to-r from-orange-100 to-amber-100 text-orange-600 rounded-full text-sm font-semibold shadow-sm">
                            🍽️ {{ $products->flatten()->count() }} plats
                        </span>
                        @if($prestataire->phone)
                            <a href="tel:{{ $prestataire->phone }}" 
                               class="px-3 py-1.5 bg-green-100 text-green-600 rounded-full text-sm font-semibold hover:bg-green-200 transition">
                                📱 Appeler
                            </a>
                        @endif
                    </div>
                </div>
            </div>
        </div>
    </div>

    {{-- Navigation catégories --}}
    <div class="bg-white border-b shadow-sm sticky top-0 z-20">
        <div class="container mx-auto px-4">
            <div class="flex gap-2 py-3 overflow-x-auto scrollbar-hide">
                @php
                    $emojis = [
                        'entree' => '🥗', 'plat' => '🍝', 'dessert' => '🍰', 'boisson' => '🥤',
                        'amuse_bouche' => '🧆', 'gateau' => '🎂', 'pizza' => '🍕',
                        'sandwich' => '🥪', 'salade' => '🥗', 'autre' => '🍴',
                    ];
                @endphp
                @foreach($products as $category => $categoryProducts)
                    <a href="#category-{{ $category }}" 
                       class="flex-shrink-0 px-4 py-2 bg-gradient-to-r from-orange-100 to-amber-100 hover:from-orange-200 hover:to-amber-200 text-orange-700 rounded-full font-semibold transition whitespace-nowrap shadow-sm">
                        {{ $emojis[$category] ?? '🍴' }} {{ $categories[$category] ?? ucfirst($category) }}
                        <span class="ml-1 text-xs bg-white/60 px-1.5 py-0.5 rounded-full">{{ $categoryProducts->count() }}</span>
                    </a>
                @endforeach
            </div>
        </div>
    </div>

    {{-- Menu --}}
    <div class="container mx-auto px-4 py-6">
        <div class="space-y-10">
            @foreach($products as $category => $categoryProducts)
                <section id="category-{{ $category }}" class="scroll-mt-20">
                    {{-- Titre catégorie --}}
                    <div class="flex items-center gap-3 mb-5">
                        <div class="w-12 h-12 bg-gradient-to-br from-orange-500 to-amber-500 rounded-xl flex items-center justify-center shadow-lg">
                            <span class="text-2xl">{{ $emojis[$category] ?? '🍴' }}</span>
                        </div>
                        <div>
                            <h2 class="text-xl sm:text-2xl font-bold text-gray-900">
                                {{ $categories[$category] ?? ucfirst($category) }}
                            </h2>
                            <p class="text-gray-500 text-sm">{{ $categoryProducts->count() }} produit(s)</p>
                        </div>
                    </div>
                    
                    {{-- Grille produits --}}
                    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
                        @foreach($categoryProducts as $product)
                            <div class="product-card bg-white rounded-2xl shadow-lg overflow-hidden hover:shadow-2xl group border border-gray-100">
                                {{-- Image + infos en ligne --}}
                                <div class="flex h-32">
                                    {{-- Image --}}
                                    <div class="w-32 h-full flex-shrink-0 bg-gradient-to-br from-orange-100 to-amber-100 relative overflow-hidden">
                                        @if($product->image)
                                            <img src="{{ asset('serve-food-image.php?file=' . basename($product->image)) }}" 
                                                 alt="{{ $product->name }}" 
                                                 class="w-full h-full object-cover group-hover:scale-110 transition duration-500">
                                        @else
                                            <div class="w-full h-full flex items-center justify-center text-4xl">
                                                {{ $emojis[$category] ?? '🍴' }}
                                            </div>
                                        @endif
                                    </div>
                                    
                                    {{-- Contenu --}}
                                    <div class="flex-1 p-3 flex flex-col">
                                        <h3 class="font-bold text-gray-900 group-hover:text-orange-600 transition line-clamp-1 text-base">
                                            {{ $product->name }}
                                        </h3>
                                        @if($product->description)
                                            <p class="text-gray-500 text-sm line-clamp-2 mt-1 flex-1">
                                                {{ $product->description }}
                                            </p>
                                        @endif
                                        
                                        <div class="flex items-center justify-between mt-auto pt-2">
                                            <span class="text-lg font-bold bg-gradient-to-r from-orange-500 to-amber-500 bg-clip-text text-transparent">
                                                {{ number_format($product->price, 2) }} €
                                            </span>
                                            @if($product->preparation_time)
                                                <span class="text-xs text-gray-400 bg-gray-100 px-2 py-1 rounded-full">
                                                    ⏱️ {{ $product->preparation_time }}min
                                                </span>
                                            @endif
                                        </div>
                                    </div>
                                </div>
                                
                                {{-- Bouton commander --}}
                                @auth
                                    <div class="p-3 pt-0">
                                        <form action="{{ route('food.cart.add', [$prestataire, $product]) }}" method="POST">
                                            @csrf
                                            <input type="hidden" name="quantity" value="1">
                                            <button type="submit" class="w-full py-2.5 bg-gradient-to-r from-orange-500 to-amber-500 text-white font-semibold rounded-xl hover:from-orange-600 hover:to-amber-600 transition shadow-md flex items-center justify-center gap-2">
                                                🛒 Ajouter au panier
                                            </button>
                                        </form>
                                    </div>
                                @else
                                    <div class="p-3 pt-0">
                                        <a href="{{ route('login') }}" class="block w-full py-2.5 bg-gray-100 text-gray-600 font-medium rounded-xl hover:bg-gray-200 transition text-center text-sm">
                                            🔐 Connectez-vous pour commander
                                        </a>
                                    </div>
                                @endauth
                            </div>
                        @endforeach
                    </div>
                </section>
            @endforeach
        </div>
    </div>

    {{-- Panier flottant --}}
    @auth
        @php
            $cart = session()->get("food_cart.{$prestataire->id}", []);
            $cartCount = 0;
            foreach($cart as $item) {
                $cartCount += $item['quantity'] ?? 0;
            }
        @endphp
        @if($cartCount > 0)
            <div class="fixed bottom-20 sm:bottom-6 left-4 right-4 sm:left-auto sm:right-6 z-50">
                <a href="{{ route('food.cart', $prestataire) }}" 
                   class="flex items-center justify-between gap-4 px-6 py-4 bg-gradient-to-r from-orange-500 to-amber-500 text-white rounded-2xl shadow-2xl hover:from-orange-600 hover:to-amber-600 transition transform hover:scale-105">
                    <div class="flex items-center gap-3">
                        <span class="text-2xl">🛒</span>
                        <span class="font-bold">Voir le panier</span>
                    </div>
                    <span class="bg-white text-orange-600 px-4 py-1.5 rounded-full font-bold shadow">
                        {{ $cartCount }} article(s)
                    </span>
                </a>
            </div>
        @endif
    @endauth
</div>
@endsection