@extends('layouts.app')
@section('content')
<div class="pt-24 max-w-7xl mx-auto px-4 py-12">
    <div class="grid lg:grid-cols-2 gap-12 items-start">
        {{-- Image Gallery --}}
        <div>
            <div class="swiper food-gallery-swiper rounded-2xl overflow-hidden mb-3">
                <div class="swiper-wrapper">
                    <div class="swiper-slide h-80 bg-gradient-to-br from-deep-green to-dark-brown overflow-hidden">
                        <img src="{{ $food->thumbnail_url }}" alt="{{ $food->name }}" class="w-full h-full object-cover">
                    </div>
                    @foreach($food->gallery_images ?? [] as $img)
                    <div class="swiper-slide h-80 overflow-hidden">
                        <img src="{{ asset('storage/'.$img) }}" alt="{{ $food->name }}" class="w-full h-full object-cover">
                    </div>
                    @endforeach
                </div>
                <div class="swiper-pagination"></div>
                <div class="swiper-button-prev"></div>
                <div class="swiper-button-next"></div>
            </div>
        </div>

        {{-- Details --}}
        <div>
            <div class="text-gold text-sm mb-2">
                <a href="{{ route('menu.index') }}" class="hover:text-cream transition-colors">Menu</a>
                <span class="mx-2">/</span>
                <a href="{{ route('menu.index', ['category'=>$food->category_id]) }}" class="hover:text-cream transition-colors">{{ $food->category->name }}</a>
            </div>
            <h1 class="font-playfair text-4xl text-cream font-bold mb-2">{{ $food->name }}</h1>
            @if($food->name_bn)
            <p class="font-bangla text-gold text-xl mb-4">{{ $food->name_bn }}</p>
            @endif

            {{-- Badges --}}
            <div class="flex flex-wrap gap-2 mb-6">
                @if($food->is_bestseller)<span class="bg-burnt-orange text-white text-xs px-3 py-1 rounded-full"><i class="fas fa-fire mr-1"></i>Bestseller</span>@endif
                @if($food->is_halal)<span class="bg-green-800 text-green-300 text-xs px-3 py-1 rounded-full"><i class="fas fa-check-circle mr-1"></i>Halal</span>@endif
                @if($food->is_vegetarian)<span class="bg-green-700 text-white text-xs px-3 py-1 rounded-full">Vegetarian</span>@endif
                @if($food->is_new)<span class="bg-deep-green border border-gold text-gold text-xs px-3 py-1 rounded-full">New</span>@endif
            </div>

            {{-- Price --}}
            <div class="flex items-center gap-4 mb-6">
                <span class="text-gold font-bold text-4xl">৳{{ number_format($food->effective_price, 0) }}</span>
                @if($food->discount_price)
                <span class="text-cream/40 text-xl line-through">৳{{ number_format($food->base_price, 0) }}</span>
                <span class="bg-red-500/20 text-red-400 text-sm px-3 py-1 rounded-full">-{{ $food->discount_percentage }}%</span>
                @endif
            </div>

            {{-- Meta --}}
            <div class="grid grid-cols-3 gap-4 mb-6">
                <div class="glass-card p-3 text-center">
                    <i class="fas fa-clock text-gold mb-1"></i>
                    <div class="text-cream text-sm font-semibold">{{ $food->preparation_time }}m</div>
                    <div class="text-cream/50 text-xs">Prep Time</div>
                </div>
                <div class="glass-card p-3 text-center">
                    <i class="fas fa-fire text-gold mb-1"></i>
                    <div class="text-cream text-sm font-semibold">{{ $food->calories ?? 'N/A' }}</div>
                    <div class="text-cream/50 text-xs">Calories</div>
                </div>
                <div class="glass-card p-3 text-center">
                    @if($food->spicy_level !== 'none')
                    <i class="fas fa-pepper-hot text-red-400 mb-1"></i>
                    <div class="text-cream text-sm font-semibold">{{ ucfirst(str_replace('_',' ',$food->spicy_level)) }}</div>
                    @else
                    <i class="fas fa-smile text-gold mb-1"></i>
                    <div class="text-cream text-sm font-semibold">Not Spicy</div>
                    @endif
                    <div class="text-cream/50 text-xs">Spice Level</div>
                </div>
            </div>

            {{-- Description --}}
            <p class="text-cream/70 leading-relaxed mb-6">{{ $food->description ?? $food->short_description }}</p>

            {{-- Variants --}}
            @if($food->variants->count())
            <div class="mb-6" x-data="{ selected: {{ $food->variants->first()->id }} }">
                <h4 class="text-cream font-semibold mb-3">Select Variant</h4>
                <div class="flex flex-wrap gap-2">
                    @foreach($food->variants as $variant)
                    <button @click="selected={{ $variant->id }}"
                            :class="selected=={{ $variant->id }} ? 'border-gold bg-gold/20 text-gold' : 'border-gold/30 text-cream/60'"
                            class="border rounded-full px-4 py-2 text-sm transition-all">
                        {{ $variant->name }} — ৳{{ number_format($variant->price, 0) }}
                    </button>
                    @endforeach
                </div>
            </div>
            @endif

            {{-- Addons --}}
            @if($food->addons->count())
            <div class="mb-6">
                <h4 class="text-cream font-semibold mb-3">Add-ons</h4>
                <div class="space-y-2">
                    @foreach($food->addons as $addon)
                    <label class="flex items-center gap-3 cursor-pointer group">
                        <input type="checkbox" class="w-4 h-4 accent-gold">
                        <span class="text-cream/70 text-sm group-hover:text-cream transition-colors">{{ $addon->name }}</span>
                        <span class="text-gold text-sm ml-auto">+৳{{ number_format($addon->price, 0) }}</span>
                    </label>
                    @endforeach
                </div>
            </div>
            @endif

            <div class="flex gap-4">
                <a href="{{ route('reservation.index') }}" class="btn-gold flex-1 text-center py-4">
                    <i class="fas fa-calendar-alt mr-2"></i>Reserve & Order
                </a>
                <a href="https://wa.me/{{ env('WHATSAPP_NUMBER') }}?text=I'd+like+to+order+{{ urlencode($food->name) }}"
                   target="_blank" class="btn-outline-gold px-5 py-4">
                    <i class="fab fa-whatsapp"></i>
                </a>
            </div>
        </div>
    </div>

    {{-- Ingredients / Nutrition --}}
    @if($food->ingredients || $food->nutritional_info)
    <div class="mt-16 grid md:grid-cols-2 gap-8">
        @if($food->ingredients)
        <div class="glass-card p-6">
            <h3 class="font-playfair text-cream text-xl font-semibold mb-4"><i class="fas fa-leaf text-gold mr-2"></i>Ingredients</h3>
            <div class="flex flex-wrap gap-2">
                @foreach($food->ingredients as $ing)
                <span class="bg-deep-green/60 border border-gold/20 text-cream/70 text-sm px-3 py-1 rounded-full">{{ $ing }}</span>
                @endforeach
            </div>
        </div>
        @endif
        @if($food->nutritional_info)
        <div class="glass-card p-6">
            <h3 class="font-playfair text-cream text-xl font-semibold mb-4"><i class="fas fa-chart-pie text-gold mr-2"></i>Nutrition Info</h3>
            <div class="grid grid-cols-2 gap-3">
                @foreach($food->nutritional_info as $key => $value)
                <div class="flex justify-between text-sm border-b border-gold/10 pb-2">
                    <span class="text-cream/60">{{ ucfirst($key) }}</span>
                    <span class="text-gold font-semibold">{{ $value }}</span>
                </div>
                @endforeach
            </div>
        </div>
        @endif
    </div>
    @endif

    {{-- Related Foods --}}
    @if($relatedFoods->count())
    <div class="mt-16">
        <h2 class="font-playfair text-3xl text-cream font-bold mb-8">You Might Also Like</h2>
        <div class="grid sm:grid-cols-2 lg:grid-cols-4 gap-6">
            @foreach($relatedFoods as $rel)
            <a href="{{ route('menu.show', $rel->slug) }}" class="food-card glass-card overflow-hidden group">
                <div class="h-44 overflow-hidden">
                    <img src="{{ $rel->thumbnail_url }}" alt="{{ $rel->name }}" class="food-card-img w-full h-full object-cover">
                </div>
                <div class="p-4">
                    <h3 class="font-playfair text-cream text-base font-semibold group-hover:text-gold transition-colors">{{ $rel->name }}</h3>
                    <span class="text-gold font-bold">৳{{ number_format($rel->effective_price, 0) }}</span>
                </div>
            </a>
            @endforeach
        </div>
    </div>
    @endif
</div>
@push('scripts')
<script>
new Swiper('.food-gallery-swiper', {
    loop:true,
    pagination:{ el:'.food-gallery-swiper .swiper-pagination', clickable:true },
    navigation:{ prevEl:'.food-gallery-swiper .swiper-button-prev', nextEl:'.food-gallery-swiper .swiper-button-next' },
});
</script>
@endpush
@endsection