@extends('layouts.admin')

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

@section('content')
    <div class="bg-white dark:bg-gray-900 rounded-2xl shadow-lg p-6 transition-all duration-300">
        <h2 class="text-2xl font-semibold text-blue-600 dark:text-blue-400 mb-6 flex items-center gap-2">
            <i class="fa-solid fa-school"></i> Manajemen Profil Sekolah
        </h2>

        <!-- =========================== -->
        <!-- Tabs Navigasi -->
        <!-- =========================== -->
        <div role="tablist" aria-label="Profil Sekolah Tabs"
            class="flex flex-wrap gap-2 border-b border-gray-200 dark:border-gray-700 mb-6">
            <button role="tab" data-tab="profil" aria-selected="true" class="tab-base tab-active">🏫 Profil Sekolah</button>
            <button role="tab" data-tab="struktur" aria-selected="false" class="tab-base tab-inactive">🧍‍♂️ Struktur
                Organisasi</button>
            <button role="tab" data-tab="kompetensi" aria-selected="false" class="tab-base tab-inactive">🧩 Kompetensi
                Keahlian</button>
            <button role="tab" data-tab="fasilitas" aria-selected="false" class="tab-base tab-inactive">🏢 Fasilitas
                Sekolah</button>
        </div>

        {{-- ✅ 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

        <!-- =========================== -->
        <!-- Konten Tabs -->
        <!-- =========================== -->
        <div class="p-6 bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 shadow-sm">
            <!-- Tab: Profil Sekolah -->
            @include('admin.profile.tabs.profil')

            <!-- Tab Struktur Organisasi -->
            @include('admin.profile.tabs.struktur')

            <!-- Tab Kompetensi Keahlian -->
            @include('admin.profile.tabs.kompetensi')

            <!-- Tab fasilitas -->
            @include('admin.profile.tabs.fasilitas')
        </div>
    </div>

    <!-- =========================== -->
    <!-- SCRIPT -->
    <!-- =========================== -->
    <script>
        // === Modal Tambah/Edit ===
        function openAddModal() {
            document.getElementById('modalTitle').textContent = 'Tambah Data';
            document.getElementById('strukturForm').action = "{{ route('admin.struktur.store') }}";
            document.getElementById('strukturForm').reset();
            document.getElementById('fotoPreview').classList.add('hidden');
            document.getElementById('strukturModal').classList.remove('hidden');
        }

        function openEditModal(id, nama, jabatan, urutan, fotoUrl) {
            document.getElementById('modalTitle').textContent = 'Edit Data';
            document.getElementById('strukturForm').action = "/admin/profile/structure/update/" + id;
            document.getElementById('strukturId').value = id;
            document.getElementById('nama').value = nama;
            document.getElementById('jabatan').value = jabatan;
            document.getElementById('urutan').value = urutan;
            document.getElementById('fotoPreview').src = fotoUrl;
            document.getElementById('fotoPreview').classList.remove('hidden');
            document.getElementById('strukturModal').classList.remove('hidden');
        }

        function closeStrukturModal() {
            document.getElementById('strukturModal').classList.add('hidden');
        }

        // === Preview Foto ===
        document.getElementById('foto').addEventListener('change', function(e) {
            const file = e.target.files[0];
            const preview = document.getElementById('fotoPreview');
            if (file) {
                const reader = new FileReader();
                reader.onload = (event) => {
                    preview.src = event.target.result;
                    preview.classList.remove('hidden');
                };
                reader.readAsDataURL(file);
            } else {
                preview.classList.add('hidden');
            }
        });

        // === Modal Hapus ===
        function openDeleteStrukturModal(url, name) {
            const modal = document.getElementById('deleteModalStruktur');
            const message = document.getElementById('deleteMessageStruktur');
            const form = document.getElementById('deleteFormStruktur');

            message.innerText = `Yakin ingin menghapus data ${name}?`;
            form.action = url;
            modal.classList.remove('hidden');
        }

        function closeDeleteStrukturModal() {
            document.getElementById('deleteModalStruktur').classList.add('hidden');
        }
    </script>
    {{-- SCRIPT MODAL --}}
    <script>
        const modal = document.getElementById('deleteModal');
        const deleteForm = document.getElementById('deleteForm');
        const deleteMessage = document.getElementById('deleteMessage');

        function openDeleteModal(actionUrl, itemName) {
            deleteForm.action = actionUrl;
            deleteMessage.textContent = `Apakah kamu yakin ingin menghapus ${itemName}?`;
            modal.classList.remove('hidden');
        }

        function closeDeleteModal() {
            modal.classList.add('hidden');
        }

        // Tutup modal kalau klik di luar kotak
        modal?.addEventListener('click', (e) => {
            if (e.target === modal) closeDeleteModal();
        });
    </script>
    <script>
        // === Preview Gambar ===
        const previewImage = (inputId, previewId) => {
            const input = document.getElementById(inputId);
            const preview = document.getElementById(previewId);

            input?.addEventListener('change', e => {
                const file = e.target.files[0];
                if (file) {
                    preview.src = URL.createObjectURL(file);
                    preview.classList.remove('hidden');
                } else {
                    preview.classList.add('hidden');
                    preview.src = '';
                }
            });
        };
        previewImage('banner', 'bannerPreview');
        previewImage('front_image', 'frontPreview');

        // === Tabs Navigasi ===
        (function() {
            const tabs = document.querySelectorAll('[role="tab"]');
            const panels = document.querySelectorAll('.tab-panel');
            const base = 'tab-base';
            const active = 'tab-active';
            const inactive = 'tab-inactive';

            function showPanel(tabEl) {
                tabs.forEach(t => {
                    const is = (t === tabEl);
                    t.setAttribute('aria-selected', is ? 'true' : 'false');
                    t.classList.remove(active, inactive);
                    t.classList.add(base, is ? active : inactive);
                });

                panels.forEach(p => p.classList.add('hidden'));
                const id = 'tab-' + tabEl.dataset.tab;
                const panel = document.getElementById(id);
                if (panel) {
                    panel.classList.remove('hidden');
                    panel.setAttribute('tabindex', '-1');
                    panel.focus({
                        preventScroll: true
                    });
                }
            }

            tabs.forEach(t => {
                t.addEventListener('click', e => {
                    e.preventDefault();
                    showPanel(t);
                });
            });

            // Set tab awal aktif
            const initially = document.querySelector('[role="tab"][aria-selected="true"]') || tabs[0];
            if (initially) showPanel(initially);
        })();
    </script>

    <!-- =========================== -->
    <!-- STYLING -->
    <!-- =========================== -->
    <style>
        @keyframes slideIn {
            from {
                opacity: 0;
                transform: translateX(100%);
            }

            to {
                opacity: 1;
                transform: translateX(0);
            }
        }

        @keyframes slideOut {
            from {
                opacity: 1;
                transform: translateX(0);
            }

            to {
                opacity: 0;
                transform: translateX(100%);
            }
        }

        .animate-slide-in {
            animation: slideIn 0.4s ease forwards;
        }

        .animate-slide-out {
            animation: slideOut 0.4s ease forwards;
        }
    </style>

    <style>
        /* Base */
        .tab-base {
            padding: 0.5rem 1rem;
            border-top-left-radius: 0.5rem;
            border-top-right-radius: 0.5rem;
            font-size: 0.95rem;
            font-weight: 500;
            transition: all 0.2s ease;
            cursor: pointer;
        }

        /* Inactive */
        .tab-inactive {
            color: rgb(75 85 99);
            background: transparent;
        }

        .dark .tab-inactive {
            color: rgb(156 163 175);
        }

        .tab-inactive:hover {
            color: rgb(37 99 235);
            background: rgba(59, 130, 246, 0.05);
        }

        /* Active */
        .tab-active {
            color: rgb(37 99 235);
            background: rgba(59, 130, 246, 0.1);
            border-bottom: 3px solid rgb(37 99 235);
            font-weight: 600;
            box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
        }

        .dark .tab-active {
            color: rgb(147 197 253);
            background: rgba(255, 255, 255, 0.05);
            border-bottom-color: rgb(147 197 253);
        }

        /* Panel animasi */
        .tab-panel {
            animation: fadeIn 0.25s ease;
        }

        @keyframes fadeIn {
            from {
                opacity: 0;
                transform: translateY(8px);
            }

            to {
                opacity: 1;
                transform: translateY(0);
            }
        }
    </style>

    <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>

    <!-- =========================== -->
    <!-- MODAL KOMPETENSI -->
    <!-- =========================== -->
    <script>
        function openKompetensiModal() {
            document.getElementById('kompetensiForm').reset();
            document.getElementById('previewKompetensi').classList.add('hidden');
            document.getElementById('kompetensiModal').classList.remove('hidden');
            document.getElementById('kompetensiModalTitle').textContent = 'Tambah Data';
        }

        function closeKompetensiModal() {
            document.getElementById('kompetensiModal').classList.add('hidden');
        }

        function openAddKompetensiModal() {
            const form = document.getElementById('kompetensiForm');
            form.reset();
            form.action = "/admin/profile/kompetensi/store"; // 🔥 arahkan benar ke store route

            document.getElementById('previewKompetensi').classList.add('hidden');
            document.getElementById('kompetensiModalTitle').textContent = 'Tambah Data';
            document.getElementById('kompetensiModal').classList.remove('hidden');
        }

        function openEditKompetensiModal(id, name, desc, imgUrl) {
            document.getElementById('kompetensiId').value = id;
            document.getElementById('namaKompetensi').value = name;
            document.getElementById('keteranganKompetensi').value = desc;
            document.getElementById('previewKompetensi').src = imgUrl;
            document.getElementById('previewKompetensi').classList.remove('hidden');

            const form = document.getElementById('kompetensiForm');
            form.action = `/admin/profile/kompetensi/update/${id}`;

            document.getElementById('kompetensiModalTitle').textContent = 'Edit Data';
            document.getElementById('kompetensiModal').classList.remove('hidden');
        }

        function openDeleteKompetensiModal(actionUrl, name) {
            document.getElementById('deleteFormKompetensi').action = actionUrl;
            document.getElementById('deleteMessageKompetensi').textContent = `Yakin ingin menghapus kompetensi "${name}"?`;
            document.getElementById('deleteModalKompetensi').classList.remove('hidden');
        }

        function closeDeleteKompetensiModal() {
            document.getElementById('deleteModalKompetensi').classList.add('hidden');
        }
    </script>
    {{-- Modal Zoom Gambar --}}
    <div id="imageZoomModal" class="hidden fixed inset-0 bg-black/80 z-50 flex justify-center items-center">
        <img id="zoomedImage" class="max-w-3xl max-h-[90vh] rounded-lg shadow-lg border border-gray-400">
    </div>

    {{-- Script Preview & Zoom --}}
    <script>
        // === PREVIEW GAMBAR SAAT DIPILIH ===
        document.getElementById('gambarKompetensi').addEventListener('change', function(e) {
            const file = e.target.files[0];
            const preview = document.getElementById('previewKompetensi');
            if (file) {
                const reader = new FileReader();
                reader.onload = function(event) {
                    preview.src = event.target.result;
                    preview.classList.remove('hidden');
                }
                reader.readAsDataURL(file);
            } else {
                preview.classList.add('hidden');
            }
        });

        // === ZOOM GAMBAR DI TABEL ===
        const zoomableImages = document.querySelectorAll('.zoomable');
        const zoomModal = document.getElementById('imageZoomModal');
        const zoomedImage = document.getElementById('zoomedImage');

        zoomableImages.forEach(img => {
            img.addEventListener('click', () => {
                zoomedImage.src = img.dataset.image;
                zoomModal.classList.remove('hidden');
            });
        });

        // Tutup modal jika klik di luar gambar
        zoomModal.addEventListener('click', (e) => {
            if (e.target === zoomModal) {
                zoomModal.classList.add('hidden');
            }
        });
    </script>


@endsection