<x-layouts.portal title="Edit Item" page-title="Product Master">

<div class="max-w-6xl mx-auto">
    <div class="mb-6 flex items-center justify-between">
        <a href="{{ route('portal.items.index') }}" class="flex items-center text-[10px] font-bold text-zinc-500 uppercase tracking-widest hover:text-amber-600 transition-colors">
            <svg class="w-3 h-3 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"></path></svg>
            Back to Inventory
        </a>
        
        <form action="{{ route('portal.items.destroy', $item) }}" method="POST" onsubmit="return confirm('Delete this menu item?')">
            @csrf @method('DELETE')
            <button type="submit" class="text-[9px] font-bold text-red-400 uppercase tracking-widest hover:text-red-600 transition-colors">Delete Permanentely</button>
        </form>
    </div>

    <form action="{{ route('portal.items.update', $item) }}" method="POST" enctype="multipart/form-data">
        @csrf
        @method('PATCH')
        
        <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
            <!-- Left Column -->
            <div class="lg:col-span-2 space-y-6">
                <x-card title="General Information">
                    <div class="space-y-4">
                        <x-input name="name" label="Product Name" :value="old('name', $item->name)" required autofocus />
                        
                        <x-select name="category_id" label="Main Category" required>
                            @foreach($categories as $category)
                                <option value="{{ $category->id }}" {{ old('category_id', $item->category_id) == $category->id ? 'selected' : '' }}>
                                    {{ $category->name }}
                                </option>
                                @foreach($category->children as $child)
                                    <option value="{{ $child->id }}" {{ old('category_id', $item->category_id) == $child->id ? 'selected' : '' }}>
                                        &nbsp;&nbsp;↳ {{ $child->name }}
                                    </option>
                                @endforeach
                            @endforeach
                        </x-select>
                        
                        <input type="hidden" name="slug" id="slug" value="{{ old('slug', $item->slug) }}">
                    </div>
                </x-card>

                <x-card title="Pricing Matrix">
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                        <x-input type="number" step="0.01" name="price" label="Base Price (Global)" :value="old('price', $item->price)" required />
                        <x-input type="number" step="0.01" name="dine_in_price" label="Dine-in Price" :value="old('dine_in_price', $item->dine_in_price)" placeholder="₹ Auto" />
                        
                        <x-input type="number" step="0.01" name="delivery_price" label="Home Delivery Price" :value="old('delivery_price', $item->delivery_price)" placeholder="₹ Auto" />
                        <x-input type="number" step="0.01" name="takeaway_price" label="Parcel / Takeaway Price" :value="old('takeaway_price', $item->takeaway_price)" placeholder="₹ Auto" />
                    </div>

                    <div class="mt-8 pt-8 border-t border-zinc-100">
                        <div class="flex items-center justify-between mb-4">
                            <label class="text-[10px] font-bold text-zinc-500 uppercase tracking-tighter">GST / Tax (%)</label>
                            <div class="flex items-center space-x-3">
                                <span class="text-[9px] font-bold text-zinc-400 uppercase tracking-widest">Tax Inclusive</span>
                                <label class="relative inline-flex items-center cursor-pointer">
                                    <input type="checkbox" name="tax_inclusive" value="1" class="sr-only peer" {{ old('tax_inclusive', $item->tax_inclusive) ? 'checked' : '' }}>
                                    <div class="w-8 h-4 bg-zinc-200 peer-focus:outline-hidden rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-zinc-300 after:border after:rounded-full after:h-3 after:w-3 after:transition-all peer-checked:bg-amber-500"></div>
                                </label>
                            </div>
                        </div>
                        <div class="relative">
                            <x-input type="number" step="0.1" name="gst_percentage" :value="old('gst_percentage', $item->gst_percentage)" class="pr-8!" />
                            <span class="absolute right-3 top-7 text-zinc-400 text-xs">%</span>
                        </div>
                        <p id="gst_breakdown" class="mt-2 text-[9px] text-zinc-400 font-medium">
                            CGST: {{ number_format($item->gst_percentage / 2, 2) }}%, 
                            SGST: {{ number_format($item->gst_percentage / 2, 2) }}% (Calculated automatically)
                        </p>
                    </div>
                </x-card>

                <x-card title="Public Description">
                    <textarea name="description" rows="3"
                        class="w-full px-4 py-3 bg-zinc-50 border border-zinc-200 rounded-sm text-xs focus:outline-hidden focus:border-amber-500/50 focus:ring-1 focus:ring-amber-500/20 transition-all text-zinc-900">{{ old('description', $item->description) }}</textarea>
                </x-card>

                <!-- Channel Availability moved here -->
                <x-card title="Channel Availability">
                    <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
                        <label class="relative flex flex-col items-center p-4 border border-zinc-100 rounded-sm hover:bg-zinc-50 cursor-pointer group">
                            <input type="checkbox" name="available_dine_in" value="1" {{ $item->available_dine_in ? 'checked' : '' }} class="sr-only peer">
                            <div class="w-10 h-10 rounded-full bg-zinc-100 flex items-center justify-center mb-3 peer-checked:bg-teal-500/10 peer-checked:text-teal-600 text-zinc-400 transition-colors">
                                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253"></path></svg>
                            </div>
                            <span class="text-[10px] font-bold uppercase tracking-widest text-zinc-500 peer-checked:text-teal-600">Dine In</span>
                            <div class="absolute top-2 right-2 w-2 h-2 rounded-full bg-zinc-300 peer-checked:bg-teal-500"></div>
                        </label>

                        <label class="relative flex flex-col items-center p-4 border border-zinc-100 rounded-sm hover:bg-zinc-50 cursor-pointer group">
                            <input type="checkbox" name="available_delivery" value="1" {{ $item->available_delivery ? 'checked' : '' }} class="sr-only peer">
                            <div class="w-10 h-10 rounded-full bg-zinc-100 flex items-center justify-center mb-3 peer-checked:bg-amber-500/10 peer-checked:text-amber-600 text-zinc-400 transition-colors">
                                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"></path><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"></path></svg>
                            </div>
                            <span class="text-[10px] font-bold uppercase tracking-widest text-zinc-500 peer-checked:text-amber-600">Delivery</span>
                            <div class="absolute top-2 right-2 w-2 h-2 rounded-full bg-zinc-300 peer-checked:bg-amber-500"></div>
                        </label>

                        <label class="relative flex flex-col items-center p-4 border border-zinc-100 rounded-sm hover:bg-zinc-50 cursor-pointer group">
                            <input type="checkbox" name="available_takeaway" value="1" {{ $item->available_takeaway ? 'checked' : '' }} class="sr-only peer">
                            <div class="w-10 h-10 rounded-full bg-zinc-100 flex items-center justify-center mb-3 peer-checked:bg-indigo-500/10 peer-checked:text-indigo-600 text-zinc-400 transition-colors">
                                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 11V7a4 4 0 00-8 0v4M5 9h14l1 12H4L5 9z"></path></svg>
                            </div>
                            <span class="text-[10px] font-bold uppercase tracking-widest text-zinc-500 peer-checked:text-indigo-600">Takeaway</span>
                            <div class="absolute top-2 right-2 w-2 h-2 rounded-full bg-zinc-300 peer-checked:bg-indigo-500"></div>
                        </label>
                    </div>
                </x-card>
            </div>

            <!-- Right Column -->
            <div class="space-y-6">
                <x-card title="Product Media">
                    @if($item->image_path)
                        <div class="mb-4 relative group rounded-sm overflow-hidden border border-zinc-200 h-48">
                            <img src="{{ Storage::url($item->image_path) }}" class="w-full h-full object-cover">
                        </div>
                    @endif
                    <label for="photo" class="flex flex-col items-center justify-center w-full h-32 border-2 border-zinc-200 border-dashed rounded-sm cursor-pointer bg-zinc-50 hover:bg-zinc-100 transition-all">
                        <div class="flex flex-col items-center justify-center pt-5 pb-6">
                            <svg class="w-6 h-6 mb-2 text-zinc-300" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"></path></svg>
                            <p class="text-[10px] font-bold text-zinc-400 uppercase tracking-widest">Update Image</p>
                        </div>
                        <input id="photo" name="photo" type="file" class="hidden" accept="image/*" />
                    </label>
                </x-card>

                <x-card title="Variants / Sizes">
                    <x-slot:actions>
                        <button type="button" onclick="addVariant()" class="text-[10px] font-bold text-amber-600 uppercase tracking-widest hover:underline">+ Add Size</button>
                    </x-slot:actions>
                    
                    <div id="variants-container" class="space-y-4">
                        @forelse($item->variants as $index => $variant)
                            <div class="variant-item p-4 bg-zinc-50 border border-zinc-200 rounded-sm relative group">
                                <input type="hidden" name="variants[{{ $index }}][id]" value="{{ $variant->id }}">
                                <button type="button" onclick="this.parentElement.remove(); checkVariants();" class="absolute -top-2 -right-2 w-5 h-5 bg-red-500 text-white rounded-full flex items-center justify-center shadow-sm opacity-0 group-hover:opacity-100 transition-opacity">
                                    <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path></svg>
                                </button>
                                
                                <div class="space-y-3">
                                    <input type="text" name="variants[{{ $index }}][name]" value="{{ $variant->name }}" placeholder="Variant Name" 
                                        class="w-full px-2 py-1 bg-white border border-zinc-200 rounded-sm text-[10px] font-bold uppercase tracking-tight focus:outline-hidden focus:border-amber-500/50">
                                    
                                    <div class="grid grid-cols-3 gap-2">
                                        <div class="space-y-1">
                                            <label class="text-[8px] font-bold text-zinc-400 uppercase tracking-tighter">Dine-In</label>
                                            <input type="number" step="0.01" name="variants[{{ $index }}][dine_in_price]" value="{{ $variant->dine_in_price }}" class="w-full px-2 py-1 bg-white border border-zinc-200 rounded-sm text-[10px]">
                                        </div>
                                        <div class="space-y-1">
                                            <label class="text-[8px] font-bold text-zinc-400 uppercase tracking-tighter">Deliv.</label>
                                            <input type="number" step="0.01" name="variants[{{ $index }}][delivery_price]" value="{{ $variant->delivery_price }}" class="w-full px-2 py-1 bg-white border border-zinc-200 rounded-sm text-[10px]">
                                        </div>
                                        <div class="space-y-1">
                                            <label class="text-[8px] font-bold text-zinc-400 uppercase tracking-tighter">Take.</label>
                                            <input type="number" step="0.01" name="variants[{{ $index }}][takeaway_price]" value="{{ $variant->takeaway_price }}" class="w-full px-2 py-1 bg-white border border-zinc-200 rounded-sm text-[10px]">
                                        </div>
                                    </div>
                                </div>
                            </div>
                        @empty
                            <div id="no-variants-msg" class="py-4 text-center">
                                <p class="text-[10px] text-zinc-400 italic">No variants defined.</p>
                            </div>
                        @endforelse
                    </div>
                </x-card>

                <x-card title="Classification">
                    <div class="space-y-4">
                        <x-select name="is_veg" label="Dietary Label">
                            <option value="1" {{ $item->is_veg ? 'selected' : '' }}>Vegetarian</option>
                            <option value="0" {{ !$item->is_veg ? 'selected' : '' }}>Non-Vegetarian</option>
                        </x-select>
                        <x-select name="status" label="Stock Status">
                            <option value="available" {{ $item->status == 'available' ? 'selected' : '' }}>In Stock</option>
                            <option value="out_of_stock" {{ $item->status == 'out_of_stock' ? 'selected' : '' }}>Out of Stock</option>
                        </x-select>
                    </div>
                </x-card>
            </div>
        </div>

        <div class="mt-8 flex justify-end pb-12">
            <x-button type="submit" class="px-12 py-4! text-sm!">
                Update Menu Item
            </x-button>
        </div>
    </form>
