@extends('layouts.app')

@section('title', 'Food - Trouvez votre repas')

@push('styles')
<link rel="stylesheet" href="{{ asset('css/food-explore.css') }}?v={{ time() }}">
@endpush

@section('content')
<div class="food-explore-page">
    
    {{-- HERO SECTION --}}
    <section class="food-hero">
        <div class="hero-bg"></div>
        <div class="hero-content">
            <div class="hero-icon">🍔</div>
            <h1>Qu'est-ce qui vous ferait plaisir ?</h1>
            <p>Découvrez les meilleurs cuisiniers près de chez vous</p>
            
            {{-- Barre de recherche principale --}}
            <form action="{{ route('food.explore') }}" method="GET" class="hero-search">
                <div class="search-input-wrap">
                    <i class="fas fa-search"></i>
                    <input type="text" name="search" value="{{ request('search') }}" placeholder="Rechercher un plat, un cuisinier...">
                </div>
                <div class="location-input-wrap">
                    <i class="fas fa-map-marker-alt"></i>
                    <input type="text" name="city" value="{{ request('city') }}" placeholder="Votre ville">
                </div>
                <button type="submit" class="search-btn">
                    <i class="fas fa-search"></i>
                    <span>Rechercher</span>
                </button>
            </form>
        </div>
    </section>

    {{-- CATÉGORIES HORIZONTALES --}}
    <section class="categories-section">
        <div class="categories-container">
            <div class="categories-scroll">
                <a href="{{ route('food.explore', request()->except('category')) }}" 
                   class="category-chip {{ !request('category') ? 'active' : '' }}">
                    <span class="cat-emoji">🍽️</span>
                    <span class="cat-label">Tous</span>
                </a>
                @php
                    $catEmojis = [
                        'entree' => '🥗', 
                        'plat' => '🍝', 
                        'dessert' => '🍰', 
                        'boisson' => '🥤', 
                        'amuse_bouche' => '🧆', 
                        'gateau' => '🎂', 
                        'pizza' => '🍕', 
                        'sandwich' => '🥪', 
                        'salade' => '🥗', 
                        'burger' => '🍔',
                        'sushi' => '🍣',
                        'tacos' => '🌮',
                        'pates' => '🍝',
                        'poulet' => '🍗',
                        'vegan' => '🥬',
                        'petit_dejeuner' => '🥐',
                        'autre' => '🍴'
                    ];
                @endphp
                @foreach($categories as $key => $label)
                    <a href="{{ route('food.explore', array_merge(request()->except('category'), ['category' => $key])) }}" 
                       class="category-chip {{ request('category') === $key ? 'active' : '' }}">
                        <span class="cat-emoji">{{ $catEmojis[$key] ?? '🍴' }}</span>
                        <span class="cat-label">{{ $label }}</span>
                    </a>
                @endforeach
            </div>
        </div>
    </section>

    {{-- FILTRES RAPIDES --}}
    <section class="filters-bar">
        <div class="filters-container">
            <div class="filters-left">
                <span class="results-count">
                    <strong>{{ $prestataires->total() }}</strong> restaurant{{ $prestataires->total() > 1 ? 's' : '' }}
                    @if(request('search'))
                        pour "{{ request('search') }}"
                    @elseif(request('category'))
                        - {{ $categories[request('category')] ?? '' }}
                    @endif
                </span>
            </div>
            <div class="filters-right">
                <div class="filter-dropdown">
                    <select name="sort" onchange="this.form.submit()" form="filter-form">
                        <option value="popular" {{ request('sort') == 'popular' ? 'selected' : '' }}>Populaires</option>
                        <option value="distance" {{ request('sort') == 'distance' ? 'selected' : '' }}>Distance</option>
                        <option value="price_asc" {{ request('sort') == 'price_asc' ? 'selected' : '' }}>Prix ↑</option>
                        <option value="price_desc" {{ request('sort') == 'price_desc' ? 'selected' : '' }}>Prix ↓</option>
                        <option value="newest" {{ request('sort') == 'newest' ? 'selected' : '' }}>Nouveaux</option>
                    </select>
                    <i class="fas fa-chevron-down"></i>
                </div>
                <button type="button" class="filter-btn" onclick="toggleFilters()">
                    <i class="fas fa-sliders-h"></i>
                    <span>Filtres</span>
                </button>
            </div>
        </div>
        
        {{-- Panneau filtres avancés --}}
        <div class="advanced-filters" id="advanced-filters">
            <form action="{{ route('food.explore') }}" method="GET" id="filter-form">
                <input type="hidden" name="search" value="{{ request('search') }}">
                <input type="hidden" name="category" value="{{ request('category') }}">
                <input type="hidden" name="city" value="{{ request('city') }}">
                
                <div class="filter-group">
                    <label>Prix maximum</label>
                    <div class="price-range">
                        <input type="range" name="price_max" min="5" max="100" value="{{ request('price_max', 50) }}" oninput="this.nextElementSibling.textContent = this.value + ' €'">
                        <span>{{ request('price_max', 50) }} €</span>
                    </div>
                </div>
                
                <div class="filter-group">
                    <label>Options</label>
                    <div class="filter-checkboxes">
                        <label class="checkbox-wrap">
                            <input type="checkbox" name="with_delivery" value="1" {{ request('with_delivery') ? 'checked' : '' }}>
                            <span class="checkmark"></span>
                            <span>Livraison disponible</span>
                        </label>
                        <label class="checkbox-wrap">
                            <input type="checkbox" name="available_now" value="1" {{ request('available_now') ? 'checked' : '' }}>
                            <span class="checkmark"></span>
                            <span>Ouvert maintenant</span>
                        </label>
                    </div>
                </div>
                
                <div class="filter-actions">
                    <a href="{{ route('food.explore') }}" class="btn-reset">Réinitialiser</a>
                    <button type="submit" class="btn-apply">Appliquer</button>
                </div>
            </form>
        </div>
    </section>

    {{-- LISTE DES RESTAURANTS --}}
    <section class="restaurants-section">
        <div class="restaurants-container">
            @if($prestataires->isEmpty())
                <div class="empty-state">
                    <div class="empty-icon">🍽️</div>
                    <h3>Aucun restaurant trouvé</h3>
                    <p>Essayez de modifier vos critères de recherche</p>
                    <a href="{{ route('food.explore') }}" class="btn-primary">
                        <i class="fas fa-undo"></i> Voir tous les restaurants
                    </a>
                </div>
            @else
                <div class="restaurants-grid">
                    @foreach($prestataires as $prestataire)
                    @php
                        $imagePath = $prestataire->cover_image ?? $prestataire->logo ?? $prestataire->user->profile_photo_path ?? null;
                        $avgPrice = $prestataire->foodProducts->where('is_available', true)->avg('price');
                        $prestataireCategories = $prestataire->foodProducts->where('is_available', true)->pluck('category')->unique()->take(3);
                        $isOpen = (bool) ($prestataire->food_is_open ?? true);
                    @endphp
                    <article class="restaurant-card {{ $isOpen ? '' : 'is-closed' }}">
                        <a href="{{ route('food.menu', $prestataire) }}" class="card-link">
                            <div class="card-image">
                                @if($imagePath)
                                    <img src="{{ str_starts_with($imagePath, 'http') ? $imagePath : asset('storage/' . $imagePath) }}" 
                                         alt="{{ $prestataire->business_name ?? $prestataire->user->name }}"
                                         onerror="this.parentElement.classList.add('no-image')">
                                @endif
                                <div class="image-placeholder">
                                    <span>👨‍🍳</span>
                                </div>
                                
                                {{-- Badges --}}
                                <div class="card-badges">
                                    @if($prestataire->delivery_available)
                                        <span class="badge delivery"><i class="fas fa-motorcycle"></i> Livraison</span>
                                    @endif
                                    @if(isset($prestataire->distance))
                                        <span class="badge distance">{{ number_format($prestataire->distance, 1) }} km</span>
                                    @endif
                                </div>
                                
                                {{-- Plats count --}}
                                <span class="dishes-count">{{ $prestataire->food_products_count ?? 0 }} plats</span>
                            </div>
                            
                            <div class="card-body">
                                <div class="card-header">
                                    <h3>{{ $prestataire->business_name ?? $prestataire->user->name ?? 'Restaurant' }}</h3>
                                    @if($isOpen)
                                        <span class="status open">Ouvert</span>
                                    @else
                                        <span class="status closed">Fermé</span>
                                    @endif
                                </div>
                                
                                @if($prestataireCategories->count() > 0)
                                    <div class="card-categories">
                                        @foreach($prestataireCategories as $cat)
                                            <span>{{ $categories[$cat] ?? ucfirst($cat) }}</span>
                                            @if(!$loop->last) • @endif
                                        @endforeach
                                    </div>
                                @endif
                                
                                <div class="card-footer">
                                    @if($avgPrice)
                                        <span class="avg-price">
                                            <i class="fas fa-tag"></i> ~{{ number_format($avgPrice, 0) }} €
                                        </span>
                                    @endif
                                    @if($prestataire->city)
                                        <span class="location">
                                            <i class="fas fa-map-marker-alt"></i> {{ $prestataire->city }}
                                        </span>
                                    @endif
                                </div>
                            </div>
                        </a>
                        
                        <div class="card-actions">
                            <a href="{{ route('food.menu', $prestataire) }}" class="btn-menu">
                                <i class="fas fa-book-open"></i> Voir le menu
                            </a>
                            <a href="{{ route('prestataires.show', $prestataire) }}" class="btn-profile">
                                <i class="fas fa-info-circle"></i>
                            </a>
                        </div>
                    </article>
                    @endforeach
                </div>
                
                {{-- Pagination --}}
                @if($prestataires->hasPages())
                    <div class="pagination-wrap">
                        {{ $prestataires->withQueryString()->links() }}
                    </div>
                @endif
            @endif
        </div>
    </section>
    
    {{-- STATS FOOTER --}}
    @if($stats['total_prestataires'] > 0)
    <section class="stats-section">
        <div class="stats-container">
            <div class="stat-item">
                <span class="stat-value">{{ $stats['total_prestataires'] }}</span>
                <span class="stat-label">Restaurants</span>
            </div>
            <div class="stat-item">
                <span class="stat-value">{{ $stats['total_products'] }}</span>
                <span class="stat-label">Plats disponibles</span>
            </div>
            <div class="stat-item">
                <span class="stat-value">{{ $stats['categories_count'] }}</span>
                <span class="stat-label">Catégories</span>
            </div>
        </div>
    </section>
    @endif

</div>

<script>
function toggleFilters() {
    const panel = document.getElementById('advanced-filters');
    panel.classList.toggle('open');
}

// Fermer les filtres quand on clique en dehors
document.addEventListener('click', (e) => {
    const panel = document.getElementById('advanced-filters');
    const btn = document.querySelector('.filter-btn');
    if (panel.classList.contains('open') && !panel.contains(e.target) && !btn.contains(e.target)) {
        panel.classList.remove('open');
    }
});
</script>
@endsection