@extends('front-end.inc.layout')

@section('css')

@endsection
@section('content')

<section id="page-title" class="page-title bg-overlay bg-parallax bg-overlay-gradient">
    <div class="bg-section">
        <img src="{{asset('images/background/mybg.jpeg')}}" alt="Background" />
    </div>
    <div class="container">
        <div class="row">
            <div class="col-xs-12 col-sm-12 col-md-12">
                <div class="title title-4 text-center">
                    <div class="title--content">
                        <div class="title--heading">
                            <h1>{{__('main.Contact Us')}}</h1>
                        </div>
                    </div>
                    <div class="divider--shape-1down divider--shape-gray"></div>
                </div>
                <!-- .title end -->
            </div>
            <!-- .col-md-12 end -->
        </div>
        <!-- .row end -->
    </div>
    <!-- .container end -->
</section>
<!-- #page-title end -->

        <!-- Page Header End -->
        <div class="container">
            <section class="ftco-section">
                <div class="container">
                    <div class="row no-gutters ftco-services">
              <div class="col-md-4 text-center d-flex align-self-stretch ftco-animate">
                <div class="media block-6 services mb-md-0 mb-4">
                  <div class="icon bg-color-1 active d-flex justify-content-center align-items-center mb-2">
                        <span class="flaticon-shipped"></span>
                  </div>
                  <div class="media-body">
                    <h3 class="heading">{{__('main.Address')}}</h3>
                    <span>@if (session()->get('locale')=='ar')
                        {{setting('.address_ar')}}
                        @elseif(session()->get('locale')=='krd')
                        {{setting('.address_krd')}}
                    @else
                        {{setting('.address')}}
                    @endif</span>
                  </div>
                </div>
              </div>
              <div class="col-md-4 text-center d-flex align-self-stretch ftco-animate">
                <div class="media block-6 services mb-md-0 mb-4">
                  <div class="icon bg-color-3 d-flex justify-content-center align-items-center mb-2">
                        <span class="flaticon-award"></span>
                  </div>
                  <div class="media-body">
                    <h3 class="heading">{{__('main.Email')}}</h3>
                    <span><a href="mailto:{{setting('.email')}}">{{setting('.email')}}</a></span>
                  </div>
                </div>
              </div>
              <div class="col-md-4 text-center d-flex align-self-stretch ftco-animate">
                <div class="media block-6 services mb-md-0 mb-4">
                  <div class="icon bg-color-4 d-flex justify-content-center align-items-center mb-2">
                        <span class="flaticon-customer-service"></span>
                  </div>
                  <div class="media-body">
                    <h3 class="heading">{{__('main.Sales Phone')}}</h3>
                    <span>{{setting('.phone')}}</span>
                  </div>
                </div>
              </div>
            </div>
                </div>
            </section>

              <section class="ftco-section contact-section">
                <div class="container">
                  <div class="row block-9">
                    <div class="col-md-6 order-md-last d-flex">
                      <form method="POST" action="{{ route('contactMessage') }}" class="bg-white p-5 contact-form">
                        {{ csrf_field() }}
                        <div class="form-group">
                          <input type="text" class="form-control" name="name" value="{{ old('name') }}" placeholder="{{__('main.Your Name*')}}">
                        </div>
                        <div class="form-group">
                          <input type="text" class="form-control" name="email" value="{{ old('email') }}" placeholder="{{__('main.Your Email*')}}">
                        </div>
                        <div class="form-group">
                            <input type="text" class="form-control" name="phone" {{ old('phone') }} placeholder="{{__('main.Your Phone No')}}">
                        </div>
                        <div class="form-group">
                          <input type="text" class="form-control" placeholder="Subject">
                        </div>
                        <div class="form-group">
                          <textarea name="" id="" cols="30" rows="7" class="form-control" placeholder="{{__('main.Your Message')}}" id="message" name="message">{{ old('message') }}</textarea>
                        </div>
                        <div class="form-group">
                            @if ($errors->has('g-recaptcha-response'))
                            <span class="text-danger">{{ $errors->first('g-recaptcha-response') }}</span>
                            @endif
                        </div>
                        <div class="form-group">
                          <input type="submit" value="{{__('main.Send')}}" class="btn btn-primary py-3 px-5">
                        </div>
                      </form>

                    </div>

                    <div class="col-md-6 d-flex">
                            <iframe class="position-relative rounded w-100"
                            src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d843.8827509285189!2d45.434763584230865!3d35.55339911684702!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x40002da4723fe34b%3A0xd19574f7f3a2321a!2zdGFsYXJ5IGJhenJnYW55IHNod3NoYSAtINiq25XZhNin2LHbjCDYqNin2LLYsdqv2KfZhtuMINi02YjYtNuV!5e0!3m2!1sen!2siq!4v1718288612551!5m2!1sen!2siq"
                            frameborder="0" style="min-height: 250px; border:0;width:100%;" allowfullscreen="" aria-hidden="false"
                            tabindex="0"></iframe>
                    </div>
                  </div>
                </div>
              </section>

        </div>

@endsection

@section('js')
<script src="https://www.google.com/recaptcha/api.js?render={{ env('GOOGLE_RECAPTCHA_KEY') }}"></script>
<script type="text/javascript">
    $('#contactUSForm').submit(function(event) {
        event.preventDefault();

        grecaptcha.ready(function() {
            grecaptcha.execute("{{ env('GOOGLE_RECAPTCHA_KEY') }}", {action: 'subscribe_newsletter'}).then(function(token) {
                $('#contactUSForm').prepend('<input type="hidden" name="g-recaptcha-response" value="' + token + '">');
                $('#contactUSForm').unbind('submit').submit();
            });;
        });
    });
</script>

@endsection