@extends('layouts.navfot')

@section('content')
    <!-- Contact Section -->
    <div class="container py-5">
        <h2 class="text-center mb-4 text-primary fw-bold">Hubungi Kami</h2>
        <p class="text-center mb-5">Punya pertanyaan? Kirim pesan ke tim kami melalui formulir di bawah ini.</p>

        <div class="row justify-content-center">
            <div class="col-md-6">

                <form id="contactForm" method="POST" action="{{ url('/contact') }}">
                    @csrf
                    <div class="mb-3">
                        <label for="name" class="form-label">Nama</label>
                        <input type="text" class="form-control" id="name" name="name" required>
                    </div>
                    <div class="mb-3">
                        <label for="email" class="form-label">Alamat Email</label>
                        <input type="email" class="form-control" id="email" name="email" required>
                    </div>
                    <div class="mb-3">
                        <label for="message" class="form-label">Pesan</label>
                        <textarea class="form-control" id="message" name="message" rows="5" required></textarea>
                    </div>
                    <button type="submit" class="btn btn-primary w-100">Kirim Pesan</button>
                </form>
            </div>

            <div class="col-md-6">
                <!-- Google Maps -->
                <div style="width: 100%; height: 400px;">
                    <iframe
                        src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3966.522349147724!2d106.9240335!3d-6.2036272!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x2e698b5aa9158cfd%3A0x4eaac993347260ef!2sJl.%20Anggrek%20Raya%20III%2C%20Jatinegara%2C%20Kec.%20Cakung%2C%20Kota%20Jakarta%20Timur%2C%20Daerah%20Khusus%20Ibukota%20Jakarta%2013930!5e0!3m2!1sid!2sid!4v1717764691574!5m2!1sid!2sid"
                        width="100%" height="100%" style="border:0;" allowfullscreen="" loading="lazy"></iframe>
                </div>
            </div>
        </div>
    </div>
@endsection