@extends('layouts.app')

@section('content')
<div class="min-h-screen bg-gradient-to-br from-blue-50 to-sky-100 flex flex-col items-center justify-center px-4 py-12">
    <div class="max-w-4xl w-full bg-white rounded-2xl shadow-2xl p-8 md:p-12">
        
        {{-- Logo --}}
        <div class="flex flex-col items-center mb-8">
            <img src="{{ asset('images/logo-pondok.png') }}" 
                 class="h-20 sm:h-24 md:h-28 mb-4 drop-shadow-lg" 
                 alt="Logo Pondok">
            
            {{-- Judul --}}
            <h1 class="text-xl md:text-4xl font-bold text-gray-800">
                Pendaftaran Santri Baru
            </h1>
            <p class="text-gray-600 text-sm">Tahun Pelajaran 2024/2025</p>
        </div>

        {{-- Status Sukses --}}
        @if(session('status') === 'success')
        <div class="mb-8 p-4 bg-green-50 border-l-4 border-green-500 rounded-lg animate-fade-in">
            <div class="flex items-center">
                <div class="flex-shrink-0">
                    <svg class="h-5 w-5 text-green-400" fill="currentColor" viewBox="0 0 20 20">
                        <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"/>
                    </svg>
                </div>
                <div class="ml-3">
                    <p class="text-sm font-medium text-green-800">
                        🎉 Pendaftaran berhasil dikirim! Tim kami akan menghubungi Anda segera.
                    </p>
                </div>
            </div>
        </div>
        @endif

        <div class="mb-10 text-center flex flex-col sm:flex-row gap-4 justify-center">
            <!-- Tombol Alur -->
            <button onclick="openAlurModal()"
                class="inline-flex items-center gap-2 bg-gradient-to-r from-amber-500 to-orange-500 hover:from-amber-600 hover:to-orange-700 
                    text-white font-semibold py-3 px-6 rounded-xl 
                    transition-all duration-300 transform hover:scale-105 
                    shadow-lg hover:shadow-xl cursor-pointer">
                <i class="fas fa-route"></i>
                Alur Pendaftaran
            </button>
            <!-- Tombol Jadwal -->
            <button onclick="openJadwalModal()"
                class="inline-flex items-center gap-2 bg-emerald-500 hover:bg-emerald-600 
                    text-white font-semibold py-3 px-6 rounded-xl 
                    transition-all duration-300 transform hover:scale-105 
                    shadow-lg hover:shadow-xl cursor-pointer">
                <i class="fas fa-calendar-alt"></i>
                Lihat Jadwal Kegiatan
            </button>
        </div>


        {{-- Tombol Pilihan --}}
        <div class="grid md:grid-cols-2 gap-8">
            {{-- Putra --}}
            <a href="{{ route('pendaftaran.form', ['jenis' => 'putra']) }}"
                class="group bg-gradient-to-r from-blue-500 to-blue-600 hover:from-blue-600 hover:to-blue-700 
                       text-white p-8 rounded-2xl shadow-lg hover:shadow-2xl 
                       transition-all duration-500 transform hover:-translate-y-2 
                       flex flex-col items-center justify-center 
                       border border-blue-400">
                <div class="mb-6 p-4 bg-white/20 rounded-full">
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-12 w-12" fill="none" 
                         viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" 
                              d="M17 20h5v-2a4 4 0 00-3-3.87M9 20h6m-6 0v-2a4 4 0 013-3.87M9 20H4v-2a4 4 0 013-3.87M15 11a3 3 0 100-6 3 3 0 000 6zM9 11a3 3 0 100-6 3 3 0 000 6z" />
                    </svg>
                </div>
                <h2 class="text-2xl font-bold mb-3">Santri Putra</h2>
                <p class="text-blue-100 text-center mb-6">
                    Pendaftaran untuk calon santri putra
                </p>
                <span class="inline-flex items-center gap-2 bg-white/20 px-4 py-2 rounded-full 
                             group-hover:bg-white/30 transition-all duration-300">
                    Daftar Sekarang
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 group-hover:translate-x-1 transition-transform" 
                         fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" 
                              d="M17 8l4 4m0 0l-4 4m4-4H3" />
                    </svg>
                </span>
            </a>

            {{-- Putri --}}
            <a href="{{ route('pendaftaran.form', ['jenis' => 'putri']) }}"
                class="group bg-gradient-to-r from-pink-500 to-rose-600 hover:from-pink-600 hover:to-rose-700 
                       text-white p-8 rounded-2xl shadow-lg hover:shadow-2xl 
                       transition-all duration-500 transform hover:-translate-y-2 
                       flex flex-col items-center justify-center 
                       border border-pink-400">
                <div class="mb-6 p-4 bg-white/20 rounded-full">
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-12 w-12" fill="none" 
                         viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" 
                              d="M12 14a5 5 0 100-10 5 5 0 000 10zm-3 6h6m-3-3v3m-6 0a6 6 0 1112 0H6z" />
                    </svg>
                </div>
                <h2 class="text-2xl font-bold mb-3">Santri Putri</h2>
                <p class="text-pink-100 text-center mb-6">
                    Pendaftaran untuk calon santri putri
                </p>
                <span class="inline-flex items-center gap-2 bg-white/20 px-4 py-2 rounded-full 
                             group-hover:bg-white/30 transition-all duration-300">
                    Daftar Sekarang
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 group-hover:translate-x-1 transition-transform" 
                         fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" 
                              d="M17 8l4 4m0 0l-4 4m4-4H3" />
                    </svg>
                </span>
            </a>
        </div>

        {{-- Informasi Tambahan --}}
        <div class="mt-12 pt-8 border-t border-gray-200 text-center">
            <p class="text-gray-600 mb-6 flex items-center justify-center gap-2">
                <i class="fas fa-info-circle text-blue-500"></i>
                Untuk informasi lebih lanjut, silakan hubungi:
            </p>

            <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-5 max-w-4xl mx-auto">

                <!-- Ust. Rois -->
                <a href="https://wa.me/6281291042261" target="_blank"
                class="group flex items-center gap-4 p-4 rounded-xl bg-white shadow-md
                        hover:shadow-xl transition-all duration-300 hover:-translate-y-1">
                    <div class="flex h-12 w-12 items-center justify-center rounded-full bg-green-100
                                group-hover:bg-green-500 transition-colors">
                        <i class="fab fa-whatsapp text-green-600 group-hover:text-white text-xl"></i>
                    </div>
                    <div class="text-left">
                        <p class="font-semibold text-gray-800">Ust. Rois</p>
                        <p class="text-sm text-gray-600">+62 812-9104-2261</p>
                    </div>
                </a>

                <!-- Ust. Nizam -->
                <a href="https://wa.me/6285731366194" target="_blank"
                class="group flex items-center gap-4 p-4 rounded-xl bg-white shadow-md
                        hover:shadow-xl transition-all duration-300 hover:-translate-y-1">
                    <div class="flex h-12 w-12 items-center justify-center rounded-full bg-green-100
                                group-hover:bg-green-500 transition-colors">
                        <i class="fab fa-whatsapp text-green-600 group-hover:text-white text-xl"></i>
                    </div>
                    <div class="text-left">
                        <p class="font-semibold text-gray-800">Ust. Nizam</p>
                        <p class="text-sm text-gray-600">+62 857-3136-6194</p>
                    </div>
                </a>

                <!-- Ust. Nizam -->
                <a href="https://wa.me/6281334932519" target="_blank"
                class="group flex items-center gap-4 p-4 rounded-xl bg-white shadow-md
                        hover:shadow-xl transition-all duration-300 hover:-translate-y-1">
                    <div class="flex h-12 w-12 items-center justify-center rounded-full bg-green-100
                                group-hover:bg-green-500 transition-colors">
                        <i class="fab fa-whatsapp text-green-600 group-hover:text-white text-xl"></i>
                    </div>
                    <div class="text-left">
                        <p class="font-semibold text-gray-800">Bendahra Pondok</p>
                        <p class="text-sm text-gray-600">+62 813-3493-2519</p>
                    </div>
                </a>
            </div>
        </div>

    </div>