</div>

<template id="variant-template">
    <div class="variant-item p-4 bg-zinc-50 border border-zinc-200 rounded-sm relative group">
        <button type="button" onclick="this.parentElement.remove(); checkVariants();" class="absolute -top-2 -right-2 w-5 h-5 bg-red-500 text-white rounded-full flex items-center justify-center shadow-sm opacity-0 group-hover:opacity-100 transition-opacity">
            <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path></svg>
        </button>
        
        <div class="space-y-3">
            <input type="text" name="variants[{INDEX}][name]" placeholder="Variant Name" 
                class="w-full px-2 py-1 bg-white border border-zinc-200 rounded-sm text-[10px] font-bold uppercase tracking-tight focus:outline-hidden focus:border-amber-500/50">
            
            <div class="grid grid-cols-3 gap-2">
                <div class="space-y-1">
                    <label class="text-[8px] font-bold text-zinc-400 uppercase tracking-tighter">Dine-In</label>
                    <input type="number" step="0.01" name="variants[{INDEX}][dine_in_price]" placeholder="₹" class="w-full px-2 py-1 bg-white border border-zinc-200 rounded-sm text-[10px]">
                </div>
                <div class="space-y-1">
                    <label class="text-[8px] font-bold text-zinc-400 uppercase tracking-tighter">Deliv.</label>
                    <input type="number" step="0.01" name="variants[{INDEX}][delivery_price]" placeholder="₹" class="w-full px-2 py-1 bg-white border border-zinc-200 rounded-sm text-[10px]">
                </div>
                <div class="space-y-1">
                    <label class="text-[8px] font-bold text-zinc-400 uppercase tracking-tighter">Take.</label>
                    <input type="number" step="0.01" name="variants[{INDEX}][takeaway_price]" placeholder="₹" class="w-full px-2 py-1 bg-white border border-zinc-200 rounded-sm text-[10px]">
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    let variantIndex = {{ $item->variants->count() }};

    function addVariant() {
        const container = document.getElementById('variants-container');
        const msg = document.getElementById('no-variants-msg');
        if (msg) msg.remove();

        const template = document.getElementById('variant-template').innerHTML;
        const html = template.replace(/{INDEX}/g, variantIndex++);
        container.insertAdjacentHTML('beforeend', html);
    }

    function checkVariants() {
        const container = document.getElementById('variants-container');
        if (container.children.length === 0) {
            container.innerHTML = `<div id="no-variants-msg" class="py-4 text-center">
                <p class="text-[10px] text-zinc-400 italic">No variants defined.</p>
            </div>`;
        }
    }

    document.getElementById('name').addEventListener('input', function() {
        let slug = this.value.toLowerCase()
            .replace(/[^\w\s-]/g, '')
            .replace(/[\s_-]+/g, '-')
            .replace(/^-+|-+$/g, '');
        document.getElementById('slug').value = slug;
    });

    document.getElementById('gst_percentage').addEventListener('input', function() {
        let val = parseFloat(this.value) || 0;
        let half = (val / 2).toFixed(2);
        document.getElementById('gst_breakdown').textContent = `CGST: ${half}%, SGST: ${half}% (Calculated automatically)`;
    });
</script>
</x-layouts.portal>
