@extends('front.layout.main')
@section('title',$header['title'])
@section('meta_description',$header['meta_description'])
@section('meta_title',$header['meta_title'])
@section('content')

<div class="breadcumb-wrapper"
    data-bg-src="{{ URL::asset('front-assets/images/bg/breadcumb-bg.jpg') }}">
    <div class="container">
        <div class="breadcumb-content">
            <h1 class="breadcumb-title">Contact Us</h1>
            <ul class="breadcumb-menu"></ul>
        </div>
    </div>
</div>
<div class="space">
    <div class="container">
        <div class="row gy-40">
            <div class="col-xl-5">
                <div class="contact-info-wrap">
                    <div class="shape-img"><img
                            src="{{ URL::asset('front-assets/images/shape/contact_shape.png') }}"
                            alt="shape"></div>
                    <h3 class="border-title2">Contact Info</h3>
                    <div class="contact-info-box">
                        
                        <div class="contact-info">
                            <h4 class="contact-info__title">Mail Address:</h4>
                            <div class="contact-info__icon bg-theme"><i class="fa-solid fa-envelope"></i></div>
                            <div class="media-body"><span class="contact-info__text"><a
                                        href="mailto:info@cheapesthotelnearme.us">info@cheapesthotelnearme.us</a></span></div>
                        </div>
                        <div class="contact-info">
                            <h4 class="contact-info__title">Office Address:</h4>
                            <div class="contact-info__icon bg-title"><i class="fas fa-location-dot"></i></div>
                            <div class="media-body"><span class="contact-info__text">Phoenix, AZ 85013,<br>United States</span></div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-xl-7">
                <div class="contact-map"><iframe
                        src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d4705.4436006627875!2d-112.0975576965174!3d33.49484414775727!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x872b12c3250e3665%3A0x2eaf2e0834abed66!2sPhoenix%2C%20AZ%2085013%2C%20USA!5e0!3m2!1sen!2sin!4v1683636623401!5m2!1sen!2sin"
                        width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy"
                        referrerpolicy="no-referrer-when-downgrade"></iframe></div>
            </div>
        </div>
    </div>
</div>
<div class="space-bottom" data-bg-src="{{ URL::asset('front-assets/images/bg/contact_bg_1.html') }}">
    <div class="container">
        <form method="POST" class="contact-form ajax-contact" action="{{ route('front.contact-us.sendMail') }}">
            @csrf
            <h3 class="form-title">Make An Appointment</h3>
            <div class="row">
                <div class="form-group col-md-6"><input type="text" class="form-control style3" name="name" id="name"
                        placeholder="Your Name"> <i class="fa-solid fa-user"></i></div>
                <div class="form-group col-md-6"><input type="email" class="form-control style3" name="email" id="email"
                        placeholder="Email Address"> <i class="fa-solid fa-envelope"></i></div>
                <div class="form-group col-md-6"><input type="tel" class="form-control style3" name="number" id="number"
                        placeholder="Phone Number"> <i class="fa-solid fa-phone"></i></div>
                <div class="form-group col-md-6"><input type="text" class="form-control style3" name="subject"
                        id="subject" placeholder="Queary Topic"> <i class="fa-solid fa-file-invoice"></i></div>
                <div class="form-group col-12"><textarea name="message" id="message" cols="30" rows="3"
                        class="form-control style3" placeholder="Your Message"></textarea> <i class="fa-solid fa-pencil"></i>
                </div>
                <div class="form-btn col-12"><button class="ot-btn">Send Message Now</button></div>
            </div>
            <p class="form-messages mb-0 mt-3"></p>
        </form>
    </div>
</div>
@endsection