<div>
    <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-3 mb-4 sm:mb-6">
        <h1 class="text-xl sm:text-2xl font-bold text-gray-800">{{ $editing ? __('تعديل المنتج') : __('إضافة منتج جديد') }}</h1>
        <a href="{{ route('inventory.products') }}" wire:navigate class="text-sm text-gray-500 hover:text-gray-700">{{ __('← العودة') }}</a>
    </div>

    {{-- Flash Messages --}}
    @if(session('error'))
        <div class="mb-4 p-4 bg-red-50 border border-red-200 text-red-700 rounded-lg text-sm">
            {{ session('error') }}
        </div>
    @endif

    <form wire:submit="save" class="space-y-6">
        <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-4 sm:p-6">
            <h2 class="text-base sm:text-lg font-semibold text-gray-700 mb-4">{{ __('البيانات الأساسية') }}</h2>
            <div class="grid grid-cols-1 sm:grid-cols-2 gap-3 sm:gap-4">
                {{-- Name AR --}}
                <div>
                    <label for="name_ar" class="block text-sm font-medium text-gray-700 mb-1">{{ __('اسم المنتج بالعربية') }} *</label>
                    <input type="text" id="name_ar" wire:model="name_ar"
                           class="w-full text-sm px-4 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 @error('name_ar') border-red-500 @enderror">
                    @error('name_ar') <p class="mt-1 text-sm text-red-600">{{ $message }}</p> @enderror
                </div>

                {{-- Name EN --}}
                <div>
                    <label for="name" class="block text-sm font-medium text-gray-700 mb-1">{{ __('اسم المنتج بالإنجليزية') }}</label>
                    <input type="text" id="name" wire:model="name" dir="ltr"
                           class="w-full text-sm px-4 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 @error('name') border-red-500 @enderror">
                    @error('name') <p class="mt-1 text-sm text-red-600">{{ $message }}</p> @enderror
                </div>

                {{-- SKU --}}
                <div>
                    <label for="sku" class="block text-sm font-medium text-gray-700 mb-1">{{ __('رمز المنتج (SKU)') }} *</label>
                    <input type="text" id="sku" wire:model="sku" dir="ltr"
                           class="w-full text-sm px-4 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 @error('sku') border-red-500 @enderror">
                    @error('sku') <p class="mt-1 text-sm text-red-600">{{ $message }}</p> @enderror
                </div>

                {{-- Barcode --}}
                <div>
                    <label for="barcode" class="block text-sm font-medium text-gray-700 mb-1">{{ __('الباركود') }}</label>
                    <input type="text" id="barcode" wire:model="barcode" dir="ltr"
                           class="w-full text-sm px-4 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 @error('barcode') border-red-500 @enderror">
                    @error('barcode') <p class="mt-1 text-sm text-red-600">{{ $message }}</p> @enderror
                </div>

                {{-- Category --}}
                <div>
                    <label for="category_id" class="block text-sm font-medium text-gray-700 mb-1">{{ __('التصنيف') }}</label>
                    <select id="category_id" wire:model="category_id"
                            class="w-full text-sm px-4 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 @error('category_id') border-red-500 @enderror">
                        <option value="">{{ __('-- اختر التصنيف --') }}</option>
                        @foreach($categories as $category)
                        <option value="{{ $category->id }}">{{ $category->name_ar }}</option>
                        @endforeach
                    </select>
                    @error('category_id') <p class="mt-1 text-sm text-red-600">{{ $message }}</p> @enderror
                </div>

                {{-- Type --}}
                <div>
                    <label for="type" class="block text-sm font-medium text-gray-700 mb-1">{{ __('نوع المنتج') }} *</label>
                    <select id="type" wire:model="type"
                            class="w-full text-sm px-4 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 @error('type') border-red-500 @enderror">
                        @foreach($typeOptions as $value => $label)
                        <option value="{{ $value }}">{{ __($label) }}</option>
                        @endforeach
                    </select>
                    @error('type') <p class="mt-1 text-sm text-red-600">{{ $message }}</p> @enderror
                </div>
            </div>
        </div>

        {{-- Pricing Section --}}
        <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-4 sm:p-6">
            <h2 class="text-base sm:text-lg font-semibold text-gray-700 mb-4">{{ __('التسعير') }}</h2>
            <div class="grid grid-cols-2 sm:grid-cols-3 gap-3 sm:gap-4">
                {{-- Selling Price --}}
                <div>
                    <label for="selling_price" class="block text-sm font-medium text-gray-700 mb-1">{{ __('سعر البيع (ج.م)') }} *</label>
                    <input type="number" id="selling_price" wire:model="selling_price" step="0.01" min="0" dir="ltr"
                           class="w-full text-sm px-4 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 @error('selling_price') border-red-500 @enderror">
                    @error('selling_price') <p class="mt-1 text-sm text-red-600">{{ $message }}</p> @enderror
                </div>

                {{-- Cost Price --}}
                <div>
                    <label for="cost_price" class="block text-sm font-medium text-gray-700 mb-1">{{ __('سعر التكلفة (ج.م)') }}</label>
                    <input type="number" id="cost_price" wire:model="cost_price" step="0.01" min="0" dir="ltr"
                           class="w-full text-sm px-4 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 @error('cost_price') border-red-500 @enderror">
                    @error('cost_price') <p class="mt-1 text-sm text-red-600">{{ $message }}</p> @enderror
                </div>

                {{-- Tax Rate --}}
                <div>
                    <label for="tax_rate" class="block text-sm font-medium text-gray-700 mb-1">{{ __('نسبة الضريبة (%)') }}</label>
                    <input type="number" id="tax_rate" wire:model="tax_rate" step="1" min="0" max="100" dir="ltr"
                           class="w-full text-sm px-4 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 @error('tax_rate') border-red-500 @enderror">
                    @error('tax_rate') <p class="mt-1 text-sm text-red-600">{{ $message }}</p> @enderror
                </div>
            </div>
        </div>

        {{-- Inventory Section --}}
        <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-4 sm:p-6">
            <h2 class="text-base sm:text-lg font-semibold text-gray-700 mb-4">{{ __('إعدادات المخزون') }}</h2>
            <div class="grid grid-cols-2 sm:grid-cols-3 gap-3 sm:gap-4">
                {{-- Track Inventory --}}
                <div class="col-span-2 sm:col-span-3">
                    <label class="min-h-[44px] flex items-center gap-2 cursor-pointer">
                        <input type="checkbox" wire:model.live="track_inventory"
                               class="w-4 h-4 rounded border-gray-300 text-blue-600 focus:ring-blue-500">
                        <span class="text-sm text-gray-700">{{ __('تتبع المخزون') }}</span>
                    </label>
                </div>

                @if($track_inventory)
                {{-- Min Stock Level --}}
                <div>
                    <label for="min_stock_level" class="block text-sm font-medium text-gray-700 mb-1">{{ __('الحد الأدنى للمخزون') }}</label>
                    <input type="number" id="min_stock_level" wire:model="min_stock_level" min="0" dir="ltr"
                           class="w-full text-sm px-4 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 @error('min_stock_level') border-red-500 @enderror">
                    @error('min_stock_level') <p class="mt-1 text-sm text-red-600">{{ $message }}</p> @enderror
                </div>

                {{-- Max Stock Level --}}
                <div>
                    <label for="max_stock_level" class="block text-sm font-medium text-gray-700 mb-1">{{ __('الحد الأقصى للمخزون') }}</label>
                    <input type="number" id="max_stock_level" wire:model="max_stock_level" min="0" dir="ltr"
                           class="w-full text-sm px-4 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 @error('max_stock_level') border-red-500 @enderror">
                    @error('max_stock_level') <p class="mt-1 text-sm text-red-600">{{ $message }}</p> @enderror
                </div>
                @endif
            </div>
        </div>

        {{-- Description --}}
        <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-4 sm:p-6">
            <div>
                <label for="description_ar" class="block text-sm font-medium text-gray-700 mb-1">{{ __('الوصف') }}</label>
                <textarea id="description_ar" wire:model="description_ar" rows="3"
                          class="w-full text-sm px-4 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 @error('description_ar') border-red-500 @enderror"></textarea>
                @error('description_ar') <p class="mt-1 text-sm text-red-600">{{ $message }}</p> @enderror
            </div>

            {{-- Is Active --}}
            <div class="mt-4">
                <label class="min-h-[44px] flex items-center gap-2 cursor-pointer">
                    <input type="checkbox" wire:model="is_active"
                           class="w-4 h-4 rounded border-gray-300 text-blue-600 focus:ring-blue-500">
                    <span class="text-sm text-gray-700">{{ __('نشط') }}</span>
                </label>
            </div>

            {{-- Is Essential --}}
            <div class="mt-2 p-3 bg-amber-50 border border-amber-200 rounded-lg">
                <label class="flex items-start gap-3 cursor-pointer">
                    <input type="checkbox" wire:model="is_essential"
                           class="mt-0.5 w-4 h-4 rounded border-amber-400 text-amber-600 focus:ring-amber-500">
                    <div>
                        <span class="text-sm font-medium text-amber-800">{{ __('منتج أساسي') }}</span>
                        <p class="text-xs text-amber-600 mt-0.5">{{ __('يظهر كزر سريع في معالج تسجيل اللاعبين بدون حاجة للبحث') }}</p>
                    </div>
                </label>
            </div>
        </div>

        {{-- Annual Billing Section --}}
        <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-4 sm:p-6" x-data>
            <div class="flex items-center justify-between mb-4">
                <h2 class="text-base sm:text-lg font-semibold text-gray-700">{{ __('الفوترة السنوية والأقساط') }}</h2>
                <span class="text-xs text-gray-400">{{ __('للخدمات السنوية كالتأمين والزي وما شابه') }}</span>
            </div>

            {{-- Billing Cycle Toggle --}}
            <div class="flex gap-3 mb-4">
                <label class="flex items-center gap-2 cursor-pointer">
                    <input type="radio" wire:model.live="billing_cycle" value="one_time" class="text-blue-600">
                    <span class="text-sm font-medium text-gray-700">{{ __('دفعة واحدة') }}</span>
                </label>
                <label class="flex items-center gap-2 cursor-pointer">
                    <input type="radio" wire:model.live="billing_cycle" value="annual" class="text-purple-600">
                    <span class="text-sm font-medium text-purple-700">{{ __('سنوي (مع دعم الأقساط)') }}</span>
                </label>
            </div>

            @if($billing_cycle === 'annual')
            {{-- Dual pricing --}}
            <div class="p-4 bg-purple-50 border border-purple-200 rounded-xl mb-6">
                <h3 class="text-sm font-semibold text-purple-800 mb-3">{{ __('الأسعار حسب نوع العضوية') }}</h3>
                <div class="grid grid-cols-1 sm:grid-cols-3 gap-3">
                    <div>
                        <label class="block text-xs font-medium text-gray-600 mb-1">{{ __('السعر الأساسي (ج.م)') }} *</label>
                        <input type="number" wire:model="selling_price" step="0.01" min="0" dir="ltr"
                               class="w-full text-sm px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 @error('selling_price') border-red-500 @enderror"
                               placeholder="{{ __('افتراضي') }}">
                        <p class="text-xs text-gray-400 mt-0.5">{{ __('يُستخدم إذا لم يحدد سعر خاص') }}</p>
                    </div>
                    <div>
                        <label class="block text-xs font-medium text-green-700 mb-1">{{ __('سعر الأعضاء (ج.م)') }}</label>
                        <input type="number" wire:model="member_price" step="0.01" min="0" dir="ltr"
                               class="w-full text-sm px-3 py-2 border border-green-300 rounded-lg focus:ring-2 focus:ring-green-500 @error('member_price') border-red-500 @enderror"
                               placeholder="{{ __('اتركه فارغاً للسعر الأساسي') }}">
                        @error('member_price') <p class="mt-1 text-xs text-red-600">{{ $message }}</p> @enderror
                    </div>
                    <div>
                        <label class="block text-xs font-medium text-orange-700 mb-1">{{ __('سعر غير الأعضاء (ج.م)') }}</label>
                        <input type="number" wire:model="non_member_price" step="0.01" min="0" dir="ltr"
                               class="w-full text-sm px-3 py-2 border border-orange-300 rounded-lg focus:ring-2 focus:ring-orange-500 @error('non_member_price') border-red-500 @enderror"
                               placeholder="{{ __('اتركه فارغاً للسعر الأساسي') }}">
                        @error('non_member_price') <p class="mt-1 text-xs text-red-600">{{ $message }}</p> @enderror
                    </div>
                </div>
            </div>

            {{-- Installment Plan Builder --}}
            <div>
                <div class="flex items-center justify-between mb-3">
                    <h3 class="text-sm font-semibold text-gray-700">{{ __('خطط التقسيط') }}</h3>
                    <button type="button" wire:click="addPlanRow"
                            class="inline-flex items-center gap-1.5 px-3 py-1.5 bg-purple-600 text-white text-xs font-medium rounded-lg hover:bg-purple-700">
                        <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"/></svg>
                        {{ __('إضافة خطة') }}
                    </button>
                </div>

                @if(count($planRows) === 0)
                <div class="py-6 text-center border-2 border-dashed border-gray-200 rounded-xl">
                    <p class="text-sm text-gray-400">{{ __('لا توجد خطط تقسيط — اضغط "إضافة خطة" لإنشاء واحدة') }}</p>
                </div>
                @else
                <div class="space-y-3">
                    @foreach($planRows as $i => $row)
                    <div x-data="{ showSlots: false }" class="p-4 bg-gray-50 border border-gray-200 rounded-xl">
                        <div class="flex items-center justify-between mb-3">
                            <span class="text-xs font-semibold text-gray-500 uppercase">{{ __('خطة') }} {{ $i + 1 }}</span>
                            <button type="button" wire:click="removePlanRow({{ $i }})"
                                    class="text-red-500 hover:text-red-700 text-xs">{{ __('حذف') }}</button>
                        </div>

                        {{-- Main plan config --}}
                        <div class="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-5 gap-3">
                            {{-- Label --}}
                            <div class="col-span-2 sm:col-span-3 lg:col-span-2">
                                <label class="block text-xs font-medium text-gray-600 mb-1">{{ __('اسم الخطة') }} *</label>
                                <input type="text" wire:model="planRows.{{ $i }}.label_ar"
                                       class="w-full text-sm px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500"
                                       placeholder="{{ __('مثال: 3 أقساط شهرية للأعضاء') }}">
                                @error("planRows.{$i}.label_ar") <p class="mt-0.5 text-xs text-red-600">{{ $message }}</p> @enderror
                            </div>
                            {{-- Tier --}}
                            <div>
                                <label class="block text-xs font-medium text-gray-600 mb-1">{{ __('للعضوية') }}</label>
                                <select wire:model="planRows.{{ $i }}.tier"
                                        class="w-full text-sm px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500">
                                    <option value="any">{{ __('الجميع') }}</option>
                                    <option value="member">{{ __('أعضاء فقط') }}</option>
                                    <option value="non_member">{{ __('غير أعضاء') }}</option>
                                </select>
                            </div>
                            {{-- Installments count --}}
                            <div>
                                <label class="block text-xs font-medium text-gray-600 mb-1">{{ __('عدد الأقساط') }}</label>
                                <input type="number"
                                       wire:model.live="planRows.{{ $i }}.installments"
                                       wire:change="syncInstallmentSlots({{ $i }})"
                                       min="2" max="24" dir="ltr"
                                       class="w-full text-sm px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500">
                                @error("planRows.{$i}.installments") <p class="mt-0.5 text-xs text-red-600">{{ $message }}</p> @enderror
                            </div>
                            {{-- Frequency --}}
                            <div>
                                <label class="block text-xs font-medium text-gray-600 mb-1">{{ __('الدورية') }}</label>
                                <select wire:model="planRows.{{ $i }}.frequency"
                                        class="w-full text-sm px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500">
                                    <option value="monthly">{{ __('شهري') }}</option>
                                    <option value="quarterly">{{ __('ربع سنوي') }}</option>
                                    <option value="biweekly">{{ __('نصف شهري') }}</option>
                                    <option value="weekly">{{ __('أسبوعي') }}</option>
                                </select>
                            </div>
                            {{-- Down payment % — hidden when slots have explicit amounts --}}
                            <div>
                                <label class="block text-xs font-medium text-gray-600 mb-1">{{ __('المقدم (%)') }}</label>
                                <input type="number" wire:model="planRows.{{ $i }}.down_payment_pct" min="0" max="100" dir="ltr"
                                       class="w-full text-sm px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500"
                                       placeholder="0">
                                <p class="text-xs text-gray-400 mt-0.5">{{ __('0 = موزع بالتساوي') }}</p>
                            </div>
                        </div>

                        {{-- Per-slot custom amounts (optional) --}}
                        <div class="mt-3 border-t border-gray-200 pt-3">
                            <button type="button" @click="showSlots = !showSlots"
                                    class="flex items-center gap-1.5 text-xs font-medium text-purple-600 hover:text-purple-800">
                                <svg class="w-3.5 h-3.5 transition-transform" :class="showSlots ? 'rotate-90' : ''"
                                     fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/>
                                </svg>
                                <span x-text="showSlots ? '{{ __('إخفاء مبالغ الأقساط') }}' : '{{ __('تحديد مبلغ كل قسط (اختياري)') }}'"></span>
                            </button>

                            <div x-show="showSlots" x-transition class="mt-3">
                                <p class="text-xs text-gray-500 mb-2">
                                    {{ __('اتركها فارغة للحساب التلقائي. القسط الأول هو المقدم.') }}
                                </p>
                                <div class="flex flex-wrap gap-2">
                                    @php $slotCount = (int) ($row['installments'] ?? 3); @endphp
                                    @for($s = 0; $s < $slotCount; $s++)
                                    <div class="flex flex-col items-center gap-1">
                                        <label class="text-xs text-gray-500">
                                            {{ $s === 0 ? __('مقدم') : (__('قسط') . ' ' . $s) }}
                                        </label>
                                        <input type="number"
                                               wire:model="planRows.{{ $i }}.installment_amounts.{{ $s }}"
                                               min="0" step="0.01" dir="ltr"
                                               class="w-24 text-sm px-2 py-1.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 text-center"
                                               placeholder="{{ __('تلقائي') }}">
                                    </div>
                                    @endfor
                                </div>
                                <p class="text-xs text-gray-400 mt-2">
                                    {{ __('المبالغ بالجنيه المصري. الخانات الفارغة تُحسب تلقائياً من المبلغ المتبقي.') }}
                                </p>
                            </div>
                        </div>
                    </div>
                    @endforeach
                </div>
                @endif
            </div>
            @endif
        </div>

        {{-- Actions --}}
        <div class="flex flex-col-reverse sm:flex-row items-stretch sm:items-center justify-end gap-3">
            <a href="{{ route('inventory.products') }}" wire:navigate
               class="text-center px-4 sm:px-6 py-2.5 border border-gray-300 text-gray-700 rounded-lg hover:bg-gray-50 transition-colors">{{ __('إلغاء') }}</a>
            <button type="submit" wire:loading.attr="disabled" wire:target="save"
                    class="text-center px-4 sm:px-6 py-2.5 bg-blue-600 text-white font-medium rounded-lg hover:bg-blue-700 disabled:bg-blue-400 transition-colors">
                <span wire:loading.remove wire:target="save">{{ $editing ? __('حفظ التعديلات') : __('إنشاء المنتج') }}</span>
                <span wire:loading wire:target="save">{{ __('جارٍ الحفظ...') }}</span>
            </button>
        </div>
    </form>
</div>
