@extends('layouts.dashboard')

@section('title', trans('dashboard.nav_settings'))
@section('header_title', trans('dashboard.nav_settings'))

@section('content')
@php
    $isAr = app()->getLocale() === 'ar';
    $isSandbox = (bool) ($tenant->is_sandbox ?? true);
    $invoicePref = $tenant->settings['invoice_type_preference'] ?? 'both';
    $taxTreatment = $tenant->settings['tax_treatment'] ?? 'standard_15';
    $brandColor = $tenant->settings['brand_color'] ?? '#1D4ED8';
    $currentTemplate = $tenant->settings['template'] ?? 'classic';
    $savedDesigns = $tenant->settings['saved_designs'] ?? [];
    $logoPath = $tenant->settings['logo_path'] ?? null;
    $footerText = $tenant->settings['footer_text'] ?? '';
    $showFooterContact = $tenant->settings['show_footer_contact'] ?? false;
    $showFooterTerms = $tenant->settings['show_footer_terms'] ?? false;

    $tabs = [
        'profile'     => ['ar' => 'ملف المنشأة',    'en' => 'Company Profile',         'icon' => 'fa-building'],
        'certificate' => ['ar' => 'الربط والشهادة', 'en' => 'Connection & Certificate', 'icon' => 'fa-certificate'],
        'stores'      => ['ar' => 'ربط المتاجر',    'en' => 'Store Integration',         'icon' => 'fa-store'],
        'template'    => ['ar' => 'قالب الفاتورة',  'en' => 'Invoice Template',          'icon' => 'fa-file-invoice'],
        'users'       => ['ar' => 'المستخدمون',     'en' => 'Users',                     'icon' => 'fa-users'],
        'api'         => ['ar' => 'واجهة API',       'en' => 'API Interface',             'icon' => 'fa-code'],
    ];
@endphp

