@extends('front.layouts.app')

{{--@push('script-page-level')

 <style>

 .error{

 color:red;

 }

 </style>

 <script>

 function initAutocomplete() {



 var map = new google.maps.Map(document.getElementById('map'), {

 center: {

 lat: {{ config('settings.latitude') }},

 lng: {{ config('settings.longitude') }}

 },

 zoom: 13,

 mapTypeId: 'roadmap'

 });



 var marker = new google.maps.Marker({

 position: {

 lat: {{ config('settings.latitude') }},

 lng: {{ config('settings.longitude') }}

 },

 icon:`{{url("assets/front/images/contact-map.png")}}`,

 map: map,

 draggable: false

 });



 }

 </script>

 <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBNcTmnS323hh7tSQzFdwlnB4EozA3lwcA&libraries=places&callback=initAutocomplete"></script>

@endpush

@section('content')

 @include('front.common.breadcrumb')

 <section class="contact-us-section">

 <div class="contcat-us-slider">

 <div class="bread-mt">

 <h4>{{__('contact us')}}</h4>

 <ul class="breadcrumb">

 <li class="breadcrumb-item"><a href="#">{{__('home')}}</a></li>

 <li class="breadcrumb-item active" aria-current="page">{{__('contact us')}}</li>

 </ul>

 </div>

 </div>

 </section>



 <section class="contact-us-mt-mra">

 <div class="container">

 <div class="row">

 <div class="col-12">

 @php

 $part = explode(' ',trim(__('contact us')));

 $partOne = $part[0];

 $partTwo = str_replace($part[0], '', __('contact us'));

 @endphp

 <h2 class="heading-all">{{ $partOne }} <span>{{ $partTwo }}</span></h2>

 </div>

 <div class="col-md-6">

 <div class="contact-area-mt">

 <div class="sent-massage-mt">

 <form method="post" action="{{ route('front.contact-mail') }}" id="contact-form" novalidate>

 @csrf

 <div class="form">

 <div class="form-group input-style-mt">

 <div class="input-style-1">

 <label>{{__('what can we help you with?')}}<span class="text-danger">*</span></label>

 <div class="top-search-mt">

 <div class="form-group contact-us">

 <div class="dropdown drop-bottom">

 <button class="custom-btn dropdown-toggle gothic-normel p-list-place feedbackName" type="button" id="dropdownMenuButton " data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">

 {{ __('feedback') }}

 </button>

 <i class="fas fa-angle-down"></i>

 <div class="dropdown-menu contc" aria-labelledby="dropdownMenuButton">

 <div class="check-area-mt">

 <label class="check" i18n>{{ __('feedback') }}

 <input type="radio" class="feedbackRadio" checked name="subject" value="feedback">

 <span class="checkmark"></span>

 </label>

 <label class="check text-capitalize" i18n>{{ __('suggestions') }}

 <input type="radio" class="feedbackRadio"  name="subject" value="suggestions" >

 <span class="checkmark"></span>

 </label>

 <label class="check text-capitalize" i18n>{{ __('complaints') }}

 <input type="radio" class="feedbackRadio"  name="subject" value="complaints" >

 <span class="checkmark"></span>

 </label>

 <label class="check text-capitalize" i18n>{{ __('inquries') }}

 <input type="radio" class="feedbackRadio"  name="subject" value="inquries" >

 <span class="checkmark"></span>

 </label>

 </div>

 </div>

 @if($errors->contact_form->has('subject'))

 <span class="help-block">

 <small class="text-danger font-weight-bold gothic-normel">{{ $errors->contact_form->first('subject') }}</small>

 </span>

 @endif

 </div>

 </div>

 </div>

 </div>

 </div>





 <div class="form-group">

 <div class="input-style-1">

 <label>{{__('name')}}<span class="text-danger">*</span></label>

 <input type="text" required class="form-control" id="lname" name="last_name" placeholder="{{ __('enter full name')  }}" name="lname" value="{{ old('last_name') }}">

 </div>

 @if($errors->contact_form->has('last_name'))

 <span class="help-block">

 <small class="text-danger font-weight-bold gothic-normel">{{ $errors->contact_form->first('last_name') }}</small>

 </span>

 @endif

 </div>

 <div class="form-group">

 <div class="input-style-1">

 <label>{{__('email address')}}<span class="text-danger">*</span></label>

 <input type="text" required class="form-control" id="email" placeholder="{{ __('enter email')  }}" name="email" value="{{ old('email') }}">

 </div>

 @if($errors->contact_form->has('email'))

 <span class="help-block">

 <small class="text-danger font-weight-bold gothic-normel">{{ $errors->contact_form->first('email') }}</small>

 </span>

 @endif

 </div>

 <div class="form-group">

 <div class="input-style-1">

 <label>{{__('comment')}}<span class="text-danger">*</span></label>

 <div class="style-icon-mra beds1">

 <textarea class="form-control" required rows="4" name="message_text" id="comment" placeholder="{{ __('comment')  }}">{{ old('message_text') }}</textarea>

 </div>

 @if($errors->contact_form->has('message_text'))

 <span class="help-block">

 <small class="text-danger font-weight-bold gothic-normel">{{ $errors->contact_form->first('message_text') }}</small>

 </span>

 @endif

 </div>

 </div>

 <div class="contact-button-submit">

 @if(session()->has('success'))

 <p class="alert alert-success">{{ session('success') }}</p>

 @endif

 <button type="submit" class="btn btn-all-mt"> {{__('submit')}} <i class="fa fa-spinner fa-spin d-none"></i>

 </button>

 </div>

 </div>

 </form>

 </div>

 </div>

 </div>

 <div class="col-md-6 mt-4 mt-md-0">

 <div class="contact-map" id="map" style="width:100%; height: 498px ;"> </div>

 </div>

 <div class="col-lg-4">

 <div class="help-one-mt">

 <img src="{{asset('assets/front/images/contact-phone.png')}}" alt="">

 <h4>Phone</h4>

 <a href="tel:{{ config('settings.contact_number') }}">

 <p dir="ltr">{{ config('settings.contact_number') }}</p>

 </a>

 </div>

 </div>

 <div class="col-lg-4">

 <div class="help-one-mt">

 <img src="{{asset('assets/front/images/contact-map.png')}}" alt="">

 <h4>Address</h4>

 <p>{!! config('settings.address') !!}</p>

 </div>

 </div>

 <div class="col-lg-4">

 <div class="help-one-mt">

 <img src="{{asset('assets/front/images/contact-massag.png')}}" alt="">

 <h4>Email</h4>



 <a href="mailto:{{ config('settings.email') }}">

 <p>{{ config('settings.email') }}</p>

 </a>

 </div>

 </div>

 </div>

 </div>

 </section>



@endsection

@push('script-page-level')

 <script src="{{ asset('assets/front/js/jquery.validate.js') }}"></script>

 <script src="{{ asset('assets/front/js/form-validations.js') }}"></script>



 <script>

 $(document).ready(function () {

 $('.feedbackRadio').click(function() {

 $('.feedbackName').empty();

 $('.feedbackName').append($(this).parent('label').text());



 })

 $("#contact-form").validate();



 })

 </script>

@endpush--}}





