@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-6 pb-20" 
     x-data="productManager"
     data-categories="{{ json_encode($categories) }}"
     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-6">
        <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">
            <a href="{{ route($baseRoute . '.create') }}" class="btn-luxury-primary">
                <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>
        </div>
    </div>


    <!-- Main Content Card -->
    <div class="luxury-card rounded-3xl p-8 animate-luxury-in">
        <!-- Filters & Search -->
        <form action="{{ route($routeName) }}" method="GET" class="flex flex-col md:flex-row md:items-center gap-4 mb-10">
            <div class="relative group">
                <span class="absolute inset-y-0 left-0 flex items-center pl-4 pointer-events-none z-10">
                    <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" stroke-linecap="round" stroke-linejoin="round">
                        <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" name="search" value="{{ request('search') }}" class="py-2.5 pl-12 pr-6 block w-full md:w-80 luxury-input" placeholder="{{ __('Search products...') }}">
            </div>

            @if(auth()->user()->isSystemAdmin())
            <div class="relative min-w-[200px]">
                <x-searchable-select name="company_id" :options="$companies" :selected="request('company_id')" :placeholder="__('All Companies')" onchange="this.form.submit()" />
            </div>
            @endif
        </form>

        <!-- Table -->
        <div class="overflow-x-auto">
            <table class="w-full text-left border-separate border-spacing-y-0">
                <thead>
                    <tr class="bg-slate-50/50 dark:bg-slate-900/10">
                        <th class="px-6 py-4 text-xs font-bold text-slate-500 dark:text-slate-400 uppercase tracking-[0.15em] border-b border-slate-100 dark:border-slate-800">{{ __('Product Info') }}</th>
                        @if(auth()->user()->isSystemAdmin())
                        <th class="px-6 py-4 text-xs font-bold text-slate-500 dark:text-slate-400 uppercase tracking-[0.15em] border-b border-slate-100 dark:border-slate-800 text-center">{{ __('Company') }}</th>
                        @endif
                        <th class="px-6 py-4 text-xs font-bold text-slate-500 dark:text-slate-400 uppercase tracking-[0.15em] border-b border-slate-100 dark:border-slate-800 text-center">{{ __('Price / Member') }}</th>
                        <th class="px-6 py-4 text-xs font-bold text-slate-500 dark:text-slate-400 uppercase tracking-[0.15em] border-b border-slate-100 dark:border-slate-800 text-center">{{ __('Channel Limits (Track/Spring)') }}</th>
                        <th class="px-6 py-4 text-xs font-bold text-slate-500 dark:text-slate-400 uppercase tracking-[0.15em] border-b border-slate-100 dark:border-slate-800 text-center">{{ __('Status') }}</th>
                        <th class="px-6 py-4 text-xs font-bold text-slate-500 dark:text-slate-400 uppercase tracking-[0.15em] border-b border-slate-100 dark:border-slate-800 text-right">{{ __('Actions') }}</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-slate-50 dark:divide-slate-800/80">
                    @forelse($products as $product)
                    <tr class="group hover:bg-slate-50/80 dark:hover:bg-slate-800/40 transition-all duration-300">
                        <td class="px-6 py-6">
                            <div class="flex items-center gap-x-4">
                                <div class="w-10 h-10 rounded-xl bg-slate-100 dark:bg-slate-800 flex items-center justify-center text-slate-400 group-hover:bg-cyan-500 group-hover:text-white transition-all overflow-hidden shadow-sm">
                                    @if($product->image_url)
                                        <img src="{{ $product->image_url }}" class="w-full h-full object-cover">
                                    @else
                                        <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="m21 7.5-9-5.25L3 7.5m18 0-9 5.25m9-5.25v9l-9 5.25M3 7.5l9 5.25M3 7.5v9l9 5.25m0-9v9" /></svg>
                                    @endif
                                </div>
                                <div class="flex flex-col">
                                    <span class="text-base font-extrabold text-slate-800 dark:text-slate-100 group-hover:text-cyan-600 dark:group-hover:text-cyan-400 transition-colors">{{ $product->name }}</span>
                                    <div class="flex items-center gap-2 mt-0.5">
                                        @php
                                            $catName = $product->category->name ?? __('Uncategorized');
                                            if ($product->category && $product->category->name_dictionary_key) {
                                                $translatedCat = __($product->category->name_dictionary_key);
                                                if ($translatedCat !== $product->category->name_dictionary_key) {
                                                    $catName = $translatedCat;
                                                }
                                            }
                                        @endphp
                                        <span class="text-[10px] font-bold text-slate-400 dark:text-slate-500 uppercase tracking-widest bg-slate-100 dark:bg-slate-800 px-1.5 py-0.5 rounded transition-colors group-hover:text-slate-600 dark:group-hover:text-slate-300">{{ $catName }}</span>
                                        @if($companySettings['enable_material_code'] ?? false)
                                            <div class="flex items-center gap-1.5 bg-slate-100/50 dark:bg-slate-800/50 px-2 py-0.5 rounded-md border border-slate-100 dark:border-slate-800">
                                                <span class="text-[10px] font-mono font-bold text-cyan-500 tracking-tighter">{{ $product->barcode }}</span>
                                                <span class="h-1 w-1 rounded-full bg-slate-300 dark:bg-slate-700"></span>
                                                <span class="text-[10px] font-mono font-bold text-emerald-500 tracking-tighter">{{ $product->metadata['material_code'] ?? '-' }}</span>
                                            </div>
                                        @else
                                            <span class="text-[10px] font-mono font-bold text-cyan-500 tracking-tighter transition-colors group-hover:text-cyan-600 dark:group-hover:text-cyan-400">{{ $product->barcode }}</span>
                                        @endif
                                    </div>
                                </div>
                            </div>
                        </td>
                        @if(auth()->user()->isSystemAdmin())
                        <td class="px-6 py-6 text-center">
                            <span class="text-xs font-bold text-slate-600 dark:text-slate-400 group-hover:text-slate-900 dark:group-hover:text-slate-200 transition-colors">{{ $product->company->name ?? '-' }}</span>
                        </td>
                        @endif
                        <td class="px-6 py-6 text-center whitespace-nowrap">
                            <span class="text-sm font-black text-slate-800 dark:text-white">${{ number_format($product->price, 0) }}</span>
                            <span class="text-xs font-bold text-slate-400 mx-1">/</span>
                            <span class="text-sm font-black text-emerald-500">${{ number_format($product->member_price, 0) }}</span>
                        </td>
                        <td class="px-6 py-6 text-center whitespace-nowrap">
                            <span class="text-sm font-black text-indigo-500 dark:text-indigo-400">{{ $product->track_limit }}</span>
                            <span class="text-xs font-bold text-slate-400 mx-1">/</span>
                            <span class="text-sm font-black text-amber-500 dark:text-amber-400">{{ $product->spring_limit }}</span>
                        </td>
                        <td class="px-6 py-6 text-center">
                            @if($product->is_active)
                                <span class="px-3 py-1 rounded-full text-[10px] font-black uppercase tracking-widest bg-emerald-500/10 text-emerald-600 border border-emerald-500/20 shadow-sm shadow-emerald-500/10">{{ __('Active') }}</span>
                            @else
                                <span class="px-3 py-1 rounded-full text-[10px] font-black uppercase tracking-widest bg-slate-500/10 text-slate-500 border border-slate-500/20">{{ __('Disabled') }}</span>
                            @endif
                        </td>
                        <td class="px-6 py-6 text-right">
                            <div class="flex justify-end items-center gap-2">
                                <button type="button" @click="confirmDelete('{{ route($baseRoute . '.destroy', $product->id) }}')" class="p-2.5 rounded-lg bg-slate-50 dark:bg-slate-800 text-slate-400 hover:text-rose-500 hover:bg-rose-500/5 transition-all border border-transparent hover:border-rose-500/20" title="{{ __('Delete') }}">
                                    <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="m14.74 9l-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 0 1-2.244 2.077H8.084a2.25 2.25 0 0 1-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 0 0-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 0 1 3.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 0 0-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 0 0-7.5 0" /></svg>
                                </button>
                                <a href="{{ route($baseRoute . '.edit', $product->id) }}" class="p-2.5 rounded-lg bg-slate-50 dark:bg-slate-800 text-slate-400 hover:text-cyan-500 hover:bg-cyan-500/5 transition-all border border-transparent hover:border-cyan-500/20" title="{{ __('Edit') }}">
                                    <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="m16.862 4.487 1.687-1.688a1.875 1.875 0 1 1 2.652 2.652L10.582 16.07a4.5 4.5 0 0 1-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 0 1 1.13-1.897l8.932-8.931Zm0 0L19.5 7.125M18 14v4.75A2.25 2.25 0 0 1 15.75 21H5.25A2.25 2.25 0 0 1 3 18.75V8.25A2.25 2.25 0 0 1 5.25 6H10" /></svg>
                                </a>
                                <button type="button" @click="viewProductDetail(@js($product))" class="p-2.5 rounded-lg bg-slate-50 dark:bg-slate-800 text-slate-400 hover:text-indigo-500 hover:bg-indigo-500/5 transition-all border border-transparent hover:border-indigo-500/20" title="{{ __('View Details') }}">
                                    <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="M2.036 12.322a1.012 1.012 0 010-.644C3.67 8.5 7.652 5 12 5c4.418 0 8.401 3.5 10.014 6.722a1.012 1.012 0 010 .644C20.33 15.5 16.348 19 12 19c-4.412 0-8.401-3.5-10.014-6.722z" /><path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" /></svg>
                                </button>
                            </div>
                        </td>
                    </tr>
                    @empty
                    <tr>
                        <td colspan="5" class="px-6 py-32 text-center text-slate-400 italic">{{ __('No products found matching your criteria.') }}</td>
                    </tr>
                    @endforelse
                </tbody>
            </table>
        </div>

        <!-- Pagination -->
        <div class="mt-10 pt-6 border-t border-slate-100 dark:border-slate-800/50">
            {{ $products->links('vendor.pagination.luxury') }}
        </div>
    </div>



    <!-- Delete Confirm Modal -->
    <x-delete-confirm-modal :message="__('Are you sure you want to delete this product? All related historical translation data will also be removed.')" />

    <form x-ref="deleteForm" :action="deleteFormAction" method="POST" class="hidden">
        @csrf
        @method('DELETE')
    </form>

    <!-- 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-2xl"
                 @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">
                    <!-- Close Button Overlay -->
                    <div class="absolute top-6 right-6 z-10">
                        <button @click="isDetailOpen = false" class="p-2 rounded-full bg-slate-100/80 dark:bg-slate-800/80 text-slate-400 hover:text-slate-600 dark:hover:text-slate-200 backdrop-blur-md transition-all hover:rotate-90">
                            <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>

                    <div class="p-8 md:p-12">
                        <!-- Header with Status -->
                        <div class="flex flex-col md:flex-row gap-10 mb-12 animate-luxury-in">
                            <!-- Image Section -->
                            <div class="w-full md:w-48 shrink-0">
                                <div class="aspect-square rounded-[2rem] bg-slate-50 dark:bg-slate-800 flex items-center justify-center overflow-hidden border border-slate-100 dark:border-white/5 shadow-inner group">
                                    <template x-if="selectedProduct?.image_url">
                                        <img :src="selectedProduct.image_url" class="w-full h-full object-cover group-hover:scale-110 transition-transform duration-700">
                                    </template>
                                    <template x-if="!selectedProduct?.image_url">
                                        <svg class="size-16 text-slate-200 dark:text-slate-700" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="m21 7.5-9-5.25L3 7.5m18 0-9 5.25m9-5.25v9l-9 5.25M3 7.5l9 5.25M3 7.5v9l9 5.25m0-9v9" /></svg>
                                    </template>
                                </div>
                            </div>

                            <!-- Identity Section -->
                            <div class="flex-1 flex flex-col justify-center">
                                <div class="inline-flex items-center gap-2 mb-4">
                                    <span class="px-3 py-1 rounded-full text-[10px] 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-[10px] font-bold text-slate-400 dark:text-slate-500 uppercase tracking-widest bg-slate-100 dark:bg-slate-800 px-2 py-1 rounded-lg border border-transparent dark:border-white/5" x-text="getCategoryName(selectedProduct?.category_id)"></span>
                                </div>
                                <h2 class="text-4xl font-black text-slate-800 dark:text-white leading-tight font-display tracking-tight" x-text="selectedProduct?.name"></h2>
                                <p class="text-sm font-mono font-bold text-cyan-500 mt-2 tracking-widest uppercase" x-text="selectedProduct?.barcode"></p>
                            </div>
                        </div>

                        <!-- Info Grid -->
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-10 mb-12">
                            <!-- Pricing Card -->
                            <div class="luxury-card p-6 rounded-[1.5rem] border border-slate-100 dark:border-white/5 space-y-6">
                                <h3 class="text-xs font-black text-slate-400 uppercase tracking-[.2em] flex items-center gap-2">
                                    <svg class="size-4 text-cyan-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z" /></svg>
                                    {{ __('Pricing Details') }}
                                </h3>
                                <div class="grid grid-cols-2 gap-6">
                                    <div class="space-y-1">
                                        <p class="text-[10px] font-bold text-slate-400 uppercase tracking-widest">{{ __('List Price') }}</p>
                                        <p class="text-2xl font-black text-slate-800 dark:text-white leading-none">$<span x-text="formatNumber(selectedProduct?.price)"></span></p>
                                    </div>
                                    <div class="space-y-1">
                                        <p class="text-[10px] font-bold text-slate-400 uppercase tracking-widest">{{ __('Member Price') }}</p>
                                        <p class="text-2xl font-black text-emerald-500 leading-none">$<span x-text="formatNumber(selectedProduct?.member_price)"></span></p>
                                    </div>
                                    <div class="space-y-1 col-span-2 pt-4 border-t border-slate-50 dark:border-white/5">
                                        <p class="text-[10px] font-bold text-slate-400 uppercase tracking-widest">{{ __('Cost Basis') }}</p>
                                        <p class="text-lg font-bold text-slate-500 leading-none">$<span x-text="formatNumber(selectedProduct?.cost)"></span></p>
                                    </div>
                                </div>
                            </div>

                            <!-- Specs Card -->
                            <div class="luxury-card p-6 rounded-[1.5rem] border border-slate-100 dark:border-white/5 space-y-6">
                                <h3 class="text-xs font-black text-slate-400 uppercase tracking-[.2em] flex items-center gap-2">
                                    <svg class="size-4 text-indigo-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" 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>
                                    {{ __('Channel Limits') }}
                                </h3>
                                <div class="space-y-8">
                                    <div class="flex items-center justify-between">
                                        <div class="space-y-1">
                                            <p class="text-[10px] 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"></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-[10px] 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"></p>
                                        </div>
                                    </div>
                                    <div class="relative h-2 bg-slate-100 dark:bg-slate-800 rounded-full overflow-hidden">
                                        <div class="absolute inset-y-0 left-0 bg-indigo-500 rounded-full transition-all duration-1000" :style="`width: ${Math.min(100, (selectedProduct?.track_limit / 50) * 100)}%`" x-show="isDetailOpen"></div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Extended Features Section -->
                        <div class="luxury-card p-8 rounded-[2rem] bg-slate-50/50 dark:bg-slate-800/30 border border-slate-100 dark:border-white/5 mb-12">
                            <h3 class="text-xs font-black text-slate-800 dark:text-white uppercase tracking-[0.25em] mb-8 flex items-center gap-3">
                                <span class="size-2 rounded-full bg-cyan-500 animate-pulse"></span>
                                {{ __('Feature Configurations') }}
                            </h3>
                            <div class="grid grid-cols-2 md:grid-cols-4 gap-8">
                                <div class="space-y-1.5 p-4 rounded-2xl bg-white dark:bg-slate-900 border border-slate-50 dark:border-white/5">
                                    <p class="text-[10px] font-bold text-slate-400 uppercase tracking-widest">{{ __('Material Code') }}</p>
                                    <p class="text-sm font-black text-slate-700 dark:text-slate-200 font-mono" x-text="selectedProduct?.metadata?.material_code || '-'"></p>
                                </div>
                                <div class="space-y-1.5 p-4 rounded-2xl bg-white dark:bg-slate-900 border border-slate-50 dark:border-white/5">
                                    <p class="text-[10px] font-bold text-slate-400 uppercase tracking-widest">{{ __('Full Points') }}</p>
                                    <p class="text-sm font-black text-cyan-600 dark:text-cyan-400 font-mono" x-text="selectedProduct?.metadata?.points_full || '0'"></p>
                                </div>
                                <div class="space-y-1.5 p-4 rounded-2xl bg-white dark:bg-slate-900 border border-slate-50 dark:border-white/5">
                                    <p class="text-[10px] font-bold text-slate-400 uppercase tracking-widest">{{ __('Half Points') }}</p>
                                    <p class="text-sm font-black text-indigo-600 dark:text-indigo-400 font-mono" x-text="selectedProduct?.metadata?.points_half || '0'"></p>
                                </div>
                                <div class="space-y-1.5 p-4 rounded-2xl bg-white dark:bg-slate-900 border border-slate-50 dark:border-white/5">
                                    <p class="text-[10px] font-bold text-slate-400 uppercase tracking-widest">{{ __('Half Amount') }}</p>
                                    <p class="text-sm font-black text-emerald-600 dark:text-emerald-400 font-mono" x-text="selectedProduct?.metadata?.points_half_amount || '0'"></p>
                                </div>
                            </div>
                        </div>

                        <!-- Footer Timestamps -->
                        <div class="flex flex-col md:flex-row items-center justify-between gap-4 pt-10 border-t border-slate-100 dark:border-white/5 text-[10px] font-bold text-slate-400 uppercase tracking-[.25em]">
                            <div class="flex items-center gap-6">
                                <div class="flex flex-col gap-1">
                                    <span>{{ __('Created At') }}</span>
                                    <span class="text-slate-500 dark:text-slate-300 font-mono" x-text="formatDate(selectedProduct?.created_at)"></span>
                                </div>
                                <div class="w-px h-8 bg-slate-100 dark:bg-white/10 hidden md:block"></div>
                                <div class="flex flex-col gap-1">
                                    <span>{{ __('Updated At') }}</span>
                                    <span class="text-slate-500 dark:text-slate-300 font-mono" x-text="formatDate(selectedProduct?.updated_at)"></span>
                                </div>
                            </div>
                            <button @click="isDetailOpen = false" class="btn-luxury-secondary px-8 py-3">
                                {{ __('Close Panel') }}
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@section('scripts')
<script>
    document.addEventListener('alpine:init', () => {
        Alpine.data('productManager', () => ({
            isDeleteConfirmOpen: false,
            isDetailOpen: false,
            deleteFormAction: '',
            selectedProduct: null,
            categories: [],

            init() {
                this.categories = JSON.parse(this.$el.dataset.categories || '[]');
            },
            
            confirmDelete(action) {
                this.deleteFormAction = action;
                this.isDeleteConfirmOpen = true;
            },

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

            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
