@extends('layouts.admin')

@section('title', 'Products & Packages - ' . $appName . ' Admin')

@section('content')
<div class="space-y-6" x-data="{ 
    activeTab: 'products', 
    showAddModal: false,
    showCategoryModal: false,
    editingCategory: null
}">
    <!-- Header with Stats & Actions -->
    <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-4">
        <div>
            <h1 class="text-2xl font-bold text-slate-900 dark:text-white tracking-tight">Products & Packages Inventory</h1>
            <p class="text-xs text-slate-500 dark:text-slate-400">Manage official wellness catalog, product images, pricing, stock levels, and membership packages.</p>
        </div>
        <div class="flex items-center gap-2">
            <button @click="showCategoryModal = true" class="inline-flex items-center gap-1.5 px-3.5 py-2.5 bg-slate-100 hover:bg-slate-200 dark:bg-slate-800 dark:hover:bg-slate-700 text-slate-800 dark:text-slate-200 border border-slate-300 dark:border-slate-700 rounded-xl text-xs font-bold transition shadow-xs">
                <i data-lucide="tags" class="w-4 h-4 text-sky-500"></i>
                <span>Categories ({{ $categories->count() }})</span>
            </button>
            <button @click="showAddModal = true" class="inline-flex items-center gap-2 px-4 py-2.5 bg-sky-600 hover:bg-sky-700 text-white rounded-xl text-xs font-bold transition shadow-sm">
                <i data-lucide="plus-circle" class="w-4 h-4"></i>
                <span>Add New Product</span>
            </button>
        </div>
    </div>

    @if(session('success'))
        <div class="p-4 rounded-xl bg-emerald-50 dark:bg-emerald-950/40 border border-emerald-200 dark:border-emerald-800 text-emerald-800 dark:text-emerald-300 text-xs font-semibold flex items-center gap-2">
            <i data-lucide="check-circle" class="w-4 h-4 text-emerald-600 dark:text-emerald-400"></i>
            <span>{{ session('success') }}</span>
        </div>
    @endif

    @if($errors->any())
        <div class="p-4 rounded-xl bg-rose-50 dark:bg-rose-950/40 border border-rose-200 dark:border-rose-800 text-rose-800 dark:text-rose-300 text-xs font-semibold space-y-1">
            <div class="font-bold flex items-center gap-1.5">
                <i data-lucide="alert-circle" class="w-4 h-4 text-rose-600 dark:text-rose-400"></i>
                <span>Please correct the errors below:</span>
            </div>
            <ul class="list-disc list-inside space-y-0.5 text-rose-700 dark:text-rose-300">
                @foreach($errors->all() as $error)
                    <li>{{ $error }}</li>
                @endforeach
            </ul>
        </div>
    @endif

    <!-- Inventory KPIs -->
    <div class="grid grid-cols-2 sm:grid-cols-4 gap-4">
        <div class="bg-white dark:bg-slate-900 rounded-2xl p-4 border border-slate-200 dark:border-slate-800 shadow-xs flex items-center gap-3.5 transition-colors">
            <div class="w-10 h-10 rounded-xl bg-sky-50 dark:bg-sky-950/50 text-sky-600 dark:text-sky-400 flex items-center justify-center font-bold">
                <i data-lucide="package" class="w-5 h-5"></i>
            </div>
            <div>
                <span class="text-[10px] uppercase font-bold text-slate-400 dark:text-slate-500">Total Products</span>
                <p class="text-lg font-bold text-slate-900 dark:text-white">{{ $products->count() }}</p>
            </div>
        </div>
        <div class="bg-white dark:bg-slate-900 rounded-2xl p-4 border border-slate-200 dark:border-slate-800 shadow-xs flex items-center gap-3.5 transition-colors">
            <div class="w-10 h-10 rounded-xl bg-emerald-50 dark:bg-emerald-950/50 text-emerald-600 dark:text-emerald-400 flex items-center justify-center font-bold">
                <i data-lucide="boxes" class="w-5 h-5"></i>
            </div>
            <div>
                <span class="text-[10px] uppercase font-bold text-slate-400 dark:text-slate-500">In-Stock Units</span>
                <p class="text-lg font-bold text-slate-900 dark:text-white">{{ number_format($products->sum('stock')) }}</p>
            </div>
        </div>
        <div class="bg-white dark:bg-slate-900 rounded-2xl p-4 border border-slate-200 dark:border-slate-800 shadow-xs flex items-center gap-3.5 transition-colors">
            <div class="w-10 h-10 rounded-xl bg-amber-50 dark:bg-amber-950/50 text-amber-600 dark:text-amber-400 flex items-center justify-center font-bold">
                <i data-lucide="sparkles" class="w-5 h-5"></i>
            </div>
            <div>
                <span class="text-[10px] uppercase font-bold text-slate-400 dark:text-slate-500">Packages</span>
                <p class="text-lg font-bold text-slate-900 dark:text-white">{{ $packages->count() }}</p>
            </div>
        </div>
        <div class="bg-white dark:bg-slate-900 rounded-2xl p-4 border border-slate-200 dark:border-slate-800 shadow-xs flex items-center gap-3.5 transition-colors">
            <div class="w-10 h-10 rounded-xl bg-blue-50 dark:bg-blue-950/50 text-blue-600 dark:text-blue-400 flex items-center justify-center font-bold">
                <i data-lucide="check-circle-2" class="w-5 h-5"></i>
            </div>
            <div>
                <span class="text-[10px] uppercase font-bold text-slate-400 dark:text-slate-500">Active Items</span>
                <p class="text-lg font-bold text-slate-900 dark:text-white">{{ $products->where('is_active', true)->count() }}</p>
            </div>
        </div>
    </div>

    <!-- Tab Bar -->
    <div class="flex flex-col sm:flex-row items-stretch sm:items-center gap-2 border-b border-slate-200 dark:border-slate-800 pb-2 text-xs font-bold">
        <button @click="activeTab = 'products'" 
                :class="activeTab === 'products' ? 'bg-sky-600 text-white shadow-xs' : 'bg-slate-100 dark:bg-slate-800 text-slate-600 dark:text-slate-300 hover:bg-slate-200 dark:hover:bg-slate-700'"
                class="px-4 py-2.5 sm:py-2 rounded-xl transition flex items-center justify-center gap-2">
            <i data-lucide="shopping-bag" class="w-4 h-4"></i>
            <span>Retail Products ({{ $products->count() }})</span>
        </button>
        <button @click="activeTab = 'packages'" 
                :class="activeTab === 'packages' ? 'bg-sky-600 text-white shadow-xs' : 'bg-slate-100 dark:bg-slate-800 text-slate-600 dark:text-slate-300 hover:bg-slate-200 dark:hover:bg-slate-700'"
                class="px-4 py-2.5 sm:py-2 rounded-xl transition flex items-center justify-center gap-2">
            <i data-lucide="box" class="w-4 h-4"></i>
            <span>Account Packages ({{ $packages->count() }})</span>
        </button>
    </div>

    <!-- PRODUCTS TAB -->
    <div x-show="activeTab === 'products'" class="space-y-6">
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
            @foreach($products as $p)
                <div class="bg-white dark:bg-slate-900 rounded-2xl border border-slate-200 dark:border-slate-800 shadow-xs overflow-hidden flex flex-col justify-between transition hover:shadow-md">
                    <!-- Product Image Display -->
                    <div class="relative bg-gradient-to-b from-slate-50 to-slate-100/60 dark:from-slate-800 dark:to-slate-850 p-4 flex items-center justify-center h-48 border-b border-slate-100 dark:border-slate-800">
                        @if($p->image_url)
                            <img src="{{ asset($p->image_url) }}" alt="{{ $p->name }}" class="max-h-40 max-w-full object-contain drop-shadow-md">
                        @else
                            <div class="w-20 h-20 rounded-2xl bg-sky-50 dark:bg-sky-950/50 text-sky-600 dark:text-sky-400 flex items-center justify-center">
                                <i data-lucide="package" class="w-10 h-10"></i>
                            </div>
                        @endif

                        <!-- Status Badge -->
                        <div class="absolute top-3 right-3">
                            @if($p->is_active)
                                <span class="px-2 py-0.5 rounded-full text-[10px] font-bold bg-emerald-100 dark:bg-emerald-950/50 text-emerald-800 dark:text-emerald-300 border border-emerald-200 dark:border-emerald-800">Active</span>
                            @else
                                <span class="px-2 py-0.5 rounded-full text-[10px] font-bold bg-slate-200 dark:bg-slate-800 text-slate-600 dark:text-slate-400">Inactive</span>
                            @endif
                        </div>

                        <!-- PV Badge -->
                        <div class="absolute top-3 left-3">
                            <span class="px-2 py-0.5 rounded-lg text-[10px] font-extrabold bg-amber-100 dark:bg-amber-950/50 text-amber-900 dark:text-amber-300 border border-amber-200 dark:border-amber-800">
                                {{ $p->pv_points }} PV
                            </span>
                        </div>
                    </div>

                    <!-- Details & Edit Form -->
                    <div class="p-5 flex-1 flex flex-col justify-between">
                        <div>
                            <span class="text-[10px] font-bold text-sky-600 dark:text-sky-400 uppercase tracking-wider">{{ $p->category }}</span>
                            <h3 class="text-sm font-bold text-slate-900 dark:text-white line-clamp-1 mt-0.5" title="{{ $p->name }}">{{ $p->name }}</h3>
                            <p class="text-[11px] text-slate-500 dark:text-slate-400 mt-0.5">{{ $p->spec_weight ?: 'Standard Package' }}</p>
                        </div>

                        <form method="POST" action="{{ route('admin.products.update', $p->id) }}" enctype="multipart/form-data" class="mt-4 space-y-3 pt-3 border-t border-slate-100 dark:border-slate-800 text-xs">
                            @csrf
                            <input type="hidden" name="name" value="{{ $p->name }}">

                            <div>
                                <label class="text-[10px] text-slate-500 dark:text-slate-400 font-bold">Category</label>
                                <select name="category" required class="w-full px-2.5 py-1.5 bg-slate-50 dark:bg-slate-800 border border-slate-200 dark:border-slate-700 rounded-lg text-xs font-semibold text-slate-800 dark:text-slate-200 focus:outline-none focus:ring-1 focus:ring-sky-600">
                                    @foreach($categories as $cat)
                                        <option value="{{ $cat->name }}" {{ $p->category === $cat->name ? 'selected' : '' }}>{{ $cat->name }}</option>
                                    @endforeach
                                    @if(!$categories->contains('name', $p->category) && $p->category)
                                        <option value="{{ $p->category }}" selected>{{ $p->category }}</option>
                                    @endif
                                </select>
                            </div>

                            <div class="grid grid-cols-2 gap-2">
                                <div>
                                    <label class="text-[10px] text-slate-500 dark:text-slate-400 font-bold">Member (₱)</label>
                                    <input type="number" step="0.01" name="member_price" value="{{ $p->member_price }}" class="w-full px-2.5 py-1.5 bg-slate-50 dark:bg-slate-800 border border-slate-200 dark:border-slate-700 rounded-lg font-bold text-sky-600 dark:text-sky-400 focus:outline-none focus:ring-1 focus:ring-sky-600">
                                </div>
                                <div>
                                    <label class="text-[10px] text-slate-500 dark:text-slate-400 font-bold">Retail (₱)</label>
                                    <input type="number" step="0.01" name="retail_price" value="{{ $p->retail_price }}" class="w-full px-2.5 py-1.5 bg-slate-50 dark:bg-slate-800 border border-slate-200 dark:border-slate-700 rounded-lg font-bold text-slate-700 dark:text-slate-200 focus:outline-none focus:ring-1 focus:ring-sky-600">
                                </div>
                            </div>

                            <div class="grid grid-cols-2 gap-2">
                                <div>
                                    <label class="text-[10px] text-slate-500 dark:text-slate-400 font-bold">PV Points</label>
                                    <input type="number" name="pv_points" value="{{ $p->pv_points }}" class="w-full px-2.5 py-1.5 bg-slate-50 dark:bg-slate-800 border border-slate-200 dark:border-slate-700 rounded-lg font-semibold text-slate-800 dark:text-slate-200 focus:outline-none focus:ring-1 focus:ring-sky-600">
                                </div>
                                <div>
                                    <label class="text-[10px] text-slate-500 dark:text-slate-400 font-bold">Stock</label>
                                    <input type="number" name="stock" value="{{ $p->stock }}" class="w-full px-2.5 py-1.5 bg-slate-50 dark:bg-slate-800 border border-slate-200 dark:border-slate-700 rounded-lg font-semibold text-slate-800 dark:text-slate-200 focus:outline-none focus:ring-1 focus:ring-sky-600">
                                </div>
                            </div>

                            <div>
                                <label class="text-[10px] text-slate-500 dark:text-slate-400 font-bold">Spec / Weight Label</label>
                                <input type="text" name="spec_weight" value="{{ $p->spec_weight }}" class="w-full px-2.5 py-1.5 bg-slate-50 dark:bg-slate-800 border border-slate-200 dark:border-slate-700 rounded-lg text-xs text-slate-800 dark:text-slate-200 focus:outline-none focus:ring-1 focus:ring-sky-600" placeholder="e.g. 3g x 15 sachet - 45 grams">
                            </div>

                            <div>
                                <label class="text-[10px] text-slate-500 dark:text-slate-400 font-bold">Image URL / Preset</label>
                                <input type="text" name="image_url" value="{{ $p->image_url }}" class="w-full px-2.5 py-1.5 bg-slate-50 dark:bg-slate-800 border border-slate-200 dark:border-slate-700 rounded-lg text-[11px] font-mono text-slate-800 dark:text-slate-200 focus:outline-none focus:ring-1 focus:ring-sky-600">
                            </div>

                            <div>
                                <label class="text-[10px] text-slate-500 dark:text-slate-400 font-bold">Replace Image File</label>
                                <input type="file" name="image_file" accept="image/*" class="w-full text-[10px] text-slate-600 dark:text-slate-400 file:mr-2 file:py-1 file:px-2.5 file:rounded-md file:border-0 file:text-[10px] file:font-semibold file:bg-sky-50 dark:file:bg-slate-800 file:text-sky-600 dark:file:text-sky-400 hover:file:bg-sky-100">
                            </div>

                            <div>
                                <label class="text-[10px] text-slate-500 dark:text-slate-400 font-bold">Display Status</label>
                                <select name="is_active" class="w-full px-2.5 py-1.5 bg-slate-50 dark:bg-slate-800 border border-slate-200 dark:border-slate-700 rounded-lg text-xs font-semibold text-slate-800 dark:text-slate-200 focus:outline-none focus:ring-1 focus:ring-sky-600">
                                    <option value="1" {{ $p->is_active ? 'selected' : '' }}>Active (Visible in Store)</option>
                                    <option value="0" {{ !$p->is_active ? 'selected' : '' }}>Inactive (Hidden)</option>
                                </select>
                            </div>

                            <button type="submit" class="w-full py-2 bg-sky-600 hover:bg-sky-700 text-white rounded-xl text-xs font-bold transition shadow-xs flex items-center justify-center gap-1.5">
                                <i data-lucide="save" class="w-3.5 h-3.5"></i>
                                <span>Save Changes</span>
                            </button>
                        </form>
                    </div>
                </div>
            @endforeach
        </div>
    </div>

    <!-- PACKAGES TAB -->
    <div x-show="activeTab === 'packages'" class="space-y-6">
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
            @foreach($packages as $pkg)
                <div class="bg-white dark:bg-slate-900 rounded-2xl border border-slate-200 dark:border-slate-800 shadow-xs p-6 flex flex-col justify-between">
                    <div>
                        <div class="flex items-start gap-4">
                            <div class="w-14 h-14 rounded-2xl bg-sky-50 dark:bg-sky-950/40 text-sky-700 dark:text-sky-400 flex items-center justify-center shrink-0 border border-sky-100 dark:border-sky-900/50 overflow-hidden">
                                @if($pkg->image_url)
                                    <img src="{{ asset($pkg->image_url) }}" alt="{{ $pkg->name }}" class="w-full h-full object-cover">
                                @else
                                    <i data-lucide="box" class="w-7 h-7"></i>
                                @endif
                            </div>
                            <div class="flex-1">
                                <div class="flex items-center justify-between">
                                    <h3 class="text-base font-bold text-slate-900 dark:text-white">{{ $pkg->name }}</h3>
                                    @if($pkg->is_available)
                                        <span class="px-2 py-0.5 rounded-full text-[10px] font-bold bg-emerald-100 dark:bg-emerald-950/50 text-emerald-800 dark:text-emerald-300 border border-emerald-200 dark:border-emerald-800">Available</span>
                                    @else
                                        <span class="px-2 py-0.5 rounded-full text-[10px] font-bold bg-slate-100 dark:bg-slate-800 text-slate-500 dark:text-slate-400">Unavailable</span>
                                    @endif
                                </div>
                                <p class="text-xs text-slate-500 dark:text-slate-400 mt-1">{{ $pkg->description }}</p>
                            </div>
                        </div>

                        <div class="mt-4 pt-4 border-t border-slate-100 dark:border-slate-800">
                            <div class="flex items-baseline gap-2">
                                <span class="text-2xl font-black text-sky-900 dark:text-sky-300">₱{{ number_format($pkg->price, 0) }}</span>
                                <span class="text-xs text-slate-400 font-semibold">({{ $pkg->pv_points }} PV)</span>
                            </div>
                        </div>
                    </div>

                    <form method="POST" action="{{ route('admin.packages.update', $pkg->id) }}" class="mt-6 pt-4 border-t border-slate-100 dark:border-slate-800 space-y-3 text-xs">
                        @csrf
                        <div class="grid grid-cols-2 gap-2">
                            <div>
                                <label class="text-[10px] text-slate-500 dark:text-slate-400 font-bold">Price (₱)</label>
                                <input type="number" step="0.01" name="price" value="{{ $pkg->price }}" class="w-full px-2.5 py-1.5 bg-slate-50 dark:bg-slate-800 border border-slate-200 dark:border-slate-700 rounded-lg font-bold text-slate-900 dark:text-white focus:outline-none focus:ring-1 focus:ring-sky-600">
                            </div>
                            <div>
                                <label class="text-[10px] text-slate-500 dark:text-slate-400 font-bold">PV Points</label>
                                <input type="number" name="pv_points" value="{{ $pkg->pv_points }}" class="w-full px-2.5 py-1.5 bg-slate-50 dark:bg-slate-800 border border-slate-200 dark:border-slate-700 rounded-lg font-bold text-slate-900 dark:text-white focus:outline-none focus:ring-1 focus:ring-sky-600">
                            </div>
                        </div>

                        <div class="grid grid-cols-2 gap-2">
                            <div>
                                <label class="text-[10px] text-slate-500 dark:text-slate-400 font-bold">Direct Referral (₱)</label>
                                <input type="number" step="0.01" name="direct_referral_bonus" value="{{ $pkg->direct_referral_bonus }}" class="w-full px-2.5 py-1.5 bg-slate-50 dark:bg-slate-800 border border-slate-200 dark:border-slate-700 rounded-lg font-semibold text-slate-900 dark:text-white focus:outline-none focus:ring-1 focus:ring-sky-600">
                            </div>
                            <div>
                                <label class="text-[10px] text-slate-500 dark:text-slate-400 font-bold">Pairing Bonus (₱)</label>
                                <input type="number" step="0.01" name="pairing_bonus" value="{{ $pkg->pairing_bonus }}" class="w-full px-2.5 py-1.5 bg-slate-50 dark:bg-slate-800 border border-slate-200 dark:border-slate-700 rounded-lg font-semibold text-slate-900 dark:text-white focus:outline-none focus:ring-1 focus:ring-sky-600">
                            </div>
                        </div>

                        <div class="grid grid-cols-2 gap-2">
                            <div>
                                <label class="text-[10px] text-slate-500 dark:text-slate-400 font-bold">Daily Pair Limit</label>
                                <input type="number" name="daily_pair_limit" value="{{ $pkg->daily_pair_limit }}" class="w-full px-2.5 py-1.5 bg-slate-50 dark:bg-slate-800 border border-slate-200 dark:border-slate-700 rounded-lg font-semibold text-slate-900 dark:text-white focus:outline-none focus:ring-1 focus:ring-sky-600">
                            </div>
                            <div>
                                <label class="text-[10px] text-slate-500 dark:text-slate-400 font-bold">Availability</label>
                                <select name="is_available" class="w-full px-2.5 py-1.5 bg-slate-50 dark:bg-slate-800 border border-slate-200 dark:border-slate-700 rounded-lg text-xs font-semibold text-slate-900 dark:text-white focus:outline-none focus:ring-1 focus:ring-sky-600">
                                    <option value="1" {{ $pkg->is_available ? 'selected' : '' }}>Available (Open)</option>
                                    <option value="0" {{ !$pkg->is_available ? 'selected' : '' }}>Unavailable (Locked)</option>
                                </select>
                            </div>
                        </div>

                        <button type="submit" class="w-full py-2 bg-slate-900 hover:bg-black dark:bg-sky-600 dark:hover:bg-sky-500 text-white rounded-xl text-xs font-bold transition shadow-xs flex items-center justify-center gap-1.5">
                            <i data-lucide="save" class="w-3.5 h-3.5"></i>
                            <span>Update Package</span>
                        </button>
                    </form>
                </div>
            @endforeach
        </div>
    </div>

    <!-- ADD PRODUCT MODAL -->
    <div x-show="showAddModal" 
         x-transition:enter="transition ease-out duration-200" 
         x-transition:enter-start="opacity-0" 
         x-transition:enter-end="opacity-100" 
         x-transition:leave="transition ease-in duration-150" 
         x-transition:leave-start="opacity-100" 
         x-transition:leave-end="opacity-0"
         class="fixed inset-0 z-50 overflow-y-auto bg-slate-900/60 backdrop-blur-xs flex items-center justify-center p-4">
        
        <div class="bg-white dark:bg-slate-900 rounded-3xl max-w-lg w-full p-6 shadow-2xl border border-slate-200 dark:border-slate-800 space-y-4" @click.outside="showAddModal = false">
            <div class="flex items-center justify-between pb-3 border-b border-slate-100 dark:border-slate-800">
                <div>
                    <h3 class="text-base font-bold text-slate-900 dark:text-white">Add New Wellness Product</h3>
                    <p class="text-[11px] text-slate-500 dark:text-slate-400">Create a new retail item in the {{ $appName }} catalog.</p>
                </div>
                <button @click="showAddModal = false" class="p-1 rounded-lg text-slate-400 hover:text-slate-600 dark:hover:text-white hover:bg-slate-100 dark:hover:bg-slate-800">
                    <i data-lucide="x" class="w-5 h-5"></i>
                </button>
            </div>

            <form method="POST" action="{{ route('admin.products.store') }}" enctype="multipart/form-data" class="space-y-3 text-xs">
                @csrf
                <div>
                    <label class="text-[10px] text-slate-500 dark:text-slate-400 font-bold">Product Name</label>
                    <input type="text" name="name" required class="w-full px-3 py-2 bg-slate-50 dark:bg-slate-800 border border-slate-200 dark:border-slate-700 rounded-xl font-bold text-slate-900 dark:text-white focus:outline-none focus:ring-1 focus:ring-sky-600" placeholder="e.g. Powerwell White Beauty">
                </div>

                <div class="grid grid-cols-2 gap-3">
                    <div>
                        <div class="flex items-center justify-between mb-0.5">
                            <label class="text-[10px] text-slate-500 dark:text-slate-400 font-bold">Category</label>
                            <button type="button" @click="showCategoryModal = true" class="text-[10px] font-bold text-sky-600 hover:underline inline-flex items-center gap-0.5">
                                <i data-lucide="plus" class="w-3 h-3"></i>
                                <span>New</span>
                            </button>
                        </div>
                        <select name="category" required class="w-full px-3 py-2 bg-slate-50 dark:bg-slate-800 border border-slate-200 dark:border-slate-700 rounded-xl font-semibold text-slate-900 dark:text-white focus:outline-none focus:ring-1 focus:ring-sky-600">
                            <option value="" disabled selected>-- Select Category --</option>
                            @foreach($categories as $cat)
                                <option value="{{ $cat->name }}">{{ $cat->name }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div>
                        <label class="text-[10px] text-slate-500 dark:text-slate-400 font-bold">Spec / Weight</label>
                        <input type="text" name="spec_weight" class="w-full px-3 py-2 bg-slate-50 dark:bg-slate-800 border border-slate-200 dark:border-slate-700 rounded-xl text-slate-900 dark:text-white focus:outline-none focus:ring-1 focus:ring-sky-600" placeholder="e.g. 60 Capsules">
                    </div>
                </div>

                <div class="grid grid-cols-2 gap-3">
                    <div>
                        <label class="text-[10px] text-slate-500 dark:text-slate-400 font-bold">Member Price (₱)</label>
                        <input type="number" step="0.01" name="member_price" required class="w-full px-3 py-2 bg-slate-50 dark:bg-slate-800 border border-slate-200 dark:border-slate-700 rounded-xl font-bold text-sky-700 dark:text-sky-400 focus:outline-none focus:ring-1 focus:ring-sky-600" placeholder="0.00">
                    </div>
                    <div>
                        <label class="text-[10px] text-slate-500 dark:text-slate-400 font-bold">Retail Price (₱)</label>
                        <input type="number" step="0.01" name="retail_price" required class="w-full px-3 py-2 bg-slate-50 dark:bg-slate-800 border border-slate-200 dark:border-slate-700 rounded-xl font-bold text-slate-700 dark:text-slate-200 focus:outline-none focus:ring-1 focus:ring-sky-600" placeholder="0.00">
                    </div>
                </div>

                <div class="grid grid-cols-2 gap-3">
                    <div>
                        <label class="text-[10px] text-slate-500 dark:text-slate-400 font-bold">PV Points</label>
                        <input type="number" name="pv_points" required class="w-full px-3 py-2 bg-slate-50 dark:bg-slate-800 border border-slate-200 dark:border-slate-700 rounded-xl font-bold text-slate-900 dark:text-white focus:outline-none focus:ring-1 focus:ring-sky-600" placeholder="5">
                    </div>
                    <div>
                        <label class="text-[10px] text-slate-500 dark:text-slate-400 font-bold">Initial Stock</label>
                        <input type="number" name="stock" required class="w-full px-3 py-2 bg-slate-50 dark:bg-slate-800 border border-slate-200 dark:border-slate-700 rounded-xl font-bold text-slate-900 dark:text-white focus:outline-none focus:ring-1 focus:ring-sky-600" placeholder="100">
                    </div>
                </div>

                <div>
                    <label class="text-[10px] text-slate-500 dark:text-slate-400 font-bold">Image URL or Preset Path</label>
                    <input type="text" name="image_url" class="w-full px-3 py-2 bg-slate-50 dark:bg-slate-800 border border-slate-200 dark:border-slate-700 rounded-xl font-mono text-[11px] text-slate-900 dark:text-white focus:outline-none focus:ring-1 focus:ring-sky-600" placeholder="/images/banners/banner-white-beauty.png">
                </div>

                <div>
                    <label class="text-[10px] text-slate-500 dark:text-slate-400 font-bold">Or Upload Image File</label>
                    <input type="file" name="image_file" accept="image/*" class="w-full text-xs file:mr-3 file:py-1.5 file:px-3 file:rounded-xl file:border-0 file:text-xs file:font-semibold file:bg-sky-50 dark:file:bg-sky-950/50 file:text-sky-700 dark:file:text-sky-400 hover:file:bg-sky-100 text-slate-600 dark:text-slate-400">
                </div>

                <div>
                    <label class="text-[10px] text-slate-500 dark:text-slate-400 font-bold">Description</label>
                    <textarea name="description" rows="2" class="w-full px-3 py-2 bg-slate-50 dark:bg-slate-800 border border-slate-200 dark:border-slate-700 rounded-xl text-slate-900 dark:text-white focus:outline-none focus:ring-1 focus:ring-sky-600" placeholder="Product details and benefits..."></textarea>
                </div>

                <div>
                    <label class="text-[10px] text-slate-500 dark:text-slate-400 font-bold">Status</label>
                    <select name="is_active" class="w-full px-3 py-2 bg-slate-50 dark:bg-slate-800 border border-slate-200 dark:border-slate-700 rounded-xl font-semibold text-slate-900 dark:text-white focus:outline-none focus:ring-1 focus:ring-sky-600">
                        <option value="1">Active</option>
                        <option value="0">Inactive</option>
                    </select>
                </div>

                <div class="pt-3 border-t border-slate-100 dark:border-slate-800 flex items-center justify-end gap-2">
                    <button type="button" @click="showAddModal = false" class="px-4 py-2 border border-slate-200 dark:border-slate-700 rounded-xl text-xs font-bold text-slate-600 dark:text-slate-300 hover:bg-slate-50 dark:hover:bg-slate-800">
                        Cancel
                    </button>
                    <button type="submit" class="px-5 py-2 bg-sky-700 hover:bg-sky-800 text-white rounded-xl text-xs font-bold shadow-xs">
                        Create Product
                    </button>
                </div>
            </form>
        </div>
    </div>

    <!-- MANAGE CATEGORIES MODAL -->
    <div x-show="showCategoryModal" 
         x-cloak
         class="fixed inset-0 z-50 flex items-center justify-center p-4 bg-slate-950/70 backdrop-blur-xs overflow-y-auto"
         @keydown.escape.window="showCategoryModal = false">
        
        <div class="bg-white dark:bg-slate-900 rounded-2xl max-w-2xl w-full p-6 border border-slate-200 dark:border-slate-800 shadow-2xl relative space-y-6 my-8">
            <div class="flex items-center justify-between pb-3 border-b border-slate-100 dark:border-slate-800">
                <div class="flex items-center gap-2.5">
                    <div class="w-9 h-9 rounded-xl bg-sky-50 dark:bg-sky-950/50 text-sky-600 dark:text-sky-400 flex items-center justify-center font-bold">
                        <i data-lucide="tags" class="w-5 h-5"></i>
                    </div>
                    <div>
                        <h2 class="text-base font-bold text-slate-900 dark:text-white">Product Categories Management</h2>
                        <p class="text-[11px] text-slate-500 dark:text-slate-400">Add, edit, or remove dynamic product categories in the catalog.</p>
                    </div>
                </div>
                <button type="button" @click="showCategoryModal = false" class="text-slate-400 hover:text-slate-600 dark:hover:text-slate-200 p-1 rounded-lg">
                    <i data-lucide="x" class="w-5 h-5"></i>
                </button>
            </div>

            <!-- Form: Add New Category -->
            <div class="p-4 rounded-xl bg-slate-50 dark:bg-slate-850 border border-slate-200 dark:border-slate-800">
                <h3 class="text-xs font-bold text-slate-900 dark:text-white mb-2 flex items-center gap-1.5">
                    <i data-lucide="plus-circle" class="w-3.5 h-3.5 text-sky-600"></i>
                    <span>Add New Category</span>
                </h3>
                <form method="POST" action="{{ route('admin.categories.store') }}" class="grid grid-cols-1 sm:grid-cols-12 gap-3 items-end">
                    @csrf
                    <div class="sm:col-span-5">
                        <label class="text-[10px] text-slate-500 dark:text-slate-400 font-bold block mb-1">Category Name</label>
                        <input type="text" name="name" required placeholder="e.g. Perfumes, Juices, Skincare" class="w-full px-3 py-2 bg-white dark:bg-slate-900 border border-slate-300 dark:border-slate-700 rounded-xl text-xs font-semibold text-slate-900 dark:text-white focus:outline-none focus:ring-1 focus:ring-sky-600">
                    </div>
                    <div class="sm:col-span-5">
                        <label class="text-[10px] text-slate-500 dark:text-slate-400 font-bold block mb-1">Description (Optional)</label>
                        <input type="text" name="description" placeholder="Brief note about this category" class="w-full px-3 py-2 bg-white dark:bg-slate-900 border border-slate-300 dark:border-slate-700 rounded-xl text-xs text-slate-900 dark:text-white focus:outline-none focus:ring-1 focus:ring-sky-600">
                    </div>
                    <div class="sm:col-span-2">
                        <button type="submit" class="w-full py-2 px-3 bg-sky-600 hover:bg-sky-700 text-white rounded-xl text-xs font-bold transition shadow-xs flex items-center justify-center gap-1">
                            <i data-lucide="plus" class="w-3.5 h-3.5"></i>
                            <span>Save</span>
                        </button>
                    </div>
                </form>
            </div>

            <!-- List of Existing Categories -->
            <div>
                <h3 class="text-xs font-bold text-slate-900 dark:text-white mb-2 flex items-center justify-between">
                    <span>Existing Categories ({{ $categories->count() }})</span>
                </h3>
                <div class="border border-slate-200 dark:border-slate-800 rounded-xl overflow-hidden">
                    <table class="w-full text-left text-xs">
                        <thead class="bg-slate-50 dark:bg-slate-800 text-[10px] font-bold uppercase tracking-wider text-slate-500 dark:text-slate-400 border-b border-slate-200 dark:border-slate-800">
                            <tr>
                                <th class="px-4 py-2.5">Category Name</th>
                                <th class="px-4 py-2.5">Description</th>
                                <th class="px-4 py-2.5 text-center">Assigned Products</th>
                                <th class="px-4 py-2.5 text-right">Actions</th>
                            </tr>
                        </thead>
                        <tbody class="divide-y divide-slate-100 dark:divide-slate-800 text-slate-700 dark:text-slate-300">
                            @forelse($categories as $cat)
                                <tr class="hover:bg-slate-50/50 dark:hover:bg-slate-800/40">
                                    <td class="px-4 py-2.5 font-bold text-slate-900 dark:text-white flex items-center gap-2">
                                        <span class="w-2 h-2 rounded-full bg-sky-500"></span>
                                        <span>{{ $cat->name }}</span>
                                    </td>
                                    <td class="px-4 py-2.5 text-slate-500 dark:text-slate-400 text-[11px]">
                                        {{ $cat->description ?: '-' }}
                                    </td>
                                    <td class="px-4 py-2.5 text-center">
                                        <span class="px-2 py-0.5 rounded-full text-[10px] font-bold {{ ($cat->products_count ?? 0) > 0 ? 'bg-sky-50 dark:bg-sky-950/50 text-sky-700 dark:text-sky-300 border border-sky-200 dark:border-sky-800' : 'bg-slate-100 dark:bg-slate-800 text-slate-500' }}">
                                            {{ $cat->products_count ?? 0 }} items
                                        </span>
                                    </td>
                                    <td class="px-4 py-2.5 text-right">
                                        <div class="inline-flex items-center gap-2">
                                            <!-- Inline Edit Trigger -->
                                            <button type="button" @click="editingCategory = {{ json_encode($cat) }}" class="text-sky-600 hover:text-sky-800 dark:text-sky-400 text-xs font-semibold inline-flex items-center gap-1">
                                                <i data-lucide="edit-3" class="w-3.5 h-3.5"></i>
                                                <span>Edit</span>
                                            </button>

                                            <!-- Delete Form -->
                                            <form method="POST" action="{{ route('admin.categories.delete', $cat->id) }}" onsubmit="return confirm('Are you sure you want to delete category \'{{ $cat->name }}\'?');" class="inline">
                                                @csrf
                                                <button type="submit" 
                                                        class="text-rose-600 hover:text-rose-800 dark:text-rose-400 text-xs font-semibold inline-flex items-center gap-1"
                                                        {{ ($cat->products_count ?? 0) > 0 ? 'disabled title="Cannot delete: has assigned products" class="opacity-40 cursor-not-allowed"' : '' }}>
                                                    <i data-lucide="trash-2" class="w-3.5 h-3.5"></i>
                                                    <span>Delete</span>
                                                </button>
                                            </form>
                                        </div>
                                    </td>
                                </tr>
                            @empty
                                <tr>
                                    <td colspan="4" class="px-4 py-6 text-center text-slate-400">
                                        No categories defined yet.
                                    </td>
                                </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
            </div>

            <!-- Edit Category Sub-Modal -->
            <div x-show="editingCategory !== null" 
                 x-cloak 
                 class="p-4 rounded-xl bg-amber-50 dark:bg-amber-950/30 border border-amber-200 dark:border-amber-800">
                <div class="flex items-center justify-between mb-2">
                    <h4 class="text-xs font-bold text-amber-900 dark:text-amber-300 flex items-center gap-1.5">
                        <i data-lucide="edit-3" class="w-3.5 h-3.5 text-amber-600"></i>
                        <span>Edit Category Name</span>
                    </h4>
                    <button type="button" @click="editingCategory = null" class="text-xs text-amber-700 hover:underline">Cancel</button>
                </div>
                <form :action="'{{ url('/admin/categories') }}/' + (editingCategory ? editingCategory.id : '')" method="POST" class="grid grid-cols-1 sm:grid-cols-12 gap-3 items-end">
                    @csrf
                    <div class="sm:col-span-5">
                        <label class="text-[10px] text-amber-800 dark:text-amber-400 font-bold block mb-1">Rename Category</label>
                        <input type="text" name="name" x-model="editingCategory.name" required class="w-full px-3 py-2 bg-white dark:bg-slate-900 border border-amber-300 dark:border-amber-700 rounded-xl text-xs font-semibold text-slate-900 dark:text-white focus:outline-none focus:ring-1 focus:ring-amber-600">
                    </div>
                    <div class="sm:col-span-5">
                        <label class="text-[10px] text-amber-800 dark:text-amber-400 font-bold block mb-1">Description</label>
                        <input type="text" name="description" x-model="editingCategory.description" class="w-full px-3 py-2 bg-white dark:bg-slate-900 border border-amber-300 dark:border-amber-700 rounded-xl text-xs text-slate-900 dark:text-white focus:outline-none focus:ring-1 focus:ring-amber-600">
                    </div>
                    <div class="sm:col-span-2">
                        <button type="submit" class="w-full py-2 px-3 bg-amber-600 hover:bg-amber-700 text-white rounded-xl text-xs font-bold transition shadow-xs flex items-center justify-center gap-1">
                            <i data-lucide="check" class="w-3.5 h-3.5"></i>
                            <span>Update</span>
                        </button>
                    </div>
                </form>
            </div>

            <div class="pt-3 border-t border-slate-100 dark:border-slate-800 flex justify-end">
                <button type="button" @click="showCategoryModal = false" class="px-5 py-2 bg-slate-100 hover:bg-slate-200 dark:bg-slate-800 dark:hover:bg-slate-700 text-slate-700 dark:text-slate-200 rounded-xl text-xs font-bold transition">
                    Done
                </button>
            </div>
        </div>
    </div>
</div>
@endsection