@extends('layouts.app')

@section('title', 'Contact Us | IBS')
@section('description', 'Contact International Building Services LLC for plumbing and general contracting services in Houston. Get a free estimate today!')

@section('content')

<x-subpage-hero 
    title="Get in Touch" 
    description="We’re here to answer your questions and start planning your next project."
/>

<x-breadcrumbs :items="$breadcrumbs" />



{{-- Contact Info & Form --}}
<section class="bg-gray-100 py-20">
    <div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="grid grid-cols-1 md:grid-cols-2 gap-16">

            {{-- Contact Details --}}
            <div data-aos="fade-up">
                <h2 class="text-3xl font-serif text-gray-900 mb-6">Contact Information</h2>
                <p class="text-gray-700 mb-8">
                    Have a question or need a quote? We're ready to help. Reach out to us via phone, email, or the contact form, and a member of our team will get back to you promptly.
                </p>
                <div class="space-y-6">
                    <div class="flex items-center">
                        <i class="fas fa-phone text-yellow-600 text-xl mr-4"></i>
                        <div>
                            <h3 class="font-semibold text-gray-800">Phone</h3>
                            <a href="tel:2814924016" class="text-gray-600 hover:text-yellow-700">281-492-4016</a>
                        </div>
                    </div>
                    <div class="flex items-center">
                        <i class="fas fa-envelope text-yellow-600 text-xl mr-4"></i>
                        <div>
                            <h3 class="font-semibold text-gray-800">Email</h3>
                            <a href="mailto:Office@intbldgservices.com" class="text-gray-600 hover:text-yellow-700">Office@intbldgservices.com</a>
                        </div>
                    </div>
                    <div class="flex items-center">
                        <i class="fas fa-map-marker-alt text-yellow-600 text-xl mr-4"></i>
                        <div>
                            <h3 class="font-semibold text-gray-800">Office</h3>
                            <p class="text-gray-600">11611 W Airport Blvd #182 Meadows Place, TX 77477</p>
                        </div>
                    </div>
                </div>
                <div class="mt-10">
                    <h3 class="text-xl font-serif text-gray-900 mb-4">Business Hours</h3>
                    <p class="text-gray-600">Office Hours M-F 7-5pm</p>
                    <p class="text-gray-600">Plumbing Services 24/7</p>
                </div>
            </div>

            {{-- Contact Form --}}
            <div class="bg-white p-8 rounded-lg shadow-xl border border-gray-200" data-aos="fade-up" data-aos-delay="100">
                <h2 class="text-3xl font-extrabold text-gray-900 mb-4 text-center">Send Us a Message</h2>

                <div id="form-messages" class="mb-4"></div>

                <form id="contact-form" action="{{ route('contact.store') }}" method="POST">
                    @csrf
                    <div class="grid grid-cols-1 sm:grid-cols-2 gap-6 mb-6">
                        <div>
                            <label for="name" class="block text-sm font-semibold text-gray-700 mb-2">Name</label>
                            <input type="text" id="name" name="name" class="block w-full px-4 py-3 border border-gray-300 rounded-md shadow-sm focus:ring-yellow-500 focus:border-yellow-500 text-gray-900 placeholder-gray-400" required>
                        </div>
                        <div>
                            <label for="email" class="block text-sm font-semibold text-gray-700 mb-2">Email</label>
                            <input type="email" id="email" name="email" class="block w-full px-4 py-3 border border-gray-300 rounded-md shadow-sm focus:ring-yellow-500 focus:border-yellow-500 text-gray-900 placeholder-gray-400" required>
                        </div>
                    </div>
                    <div class="mb-6">
                        <label for="phone" class="block text-sm font-semibold text-gray-700 mb-2">Phone</label>
                        <input type="tel" id="phone" name="phone" class="block w-full px-4 py-3 border border-gray-300 rounded-md shadow-sm focus:ring-yellow-500 focus:border-yellow-500 text-gray-900 placeholder-gray-400" required>
                    </div>
                    <div class="mb-6">
                        <label for="address" class="block text-sm font-semibold text-gray-700 mb-2">Address</label>
                        <input type="text" id="address" name="address" class="block w-full px-4 py-3 border border-gray-300 rounded-md shadow-sm focus:ring-yellow-500 focus:border-yellow-500 text-gray-900 placeholder-gray-400" required>
                    </div>
                    <div class="mb-8">
                        <label for="message" class="block text-sm font-semibold text-gray-700 mb-2">Brief Description</label>
                        <textarea id="message" name="message" rows="6" class="block w-full px-4 py-3 border border-gray-300 rounded-md shadow-sm focus:ring-yellow-500 focus:border-yellow-500 text-gray-900 placeholder-gray-400" required></textarea>
                    </div>
                    <div class="mb-6">
                        <div class="g-recaptcha" data-sitekey="{{ config('services.recaptcha.site_key') }}"></div>
                    </div>
                    <div>
                        <button type="submit" id="submit-button" class="w-full bg-yellow-600 text-white font-bold py-3 px-6 rounded-lg hover:bg-yellow-700 transition-all duration-300 shadow-md transform hover:scale-105">
                            Submit Inquiry
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</section>

