<div class="space-y-6">
    {{-- Page Header --}}
    <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-3 mb-4 sm:mb-6">
        <div>
            <h1 class="text-xl sm:text-2xl font-bold text-gray-900">{{ __('إعدادات الإيصالات والفواتير') }}</h1>
            <p class="text-sm text-gray-500 mt-1">{{ __('تحكم في شكل ومحتوى جميع المستندات المالية من مكان واحد') }}</p>
        </div>
        <div class="w-full sm:w-auto flex flex-col-reverse sm:flex-row items-stretch sm:items-center gap-2 sm:gap-3">
            <button wire:click="resetToDefaults"
                class="w-full sm:w-auto py-2.5 text-center px-4 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-lg hover:bg-gray-50">
                {{ __('استعادة الافتراضي') }}
            </button>
            <button wire:click="save" wire:loading.attr="disabled" wire:target="save"
                class="w-full sm:w-auto py-2.5 text-center px-6 text-sm font-medium text-white bg-blue-600 rounded-lg hover:bg-blue-700 disabled:opacity-50">
                <span wire:loading.remove wire:target="save">{{ __('حفظ الإعدادات') }}</span>
                <span wire:loading wire:target="save">{{ __('جارٍ الحفظ...') }}</span>
            </button>
        </div>
    </div>

    @if($saved)
    <div class="p-3 text-sm text-green-700 bg-green-50 border border-green-200 rounded-lg">
        {{ __('تم حفظ الإعدادات بنجاح') }}
    </div>
    @endif

    @if(session('success'))
    <div class="p-3 text-sm text-green-700 bg-green-50 border border-green-200 rounded-lg">
        {{ session('success') }}
    </div>
    @endif

    @error('branch')
    <div class="p-3 text-sm text-red-700 bg-red-50 border border-red-200 rounded-lg">{{ $message }}</div>
    @enderror

    {{-- Branch Selector --}}
    <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-4 sm:p-6">
        <label class="block text-sm font-medium text-gray-700 mb-2">{{ __('الفرع') }}</label>
        <select wire:model.live="selectedBranchId" class="w-full max-w-sm rounded-lg border-gray-300 focus:ring-blue-500 focus:border-blue-500">
            <option value="">{{ __('-- اختر الفرع --') }}</option>
            @foreach($branches as $branch)
                <option value="{{ $branch->id }}">{{ $branch->name_ar }}</option>
            @endforeach
        </select>
    </div>

    {{-- Document Type Tabs --}}
    <div class="bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden">
        <div class="border-b border-gray-200">
            <nav class="flex" aria-label="Tabs">
                <button wire:click="$set('activeTab', 'pos')"
                    class="flex-1 py-4 px-4 text-center text-sm font-medium border-b-2 transition-colors
                        {{ $activeTab === 'pos' ? 'border-blue-500 text-blue-600 bg-blue-50' : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300' }}">
                    <svg class="w-5 h-5 mx-auto mb-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 7h6m0 10v-3m-3 3h.01M9 17h.01M9 11h.01M12 11h.01M15 11h.01M4 19h16a2 2 0 002-2V7a2 2 0 00-2-2H4a2 2 0 00-2 2v10a2 2 0 002 2z"/>
                    </svg>
                    {{ __('إيصال الكاشير') }}
                </button>
                <button wire:click="$set('activeTab', 'invoice')"
                    class="flex-1 py-4 px-4 text-center text-sm font-medium border-b-2 transition-colors
                        {{ $activeTab === 'invoice' ? 'border-blue-500 text-blue-600 bg-blue-50' : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300' }}">
                    <svg class="w-5 h-5 mx-auto mb-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/>
                    </svg>
                    {{ __('الفاتورة') }}
                </button>
                <button wire:click="$set('activeTab', 'payment')"
                    class="flex-1 py-4 px-4 text-center text-sm font-medium border-b-2 transition-colors
                        {{ $activeTab === 'payment' ? 'border-blue-500 text-blue-600 bg-blue-50' : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300' }}">
                    <svg class="w-5 h-5 mx-auto mb-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 9V7a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2m2 4h10a2 2 0 002-2v-6a2 2 0 00-2-2H9a2 2 0 00-2 2v6a2 2 0 002 2zm7-5a2 2 0 11-4 0 2 2 0 014 0z"/>
                    </svg>
                    {{ __('إيصال الدفع') }}
                </button>
            </nav>
        </div>

        <div class="p-4 sm:p-6">
            @if(!$selectedBranchId)
            <div class="text-center py-10 text-gray-400">
                <svg class="w-12 h-12 mx-auto mb-3 text-gray-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/>
                </svg>
                <p class="text-sm">{{ __('اختر الفرع أولاً لعرض الإعدادات') }}</p>
            </div>
            @else

            {{-- =================== POS TAB =================== --}}
            @if($activeTab === 'pos')
            <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
                <div>
                    <h2 class="text-base font-semibold text-gray-900 mb-4">{{ __('ترتيب الأقسام') }}</h2>
                    <div class="space-y-2">
                        @foreach($posSections as $index => $section)
                        <div class="flex items-center gap-3 p-3 rounded-lg border {{ $section['enabled'] ? 'border-blue-200 bg-blue-50' : 'border-gray-200 bg-gray-50' }}">
                            <div class="flex flex-col gap-0.5">
                                <button wire:click="moveSectionUp({{ $index }})" @if($index === 0) disabled @endif
                                    class="text-gray-400 hover:text-gray-700 disabled:opacity-30 disabled:cursor-not-allowed">
                                    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 15l7-7 7 7"/></svg>
                                </button>
                                <button wire:click="moveSectionDown({{ $index }})" @if($index === count($posSections) - 1) disabled @endif
                                    class="text-gray-400 hover:text-gray-700 disabled:opacity-30 disabled:cursor-not-allowed">
                                    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/></svg>
                                </button>
                            </div>
                            <label class="flex items-center flex-1 gap-2 cursor-pointer">
                                <input type="checkbox" wire:click="toggleSection({{ $index }})" {{ $section['enabled'] ? 'checked' : '' }}
                                    class="rounded border-gray-300 text-blue-600 focus:ring-blue-500">
                                <span class="text-sm font-medium {{ $section['enabled'] ? 'text-gray-900' : 'text-gray-400' }}">{{ $section['label'] }}</span>
                            </label>
                        </div>
                        @endforeach
                    </div>
                </div>

                <div class="lg:col-span-2 space-y-6">
                    <div>
                        <h2 class="text-base font-semibold text-gray-900 mb-4">{{ __('الحقول المعروضة') }}</h2>
                        <div class="grid grid-cols-1 sm:grid-cols-2 gap-2">
                            @foreach($posFieldLabels as $key => $label)
                            <label class="flex items-center gap-3 p-3 rounded-lg border cursor-pointer transition-colors
                                {{ ($posFields[$key] ?? true) ? 'border-green-200 bg-green-50 hover:bg-green-100' : 'border-gray-200 bg-gray-50 hover:bg-gray-100' }}">
                                <input type="checkbox" wire:click="toggleField('{{ $key }}')" {{ ($posFields[$key] ?? true) ? 'checked' : '' }}
                                    class="rounded border-gray-300 text-green-600 focus:ring-green-500">
                                <span class="text-sm {{ ($posFields[$key] ?? true) ? 'text-gray-900' : 'text-gray-400' }}">{{ $label }}</span>
                            </label>
                            @endforeach
                        </div>
                    </div>

                    <div>
                        <h2 class="text-base font-semibold text-gray-900 mb-4">{{ __('إعدادات المظهر') }}</h2>
                        <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-1">{{ __('عرض الورق') }}</label>
                                <select wire:model="posSettings.paper_width" class="w-full rounded-lg border-gray-300 focus:ring-blue-500">
                                    <option value="58mm">58mm (حراري صغير)</option>
                                    <option value="80mm">80mm (حراري عادي)</option>
                                    <option value="110mm">110mm (عريض)</option>
                                </select>
                            </div>
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-1">{{ __('حجم الخط') }}</label>
                                <select wire:model="posSettings.font_size" class="w-full rounded-lg border-gray-300 focus:ring-blue-500">
                                    <option value="small">{{ __('صغير') }}</option>
                                    <option value="normal">{{ __('عادي') }}</option>
                                </select>
                            </div>
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-1">{{ __('ارتفاع الشعار') }}</label>
                                <select wire:model="posSettings.logo_height" class="w-full rounded-lg border-gray-300 focus:ring-blue-500">
                                    <option value="30px">30px</option>
                                    <option value="40px">40px</option>
                                    <option value="50px">50px</option>
                                    <option value="60px">60px</option>
                                </select>
                            </div>
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-1">{{ __('رمز العملة') }}</label>
                                <input type="text" wire:model="posSettings.currency_symbol" class="w-full rounded-lg border-gray-300 focus:ring-blue-500" placeholder="ج.م">
                            </div>
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-1">{{ __('نص التذييل') }}</label>
                                <input type="text" wire:model="posSettings.footer_text" class="w-full rounded-lg border-gray-300 focus:ring-blue-500" placeholder="شكراً لزيارتكم">
                            </div>
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-1">{{ __('سياسة الإرجاع') }}</label>
                                <input type="text" wire:model="posSettings.return_policy" class="w-full rounded-lg border-gray-300 focus:ring-blue-500">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            @endif

            {{-- =================== INVOICE TAB =================== --}}
            @if($activeTab === 'invoice')
            <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
                <div class="lg:col-span-2">
                    <h2 class="text-base font-semibold text-gray-900 mb-4">{{ __('الحقول المعروضة في الفاتورة') }}</h2>
                    <div class="grid grid-cols-1 sm:grid-cols-2 gap-2">
                        @foreach($invoiceFieldLabels as $key => $label)
                        <label class="flex items-center gap-3 p-3 rounded-lg border cursor-pointer transition-colors
                            {{ ($invoiceFields[$key] ?? true) ? 'border-green-200 bg-green-50 hover:bg-green-100' : 'border-gray-200 bg-gray-50 hover:bg-gray-100' }}">
                            <input type="checkbox" wire:click="toggleField('{{ $key }}')" {{ ($invoiceFields[$key] ?? true) ? 'checked' : '' }}
                                class="rounded border-gray-300 text-green-600 focus:ring-green-500">
                            <span class="text-sm {{ ($invoiceFields[$key] ?? true) ? 'text-gray-900' : 'text-gray-400' }}">{{ $label }}</span>
                        </label>
                        @endforeach
                    </div>
                </div>

                <div>
                    <h2 class="text-base font-semibold text-gray-900 mb-4">{{ __('إعدادات الفاتورة') }}</h2>
                    <div class="space-y-4">
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-1">{{ __('نص التذييل') }}</label>
                            <textarea wire:model="invoiceSettings.footer_text" rows="3"
                                class="w-full rounded-lg border-gray-300 focus:ring-blue-500 text-sm"
                                placeholder="{{ __('نص يظهر أسفل كل فاتورة') }}"></textarea>
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-1">{{ __('رمز العملة') }}</label>
                            <input type="text" wire:model="invoiceSettings.currency_symbol" class="w-full rounded-lg border-gray-300 focus:ring-blue-500" placeholder="ج.م">
                        </div>
                        <div class="p-3 bg-blue-50 border border-blue-200 rounded-lg text-xs text-blue-700">
                            {{ __('الشعار والألوان والخط تُحكم من صفحة الهوية البصرية') }}
                            <a href="{{ route('settings.branding') }}" wire:navigate class="underline font-medium">{{ __('اضغط هنا') }}</a>
                        </div>
                    </div>
                </div>
            </div>
            @endif

            {{-- =================== PAYMENT TAB =================== --}}
            @if($activeTab === 'payment')
            <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
                <div class="lg:col-span-2">
                    <h2 class="text-base font-semibold text-gray-900 mb-4">{{ __('الحقول المعروضة في إيصال الدفع') }}</h2>
                    <div class="grid grid-cols-1 sm:grid-cols-2 gap-2">
                        @foreach($paymentFieldLabels as $key => $label)
                        <label class="flex items-center gap-3 p-3 rounded-lg border cursor-pointer transition-colors
                            {{ ($paymentFields[$key] ?? true) ? 'border-green-200 bg-green-50 hover:bg-green-100' : 'border-gray-200 bg-gray-50 hover:bg-gray-100' }}">
                            <input type="checkbox" wire:click="toggleField('{{ $key }}')" {{ ($paymentFields[$key] ?? true) ? 'checked' : '' }}
                                class="rounded border-gray-300 text-green-600 focus:ring-green-500">
                            <span class="text-sm {{ ($paymentFields[$key] ?? true) ? 'text-gray-900' : 'text-gray-400' }}">{{ $label }}</span>
                        </label>
                        @endforeach
                    </div>
                </div>

                <div>
                    <h2 class="text-base font-semibold text-gray-900 mb-4">{{ __('إعدادات إيصال الدفع') }}</h2>
                    <div class="space-y-4">
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-1">{{ __('نص التذييل') }}</label>
                            <textarea wire:model="paymentSettings.footer_text" rows="3"
                                class="w-full rounded-lg border-gray-300 focus:ring-blue-500 text-sm"
                                placeholder="{{ __('نص يظهر أسفل كل إيصال') }}"></textarea>
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-1">{{ __('رمز العملة') }}</label>
                            <input type="text" wire:model="paymentSettings.currency_symbol" class="w-full rounded-lg border-gray-300 focus:ring-blue-500" placeholder="ج.م">
                        </div>
                    </div>
                </div>
            </div>
            @endif

            @endif {{-- end selectedBranchId --}}
        </div>
    </div>
</div>
