@extends('web.layouts.container')

@section('inner_header')
    <section class="inner-header text-center" style="background-image: url(http://cms.nesmasecurity.com/assets/web/images/Contact_us_ban.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>
@endsection

@section('content')

    <!-- -------------- about-pg --------------- -->
    <section class="contact-pg section-padding">
        <div class="container">
            <div class="contact-info mb-5">
                <div class="row">
                    <div class="col-lg-4">
                        <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>
                    <div class="col-lg-4">
                        <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>
                    <div class="col-lg-4">
                        <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>
            </div>
            <div class="contact-map">
                <div class="row">
                    <div class="col-lg-7">
                        <!--<div class="info">-->
                    <!--    <h5>{{__('main.our_office')}}</h5>-->
                    <!--    <p><strong class="text-capitalize">{{__('main.address')}} : </strong>{{settings('site_address')}}</p>-->
                    <!--    <p><strong class="text-capitalize">{{__('main.phone')}} : </strong> {{settings('site_phone')}}</p>-->
                    <!--    <p><strong class="text-capitalize">{{__('main.email')}} : </strong>{{settings('site_email')}}</p>-->
                        <!--</div>-->
                        <form action="{{route('contactUs.store')}}" method="post" class="contact-form p-5 contact_us_form">
                            @csrf()
                            <div class="row justify-content-center">
                                <div class="col-lg-12">
                                    <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 name="name" class="form-control" placeholder="{{__('users.name')}}">
                                                </div>
                                            </div>
                                            <div class="col-lg-6">
                                                <div class="form-group">
                                                    <input name="email" class="form-control" placeholder="{{__('users.email')}}">
                                                </div>
                                            </div>
                                            <div class="col-lg-12">
                                                <div class="form-group">
                                                    <input 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"><span class="text-uppercase">{{__('main.send_message')}}</span></button>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                            </div>
                        </form>
                    </div>
                    <div class="col-lg-5">
                        <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="555" frameborder="0" style="border:0;" allowfullscreen="" aria-hidden="false" tabindex="0"></iframe>--}}

                            <iframe src="https://www.google.com/maps/embed?pb=!1m13!1m8!1m3!1d223.53389501253355!2d50.2147982!3d26.3089332!3m2!1i1024!2i768!4f13.1!3m2!1m1!2s!5e0!3m2!1sar!2seg!4v1640273981991!5m2!1sar!2seg"
                                    width="100%" height="555" frameborder="0" style="border:0;" allowfullscreen="" aria-hidden="false" tabindex="0"></iframe>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
@endsection

@section('inner_js')
    <script>
        $('.navbar').addClass('inner-nav');
    </script>
@endsection