@push('script-page-level')

  <style>

    .error{

      color:red;

    }

  </style>

  <script>

    function initAutocomplete() {



      var map = new google.maps.Map(document.getElementById('map'), {

        center: {

          lat: {{ config('settings.latitude') }},

          lng: {{ config('settings.longitude') }}

        },

        zoom: 13,

        mapTypeId: 'roadmap',
        styles:[
          {
            "elementType": "geometry",
            "stylers": [
              {
                "color": "#ffffff"
              }
            ]
          },
          {
            "elementType": "labels.icon",
            "stylers": [
              {
                "visibility": "off"
              }
            ]
          },
          {
            "elementType": "labels.text.fill",
            "stylers": [
              {
                "color": "#616161"
              }
            ]
          },
          {
            "elementType": "labels.text.stroke",
            "stylers": [
              {
                "color": "#f5f5f5"
              }
            ]
          },
          {
            "featureType": "administrative",
            "elementType": "geometry",
            "stylers": [
              {
                "color": "#eeeeee"
              },
              {
                "visibility": "off"
              }
            ]
          },
          {
            "featureType": "administrative.land_parcel",
            "elementType": "labels.text.fill",
            "stylers": [
              {
                "color": "#bdbdbd"
              }
            ]
          },
          {
            "featureType": "poi",
            "stylers": [
              {
                "visibility": "off"
              }
            ]
          },
          {
            "featureType": "poi",
            "elementType": "geometry",
            "stylers": [
              {
                "color": "#eeeeee"
              }
            ]
          },
          {
            "featureType": "poi",
            "elementType": "labels.text.fill",
            "stylers": [
              {
                "color": "#757575"
              }
            ]
          },
          {
            "featureType": "poi.park",
            "elementType": "geometry",
            "stylers": [
              {
                "color": "#e5e5e5"
              }
            ]
          },
          {
            "featureType": "poi.park",
            "elementType": "labels.text.fill",
            "stylers": [
              {
                "color": "#9e9e9e"
              }
            ]
          },
          {
            "featureType": "road",
            "elementType": "geometry",
            "stylers": [
              {
                "color": "#eeeeee"
              },
              {
                "visibility": "on"
              }
            ]
          },
          {
            "featureType": "road",
            "elementType": "labels.icon",
            "stylers": [
              {
                "visibility": "off"
              }
            ]
          },
          {
            "featureType": "road.arterial",
            "elementType": "labels.text.fill",
            "stylers": [
              {
                "color": "#757575"
              },
              {
                "visibility": "on"
              }
            ]
          },
          {
            "featureType": "road.highway",
            "elementType": "geometry",
            "stylers": [
              {
                "color": "#e2e2e2"
              },
              {
                "visibility": "on"
              }
            ]
          },
          {
            "featureType": "road.highway",
            "elementType": "labels.text.fill",
            "stylers": [
              {
                "color": "#616161"
              }
            ]
          },
          {
            "featureType": "road.local",
            "elementType": "labels.text.fill",
            "stylers": [
              {
                "color": "#9e9e9e"
              }
            ]
          },
          {
            "featureType": "transit",
            "stylers": [
              {
                "visibility": "off"
              }
            ]
          },
          {
            "featureType": "transit.station",
            "elementType": "geometry",
            "stylers": [
              {
                "color": "#eeeeee"
              }
            ]
          },
          {
            "featureType": "water",
            "elementType": "geometry",
            "stylers": [
              {
                "color": "#c9c9c9"
              }
            ]
          },
          {
            "featureType": "water",
            "elementType": "labels.text.fill",
            "stylers": [
              {
                "color": "#9e9e9e"
              }
            ]
          }
        ]

      });



      var marker = new google.maps.Marker({

        position: {

          lat: {{ config('settings.latitude') }},

          lng: {{ config('settings.longitude') }}

        },

        icon:`{{url("assets/front/images/contact-map.png")}}`,

        map: map,

        draggable: false

      });

      var str = '{{ config('settings.address') }}';
      var infowindow = new google.maps.InfoWindow({
        content: str,
      });

      infowindow.open(map, marker);

    }








