@extends('web.layouts.main')
@section('content')

    <section class="inner-header text-center" style="background-image:url({{url('')}}/uploads/images/pages/624306eae0f72.jpg)">
        <div class="container">
            <h2>{{__('main.contact_us')}}</h2>
            <h6><a href="{{LaravelLocalization::getLocalizedURL(getCurrentLocale(), url('/'), [], true)}}">{{__('main.home')}} </a> <i class="fas fa-chevron-right"></i> {{__('main.contact_us')}}</h6>
        </div>
    </section>
<main>
    <!-- -------------- about-pg --------------- -->
    <section class="contact-pg section-padding">
            <div class="container">
                <div class="contact-info mb-5">
                    <!-- <div class="section-head text-center">
                        <h2>Contact Us </h2>
                        <p>SUBSCRIBE AND FOLLOW US </p>
                    </div> -->
                    <div class="row">
                        <div class="col-lg-6">
                            <div class="items">
                                <div class="icons">
                                    <i class="far fa-envelope"></i>
                                </div>
                                <div class="info">
                                    <h5 class="text-uppercase">{{__('main.email_address')}}</h5>
                                    <p>{{settings('site_email')}}</p>
                                </div>
                            </div>
                            <div class="items">
                                <div class="icons">
                                    <i class="fas fa-headset"></i>
                                </div>
                                <div class="info">
                                    <h5 class="text-uppercase">{{__('main.live_support')}}</h5>
                                    <p>{{settings('site_phone')}}</p>
                                </div>
                            </div>
                            <div class="items">
                                <div class="icons">
                                    <i class="far fa-map"></i>
                                </div>
                                <div class="info">
                                    <h5 class="text-uppercase">{{__('main.our_location')}}</h5>
                                    <p>{{settings('site_address')}}</p>
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-6">
                            <div class="main_img">
                                <img src="{{url('')}}/assets/web/images/chs.jpg" alt="">
                            </div>
                        </div>
                    </div>
                </div>
                <!-- <div class="contact-map">
                    <div class="row">
                        <div class="col-lg-6">
                            <div class="info">
                                <h5>Our Office</h5>
                                <p><strong>Adress : </strong>Jeddah, KSA</p>
                                <p><strong>Phone : </strong> +966-4085214</p>
                                <p><strong>Email : </strong> Nesma@Gmail.Com</p>
                            </div>
                        </div>
                        <div class="col-lg-6">
                            <div class="map">
                                <iframe
                                    src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d950645.7063804097!2d38.650631850006825!3d21.45046841509912!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x15c3d01fb1137e59%3A0xe059579737b118db!2sJeddah%20Saudi%20Arabia!5e0!3m2!1sen!2seg!4v1609066507082!5m2!1sen!2seg"
                                    width="100%" height="350" frameborder="0" style="border:0;" allowfullscreen=""
                                    aria-hidden="false" tabindex="0"></iframe>
                            </div>
                        </div>
                    </div>
                </div> -->
                    <form action="{{route('contactUs.store')}}" method="post" class="contact-form p-5 bg-gray contact_us_form">
                            @csrf()
                    <div class="row justify-content-center">
                        <div class="col-lg-10">
                            <div class="content">
                                <h6 class="mb-4">{{__('main.contact_us_title')}}</h6>
                                <div class="row">
                                    <div class="col-lg-6">
                                        <div class="form-group">
                                            <input type="text" class="form-control" name="name" placeholder="{{__('users.name')}}">
                                        </div>
                                    </div>
                                    <div class="col-lg-6">
                                        <div class="form-group">
                                            <input type="text" name="email" class="form-control" placeholder="{{__('users.email')}}">
                                        </div>
                                    </div>
                                    <div class="col-lg-12">
                                        <div class="form-group">
                                            <input type="text" name="subject" class="form-control" placeholder="{{__('users.subject')}}">
                                        </div>
                                    </div>
                                    <div class="col-lg-12">
                                        <div class="form-group">
                                            <textarea rows="6" name="message" class="form-control" placeholder="{{__('users.your_message')}}"></textarea>
                                        </div>
                                        <div class="form-group">
                                            <button class="butn color contact_us_button text-uppercase"><span>{{__('main.send_message')}}</span></button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
        </section>
    </main>

@push('js')
    <script>
        $('.navbar').addClass('inner-nav');
    </script>
@endpush
@stop