@extends('layouts.admin')

@section('content')
<script>
window.stockApp = function(initialMachineId) {
    return {
        machines: @json($machines),
        searchQuery: '',
        selectedMachine: null,
        slots: [],
        viewMode: initialMachineId ? 'detail' : 'list',
        loading: false,
        updating: false,
        
        // Modal State
        showEditModal: false,
        selectedSlot: null,
        formData: {
            stock: 0,
            expiry_date: '',
            batch_no: '',
            apply_all_same_product: false
        },

        async init() {
            if (initialMachineId) {
                const machine = this.machines.find(m => m.id == initialMachineId);
                if (machine) {
                    await this.selectMachine(machine);
                }
            }
        },

        async selectMachine(machine) {
            this.selectedMachine = machine;
            this.viewMode = 'detail';
            this.loading = true;
            this.slots = [];
            
            // Update URL without refresh
            const url = new URL(window.location);
            url.searchParams.set('machine_id', machine.id);
            window.history.pushState({}, '', url);

            try {
                const res = await fetch(`/admin/machines/${machine.id}/slots-ajax`);
                const data = await res.json();
                if (data.success) {
                    this.slots = data.slots;
                    window.scrollTo({ top: 0, behavior: 'smooth' });
                }
            } catch (e) {
                console.error('Fetch slots error:', e);
            } finally {
                this.loading = false;
            }
        },

        backToList() {
            this.viewMode = 'list';
            this.selectedMachine = null;
            this.selectedSlot = null;
            this.slots = [];
            
            // Clear machine_id from URL
            const url = new URL(window.location);
            url.searchParams.delete('machine_id');
            window.history.pushState({}, '', url);
        },

        openEdit(slot) {
            this.selectedSlot = slot;
            this.formData = {
                stock: slot.stock || 0,
                expiry_date: slot.expiry_date ? slot.expiry_date.split('T')[0] : '',
                batch_no: slot.batch_no || '',
                apply_all_same_product: false
            };
            this.showEditModal = true;
        },

        async saveChanges() {
            this.updating = true;
            try {
                const csrf = document.querySelector('meta[name="csrf-token"]').getAttribute('content');
                const res = await fetch(`/admin/machines/${this.selectedMachine.id}/slots/expiry`, {
                    method: 'POST',
                    headers: { 'Content-Type': 'application/json', 'X-CSRF-TOKEN': csrf },
                    body: JSON.stringify({
                        slot_no: this.selectedSlot.slot_no,
                        ...this.formData
                    })
                });
                const data = await res.json();
                if (data.success) {
                    this.showEditModal = false;
                    // Refresh cabinet
                    await this.selectMachine(this.selectedMachine);
                }
            } catch (e) {
                console.error('Save error:', e);
            } finally {
                this.updating = false;
            }
        },

        getSlotColorClass(slot) {
            if (!slot.expiry_date) return 'bg-slate-50/50 dark:bg-slate-800/50 text-slate-400 border-slate-200/60 dark:border-slate-700/50';
            const todayStr = new Date().toISOString().split('T')[0];
            const expiryStr = slot.expiry_date;
            if (expiryStr < todayStr) {
                return 'bg-rose-50/60 dark:bg-rose-500/10 text-rose-600 dark:text-rose-400 border-rose-200 dark:border-rose-500/30 shadow-sm shadow-rose-500/5';
            }
            const diffDays = Math.round((new Date(expiryStr) - new Date(todayStr)) / 86400000);
            if (diffDays <= 7) {
                return 'bg-amber-50/60 dark:bg-amber-500/10 text-amber-600 dark:text-amber-400 border-amber-200 dark:border-amber-500/30 shadow-sm shadow-amber-500/5';
            }
            return 'bg-emerald-50/60 dark:bg-emerald-500/10 text-emerald-600 dark:text-emerald-400 border-emerald-200 dark:border-emerald-500/30 shadow-sm shadow-emerald-500/5';
        }
    };
};
</script>