{{-- FAQ Section --}}
<section class="bg-white py-20">
    <div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
        <h2 class="text-3xl font-extrabold text-center text-gray-900 mb-10">Frequently Asked Questions</h2>
        <div class="grid grid-cols-1 md:grid-cols-2 gap-x-8 gap-y-6">
            <x-faq-item question="Are you able to pull MEP permits?" answer="Yes, we are able to pull all necessary MEP (Mechanical, Electrical, and Plumbing) permits for your project." />
            <x-faq-item question="Are you an insured company?" answer="Yes, we are fully insured for your protection and peace of mind." />
            <x-faq-item question="Do you offer any type of warranty on your work?" answer="Yes, we do. All warranty details will be clearly specified in your invoice." />
        </div>
    </div>
</section>

{{-- Map Section --}}
<section class="bg-gray-200">
    <div class="w-full">
        <iframe 
            src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3466.263629492265!2d-95.58000468489374!3d29.68245598201794!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x8640e7a2a3a5c2b5%3A0x7b2e3b3b3b3b3b3b!2s11611%20W%20Airport%20Blvd%20%23182%2C%20Meadows%20Place%2C%20TX%2077477!5e0!3m2!1sen!2sus!4v1672338948043!5m2!1sen!2sus" 
            width="100%" 
            height="450" 
            style="border:0;" 
            allowfullscreen="" 
            loading="lazy" 
            referrerpolicy="no-referrer-when-downgrade"
            data-aos="fade-up"
        ></iframe>
    </div>
</section>

@endsection
@push('scripts')
<script src="https://www.google.com/recaptcha/api.js" async defer></script>
<script>
    document.addEventListener('DOMContentLoaded', function() {
        const contactForm = document.getElementById('contact-form');
        const formMessages = document.getElementById('form-messages');
        const submitButton = document.getElementById('submit-button');

        contactForm.addEventListener('submit', function(event) {
            event.preventDefault();

            const formData = new FormData(contactForm);
            const data = Object.fromEntries(formData.entries());
            const originalButtonText = submitButton.innerHTML;

            // Disable button and show loading text
            submitButton.disabled = true;
            submitButton.innerHTML = 'Sending...';

            // Clear previous messages
            formMessages.innerHTML = '';

            fetch('{{ route("contact.store") }}', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
                    'Accept': 'application/json',
                },
                body: JSON.stringify(data),
            })
            .then(response => {
                return response.json().then(body => ({ ok: response.ok, status: response.status, body }));
            })
            .then(({ ok, status, body }) => {
                if (ok) {
                    // Handle success
                    formMessages.innerHTML = `<div class="bg-green-100 border border-green-400 text-green-700 px-4 py-3 rounded relative" role="alert">${body.message}</div>`;
                    contactForm.reset(); // Clear the form fields
                    grecaptcha.reset(); // Reset reCAPTCHA

                    // Hide success message after 3 seconds
                    setTimeout(() => {
                        formMessages.innerHTML = '';
                    }, 3000);
                } else if (status === 422) {
                    // Handle validation errors
                    let errorHtml = '<div class="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded relative" role="alert"><ul class="list-disc list-inside">';
                    for (const field in body.errors) {
                        body.errors[field].forEach(error => {
                            errorHtml += `<li>${error}</li>`;
                        });
                    }
                    errorHtml += '</ul></div>';
                    formMessages.innerHTML = errorHtml;
                    grecaptcha.reset(); // Reset reCAPTCHA
                } else {
                    // Handle other server errors
                    formMessages.innerHTML = `<div class="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded relative" role="alert">An unexpected error occurred. Please try again later.</div>`;
                    grecaptcha.reset(); // Reset reCAPTCHA
                }
            })
            .catch(error => {
                console.error('Error:', error);
                formMessages.innerHTML = `<div class="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded relative" role="alert">A network error occurred. Please check your connection and try again.</div>`;
                grecaptcha.reset(); // Reset reCAPTCHA
            })
            .finally(() => {
                // Re-enable button and restore original text
                submitButton.disabled = false;
                submitButton.innerHTML = originalButtonText;
            });
        });
    });
</script>
@endpush