<div class="max-w-5xl mx-auto space-y-6">

    {{-- Page Header --}}
    <div>
        <h1 class="text-2xl font-bold text-white tracking-tight">⚙️ Pengaturan Sekolah</h1>
        <p class="text-sm text-slate-400 mt-1">Kelola profil sekolah, logo, favicon, kop surat, dan tanda tangan kepala sekolah untuk diterapkan ke seluruh sistem.</p>
    </div>

    {{-- Tab Navigation --}}
    <div class="flex flex-wrap gap-1 bg-slate-900 border border-slate-800 rounded-2xl p-1.5">
        @foreach([
            'profil' => '🏫 Profil Sekolah',
            'kopsurat' => '📄 Kop Surat',
            'logo' => '🖼️ Logo & Favicon',
            'kepsek' => '👤 Kepala Sekolah',
            'aplikasi' => '💻 Aplikasi',
        ] as $tab => $label)
            <button wire:click="setTab('{{ $tab }}')"
                class="px-4 py-2 rounded-xl text-xs font-semibold transition-all {{ $activeTab === $tab ? 'bg-sky-600 text-white shadow-lg shadow-sky-600/20' : 'text-slate-400 hover:bg-slate-800 hover:text-white' }}">
                {{ $label }}
            </button>
        @endforeach
    </div>

    {{-- ======================== TAB: PROFIL SEKOLAH ======================== --}}
    @if($activeTab === 'profil')
    <div class="bg-slate-900 border border-slate-800 rounded-2xl p-6 shadow-sm">
        <h2 class="text-sm font-bold text-white mb-5 pb-3 border-b border-slate-800 flex items-center gap-2">
            <span class="w-7 h-7 rounded-lg bg-sky-600/20 text-sky-400 flex items-center justify-center text-sm">🏫</span>
            Profil Sekolah
        </h2>

        <form wire:submit="saveProfile" class="space-y-4">
            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                <div>
                    <label class="block text-xs font-semibold text-slate-300 uppercase mb-1">Nama Sekolah (Singkat)</label>
                    <input wire:model="school_name" type="text" class="w-full px-3 py-2.5 rounded-xl bg-slate-950 border border-slate-800 text-white text-sm focus:border-sky-500 focus:ring-1 focus:ring-sky-500 transition" placeholder="SMKN 1 Gunung Agung">
                    @error('school_name') <p class="text-xs text-rose-400 mt-1">{{ $message }}</p> @enderror
                </div>
                <div>
                    <label class="block text-xs font-semibold text-slate-300 uppercase mb-1">Nama Sekolah (Formal/Lengkap)</label>
                    <input wire:model="school_name_formal" type="text" class="w-full px-3 py-2.5 rounded-xl bg-slate-950 border border-slate-800 text-white text-sm focus:border-sky-500 focus:ring-1 focus:ring-sky-500 transition" placeholder="SMK Negeri 1 Gunung Agung">
                    @error('school_name_formal') <p class="text-xs text-rose-400 mt-1">{{ $message }}</p> @enderror
                </div>
            </div>

            <div>
                <label class="block text-xs font-semibold text-slate-300 uppercase mb-1">NPSN</label>
                <input wire:model="school_npsn" type="text" class="w-full px-3 py-2.5 rounded-xl bg-slate-950 border border-slate-800 text-white text-sm focus:border-sky-500 focus:ring-1 focus:ring-sky-500 transition" placeholder="69998765">
            </div>

            <div>
                <label class="block text-xs font-semibold text-slate-300 uppercase mb-1">Alamat Lengkap</label>
                <textarea wire:model="school_address" rows="2" class="w-full px-3 py-2.5 rounded-xl bg-slate-950 border border-slate-800 text-white text-sm focus:border-sky-500 focus:ring-1 focus:ring-sky-500 transition" placeholder="Jl. Raya Tunas Jaya, Kec. Gunung Agung..."></textarea>
            </div>

            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                <div>
                    <label class="block text-xs font-semibold text-slate-300 uppercase mb-1">Kota / Kecamatan</label>
                    <input wire:model="school_city" type="text" class="w-full px-3 py-2.5 rounded-xl bg-slate-950 border border-slate-800 text-white text-sm focus:border-sky-500 focus:ring-1 focus:ring-sky-500 transition" placeholder="Gunung Agung">
                </div>
                <div>
                    <label class="block text-xs font-semibold text-slate-300 uppercase mb-1">Kode Pos</label>
                    <input wire:model="school_postal_code" type="text" class="w-full px-3 py-2.5 rounded-xl bg-slate-950 border border-slate-800 text-white text-sm focus:border-sky-500 focus:ring-1 focus:ring-sky-500 transition" placeholder="34483">
                </div>
            </div>

            <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
                <div>
                    <label class="block text-xs font-semibold text-slate-300 uppercase mb-1">Telepon</label>
                    <input wire:model="school_phone" type="text" class="w-full px-3 py-2.5 rounded-xl bg-slate-950 border border-slate-800 text-white text-sm focus:border-sky-500 focus:ring-1 focus:ring-sky-500 transition" placeholder="(0722) 123456">
                </div>
                <div>
                    <label class="block text-xs font-semibold text-slate-300 uppercase mb-1">Email</label>
                    <input wire:model="school_email" type="email" class="w-full px-3 py-2.5 rounded-xl bg-slate-950 border border-slate-800 text-white text-sm focus:border-sky-500 focus:ring-1 focus:ring-sky-500 transition" placeholder="info@smkn1ga.sch.id">
                </div>
                <div>
                    <label class="block text-xs font-semibold text-slate-300 uppercase mb-1">Website</label>
                    <input wire:model="school_website" type="text" class="w-full px-3 py-2.5 rounded-xl bg-slate-950 border border-slate-800 text-white text-sm focus:border-sky-500 focus:ring-1 focus:ring-sky-500 transition" placeholder="https://smkn1ga.sch.id">
                </div>
            </div>

            <div class="pt-2">
                <button type="submit" wire:loading.attr="disabled" class="px-6 py-2.5 rounded-xl bg-sky-600 hover:bg-sky-500 text-white font-semibold text-sm shadow-lg shadow-sky-600/20 transition-all flex items-center gap-2">
                    <svg wire:loading.remove wire:target="saveProfile" class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
                    <svg wire:loading wire:target="saveProfile" class="animate-spin h-4 w-4" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"></path></svg>
                    💾 Simpan Profil Sekolah
                </button>
            </div>
        </form>
    </div>
    @endif

    {{-- ======================== TAB: KOP SURAT ======================== --}}
    @if($activeTab === 'kopsurat')
    <div class="bg-slate-900 border border-slate-800 rounded-2xl p-6 shadow-sm">
        <h2 class="text-sm font-bold text-white mb-5 pb-3 border-b border-slate-800 flex items-center gap-2">
            <span class="w-7 h-7 rounded-lg bg-amber-600/20 text-amber-400 flex items-center justify-center text-sm">📄</span>
            Pengaturan Kop Surat Resmi
        </h2>

        <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
            {{-- Form --}}
            <form wire:submit="saveLetterhead" class="space-y-4">
                <div>
                    <label class="block text-xs font-semibold text-slate-300 uppercase mb-1">Nama Provinsi</label>
                    <input wire:model="school_province" type="text" class="w-full px-3 py-2.5 rounded-xl bg-slate-950 border border-slate-800 text-white text-sm focus:border-sky-500 focus:ring-1 focus:ring-sky-500 transition" placeholder="PROVINSI LAMPUNG">
                </div>
                <div>
                    <label class="block text-xs font-semibold text-slate-300 uppercase mb-1">Nama Dinas</label>
                    <input wire:model="school_dinas" type="text" class="w-full px-3 py-2.5 rounded-xl bg-slate-950 border border-slate-800 text-white text-sm focus:border-sky-500 focus:ring-1 focus:ring-sky-500 transition" placeholder="DINAS PENDIDIKAN DAN KEBUDAYAAN">
                </div>
                <div>
                    <label class="block text-xs font-semibold text-slate-300 uppercase mb-1">Kabupaten / Kota</label>
                    <input wire:model="school_regency" type="text" class="w-full px-3 py-2.5 rounded-xl bg-slate-950 border border-slate-800 text-white text-sm focus:border-sky-500 focus:ring-1 focus:ring-sky-500 transition" placeholder="KAB. TULANG BAWANG BARAT">
                </div>
                <div class="pt-2">
                    <button type="submit" wire:loading.attr="disabled" class="px-6 py-2.5 rounded-xl bg-sky-600 hover:bg-sky-500 text-white font-semibold text-sm shadow-lg shadow-sky-600/20 transition-all flex items-center gap-2">
                        <svg wire:loading.remove wire:target="saveLetterhead" class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
                        <svg wire:loading wire:target="saveLetterhead" class="animate-spin h-4 w-4" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"></path></svg>
                        <span>💾 Simpan Kop Surat</span>
                    </button>
                </div>
            </form>

            {{-- Preview --}}
            <div>
                <label class="block text-xs font-semibold text-slate-400 uppercase mb-2">Preview Kop Surat</label>
                <div class="bg-white text-black rounded-xl p-6 shadow-inner">
                    <div class="text-center border-b-4 border-double border-black pb-3">
                        <div class="flex items-center justify-center gap-4">
                            @if($logoUrl)
                                <img src="{{ $logoUrl }}" alt="Logo" class="w-16 h-16 object-contain">
                            @else
                                <div class="w-16 h-16 bg-gray-200 rounded-lg flex items-center justify-center text-gray-400 text-[10px]">Logo</div>
                            @endif
                            <div>
                                <p class="text-xs font-bold uppercase">PEMERINTAH {{ $school_province ?: 'PROVINSI ...' }}</p>
                                <p class="text-xs font-bold uppercase">{{ $school_dinas ?: 'DINAS ...' }}</p>
                                <p class="text-base font-black uppercase">{{ $school_name_formal ?: 'SMK NEGERI ...' }}</p>
                                <p class="text-[10px] italic">{{ $school_address ?: 'Alamat sekolah...' }} {{ $school_postal_code }}</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    @endif

    {{-- ======================== TAB: LOGO & FAVICON ======================== --}}
    @if($activeTab === 'logo')
    <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
        {{-- Logo Upload --}}
        <div class="bg-slate-900 border border-slate-800 rounded-2xl p-6 shadow-sm">
            <h2 class="text-sm font-bold text-white mb-4 pb-3 border-b border-slate-800 flex items-center gap-2">
                <span class="w-7 h-7 rounded-lg bg-emerald-600/20 text-emerald-400 flex items-center justify-center text-sm">🖼️</span>
                Logo Sekolah
            </h2>

            {{-- Current Logo Preview --}}
            <div class="mb-4">
                @if($logoUrl)
                    <div class="relative inline-block">
                        <img src="{{ $logoUrl }}" alt="Logo Sekolah" class="w-32 h-32 object-contain rounded-xl border border-slate-700 bg-slate-950 p-2">
                        <button x-on:click="confirmAction({
                            title: '🖼️ Hapus Logo Sekolah?',
                            text: 'Logo sekolah akan dihapus dari sistem.',
                            icon: 'warning',
                            confirmButtonText: 'Ya, Hapus Logo!',
                            confirmButtonColor: '#e11d48'
                        }).then(r => r.isConfirmed && $wire.deleteLogo())" class="absolute -top-2 -right-2 w-6 h-6 bg-rose-600 hover:bg-rose-500 text-white rounded-full flex items-center justify-center text-xs shadow-lg">✕</button>
                    </div>
                @elseif($logoFile)
                    <div class="relative inline-block">
                        <img src="{{ $logoFile->temporaryUrl() }}" alt="Preview" class="w-32 h-32 object-contain rounded-xl border border-emerald-600 bg-slate-950 p-2">
                        <span class="absolute -top-2 -right-2 px-2 py-0.5 bg-emerald-600 text-white rounded-full text-[10px] font-bold">Preview</span>
                    </div>
                @else
                    <div class="w-32 h-32 rounded-xl border-2 border-dashed border-slate-700 flex items-center justify-center text-slate-500 text-xs">
                        Belum ada logo
                    </div>
                @endif
            </div>

            <form wire:submit="uploadLogo" class="space-y-3">
                <div>
                    <input wire:model="logoFile" type="file" accept="image/*" class="w-full text-xs text-slate-400 file:mr-3 file:py-2 file:px-4 file:rounded-lg file:border-0 file:text-xs file:font-semibold file:bg-sky-600 file:text-white hover:file:bg-sky-500 file:cursor-pointer">
                    <p class="text-[10px] text-slate-500 mt-1">Format: PNG, JPG, SVG, WebP. Maks 2 MB. Latar belakang transparan (PNG) direkomendasikan.</p>
                    @error('logoFile') <p class="text-xs text-rose-400 mt-1">{{ $message }}</p> @enderror
                </div>
                <button type="submit" wire:loading.attr="disabled" wire:target="logoFile,uploadLogo" class="px-5 py-2 rounded-xl bg-emerald-600 hover:bg-emerald-500 text-white font-semibold text-xs shadow-lg shadow-emerald-600/20 transition-all">
                    ⬆️ Upload Logo
                </button>
            </form>
        </div>

        {{-- Favicon Upload --}}
        <div class="bg-slate-900 border border-slate-800 rounded-2xl p-6 shadow-sm">
            <h2 class="text-sm font-bold text-white mb-4 pb-3 border-b border-slate-800 flex items-center gap-2">
                <span class="w-7 h-7 rounded-lg bg-violet-600/20 text-violet-400 flex items-center justify-center text-sm">🌐</span>
                Favicon (Ikon Tab Browser)
            </h2>

            {{-- Current Favicon Preview --}}
            <div class="mb-4">
                @if($faviconUrl)
                    <div class="relative inline-block">
                        <img src="{{ $faviconUrl }}" alt="Favicon" class="w-16 h-16 object-contain rounded-lg border border-slate-700 bg-slate-950 p-1">
                        <button x-on:click="confirmAction({
                            title: '🌐 Hapus Favicon?',
                            text: 'Favicon akan dikembalikan ke ikon default sistem.',
                            icon: 'warning',
                            confirmButtonText: 'Ya, Hapus Favicon!',
                            confirmButtonColor: '#e11d48'
                        }).then(r => r.isConfirmed && $wire.deleteFavicon())" class="absolute -top-2 -right-2 w-6 h-6 bg-rose-600 hover:bg-rose-500 text-white rounded-full flex items-center justify-center text-xs shadow-lg">✕</button>
                    </div>
                    <p class="text-[10px] text-emerald-400 mt-2">✅ Favicon aktif — terlihat di tab browser pada semua halaman.</p>
                @elseif($faviconFile)
                    <div class="relative inline-block">
                        <img src="{{ $faviconFile->temporaryUrl() }}" alt="Preview" class="w-16 h-16 object-contain rounded-lg border border-emerald-600 bg-slate-950 p-1">
                        <span class="absolute -top-2 -right-2 px-2 py-0.5 bg-emerald-600 text-white rounded-full text-[10px] font-bold">Preview</span>
                    </div>
                @else
                    <div class="w-16 h-16 rounded-lg border-2 border-dashed border-slate-700 flex items-center justify-center text-slate-500 text-[10px]">
                        Default
                    </div>
                    <p class="text-[10px] text-slate-500 mt-2">Menggunakan favicon default bawaan sistem.</p>
                @endif
            </div>

            <form wire:submit="uploadFavicon" class="space-y-3">
                <div>
                    <input wire:model="faviconFile" type="file" accept=".ico,.png,.jpg,.jpeg,.svg,.webp" class="w-full text-xs text-slate-400 file:mr-3 file:py-2 file:px-4 file:rounded-lg file:border-0 file:text-xs file:font-semibold file:bg-violet-600 file:text-white hover:file:bg-violet-500 file:cursor-pointer">
                    <p class="text-[10px] text-slate-500 mt-1">Format: ICO, PNG, JPG, SVG. Maks 1 MB. Ukuran 32×32 atau 64×64 px ideal.</p>
                    @error('faviconFile') <p class="text-xs text-rose-400 mt-1">{{ $message }}</p> @enderror
                </div>
                <button type="submit" wire:loading.attr="disabled" wire:target="faviconFile,uploadFavicon" class="px-5 py-2 rounded-xl bg-violet-600 hover:bg-violet-500 text-white font-semibold text-xs shadow-lg shadow-violet-600/20 transition-all">
                    ⬆️ Upload Favicon
                </button>
            </form>
        </div>
    </div>
    @endif

    {{-- ======================== TAB: KEPALA SEKOLAH ======================== --}}
    @if($activeTab === 'kepsek')
    <div class="bg-slate-900 border border-slate-800 rounded-2xl p-6 shadow-sm">
        <h2 class="text-sm font-bold text-white mb-5 pb-3 border-b border-slate-800 flex items-center gap-2">
            <span class="w-7 h-7 rounded-lg bg-indigo-600/20 text-indigo-400 flex items-center justify-center text-sm">👤</span>
            Data Kepala Sekolah & Tanda Tangan
        </h2>

        <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
            {{-- Form --}}
            <form wire:submit="savePrincipal" class="space-y-4">
                <div>
                    <label class="block text-xs font-semibold text-slate-300 uppercase mb-1">Nama Lengkap Kepala Sekolah</label>
                    <input wire:model="principal_name" type="text" class="w-full px-3 py-2.5 rounded-xl bg-slate-950 border border-slate-800 text-white text-sm focus:border-sky-500 focus:ring-1 focus:ring-sky-500 transition" placeholder="Drs. H. Ahmad Fauzi, M.Pd.">
                </div>
                <div>
                    <label class="block text-xs font-semibold text-slate-300 uppercase mb-1">NIP Kepala Sekolah</label>
                    <input wire:model="principal_nip" type="text" class="w-full px-3 py-2.5 rounded-xl bg-slate-950 border border-slate-800 text-white text-sm focus:border-sky-500 focus:ring-1 focus:ring-sky-500 transition" placeholder="19750101 200003 1 002">
                </div>
                <div class="pt-2">
                    <button type="submit" wire:loading.attr="disabled" class="px-6 py-2.5 rounded-xl bg-sky-600 hover:bg-sky-500 text-white font-semibold text-sm shadow-lg shadow-sky-600/20 transition-all flex items-center gap-2">
                        <svg wire:loading.remove wire:target="savePrincipal" class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
                        <svg wire:loading wire:target="savePrincipal" class="animate-spin h-4 w-4" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"></path></svg>
                        <span>💾 Simpan Data Kepala Sekolah</span>
                    </button>
                </div>
            </form>

            {{-- TTD Upload --}}
            <div class="space-y-4">
                <label class="block text-xs font-semibold text-slate-300 uppercase">Tanda Tangan Digital (Gambar)</label>

                @if($signatureUrl)
                    <div class="relative inline-block">
                        <img src="{{ $signatureUrl }}" alt="TTD Kepala Sekolah" class="max-w-[200px] max-h-[100px] object-contain rounded-xl border border-slate-700 bg-white p-3">
                        <button x-on:click="confirmAction({
                            title: '🖋️ Hapus Tanda Tangan?',
                            text: 'Gambar tanda tangan digital kepala sekolah akan dihapus dari sistem.',
                            icon: 'warning',
                            confirmButtonText: 'Ya, Hapus TTD!',
                            confirmButtonColor: '#e11d48'
                        }).then(r => r.isConfirmed && $wire.deleteSignature())" class="absolute -top-2 -right-2 w-6 h-6 bg-rose-600 hover:bg-rose-500 text-white rounded-full flex items-center justify-center text-xs shadow-lg">✕</button>
                    </div>
                @elseif($signatureFile)
                    <div class="relative inline-block">
                        <img src="{{ $signatureFile->temporaryUrl() }}" alt="Preview TTD" class="max-w-[200px] max-h-[100px] object-contain rounded-xl border border-emerald-600 bg-white p-3">
                        <span class="absolute -top-2 -right-2 px-2 py-0.5 bg-emerald-600 text-white rounded-full text-[10px] font-bold">Preview</span>
                    </div>
                @else
                    <div class="w-48 h-24 rounded-xl border-2 border-dashed border-slate-700 flex items-center justify-center text-slate-500 text-xs">
                        Belum ada TTD
                    </div>
                @endif

                <form wire:submit="uploadSignature" class="space-y-3">
                    <input wire:model="signatureFile" type="file" accept="image/*" class="w-full text-xs text-slate-400 file:mr-3 file:py-2 file:px-4 file:rounded-lg file:border-0 file:text-xs file:font-semibold file:bg-indigo-600 file:text-white hover:file:bg-indigo-500 file:cursor-pointer">
                    <p class="text-[10px] text-slate-500">Scan tanda tangan dengan latar belakang putih/transparan. Format PNG direkomendasikan.</p>
                    @error('signatureFile') <p class="text-xs text-rose-400 mt-1">{{ $message }}</p> @enderror
                    <button type="submit" wire:loading.attr="disabled" wire:target="signatureFile,uploadSignature" class="px-5 py-2 rounded-xl bg-indigo-600 hover:bg-indigo-500 text-white font-semibold text-xs shadow-lg shadow-indigo-600/20 transition-all">
                        ⬆️ Upload Tanda Tangan
                    </button>
                </form>

                {{-- Preview di Surat --}}
                @if($signatureUrl || !empty($principal_name))
                <div class="mt-4 pt-4 border-t border-slate-800">
                    <label class="block text-xs font-semibold text-slate-400 uppercase mb-2">Preview di Surat Resmi</label>
                    <div class="bg-white text-black rounded-xl p-4 text-center inline-block">
                        <p class="text-[11px]">Mengetahui,</p>
                        <p class="text-[11px] font-bold">Kepala {{ $school_name_formal ?: 'Sekolah' }}</p>
                        @if($signatureUrl)
                            <img src="{{ $signatureUrl }}" alt="TTD" class="mx-auto my-2 max-w-[120px] max-h-[60px] object-contain">
                        @else
                            <div class="my-4"></div>
                        @endif
                        <p class="text-[11px] font-bold underline">{{ $principal_name ?: '( __________ )' }}</p>
                        <p class="text-[10px]">NIP. {{ $principal_nip ?: '...' }}</p>
                    </div>
                </div>
                @endif
            </div>
        </div>
    </div>
    @endif

    {{-- ======================== TAB: PENGATURAN APLIKASI ======================== --}}
    @if($activeTab === 'aplikasi')
    <div class="bg-slate-900 border border-slate-800 rounded-2xl p-6 shadow-sm">
        <h2 class="text-sm font-bold text-white mb-5 pb-3 border-b border-slate-800 flex items-center gap-2">
            <span class="w-7 h-7 rounded-lg bg-cyan-600/20 text-cyan-400 flex items-center justify-center text-sm">💻</span>
            Pengaturan Aplikasi
        </h2>

        <form wire:submit="saveAppSettings" class="space-y-4 max-w-lg">
            <div>
                <label class="block text-xs font-semibold text-slate-300 uppercase mb-1">Nama Aplikasi</label>
                <input wire:model="app_name" type="text" class="w-full px-3 py-2.5 rounded-xl bg-slate-950 border border-slate-800 text-white text-sm focus:border-sky-500 focus:ring-1 focus:ring-sky-500 transition" placeholder="Sistem Absensi Fingerprint">
                <p class="text-[10px] text-slate-500 mt-1">Ditampilkan di judul halaman browser, sidebar, dan halaman login.</p>
                @error('app_name') <p class="text-xs text-rose-400 mt-1">{{ $message }}</p> @enderror
            </div>

            <div class="pt-2">
                <button type="submit" wire:loading.attr="disabled" class="px-6 py-2.5 rounded-xl bg-sky-600 hover:bg-sky-500 text-white font-semibold text-sm shadow-lg shadow-sky-600/20 transition-all flex items-center gap-2">
                        <svg wire:loading.remove wire:target="saveAppSettings" class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
                        <svg wire:loading wire:target="saveAppSettings" class="animate-spin h-4 w-4" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"></path></svg>
                        <span>💾 Simpan Pengaturan Aplikasi</span>
                </button>
            </div>
        </form>

        {{-- Info --}}
        <div class="mt-6 p-4 rounded-xl bg-slate-950 border border-slate-800">
            <p class="text-xs font-semibold text-slate-300 mb-2">ℹ️ Dimana pengaturan ini diterapkan?</p>
            <ul class="text-[11px] text-slate-400 space-y-1 list-disc list-inside">
                <li><strong>Logo Sekolah</strong> → Sidebar navigasi, halaman login, kop surat PDF</li>
                <li><strong>Favicon</strong> → Ikon tab browser di semua halaman (termasuk login)</li>
                <li><strong>Nama Sekolah</strong> → Judul halaman, sidebar, login, kop surat, pesan WA</li>
                <li><strong>Kop Surat</strong> → Laporan cetak PDF (provinsi, dinas, sekolah, alamat)</li>
                <li><strong>TTD Kepala Sekolah</strong> → Footer laporan cetak PDF</li>
            </ul>
        </div>
    </div>
    @endif

</div>