<div class="space-y-4 pb-20 mt-4" 
     x-data="stockApp('{{ $selectedMachine ? $selectedMachine->id : '' }}')"
     @keydown.escape.window="showEditModal = false">
    
    <!-- Master View: Machine List -->
    <template x-if="viewMode === 'list'">
        <div class="space-y-6 animate-luxury-in">
                <div class="flex flex-col gap-4">
                    <div>
                        <h1 class="text-3xl font-black text-slate-800 dark:text-white tracking-tight font-display transition-all duration-300">
                            {{ __('Machine Stock') }}
                        </h1>
                        <p class="text-sm font-bold text-slate-500 dark:text-slate-400 mt-1 uppercase tracking-widest">
                            {{ __('Monitor and manage stock levels across your fleet') }}
                        </p>
                    </div>
                    
                    <div class="relative group max-w-md">
                        <span class="absolute inset-y-0 left-0 flex items-center pl-4 pointer-events-none z-10 transition-transform duration-300 group-focus-within:scale-110">
                            <svg class="h-4 w-4 text-slate-400 group-focus-within:text-cyan-500 transition-colors" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5">
                                <circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line>
                            </svg>
                        </span>
                        <input type="text" x-model="searchQuery" 
                               class="luxury-input w-full pl-11 py-3 text-sm focus:ring-cyan-500/20" 
                               placeholder="{{ __('Search by name or S/N...') }}">
                    </div>
                </div>

            <div class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-6">
                <template x-for="machine in machines.filter(m => 
                    m.name.toLowerCase().includes(searchQuery.toLowerCase()) || 
                    m.serial_no.toLowerCase().includes(searchQuery.toLowerCase())
                )" :key="machine.id">
                    <div @click="selectMachine(machine)" 
                         class="luxury-card rounded-[2.5rem] p-8 border border-slate-200/60 dark:border-slate-800/60 hover:border-cyan-500/50 hover:shadow-2xl hover:shadow-cyan-500/10 transition-all duration-500 cursor-pointer group flex flex-col justify-between h-full relative overflow-hidden">
                        
                        <!-- Background Glow -->
                        <div class="absolute -right-10 -top-10 w-32 h-32 bg-cyan-500/5 rounded-full blur-3xl group-hover:bg-cyan-500/10 transition-colors"></div>

                        <div class="flex items-start gap-5 relative z-10">
                            <div class="w-20 h-20 rounded-2xl bg-slate-50 dark:bg-slate-900 flex items-center justify-center text-slate-400 border border-slate-100 dark:border-slate-800 overflow-hidden shadow-inner group-hover:scale-110 transition-transform duration-500 shrink-0">
                                <template x-if="machine.image_urls && machine.image_urls[0]">
                                    <img :src="machine.image_urls[0]" class="w-full h-full object-cover">
                                </template>
                                <template x-if="!machine.image_urls || !machine.image_urls[0]">
                                    <svg class="w-8 h-8 opacity-20" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M21 7.5l-9-5.25L3 7.5m18 0l-9 5.25m9-5.25v9l-9 5.25M3 7.5l9 5.25M3 7.5v9l9 5.25m0-5.25v9" />
                                    </svg>
                                </template>
                            </div>
                            <div class="flex-1 min-w-0">
                                <h3 x-text="machine.name" class="text-2xl font-black text-slate-800 dark:text-white truncate"></h3>
                                <div class="flex items-center gap-2 mt-1">
                                    <span x-text="machine.serial_no" class="text-xs font-mono font-bold text-cyan-600 dark:text-cyan-400 tracking-widest uppercase"></span>
                                    <span class="w-1 h-1 rounded-full bg-slate-300 dark:bg-slate-700"></span>
                                    <span x-text="machine.location || '{{ __('No Location') }}'" class="text-xs font-bold text-slate-400 uppercase tracking-widest truncate"></span>
                                </div>
                            </div>
                        </div>

                        <div class="mt-8 flex items-center justify-between relative z-10">
                            <div class="flex items-center gap-4">
                                <div class="flex flex-col">
                                    <span class="text-xs font-black text-slate-400 uppercase tracking-widest">{{ __('Total Slots') }}</span>
                                    <span class="text-xl font-black text-slate-700 dark:text-slate-300" x-text="machine.slots_count || '--'"></span>
                                </div>
                                <div class="w-px h-6 bg-slate-100 dark:bg-slate-800"></div>
                                <div class="flex flex-col">
                                    <div class="flex items-center gap-1.5">
                                        <span class="text-xs font-black text-rose-500 uppercase tracking-widest">{{ __('Low Stock') }}</span>
                                        <div class="w-1.5 h-1.5 rounded-full bg-rose-500 animate-pulse"></div>
                                    </div>
                                    <span class="text-xl font-black text-slate-700 dark:text-slate-300" x-text="machine.low_stock_count || '0'"></span>
                                </div>
                            </div>

                            <div class="w-12 h-12 rounded-full bg-white dark:bg-slate-900 flex items-center justify-center text-slate-400 dark:text-slate-500 border border-slate-200/60 dark:border-slate-700/50 shadow-sm group-hover:bg-cyan-500 group-hover:text-white group-hover:border-cyan-500 transition-all duration-300 transform group-hover:translate-x-1 group-hover:shadow-lg group-hover:shadow-cyan-500/30">
                                <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5">
                                    <path stroke-linecap="round" stroke-linejoin="round" d="M13 7l5 5m0 0l-5 5m5-5H6" />
                                </svg>
                            </div>
                        </div>
                    </div>
                </template>
            </div>
        </div>
    </template>

    <!-- Detail View: Cabinet Management -->
    <template x-if="viewMode === 'detail'">
        <div class="space-y-6 animate-luxury-in">
            <!-- Page Header -->
            <div class="flex items-center gap-4 mb-2 px-1">
                <button @click="backToList()" 
                        class="p-2.5 rounded-xl bg-white dark:bg-slate-900 text-slate-400 hover:text-slate-600 dark:hover:text-slate-200 transition-all border border-slate-200/50 dark:border-slate-700/50 shadow-sm hover:shadow-md active:scale-95">
                    <svg class="size-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M10.5 19.5 3 12m0 0 7.5-7.5M3 12h18" />
                    </svg>
                </button>
                <div>
                    <h1 class="text-3xl font-black text-slate-800 dark:text-white font-display tracking-tight">
                        {{ __('Machine Stock') }}
                    </h1>
                </div>
            </div>

            <!-- Machine Header Info -->
            <div class="luxury-card rounded-[2.5rem] p-8 md:p-10 flex flex-col md:flex-row md:items-center justify-between gap-8 border border-slate-200/60 dark:border-slate-800/60">
                <div class="flex items-center gap-8">
                    <div class="w-24 h-24 rounded-3xl bg-slate-100 dark:bg-slate-800 flex items-center justify-center text-slate-400 border border-slate-200 dark:border-slate-700 overflow-hidden shadow-inner">
                        <template x-if="selectedMachine?.image_urls && selectedMachine?.image_urls[0]">
                            <img :src="selectedMachine.image_urls[0]" class="w-full h-full object-cover">
                        </template>
                        <template x-if="!selectedMachine?.image_urls || !selectedMachine?.image_urls[0]">
                            <svg class="w-12 h-12 stroke-[1.2]" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" d="M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
                            </svg>
                        </template>
                    </div>
                    <div>
                        <h1 x-text="selectedMachine?.name" class="text-4xl font-black text-slate-800 dark:text-white tracking-tighter leading-tight"></h1>
                        <div class="flex items-center gap-4 mt-3">
                            <span x-text="selectedMachine?.serial_no" class="px-3 py-1 rounded-lg bg-cyan-500/10 text-cyan-500 text-xs font-mono font-bold uppercase tracking-widest border border-cyan-500/20"></span>
                            <div class="flex items-center gap-2 text-slate-400 uppercase tracking-widest text-[10px] font-black">
                                <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" 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 stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z" />
                                </svg>
                                <span x-text="selectedMachine?.location || '{{ __('No Location') }}'"></span>
                            </div>
                        </div>
                    </div>
                </div>
                
                <div class="flex items-center gap-5">
                    <div class="px-7 py-4 rounded-[1.75rem] bg-slate-50 dark:bg-slate-800/50 flex flex-col items-center min-w-[120px] border border-slate-100 dark:border-slate-800/50">
                        <span class="text-[10px] font-black text-slate-400 uppercase tracking-widest mb-1">{{ __('Total Slots') }}</span>
                        <span class="text-3xl font-black text-slate-700 dark:text-slate-200" x-text="slots.length"></span>
                    </div>
                    <div class="px-7 py-4 rounded-[1.75rem] bg-rose-500/5 border border-rose-500/10 flex flex-col items-center min-w-[120px]">
                        <span class="text-[10px] font-black text-rose-500 uppercase tracking-widest mb-1">{{ __('Low Stock') }}</span>
                        <span class="text-3xl font-black text-rose-600" x-text="slots.filter(s => s != null && s.stock <= 5).length"></span>
                    </div>
                </div>
            </div>

            <!-- Cabinet Visualization Grid -->
            <div class="space-y-6">
                <!-- Status Legend -->
                <div class="flex items-center justify-between px-4">
                    <div class="flex items-center gap-8">
                        <div class="flex items-center gap-2.5">
                            <span class="w-3.5 h-3.5 rounded-full bg-rose-500 shadow-lg shadow-rose-500/30"></span>
                            <span class="text-[10px] font-black text-slate-500 uppercase tracking-[0.2em]">{{ __('Expired') }}</span>
                        </div>
                        <div class="flex items-center gap-2.5">
                            <span class="w-3.5 h-3.5 rounded-full bg-amber-500 shadow-lg shadow-amber-500/30"></span>
                            <span class="text-[10px] font-black text-slate-500 uppercase tracking-[0.2em]">{{ __('Warning') }}</span>
                        </div>
                        <div class="flex items-center gap-2.5">
                            <span class="w-3.5 h-3.5 rounded-full bg-emerald-500 shadow-lg shadow-emerald-500/30"></span>
                            <span class="text-[10px] font-black text-slate-500 uppercase tracking-[0.2em]">{{ __('Normal') }}</span>
                        </div>
                    </div>
                </div>

                <div class="luxury-card rounded-[2.5rem] p-8 border border-slate-200/50 dark:border-slate-800/50 bg-white/30 dark:bg-slate-900/40 backdrop-blur-xl relative overflow-hidden min-h-[500px]">
                    <!-- Loading Overlay -->
                    <div x-show="loading" class="absolute inset-0 bg-white/60 dark:bg-slate-900/60 backdrop-blur-md z-20 flex items-center justify-center transition-all duration-500">
                        <div class="flex flex-col items-center gap-6">
                            <div class="w-16 h-16 border-4 border-cyan-500/20 border-t-cyan-500 rounded-full animate-spin"></div>
                            <span class="text-xs font-black text-slate-500 dark:text-slate-400 uppercase tracking-[0.3em] ml-2 animate-pulse">{{ __('Loading Cabinet...') }}</span>
                        </div>
                    </div>

                    <!-- Background Decorative Grid -->
                    <div class="absolute inset-0 opacity-[0.05] pointer-events-none"
                         style="background-image: radial-gradient(#00d2ff 1.2px, transparent 1.2px); background-size: 40px 40px;">
                    </div>

                    <!-- Slots Grid -->
                    <div class="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 2xl:grid-cols-6 gap-6 relative z-10" x-show="!loading">
                        <template x-for="slot in slots" :key="slot.id">
                            <div @click="openEdit(slot)" 
                                 :class="getSlotColorClass(slot)"
                                 class="min-h-[300px] rounded-[2.5rem] p-5 flex flex-col items-center justify-center border-2 transition-all duration-500 cursor-pointer group hover:scale-[1.08] hover:-translate-y-3 hover:shadow-2xl active:scale-[0.98] relative">
                                
                                <!-- Slot Header (Pinned to top) -->
                                <div class="absolute top-4 left-5 right-5 flex justify-between items-center z-20">
                                    <div class="px-2.5 py-1 rounded-xl bg-slate-900/10 dark:bg-white/10 backdrop-blur-md border border-slate-900/5 dark:border-white/10 flex-shrink-0">
                                        <span class="text-xs font-black uppercase tracking-tighter text-slate-800 dark:text-white" x-text="slot.slot_no"></span>
                                    </div>
                                    <template x-if="slot.stock <= 2">
                                        <div class="px-2.5 py-1.5 rounded-xl bg-rose-500 text-white text-[9px] font-black uppercase tracking-widest shadow-lg shadow-rose-500/30 animate-pulse whitespace-nowrap select-none">
                                            {{ __('Low') }}
                                        </div>
                                    </template>
                                </div>

                                <!-- Product Image -->
                                <div class="relative w-20 h-20 mb-4 mt-1">
                                    <div class="absolute inset-0 rounded-[2rem] bg-white/20 dark:bg-slate-900/40 backdrop-blur-xl border border-white/30 dark:border-white/5 shadow-inner group-hover:scale-105 transition-transform duration-500 overflow-hidden">
                                        <template x-if="slot.product && slot.product.image_url">
                                            <img :src="slot.product.image_url" class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-110">
                                        </template>
                                        <template x-if="!slot.product">
                                            <div class="w-full h-full flex items-center justify-center">
                                                <svg class="w-8 h-8 opacity-20" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4" />
                                                </svg>
                                            </div>
                                        </template>
                                    </div>
                                </div>

                                <!-- Slot Info -->
                                <div class="text-center w-full space-y-3">
                                    <template x-if="slot.product">
                                        <div class="text-base font-black truncate w-full opacity-90 tracking-tight" x-text="slot.product.name"></div>
                                    </template>
                                    
                                    <div class="space-y-3">
                                        <!-- Stock Level -->
                                        <div class="flex flex-col items-center">
                                            <div class="flex items-baseline gap-1">
                                                <span class="text-2xl font-black tracking-tighter leading-none" x-text="slot.stock"></span>
                                                <span class="text-xs font-black opacity-30">/</span>
                                                <span class="text-sm font-bold opacity-50" x-text="slot.max_stock || 10"></span>
                                            </div>
                                        </div>

                                        <!-- Expiry Date -->
                                        <div class="flex flex-col items-center">
                                            <span class="text-base font-black tracking-tight leading-none opacity-80" x-text="slot.expiry_date ? slot.expiry_date.replace(/-/g, '/') : '----/--/--'"></span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </template>
                    </div>
                </div>
            </div>
        </div>
    </template>

    <!-- Integrated Edit Modal -->
    <div x-show="showEditModal" 
         class="fixed inset-0 z-[100] overflow-y-auto" 
         style="display: none;"
         x-transition:enter="ease-out duration-300" 
         x-transition:enter-start="opacity-0" 
         x-transition:enter-end="opacity-100"
         x-transition:leave="ease-in duration-200" 
         x-transition:leave-start="opacity-100" 
         x-transition:leave-end="opacity-0">
        
        <div class="flex items-center justify-center min-h-screen px-4 pt-4 pb-20 text-center sm:block sm:p-0">
            <div class="fixed inset-0 transition-opacity bg-slate-900/60 backdrop-blur-sm" @click="showEditModal = false"></div>

            <span class="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">&#8203;</span>

            <div class="inline-block px-8 py-10 text-left align-bottom transition-all transform luxury-card rounded-3xl dark:bg-slate-900 border-slate-200/50 dark:border-slate-700/50 shadow-2xl sm:my-8 sm:align-middle sm:max-w-xl sm:w-full overflow-visible animate-luxury-in"
                 @click.away="showEditModal = false">
                
                <!-- Modal Header -->
                <div class="flex justify-between items-center mb-8">
                    <div>
                        <h3 class="text-3xl font-black text-slate-800 dark:text-white font-display tracking-tight leading-none">
                            {{ __('Edit Slot') }} <span x-text="selectedSlot?.slot_no || ''" class="text-cyan-500"></span>
                        </h3>
                        <template x-if="selectedSlot && selectedSlot.product">
                            <p x-text="selectedSlot?.product?.name" class="text-base font-black text-slate-400 uppercase tracking-widest mt-3 ml-0.5"></p>
                        </template>
                    </div>
                    <button @click="showEditModal = false"
                        class="text-slate-400 hover:text-slate-600 dark:hover:text-slate-200 transition-colors p-2 rounded-xl hover:bg-slate-100 dark:hover:bg-slate-800">
                        <svg class="size-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M6 18L18 6M6 6l12 12" />
                        </svg>
                    </button>
                </div>

                <!-- Form Controls -->
                <div class="space-y-6">
                    <!-- Stock Count Widget -->
                    <div class="space-y-2">
                        <label class="text-base font-black text-slate-500 uppercase tracking-widest pl-1">{{ __('Stock Quantity') }}</label>
                        <div class="flex items-center gap-4 bg-slate-50 dark:bg-slate-900/50 p-5 rounded-2xl border border-slate-100 dark:border-slate-800/50">
                            <div class="flex-1">
                                <input type="number" x-model="formData.stock" min="0" :max="selectedSlot ? selectedSlot.max_stock : 99" 
                                       class="w-full bg-transparent border-none p-0 text-5xl font-black text-slate-800 dark:text-white focus:ring-0 placeholder-slate-200">
                                <div class="text-sm font-black text-slate-400 mt-2 uppercase tracking-wider pl-0.5">
                                    {{ __('Max Capacity:') }} <span class="text-slate-600 dark:text-slate-300" x-text="selectedSlot?.max_stock || 0"></span>
                                </div>
                            </div>
                            <div class="flex gap-2">
                                <button @click="formData.stock = 0" class="px-5 py-3 rounded-lg bg-white dark:bg-slate-800 text-slate-400 hover:text-rose-500 border border-slate-200 dark:border-slate-700 transition-all text-sm font-black uppercase tracking-widest active:scale-95 shadow-sm">
                                    {{ __('Clear') }}
                                </button>
                                <button @click="formData.stock = selectedSlot?.max_stock || 0" class="px-5 py-3 rounded-lg bg-cyan-500/10 text-cyan-600 dark:text-cyan-400 hover:bg-cyan-500 hover:text-white border border-cyan-500/20 transition-all text-sm font-black uppercase tracking-widest active:scale-95 shadow-sm">
                                    {{ __('Max') }}
                                </button>
                            </div>
                        </div>
                    </div>

                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                        <!-- Expiry Date -->
                        <div class="space-y-2">
                            <label class="text-sm font-black text-slate-500 uppercase tracking-widest pl-1">{{ __('Expiry Date') }}</label>
                            <input type="date" x-model="formData.expiry_date" 
                                   class="luxury-input w-full py-4 px-5">
                        </div>

                        <!-- Batch Number -->
                        <div class="space-y-2">
                            <label class="text-sm font-black text-slate-500 uppercase tracking-widest pl-1">{{ __('Batch Number') }}</label>
                            <input type="text" x-model="formData.batch_no" placeholder="B2026-XXXX"
                                   class="luxury-input w-full py-4 px-5">
                        </div>
                    </div>

                    <!-- Toggle: Apply to all -->
                    <div class="pt-4 border-t border-slate-100 dark:border-slate-800/50">
                        <label class="relative inline-flex items-center cursor-pointer group">
                            <input type="checkbox" x-model="formData.apply_all_same_product" class="sr-only peer">
                            <div class="w-11 h-6 bg-slate-200 dark:bg-slate-800 peer-focus:outline-none 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-slate-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-cyan-500 transition-all duration-300"></div>
                            <span class="ml-4 text-xs font-black text-slate-500 dark:text-slate-400 uppercase tracking-widest group-hover:text-cyan-600 transition-colors">
                                {{ __('Apply changes to all identical products in this machine') }}
                            </span>
                        </label>
                    </div>
                </div>

                <!-- Footer Actions -->
                <div class="flex justify-end gap-x-4 mt-10 pt-8 border-t border-slate-100 dark:border-slate-800/50">
                    <button type="button" @click="showEditModal = false" class="btn-luxury-ghost px-8">{{ __('Cancel') }}</button>
                    <button type="button" @click="saveChanges()" :disabled="updating" class="btn-luxury-primary px-12 min-w-[160px]">
                        <div x-show="updating" class="w-4 h-4 border-2 border-white/20 border-t-white rounded-full animate-spin mr-3"></div>
                        <span x-text="updating ? '{{ __('Saving...') }}' : '{{ __('Confirm Changes') }}'"></span>
                    </button>
                </div>
            </div>
        </div>
    </div>
</div>

<style>
/* Hide default number spinners */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
input[type=number] {
    -moz-appearance: textfield;
    appearance: none;
}

.hide-scrollbar::-webkit-scrollbar { display: none; }
.hide-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

.custom-scrollbar::-webkit-scrollbar { width: 4px; }
.custom-scrollbar::-webkit-scrollbar-track { background: transparent; }
.custom-scrollbar::-webkit-scrollbar-thumb { background: #cbd5e133; border-radius: 10px; }
.custom-scrollbar::-webkit-scrollbar-thumb:hover { background: #cbd5e166; }
</style>
@endsection