@extends('layouts.admin')

@section('title', 'Pengaturan Sekolah')

@section('content')
    <div
        class="bg-white dark:bg-gray-900 rounded-2xl shadow-2xl p-6 border border-gray-300 dark:border-gray-700 transition-all duration-300">
        <h2 class="text-2xl font-semibold text-gray-800 dark:text-gray-100 mb-6">Pengaturan Sekolah</h2>

        {{-- ✅ Toast Notification --}}
        @if (session('success'))
            <div id="toast-success"
                class="fixed top-5 right-5 z-50 flex items-center w-auto max-w-sm p-4 mb-4 text-green-800 bg-green-100 border border-green-300 rounded-xl shadow-lg dark:text-green-200 dark:bg-green-900 dark:border-green-700 animate-slide-in">
                <i class="fa-solid fa-circle-check mr-3 text-green-600 dark:text-green-400"></i>
                <span class="text-sm font-medium">{{ session('success') }}</span>
            </div>
        @endif

        @if ($errors->any())
            <div id="toast-error"
                class="fixed top-5 right-5 z-50 flex items-center w-auto max-w-sm p-4 mb-4 text-red-800 bg-red-100 border border-red-300 rounded-xl shadow-lg dark:text-red-200 dark:bg-red-900 dark:border-red-700 animate-slide-in">
                <i class="fa-solid fa-triangle-exclamation mr-3 text-red-600 dark:text-red-400"></i>
                <div class="text-sm font-medium">
                    <ul class="list-disc list-inside">
                        @foreach ($errors->all() as $error)
                            <li>{{ $error }}</li>
                        @endforeach
                    </ul>
                </div>
            </div>
        @endif

        <form action="{{ route('admin.setting.update') }}" method="POST" enctype="multipart/form-data">
            @csrf

            {{-- ===== TAB NAVIGATION ===== --}}
            <div class="border-b border-gray-700 mb-4 flex flex-wrap gap-2">
                @php
                    $tabs = [
                        'biodata' => 'Biodata Sekolah',
                        'kontak' => 'Kontak Sekolah',
                        'kepsek' => 'Prakata Kepala Sekolah',
                        'sosmed' => 'Sosial Media',
                        'tambahan' => 'Kontak Tambahan',
                        'flyer' => 'Flyer Pop Up',
                    ];
                @endphp

                @foreach ($tabs as $key => $label)
                    <button type="button" onclick="showTab('{{ $key }}')" id="tabBtn_{{ $key }}"
                        class="px-4 py-2 text-sm font-medium rounded-t-lg border-b-2 border-transparent hover:border-blue-500 hover:text-blue-500 focus:outline-none transition-all text-gray-700 dark:text-gray-200">
                        {{ $label }}
                    </button>
                @endforeach
            </div>

            {{-- ===== TAB BIODATA ===== --}}
            <div id="tab_biodata" class="tab-content space-y-4">
                <h3 class="font-semibold text-lg text-gray-800 dark:text-gray-100">🏫 Biodata Sekolah</h3>
                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                    {{-- Logo --}}
                    <div>
                        <label class="font-medium text-gray-700 dark:text-gray-300">Logo Sekolah</label>
                        <input type="file" name="logo" id="logoInput"
                            class="w-full border rounded-lg p-2 dark:bg-gray-800 dark:text-gray-100">
                        <img id="logoPreview" src="{{ $setting?->logo ? asset('storage/' . $setting->logo) : '' }}"
                            class="mt-2 w-24 rounded-lg {{ $setting?->logo ? '' : 'hidden' }}">
                    </div>

                    {{-- Banner --}}
                    <div>
                        <label class="font-medium text-gray-700 dark:text-gray-300">Banner Beranda</label>
                        <input type="file" name="banner_beranda" id="bannerInput"
                            class="w-full border rounded-lg p-2 dark:bg-gray-800 dark:text-gray-100">
                        <img id="bannerPreview"
                            src="{{ $setting?->banner_beranda ? asset('storage/' . $setting->banner_beranda) : '' }}"
                            class="mt-2 w-48 rounded-lg {{ $setting?->banner_beranda ? '' : 'hidden' }}">
                    </div>
                </div>

                <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
                    <x-admin.input name="nama_sekolah" icon="🏫" placeholder="Nama Sekolah" :value="$setting->nama_sekolah ?? ''" />
                    <x-admin.input name="link_ppdb" icon="🔗" placeholder="Link PPDB" :value="$setting->link_ppdb ?? ''" />
                    <x-admin.input name="tahun_berdiri" icon="📅" placeholder="Tahun Berdiri" :value="$setting->tahun_berdiri ?? ''" />
                    <x-admin.input name="total_siswa" icon="👩‍🎓" type="number" placeholder="Total Siswa"
                        :value="$setting->total_siswa ?? ''" />
                    <x-admin.input name="total_guru" icon="👨‍🏫" type="number" placeholder="Total Guru"
                        :value="$setting->total_guru ?? ''" />
                    <x-admin.input name="ruang_kelas" icon="🏫" type="number" placeholder="Ruang Kelas"
                        :value="$setting->ruang_kelas ?? ''" />
                </div>
            </div>

            {{-- ===== TAB KONTAK SEKOLAH ===== --}}
            <div id="tab_kontak" class="tab-content hidden space-y-4">
                <h3 class="font-semibold text-lg text-gray-800 dark:text-gray-100">☎️ Kontak Sekolah</h3>
                <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                    <x-admin.input name="alamat" icon="📍" placeholder="Alamat Sekolah" :value="$setting->alamat ?? ''" />
                    <x-admin.input name="email" icon="📧" placeholder="Email Sekolah" :value="$setting->email ?? ''" />
                    <x-admin.input name="telepon" icon="📞" placeholder="Telepon Sekolah" :value="$setting->telepon ?? ''" />
                    {{-- <x-admin.input name="kode_pos" icon="🏷️" placeholder="Kode Pos" :value="$setting->kode_pos ?? ''" /> --}}
                </div>
            </div>

            {{-- ==== TAB PRAKATA KEPALA SEKOLAH ==== --}}
            <div id="tab_kepsek" class="tab-content hidden space-y-4">
                <h3 class="font-semibold text-lg text-gray-800 dark:text-gray-100">🎓 Prakata Kepala Sekolah</h3>

                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                    {{-- Foto Kepala Sekolah --}}
                    <div>
                        <label class="font-medium text-gray-700 dark:text-gray-300">Foto Kepala Sekolah</label>
                        <input type="file" name="foto_kepsek" id="kepsekInput"
                            class="w-full border rounded-lg p-2 bg-white dark:bg-gray-800 dark:text-gray-100">
                        <img id="kepsekPreview"
                            src="{{ $setting?->foto_kepsek ? asset('storage/' . $setting->foto_kepsek) : '' }}"
                            class="mt-2 w-32 rounded-lg {{ $setting?->foto_kepsek ? '' : 'hidden' }}">
                    </div>

                    {{-- Sambutan Kepala Sekolah --}}
                    <div>
                        <label class="font-medium text-gray-700 dark:text-gray-300">Sambutan Kepala Sekolah</label>
                        <textarea name="sambutan_kepsek" rows="5"
                            class="w-full border rounded-lg p-2 bg-white dark:bg-gray-800 dark:text-gray-100 placeholder-gray-500"
                            placeholder="Tulis sambutan singkat di sini...">{{ $setting->sambutan_kepsek ?? '' }}</textarea>
                    </div>
                </div>
            </div>


            {{-- ===== TAB SOSIAL MEDIA ===== --}}
            <div id="tab_sosmed" class="tab-content hidden space-y-4">
                <h3 class="font-semibold text-lg text-gray-800 dark:text-gray-100">🌐 Sosial Media</h3>
                <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                    <x-admin.input name="link_fb" icon="📘" placeholder="Link Facebook" :value="$setting->link_fb ?? ''" />
                    <x-admin.input name="link_ig" icon="📸" placeholder="Link Instagram" :value="$setting->link_ig ?? ''" />
                    <x-admin.input name="link_youtube" icon="▶️" placeholder="Link YouTube" :value="$setting->link_youtube ?? ''" />
                    <x-admin.input name="link_tiktok" icon="🎵" placeholder="Link TikTok" :value="$setting->link_tiktok ?? ''" />
                </div>
            </div>

            {{-- ===== TAB TAMBAHAN ===== --}}
            <div id="tab_tambahan" class="tab-content hidden space-y-4">
                <h3 class="font-semibold text-lg text-gray-800 dark:text-gray-100">📞 Kontak Tambahan</h3>
                <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
                    <x-admin.input name="jam_operasional" icon="🕓" placeholder="Jam Operasional"
                        :value="$setting->jam_operasional ?? ''" />
                    <x-admin.input name="link_gmaps" icon="📍" placeholder="Link Google Maps" :value="$setting->link_gmaps ?? ''" />
                    <x-admin.input name="nomor_wa_cs" icon="💬" placeholder="Nomor WA CS" :value="$setting->nomor_wa_cs ?? ''" />
                </div>
                
            </div>

            {{-- ===== TAB FLYER POPUP ===== --}}
