@extends('layouts.app2')

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

@section('content')
    <!--Start Page Header-->
        <section class="page-header">
            <div class="page-header__bg" style="background-image: url(assets/img/backgrounds/page-header-bg.jpg)">
            </div>
            <div class="page-header__pattern"><img src="assets/img/pattern/page-header-pattern.png" alt=""></div>
            <div class="container">
                <div class="page-header__inner">
                    <h2>Contact Us</h2>
                    <ul class="thm-breadcrumb">
                        <li><a href="/">Home</a></li>
                        <li><span class="icon-right-arrow21"></span></li>
                        <li>Contact Us</li>
                    </ul>
                </div>
            </div>
        </section>
        <!--End Page Header-->
<!--Start Contact Page-->
        <section class="contact-page">
            <!--Start Contact Page Top-->
            <div class="contact-page__top">
                <div class="contact-page__top-pattern"
                    style="background-image: url(assets/images/pattern/contact-page-top-pattern.png);"></div>
                <div class="container">
                    <div class="row">
                        <!--Start Contact Page Top Content-->
                        <div class="col-xl-6">
                            <div class="contact-page__top-content">
                                <div class="sec-title tg-heading-subheading animation-style2">
                                    <div class="sec-title__tagline">
                                        <div class="line"></div>
                                        <div class="text tg-element-title">
                                            <h4>Contact us</h4>
                                        </div>
                                        <div class="icon">
                                            <span class="icon-plane2 float-bob-x3"></span>
                                        </div>
                                    </div>
                                    <h2 class="sec-title__title tg-element-title">Get in Touch With Us
                                    </h2>
                                </div>

                                <div class="contact-page__top-content-text1">
                                    <p>Whether you need real-time updates, assistance with tracking numbers, or help navigating customs and delivery schedules, our knowledgeable representatives are ready to provide prompt and personalized support. We strive to make your shipping experience smooth and worry-free by being just a call or message away.</p>
                                </div>

                                
                            </div>
                        </div>
                        <!--End Contact Page Top Content-->

                        <!--Start Contact Page Top Form-->
                        <div class="col-xl-6">
                            <div class="contact-page__top-form">
                                <form action="{{ url('contact') }}" method="POST" class="why-choose-one__form">
                                     @csrf
                                    <div class="row">
                                        <div class="col-xl-6 col-lg-6 col-md-6">
                                            <div class="input-box">
                                                <input type="text" name="name" placeholder=" Your Name" required="">
                                                <div class="icon"><span class="icon-user"></span></div>
                                            </div>
                                        </div>
                                        <div class="col-xl-6 col-lg-6 col-md-6">
                                            <div class="input-box">
                                                <input type="email" name="email" placeholder="Email" required="">
                                                <div class="icon"><span class="icon-email"></span></div>
                                            </div>
                                        </div>
                                        <div class="col-xl-6 col-lg-6 col-md-6">
                                            <div class="input-box">
                                                <input type="text" name="Phone" placeholder="Phone" required="">
                                                <div class="icon"><span class="icon-phone2"></span></div>
                                            </div>
                                        </div>
                                        <div class="col-xl-6 col-lg-6 col-md-6">
                                            <div class="input-box">
                                                <input type="text" name="subject" placeholder="Subject" required="">
                                                <div class="icon"><span class="icon-pen"></span></div>
                                            </div>
                                        </div>


                                        <div class="col-xl-12">
                                            <div class="input-box">
                                                <textarea name="message" placeholder="Message"></textarea>
                                                <div class="icon style2"><span class="icon-pen"></span></div>
                                            </div>
                                        </div>

                                        <div class="col-xl-12">
                                            <div class="why-choose-one__form-btn">
                                                <button type="submit" class="thm-btn">Submit</button>
                                            </div>
                                        </div>
                                    </div>
                                </form>
                                <div class="result"></div>
                            </div>
                        </div>
                        <!--End Contact Page Top Form-->
                    </div>
                </div>
            </div>
            <!--End Contact Page Top-->

            <!--Start Contact Page Bottom-->
            <div class="contact-page__bottom">
                <div class="container">
                    <div class="contact-page__bottom-inner">
                        <ul class="list-unstyled">
                            <li class="contact-page__bottom-single">
                                <div class="icon">
                                    <span class="icon-address"></span>
                                </div>
                                <div class="content">
                                    <h2>Locations</h2>
                                    <p>{{$globalAddress}}</p>
                                </div>
                            </li>

                            <li class="contact-page__bottom-single">
                                <div class="icon">
                                    <span class="icon-clock2"></span>
                                </div>
                                <div class="content">
                                    <h2>Working Hours</h2>
                                    <p>Monday - Sunday <br> 7:00 AM - 5:00 PM</p>
                                </div>
                            </li>

                            <li class="contact-page__bottom-single">
                                <div class="icon">
                                    <span class="icon-email"></span>
                                </div>
                                <div class="content">
                                    <h2>Contact E-mail</h2>
                                    <p>
                                        <a href="mailto:{{$globalEmail}}">{{$globalEmail}}</a>
                                        
                                    </p>
                                </div>
                            </li>

                            <li class="contact-page__bottom-single">
                                <div class="icon">
                                    <span class="icon-phone"></span>
                                </div>
                                <div class="content">
                                    <h2>Contact Phone Number</h2>
                                    <p>
                                        <a href="tel:{{$globalPhoneNumber}}">{{$globalPhoneNumber}}</a>
                                    </p>
                                </div>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
            <!--End Contact Page Bottom-->
        </section>
        <!--End Contact Page-->

        <!--Start Google Map One-->
        <section class="google-map-one">
            <iframe
                src="https://www.google.com/maps/embed?pb=!1m14!1m12!1m3!1d6209.242755903148!2d-77.04363602434464!3d38.90977276948481!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!5e0!3m2!1sen!2sus!4v1394992895496"
                class="google-map-one__map">
            </iframe>
        </section>
        <!--End Google Map One-->
 
@endsection