<div class="flex flex-col sm:flex-row gap-6 max-w-6xl mx-auto">

    {{-- ===== SIDEBAR NAV ===== --}}
    <aside class="w-full sm:w-44 shrink-0 hidden sm:block">
        <nav class="space-y-0.5 sticky top-6">
            @foreach($tabs as $key => $tab)
                <a href="{{ route('dashboard.settings.edit', ['tab' => $key]) }}"
                   class="flex items-center gap-2.5 px-3 py-2 rounded-xl text-xs font-semibold transition
                          {{ $activeTab === $key
                              ? 'bg-slate-900 text-white dark:bg-slate-800 dark:text-white shadow-sm'
                              : 'text-slate-600 dark:text-slate-400 hover:text-slate-900 dark:hover:text-slate-200 hover:bg-slate-100 dark:hover:bg-slate-800/50' }}">
                    <i class="fa-solid {{ $tab['icon'] }} w-4 text-center {{ $activeTab === $key ? 'text-brand-500 dark:text-brand-400' : 'text-slate-400 dark:text-slate-600' }}"></i>
                    {{ $isAr ? $tab['ar'] : $tab['en'] }}
                </a>
            @endforeach
        </nav>
    </aside>

    {{-- ===== MOBILE TAB SELECT ===== --}}
    <div class="sm:hidden mb-4 w-full">
        <select onchange="window.location=this.value" class="w-full rounded-xl bg-white dark:bg-navy-900 border border-slate-300 dark:border-slate-700 text-slate-800 dark:text-slate-200 p-2.5 text-xs shadow-sm">
            @foreach($tabs as $key => $tab)
                <option value="{{ route('dashboard.settings.edit', ['tab' => $key]) }}"
                        {{ $activeTab === $key ? 'selected' : '' }}>
                    {{ $isAr ? $tab['ar'] : $tab['en'] }}
                </option>
            @endforeach
        </select>
    </div>

    {{-- ===== CONTENT AREA ===== --}}
    <div class="flex-1 min-w-0 space-y-5">

        {{-- Global success / error --}}
        @if(session('success'))
            <div class="p-3 rounded-xl bg-brand-500/10 border border-brand-500/30 text-brand-300 text-xs">{{ session('success') }}</div>
        @endif
        @if($errors->any())
            <div class="p-3 rounded-xl bg-red-500/10 border border-red-500/30 text-red-300 text-xs">
                <ul class="list-disc list-inside space-y-0.5">@foreach($errors->all() as $e)<li>{{ $e }}</li>@endforeach</ul>
            </div>
        @endif

        {{-- ============================================================
             TAB 1: ملف المنشأة
        ============================================================ --}}
        @if($activeTab === 'profile')

            {{-- Sandbox warning --}}
            @if($isSandbox)
                <div class="p-3.5 rounded-xl bg-amber-50 border border-amber-300/80 text-amber-950 dark:bg-amber-500/10 dark:border-amber-500/30 dark:text-amber-300 text-xs flex items-start gap-2.5 shadow-xs">
                    <i class="fa-solid fa-triangle-exclamation text-amber-600 dark:text-amber-400 mt-0.5 shrink-0"></i>
                    <span class="leading-relaxed">{{ $isAr ? 'أنت في البيئة التجريبية — الفواتير لا تُرسل إلى فاتورة الفعلي.' : 'You are in sandbox mode — invoices are not sent to the live Fatoora platform.' }}</span>
                </div>
            @endif

            {{-- Missing-fields pills --}}
            @if(count($missingFields) > 0)
                <div class="p-3 rounded-xl bg-amber-500/5 border border-amber-500/20 text-xs">
                    <p class="text-amber-400 font-semibold mb-2">{{ $isAr ? 'حقول مطلوبة لتفعيل الربط:' : 'Required fields for connection:' }}</p>
                    <div class="flex flex-wrap gap-1.5">
                        @foreach($missingFields as $field)
                            <span class="px-2 py-0.5 rounded-full bg-amber-500/20 border border-amber-500/30 text-amber-300">{{ $field }}</span>
                        @endforeach
                    </div>
                </div>
            @endif

            <form method="POST" action="{{ route('dashboard.settings.update') }}"
                  class="bg-navy-900 border border-slate-800 rounded-2xl p-6 space-y-5 text-xs">
                @csrf
                @method('PUT')

                {{-- اسم المنشأة --}}
                <div>
                    <label class="block font-bold text-slate-300 mb-1.5">
                        {{ $isAr ? 'اسم المنشأة' : 'Organization Name' }}
                        @if(isset($missingFields['name']))<span class="ms-1 px-1.5 py-0.5 rounded-full bg-amber-500/20 border border-amber-500/30 text-amber-300 text-[10px]">{{ $isAr ? 'ناقص' : 'Missing' }}</span>@endif
                    </label>
                    <input type="text" name="name" value="{{ old('name', $tenant->name) }}" required
                           class="w-full rounded-xl bg-navy-950 border border-slate-700 text-slate-100 p-3 focus:border-brand-500 focus:outline-none">
                </div>

                {{-- VAT + Org Identifier --}}
                <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
                    <div>
                        <label class="block font-bold text-slate-300 mb-1.5">{{ $isAr ? 'الرقم الضريبي' : 'VAT Number' }}</label>
                        @if($tenant->vat_number)
                            <div class="flex items-center gap-2 px-3 py-2.5 rounded-xl bg-navy-950 border border-slate-700">
                                <span class="font-mono text-slate-100 tracking-wide">{{ $tenant->vat_number }}</span>
                                <span class="ms-auto text-[10px] text-slate-500 shrink-0">{{ $isAr ? 'لا يمكن تغييره' : 'Cannot change' }}</span>
                            </div>
                            <input type="hidden" name="vat_number" value="{{ $tenant->vat_number }}">
                        @else
                            <input type="text" name="vat_number" value="{{ old('vat_number') }}"
                                   placeholder="300000000000003" maxlength="15" inputmode="numeric"
                                   class="w-full rounded-xl bg-navy-950 border border-slate-700 text-slate-100 p-3 font-mono tracking-wider focus:border-brand-500 focus:outline-none">
                        @endif
                    </div>
                    <div>
                        <label class="block font-bold text-slate-300 mb-1.5">{{ $isAr ? 'معرّف المنشأة' : 'Organization Identifier' }}</label>
                        <div class="flex gap-2">
                            <select name="org_identifier_type"
                                    class="rounded-xl bg-navy-950 border border-slate-700 text-slate-200 px-2 py-2.5 text-[11px] shrink-0 focus:border-brand-500 focus:outline-none">
                                <option value="cr_number"          @selected(old('org_identifier_type', $tenant->org_identifier_type ?? 'cr_number') === 'cr_number')>{{ $isAr ? 'سجل تجاري' : 'CR' }}</option>
                                <option value="municipal_license"  @selected(old('org_identifier_type', $tenant->org_identifier_type) === 'municipal_license')>{{ $isAr ? 'رخصة بلدية' : 'Municipal' }}</option>
                                <option value="hr_license"         @selected(old('org_identifier_type', $tenant->org_identifier_type) === 'hr_license')>{{ $isAr ? 'موارد بشرية' : 'HR License' }}</option>
                                <option value="unified_700"        @selected(old('org_identifier_type', $tenant->org_identifier_type) === 'unified_700')>{{ $isAr ? 'رقم موحد 700' : '700 Unified' }}</option>
                                <option value="investment_license" @selected(old('org_identifier_type', $tenant->org_identifier_type) === 'investment_license')>{{ $isAr ? 'رخصة استثمار' : 'Investment' }}</option>
                                <option value="other"              @selected(old('org_identifier_type', $tenant->org_identifier_type) === 'other')>{{ $isAr ? 'معرف آخر' : 'Other' }}</option>
                            </select>
                            <input type="text" name="org_identifier_value"
                                   value="{{ old('org_identifier_value', $tenant->org_identifier_value ?? $tenant->cr_number) }}"
                                   placeholder="1234567890" maxlength="20"
                                   class="flex-1 min-w-0 rounded-xl bg-navy-950 border border-slate-700 text-slate-100 p-3 focus:border-brand-500 focus:outline-none">
                        </div>
                        <p class="text-[10px] text-slate-500 mt-1">{{ $isAr ? 'رقم السجل التجاري 10 أرقام' : 'CR number is 10 digits' }}</p>
                    </div>
                </div>

                {{-- النشاط التجاري --}}
                <div>
                    <label class="block font-bold text-slate-300 mb-1.5">{{ $isAr ? 'النشاط التجاري' : 'Business Activity' }}</label>
                    <input type="text" name="industry" value="{{ old('industry', $tenant->industry) }}"
                           class="w-full rounded-xl bg-navy-950 border border-slate-700 text-slate-100 p-3 focus:border-brand-500 focus:outline-none">
                </div>

                {{-- العنوان الوطني المختصر --}}
                <div>
                    <label class="block font-bold text-slate-300 mb-1.5">{{ $isAr ? 'العنوان الوطني المختصر' : 'Short National Address' }}</label>
                    <div class="flex gap-2">
                        <input type="text" name="short_address" id="shortAddressInput"
                               value="{{ old('short_address', $tenant->short_address) }}"
                               placeholder="RRAD1234" maxlength="10"
                               class="flex-1 min-w-0 rounded-xl bg-navy-950 border border-slate-700 text-slate-100 p-3 focus:border-brand-500 focus:outline-none uppercase">
                        <button type="button" onclick="fetchShortAddress()"
                                class="px-4 py-2.5 rounded-xl bg-navy-800 border border-slate-700 text-slate-200 hover:bg-slate-700 transition text-xs font-semibold shrink-0">
                            {{ $isAr ? 'جلب العنوان' : 'Fetch Address' }}
                        </button>
                    </div>
                    <p class="text-[10px] text-slate-500 mt-1">{{ $isAr ? 'اضغط «جلب العنوان» لتعبئة الشارع والمدينة والرمز البريدي تلقائياً' : 'Click "Fetch Address" to auto-fill address fields' }}</p>
                </div>

                {{-- الشارع + رقم المبنى --}}
                <div class="grid grid-cols-2 gap-4">
                    <div>
                        <label class="block font-bold text-slate-300 mb-1.5">
                            {{ $isAr ? 'الشارع' : 'Street' }}
                            @if(isset($missingFields['street']))<span class="ms-1 px-1.5 py-0.5 rounded-full bg-amber-500/20 border border-amber-500/30 text-amber-300 text-[10px]">{{ $isAr ? 'ناقص' : 'Missing' }}</span>@endif
                        </label>
                        <input type="text" name="address_street" id="fieldStreet" value="{{ old('address_street', $tenant->address_street) }}"
                               class="w-full rounded-xl bg-navy-950 border border-slate-700 text-slate-100 p-3 focus:border-brand-500 focus:outline-none">
                    </div>
                    <div>
                        <label class="block font-bold text-slate-300 mb-1.5">
                            {{ $isAr ? 'رقم المبنى' : 'Building No.' }}
                            @if(isset($missingFields['building']))<span class="ms-1 px-1.5 py-0.5 rounded-full bg-amber-500/20 border border-amber-500/30 text-amber-300 text-[10px]">{{ $isAr ? 'ناقص' : 'Missing' }}</span>@endif
                        </label>
                        <input type="text" name="building_number" id="fieldBuilding" value="{{ old('building_number', $tenant->building_number) }}"
                               class="w-full rounded-xl bg-navy-950 border border-slate-700 text-slate-100 p-3 focus:border-brand-500 focus:outline-none">
                    </div>
                </div>

                {{-- المدينة + الحي --}}
                <div class="grid grid-cols-2 gap-4">
                    <div>
                        <label class="block font-bold text-slate-300 mb-1.5">
                            {{ $isAr ? 'المدينة' : 'City' }}
                            @if(isset($missingFields['city']))<span class="ms-1 px-1.5 py-0.5 rounded-full bg-amber-500/20 border border-amber-500/30 text-amber-300 text-[10px]">{{ $isAr ? 'ناقص' : 'Missing' }}</span>@endif
                        </label>
                        <input type="text" name="address_city" id="fieldCity" value="{{ old('address_city', $tenant->address_city) }}"
                               class="w-full rounded-xl bg-navy-950 border border-slate-700 text-slate-100 p-3 focus:border-brand-500 focus:outline-none">
                    </div>
                    <div>
                        <label class="block font-bold text-slate-300 mb-1.5">
                            {{ $isAr ? 'الحي' : 'District' }}
                            @if(isset($missingFields['district']))<span class="ms-1 px-1.5 py-0.5 rounded-full bg-amber-500/20 border border-amber-500/30 text-amber-300 text-[10px]">{{ $isAr ? 'ناقص' : 'Missing' }}</span>@endif
                        </label>
                        <input type="text" name="district" id="fieldDistrict" value="{{ old('district', $tenant->district) }}"
                               class="w-full rounded-xl bg-navy-950 border border-slate-700 text-slate-100 p-3 focus:border-brand-500 focus:outline-none">
                    </div>
                </div>

                {{-- الرمز البريدي --}}
                <div class="max-w-xs">
                    <label class="block font-bold text-slate-300 mb-1.5">
                        {{ $isAr ? 'الرمز البريدي' : 'Postal Code' }}
                        @if(isset($missingFields['postal']))<span class="ms-1 px-1.5 py-0.5 rounded-full bg-amber-500/20 border border-amber-500/30 text-amber-300 text-[10px]">{{ $isAr ? 'ناقص' : 'Missing' }}</span>@endif
                    </label>
                    <input type="text" name="postal_code" id="fieldPostal" value="{{ old('postal_code', $tenant->postal_code) }}"
                           maxlength="10" inputmode="numeric"
                           class="w-full rounded-xl bg-navy-950 border border-slate-700 text-slate-100 p-3 focus:border-brand-500 focus:outline-none">
                </div>

                <hr class="border-slate-800">

                {{-- نوع الفواتير --}}
                <div>
                    <label class="block font-bold text-slate-300 mb-1.5">{{ $isAr ? 'نوع الفواتير' : 'Invoice Types' }}</label>
                    <select name="invoice_type_preference"
                            class="w-full rounded-xl bg-navy-950 border border-slate-700 text-slate-200 p-3 focus:border-brand-500 focus:outline-none">
                        <option value="both"       @selected($invoicePref === 'both')>{{ $isAr ? 'ضريبية + مبسطة' : 'Tax + Simplified' }}</option>
                        <option value="standard"   @selected($invoicePref === 'standard')>{{ $isAr ? 'ضريبية فقط' : 'Tax Invoice Only' }}</option>
                        <option value="simplified" @selected($invoicePref === 'simplified')>{{ $isAr ? 'مبسطة فقط' : 'Simplified Only' }}</option>
                    </select>
                    <p class="text-[10px] text-slate-500 mt-1">{{ $isAr ? 'تغيير نوع الفواتير يتطلب إعادة إصدار الشهادة ليسري على الربط' : 'Changing invoice type requires re-issuing the certificate' }}</p>
                </div>

                {{-- المعاملات الضريبية --}}
                <div>
                    <label class="block font-bold text-slate-300 mb-1.5">{{ $isAr ? 'المعاملات الضريبية' : 'Tax Treatment' }}</label>
                    <select name="tax_treatment"
                            class="w-full rounded-xl bg-navy-950 border border-slate-700 text-slate-200 p-3 focus:border-brand-500 focus:outline-none">
                        <option value="standard_15" @selected($taxTreatment === 'standard_15')>{{ $isAr ? 'خاضعة 15%' : 'Standard 15%' }}</option>
                        <option value="zero_rated"  @selected($taxTreatment === 'zero_rated')>{{ $isAr ? 'صفرية' : 'Zero-rated' }}</option>
                        <option value="exempt"      @selected($taxTreatment === 'exempt')>{{ $isAr ? 'معفاة' : 'Exempt' }}</option>
                    </select>
                </div>

                <div>
                    <button type="submit" class="px-6 py-2.5 rounded-xl bg-brand-500 hover:bg-brand-600 text-white font-bold transition text-xs">
                        {{ $isAr ? 'حفظ التغييرات' : 'Save Changes' }}
                    </button>
                </div>
            </form>

            {{-- ===== BRANCHES SECTION ===== --}}
            <div class="bg-navy-900 border border-slate-800 rounded-2xl p-6 space-y-5 text-xs">
                <div>
                    <h3 class="font-black text-white text-sm mb-1">{{ $isAr ? 'الفروع' : 'Branches' }}</h3>
                    <p class="text-slate-400 leading-relaxed">
                        {{ $isAr ? 'أضف فروع منشأتك إذا كانت لديك أكثر من موقع. كل فرع يظهر كخيار عند إنشاء الفاتورة.' : 'Add branches for multiple locations. Each branch appears as an option when creating invoices.' }}
                    </p>
                </div>
                <form method="POST" action="{{ route('dashboard.settings.branches.add') }}"
                      class="space-y-3 p-4 rounded-xl bg-navy-950 border border-slate-700">
                    @csrf
                    <div class="grid grid-cols-1 sm:grid-cols-2 gap-3">
                        <div>
                            <label class="block text-slate-400 mb-1">{{ $isAr ? 'اسم الفرع' : 'Branch Name' }}</label>
                            <input type="text" name="branch_name" required placeholder="{{ $isAr ? 'فرع الرياض' : 'Riyadh Branch' }}"
                                   class="w-full rounded-xl bg-navy-900 border border-slate-700 text-slate-100 p-2.5 focus:border-brand-500 focus:outline-none">
                        </div>
                        <div>
                            <label class="block text-slate-400 mb-1">{{ $isAr ? 'السجل التجاري للفرع (اختياري)' : 'Branch CR (optional)' }}</label>
                            <input type="text" name="branch_cr" maxlength="20"
                                   class="w-full rounded-xl bg-navy-900 border border-slate-700 text-slate-100 p-2.5 focus:border-brand-500 focus:outline-none">
                        </div>
                    </div>
                    <div>
                        <label class="block text-slate-400 mb-1">{{ $isAr ? 'العنوان الوطني المختصر للفرع' : 'Branch Short Address' }}</label>
                        <input type="text" name="branch_short_address" maxlength="10" placeholder="RRD02929"
                               class="w-full rounded-xl bg-navy-900 border border-slate-700 text-slate-100 p-2.5 focus:border-brand-500 focus:outline-none uppercase">
                        <p class="text-[10px] text-slate-500 mt-1">{{ $isAr ? 'الشارع والحي والمدينة والرمز البريدي أُستخرج منه تلقائياً' : 'Street, district, city and postal code extracted automatically' }}</p>
                    </div>
                    <button type="submit" class="px-4 py-2 rounded-xl bg-brand-500 hover:bg-brand-600 text-white font-bold transition">
                        + {{ $isAr ? 'إضافة فرع' : 'Add Branch' }}
                    </button>
                </form>
                @if(count($branches) > 0)
                    <div class="space-y-2">
                        @foreach($branches as $branch)
                            <div class="flex items-center gap-3 p-3 rounded-xl bg-navy-950 border border-slate-700">
                                <i class="fa-solid fa-building text-slate-500"></i>
                                <div class="flex-1 min-w-0">
                                    <p class="font-semibold text-slate-200 truncate">{{ $branch['name'] }}</p>
                                    @if(!empty($branch['cr_number']))<p class="text-slate-500 text-[10px]">{{ $branch['cr_number'] }}</p>@endif
                                    @if(!empty($branch['short_address']))<p class="text-slate-500 text-[10px] font-mono">{{ $branch['short_address'] }}</p>@endif
                                </div>
                                <form method="POST" action="{{ route('dashboard.settings.branches.remove', $branch['id']) }}"
                                      onsubmit="return confirm('{{ $isAr ? 'حذف الفرع؟' : 'Delete this branch?' }}')">
                                    @csrf
                                    @method('DELETE')
                                    <button type="submit" class="px-2.5 py-1.5 rounded-lg border border-red-500/30 text-red-400 hover:bg-red-500/10 transition text-[10px]">
                                        {{ $isAr ? 'حذف' : 'Remove' }}
                                    </button>
                                </form>
                            </div>
                        @endforeach
                    </div>
                @endif
            </div>

        @endif

        {{-- ============================================================
             TAB 2: الربط والشهادة
        ============================================================ --}}
        @if($activeTab === 'certificate')

            @if($isSandbox)
                <div class="p-5 rounded-2xl bg-amber-50 border border-amber-300/80 dark:bg-amber-500/10 dark:border-amber-500/30 text-xs shadow-xs">
                    <div class="flex items-start gap-3">
                        <i class="fa-solid fa-flask text-amber-600 dark:text-amber-400 text-base mt-0.5 shrink-0"></i>
                        <div class="flex-1">
                            <p class="font-black text-amber-950 dark:text-amber-300 text-sm mb-1">{{ $isAr ? 'أنت في وضع التجربة' : 'You are in Sandbox Mode' }}</p>
                            <p class="text-amber-800 dark:text-amber-200/70 leading-relaxed">
                                {{ $isAr ? 'بيئة الاختبار تتيح لك إنشاء فواتير وإرسالها دون أثر قانوني. عند الجاهزية، حوّل إلى التشغيل الفعلي.' : 'The sandbox lets you create and submit invoices with no legal effect. When ready, switch to production.' }}
                            </p>
                        </div>
                    </div>
                    <div class="mt-4 flex justify-end">
                        <a href="{{ route('dashboard.onboarding.wizard') }}"
                           class="inline-flex items-center gap-1.5 px-4 py-2 rounded-xl bg-brand-500 hover:bg-brand-600 text-white font-bold transition text-xs">
                            {{ $isAr ? 'أكمل التحويل للتشغيل الفعلي' : 'Complete Production Setup' }}
                            <i class="fa-solid fa-chevron-left rtl:rotate-180 text-[10px]"></i>
                        </a>
                    </div>
                </div>
            @endif

            @if($device)
                <div class="grid grid-cols-1 sm:grid-cols-2 gap-4 text-xs">
                    {{-- Connection status --}}
                    <div class="bg-navy-900 border border-slate-800 rounded-2xl p-5 space-y-3">
                        <p class="font-black text-white text-sm">{{ $isAr ? 'حالة الاتصال' : 'Connection Status' }}</p>
                        <div class="flex items-center gap-2">
                            <span class="w-2 h-2 rounded-full bg-brand-500 shrink-0"></span>
                            <span class="text-slate-300 font-semibold">{{ $isAr ? 'منصة فاتورة' : 'Fatoora Platform' }}</span>
                            <span class="ms-auto text-brand-400 font-bold">{{ $isAr ? '✓ متصلة' : '✓ Connected' }}</span>
                        </div>
                        <div class="space-y-2 pt-1 border-t border-slate-800">
                            <div class="flex justify-between text-slate-400">
                                <span>{{ $isAr ? 'البيئة' : 'Environment' }}</span>
                                <span class="text-slate-200 font-semibold">{{ ! $tenant->is_sandbox ? ($isAr ? 'الإنتاج' : 'Production') : ($isAr ? 'البيئة التجريبية' : 'Sandbox') }}</span>
                            </div>
                            <div class="flex justify-between text-slate-400">
                                <span>{{ $isAr ? 'نوع الحل' : 'Solution Type' }}</span>
                                <span class="text-slate-200 font-semibold">ZATCA Tools Cloud</span>
                            </div>
                            <div class="flex justify-between text-slate-400">
                                <span>{{ $isAr ? 'معرّف الجهاز' : 'Device ID' }}</span>
                                <span class="text-slate-200 font-mono text-[10px] truncate ms-2 max-w-[120px]" title="{{ $device->uuid ?? $device->id }}">
                                    {{ Str::limit($device->uuid ?? $device->id, 18, '…') }}
                                </span>
                            </div>
                        </div>
                    </div>
                    {{-- Certificate status --}}
                    <div class="bg-navy-900 border border-slate-800 rounded-2xl p-5 space-y-3">
                        <p class="font-black text-white text-sm">{{ $isAr ? 'شهادة الإنتاج (PCSID)' : 'Production Certificate (PCSID)' }}</p>
                        @php
                            $hasCert = filled($device->certificate_pem);
                            $certExpiry = $device->certificate_expires_at ?? null;
                            $isExpired = $certExpiry && now()->greaterThan($certExpiry);
                        @endphp
                        <div class="flex items-center gap-2">
                            @if($hasCert && !$isExpired)
                                <span class="w-2 h-2 rounded-full bg-brand-500"></span>
                                <span class="text-brand-400 font-bold">{{ $isAr ? '✓ صالحة' : '✓ Valid' }}</span>
                            @elseif($isExpired)
                                <span class="w-2 h-2 rounded-full bg-red-500"></span>
                                <span class="text-red-400 font-bold">{{ $isAr ? '✗ منتهية' : '✗ Expired' }}</span>
                            @else
                                <span class="w-2 h-2 rounded-full bg-amber-500"></span>
                                <span class="text-amber-400 font-bold">{{ $isAr ? '— لا توجد شهادة' : '— No Certificate' }}</span>
                            @endif
                        </div>
                        <div class="space-y-2 pt-1 border-t border-slate-800">
                            @if($device->created_at)
                                <div class="flex justify-between text-slate-400">
                                    <span>{{ $isAr ? 'تاريخ الربط' : 'Linked On' }}</span>
                                    <span class="text-slate-200 font-semibold">{{ $device->created_at->format('Y/m/d') }}</span>
                                </div>
                            @endif
                            @if($certExpiry)
                                <div class="flex justify-between text-slate-400">
                                    <span>{{ $isAr ? 'تنتهي في' : 'Expires' }}</span>
                                    <span class="{{ $isExpired ? 'text-red-400' : 'text-slate-200' }} font-semibold">{{ \Carbon\Carbon::parse($certExpiry)->format('Y/m/d') }}</span>
                                </div>
                            @endif
                            <div class="flex justify-end pt-1">
                                <a href="{{ route('dashboard.onboarding.wizard') }}"
                                   class="text-brand-400 hover:underline text-[10px] font-semibold">
                                    {{ $isAr ? 'تجديد مبكر ←' : 'Early Renewal →' }}
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            @else
                <div class="p-5 rounded-2xl bg-navy-900 border border-slate-800 text-slate-400 text-xs text-center">
                    {{ $isAr ? 'لا يوجد جهاز مسجل بعد. أكمل خطوات الربط.' : 'No device registered yet. Complete the connection steps.' }}
                </div>
            @endif

        @endif

        {{-- ============================================================
             TAB 3: ربط المتاجر
        ============================================================ --}}
        @if($activeTab === 'stores')
            <div class="bg-navy-900 border border-slate-800 rounded-2xl p-8 text-center text-xs space-y-3">
                <i class="fa-solid fa-store text-4xl text-slate-600"></i>
                <p class="font-black text-white text-sm">{{ $isAr ? 'ربط المتاجر' : 'Store Integration' }}</p>
                <p class="text-slate-400 max-w-sm mx-auto leading-relaxed">
                    {{ $isAr ? 'قريباً — سيتمكن كل متجر إلكتروني من إرسال طلباته مباشرةً لإنشاء الفاتورة تلقائياً.' : 'Coming soon — your online stores will be able to send orders directly to auto-generate invoices.' }}
                </p>
                <span class="inline-block px-3 py-1 rounded-full bg-amber-500/10 border border-amber-500/20 text-amber-400 text-[10px] font-semibold">{{ $isAr ? 'قريباً' : 'Coming Soon' }}</span>
            </div>
        @endif

        {{-- ============================================================
             TAB 4: قالب الفاتورة
        ============================================================ --}}
        @if($activeTab === 'template')
        @php
            $templates = [
                'classic' => ['ar' => 'كلاسيكي', 'en' => 'Classic', 'desc_ar' => 'خطوط رفيعة وخط مطبعة هادئ — أقرب لورق الفاتورة التقليدي.', 'desc_en' => 'Thin lines and calm typeface — closest to traditional paper receipts.'],
                'modern'  => ['ar' => 'حديث',    'en' => 'Modern',  'desc_ar' => 'جداول ملونة وخط واضح — التصميم الافتراضي المعتمد.',    'desc_en' => 'Coloured tables and clear text — the modern default design.'],
                'bold'    => ['ar' => 'جريء',    'en' => 'Bold',    'desc_ar' => 'شريط علوي عريض بلون هويتك يحمل الشعار والعنوان.',      'desc_en' => 'Bold brand-colour header bar with logo and address.'],
                'simple'  => ['ar' => 'بسيط',    'en' => 'Simple',  'desc_ar' => 'أبيض وأسود بلا زخرفة — مساحات واسعة، أرقام فقط.',     'desc_en' => 'Black & white, no decoration — clean spaces, numbers only.'],
                'formal'  => ['ar' => 'رسمي',    'en' => 'Formal',  'desc_ar' => 'إطار رسمي وجداول محددة وصناديق معتمدة للأطراف.',       'desc_en' => 'Formal bordered layout with distinct party boxes and grid.'],
            ];

            $curatedPresets = [
                'كلاسيكي ملكي' => [
                    'template' => 'classic',
                    'brand_color' => '#1D4ED8',
                    'name_ar' => 'كلاسيكي ملكي',
                    'name_en' => 'Royal Classic',
                    'desc' => $isAr ? 'أزرق ملكي متزن وخطوط واضحة' : 'Royal blue balanced layout',
                ],
                'حديث بترولي' => [
                    'template' => 'modern',
                    'brand_color' => '#0D9488',
                    'name_ar' => 'حديث بترولي',
                    'name_en' => 'Modern Teal',
                    'desc' => $isAr ? 'عصري هادئ برأسية بترولية' : 'Calm teal header bar',
                ],
                'جريء زمردي' => [
                    'template' => 'bold',
                    'brand_color' => '#16A34A',
                    'name_ar' => 'جريء زمردي',
                    'name_en' => 'Bold Emerald',
                    'desc' => $isAr ? 'شريط عريض بلون أخضر رسمي' : 'Prominent brand top header',
                ],
                'بسيط نقي' => [
                    'template' => 'simple',
                    'brand_color' => '#0F172A',
                    'name_ar' => 'بسيط نقي',
                    'name_en' => 'Simple Minimal',
                    'desc' => $isAr ? 'أبيض وأسود صريح بلا زخارف' : 'Clean black & white format',
                ],
                'رسمي عنابي' => [
                    'template' => 'formal',
                    'brand_color' => '#DC2626',
                    'name_ar' => 'رسمي عنابي',
                    'name_en' => 'Formal Crimson',
                    'desc' => $isAr ? 'إطار رسمي وجداول تعاقدية' : 'Official bordered contract grid',
                ],
            ];
        @endphp

            <div class="grid grid-cols-1 lg:grid-cols-5 gap-5">
                {{-- Left: Preview + Template picker --}}
                <div class="lg:col-span-3 space-y-5">
                    {{-- Preview box --}}
                    <div class="bg-white dark:bg-navy-900 border border-slate-200 dark:border-slate-800 rounded-2xl p-4 shadow-sm">
                        <div class="flex items-center justify-between mb-3 text-xs">
                            <div class="flex items-center gap-2">
                                <span class="font-bold text-slate-900 dark:text-white flex items-center gap-1.5">
                                    <i class="fa-solid fa-eye text-brand-500"></i>
                                    {{ $isAr ? 'معاينة حية للمستند' : 'Live Document Preview' }}
                                </span>
                                <span id="previewLoadingBadge" class="hidden text-[10px] text-slate-500 dark:text-slate-400 items-center gap-1">
                                    <i class="fa-solid fa-circle-notch fa-spin text-brand-500"></i> {{ $isAr ? 'جارِ التحديث...' : 'Updating...' }}
                                </span>
                            </div>
                            <div class="flex items-center gap-2">
                                <span class="text-[11px] text-slate-500 dark:text-slate-400 hidden sm:inline">{{ $isAr ? 'نموذج — غير موقع' : 'Sample — unsigned' }}</span>
                                <button type="button" onclick="expandTemplatePreview()"
                                        class="px-2.5 py-1.5 rounded-lg border border-slate-300 dark:border-slate-700 text-slate-700 dark:text-slate-300 hover:bg-slate-100 dark:hover:bg-slate-800 transition text-[11px] font-semibold flex items-center gap-1.5 shadow-xs">
                                    <i class="fa-solid fa-up-right-and-down-left-from-center text-[10px] text-brand-500"></i>
                                    <span>{{ $isAr ? 'تكبير المعاينة' : 'Expand Preview' }}</span>
                                </button>
                            </div>
                        </div>

                        <div class="rounded-xl overflow-hidden border border-slate-300 dark:border-slate-700 bg-white relative shadow-inner">
                            <iframe id="templatePreviewFrame"
                                    src="{{ route('dashboard.settings.template.preview', ['template' => $currentTemplate, 'brand_color' => $brandColor], false) }}"
                                    title="{{ $isAr ? 'معاينة قالب الفاتورة' : 'Invoice template preview' }}"
                                    class="w-full bg-white"
                                    style="height: 520px;"></iframe>
                        </div>
                        <p class="text-[10px] text-slate-500 dark:text-slate-400 mt-2.5 text-center leading-relaxed">
                            <i class="fa-solid fa-circle-info text-slate-400 ms-1"></i>
                            {{ $isAr ? 'المعاينة تُبيّن بالضبط الشكل الذي يصدر الفاتورة الحقيقية — اختر قالباً ولوناً واضغط حفظ لتطبيقه على الفواتير الجديدة.' : 'Preview shows exactly how real invoices look. Pick a template and color, then save.' }}
                        </p>
                    </div>

                    {{-- Template cards --}}
                    <form method="POST" action="{{ route('dashboard.settings.template.update') }}"
                          class="bg-white dark:bg-navy-900 border border-slate-200 dark:border-slate-800 rounded-2xl p-5 space-y-4 text-xs shadow-sm" enctype="multipart/form-data" id="templateForm">
                        @csrf
                        @method('PUT')
                        <div>
                            <p class="font-black text-slate-900 dark:text-white text-sm mb-1">{{ $isAr ? 'قالب الفاتورة' : 'Invoice Template' }}</p>
                            <p class="text-slate-600 dark:text-slate-400 leading-relaxed text-[11px]">
                                {{ $isAr ? 'الشكل الذي تصل به فاتورتك للعميل في الـ PDF والمطبوعات. محتوى البيانات الضريبية ثابت وفق متطلبات هيئة الزكاة والضريبة والجمارك.' : 'The look of your invoice in PDF and printouts. Tax data conforms to ZATCA rules.' }}
                            </p>
                        </div>

                        <div class="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-5 gap-2.5">
                            @foreach($templates as $tKey => $tData)
                                <label class="cursor-pointer block" onclick="selectTemplate('{{ $tKey }}')">
                                    <input type="radio" name="template" value="{{ $tKey }}" class="sr-only peer"
                                           {{ $currentTemplate === $tKey ? 'checked' : '' }}>
                                    <div class="template-card-box p-2.5 rounded-xl border-2 transition-all {{ $currentTemplate === $tKey ? 'border-brand-500 bg-brand-50/70 dark:bg-brand-500/10 ring-2 ring-brand-500/30' : 'border-slate-200 dark:border-slate-700 bg-slate-50/50 dark:bg-navy-950/60 hover:border-slate-400 dark:hover:border-slate-500' }} flex flex-col justify-between h-full"
                                         data-template-key="{{ $tKey }}">
                                        {{-- Mini template preview mockup --}}
                                        <div class="h-16 rounded-lg mb-2 overflow-hidden border border-slate-200 dark:border-slate-700 bg-white shadow-xs"
                                             style="direction: ltr;">
                                            @if($tKey === 'classic')
                                                <div class="h-4 border-b border-gray-300 flex items-center px-2"><div class="w-8 h-1.5 bg-gray-400 rounded"></div></div>
                                                <div class="p-1 space-y-0.5"><div class="h-1 bg-gray-200 rounded w-3/4"></div><div class="h-1 bg-gray-100 rounded w-1/2"></div><div class="h-1 bg-gray-200 rounded w-full mt-1"></div></div>
                                            @elseif($tKey === 'modern')
                                                <div class="h-4 flex items-center px-2 tpl-brand-tint" style="background: {{ $brandColor }}20;"><div class="w-8 h-1.5 rounded tpl-brand-bg" style="background: {{ $brandColor }}"></div></div>
                                                <div class="p-1 space-y-0.5"><div class="h-1 rounded w-3/4 tpl-brand-tint-2" style="background: {{ $brandColor }}40"></div><div class="h-1 bg-gray-100 rounded w-1/2"></div></div>
                                            @elseif($tKey === 'bold')
                                                <div class="h-5 flex items-center px-2 tpl-brand-bg" style="background: {{ $brandColor }};"><div class="w-6 h-2 bg-white/80 rounded"></div><div class="ms-auto w-4 h-4 bg-white/20 rounded"></div></div>
                                                <div class="p-1 space-y-0.5"><div class="h-1 bg-gray-200 rounded w-3/4"></div><div class="h-1 bg-gray-100 rounded w-1/2"></div></div>
                                            @elseif($tKey === 'formal')
                                                <div class="h-3.5 border-b-2 px-1 flex items-center justify-between tpl-brand-border" style="border-color: {{ $brandColor }};">
                                                    <div class="w-7 h-1.5 rounded tpl-brand-bg" style="background: {{ $brandColor }}"></div>
                                                    <div class="w-2 h-2 bg-slate-700 rounded-xs"></div>
                                                </div>
                                                <div class="grid grid-cols-2 gap-0.5 p-0.5 my-0.5">
                                                    <div class="border border-slate-300 bg-slate-50 p-0.5"><div class="h-0.5 bg-slate-400 w-full"></div></div>
                                                    <div class="border border-slate-300 bg-slate-50 p-0.5"><div class="h-0.5 bg-slate-400 w-full"></div></div>
                                                </div>
                                                <div class="p-0.5"><div class="h-1.5 bg-slate-800 rounded-xs w-full"></div></div>
                                            @else
                                                <div class="p-1"><div class="h-1.5 bg-gray-900 rounded w-16 mb-1"></div><div class="h-px bg-gray-200 w-full mb-1"></div><div class="h-1 bg-gray-200 rounded w-3/4"></div><div class="h-1 bg-gray-100 rounded w-1/2"></div></div>
                                            @endif
                                        </div>
                                        <div>
                                            <p class="font-bold text-slate-900 dark:text-slate-100 text-xs">{{ $isAr ? $tData['ar'] : $tData['en'] }}</p>
                                            <p class="text-slate-500 dark:text-slate-400 text-[10px] leading-relaxed mt-0.5 line-clamp-2">{{ $isAr ? $tData['desc_ar'] : $tData['desc_en'] }}</p>
                                        </div>
                                    </div>
                                </label>
                            @endforeach
                        </div>

                        {{-- Branding section --}}
                        <div class="pt-4 border-t border-slate-200 dark:border-slate-800">
                            <p class="font-bold text-slate-900 dark:text-white mb-3 text-xs">{{ $isAr ? 'هويتك وألوانك' : 'Your Brand & Colors' }}</p>
                            <div class="space-y-4">
                                {{-- Brand color --}}
                                <div>
                                    <label class="block text-slate-700 dark:text-slate-300 font-semibold mb-2 text-xs">{{ $isAr ? 'اللون الأساسي' : 'Brand Colour' }}</label>
                                    <div class="flex items-center gap-2.5 flex-wrap">
                                        @foreach(['#0F172A','#DC2626','#B45309','#7C3AED','#2563EB','#0D9488','#16A34A'] as $presetColor)
                                            <button type="button"
                                                    data-preset-color="{{ $presetColor }}"
                                                    onclick="setBrandColor('{{ $presetColor }}')"
                                                    title="{{ $presetColor }}"
                                                    class="preset-color-btn w-7 h-7 rounded-full border-2 transition-transform shadow-xs {{ strtoupper($brandColor) === $presetColor ? 'border-brand-600 scale-110 ring-2 ring-brand-400 ring-offset-2 ring-offset-white dark:ring-offset-navy-950' : 'border-transparent hover:scale-105' }}"
                                                    style="background: {{ $presetColor }}">
                                            </button>
                                        @endforeach
                                        <div class="flex items-center gap-2 ms-1">
                                            <input type="color" id="colorPickerInput" value="{{ $brandColor }}"
                                                   oninput="setBrandColor(this.value)"
                                                   onchange="setBrandColor(this.value)"
                                                   class="w-7 h-7 rounded-full border border-slate-300 dark:border-slate-600 cursor-pointer p-0 bg-transparent overflow-hidden">
                                            <input type="text" id="brandColorDisplay" value="{{ $brandColor }}" readonly
                                                   class="w-24 rounded-lg bg-slate-50 dark:bg-navy-950 border border-slate-300 dark:border-slate-700 text-slate-800 dark:text-slate-200 px-2.5 py-1 text-[11px] font-mono cursor-pointer shadow-xs"
                                                   onclick="document.getElementById('colorPickerInput').click()">
                                            <input type="hidden" name="brand_color" id="brandColorInput" value="{{ $brandColor }}">
                                            <button type="button" onclick="setBrandColor('#1D4ED8')"
                                                    class="text-[11px] text-slate-500 hover:text-slate-800 dark:hover:text-slate-300 transition underline underline-offset-2">
                                                {{ $isAr ? 'الافتراضي' : 'Default' }}
                                            </button>
                                        </div>
                                    </div>
                                </div>

                                {{-- Logo --}}
                                <div>
                                    <label class="block text-slate-700 dark:text-slate-300 font-semibold mb-2 text-xs">{{ $isAr ? 'الشعار' : 'Logo' }}</label>
                                    <div class="flex items-center gap-3">
                                        <div class="w-14 h-14 rounded-xl border border-slate-200 dark:border-slate-700 flex items-center justify-center bg-slate-50 dark:bg-navy-950 overflow-hidden shrink-0 shadow-xs">
                                            @if($logoPath)
                                                <img src="{{ Storage::url($logoPath) }}" class="w-full h-full object-contain" alt="Logo">
                                            @else
                                                <i class="fa-solid fa-image text-slate-400 dark:text-slate-600 text-xl"></i>
                                            @endif
                                        </div>
                                        <div class="space-y-1.5">
                                            <label class="cursor-pointer px-3 py-1.5 rounded-xl border border-slate-300 dark:border-slate-700 text-slate-700 dark:text-slate-300 hover:bg-slate-100 dark:hover:bg-slate-700 transition text-[11px] font-semibold inline-block shadow-xs">
                                                <i class="fa-solid fa-upload me-1 text-brand-500"></i>
                                                {{ $isAr ? 'رفع شعار' : 'Upload Logo' }}
                                                <input type="file" name="logo" accept="image/*" class="sr-only" onchange="this.form.submit()">
                                            </label>
                                            <p class="text-[10px] text-slate-500 dark:text-slate-400">{{ $isAr ? 'PNG أو JPG · بحد أقصى 1 ميجابايت · يفضّل خلفية شفافة' : 'PNG or JPG · max 1MB · transparent background preferred' }}</p>
                                        </div>
                                        @if($logoPath)
                                            <button type="button" onclick="document.getElementById('resetLogoInput').value='1'; this.form.submit()"
                                                    class="text-[10px] text-red-500 hover:underline">
                                                {{ $isAr ? 'حذف الشعار' : 'Remove' }}
                                            </button>
                                            <input type="hidden" name="reset_logo" id="resetLogoInput" value="0">
                                        @endif
                                    </div>
                                </div>

                                {{-- Footer details accordion --}}
                                <details class="group rounded-xl border border-slate-200 dark:border-slate-800 p-3 bg-slate-50/50 dark:bg-navy-950/40">
                                    <summary class="cursor-pointer flex items-center justify-between text-slate-700 dark:text-slate-300 font-semibold text-xs">
                                        <span class="flex items-center gap-2">
                                            <i class="fa-solid fa-sliders text-brand-500 text-[11px]"></i>
                                            {{ $isAr ? 'نصوص وخيارات أسفل الفاتورة (التواصل، الشروط، الملاحظات)' : 'Footer details (contact info, terms, notes)' }}
                                        </span>
                                        <i class="fa-solid fa-chevron-down text-[10px] transition group-open:rotate-180 text-slate-400"></i>
                                    </summary>
                                    <div class="mt-3 space-y-3 pt-3 border-t border-slate-200 dark:border-slate-800">
                                        <div>
                                            <label class="block text-slate-600 dark:text-slate-400 mb-1 text-[11px] font-semibold">{{ $isAr ? 'نص أسفل الفاتورة' : 'Footer text' }}</label>
                                            <textarea name="footer_text" rows="2"
                                                      class="w-full rounded-xl bg-white dark:bg-navy-950 border border-slate-300 dark:border-slate-700 text-slate-900 dark:text-slate-100 p-2.5 focus:border-brand-500 focus:outline-none resize-none shadow-xs text-xs">{{ old('footer_text', $footerText) }}</textarea>
                                        </div>
                                        <div class="flex flex-wrap gap-4 pt-1">
                                            <label class="flex items-center gap-2 cursor-pointer">
                                                <input type="checkbox" name="show_footer_contact" value="1" {{ $showFooterContact ? 'checked' : '' }}
                                                       class="rounded border-slate-300 dark:border-slate-600 text-brand-500 focus:ring-brand-500">
                                                <span class="text-slate-700 dark:text-slate-300 text-xs">{{ $isAr ? 'إظهار بيانات التواصل أسفل الفاتورة' : 'Show contact info' }}</span>
                                            </label>
                                            <label class="flex items-center gap-2 cursor-pointer">
                                                <input type="checkbox" name="show_footer_terms" value="1" {{ $showFooterTerms ? 'checked' : '' }}
                                                       class="rounded border-slate-300 dark:border-slate-600 text-brand-500 focus:ring-brand-500">
                                                <span class="text-slate-700 dark:text-slate-300 text-xs">{{ $isAr ? 'إظهار شروط العرض والخدمة' : 'Show terms' }}</span>
                                            </label>
                                        </div>
                                    </div>
                                </details>
                            </div>
                        </div>

                        <div class="flex items-center gap-3 pt-2 border-t border-slate-200 dark:border-slate-800">
                            <button type="submit" class="px-6 py-2.5 rounded-xl bg-brand-500 hover:bg-brand-600 text-white font-bold transition text-xs shadow-sm flex items-center gap-2">
                                <i class="fa-solid fa-check"></i>
                                <span>{{ $isAr ? 'حفظ التغييرات' : 'Save Changes' }}</span>
                            </button>
                            <button type="button" onclick="resetTemplateDefaults()"
                                    class="px-4 py-2.5 rounded-xl border border-slate-300 dark:border-slate-700 text-slate-700 dark:text-slate-300 hover:bg-slate-100 dark:hover:bg-slate-800 transition text-xs font-semibold">
                                {{ $isAr ? 'العودة للافتراضي' : 'Reset to Default' }}
                            </button>
                        </div>
                        <p class="text-[10px] text-slate-500 dark:text-slate-400">{{ $isAr ? 'يسري على المستندات الجديدة — وما صدر قبل ذلك يحتفظ بتصميمه المعتمد.' : 'Applies to new documents — previously issued ones keep their original look.' }}</p>
                    </form>
                </div>

                {{-- Right: Saved designs (Curated 5 + Custom) --}}
                <div class="lg:col-span-2 space-y-4 text-xs">
                    {{-- 5 Ready Presets Card --}}
                    <div class="bg-white dark:bg-navy-900 border border-slate-200 dark:border-slate-800 rounded-2xl p-5 space-y-4 shadow-sm">
                        <div>
                            <div class="flex items-center justify-between mb-1">
                                <p class="font-black text-slate-900 dark:text-white text-sm flex items-center gap-2">
                                    <i class="fa-solid fa-palette text-brand-500"></i>
                                    {{ $isAr ? 'الأشكال الخمسة الجاهزة' : '5 Ready Styles' }}
                                </p>
                                <span class="px-2 py-0.5 rounded-full bg-brand-50 dark:bg-brand-500/10 text-brand-600 dark:text-brand-400 text-[10px] font-bold border border-brand-200 dark:border-brand-500/20">
                                    {{ $isAr ? '5 قوالب' : '5 Styles' }}
                                </span>
                            </div>
                            <p class="text-slate-600 dark:text-slate-400 leading-relaxed text-[11px]">
                                {{ $isAr ? 'اضغط «معاينة وتطبيق» على أي شكل لتجربته حياً في المعاينة الفورية، ثم احفظ اختيارك:' : 'Click preview on any style to see it live, then save your choice:' }}
                            </p>
                        </div>

                        <div class="space-y-2">
                            @foreach($curatedPresets as $presetKey => $preset)
                                <div class="flex items-center gap-2.5 p-2.5 rounded-xl bg-slate-50 dark:bg-navy-950 border border-slate-200 dark:border-slate-700/80 hover:border-brand-500/50 transition shadow-xs">
                                    <div class="w-4 h-4 rounded-full shrink-0 shadow-xs border border-white/50" style="background: {{ $preset['brand_color'] }}"></div>
                                    <div class="flex-1 min-w-0">
                                        <p class="font-bold text-slate-900 dark:text-slate-100 truncate text-xs">{{ $isAr ? $preset['name_ar'] : $preset['name_en'] }}</p>
                                        <p class="text-[10px] text-slate-500 dark:text-slate-400 truncate">{{ $preset['desc'] }}</p>
                                    </div>
                                    <button type="button"
                                            onclick="applyDesignLocally('{{ $preset['template'] }}', '{{ $preset['brand_color'] }}', '{{ $isAr ? 'شكراً لتعاملكم معنا' : 'Thank you for your business' }}', true, false)"
                                            class="px-2.5 py-1 rounded-lg bg-brand-500/10 hover:bg-brand-500/20 text-brand-700 dark:text-brand-300 font-bold text-[10px] transition border border-brand-500/30 shrink-0">
                                        {{ $isAr ? 'معاينة وتطبيق' : 'Apply' }}
                                    </button>
                                </div>
                            @endforeach
                        </div>
                    </div>

                    {{-- Custom Saved Designs Card --}}
                    <div class="bg-white dark:bg-navy-900 border border-slate-200 dark:border-slate-800 rounded-2xl p-5 space-y-4 shadow-sm">
                        <div>
                            <p class="font-black text-slate-900 dark:text-white text-sm mb-1 flex items-center gap-2">
                                <i class="fa-solid fa-bookmark text-brand-500"></i>
                                {{ $isAr ? 'تصاميمي المخصصة المحفوظة' : 'My Custom Saved Designs' }}
                            </p>
                            <p class="text-slate-600 dark:text-slate-400 leading-relaxed text-[11px]">
                                {{ $isAr ? 'يمكنك حفظ تشكيلتك الحالية كقالب مخصص باسم لتطبيقه في أي وقت.' : 'Save your current look by custom name to apply anytime.' }}
                            </p>
                        </div>

                        @if(count($savedDesigns) > 0)
                            <div class="space-y-2">
                                @foreach($savedDesigns as $designName => $design)
                                    <div class="flex items-center gap-2 p-2.5 rounded-xl bg-slate-50 dark:bg-navy-950 border border-slate-200 dark:border-slate-700 shadow-xs">
                                        <div class="w-3.5 h-3.5 rounded-full shrink-0 shadow-xs" style="background: {{ $design['brand_color'] ?? '#1D4ED8' }}"></div>
                                        <span class="flex-1 font-semibold text-slate-800 dark:text-slate-200 truncate text-xs">{{ $designName }}</span>
                                        <span class="text-slate-500 text-[10px] uppercase font-mono">{{ $design['template'] ?? 'classic' }}</span>
                                        <form method="POST" action="{{ route('dashboard.settings.template.design.apply', urlencode($designName)) }}">
                                            @csrf
                                            <button type="submit" class="px-2 py-0.5 rounded text-brand-600 dark:text-brand-400 hover:underline text-[10px] font-bold">{{ $isAr ? 'تطبيق' : 'Apply' }}</button>
                                        </form>
                                        <form method="POST" action="{{ route('dashboard.settings.template.design.destroy', urlencode($designName)) }}">
                                            @csrf
                                            @method('DELETE')
                                            <button type="submit" class="px-2 py-0.5 rounded text-red-500 hover:underline text-[10px] font-bold">{{ $isAr ? 'حذف' : 'Del' }}</button>
                                        </form>
                                    </div>
                                @endforeach
                            </div>
                        @else
                            <div class="p-3 rounded-xl bg-slate-50 dark:bg-navy-950 border border-dashed border-slate-200 dark:border-slate-800 text-center text-slate-500 dark:text-slate-400 text-[11px]">
                                {{ $isAr ? 'لم تحفظ أي تصميم باسم بعد. اكتب اسماً بالأسفل لحفظ التصميم الحالي.' : 'No custom designs saved yet. Name the current look below.' }}
                            </div>
                        @endif

                        <form method="POST" action="{{ route('dashboard.settings.template.save') }}" class="flex gap-2" id="saveDesignForm">
                            @csrf
                            <input type="hidden" name="template" id="saveDesignTemplate" value="{{ $currentTemplate }}">
                            <input type="hidden" name="brand_color" id="saveDesignColor" value="{{ $brandColor }}">
                            <input type="hidden" name="footer_text" id="saveDesignFooter" value="{{ $footerText }}">
                            <input type="hidden" name="show_footer_contact" id="saveDesignContact" value="{{ $showFooterContact ? '1' : '0' }}">
                            <input type="hidden" name="show_footer_terms" id="saveDesignTerms" value="{{ $showFooterTerms ? '1' : '0' }}">
                            <input type="text" name="design_name" required
                                   placeholder="{{ $isAr ? 'اسم التصميم (مثلاً: الهوية الصيفية)' : 'Design name (e.g. Summer Brand)' }}"
                                   class="flex-1 min-w-0 rounded-xl bg-slate-50 dark:bg-navy-950 border border-slate-300 dark:border-slate-700 text-slate-900 dark:text-slate-100 px-3 py-2 text-xs focus:border-brand-500 focus:outline-none shadow-xs">
                            <button type="submit" class="px-3.5 py-2 rounded-xl bg-slate-800 dark:bg-slate-700 hover:bg-slate-700 dark:hover:bg-slate-600 text-white font-bold transition text-xs shrink-0 shadow-xs">
                                {{ $isAr ? 'حفظ باسم' : 'Save Look' }}
                            </button>
                        </form>
                    </div>
                </div>
            </div>

            {{-- ===== ENLARGE PREVIEW MODAL ===== --}}
            <div id="previewModal" class="fixed inset-0 z-50 hidden" role="dialog" aria-modal="true">
                <div class="fixed inset-0 bg-slate-950/75 dark:bg-navy-950/85 backdrop-blur-sm transition-opacity" onclick="closeTemplatePreviewModal()"></div>

                <div class="fixed inset-0 z-10 overflow-y-auto p-3 sm:p-6 flex items-center justify-center">
                    <div class="bg-white dark:bg-navy-900 border border-slate-200 dark:border-slate-700 rounded-2xl shadow-2xl w-full max-w-5xl flex flex-col h-[92vh] overflow-hidden" onclick="event.stopPropagation()">
                        {{-- Modal Topbar --}}
                        <div class="flex items-center justify-between px-5 py-3 border-b border-slate-200 dark:border-slate-800 bg-slate-50 dark:bg-navy-950/70 shrink-0">
                            <div class="flex items-center gap-2.5">
                                <i class="fa-solid fa-file-invoice text-brand-500"></i>
                                <span class="font-bold text-slate-900 dark:text-white text-xs sm:text-sm">{{ $isAr ? 'معاينة القالب المكبرة' : 'Enlarged Template Preview' }}</span>
                            </div>
                            <div class="flex items-center gap-2">
                                {{-- Zoom controls --}}
                                <div class="flex items-center bg-slate-100 dark:bg-navy-900 border border-slate-200 dark:border-slate-700 rounded-lg p-0.5 text-xs text-slate-700 dark:text-slate-300">
                                    <button type="button" onclick="adjustModalZoom(-0.15)" title="{{ $isAr ? 'تصغير' : 'Zoom out' }}" class="px-2.5 py-1 hover:text-slate-900 dark:hover:text-white transition">
                                        <i class="fa-solid fa-minus text-[10px]"></i>
                                    </button>
                                    <span id="modalZoomPercent" class="px-2 font-mono text-[11px] text-slate-500 dark:text-slate-400 font-bold">100%</span>
                                    <button type="button" onclick="adjustModalZoom(0.15)" title="{{ $isAr ? 'تكبير' : 'Zoom in' }}" class="px-2.5 py-1 hover:text-slate-900 dark:hover:text-white transition">
                                        <i class="fa-solid fa-plus text-[10px]"></i>
                                    </button>
                                    <button type="button" onclick="resetModalZoom()" title="{{ $isAr ? 'إعادة ضبط' : 'Reset' }}" class="px-2 py-1 border-s border-slate-200 dark:border-slate-700 hover:text-slate-900 dark:hover:text-white text-[10px] transition">
                                        100%
                                    </button>
                                </div>
                                {{-- Open in new window --}}
                                <button type="button" onclick="openPreviewInNewTab()" class="px-3 py-1.5 rounded-lg border border-slate-300 dark:border-slate-700 text-slate-700 dark:text-slate-300 hover:bg-slate-100 dark:hover:bg-slate-800 transition text-[11px] font-semibold flex items-center gap-1.5 shadow-xs">
                                    <i class="fa-solid fa-arrow-up-right-from-square text-[10px]"></i>
                                    <span class="hidden sm:inline">{{ $isAr ? 'نافذة جديدة' : 'New tab' }}</span>
                                </button>
                                {{-- Print --}}
                                <button type="button" onclick="printModalPreview()" class="px-3 py-1.5 rounded-lg border border-slate-300 dark:border-slate-700 text-slate-700 dark:text-slate-300 hover:bg-slate-100 dark:hover:bg-slate-800 transition text-[11px] font-semibold flex items-center gap-1.5 shadow-xs">
                                    <i class="fa-solid fa-print text-[10px]"></i>
                                    <span class="hidden sm:inline">{{ $isAr ? 'طباعة' : 'Print' }}</span>
                                </button>
                                {{-- Close --}}
                                <button type="button" onclick="closeTemplatePreviewModal()" class="w-8 h-8 rounded-lg border border-slate-300 dark:border-slate-700 text-slate-500 hover:text-slate-900 dark:hover:text-white hover:bg-slate-100 dark:hover:bg-slate-800 flex items-center justify-center transition shadow-xs">
                                    <i class="fa-solid fa-xmark text-sm"></i>
                                </button>
                            </div>
                        </div>

                        {{-- Modal Body / Scrollable Iframe Container --}}
                        <div class="flex-1 bg-slate-100 dark:bg-slate-900/60 p-4 sm:p-6 overflow-auto flex items-start justify-center">
                            <div id="modalZoomWrapper" class="bg-white rounded-xl shadow-2xl overflow-hidden transition-transform duration-150 origin-top" style="width: 820px; min-height: 1120px;">
                                <iframe id="modalPreviewFrame"
                                        src=""
                                        title="{{ $isAr ? 'معاينة القالب المكبرة' : 'Enlarged invoice preview' }}"
                                        class="w-full bg-white border-0"
                                        style="height: 1120px;"></iframe>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        @endif

        {{-- ============================================================
             TAB 5: المستخدمون
        ============================================================ --}}
        @if($activeTab === 'users')
            <div class="bg-navy-900 border border-slate-800 rounded-2xl p-6 space-y-5 text-xs">
                <p class="font-black text-white text-sm">{{ $isAr ? 'المستخدمون' : 'Team Members' }}</p>

                {{-- Invite form --}}
                @if($user->role === 'owner')
                    <form method="POST" action="{{ route('dashboard.settings.users.invite') }}"
                          class="flex flex-wrap gap-2 items-end p-4 rounded-xl bg-navy-950 border border-slate-700">
                        @csrf
                        <div class="flex-1 min-w-[160px]">
                            <label class="block text-slate-400 mb-1">{{ $isAr ? 'الاسم (اختياري)' : 'Name (optional)' }}</label>
                            <input type="text" name="invite_name" placeholder="{{ $isAr ? 'الاسم (اختياري)' : 'Name (optional)' }}"
                                   class="w-full rounded-xl bg-navy-900 border border-slate-700 text-slate-100 p-2.5 focus:border-brand-500 focus:outline-none">
                        </div>
                        <div class="flex-[2] min-w-[200px]">
                            <label class="block text-slate-400 mb-1">{{ $isAr ? 'البريد الإلكتروني' : 'Email address' }}</label>
                            <input type="email" name="invite_email" required
                                   placeholder="accountant@company.sa"
                                   class="w-full rounded-xl bg-navy-900 border border-slate-700 text-slate-100 p-2.5 focus:border-brand-500 focus:outline-none">
                        </div>
                        <button type="submit"
                                class="px-4 py-2.5 rounded-xl bg-brand-500 hover:bg-brand-600 text-white font-bold transition shrink-0">
                            + {{ $isAr ? 'دعوة محاسب' : 'Invite Accountant' }}
                        </button>
                    </form>
                @endif

                {{-- Members list --}}
                <div class="space-y-2">
                    @foreach($teamMembers as $member)
                        <div class="flex items-center gap-3 p-3 rounded-xl bg-navy-950 border border-slate-700">
                            {{-- Avatar --}}
                            @if($member->avatar)
                                <img src="{{ $member->avatar }}" class="w-8 h-8 rounded-full object-cover shrink-0" alt="">
                            @else
                                <div class="w-8 h-8 rounded-full bg-brand-500 flex items-center justify-center shrink-0 text-white font-bold text-xs">
                                    {{ strtoupper(substr($member->name ?: $member->email, 0, 1)) }}
                                </div>
                            @endif
                            <div class="flex-1 min-w-0">
                                <p class="font-semibold text-slate-200 truncate">{{ $member->email }}</p>
                                @if($member->name)<p class="text-slate-500 text-[10px] truncate">{{ $member->name }}</p>@endif
                            </div>
                            {{-- Role badge --}}
                            <span class="px-2 py-0.5 rounded-full text-[10px] font-semibold shrink-0
                                {{ $member->role === 'owner' ? 'bg-brand-500/20 text-brand-300 border border-brand-500/30' : 'bg-slate-700 text-slate-300' }}">
                                {{ $member->role === 'owner' ? ($isAr ? 'مالك' : 'Owner') : ($isAr ? 'محاسب' : 'Accountant') }}
                            </span>
                            {{-- Remove button (owner only, not self) --}}
                            @if($user->role === 'owner' && $member->id !== $user->id && $member->role !== 'owner')
                                <form method="POST" action="{{ route('dashboard.settings.users.remove', $member->id) }}"
                                      onsubmit="return confirm('{{ $isAr ? 'إزالة هذا المستخدم؟' : 'Remove this user?' }}')">
                                    @csrf
                                    @method('DELETE')
                                    <button type="submit" class="text-[10px] px-2.5 py-1 rounded-lg border border-red-500/30 text-red-400 hover:bg-red-500/10 transition">
                                        {{ $isAr ? 'إزالة' : 'Remove' }}
                                    </button>
                                </form>
                            @endif
                        </div>
                    @endforeach
                </div>
                <p class="text-slate-500 text-[10px]">{{ $isAr ? 'المستخدم المدعو يدخل بنفس بريده عبر رمز التحقق — بدون كلمات مرور.' : 'Invited users sign in with their email OTP — no passwords.' }}</p>
            </div>
        @endif

        {{-- ============================================================
             TAB 6: واجهة API
        ============================================================ --}}
        @if($activeTab === 'api')
            <div class="space-y-5">
                @if(session('new_raw_key'))
                    <div class="p-4 rounded-xl bg-brand-500/10 border border-brand-500/30 text-xs space-y-2">
                        <p class="font-bold text-brand-300">{{ $isAr ? '⚠ انسخ المفتاح الآن — لن يظهر مجدداً' : '⚠ Copy the key now — it will never be shown again' }}</p>
                        <code class="block break-all text-brand-200 font-mono bg-navy-950 p-3 rounded-lg select-all">{{ session('new_raw_key') }}</code>
                    </div>
                @endif

                {{-- Create key form --}}
                <form method="POST" action="{{ route('dashboard.apikeys.store') }}"
                      class="bg-navy-900 border border-slate-800 rounded-2xl p-5 space-y-4 text-xs">
                    @csrf
                    <p class="font-black text-white text-sm">{{ $isAr ? 'إنشاء مفتاح API جديد' : 'Create New API Key' }}</p>
                    <div class="grid grid-cols-1 sm:grid-cols-3 gap-3">
                        <div class="sm:col-span-2">
                            <label class="block text-slate-400 mb-1">{{ $isAr ? 'اسم المفتاح' : 'Key Name' }}</label>
                            <input type="text" name="name" required
                                   placeholder="{{ $isAr ? 'مثال: نظام المحاسبة' : 'e.g. Accounting System' }}"
                                   class="w-full rounded-xl bg-navy-950 border border-slate-700 text-slate-100 p-2.5 focus:border-brand-500 focus:outline-none">
                        </div>
                        <div>
                            <label class="block text-slate-400 mb-1">{{ $isAr ? 'البيئة' : 'Environment' }}</label>
                            <select name="environment"
                                    class="w-full rounded-xl bg-navy-950 border border-slate-700 text-slate-200 p-2.5 focus:border-brand-500 focus:outline-none">
                                <option value="sandbox">{{ $isAr ? 'تجريبية' : 'Sandbox' }}</option>
                                <option value="production">{{ $isAr ? 'إنتاج' : 'Production' }}</option>
                            </select>
                        </div>
                    </div>
                    <button type="submit" class="px-5 py-2.5 rounded-xl bg-brand-500 hover:bg-brand-600 text-white font-bold transition">
                        {{ $isAr ? '+ إنشاء مفتاح' : '+ Create Key' }}
                    </button>
                </form>

                {{-- Keys list --}}
                @if($apiKeys->isNotEmpty())
                    <div class="bg-navy-900 border border-slate-800 rounded-2xl p-5 space-y-3 text-xs">
                        <p class="font-black text-white">{{ $isAr ? 'المفاتيح الحالية' : 'Current Keys' }}</p>
                        @foreach($apiKeys as $key)
                            <div class="flex items-center gap-3 p-3 rounded-xl bg-navy-950 border border-slate-700">
                                <i class="fa-solid fa-key text-slate-500"></i>
                                <div class="flex-1 min-w-0">
                                    <p class="font-semibold text-slate-200 truncate">{{ $key->name }}</p>
                                    <p class="font-mono text-slate-500 text-[10px]">{{ $key->key_prefix }}</p>
                                </div>
                                <span class="px-2 py-0.5 rounded-full text-[10px] {{ $key->environment === 'production' ? 'bg-brand-500/20 text-brand-300 border border-brand-500/30' : 'bg-amber-500/10 text-amber-400 border border-amber-500/20' }}">
                                    {{ $key->environment === 'production' ? ($isAr ? 'إنتاج' : 'Production') : ($isAr ? 'تجريبية' : 'Sandbox') }}
                                </span>
                                <span class="text-[10px] {{ $key->is_active ? 'text-brand-400' : 'text-slate-500' }}">
                                    {{ $key->is_active ? ($isAr ? 'نشط' : 'Active') : ($isAr ? 'معطل' : 'Disabled') }}
                                </span>
                            </div>
                        @endforeach
                    </div>
                @endif
            </div>
        @endif

    </div>{{-- end content --}}