</div>

<!-- Modal Jadwal Kegiatan - RESPONSIVE -->
<div id="jadwalModal" 
     class="fixed inset-0 z-[9999] hidden items-center justify-center p-3 sm:p-4 bg-black/50 backdrop-blur-sm transition-opacity duration-300">
    
    <!-- Modal Container - Responsive & Centered -->
    <div class="relative bg-white rounded-xl sm:rounded-2xl shadow-2xl 
                w-full max-w-[95vw] sm:max-w-[90vw] md:max-w-4xl 
                h-auto max-h-[80vh] sm:max-h-[85vh]
                mx-auto
                flex flex-col
                transform transition-all duration-300 scale-95 opacity-0">
        
        <!-- Modal Header -->
        <div class="flex bg-gradient-to-r from-blue-900 to-sky-700 rounded-t-xl shadow-lg items-center justify-between p-6">
            <div class="flex-1 min-w-0">
                <h3 class="text-lg sm:text-xl md:text-2xl font-bold text-white truncate">Jadwal Kegiatan</h3>
                <p class="text-white text-sm sm:text-base">Tahun Pelajaran 2024/2025</p>
            </div>
            <button onclick="closeJadwalModal()"
                class="ml-4 flex-shrink-0 p-2 rounded-full hover:bg-gray-100 transition-colors duration-200"
                aria-label="Tutup modal">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 sm:h-6 sm:w-6 text-white" 
                     fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" 
                          d="M6 18L18 6M6 6l12 12" />
                </svg>
            </button>
        </div>

        <!-- Modal Content - Scrollable -->
        <div class="flex-1 overflow-y-auto p-3 sm:p-4 md:p-6 max-h-[calc(80vh-140px)] sm:max-h-[calc(85vh-140px)]">
            <div class="relative bg-gray-100 rounded-lg overflow-hidden">
                <!-- Loading State -->
                <div id="imageLoading" class="absolute inset-0 flex items-center justify-center bg-gray-100 z-10">
                    <div class="text-center">
                        <div class="animate-spin rounded-full h-8 w-8 sm:h-12 sm:w-12 border-b-2 border-blue-500 mx-auto mb-3 sm:mb-4"></div>
                        <p class="text-gray-600 text-sm sm:text-base">Memuat gambar...</p>
                    </div>
                </div>
                
                <!-- Image Container -->
                <div class="relative w-full overflow-hidden">
                    <img id="jadwalImage" 
                         src="{{ asset('images/jadwal-kegiatan.jpg') }}" 
                         alt="Jadwal Kegiatan Penerimaan Santri Baru" 
                         class="w-full h-auto max-w-full object-contain"
                         loading="lazy"
                         onload="hideLoading()"
                         onerror="handleImageError()">
                </div>
            </div>

            <!-- Informasi -->
            <div class="mt-4 sm:mt-6 p-3 sm:p-4 bg-blue-50 rounded-lg">
                <h4 class="font-semibold text-blue-800 mb-2 flex items-center text-sm sm:text-base">
                    <i class="fas fa-info-circle mr-2"></i>Informasi
                </h4>
                <p class="text-blue-700 text-xs sm:text-sm leading-relaxed">
                    Jadwal kegiatan penerimaan santri baru Pondok Pesantren An-Najiyah 2 BU. 
                    Harap diperhatikan tanggal-tanggal penting pada jadwal di atas.
                </p>
            </div>
        </div>

        <!-- Modal Footer -->
        <div class="p-3 sm:p-4 md:p-6 border-t border-gray-200 bg-gray-50">
            <div class="flex flex-col sm:flex-row justify-end gap-3">
                <button onclick="closeJadwalModal()"
                    class="w-full sm:w-auto px-4 py-2.5 sm:px-6 sm:py-2.5 
                           text-gray-700 bg-gray-100 hover:bg-gray-200 
                           rounded-lg font-medium transition-colors duration-200 
                           text-sm sm:text-base">
                    Tutup
                </button>
                <button onclick="downloadJadwal()"
                    class="w-full sm:w-auto px-4 py-2.5 sm:px-6 sm:py-2.5 
                           bg-blue-600 hover:bg-blue-700 text-white 
                           rounded-lg font-medium transition-colors duration-200 
                           flex items-center justify-center gap-2
                           text-sm sm:text-base">
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 sm:h-5 sm:w-5" 
                         fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" 
                              d="M12 10v6m0 0l-3-3m3 3l3-3m2 8H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
                    </svg>
                    Download
                </button>
            </div>
        </div>
    </div>
