@extends('layouts.frontend')
@section('main-content')
    <section id="kontak" class="bg-gray-100 py-16 sm:py-24 px-4 sm:px-6 lg:px-8">
        <div class="max-w-7xl mx-auto">
            <div class="text-center mb-12">
                <h2 class="text-4xl font-extrabold text-aksen-gelap sm:text-5xl">Hubungi Kami</h2>
                <p class="mt-4 text-xl text-gray-600">Kami siap menjawab pertanyaan Anda dan memberikan informasi lebih
                    lanjut.</p>
            </div>

            <div class="grid grid-cols-1 lg:grid-cols-3 gap-12 bg-white p-8 md:p-12 rounded-xl shadow-2xl">
                <div class="lg:col-span-1 space-y-8">
                    <h3 class="text-2xl font-bold text-teks-utama mb-4 border-b-2 border-utama pb-2">Detail Kontak</h3>

                    <div class="flex items-start space-x-4">
                        <svg class="h-8 w-8 text-utama-gelap flex-shrink-0 mt-1" fill="none" viewBox="0 0 24 24"
                            stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
                        </svg>
                        <div>
                            <p class="text-lg font-semibold text-aksen-gelap">Email</p>
                            <a href="mailto:info@sekolahxyz.sch.id"
                                class="text-gray-600 hover:text-utama-gelap transition-colors">{{$meta_seo->email}}</a>
                        </div>
                    </div>

                    <div class="flex items-start space-x-4">
                        <svg class="h-8 w-8 text-utama-gelap flex-shrink-0 mt-1" fill="none" viewBox="0 0 24 24"
                            stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.128a11.042 11.042 0 005.516 5.516l1.128-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z" />
                        </svg>
                        <div>
                            <p class="text-lg font-semibold text-aksen-gelap">Telepon</p>
                            <a href="tel:+{{$meta_seo->phone}}" class="text-gray-600 hover:text-utama-gelap transition-colors">{{$meta_seo->phone}}</a>
                        </div>
                    </div>

                    <div class="flex items-start space-x-4">
                        <svg class="h-8 w-8 text-utama-gelap flex-shrink-0 mt-1" fill="none" viewBox="0 0 24 24"
                            stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.828 0l-4.243-4.243a8 8 0 1111.314 0z" />
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                d="M15 11a3 3 0 11-6 0 3 3 0 016 0z" />
                        </svg>
                        <div>
                            <p class="text-lg font-semibold text-aksen-gelap">Alamat Sekolah</p>
                            <p class="text-gray-600">{{$meta_seo->address}}</p>
                        </div>
                    </div>
                </div>

                <div class="lg:col-span-2">
                    <h3 class="text-2xl font-bold text-teks-utama mb-6 border-b-2 border-aksen pb-2">Kirim Pesan Langsung
                    </h3>
                    <form action="#" method="POST" class="space-y-6">
                        <div>
                            <label for="nama" class="block text-sm font-medium text-gray-700">Nama Lengkap</label>
                            <input type="text" name="fullname" id="fullname" autocomplete="name" required
                                class="mt-1 block w-full border-2 border-gray-300 rounded-lg shadow-md focus:outline-none focus:ring-4 focus:ring-aksen/50 focus:border-utama-gelap p-3 transition duration-300">
                        </div>
                        <div class="grid grid-cols-1 sm:grid-cols-2 gap-6">

                            <div>
                                <label for="subjek" class="block text-sm font-medium text-gray-700">Email</label>
                                <input type="email" name="email" id="email" autocomplete="email" required
                                    class="mt-1 block w-full border-2 border-gray-300 rounded-lg shadow-md focus:outline-none focus:ring-4 focus:ring-aksen/50 focus:border-utama-gelap p-3 transition duration-300">
                            </div>
                            <div>
                                <label for="email" class="block text-sm font-medium text-gray-700">No.Telpon/WhatsApp</label>
                                <input type="number" name="phone" id="phone"  required
                                    class="mt-1 block w-full border-2 border-gray-300 rounded-lg shadow-md focus:outline-none focus:ring-4 focus:ring-aksen/50 focus:border-utama-gelap p-3 transition duration-300">
                            </div>
                        </div>

                        <div>
                            <label for="pesan" class="block text-sm font-medium text-gray-700">Pesan</label>
                            <textarea name="description" id="description" rows="4" required
                                class="mt-1 block w-full border-2 border-gray-300 rounded-lg shadow-md focus:outline-none focus:ring-4 focus:ring-aksen/50 focus:border-utama-gelap p-3 transition duration-300"></textarea>
                        </div>
                        <div class="text-right">
                            <button type="submit" onclick="send()" id="btn-send"
                                class="inline-flex justify-center py-3 px-8 border border-transparent shadow-lg text-base font-bold rounded-full text-aksen-gelap bg-aksen hover:bg-utama-gelap hover:text-white transition duration-300 transform hover:scale-105">
                                Kirim Pesan →
                            </button>
                        </div>
                    </form>
                </div>
            </div>

            <div class="mt-12">
                <h3 class="text-2xl font-bold text-teks-utama mb-4 text-center">Lokasi Kami</h3>
                <div class="rounded-xl overflow-hidden shadow-2xl border-4 border-utama-gelap/50">
                    <iframe
                        src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3963.731601067319!2d107.7521652!3d-6.5555286!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x2e693c85ea1573f3%3A0xef79b1f2cb88fe6e!2sSMK%20Kes.%20Bhakti%20Kencana%20Subang!5e0!3m2!1sid!2sid!4v1745909746666!5m2!1sid!2sid"
                        width="100%" height="450" style="border:0;" allowfullscreen="" loading="lazy">
                    </iframe>
                </div>
            </div>

        </div>
    </section>
    <script>
        $(document).ready(function() {
            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                }
            });
        });


        function send() {
            var fullname = $("#fullname").val();
            var email = $("#email").val();
            var phone = $("#phone").val();
            var description = $("#description").val();
            var _token = $("#_token").val();
            if (fullname == "") {
                Swal.fire({
                    title: "Gagal",
                    text: "Nama Lengkap Tidak Boleh Kosong",
                    icon: "error"
                });
                return false;
            } else if (email == "") {
                Swal.fire({
                    title: "Gagal",
                    text: "Email Tidak Boleh Kosong",
                    icon: "error"
                });
                return false;
            } else if (phone == "") {
                Swal.fire({
                    title: "Gagal",
                    text: "No.Telpon / WhatsApp Tidak Boleh Kosong",
                    icon: "error"
                });
                return false;
            } else if (description == "") {
                Swal.fire({
                    title: "Gagal",
                    text: "Catatan Tidak Boleh Kosong",
                    icon: "error"
                });
                return false;
            }
            $.ajax({
                url: "{{ route('sendContact') }}",
                type: "POST",
                data: {
                    fullname,
                    email,
                    phone,
                    description,
                    _token
                },
                daraType: "json",
                cache: false,
                beforeSend: function() {
                    $("#btn-send").attr("disabled", "disabled");
                    $("#btn-send").html("<i class='fa fa-spinner fa-pulse'></i> Loading...");
                },
                success: function(data) {
                    if (data.status == "success") {
                        $("#fullname").val("");
                        $("#email").val("");
                        $("#phone").val("");
                        $("#description").val("");
                    }
                    Swal.fire({
                        title: data.title,
                        text: data.text,
                        icon: data.status
                    });
                },
                complete: function() {
                    $("#btn-send").removeAttr("disabled");
                    $("#btn-send").html("<li class='fa fa-send'></li> Kirim");
                }
            });
        }
    </script>
@endsection