<div class="mb-8">
    <div class="flex items-center gap-3 mb-6 pb-4 border-b border-slate-100">
        <div class="p-2 bg-indigo-50 rounded-lg text-indigo-600">
            <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" 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"></path></svg>
        </div>
        <div>
            <h3 class="text-xl font-bold text-slate-800">هوية النظام والتصميم</h3>
            <p class="text-slate-500 text-sm mt-1">تخصيص أسماء الواجهات والخطوط المستخدمة في النظام والتقارير.</p>
        </div>
    </div>

    <!-- Live Preview -->
    <div class="mb-8 p-6 bg-slate-50 border border-slate-200 rounded-2xl">
        <h4 class="text-xs font-bold text-slate-400 uppercase mb-4 tracking-wider">معاينة حية (Live Preview)</h4>
        <div style="font-family: '{{ $form['font_ui'] }}', sans-serif;" class="p-4 bg-slate-900 text-white rounded-xl shadow-lg flex justify-between items-center">
            <span class="font-bold text-lg">{{ $form['site_name'] ?: 'Ledger ERP' }}</span>
            <span class="text-sm opacity-80">القائمة الرئيسية</span>
        </div>
        <div style="font-family: '{{ $form['font_print'] }}', sans-serif;" class="mt-4 p-4 bg-white text-black border border-slate-300 rounded-xl text-center shadow-sm">
            <span class="font-bold text-lg border-b border-black pb-1">نموذج لخط الطباعة في التقارير الماليــة</span>
        </div>
    </div>

    <div class="grid grid-cols-1 md:grid-cols-2 gap-y-8 gap-x-10">
        <div>
            <label class="block text-sm font-bold text-slate-700 mb-2">اسم الموقع</label>
            <input type="text" wire:model.live="form.site_name" class="w-full border-slate-200 rounded-xl shadow-sm focus:ring-indigo-500 focus:border-indigo-500 text-sm p-3">
        </div>
        <div>
            <label class="block text-sm font-bold text-slate-700 mb-2">خط الواجهة (Google Fonts)</label>
            <select wire:model.live="form.font_ui" class="w-full border-slate-200 rounded-xl shadow-sm focus:ring-indigo-500 focus:border-indigo-500 text-sm p-3 bg-slate-50">
                <option value="Tajawal">Tajawal</option>
                <option value="Cairo">Cairo</option>
                <option value="Almarai">Almarai</option>
                <option value="Google Sans">Google Sans</option>
                <option value="Inter">Inter</option>
                <option value="Lato">Lato</option>
                <option value="Noto Sans Arabic">Noto Sans Arabic</option>
                <option value="Open Sans">Open Sans</option>
                <option value="Readex Pro">Readex Pro</option>
                <option value="Roboto">Roboto</option>
                <option value="Rubik">Rubik</option>
                <option value="Zain">Zain</option>
            </select>
        </div>
        <div>
            <label class="block text-sm font-bold text-slate-700 mb-2">خط المطبوعات والتقارير</label>
            <select wire:model.live="form.font_print" class="w-full border-slate-200 rounded-xl shadow-sm focus:ring-indigo-500 focus:border-indigo-500 text-sm p-3 bg-slate-50">
                <option value="Tajawal">Tajawal</option>
                <option value="Cairo">Cairo</option>
                <option value="Almarai">Almarai</option>
                <option value="Google Sans">Google Sans</option>
                <option value="Inter">Inter</option>
                <option value="Lato">Lato</option>
                <option value="Noto Sans Arabic">Noto Sans Arabic</option>
                <option value="Open Sans">Open Sans</option>
                <option value="Readex Pro">Readex Pro</option>
                <option value="Roboto">Roboto</option>
                <option value="Rubik">Rubik</option>
                <option value="Zain">Zain</option>
            </select>
        </div>
        <div>
            <label class="block text-sm font-bold text-slate-700 mb-2">أيقونة الموقع (Favicon URL) (مربع 32x32)</label>
            <input type="text" wire:model.live="form.icon_url" class="w-full border-slate-200 rounded-xl shadow-sm focus:ring-indigo-500 focus:border-indigo-500 text-sm p-3" placeholder="https://example.com/icon.png">
        </div>
        <div>
            <label class="block text-sm font-bold text-slate-700 mb-2">شعار الموقع (Logo URL) (مستطيل)</label>
            <input type="text" wire:model.live="form.logo_url" class="w-full border-slate-200 rounded-xl shadow-sm focus:ring-indigo-500 focus:border-indigo-500 text-sm p-3" placeholder="https://example.com/logo.png">
        </div>
        <div class="md:col-span-2">
            <label class="block text-sm font-bold text-slate-700 mb-2">خلفية شاشة الدخول (Login Background URL) (1920x1080)</label>
            <input type="text" wire:model.live="form.login_bg_url" class="w-full border-slate-200 rounded-xl shadow-sm focus:ring-indigo-500 focus:border-indigo-500 text-sm p-3" placeholder="https://example.com/bg.jpg">
        </div>
    </div>
</div>