</div>
<!-- Modal Alur Pendaftaran -->
<div id="alurModal"
     class="fixed inset-0 z-[9999] hidden items-center justify-center p-3 sm:p-4 bg-black/50 backdrop-blur-sm transition-opacity duration-300">

    <div class="relative bg-white shadow-2xl rounded-xl sm:rounded-2xl
                w-full max-w-[90vw] sm:max-w-[90vw] md:max-w-4xl 
                h-auto max-h-[90vh] sm:max-h-[85vh]
                mx-auto
                flex flex-col
                transform transition-all duration-300 scale-95 opacity-0">

        <!-- Header -->
        <div class="flex bg-gradient-to-r from-blue-900 to-sky-700 rounded-t-xl shadow-lg items-center justify-between p-6">
            <div>
                <h3 class="text-xl md:text-2xl font-bold text-white">
                    Alur Pendaftaran Santri Baru
                </h3>
                <p class="text-sm text-white">
                    Pondok Pesantren An-Najiyah 2 BU
                </p>
            </div>
        </div>

        <!-- Content -->
        <div class="flex-1 overflow-y-auto p-6 space-y-6">

            <!-- OFFLINE -->
            <div class="bg-blue-50 rounded-xl p-5">
                <h4 class="font-bold text-blue-700 mb-3 flex items-center gap-2">
                    <i class="fas fa-school"></i>
                    Alur Pendaftaran Offline
                </h4>
                <ol class="list-decimal list-inside text-gray-700 space-y-2 text-sm">
                    <li>Datang langsung ke Pondok Pesantren</li>
                    <li>Sowan Kepada Pengasuh</li>
                    <li>Mengisi formulir pendaftaran</li>
                    <li>Melakukan administrasi daftar ulang (tunai/transfer)</li>
                </ol>
            </div>

            <!-- ONLINE -->
            <div class="bg-emerald-50 rounded-xl p-5">
                <h4 class="font-bold text-emerald-700 mb-3 flex items-center gap-2">
                    <i class="fas fa-globe"></i>
                    Alur Pendaftaran Online
                </h4>
                <ol class="list-decimal list-inside text-gray-700 space-y-2 text-sm">
                    <li>Mengisi formulir pendaftaran online</li>
                    <li>Melengkapi data calon santri</li>
                    <li>Menghubungi Contact Person setelah mengisi Formulir</li>
                    <li>Melakukan pembayaran Daftar Ulang ke No. Rekening Admin Pembayaran.</li>
                    <li>Mengirim bukti pembayaran via WhatsApp ke Nomor Bendahara Pondok</li>
                </ol>
            </div>

            <!-- NB -->
            <div class="bg-yellow-50 border-l-4 border-yellow-400 rounded-xl p-5">
                <h4 class="font-bold text-yellow-700 mb-2 flex items-center gap-2">
                    <i class="fas fa-exclamation-circle"></i>
                    NB (Catatan Penting)
                </h4>
                <ul class="list-disc list-inside text-gray-700 text-sm space-y-1">
                    <li>Pastikan data diisi dengan benar dan lengkap</li>
                    <li>Berkas wajib disiapkan sesuai ketentuan</li>
                    <li>Informasi resmi hanya melalui website dan kontak resmi pondok</li>
                </ul>
            </div>

        </div>

        <!-- Footer -->
        <div class="p-4 border-t rounded-b-xl bg-gray-50 flex justify-end">
            <button onclick="closeAlurModal()"
                class="px-6 py-2.5 bg-gray-200 hover:bg-gray-300 
                       rounded-lg text-gray-700 font-medium">
                Tutup
            </button>
        </div>
    </div>