{{--<style>--}}
{{--  .error {--}}

{{--    color: red;--}}

{{--  }--}}
{{--</style>--}}

{{--<script>--}}
{{--  function initAutocomplete() {--}}



{{--    var map = new google.maps.Map(document.getElementById('map'), {--}}

{{--      center: {--}}

{{--        lat: {--}}
{{--          {--}}
{{--            config('settings.latitude')--}}
{{--          }--}}
{{--        },--}}

{{--        lng: {--}}
{{--          {--}}
{{--            config('settings.longitude')--}}
{{--          }--}}
{{--        }--}}

{{--      },--}}

{{--      zoom: 13,--}}

{{--      mapTypeId: 'roadmap'--}}

{{--    });--}}



{{--      });--}}

{{--    var marker = new google.maps.Marker({--}}


{{--      position: {--}}

{{--        lat: {--}}
{{--          {--}}
{{--            config('settings.latitude')--}}
{{--          }--}}
{{--        },--}}

{{--        lng: {--}}
{{--          {--}}
{{--            config('settings.longitude')--}}
{{--          }--}}
{{--        }--}}

{{--      },--}}


{{--      icon: `{{url("assets/front/images/contact-map.png")}}`,--}}

{{--      map: map,--}}

{{--      draggable: false--}}

{{--    });--}}


{{--    var str = '{{ config('--}}
{{--    settings.address ') }}';--}}
{{--    var infowindow = new google.maps.InfoWindow({--}}
{{--      content: str,--}}
{{--    });--}}

