@extends('layouts.main-app')
@section('title', 'Homepage')

@section('content')


    @include('layouts.navbar', [
        'headerTitle' => 'Contact Us',
        'headerDescription' => '',
    ])


    <div class="relative w-full h-full mb-24">
        <img src="{{ asset('assets/about/aboutbanner.png') }}" alt="Healthcare"
            class="absolute top-0 left-0 z-0 object-cover w-full h-full">

        <div class="relative flex flex-col items-center justify-center gap-2 py-32 md:flex-row" data-aos='fade-up'
            data-aos-duration='1100'>
            <span class="text-xl font-bold text-white sm:text-2xl md:text-3xl lg:text-4xl inter-font">Home > </span>
            <span class="text-xl font-bold text-white sm:text-2xl md:text-3xl lg:text-4xl inter-font">Contact Us </span>

        </div>
    </div>

    <section class="container flex flex-col items-center justify-center max-w-screen-lg gap-4 px-4 py-10 mx-auto mt-10">
        <!-- Embedded Google Map -->
        <iframe
            src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d463.4353047252189!2d121.08535525961281!3d14.558831535633722!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3397c7269571574d%3A0xd6f2a9beebb4ee66!2sConstruction%20of%20SEVEN%20(7)%20STOREY%20PRIME%20HOSPITAL%20AND%20MEDICAL%20CENTER!5e0!3m2!1sen!2sph!4v1742568920817!5m2!1sen!2sph"
            width="100%" height="300" style="border:0;" allowfullscreen="" loading="lazy"
            referrerpolicy="no-referrer-when-downgrade" class="h-[400px] w-full">
        </iframe>
    </section>

    @if (session('success'))
        <div id="successModal" class="fixed inset-0 z-50 flex items-center justify-center hidden bg-black bg-opacity-50">
            <div class="w-full max-w-md p-8 mx-4 transition-all transform scale-95 bg-white rounded-lg opacity-0"
                id="modalContent">
                <div class="text-center">
                    <div class="flex items-center justify-center w-16 h-16 mx-auto mb-4 bg-green-100 rounded-full">
                        <svg class="w-10 h-10 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
                        </svg>
                    </div>
                    <h3 class="mb-2 text-lg font-medium text-gray-900">Message Sent Successfully!</h3>
                    <p class="mb-6 text-sm text-gray-500">{{ session('success') }}</p>
                    <button onclick="closeModal()"
                        class="w-full px-4 py-2 text-white transition duration-300 bg-blue-600 rounded-full hover:bg-blue-700">
                        Close
                    </button>
                </div>
            </div>
        </div>

        <script>
            document.addEventListener("DOMContentLoaded", function() {
                const modal = document.getElementById('successModal');
                const modalContent = document.getElementById('modalContent');

                // Show modal
                modal.classList.remove('hidden');
                setTimeout(() => {
                    modalContent.classList.remove('scale-95', 'opacity-0');
                    modalContent.classList.add('scale-100', 'opacity-100');
                }, 100);

                // Auto close after 5 seconds
                setTimeout(() => {
                    closeModal();
                }, 5000);
            });

            function closeModal() {
                const modal = document.getElementById('successModal');
                const modalContent = document.getElementById('modalContent');

                modalContent.classList.remove('scale-100', 'opacity-100');
                modalContent.classList.add('scale-95', 'opacity-0');

                setTimeout(() => {
                    modal.classList.add('hidden');
                }, 300);
            }
        </script>
    @endif


    <section
        class="container flex flex-col items-center justify-center max-w-screen-lg gap-4 px-4 pt-10 pb-32 mx-auto mt-10">
        <div class="grid w-full grid-cols-1 gap-6 md:grid-cols-3">
            <!-- Contact Form -->
            <div class="space-y-6 md:col-span-2">
                <h1 class="text-2xl font-bold text-center sofia-font md:text-left">Contact Form</h1>
                <form action="{{ route('store.contact') }}" method="POST" class="">
                    @csrf

                    <div class="grid grid-cols-1 gap-6 pb-5 md:grid-cols-2">
                        <input type="text" name="name" id="name" placeholder="Name"
                            class="w-full px-4 py-2 border-b border-blue-800 rounded-sm bg-blue-100/60" required>
                        <input type="email" name="emailAddress" id="emailAddress" placeholder="Email"
                            class="w-full px-4 py-2 border-b border-blue-800 rounded-sm bg-blue-100/60" required>
                        <input type="text" name="subject" id="subject" placeholder="Subject"
                            class="w-full px-4 py-2 border-b border-blue-300 rounded-sm bg-blue-100/60" required>
                        <input type="text" name="phoneNumber" id="phoneNumber" placeholder="Phone"
                            class="w-full px-4 py-2 border-b border-blue-300 rounded-sm bg-blue-100/60">
                        <textarea name="message" id="message" placeholder="Message"
                            class="w-full col-span-1 px-4 py-2 border-b border-blue-300 rounded-sm bg-blue-100/60 md:col-span-2" required></textarea>
                    </div>

                    <div class="g-recaptcha mb-2" data-sitekey="6LcS3JIrAAAAAEu1P7IBdh7tINDo-J06_n1ljL7_">
                    </div>

                    @if ($errors->has('g-recaptcha-response'))
                        <div class="text-danger mb-2 text-red-700">{{ $errors->first('g-recaptcha-response') }}</div>
                    @endif

                    <!-- Load the reCAPTCHA v2 script -->
                    <script src="https://www.google.com/recaptcha/api.js" async defer></script>

                    <button type="submit" class="p-2 px-5 text-white bg-blue-600 rounded-full w-fit md:w-auto">
                        Send Message →
                    </button>
                </form>

            </div>

            <!-- Contact Info -->
            <div class="p-4 space-y-6 md:col-span-1">
                <h1 class="text-2xl font-bold text-center sofia-font md:text-left">Contact Info</h1>

                <span class="flex items-center gap-2">
                    <i class='text-2xl bx bxs-map-pin'></i>
                    <p>San Agustin Street Corner Caryncho Avenue, San Agustin, San Fernando, Pampanga</p>
                </span>
                <span class="flex items-center gap-2">
                    <i class='text-2xl bx bxs-phone'></i>
                    <p>+6394-5728-3878</p>
                </span>
                <span class="flex items-center gap-2">
                    <i class='text-2xl bx bxs-envelope'></i>
                    <p>primehostpital@gmail.info</p>
                </span>
                <span class="flex justify-center hidden md:justify-start">
                    <h1>Just an image here</h1>
                    <!-- Replace with actual image as needed -->
                </span>
            </div>
        </div>
    </section>


@endsection