<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">
        <h1 class="text-xl sm:text-2xl font-bold text-gray-900">{{ __('إعدادات الإيصال') }}</h1>
        <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-4 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

    @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>

    @if($selectedBranchId)
    <div class="grid grid-cols-1 lg:grid-cols-3 gap-4 sm:gap-6">
        {{-- Sections Order --}}
        <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-900 mb-4">{{ __('ترتيب الأقسام') }}</h2>
            <div class="space-y-2">
                @foreach($sections 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($sections) - 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 cursor-pointer">
                        <input type="checkbox" wire:click="toggleSection({{ $index }})" {{ $section['enabled'] ? 'checked' : '' }}
                            class="rounded border-gray-300 text-blue-600 focus:ring-blue-500 ms-2">
                        <span class="text-sm font-medium {{ $section['enabled'] ? 'text-gray-900' : 'text-gray-400' }}">
                            {{ $section['label'] }}
                        </span>
                    </label>
                </div>
                @endforeach
            </div>
        </div>

        {{-- Field Toggles --}}
        <div class="lg:col-span-2 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-900 mb-4">{{ __('الحقول المعروضة') }}</h2>
            <div class="grid grid-cols-1 sm:grid-cols-2 gap-3">
                @foreach($fieldLabels as $key => $label)
                <label class="flex items-center gap-3 p-3 rounded-lg border cursor-pointer transition-colors
                    {{ ($visibleFields[$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 }}')" {{ ($visibleFields[$key] ?? true) ? 'checked' : '' }}
                        class="rounded border-gray-300 text-green-600 focus:ring-green-500">
                    <span class="text-sm {{ ($visibleFields[$key] ?? true) ? 'text-gray-900' : 'text-gray-400' }}">{{ $label }}</span>
                </label>
                @endforeach
            </div>
        </div>
    </div>

    {{-- Receipt Settings --}}
    <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-900 mb-4">{{ __('إعدادات المظهر') }}</h2>
        <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-3 sm:gap-4 lg:gap-6">
            <div>
                <label class="block text-sm font-medium text-gray-700 mb-1">{{ __('عرض الورق') }}</label>
                <select wire:model="settings.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="settings.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="settings.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="settings.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="settings.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="settings.return_policy" class="w-full rounded-lg border-gray-300 focus:ring-blue-500" placeholder="لا يمكن استرجاع المبلغ بعد 7 أيام">
            </div>
        </div>
    </div>
    @endif
</div>
