@extends('layouts.public')
@section('title', 'Connect With US')
@section('content')
    <!-- <section> begin ============================-->
    <section class="text-center overflow-hidden p-0 position-relative" data-zanim-timeline="{}" data-zanim-trigger="scroll">
        <div class="bg-holder overlay parallax">
            <video muted="" loop="" autoplay="" class="bg-video">
                <source src="templates/reing/assets/video/contact.mp4" type="video/mp4">
            </video>
        </div>
        <!--/.bg-holder-->
        <div class="container-fluid h-100">
            <div class="header-overlay"></div>
            <div class="position-relative d-flex align-items-center justify-content-center min-vh-100">
                <div class="header-text">
                    <div class="overflow-hidden">
                        <h1 class="display-3 fs-7 text-white fw-lighter ls-2" data-zanim-xs='{"duration":2,"delay":0}'>
                            Connect With US</h1>
                    </div>
                    <div class="overflow-hidden">
                        <div class="d-flex justify-content-center" data-zanim-xs='{"duration":2,"delay":0.1}'>
                            <nav aria-label="breadcrumb">
                                <ol class="breadcrumb text-uppercase ls-2">
                                    <li class="breadcrumb-item"><a class="text-400 hover-color-white"
                                            href="{{ route('home') }}">Home</a></li>
                                    <li class="breadcrumb-item active" aria-current="page">contact
                                    </li>
                                </ol>
                            </nav>
                        </div>
                    </div>
                </div>
            </div>
            <!-- Header Indicator (Botón de bajar) -->
            <div class="header-indicator-down">
                <a class="indicator indicator-down opacity-75" href="#contact" data-scroll-to="contact">
                    <span class="indicator-arrow indicator-arrow-one"
                        data-zanim-xs='{"from":{"opacity":0,"y":30},"to":{"opacity":1,"y":0},"ease":"Back.easeOut","duration":1,"delay":1.5}'>
                    </span>
                </a>
            </div>
        </div><!-- end of .container-->
    </section><!-- <section> close ============================-->
    <!-- ============================================-->

    <!-- <section> begin ============================-->
    <section class="pt-3 pt-lg-5 pb-6 pb-lg-8 text-center" style="scroll-margin-top:-25px" id="contact">
        <div class="container">
            <div class="row justify-content-center" data-zanim-timeline="{}" data-zanim-trigger="scroll">
                <div class="col-lg-8">
                    <div class="overflow-hidden">
                        <h2 class="fs-md-4 mb-3" data-zanim-xs='{"delay":0.3}'>Connect with US</h2>
                    </div>
                    <div class="overflow-hidden">
                        <p class="text-gray" data-zanim-xs='{"delay":0.6}'>
                            Our team is ready to support you 24/7.<br>
                            Reach out through any of the channels below, we're here to assist you.
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- <section> close ============================-->
    <!-- ============================================-->

    <!-- <section> begin ============================-->
    <section class="pt-3 pt-lg-5 pb-3 pb-lg-5 text-center bg-light" style="scroll-margin-top:-25px">
        <div class="container">
            <div class="row justify-content-center" data-zanim-timeline="{}" data-zanim-trigger="scroll">
                <div class="col-lg-6 mb-5 mb-lg-0 d-flex flex-column justify-content-between">
                    <div class="row">
                        <div class="col-12">
                            <h5 class="mb-4">Contact</h5>
                        </div>
                        <!-- Contact Info Grid -->
                        <div class="col-12 mb-4">
                            <div class="row g-4">
                                <!-- Headquarters -->
                                <div class="col-md-6">
                                    <a href="https://maps.app.goo.gl/aW8HGGAQEqNXtj8e9" target="_blank"
                                        rel="noopener noreferrer" class="text-decoration-none">
                                        <div class="contact-info-item h-100 text-center"
                                            style="cursor: pointer; transition: transform 0.2s ease;">
                                            <div class="mb-3">
                                                <span class="fas fa-map-marked-alt text-700 fs-1"></span>
                                            </div>
                                            <div>
                                                <p class="mb-1 text-700 fw-bold">HEADQUARTERS</p>
                                                <p class="mb-0 text-600">
                                                    {{ config('contact.address.line1') }}<br class="d-block d-sm-none">
                                                    {{ config('contact.address.line2') }}
                                                    {{ config('contact.address.line3') }}<br class="d-block d-sm-none">
                                                </p>
                                            </div>
                                        </div>
                                    </a>
                                </div>

                                <!-- Phone -->
                                <div class="col-md-6">
                                    <div class="contact-info-item h-100 text-center">
                                        <div class="mb-3">
                                            <span class="fas fa-phone text-700 fs-1"></span>
                                        </div>
                                        <div>
                                            <p class="mb-1 text-700 fw-bold">PHONE</p>
                                            <a class="text-600 text-decoration-none"
                                                href="tel:{{ str_replace(' ', '', config('contact.phone')) }}">
                                                {{ config('contact.phone') }}
                                            </a>
                                            <p class="mt-2 mb-1 text-700 fw-bold">TOLL FREE NUMBER</p>
                                            <a class="text-600 text-decoration-none"
                                                href="tel:{{ str_replace(' ', '', config('contact.phone_free')) }}">
                                                {{ config('contact.phone_free') }}
                                            </a>
                                        </div>
                                    </div>
                                </div>

                                <!-- Email -->
                                <div class="col-md-6">
                                    <div class="contact-info-item h-100 text-center">
                                        <div class="mb-3">
                                            <span class="fas fa-envelope text-700 fs-1"></span>
                                        </div>
                                        <div>
                                            <p class="mb-1 text-700 fw-bold">EMAIL</p>
                                            <div class="text-600">
                                                <strong>TRIP SUPPORT:</strong><br>
                                                <a class="text-600 text-decoration-none"
                                                    href="mailto:{{ config('contact.emails.trip') }}">
                                                    {{ config('contact.emails.trip') }}</a><br>
                                                <strong>FUEL REQUESTS:</strong><br>
                                                <a class="text-600 text-decoration-none"
                                                    href="mailto:{{ config('contact.emails.fuel') }}">
                                                    {{ config('contact.emails.fuel') }}</a><br>
                                                <strong>CHARTER INQUIRIES:</strong><br>
                                                <a class="text-600 text-decoration-none"
                                                    href="mailto:{{ config('contact.emails.charter') }}">
                                                    {{ config('contact.emails.charter') }}</a>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <!-- WhatsApp Support -->
                                <div class="col-md-6">
                                    <div class="contact-info-item h-100 text-center">
                                        <div class="mb-3">
                                            <span class="fab fa-whatsapp text-700 fs-1"></span>
                                        </div>
                                        <div>
                                            <p class="mb-1 text-700 fw-bold">WHATSAPP SUPPORT</p>
                                            <p class="mb-3 text-600">Quick answers via WhatsApp:</p>

                                            <!-- General Enquiries -->
                                            <div class="mb-2">
                                                <a href="https://wa.me/{{ config('contact.whatsapp.general.number') }}?text={{ urlencode(config('contact.whatsapp.general.message')) }}"
                                                    target="_blank" rel="noopener noreferrer"
                                                    class="btn btn-success btn-sm">
                                                    <i class="fab fa-whatsapp me-1"></i>General Enquiries
                                                </a>
                                            </div>

                                            <!-- Charter Desk -->
                                            <div class="mb-2">
                                                <a href="https://wa.me/{{ config('contact.whatsapp.charter.number') }}?text={{ urlencode(config('contact.whatsapp.charter.message')) }}"
                                                    target="_blank" rel="noopener noreferrer"
                                                    class="btn btn-success btn-sm">
                                                    <i class="fab fa-whatsapp me-1"></i>Charter Desk
                                                </a>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Contact Form Section -->
                <div class="col-lg-6">
                    <div class="col-12">
                        <h5 class="md-4">Looking to get in touch?</h5>
                    </div>
                    <div class="overflow-hidden">
                        <p class="text-gray">
                            Whether you need assistance with flight coordination, fuel arrangements, or private charter
                            services, our experts are just a message away. Submit the contact form and a member of our team
                            will respond promptly.
                        </p>
                    </div>
                    @if (session('success'))
                        <script>
                            document.addEventListener("DOMContentLoaded", function() {
                                Swal.fire({
                                    icon: "success",
                                    title: "Success!",
                                    text: "{{ session('success') }}",
                                    timer: 3000,
                                    showConfirmButton: false
                                });
                            });
                        </script>
                    @endif

                    @if ($errors->any())
                        <script>
                            document.addEventListener("DOMContentLoaded", function() {
                                let errors = {!! json_encode($errors->all()) !!};
                                let errorList = errors.map(e => `<li>${e}</li>`).join("");

                                Swal.fire({
                                    icon: "error",
                                    title: "Oops...",
                                    html: "<ul class='text-start'>" + errorList + "</ul>",
                                    confirmButtonText: "Try again"
                                });
                            });
                        </script>
                    @endif
                    <form action="{{ route('contact.send') }}" method="POST" class="zform text-left" id="contactForm">
                        @csrf
                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group mb-3">
                                    <input class="fs-0 form-control @error('name') is-invalid @enderror" type="text"
                                        name="name" value="{{ old('name') }}" placeholder="Your Name" />
                                    @error('name')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group mb-3">
                                    <input class="fs-0 form-control @error('email') is-invalid @enderror" type="email"
                                        name="email" value="{{ old('email') }}" placeholder="Email Address" />
                                    @error('email')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group mb-3">
                                    <input class="fs-0 form-control @error('phone') is-invalid @enderror" type="tel"
                                        name="phone" value="{{ old('phone') }}"
                                        placeholder="Phone Number (Optional)" />
                                    @error('phone')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group mb-3">
                                    <select class="fs-0 form-select @error('subject') is-invalid @enderror"
                                        name="subject">
                                        <option value="">Select Subject</option>
                                        <option value="general" {{ old('subject') == 'general' ? 'selected' : '' }}>
                                            General Inquiry</option>
                                        <option value="charter" {{ old('subject') == 'charter' ? 'selected' : '' }}>
                                            Charter Services</option>
                                        <option value="maintenance"
                                            {{ old('subject') == 'maintenance' ? 'selected' : '' }}>Aircraft Maintenance
                                        </option>
                                        <option value="support" {{ old('subject') == 'support' ? 'selected' : '' }}>
                                            Technical Support</option>
                                        <option value="other" {{ old('subject') == 'other' ? 'selected' : '' }}>Other
                                        </option>
                                    </select>
                                    @error('subject')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                        </div>
                        <div class="form-group mb-3">
                            <textarea class="fs-0 form-control contact-message @error('message') is-invalid @enderror" rows="6"
                                name="message" placeholder="Type your message here">{{ old('message') }}</textarea>
                            @error('message')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                        <div class="zform-feedback d-grid g-recaptcha">
                            <button class="btn btn-dark hvr-sweep-top" type="submit">
                                <i class="fas fa-paper-plane me-2"></i>SEND MESSAGE
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </section>
    <!-- <section> close ============================-->
    <!-- ============================================-->

    <!-- <section> begin ============================-->
    <section class="pt-3 pt-lg-5 pb-3 pb-lg-5 text-center" style="scroll-margin-top:-25px">
        <div class="container">
            <div class="row">
                <!-- Map Section -->
                <div class="map-container mt-4">
                    <iframe src="https://my.atlist.com/map/fc05f8b2-6d6a-4164-a693-3544a0d65586/?share=true"
                        allow="geolocation 'self' https://my.atlist.com" width="100%" height="400px" loading="lazy"
                        frameborder="0" scrolling="no" allowfullscreen id="atlist-embed" class="rounded shadow-sm">
                    </iframe>
                </div>
            </div>
        </div><!-- end of .container-->
    </section><!-- <section> close ============================-->

    @push('styles')
        <style>
            .contact-info-item {
                padding: 1rem;
                transition: all 0.3s ease;
            }

            .contact-info-item:hover {
                transform: translateY(-2px);
            }

            .map-container {
                overflow: hidden;
                border-radius: 0.375rem;
            }

            .form-control:focus,
            .form-select:focus {
                border-color: #6c757d;
                box-shadow: 0 0 0 0.2rem rgba(108, 117, 125, 0.25);
            }

            .alert {
                border: none;
                border-radius: 0.375rem;
            }

            .alert-success {
                background-color: rgba(25, 135, 84, 0.1);
                color: #198754;
            }

            .alert-danger {
                background-color: rgba(220, 53, 69, 0.1);
                color: #dc3545;
            }

            /* WhatsApp specific styles */
            .btn-success {
                background-color: #25d366;
                border-color: #25d366;
            }

            .btn-success:hover {
                background-color: #128c7e;
                border-color: #128c7e;
            }

            @media (max-width: 768px) {
                .contact-info-item {
                    padding: 0.5rem;
                    margin-bottom: 1rem;
                }

                .map-container iframe {
                    height: 300px;
                }

                .g-recaptcha {
                    transform: scale(0.85);
                    transform-origin: 0 0;
                }

                /* Mobile WhatsApp adjustments */
                .contact-info-item .btn-success {
                    font-size: 0.8rem;
                    padding: 0.25rem 0.5rem;
                }
            }

            @media (max-width: 576px) {
                .g-recaptcha {
                    transform: scale(0.75);
                }

                /* Stack WhatsApp buttons on very small screens */
                .contact-info-item .mb-2 {
                    margin-bottom: 1rem !important;
                }
            }
        </style>
    @endpush

    <script src="https://www.google.com/recaptcha/api.js?render={{ env('RECAPTCHA_SITE_KEY') }}"></script>
    <script>
        document.addEventListener('submit', function(event) {
            event.preventDefault();
            grecaptcha.ready(function() {
                grecaptcha.execute('{{ env('RECAPTCHA_SITE_KEY') }}', {
                        action: 'submit'
                    })
                    .then(function(token) {
                        let form = event.target;
                        let input = document.createElement('input');
                        input.type = 'hidden';
                        input.name = 'g-recaptcha-response';
                        input.value = token;
                        form.appendChild(input);
                        form.submit();
                    });
            });
        });
    </script>
@endsection