@extends('frontend.layouts.master')
@section('styles')
@parent
{!! RecaptchaV3::initJs() !!}
@stop

@section('content')
<main>
  <section class="inner_banner">
    <div class="bg_ p_img">
      @if(!empty($banner) && !empty($banner->getData('banner_image')))
        <picture>
            <source srcset="{{webp($banner->getData('banner_image'))}}" type="image/webp">
            <source srcset="{{PP($banner->getData('banner_image'))}}" type="image/{{FT($banner->getData('banner_image'))}}">
            <img src="{{PP($banner->getData('banner_image'))}}" loading="lazy" alt="">
        </picture>
        @else        
      <picture>
        <source srcset="{{getFrontendAsset('images/about_banner.webp')}}" type="image/webp">
        <source srcset="{{getFrontendAsset('images/about_banner.jpg')}}" type="image/jpeg">
        <img src="{{getFrontendAsset('images/about_banner.jpg')}}" loading="lazy" alt="{{lang('contact_page_banner_alt_keywords')}}">
      </picture>
      @endif
    </div>

    <div class="container">
      <div class="page_title">
        <h1>
          <span>{{lang('contact_us')}}</span>
        </h1>
      </div>
    </div>
    @include('frontend.layouts.social')
  </section>
  @if(!empty($locationList) && $locationList->isNotEmpty())
  <section class="page-section first_sec">
    
    <div class="location_wrap">
      <ul>
        @foreach($locationList as $key=>$location)
        @php $number=$key+1; @endphp
        <li>
          <a class="dir-btn " href="#" data-location="info_{{$number}}" data-lat="{{$location->getData('location_lat')}}" data-lng="{{$location->getData('location_lng')}}">{{$location->getData('post_title')}}
            <span></span><span></span><span></span><span></span>
            <b aria-hidden="true">{{$location->getData('post_title')}}</b>
            <b aria-hidden="true">{{$location->getData('post_title')}}</b>
            <b aria-hidden="true">{{$location->getData('post_title')}}</b>
            <b aria-hidden="true">{{$location->getData('post_title')}}</b>
          </a>
        </li>
        @endforeach
       
      </ul>
    </div>

    <div class="container-fluid no_pad">
      <div class="map_grid">
        <div class="map_box" id="map">

        </div>
		
        <div class="map_info_wrap">
          @foreach($locationList as $key=>$location)
          @php $number=$key+1; 
		  
		 
		  @endphp
            <div class="map_info_" data-target="info_{{$number}}">
              <ul>
			   @if(!empty($location->getData('address')))
                <li>
                  <div class="inner_">
                    <div class="icons_box">
                      <svg viewBox="0 0 29.73 29.73">
                        <path
                          d="M24.013.19,1.553,10.557a2.619,2.619,0,0,0,1.037,5.01h9.5v9.5a2.619,2.619,0,0,0,5.01,1.037L27.469,3.646A2.7,2.7,0,0,0,24.013.19Z"
                          transform="translate(1.029 1.042)" fill="none" stroke="#fac25a" stroke-width="2" />
                      </svg>
                    </div>
                    <div class="t_">
                    {{$location->getData('address')}}
                    </div>
                  </div>

                </li>
				@endif
				 @if(!empty($location->getData('phone_number')))
                <li>
                  <a href="tel:{{$location->getData('phone_number')}}" class="inner_">
                    <div class="icons_box">
                      <svg viewBox="0 0 25.764 25.81">
                        <path
                          d="M17.822,6.03A5.663,5.663,0,0,1,22.3,10.5m-4.474-9a10.193,10.193,0,0,1,9,8.993m-1.133,9.038v3.4a2.265,2.265,0,0,1-2.469,2.265,22.414,22.414,0,0,1-9.774-3.477,22.086,22.086,0,0,1-6.8-6.8A22.414,22.414,0,0,1,3.177,5.1,2.265,2.265,0,0,1,5.431,2.633h3.4a2.265,2.265,0,0,1,2.265,1.948,14.543,14.543,0,0,0,.793,3.183,2.265,2.265,0,0,1-.51,2.39L9.939,11.592a18.122,18.122,0,0,0,6.8,6.8l1.438-1.438a2.265,2.265,0,0,1,2.39-.51,14.543,14.543,0,0,0,3.183.793A2.265,2.265,0,0,1,25.693,19.531Z"
                          transform="translate(-2.167 -0.396)" fill="none" stroke="#fac25a" stroke-linecap="round"
                          stroke-linejoin="round" stroke-width="2" />
                      </svg>
                    </div>
                    <div class="t_ ltr">
                    {{$location->getData('phone_number')}}
                    </div>
                  </a>

                </li>
				@endif
				 @if(!empty($location->getData('po_box')))
                <li>
                  <div class="inner_">
                    <div class="icons_box">
                      <svg viewBox="0 0 21.185 29.266">
                        <g transform="translate(-914.167 -184)">
                          <path
                            d="M9.593,0h0a9.593,9.593,0,0,1,9.593,9.593V27.266a0,0,0,0,1,0,0H0a0,0,0,0,1,0,0V9.593A9.593,9.593,0,0,1,9.593,0Z"
                            transform="translate(915.167 185)" fill="none" stroke="#fac25a" stroke-linecap="round"
                            stroke-linejoin="round" stroke-miterlimit="10" stroke-width="2" />
                          <line x2="8.372" transform="translate(920.573 193.779)" fill="none" stroke="#fac25a"
                            stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" />
                          <rect width="9.418" height="9.418" transform="translate(920.05 198.662)" fill="none"
                            stroke="#fac25a" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10"
                            stroke-width="2" />
                        </g>
                      </svg>
                    </div>
                    <div class="t_">
                    {{$location->getData('po_box')}}
                    </div>
                  </div>

                </li>
				@endif
				 @if(!empty($location->getData('email')))
                <li>
                  <a href="mailto: {{$location->getData('email')}}" class="inner_">
                    <div class="icons_box">
                      <svg viewBox="0 0 24.707 19.537">
                        <g transform="translate(-1.607 -5)">
                          <path
                            d="M5.192,6H22.73a2.2,2.2,0,0,1,2.192,2.192V21.345a2.2,2.2,0,0,1-2.192,2.192H5.192A2.2,2.2,0,0,1,3,21.345V8.192A2.2,2.2,0,0,1,5.192,6Z"
                            fill="none" stroke="#fac25a" stroke-linecap="round" stroke-linejoin="round"
                            stroke-width="2" />
                          <path d="M24.922,9,13.961,16.673,3,9" transform="translate(0 -0.808)" fill="none"
                            stroke="#fac25a" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" />
                        </g>
                      </svg>
                    </div>
                    <div class="t_ ltr">
                    {{$location->getData('email')}}
                    </div>
                  </a>

                </li>
			@endif
      @if(!empty($location->getData('working_hours')))
            <li>
                  <div class="inner_">
                    <div class="icons_box">
                      <svg version="1.1" viewBox="0 0 55 55" overflow="visible" xml:space="preserve">
                        <g id="Layer_1">
                        </g>
                        <g id="Layer_2">
                        </g>
                        <g id="Layer_3">
                        </g>
                        <g id="Layer_4">
                          <g>
                            <path fill="#FAC25A" stroke="#FAC25A" stroke-width="2" d="M30,6.012C16.772,6.012,6.012,16.773,6.012,30c0,13.227,10.761,23.987,23.988,23.987
                              S53.988,43.227,53.988,30C53.988,16.773,43.228,6.012,30,6.012z M30,51.587C18.097,51.587,8.412,41.904,8.412,30
                              S18.097,8.413,30,8.413S51.588,18.097,51.588,30S41.903,51.587,30,51.587z"/>
                            <path fill="#FAC25A" d="M31.835,30.124V17.456c0-0.663-0.537-1.2-1.2-1.2s-1.2,0.537-1.2,1.2v13.249
                              c0,0.367,0.168,0.714,0.456,0.941l6.596,5.212c0.221,0.174,0.482,0.259,0.743,0.259c0.354,0,0.706-0.156,0.942-0.456
                              c0.411-0.521,0.322-1.274-0.197-1.686L31.835,30.124z"/>
                          </g>
                        </g>
                      </svg>
                    </div>
                    <div class="t_">
                    {{$location->getData('working_hours')}}
                    </div>
                  </div>

                </li>
                @endif
				
              </ul>
            </div>
          @endforeach
        </div>
      </div>

    </div>
  </section>
  @endif
  <section class="page-section">
    <div class="container ">
      <div class="inquire_wrap">
        <div class="title_box ">
          <h3 class="section-title">
            <span>{{lang('inquire')}}</span>
          </h3>
                  </div>

        <div class="contact_options_wrap">
          <a class="c_item" href="#pop1" data-slug="customer-support"  data-title="{{lang('customer_support')}}" data-fancybox-modal-pop>
            <div class="inner_">
              <div class="icons_box">
                <svg x="0px" y="0px" viewBox="0 0 59 56" overflow="visible" xml:space="preserve">
                  <g transform="translate(0)">
                    <path fill="#FAC25A" d="M48.657,24.127h-0.131v-3.214c-0.09-10.325-8.533-18.622-18.858-18.531
                      C19.47,2.47,11.225,10.715,11.136,20.912v3.214h-0.787c-2.928,0.122-5.211,2.581-5.116,5.51v6.597
                      c-0.073,2.861,2.188,5.239,5.048,5.312c0,0,0,0,0,0h4.922c0.687-0.032,1.218-0.616,1.186-1.303c0-0.024,0-0.05,0-0.074V25.701
                      c0-0.787-0.459-1.572-1.18-1.572h-1.443v-3.214c0-8.877,7.196-16.072,16.072-16.072s16.072,7.196,16.072,16.072v3.214h-1.443
                      c-0.721,0-1.18,0.787-1.18,1.572V40.17c-0.073,0.684,0.422,1.298,1.106,1.371c0,0,0.001,0,0.001,0h0.074h1.497l-0.131,0.197
                      c-1.968,2.616-5.057,4.149-8.331,4.133c-0.717-3.514-4.148-5.782-7.662-5.065c-3.004,0.613-5.17,3.244-5.196,6.31
                      c0.031,3.601,2.961,6.504,6.562,6.502c1.781-0.029,3.478-0.759,4.723-2.033c0.838-0.859,1.387-1.958,1.572-3.143
                      c4.099,0.015,7.965-1.905,10.429-5.182l1.246-1.837c2.466,0.07,4.521-1.873,4.59-4.338c0.002-0.063,0.002-0.125,0.001-0.188
                      v-6.606C53.773,27.473,51.674,24.127,48.657,24.127z M13.759,38.925h-3.41c-1.413-0.034-2.53-1.207-2.496-2.62c0,0,0,0,0,0
                      c0-0.023,0-0.047,0-0.07v-6.597c-0.098-1.482,1.012-2.768,2.493-2.886h3.412L13.759,38.925z M34.029,49.748
                      c-0.727,0.788-1.748,1.239-2.82,1.246c-2.135-0.033-3.867-1.737-3.936-3.87c-0.001-2.137,1.73-3.871,3.868-3.873
                      c2.137-0.001,3.871,1.73,3.873,3.868c0,0.002,0,0.003,0,0.005l0,0C35.068,48.098,34.71,49.05,34.029,49.748z M51.15,36.89
                      c0,1.772-1.706,2.033-2.493,2.033h-2.756V26.751h2.754c1.443,0,2.493,2.033,2.493,3.542L51.15,36.89z"/>
                  </g>
                </svg>
              </div>
              <div class="text_box">
                <p>{{lang('customer_support')}}</p>
              </div>
            </div>
           </a>
          <a class="c_item" href="#pop1" data-title="{{lang('marketing_department')}}" data-slug="marketing-department" data-fancybox-modal-pop>
            <div class="inner_">
              <div class="icons_box">
                <svg x="0px" y="0px" viewBox="0 0 59 56" overflow="visible" xml:space="preserve">
                  <g>
                    <path fill="#FAC25A" d="M35.764,42.25h19.797L55.406,6.217H3.439L3.593,42.25h19.797v4.488h-3.057v3.045h18.473v-3.044h-3.042
                      V42.25z M6.066,39.623l-0.155-3.237h31.417v-3.121H17.585l8.355-8.355l4.682,4.682l9.77-9.375v3.827h3.121v-9.36h-9.369v3.12
                      h4.243l-7.771,7.374l-4.682-4.682L13.171,33.265h-7.26V8.844h47.022l0.155,30.78H6.066z M32.723,46.738H26.43V42.25h6.293V46.738z
                      "/>
                    <rect x="40.18" y="33.024" fill="#FAC25A" width="3.045" height="3.045"/>
                    <rect x="46.269" y="33.024" fill="#FAC25A" width="3.045" height="3.045"/>
                  </g>
                </svg>
              </div>
              <div class="text_box">
                <p>{{lang('marketing_department')}}</p>
              </div>
            </div>
          </a>
          <a class="c_item" href="#pop1" data-slug="brokerage-department" data-title="{{lang('brokerage_department')}}" data-fancybox-modal-pop>
            <div class="inner_">
              <div class="icons_box">
               <svg x="0px" y="0px" viewBox="0 0 59 56" overflow="visible" xml:space="preserve">
                <path fill="#FAC25A" d="M57.94,18.731L48.341,6.979c-0.355-0.435-1.003-0.542-1.495-0.247l-6.197,3.715h-8.082
                  c-0.105,0-0.209,0.021-0.309,0.049l-6.267,1.7l-6.502-1.676l-6.318-3.787c-0.483-0.289-1.119-0.191-1.478,0.228L1.076,19.355
                  c-0.382,0.445-0.319,1.096,0.142,1.469l5.564,4.514l4.992,6.341c-1.46,1.466-1.432,3.778,0.088,5.211
                  c0.673,0.634,1.53,0.993,2.41,1.076c-0.031,0.188-0.046,0.379-0.046,0.573c0,1,0.413,1.941,1.164,2.648
                  c0.751,0.708,1.749,1.097,2.81,1.097c0.014,0,0.028-0.001,0.042-0.001c0,0.026-0.002,0.051-0.002,0.076
                  c0,1,0.413,1.941,1.164,2.649c0.751,0.707,1.749,1.097,2.81,1.097c0.21,0,0.417-0.016,0.62-0.046
                  c0.086,0.833,0.467,1.644,1.143,2.281c0.774,0.73,1.792,1.095,2.81,1.095s2.035-0.365,2.81-1.095l0.608-0.573l0.255,0.194
                  c0.768,0.701,1.766,1.052,2.763,1.052c1.018,0,2.035-0.365,2.81-1.095c0.791-0.745,1.178-1.729,1.162-2.707
                  c1.038,0.015,2.082-0.35,2.872-1.094c0.79-0.745,1.177-1.727,1.162-2.706c1.081,0.016,2.107-0.375,2.872-1.097
                  c0.791-0.745,1.178-1.729,1.162-2.707c1.039,0.015,2.082-0.35,2.872-1.095c1.349-1.272,1.523-3.238,0.522-4.689l3.645-7.195
                  l5.48-4.445C58.235,19.814,58.304,19.177,57.94,18.731z M12.811,9.028l4.543,2.723L7.471,23.1l-3.96-3.213L12.811,9.028z
                   M13.452,33.09l1.371-1.292c0.042-0.039,0.085-0.076,0.13-0.111c0.268-0.206,0.593-0.329,0.937-0.358
                  c0.01-0.001,0.02-0.001,0.029-0.001c0.049-0.004,0.098-0.006,0.147-0.006c0.47,0.006,0.907,0.187,1.23,0.509
                  c0.635,0.633,0.601,1.667-0.076,2.306l-1.33,1.253c-0.672,0.634-1.767,0.634-2.439,0C12.78,34.756,12.78,33.724,13.452,33.09z
                   M16.98,39.687c-0.326-0.307-0.505-0.715-0.505-1.149s0.179-0.843,0.505-1.15l2.659-2.506c0.509-0.48,1.31-0.612,1.961-0.319
                  c0.671,0.301,1.049,0.988,0.95,1.679c-0.053,0.369-0.235,0.716-0.514,0.979l-2.617,2.466c-0.326,0.307-0.759,0.476-1.22,0.476
                  S17.306,39.994,16.98,39.687z M20.995,43.508c-0.326-0.307-0.505-0.715-0.505-1.149c0-0.434,0.179-0.843,0.505-1.15l2.658-2.506
                  c0.545-0.513,1.418-0.624,2.085-0.258c0.609,0.334,0.928,0.99,0.823,1.643c-0.057,0.359-0.238,0.697-0.511,0.954l-2.616,2.466
                  c-0.326,0.307-0.759,0.476-1.22,0.476S21.321,43.815,20.995,43.508z M25.568,46.84c-0.672-0.634-0.672-1.665,0-2.299l1.371-1.292
                  c0.042-0.039,0.085-0.076,0.13-0.111c0.001-0.001,0.002-0.002,0.003-0.002c0.223-0.171,0.485-0.285,0.765-0.335
                  c0.007-0.001,0.013-0.002,0.02-0.002c0.048-0.008,0.097-0.015,0.146-0.019c0.02-0.002,0.039-0.002,0.06-0.003
                  c0.04-0.002,0.08-0.005,0.121-0.004c0.469,0.006,0.907,0.187,1.23,0.509c0.04,0.04,0.077,0.081,0.111,0.123
                  c0.517,0.637,0.448,1.584-0.194,2.189l-1.323,1.247C27.334,47.474,26.24,47.474,25.568,46.84z M46.545,35.011
                  c-0.672,0.634-1.767,0.634-2.439,0c-0.025-0.023-0.05-0.045-0.077-0.065l-7.23-6.887c-0.437-0.416-1.149-0.419-1.59-0.007
                  c-0.441,0.412-0.445,1.083-0.008,1.499l7.309,6.961c0.001,0.001,0.002,0.002,0.003,0.002c0.672,0.634,0.672,1.666,0,2.299
                  c-0.326,0.307-0.759,0.476-1.22,0.476c-0.461,0-0.894-0.169-1.22-0.476l-4.889-4.656c-0.437-0.416-1.148-0.419-1.59-0.008
                  c-0.441,0.412-0.445,1.083-0.008,1.499l4.814,4.585c0.025,0.029,0.051,0.056,0.079,0.083c0.672,0.634,0.672,1.666,0,2.299
                  c-0.673,0.634-1.768,0.633-2.44,0l-2.668-2.542c-0.437-0.416-1.149-0.42-1.59-0.008c-0.441,0.412-0.445,1.083-0.008,1.499
                  l2.594,2.47c0.025,0.029,0.051,0.057,0.079,0.083c0.672,0.634,0.672,1.666,0,2.299c-0.672,0.634-1.767,0.634-2.439,0
                  c-0.077-0.073-0.168-0.129-0.255-0.192c-0.074-0.053-0.093-0.089-0.056-0.174c0.037-0.085,0.093-0.162,0.13-0.248
                  c0.041-0.096,0.074-0.194,0.107-0.293c0.172-0.524,0.223-1.087,0.146-1.631c-0.149-1.043-0.757-1.984-1.68-2.579
                  c-0.498-0.321-1.075-0.532-1.673-0.611c0.29-1.204-0.058-2.51-0.963-3.411c-0.745-0.741-1.751-1.158-2.833-1.172
                  c-0.039,0-0.079,0-0.119,0c0.024-0.973-0.351-1.94-1.063-2.649c-0.745-0.741-1.751-1.158-2.833-1.172
                  c-0.322-0.004-0.646,0.028-0.959,0.096c-0.134-0.878-0.603-1.69-1.314-2.271c-0.707-0.577-1.595-0.897-2.542-0.909
                  c-0.996-0.014-1.975,0.333-2.715,0.963l-4.347-5.521l10.399-11.941l3.314,0.854l-4.328,7.199c-0.523,0.871-0.655,1.881-0.372,2.845
                  c0.283,0.965,0.947,1.767,1.871,2.26c0.058,0.031,0.116,0.06,0.175,0.088c0.004,0.002,0.009,0.004,0.014,0.006
                  c0.155,0.073,0.315,0.136,0.477,0.188c0.754,0.246,1.568,0.273,2.353,0.068c1.023-0.267,1.874-0.893,2.398-1.763l2.813-4.679
                  l5.022,0.336l13.374,12.605C47.217,33.346,47.217,34.377,46.545,35.011z M47.01,30.153L34.465,18.328
                  c-0.024-0.023-0.049-0.044-0.074-0.064c-0.181-0.142-0.405-0.228-0.641-0.243L27.6,17.609c-0.425-0.028-0.848,0.186-1.058,0.535
                  l-3.162,5.26c-0.227,0.378-0.597,0.65-1.041,0.765c-0.444,0.116-0.909,0.061-1.31-0.153c-0.401-0.214-0.689-0.562-0.812-0.981
                  c-0.123-0.419-0.066-0.857,0.162-1.235l4.222-7.023l1.711-0.464c0.011-0.003,0.022-0.007,0.034-0.011l6.385-1.738h7.714
                  l9.631,11.539L47.01,30.153z M51.547,22.442l-8.906-10.677l4.545-2.725l8.322,10.189L51.547,22.442z"/>
              </svg>
              </div>
              <div class="text_box">
                <p>{{lang('brokerage_department')}}</p>
              </div>
            </div>
          </a>
        </div>
      </div>
    </div>
  </section>
  <div class="popup_box md_box form_box contact_us_pop" id="pop1" style="display: none;">
    <div class="inner_">
    <div class="img_box ">
       
       @if(!empty(!empty($contactData)) && !empty($contactData->getData('contact_image')))
        <picture>
          <source srcset="{{webp($contactData->getData('contact_image'))}}" type="image/webp">
          <source srcset="{{PP($contactData->getData('contact_image'))}}" type="image/{{FT($contactData->getData('contact_image'))}}">
          <img src="{{PP($contactData->getData('contact_image'))}}" loading="lazy" alt="">
        </picture>
        @else
        <picture>
          <source srcset="{{getFrontendAsset('images/career_img.webp')}}" type="image/webp">
          <source srcset="{{getFrontendAsset('images/career_img.jpg')}}" type="image/jpeg">
          <img src="{{getFrontendAsset('images/career_img.jpg')}}" loading="lazy" alt="">
        </picture>
        @endif
      </div>
      
      <div class="content_box">
      <div class="title_" id="form_title"></div>
        <div class="text_box">
          <h3 id="form_title"></h3>
        </div>
        {{Form::open(array('url'=>route('contact-request',[$lang]),'name'=>'contact-request','id'=>'contact-request','role'=>'form','autocomplete'=>'off') )}}
          
          <div class="f_inner_">
            <div class="input-field ">
                <input id="full_name" name="full_name" type="text">
                <label for="full_name">{{lang('full_name')}}</label>
            </div>
            <div class="input-field ">
                <input id="user_email" name="user_email" type="email">
                <label for="user_email">{{lang('email')}}</label>
            </div>
           <div class="m_row">
            <div class="input-field ">               
              <select name="countryCode" id="countrycode">
              @if(!empty($countryList))
                   @php
                    $uae=$countryList->filter(function ($value, $key) {
                                            return ($value->phonecode == '971');
                                        })->first();
                   @endphp
                   @if(!empty($uae))
                      <option data-countryCode="{{$uae->iso}}" value="+{{$uae->phonecode}}">{{$uae->getData('country_name')}} (+{{$uae->phonecode}})</option>
                   @endif
                   @foreach($countryList as $country)
                      @if($country->phonecode == '971')
                         @continue;
                       @endif
                      <option data-countryCode="{{$country->iso}}" value="+{{$country->phonecode}}">{{$country->getData('country_name')}} (+{{$country->phonecode}})</option>
                   @endforeach
                @endif

              </select>
              <label for="phone_number" >{{lang('country_code')}}</label>                              
            </div>
            <div class="input-field ">
             <input id="phone_number" name="phone_number" type="text">
             <label for="phone_number" >{{lang('phone_number')}}</label>
            </div>
          </div>

          
            
                        <div class="m_row">

              <div class="input-field">
                <select id="department" name="department">
                  <option value="" disabled selected>{{lang('choose_your_option')}}</option>
                  <option value="customer-support">{{lang('customer_support')}}</option>
                  <option value="marketing-department">{{lang('marketing_department')}}</option>
                  <option value="brokerage-department">{{lang('brokerage_department')}}</option>
                </select>
                <label for="department">{{lang('choose_department')}}</label>
              </div>

              <div class="input-field">
                    <select id="enquire_type" name="enquire_type" class="select_box_">
                      <option value="" disabled selected>{{lang('enquire_type')}}</option>
                      <option value="Client">{{lang('client')}}</option>
                      <option value="Broker">{{lang('broker')}}</option>
                    </select>
                </div>

            </div>

            <div class="input-field full_">
                    <textarea id="message" name="message" class="materialize-textarea"></textarea>
                    <label for="message">{{lang('message')}} </label>
                    <span class="helper-text" >{{lang('maximum_250_words')}}</span>
            </div>

            <div class="input-field checkbox_field">
              <label> 
              <input type="checkbox" name="commercial_messages" class="filled-in" value="Yes" />
                <span>{{ lang('receive_commercial_electronic_messages') }}</span>
              </label>
            </div>            

            <div class="input-field  checkbox_field">
              <label>
                <input type="checkbox" name="accept_privacy_policy" class="filled-in" value="1" />
                <!-- <span>{{ lang('accept_the_website_cookies_and_privacy_policy') }}</span> -->
                @if ($lang=="ar")
                    <span>باستخدام هذا النموذج، فإنك تقبل <a href="{{route('cookie-policy',$lang)}}" class="link_" target="_blank">نص تعريف الارتباط</a> و <a href="{{route('privacy-policy',$lang)}}" class="link_" target="_blank">سياسة الخصوصية</a>.</span>    
                @elseif ($lang=="ru")
                    <span>Используя эту форму, вы принимаете <a href="{{route('cookie-policy',$lang)}}" class="link_" target="_blank">политику использования файлов cookie</a> и <a href="{{route('privacy-policy',$lang)}}" class="link_" target="_blank">конфиденциальности веб-сайта</a>.</span>    
                @else
                    <span>By using this form, you accept the <a href="{{route('cookie-policy',$lang)}}" class="link_" target="_blank">Website Cookies</a> and <a href="{{route('privacy-policy',$lang)}}" class="link_" target="_blank">Privacy Policy</a>.</span>
                @endif              
              </label>
            </div>              

            <div class="input-field text-right">
               {!! RecaptchaV3::field('contactRequest') !!}
              <button type="submit" class="dir-btn  dir-btn--filled"
                role="button">{{lang('submit')}}<span></span><span></span><span></span><span></span><b
                  aria-hidden="true">{{lang('submit')}}</b><b aria-hidden="true">{{lang('submit')}}</b><b aria-hidden="true">{{lang('submit')}}</b><b
                  aria-hidden="true">submit</b></button>
            </div>
          </div>
          <div class="aj_loader ">
                <div class="inner_loader">
                <div class="c_loader"></div>
                </div>
            </div>
          {!! Form::close() !!}
      </div>
    </div>
    <button type="button" data-fancybox-close="" class="fancybox-button fancybox-close-small" title="Close"><svg
        xmlns="http://www.w3.org/2000/svg" version="1" viewBox="0 0 24 24">
        <path d="M13 12l5-5-1-1-5 5-5-5-1 1 5 5-5 5 1 1 5-5 5 5 1-1z"></path>
      </svg></button>
  </div>