{{--    infowindow.open(map, marker);--}}

{{--  }--}}
</script>

<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBNcTmnS323hh7tSQzFdwlnB4EozA3lwcA&libraries=places&callback=initAutocomplete"></script>

@endpush

@section('content')

@include('front.common.breadcrumb')

{{-- <section class="contact-us-section">

    <div class="contcat-us-slider">

      <div class="bread-mt">

        <h4>{{__('contact us')}}</h4>

<ul class="breadcrumb">

  <li class="breadcrumb-item"><a href="{{ route('front.index') }}">{{__('home')}}</a></li>

  <li class="breadcrumb-item active text-uppercase" aria-current="page">{{__('contact us')}}</li>

</ul>

</div>

</div>

</section> --}}



<section class="contact-us-mt-mra commen-space">

  <div class="container">

    <div class="row">

      <div class="col-md-12">
      @php

        $part = explode(' ',trim(__('contact us')));

        $partOne = $part[0];

        $partTwo = str_replace($part[0], '', __('contact us'));

        @endphp
            <div class="section-headline text-center">
                <h2 class="primary-heading text-center">{{ $partOne }} {{ $partTwo }}</h2>
                <img src="{{ url('assets/front/img/underline.png') }}" class="img-fluid" alt="">
            </div>
        </div>



      <div class="col-12">

        <div class="form-section-box2">
          <div class="help-one-mt2">

            <img class="img-fluid " src="{{asset('assets/front/images/phone-form.png')}}" alt="">

            <h4 class="card-text12 text-truncate"> {{ __('Phone') }} </h4>

            <a href="tel:{{ config('settings.contact_number') }}">

              <p class="card-text1 text-truncate" dir="ltr">{{ config('settings.contact_number') }}</p>
              
            </a>

          </div>
          <div class="help-one-mt2">

            <img class="img-fluid" src="{{asset('assets/front/images/location.png')}}" alt="">

            <h4 class="card-text12 "> {{ __('Address') }} </h4>

            <p class="card-text1 ">{!! config('settings.address') !!}</p>
            

          </div>

          <div class="help-one-mt2">

            <img class="img-fluid img-color" src="{{asset('assets/front/images/message.png')}}" alt="">
            <h4 class="card-text12 text-truncate"> {{ __('Email') }} </h4>
            <a href="mailto:{{ config('settings.email') }}">

              <p class="card-text1 ">{{ config('settings.email') }}</p>
              


            </a>

          </div>



        </div>



      </div>


      <div class="col-md-6 ">

        <div class="contact-area-mt form-bg-img">

          <div class="sent-massage-mt">

           <div class="mb-4">
           <h3 class="form-heading mb-2">{{ __('send message') }}</h3>

