<div x-data="{
    activeTab: 'logo',
    preview: {
        primary: @entangle('primary_color'),
        secondary: @entangle('secondary_color'),
        accent: @entangle('accent_color'),
        sidebarBg: @entangle('sidebar_bg'),
        sidebarText: @entangle('sidebar_text'),
        sidebarActive: @entangle('sidebar_active'),
    }
}">
    <!-- Header -->
    <div class="mb-4 sm:mb-6">
        <h1 class="text-xl sm:text-2xl font-bold text-gray-900">{{ __('الهوية البصرية') }}</h1>
        <p class="mt-1 text-sm text-gray-500">{{ __('تخصيص مظهر النظام والشعارات والألوان والخطوط') }}</p>
    </div>

    @if(session('success'))
        <div class="mb-4 p-4 bg-emerald-50 border border-emerald-200 text-emerald-700 rounded-xl text-sm flex items-center gap-2">
            <svg class="w-5 h-5 shrink-0" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"/></svg>
            {{ session('success') }}
        </div>
    @endif

    <!-- Tabs -->
    <div class="mb-6 border-b border-gray-200">
        <nav class="flex gap-1 -mb-px overflow-x-auto">
            @foreach([
                'logo' => 'الشعارات والصور',
                'colors' => 'الألوان',
                'typography' => 'الخطوط',
                'invoice' => 'الفواتير والمطبوعات',
                'display' => 'خيارات العرض',
            ] as $key => $label)
                <button type="button" @click="activeTab = '{{ $key }}'"
                    :class="activeTab === '{{ $key }}'
                        ? 'border-blue-600 text-blue-700 bg-blue-50/50'
                        : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'"
                    class="px-3 sm:px-5 py-2.5 sm:py-3 text-xs sm:text-sm font-medium whitespace-nowrap border-b-2 transition-all rounded-t-lg">
                    {{ __($label) }}
                </button>
            @endforeach
        </nav>
    </div>

    <form wire:submit="save">
        <!-- Logo & Images Tab -->
        <div x-show="activeTab === 'logo'" x-transition>
            <div class="grid grid-cols-1 sm:grid-cols-2 gap-4 sm:gap-6">
                <!-- Main Logo -->
                <div class="bg-white rounded-xl border border-gray-200 p-4 sm:p-6 space-y-4">
                    <div>
                        <h3 class="font-semibold text-gray-900">{{ __('الشعار الرئيسي') }}</h3>
                        <p class="text-xs text-gray-500 mt-1">{{ __('يظهر في الشريط الجانبي وصفحة تسجيل الدخول. PNG أو SVG، أقصى 2 ميجا') }}</p>
                    </div>
                    <div class="border-2 border-dashed border-gray-300 rounded-xl p-6 text-center hover:border-blue-400 transition-colors relative">
                        @if($logo)
                            <img src="{{ $logo->temporaryUrl() }}" class="mx-auto h-20 object-contain rounded">
                        @elseif($current_logo)
                            <img src="{{ Storage::disk('public')->url($current_logo) }}" class="mx-auto h-20 object-contain rounded">
                            <button type="button" wire:click="removeImage('logo')" class="absolute top-2 start-2 p-1.5 bg-red-100 text-red-600 rounded-lg hover:bg-red-200 transition-colors">
                                <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 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/></svg>
                            </button>
                        @else
                            <svg class="mx-auto h-12 w-12 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"/></svg>
                            <p class="mt-2 text-sm text-gray-500">{{ __('اسحب الملف هنا أو انقر للاختيار') }}</p>
                        @endif
                        <input type="file" wire:model="logo" accept="image/*" class="absolute inset-0 w-full h-full opacity-0 cursor-pointer">
                    </div>
                    @error('logo') <p class="text-sm text-red-600">{{ $message }}</p> @enderror
                    <div wire:loading wire:target="logo" class="text-sm text-blue-600 flex items-center gap-2">
                        <svg class="animate-spin h-4 w-4" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"/><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"/></svg>
                        {{ __('جارٍ رفع الشعار...') }}
                    </div>
                </div>

                <!-- Dark Logo -->
                <div class="bg-white rounded-xl border border-gray-200 p-4 sm:p-6 space-y-4">
                    <div>
                        <h3 class="font-semibold text-gray-900">{{ __('الشعار (الوضع الداكن)') }}</h3>
                        <p class="text-xs text-gray-500 mt-1">{{ __('نسخة فاتحة للخلفيات الداكنة. اختياري') }}</p>
                    </div>
                    <div class="border-2 border-dashed border-gray-300 rounded-xl p-6 text-center bg-slate-800 hover:border-blue-400 transition-colors relative">
                        @if($logo_dark)
                            <img src="{{ $logo_dark->temporaryUrl() }}" class="mx-auto h-20 object-contain rounded">
                        @elseif($current_logo_dark)
                            <img src="{{ Storage::disk('public')->url($current_logo_dark) }}" class="mx-auto h-20 object-contain rounded">
                            <button type="button" wire:click="removeImage('logo_dark')" class="absolute top-2 start-2 p-1.5 bg-red-100 text-red-600 rounded-lg hover:bg-red-200 transition-colors">
                                <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 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/></svg>
                            </button>
                        @else
                            <svg class="mx-auto h-12 w-12 text-gray-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"/></svg>
                            <p class="mt-2 text-sm text-gray-400">{{ __('شعار للخلفية الداكنة') }}</p>
                        @endif
                        <input type="file" wire:model="logo_dark" accept="image/*" class="absolute inset-0 w-full h-full opacity-0 cursor-pointer">
                    </div>
                    @error('logo_dark') <p class="text-sm text-red-600">{{ $message }}</p> @enderror
                </div>

                <!-- Favicon -->
                <div class="bg-white rounded-xl border border-gray-200 p-4 sm:p-6 space-y-4">
                    <div>
                        <h3 class="font-semibold text-gray-900">{{ __('الأيقونة المصغرة (Favicon)') }}</h3>
                        <p class="text-xs text-gray-500 mt-1">{{ __('تظهر في تبويب المتصفح. 32x32 أو 64x64 بكسل. أقصى 512 كيلو') }}</p>
                    </div>
                    <div class="border-2 border-dashed border-gray-300 rounded-xl p-6 text-center hover:border-blue-400 transition-colors relative">
                        @if($favicon)
                            <img src="{{ $favicon->temporaryUrl() }}" class="mx-auto h-12 w-12 object-contain">
                        @elseif($current_favicon)
                            <img src="{{ Storage::disk('public')->url($current_favicon) }}" class="mx-auto h-12 w-12 object-contain">
                            <button type="button" wire:click="removeImage('favicon')" class="absolute top-2 start-2 p-1.5 bg-red-100 text-red-600 rounded-lg hover:bg-red-200 transition-colors">
                                <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 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/></svg>
                            </button>
                        @else
                            <svg class="mx-auto h-10 w-10 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"/></svg>
                            <p class="mt-2 text-sm text-gray-500">{{ __('أيقونة المتصفح') }}</p>
                        @endif
                        <input type="file" wire:model="favicon" accept=".png,.ico,.svg" class="absolute inset-0 w-full h-full opacity-0 cursor-pointer">
                    </div>
                    @error('favicon') <p class="text-sm text-red-600">{{ $message }}</p> @enderror
                </div>

                <!-- Signature -->
                <div class="bg-white rounded-xl border border-gray-200 p-4 sm:p-6 space-y-4">
                    <div>
                        <h3 class="font-semibold text-gray-900">{{ __('التوقيع الرسمي') }}</h3>
                        <p class="text-xs text-gray-500 mt-1">{{ __('يظهر في الفواتير والشهادات. صورة شفافة PNG مفضلة') }}</p>
                    </div>
                    <div class="border-2 border-dashed border-gray-300 rounded-xl p-6 text-center hover:border-blue-400 transition-colors relative">
                        @if($signature)
                            <img src="{{ $signature->temporaryUrl() }}" class="mx-auto h-16 object-contain">
                        @elseif($current_signature)
                            <img src="{{ Storage::disk('public')->url($current_signature) }}" class="mx-auto h-16 object-contain">
                            <button type="button" wire:click="removeImage('signature')" class="absolute top-2 start-2 p-1.5 bg-red-100 text-red-600 rounded-lg hover:bg-red-200 transition-colors">
                                <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 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/></svg>
                            </button>
                        @else
                            <svg class="mx-auto h-10 w-10 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z"/></svg>
                            <p class="mt-2 text-sm text-gray-500">{{ __('صورة التوقيع') }}</p>
                        @endif
                        <input type="file" wire:model="signature" accept="image/*" class="absolute inset-0 w-full h-full opacity-0 cursor-pointer">
                    </div>
                    @error('signature') <p class="text-sm text-red-600">{{ $message }}</p> @enderror
                </div>

                <!-- Login Background -->
                <div class="bg-white rounded-xl border border-gray-200 p-4 sm:p-6 space-y-4">
                    <div>
                        <h3 class="font-semibold text-gray-900">{{ __('خلفية صفحة الدخول') }}</h3>
                        <p class="text-xs text-gray-500 mt-1">{{ __('صورة خلفية لشاشة تسجيل الدخول. أقصى 5 ميجا') }}</p>
                    </div>
                    <div class="border-2 border-dashed border-gray-300 rounded-xl p-6 text-center hover:border-blue-400 transition-colors relative">
                        @if($login_background)
                            <img src="{{ $login_background->temporaryUrl() }}" class="mx-auto h-24 object-cover rounded-lg w-full">
                        @elseif($current_login_background)
                            <img src="{{ Storage::disk('public')->url($current_login_background) }}" class="mx-auto h-24 object-cover rounded-lg w-full">
                            <button type="button" wire:click="removeImage('login_background')" class="absolute top-2 start-2 p-1.5 bg-red-100 text-red-600 rounded-lg hover:bg-red-200 transition-colors">
                                <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 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/></svg>
                            </button>
                        @else
                            <svg class="mx-auto h-10 w-10 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"/></svg>
                            <p class="mt-2 text-sm text-gray-500">{{ __('خلفية صفحة الدخول') }}</p>
                        @endif
                        <input type="file" wire:model="login_background" accept="image/*" class="absolute inset-0 w-full h-full opacity-0 cursor-pointer">
                    </div>
                    @error('login_background') <p class="text-sm text-red-600">{{ $message }}</p> @enderror
                </div>

                <!-- Invoice Header -->
                <div class="bg-white rounded-xl border border-gray-200 p-4 sm:p-6 space-y-4">
                    <div>
                        <h3 class="font-semibold text-gray-900">{{ __('رأس الفاتورة') }}</h3>
                        <p class="text-xs text-gray-500 mt-1">{{ __('صورة تظهر أعلى الفاتورة. يفضل بعرض 800 بكسل') }}</p>
                    </div>
                    <div class="border-2 border-dashed border-gray-300 rounded-xl p-6 text-center hover:border-blue-400 transition-colors relative">
                        @if($invoice_header)
                            <img src="{{ $invoice_header->temporaryUrl() }}" class="mx-auto h-16 object-contain w-full">
                        @elseif($current_invoice_header)
                            <img src="{{ Storage::disk('public')->url($current_invoice_header) }}" class="mx-auto h-16 object-contain w-full">
                            <button type="button" wire:click="removeImage('invoice_header')" class="absolute top-2 start-2 p-1.5 bg-red-100 text-red-600 rounded-lg hover:bg-red-200 transition-colors">
                                <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 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/></svg>
                            </button>
                        @else
                            <svg class="mx-auto h-10 w-10 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" 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>
                            <p class="mt-2 text-sm text-gray-500">{{ __('ترويسة الفاتورة') }}</p>
                        @endif
                        <input type="file" wire:model="invoice_header" accept="image/*" class="absolute inset-0 w-full h-full opacity-0 cursor-pointer">
                    </div>
                    @error('invoice_header') <p class="text-sm text-red-600">{{ $message }}</p> @enderror
                </div>
            </div>
        </div>

        <!-- Colors Tab -->
        <div x-show="activeTab === 'colors'" x-transition>
            <div class="grid grid-cols-1 lg:grid-cols-3 gap-4 sm:gap-6">
                <!-- Color Pickers -->
                <div class="lg:col-span-2 space-y-6">
                    <!-- Main Colors -->
                    <div class="bg-white rounded-xl border border-gray-200 p-4 sm:p-6">
                        <h3 class="font-semibold text-gray-900 mb-4">{{ __('الألوان الرئيسية') }}</h3>
                        <div class="grid grid-cols-2 sm:grid-cols-3 gap-4">
                            @foreach([
                                'primary_color' => 'اللون الأساسي',
                                'secondary_color' => 'اللون الثانوي',
                                'accent_color' => 'لون التمييز',
                            ] as $field => $label)
                                <div>
                                    <label class="block text-xs font-medium text-gray-600 mb-2">{{ __($label) }}</label>
                                    <div class="flex items-center gap-2">
                                        <input type="color" wire:model.live="{{ $field }}" class="h-10 w-14 rounded-lg border border-gray-300 cursor-pointer p-0.5">
                                        <input type="text" wire:model.live="{{ $field }}" dir="ltr" class="flex-1 text-xs font-mono border-gray-300 rounded-lg px-2 py-2">
                                    </div>
                                </div>
                            @endforeach
                        </div>
                    </div>

                    <!-- Sidebar Colors -->
                    <div class="bg-white rounded-xl border border-gray-200 p-4 sm:p-6">
                        <h3 class="font-semibold text-gray-900 mb-4">{{ __('ألوان الشريط الجانبي') }}</h3>
                        <div class="grid grid-cols-2 sm:grid-cols-3 gap-4">
                            @foreach([
                                'sidebar_bg' => 'خلفية الشريط',
                                'sidebar_text' => 'لون النص',
                                'sidebar_active' => 'العنصر النشط',
                            ] as $field => $label)
                                <div>
                                    <label class="block text-xs font-medium text-gray-600 mb-2">{{ __($label) }}</label>
                                    <div class="flex items-center gap-2">
                                        <input type="color" wire:model.live="{{ $field }}" class="h-10 w-14 rounded-lg border border-gray-300 cursor-pointer p-0.5">
                                        <input type="text" wire:model.live="{{ $field }}" dir="ltr" class="flex-1 text-xs font-mono border-gray-300 rounded-lg px-2 py-2">
                                    </div>
                                </div>
                            @endforeach
                        </div>
                    </div>

                    <!-- Status Colors -->
                    <div class="bg-white rounded-xl border border-gray-200 p-4 sm:p-6">
                        <h3 class="font-semibold text-gray-900 mb-4">{{ __('ألوان الحالات') }}</h3>
                        <div class="grid grid-cols-2 sm:grid-cols-3 gap-4">
                            @foreach([
                                'success_color' => 'نجاح',
                                'warning_color' => 'تحذير',
                                'danger_color' => 'خطأ',
                                'header_bg' => 'خلفية الرأس',
                            ] as $field => $label)
                                <div>
                                    <label class="block text-xs font-medium text-gray-600 mb-2">{{ __($label) }}</label>
                                    <div class="flex items-center gap-2">
                                        <input type="color" wire:model.live="{{ $field }}" class="h-10 w-14 rounded-lg border border-gray-300 cursor-pointer p-0.5">
                                        <input type="text" wire:model.live="{{ $field }}" dir="ltr" class="flex-1 text-xs font-mono border-gray-300 rounded-lg px-2 py-2">
                                    </div>
                                </div>
                            @endforeach
                        </div>
                    </div>
                </div>

                <!-- Live Preview -->
                <div class="lg:col-span-1">
                    <div class="sticky top-4 space-y-4">
                        <div class="bg-white rounded-xl border border-gray-200 p-4">
                            <h4 class="text-xs font-semibold text-gray-500 uppercase mb-3">{{ __('معاينة حية') }}</h4>
                            <!-- Mini sidebar preview -->
                            <div class="rounded-xl overflow-hidden border border-gray-200 shadow-sm" style="height: 280px;">
                                <div class="flex h-full" dir="rtl">
                                    <div class="w-16 flex flex-col items-center py-3 gap-2" :style="`background-color: ${preview.sidebarBg}`">
                                        <div class="w-8 h-8 rounded-lg flex items-center justify-center" :style="`background-color: ${preview.sidebarActive}`">
                                            <svg class="w-4 h-4" :style="`color: ${preview.sidebarText}`" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"/></svg>
                                        </div>
                                        <div class="w-8 h-8 rounded-lg flex items-center justify-center opacity-60" :style="`color: ${preview.sidebarText}`">
                                            <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="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0z"/></svg>
                                        </div>
                                        <div class="w-8 h-8 rounded-lg flex items-center justify-center opacity-60" :style="`color: ${preview.sidebarText}`">
                                            <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="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>
                                        </div>
                                    </div>
                                    <div class="flex-1 bg-gray-50 p-3">
                                        <div class="h-4 w-24 rounded" :style="`background-color: ${preview.primary}`"></div>
                                        <div class="mt-3 bg-white rounded-lg p-2 shadow-sm space-y-2">
                                            <div class="h-2.5 bg-gray-200 rounded w-full"></div>
                                            <div class="h-2.5 bg-gray-200 rounded w-3/4"></div>
                                            <div class="h-2.5 bg-gray-200 rounded w-1/2"></div>
                                        </div>
                                        <div class="mt-3 flex gap-2">
                                            <div class="h-6 px-3 rounded-md flex items-center" :style="`background-color: ${preview.primary}`">
                                                <span class="text-[8px] text-white">{{ __('حفظ') }}</span>
                                            </div>
                                            <div class="h-6 px-3 rounded-md flex items-center" :style="`background-color: ${preview.secondary}`">
                                                <span class="text-[8px] text-white">{{ __('إلغاء') }}</span>
                                            </div>
                                        </div>
                                        <div class="mt-3 flex gap-1.5">
                                            <div class="h-4 w-4 rounded-full" :style="`background-color: ${preview.accent}`"></div>
                                            <div class="h-2.5 bg-gray-200 rounded flex-1 mt-0.5"></div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Preset palettes -->
                        <div class="bg-white rounded-xl border border-gray-200 p-4">
                            <h4 class="text-xs font-semibold text-gray-500 uppercase mb-3">{{ __('لوحات جاهزة') }}</h4>
                            <div class="space-y-2">
                                <button type="button" @click="
                                    $wire.set('primary_color', '#2563eb');
                                    $wire.set('secondary_color', '#7c3aed');
                                    $wire.set('accent_color', '#059669');
                                    $wire.set('sidebar_bg', '#0f172a');
                                    $wire.set('sidebar_text', '#e2e8f0');
                                    $wire.set('sidebar_active', '#2563eb');
                                " class="w-full flex items-center gap-2 p-2 rounded-lg hover:bg-gray-50 border border-gray-100 transition-colors">
                                    <div class="flex gap-0.5">
                                        <div class="w-4 h-4 rounded-full bg-blue-600"></div>
                                        <div class="w-4 h-4 rounded-full bg-violet-600"></div>
                                        <div class="w-4 h-4 rounded-full bg-emerald-600"></div>
                                        <div class="w-4 h-4 rounded-full bg-slate-900"></div>
                                    </div>
                                    <span class="text-xs text-gray-600">{{ __('الافتراضي') }}</span>
                                </button>
                                <button type="button" @click="
                                    $wire.set('primary_color', '#dc2626');
                                    $wire.set('secondary_color', '#ea580c');
                                    $wire.set('accent_color', '#ca8a04');
                                    $wire.set('sidebar_bg', '#1c1917');
                                    $wire.set('sidebar_text', '#fafaf9');
                                    $wire.set('sidebar_active', '#dc2626');
                                " class="w-full flex items-center gap-2 p-2 rounded-lg hover:bg-gray-50 border border-gray-100 transition-colors">
                                    <div class="flex gap-0.5">
                                        <div class="w-4 h-4 rounded-full bg-red-600"></div>
                                        <div class="w-4 h-4 rounded-full bg-orange-600"></div>
                                        <div class="w-4 h-4 rounded-full bg-yellow-600"></div>
                                        <div class="w-4 h-4 rounded-full bg-stone-900"></div>
                                    </div>
                                    <span class="text-xs text-gray-600">{{ __('رياضي') }}</span>
                                </button>
                                <button type="button" @click="
                                    $wire.set('primary_color', '#0d9488');
                                    $wire.set('secondary_color', '#0891b2');
                                    $wire.set('accent_color', '#4f46e5');
                                    $wire.set('sidebar_bg', '#042f2e');
                                    $wire.set('sidebar_text', '#ccfbf1');
                                    $wire.set('sidebar_active', '#0d9488');
                                " class="w-full flex items-center gap-2 p-2 rounded-lg hover:bg-gray-50 border border-gray-100 transition-colors">
                                    <div class="flex gap-0.5">
                                        <div class="w-4 h-4 rounded-full bg-teal-600"></div>
                                        <div class="w-4 h-4 rounded-full bg-cyan-600"></div>
                                        <div class="w-4 h-4 rounded-full bg-indigo-600"></div>
                                        <div class="w-4 h-4 rounded-full bg-teal-950"></div>
                                    </div>
                                    <span class="text-xs text-gray-600">{{ __('أكوا') }}</span>
                                </button>
                                <button type="button" @click="
                                    $wire.set('primary_color', '#16a34a');
                                    $wire.set('secondary_color', '#65a30d');
                                    $wire.set('accent_color', '#0284c7');
                                    $wire.set('sidebar_bg', '#14532d');
                                    $wire.set('sidebar_text', '#dcfce7');
                                    $wire.set('sidebar_active', '#16a34a');
                                " class="w-full flex items-center gap-2 p-2 rounded-lg hover:bg-gray-50 border border-gray-100 transition-colors">
                                    <div class="flex gap-0.5">
                                        <div class="w-4 h-4 rounded-full bg-green-600"></div>
                                        <div class="w-4 h-4 rounded-full bg-lime-600"></div>
                                        <div class="w-4 h-4 rounded-full bg-sky-600"></div>
                                        <div class="w-4 h-4 rounded-full bg-green-900"></div>
                                    </div>
                                    <span class="text-xs text-gray-600">{{ __('طبيعي') }}</span>
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Typography Tab -->
        <div x-show="activeTab === 'typography'" x-transition>
            <div class="bg-white rounded-xl border border-gray-200 p-4 sm:p-6 max-w-2xl">
                <h3 class="font-semibold text-gray-900 mb-6">{{ __('إعدادات الخطوط') }}</h3>
                <div class="space-y-6">
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-2">{{ __('خط عربي') }}</label>
                        <select wire:model="font_family_ar" class="w-full border-gray-300 rounded-lg focus:ring-blue-500 focus:border-blue-500">
                            <option value="Cairo">Cairo</option>
                            <option value="Tajawal">Tajawal</option>
                            <option value="Noto Sans Arabic">Noto Sans Arabic</option>
                            <option value="IBM Plex Sans Arabic">IBM Plex Sans Arabic</option>
                            <option value="Almarai">Almarai</option>
                            <option value="Changa">Changa</option>
                            <option value="El Messiri">El Messiri</option>
                        </select>
                        <p class="mt-1 text-xs text-gray-500">{{ __('الخط المستخدم للنصوص العربية في النظام') }}</p>
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-2">{{ __('خط إنجليزي') }}</label>
                        <select wire:model="font_family_en" class="w-full border-gray-300 rounded-lg focus:ring-blue-500 focus:border-blue-500">
                            <option value="Inter">Inter</option>
                            <option value="Poppins">Poppins</option>
                            <option value="Roboto">Roboto</option>
                            <option value="Open Sans">Open Sans</option>
                            <option value="Nunito">Nunito</option>
                            <option value="DM Sans">DM Sans</option>
                        </select>
                        <p class="mt-1 text-xs text-gray-500">{{ __('الخط المستخدم للنصوص الإنجليزية والأرقام') }}</p>
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-2">{{ __('حجم الخط الأساسي') }}</label>
                        <div class="flex items-center gap-4">
                            <input type="range" wire:model.live="font_size_base" min="12" max="18" step="1" class="flex-1">
                            <span class="text-sm font-mono text-gray-600 w-12 text-center" dir="ltr">{{ $font_size_base }}px</span>
                        </div>
                        <p class="mt-1 text-xs text-gray-500">{{ __('الحجم الافتراضي للنصوص (12-18 بكسل)') }}</p>
                    </div>

                    <!-- Font preview -->
                    <div class="border border-gray-200 rounded-lg p-4 bg-gray-50 mt-4">
                        <p class="text-xs text-gray-400 mb-2">{{ __('معاينة') }}</p>
                        <p class="text-gray-900" style="font-size: {{ $font_size_base }}px">أكاديمية الكابتن الرياضية — El Captain Sports Academy</p>
                        <p class="text-gray-600 mt-1" style="font-size: {{ max(10, (int)$font_size_base - 2) }}px">هذا نص تجريبي لمعاينة حجم الخط المختار. The quick brown fox jumps over the lazy dog.</p>
                    </div>
                </div>
            </div>
        </div>

        <!-- Invoice/Print Tab -->
        <div x-show="activeTab === 'invoice'" x-transition>
            <div class="bg-white rounded-xl border border-gray-200 p-4 sm:p-6 max-w-3xl space-y-6">
                <h3 class="font-semibold text-gray-900">{{ __('نصوص الفواتير والإيصالات') }}</h3>

                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-2">{{ __('تذييل الفاتورة') }}</label>
                    <textarea wire:model="invoice_footer_text" rows="3" class="w-full border-gray-300 rounded-lg focus:ring-blue-500 focus:border-blue-500 text-sm"
                        placeholder="{{ __('مثال: شكراً لثقتكم بنا. للاستفسار: 01234567890') }}"></textarea>
                    <p class="mt-1 text-xs text-gray-500">{{ __('يظهر أسفل كل فاتورة مطبوعة') }}</p>
                </div>

                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-2">{{ __('تذييل الإيصال') }}</label>
                    <textarea wire:model="receipt_footer_text" rows="2" class="w-full border-gray-300 rounded-lg focus:ring-blue-500 focus:border-blue-500 text-sm"
                        placeholder="{{ __('مثال: هذا الإيصال دليل على الدفع. يرجى الاحتفاظ به') }}"></textarea>
                    <p class="mt-1 text-xs text-gray-500">{{ __('يظهر أسفل كل إيصال') }}</p>
                </div>

                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-2">{{ __('الشروط والأحكام') }}</label>
                    <textarea wire:model="terms_and_conditions" rows="5" class="w-full border-gray-300 rounded-lg focus:ring-blue-500 focus:border-blue-500 text-sm"
                        placeholder="{{ __('الشروط والأحكام التي تظهر في الفواتير والعقود...') }}"></textarea>
                    <p class="mt-1 text-xs text-gray-500">{{ __('تظهر في الفواتير التفصيلية وعقود الاشتراك') }}</p>
                </div>
            </div>
        </div>

        <!-- Display Options Tab -->
        <div x-show="activeTab === 'display'" x-transition>
            <div class="bg-white rounded-xl border border-gray-200 p-4 sm:p-6 max-w-2xl">
                <h3 class="font-semibold text-gray-900 mb-6">{{ __('خيارات العرض') }}</h3>
                <div class="space-y-5">
                    @foreach([
                        'show_logo_in_sidebar' => ['إظهار الشعار في الشريط الجانبي', 'يعرض شعار الأكاديمية أعلى القائمة الجانبية'],
                        'show_logo_in_invoice' => ['إظهار الشعار في الفواتير', 'يطبع شعار الأكاديمية في رأس الفاتورة'],
                        'show_signature_in_invoice' => ['إظهار التوقيع في الفواتير', 'يطبع التوقيع الرسمي أسفل الفاتورة'],
                        'compact_sidebar' => ['شريط جانبي مضغوط', 'يعرض الشريط الجانبي بحجم أصغر (أيقونات فقط)'],
                    ] as $field => [$label, $desc])
                        <label class="flex items-start gap-4 cursor-pointer group">
                            <div class="relative mt-0.5" dir="ltr">
                                <input type="checkbox" wire:model="{{ $field }}" class="sr-only peer">
                                <div class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-100 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-blue-600"></div>
                            </div>
                            <div>
                                <span class="text-sm font-medium text-gray-900 group-hover:text-blue-700 transition-colors">{{ __($label) }}</span>
                                <p class="text-xs text-gray-500 mt-0.5">{{ __($desc) }}</p>
                            </div>
                        </label>
                    @endforeach
                </div>
            </div>
        </div>

        <!-- Save Button (always visible) -->
        <div class="mt-6 sm:mt-8 flex flex-col-reverse sm:flex-row sm:items-center gap-3 sm:gap-4 border-t border-gray-200 pt-4 sm:pt-6">
            <button type="submit" wire:loading.attr="disabled" wire:target="save"
                class="w-full sm:w-auto px-6 sm:px-8 py-2.5 sm:py-3 bg-blue-600 text-white font-semibold rounded-xl hover:bg-blue-700 disabled:bg-blue-400 transition-all shadow-sm hover:shadow-md">
                <span wire:loading.remove wire:target="save">{{ __('حفظ التغييرات') }}</span>
                <span wire:loading wire:target="save" class="flex items-center gap-2">
                    <svg class="animate-spin h-4 w-4" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"/><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"/></svg>
                    {{ __('جارٍ الحفظ...') }}
                </span>
            </button>
            <p class="text-xs text-gray-500">{{ __('التغييرات تطبق فوراً على جميع صفحات النظام') }}</p>
        </div>
    </form>
</div>