<div id="tab_flyer" class="tab-content hidden space-y-4">
    <h3 class="font-semibold text-lg text-gray-800 dark:text-gray-100">🪧 Flyer Pop Up</h3>

    <div>
        <label class="font-medium text-gray-700 dark:text-gray-300">Upload Flyer (opsional)</label>
        <input type="file" name="flyer_image" id="flyerInput"
            class="w-full border rounded-lg p-2 dark:bg-gray-800 dark:text-gray-100">

        <img id="flyerPreview"
            src="{{ $setting?->flyer_image ? asset('storage/' . $setting->flyer_image) : '' }}"
            class="mt-3 w-64 rounded-lg {{ $setting?->flyer_image ? '' : 'hidden' }}">

        @if ($setting?->flyer_image)
            <div class="mt-2">
                <button type="button" id="btnDeleteFlyer"
                    class="px-3 py-1 bg-red-600 text-white rounded-md hover:bg-red-700">
                    Hapus Flyer
                </button>
            </div>
        @endif
    </div>
</div>

{{-- ===== MODAL KONFIRMASI HAPUS FLYER ===== --}}
<div id="deleteFlyerModal"
    class="hidden fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg w-full max-w-md p-6">
        <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-100 mb-3">Konfirmasi Hapus</h3>
        <p class="text-gray-600 dark:text-gray-300 mb-5">Yakin ingin menghapus flyer ini?</p>
        <div class="flex justify-end gap-2">
            <button id="cancelDeleteFlyer"
                class="px-4 py-2 bg-gray-300 dark:bg-gray-700 rounded-md hover:bg-gray-400 dark:hover:bg-gray-600">
                Batal
            </button>
            <button id="confirmDeleteFlyer"
                class="px-4 py-2 bg-red-600 text-white rounded-md hover:bg-red-700">
                Hapus
            </button>
        </div>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', () => {
    const btnDelete = document.getElementById('btnDeleteFlyer');
    const modal = document.getElementById('deleteFlyerModal');
    const cancelBtn = document.getElementById('cancelDeleteFlyer');
    const confirmBtn = document.getElementById('confirmDeleteFlyer');

    // Tampilkan modal saat klik hapus
    btnDelete?.addEventListener('click', () => {
        modal.classList.remove('hidden');
    });

    // Tutup modal saat klik batal / background
    cancelBtn?.addEventListener('click', () => {
        modal.classList.add('hidden');
    });
    modal?.addEventListener('click', (e) => {
        if (e.target === modal) modal.classList.add('hidden');
    });

    // Konfirmasi hapus flyer
    confirmBtn?.addEventListener('click', () => {
        fetch("{{ route('admin.setting.deleteFlyer') }}", {
            method: 'DELETE',
            headers: {
                'X-CSRF-TOKEN': '{{ csrf_token() }}',
                'Accept': 'application/json',
            },
        })
        .then(res => res.json())
        .then(data => {
            alert(data.message);
            if (data.success) location.reload();
        })
        .catch(err => alert('Terjadi kesalahan: ' + err))
        .finally(() => modal.classList.add('hidden'));
    });
});
</script>

            {{-- ===== BUTTON SIMPAN ===== --}}
            <div class="mt-8 text-right">
                <button type="submit"
                    class="bg-blue-600 text-white px-6 py-2 rounded-lg hover:bg-blue-700 transition-all duration-200">
                    💾 Simpan Pengaturan
                </button>
            </div>
        </form>
    </div>

    {{-- SCRIPT TAB + PREVIEW --}}
    <script>
        const tabs = ['biodata', 'kontak', 'kepsek', 'sosmed', 'tambahan', 'flyer'];

        function showTab(tab) {
            tabs.forEach(t => {
                document.getElementById(`tab_${t}`)?.classList.add('hidden');
                const btn = document.getElementById(`tabBtn_${t}`);
                btn?.classList.remove('border-blue-500', 'text-blue-500', 'dark:text-blue-400');
                // restore default color
                btn?.classList.add('text-gray-700', 'dark:text-gray-200');
            });
            document.getElementById(`tab_${tab}`)?.classList.remove('hidden');

            const activeBtn = document.getElementById(`tabBtn_${tab}`);
            activeBtn?.classList.add('border-blue-500', 'text-blue-600');
            activeBtn?.classList.remove('text-gray-700', 'dark:text-gray-200');
        }

        showTab('biodata');

        function previewImage(inputId, previewId) {
            const input = document.getElementById(inputId);
            const preview = document.getElementById(previewId);
            if (!input || !preview) return;
            input.addEventListener('change', function() {
                const file = this.files[0];
                if (file) {
                    const reader = new FileReader();
                    reader.onload = e => {
                        preview.src = e.target.result;
                        preview.classList.remove('hidden');
                        preview.classList.add('mx-auto'); // center horizontal
                    };
                    reader.readAsDataURL(file);
                }
            });
        }

        previewImage('logoInput', 'logoPreview');
        previewImage('bannerInput', 'bannerPreview');
        previewImage('flyerInput', 'flyerPreview');
        previewImage('kepsekInput', 'kepsekPreview');
    </script>
    <script>
        // Auto hide toast setelah beberapa detik
        setTimeout(() => {
            document.querySelectorAll('#toast-success, #toast-error').forEach(el => {
                el.classList.remove('animate-slide-in');
                el.classList.add('animate-slide-out');
                setTimeout(() => el.remove(), 400); // hapus setelah animasi selesai
            });
        }, 5000); // 5 detik
    </script>
@endsection