<p class="forn-texr-para">{{ __('If you got any questions please do not hesitate to send us a message') }}</p>
           </div>

            <form method="post" action="{{ route('front.contact-mail') }}" id="contact-form" novalidate>

              @csrf

              <div class="form">

                <div class="form-group input-style-mt">

                  <div class="input-style-1">

                    <label class="text-pp  text-capitalize">{{__('what can we help you with?')}}<span class="text-danger staric-setting"> *</span></label>

                    <div class="top-search-mt">

                      <div class="form-group contact-us">

                        <div class="dropdown drop-bottom">

                          <button class="custom-btn  text-capitalize dropdown-toggle gothic-normel p-list-place feedbackName" type="button" id="dropdownMenuButton " data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">

                            {{ __('feedback') }}

                          </button>

                          <i class="fas fa-angle-down"></i>

                          <div class="dropdown-menu contc" aria-labelledby="dropdownMenuButton">

                            <div class="check-area-mt">

                              <label class="check text-capitalize" i18n>{{ __('feedback') }}

                                <input type="radio" class="feedbackRadio" checked name="subject" value="feedback">

                                <span class="checkmark"></span>

                              </label>

                              <label class="check text-capitalize" i18n>{{ __('suggestions') }}

                                <input type="radio" class="feedbackRadio" name="subject" value="suggestions">

                                <span class="checkmark"></span>

                              </label>

                              <label class="check text-capitalize" i18n>{{ __('complaints') }}

                                <input type="radio" class="feedbackRadio" name="subject" value="complaints">

                                <span class="checkmark"></span>

                              </label>

                              <label class="check text-capitalize" i18n>{{ __('inquries') }}

                                <input type="radio" class="feedbackRadio" name="subject" value="inquries">

                                <span class="checkmark"></span>

                              </label>

                            </div>

                          </div>

                          @if($errors->contact_form->has('subject'))

                          <span class="help-block">

                            <small class="text-danger font-weight-bold gothic-normel">{{ $errors->contact_form->first('subject') }}</small>

                          </span>

                          @endif

                        </div>

                      </div>

                    </div>

                  </div>

                </div>





                {{-- <div class="form-group input-style-mt">

                    <div class="input-style-1">

                      <label class="text-pp  text-capitalize mb-0">{{__('name')}}<span class="text-danger staric-setting"> *</span></label>

                <input type="text " required class="form-control text-capitalize" id="lname" name="last_name" placeholder="{{ __('enter full name')  }}" name="lname" value="{{ old('last_name') }}">

                @if($errors->contact_form->has('last_name'))

                <span class="help-block">

                  <small class="text-danger font-weight-bold gothic-normel">{{ $errors->contact_form->first('last_name') }}</small>

                </span>

                @endif

              </div>

          </div> --}}

          <div class="form-group input-style-mt">

            <div class="input-style-1">

              <label class="text-pp  text-capitalize mb-0">{{__('Name')}} <span class="text-danger staric-setting">*</span></label>

              <input type="text" required class="form-control text-capitalize" id="last_name" placeholder="{{ __('Name')  }}" name="last_name" value="{{ old('last_name') }}">

              @if($errors->contact_form->has('last_name'))

              <span class="help-block">

                <small class="text-danger font-weight-bold gothic-normel">{{ $errors->contact_form->first('last_name') }}</small>

              </span>

              @endif

            </div>

          </div>



          <div class="form-group input-style-mt">

            <div class="input-style-1">

              <label class="text-pp  text-capitalize mb-0">{{__('email')}} <span class="text-danger staric-setting"> *</span></label>

              <input type="text" required class="form-control" id="email" placeholder="{{ __('email')  }}" name="email" value="{{ old('email') }}">

              @if($errors->contact_form->has('email'))

              <span class="help-block">

                <small class="text-danger font-weight-bold gothic-normel">{{ $errors->contact_form->first('email') }}</small>

              </span>

              @endif

            </div>

          </div>

          <div class="form-group input-style-mt">

            <div class="input-style-1">

              <label class="text-pp  text-capitalize mb-0">{{__('comment')}} <span class="text-danger staric-setting"> *</span></label>

              <div class="style-icon-mra beds1">

                <textarea class="form-control" required rows="4" name="message_text" id="comment" placeholder="{{ __('Enter your comments here...')  }}">{{ old('message_text') }}</textarea>

                @if($errors->contact_form->has('message_text'))

                <span class="help-block">

                  <small class="text-danger font-weight-bold gothic-normel">{{ $errors->contact_form->first('message_text') }}</small>

                </span>

                @endif

              </div>

            </div>

          </div>

          <div class="contact-button-submit">

            @if(session()->has('success'))

            <p id="error-message" class="alert alert-success">{{ session('success') }}</p>

            @endif

            <button type="submit" class="btn btn-all-mt "> {{__('submit')}} <i class="fa fa-spinner fa-spin d-none"></i>

            </button>

          </div>

        </div>

        </form>

      </div>

    </div>

  </div>


  <div class="col-md-6 mt-4 mt-md-0 mb-lg-0 mb-md-4 ">

    <div class="contact-map" id="map"> </div>

  </div>

















  </div>

  </div>

</section>



@endsection

@push('script-page-level')

<script src="{{ asset('assets/front/js/jquery.validate.js') }}"></script>

<script type="text/javascript">
  $(document).ready(function() {

    // setTimeout()

    // $('#error-message').addClass('d-none');



    setTimeout(function() {

        $('#error-message').addClass('d-none');
      }, 5000

    );

  })
</script>

{{-- <script src="{{ asset('assets/front/js/form-validations.js') }}"></script>--}}

<script>
  $(document).ready(function() {

    $('.feedbackRadio').click(function() {

      $('.feedbackName').empty();

      $('.feedbackName').append($(this).parent('label').text());



    })

    $("#contact-form").validate();

  })
</script>

@endpush