@extends('layouts.app')

@section('title', $menuItem->name . ' — Culinary Creation')

@section('content')

    <!-- Breadcrumb -->
    <div class="bg-[#f8f3ec] border-b border-black/5 py-4">
        <div class="container-custom flex items-center gap-2 text-xs text-[#78716c]">
            <a href="{{ route('home') }}" class="hover:text-[#e05c30]">Home</a>
            <i class="fa-solid fa-chevron-right text-[9px] text-[#d6ccc0]"></i>
            <a href="{{ route('menu.index') }}" class="hover:text-[#e05c30]">Menu</a>
            <i class="fa-solid fa-chevron-right text-[9px] text-[#d6ccc0]"></i>
            @if($menuItem->category)
                <a href="{{ route('menu.index', ['category' => $menuItem->category->slug]) }}" class="hover:text-[#e05c30]">{{ $menuItem->category->name }}</a>
                <i class="fa-solid fa-chevron-right text-[9px] text-[#d6ccc0]"></i>
            @endif
            <span class="text-[#d4881a] font-medium truncate">{{ $menuItem->name }}</span>
        </div>
    </div>

    <!-- Dish Detail Main Section -->
    <section class="py-16 bg-[#fdfaf6]" 
             x-data="{ 
                basePrice: {{ (float) ($menuItem->sale_price ?? $menuItem->price) }},
                quantity: 1,
                activeImg: '{{ $menuItem->image_url }}',
                selectedModifiers: {},
                get totalPrice() {
                    let modTotal = 0;
                    for (let key in this.selectedModifiers) {
                        let val = this.selectedModifiers[key];
                        if (Array.isArray(val)) {
                            val.forEach(v => modTotal += parseFloat(v.price || 0));
                        } else if (val && val.price) {
                            modTotal += parseFloat(val.price);
                        }
                    }
                    return ((this.basePrice + modTotal) * this.quantity).toFixed(2);
                }
             }">
        <div class="container-custom">
            
            <div class="grid grid-cols-1 lg:grid-cols-2 gap-12 lg:gap-16">
                
                <!-- Left: Media & Galleries -->
                <div class="space-y-4">
                    <div class="rounded-3xl overflow-hidden border border-black/8 shadow-xl bg-white aspect-[4/3]">
                        <img :src="activeImg" alt="{{ $menuItem->name }}" class="w-full h-full object-cover transition-all duration-500">
                    </div>

                    @if($menuItem->images->isNotEmpty())
                        <div class="flex gap-3 overflow-x-auto py-2">
                            <button @click="activeImg = '{{ $menuItem->image_url }}'" class="w-20 h-20 rounded-xl overflow-hidden border-2 transition-all flex-shrink-0" :class="activeImg === '{{ $menuItem->image_url }}' ? 'border-[#d4881a]' : 'border-black/10 opacity-60'">
                                <img src="{{ $menuItem->image_url }}" alt="Thumb" class="w-full h-full object-cover">
                            </button>
                            @foreach($menuItem->images as $img)
                                <button @click="activeImg = '{{ $img->url }}'" class="w-20 h-20 rounded-xl overflow-hidden border-2 transition-all flex-shrink-0" :class="activeImg === '{{ $img->url }}' ? 'border-[#d4881a]' : 'border-black/10 opacity-60'">
                                    <img src="{{ $img->url }}" alt="Thumb" class="w-full h-full object-cover">
                                </button>
                            @endforeach
                        </div>
                    @endif
                </div>

                <!-- Right: Details & Customization Form -->
                <div class="space-y-8">
                    
                    <div>
                        <div class="flex items-center gap-3 mb-2">
                            <span class="badge-gold">{{ $menuItem->category?->name ?? 'Special' }}</span>
                            @if($menuItem->is_featured)
                                <span class="badge-crimson">Signature Dish</span>
                            @endif
                            @if($menuItem->sku)
                                <span class="text-[10px] text-[#78716c] font-mono">SKU: {{ $menuItem->sku }}</span>
                            @endif
                        </div>

                        <h1 class="font-serif text-3xl sm:text-4xl font-bold text-[#1c1917] mb-3">{{ $menuItem->name }}</h1>

                        <div class="flex items-baseline gap-3">
                            @if($menuItem->isOnSale())
                                <span class="text-3xl font-bold text-[#e05c30]">{{ money($menuItem->sale_price) }}</span>
                                <span class="text-lg text-[#78716c] line-through">{{ money($menuItem->price) }}</span>
                                <span class="badge-crimson">Save {{ money($menuItem->price - $menuItem->sale_price) }}</span>
                            @else
                                <span class="text-3xl font-bold text-[#e05c30]">{{ money($menuItem->price) }}</span>
                            @endif
                        </div>
                    </div>

                    <!-- Description -->
                    <div class="prose text-[#57534e] text-sm leading-relaxed border-y border-black/8 py-5">
                        <p>{{ $menuItem->description ?: $menuItem->short_description }}</p>
                    </div>

                    <!-- Ingredients & Allergens -->
                    <div class="grid grid-cols-1 sm:grid-cols-2 gap-4 text-xs">
                        @if($menuItem->ingredients)
                            <div class="p-4 rounded-xl bg-amber-50 border border-amber-100 space-y-1">
                                <span class="text-[#d4881a] font-semibold uppercase tracking-wider text-[10px] block">Ingredients</span>
                                <p class="text-[#57534e] leading-relaxed">{{ $menuItem->ingredients }}</p>
                            </div>
                        @endif

                        @if($menuItem->allergens)
                            <div class="p-4 rounded-xl bg-rose-50 border border-rose-100 space-y-1">
                                <span class="text-rose-600 font-semibold uppercase tracking-wider text-[10px] block">Allergen Information</span>
                                <p class="text-rose-700 leading-relaxed">{{ $menuItem->allergens }}</p>
                            </div>
                        @endif
                    </div>

                    <!-- Add to Cart Form with Modifiers -->
                    <form method="POST" action="{{ route('cart.add') }}" class="space-y-8 pt-4">
                        @csrf
                        <input type="hidden" name="menu_item_id" value="{{ $menuItem->id }}">

                        <!-- Modifiers -->
                        @if($menuItem->modifiers->isNotEmpty())
                            <div class="space-y-6">
                                <h3 class="font-serif text-lg font-bold text-[#1c1917] border-b border-black/8 pb-2">Customize Your Dish</h3>
                                
                                @foreach($menuItem->modifiers as $mod)
                                    <div class="p-5 rounded-2xl bg-white border border-black/8 shadow-sm space-y-3">
                                        <div class="flex items-center justify-between">
                                            <label class="font-semibold text-sm text-[#1c1917] flex items-center gap-2">
                                                {{ $mod->display_name_computed }}
                                                @if($mod->is_required)
                                                    <span class="text-[10px] text-rose-500 uppercase font-bold tracking-wider">* Required</span>
                                                @endif
                                            </label>
                                            <span class="text-[10px] text-[#78716c]">
                                                {{ $mod->type === 'single' ? 'Choose 1 option' : 'Select any' }}
                                            </span>
                                        </div>

                                        <div class="space-y-2">
                                            @foreach($mod->options as $opt)
                                                @if($mod->type === 'single')
                                                    <label class="flex items-center justify-between p-3 rounded-xl bg-[#f8f3ec] hover:bg-amber-50 cursor-pointer border border-transparent hover:border-amber-300 transition-all text-xs">
                                                        <div class="flex items-center gap-3">
                                                            <input type="radio" 
                                                                   name="modifiers[{{ $mod->id }}]" 
                                                                   value="{{ $opt->id }}"
                                                                   {{ $opt->is_default ? 'checked' : '' }}
                                                                   @change="selectedModifiers['mod_{{ $mod->id }}'] = { price: {{ (float) $opt->price_adjustment }} }"
                                                                   x-init="{{ $opt->is_default ? "selectedModifiers['mod_{$mod->id}'] = { price: " . (float) $opt->price_adjustment . ' }' : '' }}"
                                                                   class="accent-[#d4881a]"
                                                                   {{ $mod->is_required ? 'required' : '' }}>
                                                            <span class="text-[#1c1917] font-medium">{{ $opt->name }}</span>
                                                        </div>
                                                        @if($opt->price_adjustment != 0)
                                                            <span class="text-[#d4881a] font-semibold">+{{ money($opt->price_adjustment) }}</span>
                                                        @endif
                                                    </label>
                                                @else
                                                    <label class="flex items-center justify-between p-3 rounded-xl bg-[#f8f3ec] hover:bg-amber-50 cursor-pointer border border-transparent hover:border-amber-300 transition-all text-xs">
                                                        <div class="flex items-center gap-3">
                                                            <input type="checkbox" 
                                                                   name="modifiers[]" 
                                                                   value="{{ $opt->id }}"
                                                                   @change="$event.target.checked ? (selectedModifiers['opt_{{ $opt->id }}'] = { price: {{ (float) $opt->price_adjustment }} }) : (delete selectedModifiers['opt_{{ $opt->id }}'])"
                                                                   class="rounded accent-[#d4881a]">
                                                            <span class="text-[#1c1917] font-medium">{{ $opt->name }}</span>
                                                        </div>
                                                        @if($opt->price_adjustment != 0)
                                                            <span class="text-[#d4881a] font-semibold">+{{ money($opt->price_adjustment) }}</span>
                                                        @endif
                                                    </label>
                                                @endif
                                            @endforeach
                                        </div>
                                    </div>
                                @endforeach
                            </div>
                        @endif

                        <!-- Special Instructions -->
                        <div>
                            <label class="block text-xs font-semibold text-[#57534e] mb-2">Special Preparation Instructions (Optional)</label>
                            <textarea name="instructions" rows="2" placeholder="e.g., Dressing on the side, allergies to peanuts, extra napkins..." class="w-full bg-white border border-black/10 rounded-xl p-3 text-xs text-[#1c1917] placeholder:text-[#78716c] focus:outline-none focus:border-[#d4881a] shadow-sm"></textarea>
                        </div>

                        <!-- Quantity + Add to Cart Button -->
                        <div class="flex flex-col sm:flex-row items-center gap-4 pt-4">
                            
                            <!-- Quantity Controls -->
                            <div class="flex items-center border border-black/10 rounded-full bg-white shadow-sm p-1 w-full sm:w-auto justify-between">
                                <button type="button" @click="if(quantity > 1) quantity--" class="w-10 h-10 rounded-full hover:bg-[#f8f3ec] text-[#57534e] flex items-center justify-center transition-colors">
                                    <i class="fa-solid fa-minus text-xs"></i>
                                </button>
                                <input type="number" name="quantity" x-model="quantity" min="1" max="50" class="w-12 text-center bg-transparent text-sm font-bold text-[#1c1917] focus:outline-none [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none">
                                <button type="button" @click="quantity++" class="w-10 h-10 rounded-full hover:bg-[#f8f3ec] text-[#57534e] flex items-center justify-center transition-colors">
                                    <i class="fa-solid fa-plus text-xs"></i>
                                </button>
                            </div>

                            <!-- Submit Button with Dynamic Total Price -->
                            @if($menuItem->is_available)
                                <button type="submit" class="btn-gold flex-1 w-full text-sm !py-3.5 shadow-xl justify-between px-6">
                                    <span class="flex items-center gap-2">
                                        <i class="fa-solid fa-bag-shopping"></i> Add to Order
                                    </span>
                                    <span class="font-bold text-base" x-text="'$' + totalPrice">
                                        {{ money($menuItem->sale_price ?? $menuItem->price) }}
                                    </span>
                                </button>
                            @else
                                <button disabled class="bg-[#f8f3ec] text-[#78716c] cursor-not-allowed w-full py-3.5 rounded-full text-sm font-semibold border border-black/8">
                                    Currently Unavailable
                                </button>
                            @endif
                        </div>

                    </form>

                </div>

            </div>

            <!-- Related Dishes -->
            @if($relatedItems->isNotEmpty())
                <div class="mt-24 pt-16 border-t border-black/8 space-y-8">
                    <div class="flex items-center justify-between">
                        <h2 class="font-serif text-2xl font-bold text-[#1c1917]">Pairs Well With This Dish</h2>
                        <a href="{{ route('menu.index', ['category' => $menuItem->category?->slug]) }}" class="text-xs font-semibold text-[#d4881a] hover:text-[#b8710f]">
                            More in {{ $menuItem->category?->name }} →
                        </a>
                    </div>

                    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
                        @foreach($relatedItems as $rel)
                            @include('components.menu-card', ['dish' => $rel])
                        @endforeach
                    </div>
                </div>
            @endif

        </div>
    </section>

@endsection