@extends('layouts.app')
@section('title', 'Kontak - ' . ($setting->nama_sekolah ?? 'Nama Sekolah'))
@section('content')
    <!-- Halaman Kontak Sekolah -->
    <section id="kontak" class="bg-gray-50 pt-5">
        <!-- Peta Sekolah -->
        <div class="w-full overflow-hidden rounded-lg shadow-md">
            @php
                // ambil isi dari DB
                $gmaps = $setting->link_gmaps ?? '';

                // ubah width & height supaya selalu full responsif
                $gmaps = preg_replace('/width="[^"]*"/', 'width="100%"', $gmaps);
                $gmaps = preg_replace('/height="[^"]*"/', 'height="450"', $gmaps);
            @endphp

            {!! $gmaps !!}
        </div>


        <!-- CONTACT INFO & FORM -->
        <div class="max-w-6xl mx-auto py-16 px-6 grid md:grid-cols-2 gap-10" data-aos="fade-up">
            <!-- INFO KONTAK -->
            <div>
                <h2 class="text-3xl font-bold text-blue-700 mb-6">Hubungi Kami</h2>
                <p class="text-gray-600 mb-8">
                    Jika Anda memiliki pertanyaan atau memerlukan informasi lebih lanjut mengenai sekolah kami,
                    silakan hubungi melalui informasi di bawah ini atau kirim pesan lewat formulir yang tersedia.
                </p>

                <div class="bg-white p-6 rounded-2xl shadow space-y-3">
                    <p><strong>Alamat:</strong><br>{{ $setting->alamat ?? 'Alamat Sekolah' }}</p>
                    <p><strong>Telepon:</strong><br><a href="tel:{{ $setting->telepon ?? '+6289682154449' }}"
                            class="text-blue-600 hover:underline">{{ $setting->telepon ?? '+6289682154449' }}</a></p>
                    <p><strong>Email:</strong><br><a href="mailto:{{ $setting->email ?? 'ridhokurniawan14@gmail.com' }}"
                            class="text-blue-600 hover:underline">{{ $setting->email ?? 'ridhokurniawan14@gmail.com' }}</a>
                    </p>
                    <p><strong>Jam
                            Operasional:</strong><br>{{ $setting->jam_operasional ?? 'Senin - Sabtu, 06:45 - 15:00' }}</p>
                </div>
            </div>

            <!-- FORMULIR KONTAK -->
            <form action="{{ route('messages.store') }}" method="POST"
                class="bg-white p-6 rounded-2xl shadow space-y-4 relative">
                @csrf
                <h3 class="text-xl font-semibold text-gray-800 mb-2">Kirim Pesan</h3>

                <div>
                    <label class="block text-sm font-medium text-gray-700">Nama</label>
                    <input type="text" name="nama" required
                        class="mt-1 w-full p-3 border rounded-lg focus:ring-2 focus:ring-blue-300" />
                </div>

                <div>
                    <label class="block text-sm font-medium text-gray-700">Email</label>
                    <input type="email" name="email" required
                        class="mt-1 w-full p-3 border rounded-lg focus:ring-2 focus:ring-blue-300" />
                </div>

                <div>
                    <label class="block text-sm font-medium text-gray-700">Pesan</label>
                    <textarea name="pesan" rows="4" required
                        class="mt-1 w-full p-3 border rounded-lg focus:ring-2 focus:ring-blue-300"></textarea>
                </div>

                <button type="submit"
                    class="bg-blue-600 text-white px-6 py-3 rounded-full font-semibold hover:bg-blue-700 transition">
                    Kirim Pesan
                </button>
            </form>

            {{-- ✅ Modal Sukses --}}
            @if (session('success'))
                <div id="successModal"
                    class="fixed inset-0 bg-black/60 z-50 flex items-center justify-center animate-fadeIn">
                    <div class="bg-white rounded-2xl shadow-xl p-8 max-w-md w-full text-center relative">
                        <i class="fa-solid fa-circle-check text-green-500 text-5xl mb-4"></i>
                        <h2 class="text-2xl font-bold text-gray-800 mb-2">Pesan Terkirim!</h2>
                        <p class="text-gray-600 mb-6">{{ session('success') }}</p>
                        <button onclick="closeSuccessModal()"
                            class="bg-blue-600 text-white px-6 py-2 rounded-lg hover:bg-blue-700 transition">
                            Tutup
                        </button>
                    </div>
                </div>

                <script>
                    // Tutup modal manual
                    function closeSuccessModal() {
                        const modal = document.getElementById('successModal');
                        modal.classList.add('animate-fadeOut');
                        setTimeout(() => modal.remove(), 400);
                    }

                    // Auto hilang setelah 5 detik
                    setTimeout(() => {
                        closeSuccessModal();
                    }, 5000);
                </script>

                <style>
                    @keyframes fadeIn {
                        from {
                            opacity: 0;
                            transform: scale(0.9);
                        }

                        to {
                            opacity: 1;
                            transform: scale(1);
                        }
                    }

                    @keyframes fadeOut {
                        from {
                            opacity: 1;
                            transform: scale(1);
                        }

                        to {
                            opacity: 0;
                            transform: scale(0.9);
                        }
                    }

                    .animate-fadeIn {
                        animation: fadeIn 0.3s ease-out forwards;
                    }

                    .animate-fadeOut {
                        animation: fadeOut 0.3s ease-in forwards;
                    }
                </style>
            @endif
        </div>
    </section>
@endsection