</div>{{-- end flex --}}

@push('scripts')
<script>
    async function fetchShortAddress() {
        const raw = document.getElementById('shortAddressInput').value.trim().toUpperCase();
        if (raw.length < 4) return;
        try {
            const resp = await fetch(`https://api.address.gov.sa/NationalAddress/v3.1/shortaddress?ShortAddress=${raw}&language=A&encode=utf8&format=json`);
            if (!resp.ok) throw new Error('err');
            const data = await resp.json();
            const addr = data?.Addresses?.[0];
            if (!addr) throw new Error('nf');
            document.getElementById('fieldStreet').value   = addr.Street ?? '';
            document.getElementById('fieldBuilding').value = addr.BuildingNumber ?? '';
            document.getElementById('fieldCity').value     = addr.City ?? '';
            document.getElementById('fieldDistrict').value = addr.District ?? '';
            document.getElementById('fieldPostal').value   = addr.PostCode ?? '';
        } catch {
            alert('{{ $isAr ? 'لم نتمكن من جلب العنوان. تحقق من الرمز وحاول مجدداً.' : 'Could not fetch address. Check the code and try again.' }}');
        }
    }

    let currentModalZoom = 1.0;

    // Define globally to eliminate any residual iframe onload ReferenceErrors
    window.onPreviewIframeLoaded = function() {
        const loadingBadge = document.getElementById('previewLoadingBadge');
        if (loadingBadge) loadingBadge.classList.add('hidden');
    };

    function selectTemplate(tKey) {
        if (!tKey) return;
        const radio = document.querySelector(`input[name="template"][value="${tKey}"]`);
        if (radio) {
            radio.checked = true;
        }

        document.querySelectorAll('.template-card-box').forEach(box => {
            const key = box.getAttribute('data-template-key');
            if (key === tKey) {
                box.classList.add('border-brand-500', 'bg-brand-50/70', 'dark:bg-brand-500/10', 'ring-2', 'ring-brand-500/30');
                box.classList.remove('border-slate-200', 'dark:border-slate-700', 'bg-slate-50/50', 'dark:bg-navy-950/60');
            } else {
                box.classList.remove('border-brand-500', 'bg-brand-50/70', 'dark:bg-brand-500/10', 'ring-2', 'ring-brand-500/30');
                box.classList.add('border-slate-200', 'dark:border-slate-700', 'bg-slate-50/50', 'dark:bg-navy-950/60');
            }
        });

        syncSavedDesignFields();
        refreshTemplatePreview();
    }

    function setBrandColor(hex) {
        if (!hex) return;
        hex = hex.toUpperCase();
        if (!hex.startsWith('#')) hex = '#' + hex;

        const colorInput = document.getElementById('brandColorInput');
        const colorDisplay = document.getElementById('brandColorDisplay');
        const pickerInput = document.getElementById('colorPickerInput');

        if (colorInput) colorInput.value = hex;
        if (colorDisplay) colorDisplay.value = hex;
        if (pickerInput) pickerInput.value = hex;

        // Update active preset button highlight
        document.querySelectorAll('.preset-color-btn').forEach(btn => {
            const btnColor = (btn.getAttribute('data-preset-color') || '').toUpperCase();
            if (btnColor === hex) {
                btn.classList.add('border-brand-600', 'scale-110', 'ring-2', 'ring-brand-400', 'ring-offset-2', 'ring-offset-white', 'dark:ring-offset-navy-950');
                btn.classList.remove('border-transparent');
            } else {
                btn.classList.remove('border-brand-600', 'scale-110', 'ring-2', 'ring-brand-400', 'ring-offset-2', 'ring-offset-white', 'dark:ring-offset-navy-950');
                btn.classList.add('border-transparent');
            }
        });

        // Dynamically update brand colors on template thumbnail mockups
        document.querySelectorAll('.tpl-brand-bg').forEach(el => el.style.backgroundColor = hex);
        document.querySelectorAll('.tpl-brand-tint').forEach(el => el.style.backgroundColor = hex + '20');
        document.querySelectorAll('.tpl-brand-tint-2').forEach(el => el.style.backgroundColor = hex + '40');
        document.querySelectorAll('.tpl-brand-border').forEach(el => el.style.borderColor = hex);

        syncSavedDesignFields();
        refreshTemplatePreview();
    }

    function applyDesignLocally(template, brandColor, footerText, showContact, showTerms) {
        if (template) selectTemplate(template);
        if (brandColor) setBrandColor(brandColor);

        const footerEl = document.querySelector('textarea[name="footer_text"]');
        if (footerEl && footerText !== undefined) {
            footerEl.value = footerText;
        }

        const contactEl = document.querySelector('input[name="show_footer_contact"]');
        if (contactEl && showContact !== undefined) {
            contactEl.checked = !!showContact;
        }

        const termsEl = document.querySelector('input[name="show_footer_terms"]');
        if (termsEl && showTerms !== undefined) {
            termsEl.checked = !!showTerms;
        }

        syncSavedDesignFields();
        refreshTemplatePreview();
    }

    function syncSavedDesignFields() {
        const template = document.querySelector('input[name="template"]:checked')?.value || 'classic';
        const color = document.getElementById('brandColorInput')?.value || '#1D4ED8';
        const footer = document.querySelector('textarea[name="footer_text"]')?.value || '';
        const contact = document.querySelector('input[name="show_footer_contact"]')?.checked ? '1' : '0';
        const terms = document.querySelector('input[name="show_footer_terms"]')?.checked ? '1' : '0';

        const setVal = (id, value) => {
            const el = document.getElementById(id);
            if (el) el.value = value;
        };
        setVal('saveDesignTemplate', template);
        setVal('saveDesignColor', color);
        setVal('saveDesignFooter', footer);
        setVal('saveDesignContact', contact);
        setVal('saveDesignTerms', terms);
    }

    function templatePreviewUrl() {
        const template = document.querySelector('input[name="template"]:checked')?.value || 'classic';
        const brandColor = document.getElementById('brandColorInput')?.value || '#1D4ED8';
        const footer = document.querySelector('textarea[name="footer_text"]')?.value || '';
        const contact = document.querySelector('input[name="show_footer_contact"]')?.checked ? '1' : '0';
        const terms = document.querySelector('input[name="show_footer_terms"]')?.checked ? '1' : '0';

        const params = new URLSearchParams({
            template: template,
            brand_color: brandColor,
            footer_text: footer,
            show_footer_contact: contact,
            show_footer_terms: terms,
            _t: Date.now(),
        });

        // Use relative URL to ensure exact same origin, port, and authentication session
        const base = @json(route('dashboard.settings.template.preview', [], false));
        return base + '?' + params.toString();
    }

    let refreshPreviewTimer = null;
    function refreshTemplatePreview() {
        clearTimeout(refreshPreviewTimer);
        const loadingBadge = document.getElementById('previewLoadingBadge');
        if (loadingBadge) loadingBadge.classList.remove('hidden');

        refreshPreviewTimer = setTimeout(() => {
            const url = templatePreviewUrl();
            const frame = document.getElementById('templatePreviewFrame');
            const modalFrame = document.getElementById('modalPreviewFrame');

            if (frame) {
                frame.src = url;
            }

            const modal = document.getElementById('previewModal');
            if (modal && !modal.classList.contains('hidden') && modalFrame) {
                modalFrame.src = url;
            }
        }, 80);
    }

    const templatePreviewEl = document.getElementById('templatePreviewFrame');
    if (templatePreviewEl) {
        templatePreviewEl.addEventListener('load', () => {
            const loadingBadge = document.getElementById('previewLoadingBadge');
            if (loadingBadge) loadingBadge.classList.add('hidden');
        });
    }

    const modalPreviewEl = document.getElementById('modalPreviewFrame');
    if (modalPreviewEl) {
        modalPreviewEl.addEventListener('load', () => {
            const loadingBadge = document.getElementById('previewLoadingBadge');
            if (loadingBadge) loadingBadge.classList.add('hidden');
        });
    }

    function expandTemplatePreview() {
        const modal = document.getElementById('previewModal');
        const modalFrame = document.getElementById('modalPreviewFrame');
        if (!modal || !modalFrame) return;

        modalFrame.src = templatePreviewUrl();
        currentModalZoom = 1.0;
        applyModalZoom();
        modal.classList.remove('hidden');
        document.body.classList.add('overflow-hidden');
    }

    function closeTemplatePreviewModal() {
        const modal = document.getElementById('previewModal');
        if (!modal) return;
        modal.classList.add('hidden');
        document.body.classList.remove('overflow-hidden');
    }

    function adjustModalZoom(delta) {
        currentModalZoom = Math.max(0.6, Math.min(1.6, currentModalZoom + delta));
        applyModalZoom();
    }

    function resetModalZoom() {
        currentModalZoom = 1.0;
        applyModalZoom();
    }

    function applyModalZoom() {
        const wrapper = document.getElementById('modalZoomWrapper');
        const percent = document.getElementById('modalZoomPercent');
        if (wrapper) {
            wrapper.style.transform = `scale(${currentModalZoom})`;
        }
        if (percent) {
            percent.textContent = `${Math.round(currentModalZoom * 100)}%`;
        }
    }

    function openPreviewInNewTab() {
        window.open(templatePreviewUrl(), '_blank');
    }

    function printModalPreview() {
        const modalFrame = document.getElementById('modalPreviewFrame');
        if (modalFrame && modalFrame.contentWindow) {
            modalFrame.contentWindow.focus();
            modalFrame.contentWindow.print();
        }
    }

    // Close preview modal on Escape
    document.addEventListener('keydown', (e) => {
        if (e.key === 'Escape') {
            closeTemplatePreviewModal();
        }
    });

    document.querySelectorAll('input[name="template"]').forEach((input) => {
        input.addEventListener('change', () => {
            selectTemplate(input.value);
        });
    });

    document.querySelector('textarea[name="footer_text"]')?.addEventListener('input', () => {
        syncSavedDesignFields();
        refreshTemplatePreview();
    });

    document.querySelector('input[name="show_footer_contact"]')?.addEventListener('change', () => {
        syncSavedDesignFields();
        refreshTemplatePreview();
    });

    document.querySelector('input[name="show_footer_terms"]')?.addEventListener('change', () => {
        syncSavedDesignFields();
        refreshTemplatePreview();
    });

    document.getElementById('saveDesignForm')?.addEventListener('submit', syncSavedDesignFields);

    function resetTemplateDefaults() {
        if (confirm('{{ $isAr ? 'إعادة ضبط التصميم للافتراضي؟' : 'Reset design to defaults?' }}')) {
            applyDesignLocally('classic', '#1D4ED8', '', false, false);
        }
    }

    // Expose all handlers to window to ensure global availability
    window.selectTemplate = selectTemplate;
    window.setBrandColor = setBrandColor;
    window.applyDesignLocally = applyDesignLocally;
    window.refreshTemplatePreview = refreshTemplatePreview;
    window.expandTemplatePreview = expandTemplatePreview;
    window.closeTemplatePreviewModal = closeTemplatePreviewModal;
    window.adjustModalZoom = adjustModalZoom;
    window.resetModalZoom = resetModalZoom;
    window.openPreviewInNewTab = openPreviewInNewTab;
    window.printModalPreview = printModalPreview;
    window.resetTemplateDefaults = resetTemplateDefaults;

    // Highlight initial active color preset on load
    const initialBrandColor = document.getElementById('brandColorInput')?.value;
    if (initialBrandColor) {
        document.querySelectorAll('.preset-color-btn').forEach(btn => {
            const btnColor = (btn.getAttribute('data-preset-color') || '').toUpperCase();
            if (btnColor === initialBrandColor.toUpperCase()) {
                btn.classList.add('border-brand-600', 'scale-110', 'ring-2', 'ring-brand-400', 'ring-offset-2', 'ring-offset-white', 'dark:ring-offset-navy-950');
                btn.classList.remove('border-transparent');
            }
        });
    }
</script>
@endpush

@endsection