@extends('layouts.admin')

@php
$routeName = request()->route()->getName();
$baseRoute = 'admin.data-config.products';

$roleSelectConfig = [
    "placeholder" => __('Select Category'),
    "hasSearch" => true,
    "searchPlaceholder" => __('Search Category...'),
    "toggleClasses" => "hs-select-toggle luxury-select-toggle",
    "dropdownClasses" => "hs-select-menu w-full bg-white dark:bg-slate-900 border border-slate-200 dark:border-white/10 rounded-xl shadow-2xl mt-2 z-[100]",
    "optionClasses" => "hs-select-option py-2.5 px-3 text-sm text-slate-800 dark:text-slate-300 cursor-pointer hover:bg-slate-100 dark:hover:bg-white/5 rounded-lg flex items-center justify-between",
];
@endphp

@section('content')
<div class="space-y-2 pb-20" 
     x-data="productManager"
     data-categories="{{ json_encode($categories->items()) }}"
     data-settings="{{ json_encode($companySettings) }}"
     data-errors="{{ json_encode($errors->any()) }}"
     data-store-url="{{ route($baseRoute . '.store') }}"
     data-index-url="{{ route($baseRoute . '.index') }}">
    
    <!-- Header -->
    <div class="flex flex-col md:flex-row md:items-center justify-between gap-4">
        <div>
            <h1 class="text-3xl font-black text-slate-800 dark:text-white font-display tracking-tight">{{ __('Product Management') }}</h1>
            <p class="text-sm font-bold text-slate-500 dark:text-slate-400 mt-1 uppercase tracking-widest">
                {{ __('Manage your catalog, prices, and multilingual details.') }}
            </p>
        </div>
        <div class="flex items-center gap-3">
            <template x-if="activeTab === 'products'">
                <a href="{{ route($baseRoute . '.create') }}" class="btn-luxury-primary transition-all duration-300">
                    <svg class="size-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15" />
                    </svg>
                    <span>{{ __('Add Product') }}</span>
                </a>
            </template>
            <template x-if="activeTab === 'categories'">
                <button @click="openCategoryModal()" type="button" class="btn-luxury-primary transition-all duration-300 bg-emerald-600 hover:bg-emerald-700 shadow-emerald-500/20">
                    <svg class="size-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15" />
                    </svg>
                    <span>{{ __('Add Category') }}</span>
                </button>
            </template>
        </div>
    </div>

    <!-- Tabs Navigation -->
    <div class="flex items-center gap-1 p-1.5 bg-slate-100 dark:bg-slate-900/50 rounded-2xl w-fit border border-slate-200/50 dark:border-slate-800/50" aria-label="Tabs">
        <button type="button" 
            @click="activeTab = 'products'" 
            :class="activeTab === 'products' ? 'bg-white dark:bg-slate-800 text-cyan-600 dark:text-cyan-400 shadow-sm shadow-cyan-500/10' : 'text-slate-400 hover:text-slate-600 dark:hover:text-slate-200'"
            class="px-8 py-3 rounded-xl text-sm font-black uppercase tracking-widest transition-all duration-300">
            {{ __('Product List') }}
        </button>
        <button type="button" 
            @click="activeTab = 'categories'" 
            :class="activeTab === 'categories' ? 'bg-white dark:bg-slate-800 text-cyan-600 dark:text-cyan-400 shadow-sm shadow-cyan-500/10' : 'text-slate-400 hover:text-slate-600 dark:hover:text-slate-200'"
            class="px-8 py-3 rounded-xl text-sm font-black uppercase tracking-widest transition-all duration-300">
            {{ __('Category Management') }}
        </button>
    </div>

    <!-- Tab Contents -->
    <div class="mt-6">
        <!-- Products Tab -->
        <div x-show="activeTab === 'products'" 
             class="luxury-card rounded-3xl p-6 animate-luxury-in relative min-h-[300px]" 
             x-transition:enter="transition ease-out duration-300" 
             x-transition:enter-start="opacity-0 translate-y-4" 
             x-transition:enter-end="opacity-100 translate-y-0" 
             x-cloak>
            
            <!-- Loading Overlay (Products) -->
            <div x-show="tabLoading === 'products'" x-transition:enter="transition ease-out duration-300"
                x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-100"
                x-transition:leave="transition ease-in duration-200" x-transition:leave-start="opacity-100"
                x-transition:leave-end="opacity-0"
                class="absolute inset-0 z-20 bg-white/40 dark:bg-slate-900/40 backdrop-blur-[1px] flex flex-col items-center justify-center rounded-3xl"
                x-cloak>
                <div class="relative w-16 h-16 mb-4 flex items-center justify-center">
                    <div class="absolute inset-0 rounded-full border-2 border-transparent border-t-cyan-500 border-r-cyan-500/30 animate-spin"></div>
                    <div class="absolute inset-2 rounded-full border border-cyan-500/10 animate-spin" style="animation-duration: 3s; direction: reverse;"></div>
                    <div class="relative w-8 h-8 flex items-center justify-center">
                        <svg class="w-6 h-6 text-cyan-500 animate-pulse" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-14v10l-8-4m16 4l-8 4m0-10l-8 4" />
                        </svg>
                    </div>
                </div>
                <p class="text-[10px] font-black text-cyan-600 dark:text-cyan-400 uppercase tracking-[0.4em] animate-pulse">
                    {{ __('Loading Data') }}...</p>
            </div>

            <div id="tab-products-container" class="relative">
                @include('admin.products.partials.tab-products')
            </div>
        </div>

        <!-- Category Tab -->
        <div x-show="activeTab === 'categories'" 
             class="luxury-card rounded-3xl p-6 animate-luxury-in relative min-h-[300px]" 
             x-transition:enter="transition ease-out duration-300" 
             x-transition:enter-start="opacity-0 translate-y-4" 
             x-transition:enter-end="opacity-100 translate-y-0" 
             x-cloak>
            
            <!-- Loading Overlay (Categories) -->
            <div x-show="tabLoading === 'categories'" x-transition:enter="transition ease-out duration-300"
                x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-100"
                x-transition:leave="transition ease-in duration-200" x-transition:leave-start="opacity-100"
                x-transition:leave-end="opacity-0"
                class="absolute inset-0 z-20 bg-white/40 dark:bg-slate-900/40 backdrop-blur-[1px] flex flex-col items-center justify-center rounded-3xl"
                x-cloak>
                <div class="relative w-16 h-16 mb-4 flex items-center justify-center">
                    <div class="absolute inset-0 rounded-full border-2 border-transparent border-t-cyan-500 border-r-cyan-500/30 animate-spin"></div>
                    <div class="absolute inset-2 rounded-full border border-cyan-500/10 animate-spin" style="animation-duration: 3s; direction: reverse;"></div>
                    <div class="relative w-8 h-8 flex items-center justify-center">
                        <svg class="w-6 h-6 text-cyan-500 animate-pulse" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10" />
                        </svg>
                    </div>
                </div>
                <p class="text-[10px] font-black text-cyan-600 dark:text-cyan-400 uppercase tracking-[0.4em] animate-pulse">
                    {{ __('Loading Data') }}...</p>
            </div>

            <div id="tab-categories-container" class="relative">
                @include('admin.products.partials.tab-categories')
            </div>
        </div>
    </div>

    <!-- Category Modal -->
    <div x-show="isCategoryModalOpen" class="fixed inset-0 z-[110] overflow-y-auto" x-cloak>
        <div class="flex items-center justify-center min-h-screen px-4 pt-4 pb-20 text-center sm:block sm:p-0">
            <div x-show="isCategoryModalOpen" 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" class="fixed inset-0 transition-opacity bg-slate-900/60 backdrop-blur-sm" @click="isCategoryModalOpen = false"></div>

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

            <div x-show="isCategoryModalOpen" x-transition:enter="ease-out duration-300" x-transition:enter-start="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95" x-transition:enter-end="opacity-100 translate-y-0 sm:scale-100" x-transition:leave="ease-in duration-200" x-transition:leave-start="opacity-100 translate-y-0 sm:scale-100" x-transition:leave-end="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95" class="inline-block w-full max-w-lg p-8 my-8 overflow-hidden text-left align-middle transition-all transform bg-white dark:bg-slate-900 shadow-2xl rounded-3xl border border-slate-100 dark:border-white/10">
                <div class="flex justify-between items-center mb-8">
                    <h3 class="text-2xl font-black text-slate-800 dark:text-white font-display tracking-tight" x-text="categoryModalMode === 'create' ? '{{ __('Add Category') }}' : '{{ __('Edit Category') }}'"></h3>
                    <button @click="isCategoryModalOpen = false" class="text-slate-400 hover:text-slate-600 dark:hover:text-slate-200 transition-colors">
                        <svg class="size-6" 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" /></svg>
                    </button>
                </div>

                <form :action="categoryFormAction" method="POST" class="space-y-6">
                    @csrf
                    <template x-if="categoryModalMode === 'edit'">
                        <input type="hidden" name="_method" value="PUT">
                    </template>

                    <div class="space-y-6">
                        <!-- 1. Company Selection (If Admin) -->
                        @if(auth()->user()->isSystemAdmin())
                        <div class="p-6 bg-slate-50 dark:bg-slate-800/30 rounded-3xl border border-slate-100 dark:border-white/5 space-y-3">
                            <label class="block text-sm font-black text-slate-700 dark:text-slate-200 px-1">{{ __('Affiliated Company') }}</label>
                            
                            <!-- Searchable Select Wrapper -->
                            <div id="category_company_select_wrapper" class="relative">
                                <!-- Will be hydrated by JS -->
                            </div>
                            
                            <p class="text-[10px] font-bold text-slate-400 uppercase tracking-widest px-1">{{ __('Type to search or leave blank for system defaults.') }}</p>
                        </div>
                        @endif

                        <!-- 2. Multilingual Names -->
                        <div class="space-y-5 px-1">
                            <!-- zh_TW -->
                            <div class="space-y-2">
                                <label class="flex items-center gap-2 text-[10px] font-black text-slate-400 uppercase tracking-[0.2em]">
                                    {{ __('Category Name (zh_TW)') }} <span class="text-rose-500">*</span>
                                </label>
                                <input type="text" name="names[zh_TW]" x-model="categoryFormFields.names.zh_TW" class="luxury-input w-full focus:ring-emerald-500/20 focus:border-emerald-500" placeholder="{{ __('e.g., Beverage') }}" required>
                            </div>

                            <!-- en -->
                            <div class="space-y-2">
                                <label class="flex items-center gap-2 text-[10px] font-black text-slate-400 uppercase tracking-[0.2em]">
                                    {{ __('Category Name (en)') }}
                                </label>
                                <input type="text" name="names[en]" x-model="categoryFormFields.names.en" class="luxury-input w-full" placeholder="{{ __('e.g., Drinks') }}">
                            </div>

                            <!-- ja -->
                            <div class="space-y-2">
                                <label class="flex items-center gap-2 text-[10px] font-black text-slate-400 uppercase tracking-[0.2em]">
                                    {{ __('Category Name (ja)') }}
                                </label>
                                <input type="text" name="names[ja]" x-model="categoryFormFields.names.ja" class="luxury-input w-full" placeholder="{{ __('e.g., お飲み物') }}">
                            </div>
                        </div>
                    </div>

                    <div class="flex items-center justify-end gap-4 mt-12 pt-6 border-t border-slate-100 dark:border-white/5">
                        <button type="button" @click="isCategoryModalOpen = false" 
                            class="px-6 py-2.5 text-sm font-black text-slate-400 hover:text-slate-600 dark:hover:text-slate-200 uppercase tracking-widest transition-all">
                            {{ __('Cancel') }}
                        </button>
                        <button type="submit" 
                            class="btn-luxury-primary px-10 py-3 shadow-lg"
                            :class="categoryModalMode === 'create' ? 'bg-emerald-600 hover:bg-emerald-700 shadow-emerald-500/20' : 'bg-cyan-600 hover:bg-cyan-700 shadow-cyan-500/20'">
                            <span x-text="categoryModalMode === 'create' ? '{{ __('Create') }}' : '{{ __('Save Changes') }}'"></span>
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <!-- Product Detail Slide-over -->
    <div x-show="isDetailOpen" 
         class="fixed inset-0 z-[100] overflow-hidden" 
         x-cloak
         role="dialog" aria-modal="true">
        
        <!-- Backdrop -->
        <div x-show="isDetailOpen" 
             x-transition:enter="ease-in-out duration-500"
             x-transition:enter-start="opacity-0"
             x-transition:enter-end="opacity-100"
             x-transition:leave="ease-in-out duration-500"
             x-transition:leave-start="opacity-100"
             x-transition:leave-end="opacity-0"
             class="absolute inset-0 bg-slate-900/60 backdrop-blur-sm transition-opacity" 
             @click="isDetailOpen = false"></div>

        <div class="fixed inset-y-0 right-0 max-w-full flex">
            <!-- Panel -->
            <div x-show="isDetailOpen"
                 x-transition:enter="transform transition ease-in-out duration-500 sm:duration-700"
                 x-transition:enter-start="translate-x-full"
                 x-transition:enter-end="translate-x-0"
                 x-transition:leave="transform transition ease-in-out duration-500 sm:duration-700"
                 x-transition:leave-start="translate-x-0"
                 x-transition:leave-end="translate-x-full"
                 class="relative w-screen max-w-md"
                 @click.stop>
                
                <div class="h-full flex flex-col bg-white dark:bg-slate-900 shadow-2xl border-l border-slate-200 dark:border-white/10 overflow-y-auto luxury-scrollbar">
                    <div class="px-6 py-3 border-b border-slate-100 dark:border-slate-800 flex items-center justify-between sticky top-0 bg-white/80 dark:bg-slate-900/80 backdrop-blur-md z-20">
                        <div>
                            <h2 class="text-xl font-black text-slate-800 dark:text-white">{{ __('Product Details') }}</h2>
                            <p class="text-[11px] font-bold text-slate-400 uppercase tracking-[0.2em] mt-1" x-text="(selectedProduct?.localized_name || selectedProduct?.name) + ' (' + getCategoryName(selectedProduct?.category_id) + ')'"></p>
                        </div>
                        <button @click="isDetailOpen = false"
                            class="p-2 rounded-xl hover:bg-slate-50 dark:hover:bg-slate-800 transition-colors">
                            <svg class="w-5 h-5 text-slate-400" 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" />
                            </svg>
                        </button>
                    </div>

                    <div class="flex-1 overflow-y-auto px-6 py-8 space-y-8 custom-scrollbar">
                        <!-- Header Status Info (Minimized) -->
                        <div class="flex items-center gap-3 animate-luxury-in">
                            <span class="px-3 py-1 rounded-full text-xs font-black uppercase tracking-widest border transition-all duration-300"
                                  :class="selectedProduct?.is_active ? 'bg-emerald-500/10 text-emerald-600 border-emerald-500/20 shadow-sm shadow-emerald-500/10' : 'bg-slate-500/10 text-slate-500 border-slate-500/20'">
                                <span x-text="selectedProduct?.is_active ? '{{ __('Active') }}' : '{{ __('Disabled') }}'"></span>
                            </span>
                            <span class="text-xs font-bold text-slate-400 dark:text-slate-300" x-text="'ID: #' + (selectedProduct?.id || '-')"></span>
                        </div>

                        <div class="space-y-8">
                            <!-- Image Section (Square) -->
                            <template x-if="selectedProduct?.image_url">
                                <section class="animate-luxury-in">
                                    <h3 class="text-[10px] font-black text-indigo-500 uppercase tracking-[0.3em] mb-4">{{ __('Product Image') }}</h3>
                                    <div @click="isImageZoomed = true" 
                                         class="max-w-xs mx-auto aspect-square rounded-[2rem] bg-slate-50 dark:bg-slate-800 overflow-hidden border border-slate-100 dark:border-white/5 shadow-lg group relative cursor-zoom-in">
                                        <img :src="selectedProduct.image_url" class="absolute inset-0 w-full h-full object-cover group-hover:scale-105 transition-transform duration-1000">
                                        <div class="absolute inset-0 bg-slate-950/20 opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-center justify-center">
                                            <div class="p-3 rounded-full bg-white/20 backdrop-blur-md text-white border border-white/30 scale-50 group-hover:scale-100 transition-all duration-500 shadow-2xl">
                                                <svg class="size-6 shadow-glow" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M21 21l-5.197-5.197m0 0A7.5 7.5 0 105.196 5.196a7.5 7.5 0 0010.607 10.607zM10.5 7.5v6m3-3h-6" /></svg>
                                            </div>
                                        </div>
                                    </div>
                                </section>
                            </template>

                             <section class="space-y-4 animate-luxury-in" style="animation-delay: 100ms">
                                <h3 class="text-xs font-black text-cyan-500 uppercase tracking-[0.3em]">{{ __('Identity & Codes') }}</h3>
                                <div class="grid grid-cols-1 sm:grid-cols-2 gap-3">
                                    <div class="bg-slate-50 dark:bg-slate-800/40 p-5 rounded-2xl border border-slate-100 dark:border-slate-800/80 group hover:border-cyan-500/30 transition-colors">
                                        <span class="text-xs font-bold text-slate-400 uppercase tracking-widest block mb-1.5">{{ __('Barcode') }}</span>
                                        <div class="text-[15px] font-mono font-bold text-slate-700 dark:text-slate-200" x-text="selectedProduct?.barcode || '-'"></div>
                                    </div>
                                    <div class="bg-slate-50 dark:bg-slate-800/40 p-5 rounded-2xl border border-slate-100 dark:border-slate-800/80 group hover:border-cyan-500/30 transition-colors">
                                        <span class="text-xs font-bold text-slate-400 uppercase tracking-widest block mb-1.5">{{ __('Specification') }}</span>
                                        <div class="text-[15px] font-bold text-slate-700 dark:text-slate-200" x-text="selectedProduct?.spec || '-'"></div>
                                    </div>
                                    <template x-if="selectedProduct?.metadata?.material_code">
                                        <div class="bg-slate-50 dark:bg-slate-800/40 p-5 rounded-2xl border border-slate-100 dark:border-slate-800/80 group hover:border-cyan-500/30 transition-colors">
                                            <span class="text-xs font-bold text-slate-400 uppercase tracking-widest block mb-1.5">{{ __('Material Code') }}</span>
                                            <div class="text-[15px] font-mono font-bold text-slate-700 dark:text-slate-200" x-text="selectedProduct?.metadata?.material_code"></div>
                                        </div>
                                    </template>
                                    <div class="bg-slate-50 dark:bg-slate-800/40 p-5 rounded-2xl border border-slate-100 dark:border-slate-800/80 group hover:border-cyan-500/30 transition-colors">
                                        <span class="text-xs font-bold text-slate-400 uppercase tracking-widest block mb-1.5">{{ __('Manufacturer') }}</span>
                                        <div class="text-[15px] font-bold text-slate-700 dark:text-slate-200" x-text="selectedProduct?.manufacturer || '-'"></div>
                                    </div>
                                    <template x-if="selectedProduct?.company?.name">
                                        <div class="bg-slate-50 dark:bg-slate-800/40 p-5 rounded-2xl border border-slate-100 dark:border-slate-800/80 group hover:border-cyan-500/30 transition-colors">
                                            <span class="text-xs font-bold text-slate-400 uppercase tracking-widest block mb-1.5">{{ __('Company') }}</span>
                                            <div class="text-[15px] font-bold text-slate-700 dark:text-slate-200" x-text="selectedProduct?.company?.name"></div>
                                        </div>
                                    </template>
                                </div>
                            </section>

                            <!-- Pricing Section -->
                             <section class="space-y-4 animate-luxury-in" style="animation-delay: 200ms">
                                <h3 class="text-xs font-black text-emerald-500 uppercase tracking-[0.3em]">{{ __('Pricing Information') }}</h3>
                                <div class="luxury-card divide-y divide-slate-50 dark:divide-white/5 overflow-hidden border border-slate-100 dark:border-white/5 shadow-sm">
                                    <div class="p-5 flex items-center justify-between group hover:bg-slate-50/50 dark:hover:bg-white/5 transition-colors">
                                        <span class="text-[15px] font-bold text-slate-500">{{ __('Sale Price') }}</span>
                                        <span class="text-lg font-black text-slate-800 dark:text-white">$<span x-text="formatNumber(selectedProduct?.price)"></span></span>
                                    </div>
                                    <div class="p-5 flex items-center justify-between group hover:bg-slate-50/50 dark:hover:bg-white/5 transition-colors">
                                        <span class="text-[15px] font-bold text-slate-500">{{ __('Member Price') }}</span>
                                        <span class="text-lg font-black text-emerald-500">$<span x-text="formatNumber(selectedProduct?.member_price)"></span></span>
                                    </div>
                                    <div class="p-5 flex items-center justify-between group hover:bg-slate-50/50 dark:hover:bg-white/5 transition-colors">
                                        <span class="text-[15px] font-bold text-slate-400">{{ __('Cost') }}</span>
                                        <span class="text-sm font-bold text-slate-500 tracking-tight">$<span x-text="formatNumber(selectedProduct?.cost)"></span></span>
                                    </div>
                                </div>
                            </section>

                             <!-- Storage & Limits -->
                            <section class="space-y-4 animate-luxury-in" style="animation-delay: 300ms">
                                <h3 class="text-xs font-black text-indigo-500 uppercase tracking-[0.3em]">{{ __('Channel Limits Configuration') }}</h3>
                                <div class="luxury-card p-6 border border-slate-100 dark:border-white/5 space-y-6 shadow-sm">
                                    <div class="flex items-center justify-between">
                                        <div class="space-y-1">
                                            <p class="text-xs font-bold text-slate-400 uppercase tracking-widest">{{ __('Track Limit') }}</p>
                                            <p class="text-3xl font-black text-indigo-500 tracking-tighter" x-text="selectedProduct?.track_limit || '0'"></p>
                                        </div>
                                        <div class="h-10 w-px bg-slate-100 dark:bg-white/10"></div>
                                        <div class="space-y-1 text-right">
                                            <p class="text-xs font-bold text-slate-400 uppercase tracking-widest">{{ __('Spring Limit') }}</p>
                                            <p class="text-3xl font-black text-amber-500 tracking-tighter" x-text="selectedProduct?.spring_limit || '0'"></p>
                                        </div>
                                    </div>
                                </div>
                            </section>

                             <!-- Loyalty Points -->
                            <section class="space-y-4 animate-luxury-in" style="animation-delay: 400ms">
                                <h3 class="text-xs font-black text-rose-500 uppercase tracking-[0.3em]">{{ __('Loyalty & Features') }}</h3>
                                <div class="grid grid-cols-1 sm:grid-cols-3 gap-3">
                                    <div class="bg-slate-50 dark:bg-slate-800/40 p-5 rounded-2xl border border-slate-100 dark:border-slate-800/80">
                                        <span class="text-xs font-black text-slate-400 uppercase tracking-widest block mb-1">{{ __('Full Points') }}</span>
                                        <div class="text-lg font-black text-rose-500 font-mono" x-text="selectedProduct?.metadata?.points_full || '0'"></div>
                                    </div>
                                    <div class="bg-slate-50 dark:bg-slate-800/40 p-5 rounded-2xl border border-slate-100 dark:border-slate-800/80">
                                        <span class="text-xs font-black text-slate-400 uppercase tracking-widest block mb-1">{{ __('Half Points') }}</span>
                                        <div class="text-lg font-black text-indigo-500 font-mono" x-text="selectedProduct?.metadata?.points_half || '0'"></div>
                                    </div>
                                    <div class="bg-slate-50 dark:bg-slate-800/40 p-5 rounded-2xl border border-slate-100 dark:border-slate-800/80">
                                        <span class="text-xs font-black text-slate-400 uppercase tracking-widest block mb-1">{{ __('Half Points Amount') }}</span>
                                        <div class="text-lg font-black text-emerald-500 font-mono" x-text="selectedProduct?.metadata?.points_half_amount || '0'"></div>
                                    </div>
                                </div>
                            </section>
                        </div>


                    </div>

                    <div class="p-6 border-t border-slate-100 dark:border-slate-800 bg-slate-50/50 dark:bg-slate-900/50">
                        <button @click="isDetailOpen = false" class="w-full btn-luxury-ghost">{{ __('Close Panel') }}</button>
                    </div>
                </div>
            </div>
        </div>

        <!-- Modals -->
        <x-delete-confirm-modal 
            :title="__('Confirm Deletion')" 
            :message="__('Are you sure you want to delete this product or category? This action cannot be undone.')" 
        />
        <x-status-confirm-modal 
            :title="__('Confirm Status Change')" 
            :message="__('Are you sure you want to change the status of this item? This will affect its visibility on vending machines.')" 
        />

        <form x-ref="statusToggleForm" :action="toggleFormAction" method="POST" class="hidden">
            @csrf
            @method('PATCH')
        </form>

        <!-- Image Zoom Modal -->
        <div x-show="isImageZoomed" 
             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"
             class="fixed inset-0 z-[110] flex items-center justify-center p-4 bg-slate-950/90 backdrop-blur-xl"
             @keydown.escape.window="isImageZoomed = false"
             x-cloak>
            
            <button @click="isImageZoomed = false" class="absolute top-6 right-6 p-3 rounded-full bg-white/10 text-white hover:bg-white/20 transition-all border border-white/10 active:scale-95">
                <svg class="size-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" /></svg>
            </button>

            <div class="relative max-w-5xl w-full aspect-square md:aspect-auto md:max-h-[90vh] flex items-center justify-center" @click.away="isImageZoomed = false">
                <img :src="selectedProduct?.image_url" class="max-w-full max-h-full rounded-[2.5rem] shadow-2xl border border-white/10 animate-luxury-in">
                
                <div class="absolute bottom-[-4rem] left-1/2 -translate-x-1/2 text-white/60 text-sm font-bold tracking-widest uppercase animate-luxury-in" style="animation-delay: 200ms">
                    <span x-text="selectedProduct?.localized_name || selectedProduct?.name"></span>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@section('scripts')
