{{-- resources/views/public/contact.blade.php --}}
<section id="contact" class="section-spacing contact-section">
    <div class="container">
        <div class="text-center mb-5">
            <h2 class="section-title">Hubungi Kami</h2>
            <p class="text-muted" style="font-size: 1.1rem;">Kami siap menjawab semua pertanyaan Anda tentang Madrasah Al Idrus Lengkong</p>
        </div>
        
        @if(session('success'))
            <div class="alert alert-success text-center border-0 shadow-sm mb-5 rounded-pill"><i class="bi bi-check-circle-fill me-2"></i>{{ session('success') }}</div>
        @endif

        <div class="contact-info">
            <div class="contact-card">
                <div class="contact-icon"><i class="bi bi-geo-alt"></i></div>
                <h6 class="contact-title">Alamat</h6>
                <p class="contact-value">{{ $profil->alamat ?? 'Jl. Raya Lengkong, Ciwaringin, Kabupaten Cirebon, Jawa Barat' }}</p>
            </div>
            <div class="contact-card">
                <div class="contact-icon"><i class="bi bi-telephone"></i></div>
                <h6 class="contact-title">Telepon</h6>
                <p class="contact-value"><a href="tel:{{ $profil->telepon ?? '' }}">{{ $profil->telepon ?? '(0231) 123-4567' }}</a></p>
            </div>
            <div class="contact-card">
                <div class="contact-icon"><i class="bi bi-whatsapp"></i></div>
                <h6 class="contact-title">WhatsApp</h6>
                <p class="contact-value"><a href="https://wa.me/{{ preg_replace('/[^0-9]/', '', $profil->telepon ?? '62811234567') }}" target="_blank">Chat via WA</a></p>
            </div>
            <div class="contact-card">
                <div class="contact-icon"><i class="bi bi-envelope"></i></div>
                <h6 class="contact-title">Email</h6>
                <p class="contact-value"><a href="mailto:{{ $profil->email ?? 'info@alidruslengkong.sch.id' }}">{{ $profil->email ?? 'info@alidruslengkong.sch.id' }}</a></p>
            </div>
        </div>
        <div class="row g-4 mt-5">
            <div class="col-lg-6">
                <h5 style="color: var(--primary-dark); margin-bottom: 1.5rem;">Kirim Pesan</h5>
                <form action="{{ route('public.kontak.store') }}" method="POST">
                    @csrf
                    <div class="mb-3">
                        <input type="text" name="nama" class="form-control" placeholder="Nama Lengkap" required>
                    </div>
                    <div class="mb-3">
                        <input type="email" name="email" class="form-control" placeholder="Email Anda" required>
                    </div>
                    <div class="mb-3">
                        <input type="text" name="subjek" class="form-control" placeholder="Subjek" required>
                    </div>
                    <div class="mb-3">
                        <textarea name="pesan" class="form-control" rows="5" placeholder="Pesan Anda" required></textarea>
                    </div>
                    <button type="submit" class="btn-submit">Kirim Pesan</button>
                </form>
            </div>
            <div class="col-lg-6">
                <h5 style="color: var(--primary-dark); margin-bottom: 1.5rem;">Lokasi Kami</h5>
                
                @if(isset($profil) && $profil->google_maps_iframe)
                    <div class="rounded-4 overflow-hidden shadow-sm google-maps-container" style="height: 400px; border: 2px solid rgba(6, 78, 59, 0.1);">
                        {!! $profil->google_maps_iframe !!}
                    </div>
                @else
                    <div class="maps-placeholder rounded-4">
                        <div class="maps-text"><i class="bi bi-map"></i>
                            <p style="margin: 0; color: var(--primary-emerald); font-weight: 700;">Google Maps belum disematkan</p>
                            <small style="color: var(--text-light);">{{ $profil->alamat ?? 'Ciwaringin, Kabupaten Cirebon, Jawa Barat' }}</small>
                        </div>
                    </div>
                @endif
                
            </div>
        </div>
    </div>
</section>

<style>
    .google-maps-container iframe {
        width: 100% !important;
        height: 100% !important;
        border: 0 !important;
    }
</style>