@extends('home.layout.app')

@section('title', 'Contact Us')

@section('content')

    <!-- Add meta tag for AJAX URL -->
    <meta name="contact-submit-url" content="{{ route('contact-us.submit') }}">

    <section class="our-service contact-sec">
        <div class="container">
            <div class="ark__about__heading">
                <h3><span class="ark__brick--red">Get in Touch
                    </span> With Us</h3>
                <p>Transparent Pricing. Reliable Logistics. Tailored Solutions For Your Business.</p>
            </div>

            <div class="ark-contact-form-section">
                <!-- Image Side -->
                <div class="ark-contact-form-img">
                    <img src="{{ asset('assets/images/aboutus01.jpg') }}" alt="Container Ship">
                </div>

                <!-- Form Side -->
                <form class="ark-contact-form" id="contactForm">
                @csrf
                    <div class="contact-title">
                        <h3>Get B612</h3>
                        <div class="subtitle">Fulfillment Pricing</div>
                    </div>
                    <div class="contact-form-wp">
                        <!-- Company Name -->
                        <div class="form-group">
                            <label for="companyname">Company name</label>
                            <input type="text" id="companyname" name="companyname"
                                placeholder="Enter your company name" />
                            <span tooltip="Please enter your company name" class="error-message">
                                <img src="{{ asset('assets/images/input-error.svg') }}" alt="">
                            </span>
                        </div>

                        <!-- First Name and Last Name -->
                        <div class="form-gp-wp">
                            <div class="form-group">
                                <label for="firstname">First Name <span class="required">*</span></label>
                                <input type="text" id="firstname" name="firstname"
                                    placeholder="Enter your First Name" maxlength="255" />
                                <span tooltip="Please enter your first name" class="error-message">
                                    <img src="{{ asset('assets/images/input-error.svg') }}" alt="">
                                </span>
                            </div>

                            <div class="form-group">
                                <label for="lastname">Last Name</label>
                                <input type="text" id="lastname" name="lastname" 
                                    placeholder="Enter your Last Name" maxlength="255" />
                                <span tooltip="Please enter your last name" class="error-message">
                                    <img src="{{ asset('assets/images/input-error.svg') }}" alt="">
                                </span>
                            </div>
                        </div>

                        <!-- Email -->
                        <div class="form-group">
                            <label for="email">Email <span class="required">*</span></label>
                            <input type="email" id="email" name="email" placeholder="you@example.com" />
                            <span tooltip="Please enter a valid email address" class="error-message">
                                <img src="{{ asset('assets/images/input-error.svg') }}" alt="">
                            </span>
                        </div>

                        <!-- Contact Phone -->
                        <div class="form-group">
                            <label for="contact_number">Contact Phone</label>
                            <div class="phone-container">
                                <input type="tel" id="contact_number" name="contact_number" class="form-control" placeholder="Enter phone number" maxlength="10" pattern="[0-9]{10}" inputmode="numeric" oninput="this.value = this.value.replace(/[^0-9]/g, '').slice(0, 10);"/>
                            </div>
                        </div>

                        <!-- Shipment Date -->
                        <div class="form-group">
                            <label>Shipment Date</label>
                            <div class="date-picker-wrapper">
                                <div class="date-input-container">
                                    <div class="calendar-icon">
                                        <img src="{{ asset('assets/images/Calendar.svg') }}" alt="cal-icon">
                                    </div>
                                    <input class="ark_datepicker" type="text" placeholder="MM/DD/YYYY"
                                        id="preferred_date" name="preferred_date">
                                </div>
                            </div>
                        </div>

                        <!-- Message -->
                        <div class="form-group">
                            <label>Write a message</label>
                            <textarea class="form-control" name="user_notes" rows="3"
                                placeholder="Write your shipment details here..."></textarea>
                            <span tooltip="Please enter your message" class="error-message">
                                <img src="{{ asset('assets/images/input-error.svg') }}" alt="">
                            </span>
                        </div>

                        <button class="submit-btn" type="submit" id="submitBtn">
                            <span class="btn-text">Submit</span>
                            <span class="spinner-border spinner-border-sm d-none" role="status"></span>
                        </button>
                    </div>
                </form>
            </div>
    </section>

    <section class="info-sec">
        <div class="container">
            <div class="info-card-wp">
                <!-- Visit Us Card -->
                <div class="card">
                    <div class="icon-box">
                        <svg width="28" height="28" viewBox="0 0 28 28" fill="none"
                            xmlns="http://www.w3.org/2000/svg">
                            <path d="M10.4138 17.5862L15.3448 27L27 1L1 13.5517L10.4138 17.5862Z" stroke="black"
                                stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
                        </svg>
                    </div>
                    <h2 class="card-title">Visit Us</h2>

                    @if($settings?->main_address)
                        <div class="contact-section">
                            <div class="section-header">
                                <span class="bullet">✦</span>
                                <span class="section-title">Main Office</span>
                            </div>
                            <div class="section-content">
                                {!! nl2br(e($settings->main_address)) !!}
                            </div>
                        </div>
                    @endif

                    @if($settings?->alternate_address)
                        <div class="contact-section">
                            <div class="section-header">
                                <span class="bullet">✦</span>
                                <span class="section-title">Alternate Office</span>
                            </div>
                            <div class="section-content">
                                {!! nl2br(e($settings->alternate_address)) !!}
                            </div>
                        </div>
                    @endif
                </div>

                <!-- Call Us Card -->
                <div class="card">
                    <div class="icon-box">
                        <svg width="28" height="28" viewBox="0 0 28 28" fill="none"
                            xmlns="http://www.w3.org/2000/svg">
                            <path
                                d="M8.17858 0.75H3.11363C1.80824 0.75 0.75 1.80824 0.75 3.11363C0.75 16.1676 11.3324 26.75 24.3863 26.75C25.6917 26.75 26.75 25.6917 26.75 24.3863V19.3214L21.1786 15.6071L18.2896 18.496C17.7879 18.9979 17.038 19.1539 16.4076 18.8282C15.3383 18.2758 13.6031 17.2379 11.8929 15.6071C10.1417 13.9374 9.11569 12.1382 8.60073 11.0496C8.31213 10.4394 8.47921 9.73508 8.95648 9.25781L11.8929 6.32142L8.17858 0.75Z"
                                stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
                        </svg>
                    </div>
                    <h2 class="card-title">Call Us</h2>

                    @if($settings?->main_phone)
                        <div class="contact-section">
                            <div class="section-header">
                                <span class="bullet">✦</span>
                                <span class="section-title">Main Phone</span>
                            </div>
                            <div class="section-content">
                                <a href="tel:{{ preg_replace('/[^0-9+]/', '', $settings->main_phone) }}">
                                    {{ $settings->main_phone }}
                                </a>
                            </div>
                        </div>
                    @endif

                    @if($settings?->alternate_phone)
                        <div class="contact-section">
                            <div class="section-header">
                                <span class="bullet">✦</span>
                                <span class="section-title">Alternate Phone</span>
                            </div>
                            <div class="section-content">
                                <a href="tel:{{ preg_replace('/[^0-9+]/', '', $settings->alternate_phone) }}">
                                    {{ $settings->alternate_phone }}
                                </a>
                            </div>
                        </div>
                    @endif
                </div>

                <!-- Email Us Card -->
                <div class="card">
                    <div class="icon-box">
                        <svg width="35" height="28" viewBox="0 0 35 28" fill="none"
                            xmlns="http://www.w3.org/2000/svg">
                            <path
                                d="M2.45822 2.30999L17.2513 14.27L32.0444 2.30999M0.75 4.91C0.75 2.61249 2.78788 0.75 5.30172 0.75H29.1983C31.7122 0.75 33.75 2.61249 33.75 4.91V22.59C33.75 24.8876 31.7122 26.75 29.1983 26.75H5.30172C2.78788 26.75 0.75 24.8876 0.75 22.59V4.91Z"
                                stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
                        </svg>
                    </div>
                    <h2 class="card-title">Email Us</h2>

                    @if($settings?->general_email)
                        <div class="contact-section">
                            <div class="section-header">
                                <span class="bullet">✦</span>
                                <span class="section-title">General Inquiries</span>
                            </div>
                            <div class="section-content">
                                <a href="mailto:{{ $settings->general_email }}">
                                    {{ $settings->general_email }}
                                </a>
                            </div>
                        </div>
                    @endif

                    @if($settings?->support_email)
                        <div class="contact-section">
                            <div class="section-header">
                                <span class="bullet">✦</span>
                                <span class="section-title">Support</span>
                            </div>
                            <div class="section-content">
                                <a href="mailto:{{ $settings->support_email }}">
                                    {{ $settings->support_email }}
                                </a>
                            </div>
                        </div>
                    @endif
                </div>
            </div>
        </div>
    </section>

    <!-- Google Maps Section -->
    <section class="busines-grow-sec">
        <div class="container">
            <div class="ark__about__heading">
                <h3><span class="ark__brick--red">Let's Grow
                    </span> Your Business Together</h3>
                <p>Leverage our logistics expertise to cut costs, save time,
                    and scale faster.</p>
            </div>
            <div class="grow-location">
                @if($settings?->location_iframe)
                    {!! $settings->location_iframe !!}
                @else
                    <iframe
                        src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d423284.04434422666!2d-118.7413722090306!3d34.020608420216234!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x80c2c75ddc27da13%3A0xe22fdf6f254608f4!2sLos%20Angeles%2C%20CA%2C%20USA!5e0!3m2!1sen!2sin!4v1765958074051!5m2!1sen!2sin"
                        width="100%" height="450" style="border:0;" allowfullscreen="" loading="lazy"
                        referrerpolicy="no-referrer-when-downgrade"></iframe>
                @endif
            </div>
        </div>
    </section>

    <!-- Success Popup Modal -->
    <div class="ark__popup-overlay" id="successPopup">
        <div class="ark__popup">
            <div class="ark__popup-close" id="closeContactPopup">
                <img src="{{ asset('assets/images/close-gray.svg') }}" alt="close">
            </div>
            <div class="ark__popup-content">
                <div class="ark__popup-icon-wrapper">
                    <div class="ark__popup-icon">
                        <img src="{{ asset('assets/images/QuoteRequest.svg') }}" alt="Success" />
                    </div>
                </div>
                <h2>Contact Request Submitted Successfully!</h2>
                <p>
                    Thank you for contacting us!<br>
                    Your message has been received. Our team will get back to you as soon as possible.
                </p>
                <small class="text-muted">This message will close in <span id="contactCountdown">5</span> seconds...</small>
            </div>
        </div>
    </div>

@endsection