<script>
    document.addEventListener('alpine:init', () => {
        Alpine.data('productManager', () => ({
            isDeleteConfirmOpen: false,
            isDetailOpen: false,
            isImageZoomed: false,
            isStatusConfirmOpen: false,
            isDeleteConfirmOpen: false,
            isCategoryModalOpen: false,
            activeTab: '{{ request("tab", "products") }}',
            tabLoading: null,
            loading: false,
            categoryModalMode: 'create',
            categoryFormAction: '',
            deleteFormAction: '',
            toggleFormAction: '',
            selectedProduct: null,
            categories: [],
            companies: [],
            categoryFormFields: {
                names: { zh_TW: '', en: '', ja: '' },
                company_id: ''
            },

            init() {
                this.categories = JSON.parse(this.$el.dataset.categories || '[]');
                this.companies = @js($companies);
                
                // Initial binding
                this.bindPaginationLinks('#tab-products-container', 'products');
                this.bindPaginationLinks('#tab-categories-container', 'categories');

                // Watch for category modal updates
                this.$watch('isCategoryModalOpen', (value) => {
                    if (value && document.getElementById('category_company_select_wrapper')) {
                        this.$nextTick(() => {
                            this.updateCategoryCompanySelect();
                        });
                    }
                });

                // Sync top loading bar
                this.$watch('tabLoading', (val) => {
                    const bar = document.getElementById('top-loading-bar');
                    if (bar) {
                        if (val) bar.classList.add('loading');
                        else bar.classList.remove('loading');
                    }
                });

                // Sync global loading to top bar as well
                this.$watch('loading', (val) => {
                    const bar = document.getElementById('top-loading-bar');
                    if (bar) {
                        if (val) bar.classList.add('loading');
                        else if (!this.tabLoading) bar.classList.remove('loading');
                    }
                });

                // Sync tab to URL (Clean up parameters from other tabs when switching)
                this.$watch('activeTab', (val) => {
                    const url = new URL(window.location.origin + window.location.pathname);
                    url.searchParams.set('tab', val);
                    window.history.pushState({}, '', url);
                });
            },

            async fetchTabData(tab, url = null) {
                this.tabLoading = tab;
                
                const container = document.getElementById('tab-' + tab + '-container');
                
                // If no URL is provided, build one from the current tab's form
                if (!url) {
                    const form = container?.querySelector('form');
                    // Start with a clean set of parameters, only keeping the current tab
                    let params = new URLSearchParams();
                    params.set('tab', tab);
                    params.set('_ajax', '1');
                    
                    if (form) {
                        const formData = new FormData(form);
                        formData.forEach((value, key) => {
                            if (value.trim() !== '') {
                                params.set(key, value);
                            }
                        });
                    }
                    
                    url = `${window.location.pathname}?${params.toString()}`;
                } else {
                    // Ensure URL has tab and _ajax params
                    const urlObj = new URL(url, window.location.origin);
                    urlObj.searchParams.set('tab', tab);
                    urlObj.searchParams.set('_ajax', '1');
                    url = urlObj.toString();
                }

                try {
                    const response = await fetch(url, {
                        headers: { 
                            'X-Requested-With': 'XMLHttpRequest',
                            'Accept': 'application/json'
                        }
                    });
                    const data = await response.json();
                    
                    if (data.success) {
                        if (container) {
                            container.innerHTML = data.html;
                            
                            // Re-init Alpine components in the dynamic content
                            if (window.Alpine) {
                                window.Alpine.initTree(container);
                            }
                            
                            // Re-bind pagination events
                            this.bindPaginationLinks('#tab-' + tab + '-container', tab);
                        }
                        
                        // Update browser URL (without _ajax)
                        const historyUrl = new URL(url, window.location.origin);
                        historyUrl.searchParams.delete('_ajax');
                        window.history.pushState({}, '', historyUrl);
                    }
                } catch (error) {
                    console.error('Fetch error:', error);
                    if (window.showToast) window.showToast('{{ __("Failed to load data") }}', 'error');
                } finally {
                    this.tabLoading = null;
                }
            },

            handleFilterSubmit(tab) {
                // Clear page when searching
                const url = new URL(window.location.href);
                const pageKey = tab === 'products' ? 'product_page' : 'category_page';
                url.searchParams.delete(pageKey);
                
                this.fetchTabData(tab);
            },

            bindPaginationLinks(containerSelector, tab) {
                this.$nextTick(() => {
                    const container = document.querySelector(containerSelector);
                    if (!container) return;

                    // Re-init Preline components (Selects etc.)
                    if (window.HSStaticMethods && window.HSStaticMethods.autoInit) {
                        window.HSStaticMethods.autoInit();
                    }

                    // 1. Intercept Standard Links
                    container.querySelectorAll('nav a, .pagination a').forEach(link => {
                        // Prevent multiple bindings
                        if (link.dataset.ajaxBound) return;
                        link.dataset.ajaxBound = 'true';

                        link.addEventListener('click', (e) => {
                            e.preventDefault();
                            this.fetchTabData(tab, link.href);
                        });
                    });

                    // 2. Intercept Dropdown Changes (Per Page / Page Jump)
                    container.querySelectorAll('select[onchange]').forEach(sel => {
                        const originalOnchange = sel.getAttribute('onchange');
                        if (originalOnchange) {
                            sel.removeAttribute('onchange'); // Prevent default behavior
                            
                            sel.addEventListener('change', (e) => {
                                let newUrl;
                                // Simple page jump: value is usually the URL
                                if (sel.value.includes('?')) {
                                    newUrl = sel.value;
                                } else {
                                    // Per page limit change: needs to build URL
                                    const params = new URLSearchParams(window.location.search);
                                    params.set('per_page', sel.value);
                                    const pageKey = tab === 'products' ? 'product_page' : 'category_page';
                                    params.delete(pageKey); // Reset to page 1
                                    newUrl = window.location.pathname + '?' + params.toString();
                                }
                                this.fetchTabData(tab, newUrl);
                            });
                        }
                    });
                });
            },

            updateCategoryCompanySelect() {
                const wrapper = document.getElementById('category_company_select_wrapper');
                if (!wrapper) return;
                wrapper.innerHTML = '';
                
                const selectEl = document.createElement('select');
                selectEl.name = 'company_id';
                const uniqueId = 'cat-company-' + Date.now();
                selectEl.id = uniqueId;
                selectEl.className = 'hidden';
                
                const config = {
                    "placeholder": "{{ __('Select Company (Default: System)') }}",
                    "hasSearch": true,
                    "searchPlaceholder": "{{ __('Search Company Title...') }}",
                    "isHidePlaceholder": false,
                    "searchClasses": "block w-[calc(100%-16px)] mx-2 py-2 px-3 text-sm border-slate-200 dark:border-white/10 rounded-lg focus:border-cyan-500 focus:ring-cyan-500 bg-slate-50 dark:bg-slate-900/50 dark:text-slate-200 placeholder:text-slate-400 dark:placeholder:text-slate-500",
                    "searchWrapperClasses": "sticky top-0 bg-white/95 dark:bg-slate-900/95 backdrop-blur-md p-2 z-10",
                    "toggleClasses": "hs-select-toggle luxury-select-toggle",
                    "dropdownClasses": "hs-select-menu w-full bg-white dark:bg-slate-900 border border-slate-200 dark:border-white/10 rounded-xl shadow-[0_20px_50px_rgba(0,0,0,0.3)] mt-2 z-[100] animate-luxury-in",
                    "optionClasses": "hs-select-option py-2.5 px-3 mb-0.5 text-sm text-slate-800 dark:text-slate-300 cursor-pointer hover:bg-slate-100 dark:hover:bg-cyan-500/10 dark:hover:text-cyan-400 rounded-lg flex items-center justify-between transition-all duration-300",
                    "optionTemplate": '<div class="flex items-center justify-between w-full"><span data-title></span><span class="hs-select-active-indicator hidden text-cyan-500"><svg class="w-4 h-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"></polyline></svg></span></div>'
                };
                
                selectEl.setAttribute('data-hs-select', JSON.stringify(config));
                
                const defaultOpt = document.createElement('option');
                defaultOpt.value = "";
                defaultOpt.textContent = "{{ __('System Default (Common)') }}";
                defaultOpt.setAttribute('data-title', defaultOpt.textContent);
                if (!this.categoryFormFields.company_id) defaultOpt.selected = true;
                selectEl.appendChild(defaultOpt);
                
                this.companies.forEach(company => {
                    const opt = document.createElement('option');
                    opt.value = company.id;
                    opt.textContent = company.name;
                    opt.setAttribute('data-title', company.name);
                    if (String(this.categoryFormFields.company_id) === String(company.id)) opt.selected = true;
                    selectEl.appendChild(opt);
                });
                
                wrapper.appendChild(selectEl);
                
                selectEl.addEventListener('change', (e) => {
                    this.categoryFormFields.company_id = e.target.value;
                });
                
                this.$nextTick(() => {
                    if (window.HSStaticMethods && window.HSStaticMethods.autoInit) {
                        window.HSStaticMethods.autoInit(['select']);
                    }
                });
            },
            


            viewProductDetail(product) {
                this.selectedProduct = product;
                this.isDetailOpen = true;
            },

            openCategoryModal(category = null) {
                if (category) {
                    this.categoryModalMode = 'edit';
                    this.categoryFormAction = `{{ url('admin/data-config/product-categories') }}/${category.id}`;
                    this.categoryFormFields.names = { zh_TW: category.name || '', en: category.name || '', ja: category.name || '' };
                    if (category.translations && category.translations.length > 0) {
                        category.translations.forEach(t => {
                            if (this.categoryFormFields.names.hasOwnProperty(t.locale)) {
                                this.categoryFormFields.names[t.locale] = t.value;
                            }
                        });
                    }
                    this.categoryFormFields.company_id = category.company_id || '';
                } else {
                    this.categoryModalMode = 'create';
                    this.categoryFormAction = `{{ route('admin.data-config.product-categories.store') }}`;
                    this.categoryFormFields.names = { zh_TW: '', en: '', ja: '' };
                    this.categoryFormFields.company_id = '';
                }
                this.isCategoryModalOpen = true;
            },

            confirmDelete(action) {
                this.deleteFormAction = action;
                this.isDeleteConfirmOpen = true;
            },

            toggleStatus(actionUrl) {
                this.toggleFormAction = actionUrl;
                this.isStatusConfirmOpen = true;
            },

            async submitConfirmedForm() {
                if (this.isStatusConfirmOpen) {
                    this.isStatusConfirmOpen = false;
                    this.loading = true;
                    try {
                        const response = await fetch(this.toggleFormAction, {
                            method: 'POST',
                            headers: {
                                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
                                'Accept': 'application/json',
                                'Content-Type': 'application/x-www-form-urlencoded',
                                'X-Requested-With': 'XMLHttpRequest'
                            },
                            body: new URLSearchParams({
                                '_method': 'PATCH'
                            })
                        });
                        const data = await response.json();
                        if (data.success) {
                            await this.fetchTabData(this.activeTab);
                            if (window.showToast) window.showToast(data.message, 'success');
                        } else {
                            if (window.showToast) window.showToast(data.message || 'Error', 'error');
                        }
                    } catch (error) {
                        console.error('Status toggle error:', error);
                        if (window.showToast) window.showToast('{{ __("Operation failed") }}', 'error');
                    } finally {
                        this.loading = false;
                    }
                }
            },

            confirmDelete(actionUrl) {
                this.deleteFormAction = actionUrl;
                this.isDeleteConfirmOpen = true;
            },

            async deleteItem() {
                this.isDeleteConfirmOpen = false;
                this.loading = true;
                try {
                    const response = await fetch(this.deleteFormAction, {
                        method: 'POST',
                        headers: {
                            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
                            'Accept': 'application/json',
                            'X-Requested-With': 'XMLHttpRequest'
                        },
                        body: new URLSearchParams({
                            '_method': 'DELETE'
                        })
                    });
                    const data = await response.json();
                    if (data.success) {
                        await this.fetchTabData(this.activeTab);
                        if (window.showToast) window.showToast(data.message, 'success');
                    } else {
                        if (window.showToast) window.showToast(data.message || 'Error', 'error');
                    }
                } catch (error) {
                    console.error('Delete error:', error);
                    if (window.showToast) window.showToast('{{ __("Operation failed") }}', 'error');
                } finally {
                    this.loading = false;
                }
            },

            getCategoryName(id) {
                const category = this.categories.find(c => c.id == id);
                return category ? (category.name || "{{ __('Uncategorized') }}") : "{{ __('Uncategorized') }}";
            },

            formatNumber(val) {
                if (val === null || val === undefined) return '0';
                return new Intl.NumberFormat().format(val);
            },

            formatDate(dateStr) {
                if (!dateStr) return '-';
                const date = new Date(dateStr);
                return date.toLocaleString();
            }
        }));
    });
</script>
@endsection