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

@section('content')


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


<div class="w-full  relative h-full mb-24">
        <img src="{{asset('assets/about/aboutbanner.png')}}" alt="Healthcare" class="w-full h-full object-cover absolute top-0 left-0 z-0">
        
            <div class="flex flex-col md:flex-row gap-2 justify-center items-center relative py-32"
            data-aos='fade-up'
            data-aos-duration='1100'
            >
                <span class="text-xl sm:text-2xl md:text-3xl lg:text-4xl font-bold text-white inter-font"
                
                >Home > </span>
                <span class="text-xl sm:text-2xl md:text-3xl lg:text-4xl font-bold text-white inter-font">Contact Us </span>
                
            </div>
    </div>

<section class="flex flex-col gap-4 justify-center items-center mt-10 max-w-screen-lg mx-auto container py-10 px-4">
                <!-- 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="alertMessage" class="fixed top-5 right-5 z-50 flex items-center p-4  text-white bg-green-600  text-lg rounded-lg shadow-lg animate-slide-in opacity-0 transition-opacity duration-500 ease-out">
                <svg class="w-6 h-6 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
                </svg>
                <span>{{ session('success') }}</span>
            </div>
            <script>
                document.addEventListener("DOMContentLoaded", function() {
                    const alertBox = document.getElementById('alertMessage');
                    setTimeout(() => alertBox.classList.add('opacity-100'), 100);
                    setTimeout(() => alertBox.classList.remove('opacity-100'), 5000);
                });
            </script>
          @endif


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

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

            </div>
            
            <!-- Contact Info -->
            <div class="md:col-span-1 space-y-6 p-4">
                <h1 class="text-2xl font-bold sofia-font text-center md:text-left">Contact Info</h1>
                
                <span class="flex items-center gap-2">
                    <i class='bx bxs-map-pin text-2xl'></i>
                    <p>San Agustin Street Corner Caryncho Avenue, San Agustin, San Fernando, Pampanga</p>
                </span>
                <span class="flex items-center gap-2">
                    <i class='bx bxs-phone text-2xl'></i>
                    <p>01 (945894835)</p>
                </span>
                <span class="flex items-center gap-2">
                    <i class='bx bxs-envelope text-2xl'></i>
                    <p>primehostpital@gmail.info</p>
                </span>
                <span class="flex justify-center md:justify-start hidden">
                    <h1>Just an image here</h1>
                    <!-- Replace with actual image as needed -->
                </span>
            </div>
        </div>
    </section>


@endsection