@extends('layouts.app')

@section('title', 'Mon Menu - Produits')

@push('styles')
<style>
/* ── Food Products Compact Grid ── */
.fp { --orange: #f97316; --green: #22c55e; --red: #ef4444; }
.fp-bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.fp-pills { display: flex; gap: 4px; flex-wrap: wrap; }
.fp-pill {
    padding: 5px 12px; border-radius: 99px; font-size: .75rem; font-weight: 600;
    border: 1.5px solid #e5e7eb; background: #fff; color: #6b7280; cursor: pointer;
    transition: all .15s; white-space: nowrap; user-select: none;
}
.fp-pill:hover { border-color: #f97316; color: #f97316; }
.fp-pill.active { background: #f97316; color: #fff; border-color: #f97316; }
.fp-pill.active-green { background: #22c55e; color: #fff; border-color: #22c55e; }
.fp-pill.active-red { background: #ef4444; color: #fff; border-color: #ef4444; }
.fp-stat { font-size: .8rem; font-weight: 700; color: #374151; }
.fp-stat span { color: #9ca3af; font-weight: 400; }

/* ── Grid ── */
.fp-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 10px;
}
@media (min-width: 640px) { .fp-grid { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); } }
@media (min-width: 1280px) { .fp-grid { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); } }

/* ── Card ── */
.fp-card {
    background: #fff; border-radius: 10px; overflow: hidden;
    border: 1px solid #f3f4f6; transition: box-shadow .2s, border-color .2s;
    display: flex; flex-direction: column; position: relative;
}
.fp-card:hover { box-shadow: 0 4px 12px rgba(0,0,0,.08); border-color: #fed7aa; }
.fp-card.paused { opacity: .55; }
.fp-card.paused:hover { opacity: .8; }

/* Image */
.fp-media {
    position: relative;
    width: 100%;
    height: 110px;
    overflow: hidden;
    background: linear-gradient(135deg, #fff7ed, #fef3c7);
}
.fp-media .fp-img,
.fp-media .fp-img-placeholder {
    position: absolute;
    inset: 0;
    width: 100% !important;
    height: 100% !important;
}
.fp-media .fp-img {
    object-fit: cover !important;
    object-position: center center;
    display: block;
    background: linear-gradient(135deg, #fff7ed, #fef3c7);
}
.fp-media .fp-img-placeholder {
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, #fff7ed, #fef3c7); font-size: 2.2rem;
}

/* Badge prix */
.fp-price {
    position: absolute; top: 6px; right: 6px;
    background: rgba(255,255,255,.92); backdrop-filter: blur(4px);
    padding: 2px 8px; border-radius: 6px; font-size: .78rem; font-weight: 800;
    color: #ea580c; box-shadow: 0 1px 4px rgba(0,0,0,.1);
}

/* Badge status */
.fp-status {
    position: absolute; top: 6px; left: 6px;
    padding: 2px 7px; border-radius: 6px; font-size: .62rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: .3px;
}
.fp-status.on { background: #dcfce7; color: #16a34a; }
.fp-status.off { background: #fee2e2; color: #dc2626; }

/* Body */
.fp-body { padding: 8px 10px 10px; display: flex; flex-direction: column; flex: 1; gap: 4px; }
.fp-name { font-weight: 700; font-size: .85rem; color: #111827; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fp-desc { font-size: .7rem; color: #9ca3af; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
.fp-tags { display: flex; gap: 4px; flex-wrap: wrap; }
.fp-tag { font-size: .62rem; padding: 1px 6px; border-radius: 4px; background: #f3f4f6; color: #6b7280; }
.fp-tag.stock-low { background: #fee2e2; color: #dc2626; }

/* Actions */
.fp-actions {
    display: flex; gap: 4px; margin-top: auto; padding-top: 6px;
    border-top: 1px solid #f3f4f6;
}
.fp-actions form { flex: 1; min-width: 0; }
.fp-abtn {
    width: 100%; padding: 5px 0; border: none; border-radius: 6px;
    font-size: .7rem; font-weight: 600; cursor: pointer; transition: all .15s;
    display: flex; align-items: center; justify-content: center; gap: 3px;
}
.fp-abtn.toggle-on { background: #f3f4f6; color: #6b7280; }
.fp-abtn.toggle-on:hover { background: #fee2e2; color: #dc2626; }
.fp-abtn.toggle-off { background: #dcfce7; color: #16a34a; }
.fp-abtn.toggle-off:hover { background: #bbf7d0; }
.fp-abtn.edit { background: #dbeafe; color: #2563eb; flex: 0 0 34px; }
.fp-abtn.edit:hover { background: #bfdbfe; }
.fp-abtn.del { background: #fee2e2; color: #dc2626; flex: 0 0 34px; }
.fp-abtn.del:hover { background: #fecaca; }

/* ── Category header in grid ── */
.fp-cat-head {
    grid-column: 1 / -1;
    display: flex; align-items: center; gap: 8px;
    padding: 6px 0 2px; margin-top: 6px;
    font-size: .9rem; font-weight: 800; color: #374151;
}
.fp-cat-head .cnt {
    background: #f3f4f6; padding: 1px 8px; border-radius: 99px;
    font-size: .68rem; font-weight: 600; color: #9ca3af;
}

@media (max-width: 640px) {
    .fp-grid {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .fp-pills {
        flex-wrap: nowrap;
        overflow-x: auto;
        padding-bottom: 2px;
        scrollbar-width: none;
    }

    .fp-pills::-webkit-scrollbar {
        display: none;
    }

    .fp-pill {
        flex: 0 0 auto;
        padding: 4px 10px;
        font-size: .68rem;
    }

    .fp-stat {
        font-size: .72rem;
    }

    .fp-cat-head {
        padding: 2px 0 0;
        margin-top: 2px;
        font-size: .82rem;
    }

    .fp-card {
        border-radius: 12px;
    }

    .fp-media {
        height: 118px;
    }

    .fp-price {
        top: 5px;
        right: 5px;
        padding: 2px 7px;
        font-size: .72rem;
    }

    .fp-status {
        top: 5px;
        left: 5px;
        padding: 2px 6px;
        font-size: .58rem;
    }

    .fp-body {
        padding: 8px 8px 9px;
        gap: 3px;
    }

    .fp-name {
        font-size: .82rem;
        line-height: 1.2;
        white-space: normal;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
    }

    .fp-desc {
        font-size: .67rem;
        -webkit-line-clamp: 1;
    }

    .fp-tag {
        font-size: .58rem;
        padding: 1px 5px;
    }

    .fp-actions {
        gap: 3px;
        padding-top: 5px;
    }

    .fp-abtn {
        min-height: 31px;
        padding: 6px 0;
        font-size: .66rem;
    }

    .fp-abtn.edit,
    .fp-abtn.del {
        flex: 0 0 31px;
    }
}
</style>
@endpush

@section('content')
<div class="fp" x-data="{
    filterCat: 'all',
    filterStatus: 'all',
    setCat(c) { this.filterCat = c; },
    setStatus(s) { this.filterStatus = s; },
    show(cat, avail) {
        if (this.filterCat !== 'all' && this.filterCat !== cat) return false;
        if (this.filterStatus === 'available' && !avail) return false;
        if (this.filterStatus === 'paused' && avail) return false;
        return true;
    }
}">
    {{-- ── Toast succès ── --}}
    @if(session('success'))
    <div class="container mx-auto px-3 pt-3">
        <div class="bg-green-50 border-l-4 border-green-400 p-3 rounded-r-lg flex items-center gap-2 text-sm">
            <span>✅</span>
            <p class="text-green-700">{{ session('success') }}</p>
        </div>
    </div>
    @endif

    {{-- ── Header compact ── --}}
    <div class="bg-white border-b-2 border-orange-400 shadow-sm">
        <div class="container mx-auto px-3 py-3">
            <div class="flex items-center justify-between gap-3 flex-wrap">
                <h1 class="text-lg font-bold text-gray-900 flex items-center gap-2">
                    <span class="w-8 h-8 bg-gradient-to-br from-orange-500 to-red-500 rounded-lg flex items-center justify-center text-base shadow">🍽️</span>
                    Mon Menu
                    <span class="text-sm font-normal text-gray-400">({{ $products->total() }})</span>
                </h1>
                <div class="flex items-center gap-2 flex-wrap">
                    <a href="{{ route('prestataire.food-delivery.index') }}" class="fp-abtn edit" style="width:auto;flex:none;padding:5px 10px;font-size:.72rem;">🚚 Livraison</a>
                    <a href="{{ route('prestataire.food-orders.dashboard') }}" class="fp-abtn toggle-on" style="width:auto;flex:none;padding:5px 10px;font-size:.72rem;">🔥 Cuisine</a>
                    <a href="{{ route('prestataire.food-stock.index') }}" class="fp-abtn edit" style="width:auto;flex:none;padding:5px 10px;font-size:.72rem;">🥫 Stock</a>
                    <a href="{{ route('prestataire.food-products.create') }}" style="padding:5px 12px;border-radius:8px;background:#f97316;color:#fff;font-size:.75rem;font-weight:700;text-decoration:none;display:inline-flex;align-items:center;gap:4px;">➕ Ajouter</a>
                </div>
            </div>
        </div>
    </div>

    {{-- ── Stats inline + Filtres ── --}}
    <div class="container mx-auto px-3 py-3">
        <div class="flex flex-col gap-3">
            {{-- Stats mini --}}
            <div class="flex items-center gap-4 flex-wrap">
                <div class="fp-stat">🍕 {{ $products->total() }} <span>produits</span></div>
                <div class="fp-stat" style="color:#16a34a">✅ {{ $products->where('is_available', true)->count() }} <span style="color:#9ca3af">dispo</span></div>
                <div class="fp-stat" style="color:#dc2626">⏸️ {{ $products->where('is_available', false)->count() }} <span style="color:#9ca3af">pause</span></div>
                <div class="fp-stat">📂 {{ $products->pluck('category')->unique()->count() }} <span>catégories</span></div>
            </div>

            {{-- Filtres --}}
            <div class="flex flex-col sm:flex-row gap-2">
                {{-- Statut --}}
                <div class="fp-pills">
                    <button class="fp-pill" :class="filterStatus === 'all' && 'active'" @click="setStatus('all')">Tous</button>
                    <button class="fp-pill" :class="filterStatus === 'available' && 'active-green'" @click="setStatus('available')">✅ Disponible</button>
                    <button class="fp-pill" :class="filterStatus === 'paused' && 'active-red'" @click="setStatus('paused')">⏸️ En pause</button>
                </div>

                <div style="width:1px;background:#e5e7eb;margin:0 4px;" class="hidden sm:block"></div>

                {{-- Catégories --}}
                <div class="fp-pills">
                    <button class="fp-pill" :class="filterCat === 'all' && 'active'" @click="setCat('all')">Toutes</button>
                    @php
                        $categoryLabels = [
                            'entree' => '🥗 Entrées',
                            'plat' => '🍖 Plats',
                            'dessert' => '🍰 Desserts',
                            'boisson' => '🥤 Boissons',
                            'amuse_bouche' => '🍢 Amuse-B.',
                            'gateau' => '🎂 Gâteaux',
                            'pizza' => '🍕 Pizzas',
                            'sandwich' => '🥪 Sandwichs',
                            'salade' => '🥗 Salades',
                            'autre' => '📦 Autres',
                        ];
                        $usedCategories = $products->pluck('category')->unique()->sort();
                    @endphp
                    @foreach($usedCategories as $cat)
                        <button class="fp-pill" :class="filterCat === '{{ $cat }}' && 'active'" @click="setCat('{{ $cat }}')">{{ $categoryLabels[$cat] ?? ucfirst($cat) }}</button>
                    @endforeach
                </div>
            </div>
        </div>
    </div>

    {{-- ── Grille produits ── --}}
    <div class="container mx-auto px-3 pb-8">
        @if($products->isEmpty())
            <div class="bg-white rounded-xl shadow p-10 text-center">
                <div class="text-5xl mb-3">🍽️</div>
                <h3 class="text-lg font-bold text-gray-900 mb-1">Aucun produit</h3>
                <p class="text-gray-500 text-sm mb-4">Commencez par ajouter vos premiers produits</p>
                <a href="{{ route('prestataire.food-products.create') }}" style="display:inline-flex;align-items:center;gap:4px;padding:8px 16px;background:#f97316;color:#fff;font-weight:700;border-radius:8px;font-size:.85rem;">➕ Créer mon premier produit</a>
            </div>
        @else
            @php $groupedProducts = $products->groupBy('category'); @endphp

            <div class="fp-grid">
                @foreach($groupedProducts as $category => $categoryProducts)
                    {{-- Category divider --}}
                    <div class="fp-cat-head" x-show="filterCat === 'all' || filterCat === '{{ $category }}'">
                        <span>{{ $categoryLabels[$category] ?? '📦 ' . ucfirst($category) }}</span>
                        <span class="cnt">{{ $categoryProducts->count() }}</span>
                    </div>

                    @foreach($categoryProducts as $product)
                        <div class="fp-card {{ !$product->is_available ? 'paused' : '' }}"
                             x-show="show('{{ $product->category }}', {{ $product->is_available ? 'true' : 'false' }})"
                             x-transition.opacity.duration.150ms>
                            {{-- Image --}}
                            <div class="fp-media">
                                @if($product->image)
                                    <img src="{{ storage_asset_url($product->image) }}" alt="{{ $product->name }}" class="fp-img" loading="lazy">
                                @else
                                    <div class="fp-img-placeholder">{{ explode(' ', $categoryLabels[$product->category] ?? '🍽️')[0] }}</div>
                                @endif

                                {{-- Prix --}}
                                <div class="fp-price">{{ number_format($product->price, 2) }}€</div>

                                {{-- Status --}}
                                <div class="fp-status {{ $product->is_available ? 'on' : 'off' }}">
                                    {{ $product->is_available ? 'Dispo' : 'Pause' }}
                                </div>
                            </div>

                            {{-- Body --}}
                            <div class="fp-body">
                                <div class="fp-name" title="{{ $product->name }}">{{ $product->name }}</div>
                                @if($product->description)
                                    <div class="fp-desc">{{ $product->description }}</div>
                                @endif
                                <div class="fp-tags">
                                    @if($product->preparation_time)
                                        <span class="fp-tag">⏱️ {{ $product->preparation_time }}min</span>
                                    @endif
                                    @if($product->stock !== null)
                                        <span class="fp-tag {{ $product->stock <= 5 ? 'stock-low' : '' }}">📦 {{ $product->stock }}</span>
                                    @endif
                                </div>

                                {{-- Actions --}}
                                <div class="fp-actions">
                                    <form action="{{ route('prestataire.food-products.toggle', $product) }}" method="POST">
                                        @csrf
                                        <button type="submit" class="fp-abtn {{ $product->is_available ? 'toggle-on' : 'toggle-off' }}">
                                            {{ $product->is_available ? '⏸️ Pause' : '▶️ Activer' }}
                                        </button>
                                    </form>
                                    <a href="{{ route('prestataire.food-products.edit', [$product->id]) }}" class="fp-abtn edit" title="Modifier">✏️</a>
                                    <form action="{{ route('prestataire.food-products.destroy', [$product->id]) }}" method="POST" data-confirm="Supprimer ce produit ?">
                                        @csrf
                                        @method('DELETE')
                                        <button type="submit" class="fp-abtn del" title="Supprimer">🗑️</button>
                                    </form>
                                </div>
                            </div>
                        </div>
                    @endforeach
                @endforeach
            </div>

            {{-- Pagination --}}
            @if($products->hasPages())
                <div class="mt-4">{{ $products->links() }}</div>
            @endif
        @endif
    </div>
</div>

@push('scripts')
<script>
document.querySelectorAll('form[data-confirm]').forEach(function(form) {
    form.addEventListener('submit', function(e) {
        if (!confirm(form.getAttribute('data-confirm'))) {
            e.preventDefault();
        }
    });
});
</script>
@endpush
@endsection