</div>

<style>
    @keyframes fade-in {
        from { opacity: 0; transform: translateY(-10px); }
        to { opacity: 1; transform: translateY(0); }
    }
    .animate-fade-in {
        animation: fade-in 0.5s ease-out;
    }
    
    @keyframes modal-fade-in {
        from { opacity: 0; transform: scale(0.95) translateY(-20px); }
        to { opacity: 1; transform: scale(1) translateY(0); }
    }
    
    @keyframes backdrop-fade-in {
        from { opacity: 0; }
        to { opacity: 1; }
    }
    
    .modal-open {
        overflow: hidden;
    }
</style>

<script>
    function openJadwalModal() {
        const modal = document.getElementById('jadwalModal');
        const modalContainer = modal.querySelector('.relative');
        
        // Tampilkan modal dan backdrop
        modal.classList.remove('hidden');
        document.body.classList.add('modal-open');
        
        // Trigger animation setelah DOM update
        setTimeout(() => {
            modal.style.opacity = '1';
            modalContainer.classList.remove('scale-95', 'opacity-0');
            modalContainer.classList.add('scale-100', 'opacity-100');
        }, 10);
        
        // Preload image
        const img = new Image();
        img.src = '{{ asset('images/jadwal-kegiatan.jpg') }}';
        img.onload = hideLoading;
        img.onerror = handleImageError;
    }

    function closeJadwalModal() {
        const modal = document.getElementById('jadwalModal');
        const modalContainer = modal.querySelector('.relative');
        
        // Start closing animation
        modalContainer.classList.remove('scale-100', 'opacity-100');
        modalContainer.classList.add('scale-95', 'opacity-0');
        modal.style.opacity = '0';
        
        // Wait for animation to complete before hiding
        setTimeout(() => {
            modal.classList.add('hidden');
            document.body.classList.remove('modal-open');
        }, 300);
    }
    function openAlurModal() {
        const modal = document.getElementById('alurModal');
        const box = modal.querySelector('.relative');

        modal.classList.remove('hidden');
        document.body.classList.add('modal-open');

        setTimeout(() => {
            modal.style.opacity = '1';
            box.classList.remove('scale-95', 'opacity-0');
            box.classList.add('scale-100', 'opacity-100');
        }, 10);
    }

    function closeAlurModal() {
        const modal = document.getElementById('alurModal');
        const box = modal.querySelector('.relative');

        box.classList.remove('scale-100', 'opacity-100');
        box.classList.add('scale-95', 'opacity-0');
        modal.style.opacity = '0';

        setTimeout(() => {
            modal.classList.add('hidden');
            document.body.classList.remove('modal-open');
        }, 300);
    }

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

    // Close on backdrop click
    document.getElementById('alurModal').addEventListener('click', e => {
        if (e.target.id === 'alurModal') closeAlurModal();
    });
                    
    function hideLoading() {
        const loading = document.getElementById('imageLoading');
        if (loading) {
            loading.classList.add('hidden');
        }
    }

    function handleImageError() {
        const image = document.getElementById('jadwalImage');
        const loading = document.getElementById('imageLoading');
        
        if (loading) {
            loading.classList.add('hidden');
        }
        
        // Fallback jika gambar tidak ditemukan
        if (image) {
            image.src = '{{ asset('images/placeholder.jpg') }}';
            image.alt = 'Gambar tidak tersedia';
        }
    }

    function downloadJadwal() {
        try {
            const link = document.createElement('a');
            link.href = '{{ asset('images/jadwal-kegiatan.jpg') }}';
            link.download = 'Jadwal-Kegiatan-PP-An-Najiyah.jpg';
            link.target = '_blank';
            document.body.appendChild(link);
            link.click();
            document.body.removeChild(link);
        } catch (error) {
            console.error('Error downloading file:', error);
            alert('Gagal mengunduh file. Silakan coba lagi.');
        }
    }

    // Close modal dengan ESC key
    document.addEventListener('keydown', (e) => {
        if (e.key === 'Escape') {
            closeJadwalModal();
        }
    });

    // Close modal dengan klik di luar
    document.getElementById('jadwalModal').addEventListener('click', (e) => {
        if (e.target === document.getElementById('jadwalModal')) {
            closeJadwalModal();
        }
    });

    // Touch handling for mobile
    document.addEventListener('touchstart', function(e) {
        if (e.target.closest('#jadwalModal .relative') === null && 
            document.getElementById('jadwalModal').classList.contains('hidden') === false) {
            closeJadwalModal();
        }
    }, { passive: true });
</script>
@endsection