</main>
@stop

@section('scripts')
@parent

<script type="text/javascript" src="{{ asset('assets/frontend/swal/sweetalert2.all.min.js') }}"></script>
@include('frontend.scripts.uploader_script')
@include('frontend.partials.jquery_custom_validators')
<script src="https://maps.googleapis.com/maps/api/js?key={{$mapkey}}&callback=initMap" async
  defer></script>
@include('frontend.home.contact_page_script')
@include('frontend.scripts.datepicker')

<script>
$( document ).ready(function() {
            $('#contact-request  [name=g-recaptcha-response]').addClass('contactRequest');
        });
  $(function () {
    $(function () {
        $('.input-field select').formSelect();
      })
    $("[data-fancybox-modal-pop]").fancybox({
      modal: true,
      beforeLoad:function(instance, slide){
          $('#form_title').text('');
          $('#career_id').text('');
          var obj =slide.opts.$orig;
          var title =obj.data('title');
          var slug =obj.data('slug');
          $('#form_title').text(title);
          $('#department').val(slug);
          $('.input-field select').formSelect()
          
      },
    });
    $('[data-location]').on('click', function (e) {
      e.preventDefault();
      var this_t = $(this).data('location'),
        lat = $(this).data('lat'),
        lng = $(this).data('lng');


      $('[data-target]').removeClass('active_');
      $('[data-target="' + this_t + '"]').addClass('active_');

      $('[data-location]').removeClass('active_');
      $(this).addClass('active_');

      // map center setting
      if ($(window).width() > 767) {
        map.panTo(new google.maps.LatLng((lat + .002), (lng + .01)));
      } else {
        map.panTo(new google.maps.LatLng(lat, lng));
      }
    });
    // Init first click
    setTimeout(function () {
      $('.location_wrap li:first-child .dir-btn').trigger('click');
    }, 50);
  })
  var activeForm = null;
   
    $.validator.addMethod('wordCount', function(value, element, params){
  // var typedWords = jQuery.trim(value).split(' ').length;
  var typedWords = 0;
  value = jQuery.trim(value);
  value = value.replace('.',' ');
  value = value.replace('-',' ');
  value = value.replace('_',' ');
  value = value.replace('\\n',' ');
  value = value.replace('\\r',' ');
  var arr = value.split(' ');
    $(arr).each(function(i,v){
    if(v){
      typedWords++;
    }
  });
 
  return value == '' || (typedWords >= params[0] && typedWords <= params[1]);
}, $.validator.format('{{lang('please_write')}} {0} to {1} {{lang('words')}}.'));    
$('#phone_number').mask("000000000000000");    
$('#contact-request').validate({
			errorPlacement: function(error, element) {	
			error.appendTo(element.parent());
			},
			ignore:{},
			rules :{
				 'g-recaptcha-response': {
                    required: true,
                },
				
			  'full_name':{
					required:true,
					alphanumeric:true,
				},
				'user_email':{
					required:true,			
					myEmail:true,	
				},
				'phone_number':{
					required:true,
					minlength: 9
				},
				'department':{
					required:true,
				},
				'message':{
					required:true,
          alphanumericMessageBox:true,
					wordCount:[1, 250]
				},
        // 'commercial_messages': {
        //     required: true,
        // },
        'accept_privacy_policy': {
            required: true,
        },        
        'enquire_type':{
          required:true,
        },        
        /*
        'how_to_reach_you':{
					required:true,
				},
        'date':{
					required:true,
				},
        'time':{
					required:true,
				},
			  */ 
			},
			messages:{
				'full_name':{
					required:"{{ trans('messages.field_required') }}",
					alphanumeric:"{{ trans('messages.no_spcl_char') }}",
				},
				'last_name':{
					required:"{{ trans('messages.field_required') }}",
					alphanumeric:"{{ trans('messages.no_spcl_char') }}",
				},
				
				'user_email':{
					required:"{{ trans('messages.field_required') }}",
					myEmail:"{{ trans('messages.invalid_email') }}",
					email:"{{ trans('messages.invalid_email') }}",
				},
				'phone_number':{
					required:"{{ trans('messages.field_required') }}",
					minlength:"{{ trans('messages.no_min_length') }}",
				},
        'department':{
					required:"{{ trans('messages.field_required') }}",
				},
				'message':{
					required:"{{ trans('messages.field_required') }}",
				},
        // 'commercial_messages': {
        //     required: "{{ trans('messages.field_required') }}",
        // },
        'accept_privacy_policy': {
            required: "{{ trans('messages.field_required') }}",
        },        
        'enquire_type':{
          required:"{{ trans('messages.field_required') }}",
        },        
        /*
        'how_to_reach_you':{
					required:"{{ trans('messages.field_required') }}",
				},
        'date':{
					required:"{{ trans('messages.field_required') }}",
				},
        'time':{
					required:"{{ trans('messages.field_required') }}",
				},
        */
			},
			submitHandler:function(form){
				
				$('.aj_loader').addClass('show');
				activeForm = form;
				$('.userMessage').html('').hide();
				if (grecaptcha.getResponse) {
				
					activeForm = null;
					var $form = $(form);
					dataToSend = $(form).serializeArray();
					// dataToSend.push({ name: "g-recaptcha-response", value: grecaptcha.getResponse() });
			
					sendAjax($form.attr('action'),'POST',dataToSend,function(response){
						$('.aj_loader').removeClass('show');
        
						
						if(response.status==true)
						{
							$form[0].reset();
                            $.fancybox.close();
							$('.uploadFileName').html('');
							$('.uploadPercentage').html('');
							$('.uploadProgressWrapper').html('');
                  swal.fire({
                      title: response.warning,
                      html: response.userMessages,
                      confirmButtonText: "{{lang('ok')}}",
                      confirmButtonColor:'#000',
                      closeOnConfirm: false
                  });
						}else{
                $.each(response.formMessages, function( index, value ){
                        $('#'+index+'-error').remove();
                        $('#'+index).parent().prepend('<label id="'+index+'-error" class="error er-label" for="'+index+'">'+value+'</label>');
                        $('#'+index).addClass('error');
                    });
                    if(response.userMessages){
                      swal.fire({
                          title: response.warning,
                          html: response.userMessages,
                          confirmButtonText: "{{lang('ok')}}",
                          confirmButtonColor:'#000',
                          closeOnConfirm: false
                      });
                    }

            }
              
					});
					grecaptchaExecute('contactRequest');
				}
				else{
					 grecaptchaExecute('contactRequest');
				}
				return false;
			}
		});  
</script>

@stop