@extends('frontend.layouts.master')
@section('styles')
@parent

{!! RecaptchaV3::initJs() !!}
@stop
@section('content')
@include('frontend.layouts.social')
<main>
  <section class="inner_banner">
    <div class="banner_inner">
      <!-- Swiper -->
      @if(!empty($projectData->pageBanner) && $projectData->pageBanner->isNotEmpty())
      <div class="swiper-container ">
        <div class="swiper-wrapper">
          @foreach($projectData->pageBanner as $banner)
          <div class="swiper-slide b_item">
          @if($banner->getData('pm_media_type')=="image")
            <div class="img_box" data-thump="{{PT($banner->getData('pm_file_hash'))}}">
              <picture>
                <source srcset="{{webp($banner->getData('pm_file_hash'))}}" type="image/webp">
                <source srcset="{{PP($banner->getData('pm_file_hash'))}}" type="image{{FT($banner->getData('pm_file_hash'))}}">
                <img src="{{PP($banner->getData('pm_file_hash'))}}" loading="lazy" alt="">
              </picture>
            </div>
            @else
            <div class="img_box youtube_video" data-thump="{{$banner->getVideoImage()}}">
              <div id="debug" style="display: none">
                <a class="bgndVideo" class="player"
                  data-property="{videoURL:'{{$banner->getData('pm_name')}}',containment:'.youtube_video', showControls:false, autoPlay:true, loop:true,  mute:true, startAt:1,ratio:16/9, stopAt:150, opacity:1, addRaster:true, quality:'hd720', optimizeDisplay:true}">
                </a>
              </div>
            </div>
            @endif

          </div>
          @endforeach
        </div>
        <div class="button-next">
          <div class="img_box">
            <div class="img_ main_"></div>
          </div>
          <div class="arrow_box">
          </div>
        </div>
        <div class="button-prev">
          <div class="img_box">
            <div class="img_ main_"></div>
          </div>
          <div class="arrow_box">
          </div>
        </div>
      </div>
      @endif
    </div>


    <div class="container">
      <div class="page_title no_p_b">
        <div class="breadcrumb_wrap">
          <ul>
            <li>
              <a href="{{route('home',$lang)}}" class="link_">
               {{lang('home')}}
              </a>
            </li>
            <li>
              <a href="{{route('projects',$lang)}}" class="link_">
                {{lang('projects')}}
              </a>
            </li>
            <li class="active_">
              <span>{{$projectData->getData('project_title')}}</span>
            </li>
          </ul>
        </div>
        <h1>
          <span>{{$projectData->getData('project_title')}}</span>
        </h1>
        @if(!empty($projectData->getData('project_sub_title')))
        <h5 class="small_title_">
          <span>{{$projectData->getData('project_sub_title')}}</span>
        </h5>
        @endif
      </div>

    </div>


  </section>
  <section class="page-section sticky_menu">
    <div class="container">
      <div class="inner_menu_wrap">
        <ul>
          <li>
            <a class="dir-btn " href="#about_intro" data-scroll-to="#about_intro">{{lang('project_about')}}
              <span></span><span></span><span></span><span></span>
              <b aria-hidden="true">{{lang('project_about')}}</b>
              <b aria-hidden="true">{{lang('project_about')}}</b>
              <b aria-hidden="true">{{lang('project_about')}}</b>
              <b aria-hidden="true">{{lang('project_about')}}</b>
            </a>
          </li>
          @if(!empty($projectData->nearby) && $projectData->nearby->isNotEmpty())
          <li>
            <a class="dir-btn " href="#location" data-scroll-to="#location">{{lang('location')}}
              <span></span><span></span><span></span><span></span>
              <b aria-hidden="true">{{lang('location')}}</b>
              <b aria-hidden="true">{{lang('location')}}</b>
              <b aria-hidden="true">{{lang('location')}}</b>
              <b aria-hidden="true">{{lang('location')}}</b>
            </a>
          </li>
          @endif
          @if($projectData->brochureAvailable())
          <li>
            <a class="dir-btn " href="#brochures" data-scroll-to="#brochures">{{lang('project_material')}}
              <span></span><span></span><span></span><span></span>
              <b aria-hidden="true">{{lang('project_material')}}</b>
              <b aria-hidden="true">{{lang('project_material')}}</b>
              <b aria-hidden="true">{{lang('project_material')}}</b>
              <b aria-hidden="true">{{lang('project_material')}}</b>
            </a>
          </li>
          @endif
          @if($projectData->exteriorGallery->isNotEmpty() || $projectData->interiorGallery->isNotEmpty())
          <li>
            <a class="dir-btn " href="#interior_and_exterior" data-scroll-to="#interior_and_exterior">{{lang('interior_and_exterior')}}
              <span></span><span></span><span></span><span></span>
              <b aria-hidden="true">{{lang('interior_and_exterior')}}</b>
              <b aria-hidden="true">{{lang('interior_and_exterior')}}</b>
              <b aria-hidden="true">{{lang('interior_and_exterior')}}</b>
              <b aria-hidden="true">{{lang('interior_and_exterior')}}</b>
            </a>
          </li>
          @endif
          @if(!empty($projectData->RoomType) && $projectData->RoomType->isNotEmpty() )
          <li>
            <a class="dir-btn " href="#unit_types" data-scroll-to="#unit_types">{{lang('unit_types')}}
              <span></span><span></span><span></span><span></span>
              <b aria-hidden="true">{{lang('unit_types')}}</b>
              <b aria-hidden="true">{{lang('unit_types')}}</b>
              <b aria-hidden="true">{{lang('unit_types')}}</b>
              <b aria-hidden="true">{{lang('unit_types')}}</b>
            </a>
          </li>
          @endif
          @if(!empty($projectData->virtualTour) && $projectData->virtualTour->isNotEmpty())
          <li>
            <a class="dir-btn " href="#virtual_tour" data-scroll-to="#virtual_tour">{{lang('virtual_tour')}}
              <span></span><span></span><span></span><span></span>
              <b aria-hidden="true">{{lang('virtual_tour')}}</b>
              <b aria-hidden="true">{{lang('virtual_tour')}}</b>
              <b aria-hidden="true">{{lang('virtual_tour')}}</b>
              <b aria-hidden="true">{{lang('virtual_tour')}}</b>
            </a>
          </li>
          @endif
          @if(!empty($projectData->constructionUpdates) && $projectData->constructionUpdates->isNotEmpty())
          <li>
            <a class="dir-btn " href="#project_updates" data-scroll-to="#project_updates">{{lang('projects_updates')}}
              <span></span><span></span><span></span><span></span>
              <b aria-hidden="true">{{lang('projects_updates')}}</b>
              <b aria-hidden="true">{{lang('projects_updates')}}</b>
              <b aria-hidden="true">{{lang('projects_updates')}}</b>
              <b aria-hidden="true">{{lang('projects_updates')}}</b>
            </a>
          </li>
          @endif
          <li>
            <a class="dir-btn " href="#enquire" data-scroll-to="#enquire">{{lang('project_register')}}
              <span></span><span></span><span></span><span></span>
              <b aria-hidden="true">{{lang('project_register')}}</b>
              <b aria-hidden="true">{{lang('project_register')}}</b>
              <b aria-hidden="true">{{lang('project_register')}}</b>
              <b aria-hidden="true">{{lang('project_register')}}</b>
            </a>
          </li>
        </ul>
      </div>
    </div>

  </section>
  <section class="page-section">

    <div class="container lm_width " id="about_intro">
      <div class="about-row">
          <div class="about-box">
		        @if(!empty($projectData->getData('project_logo')))
                <div class="logo_box p_img">
                          <picture>
                           <source srcset="{{webp($projectData->getData('project_logo'))}}" type="image/webp">
							<source srcset="{{PP($projectData->getData('project_logo'))}}" type="image{{FT($projectData->getData('project_logo'))}}">
							<img src="{{PP($projectData->getData('project_logo'))}}" loading="lazy" alt="{{$projectData->getData('project_title')}}">
                          </picture>
                        </div>
						@endif
            </div>
            <div class="text_box">
                {!!$projectData->getData('project_about')!!}
            </div>
      </div>
    </div>
  </section>
  <section class="page-section location_section" id="location">
    <div class="map_large_grid">
      <div class="map_box" id="map"></div>
    </div>
    <div class="container ">
      <h3 class="section-title">
        <span>{{lang('location')}}
        </span>
      </h3>
    </div>
    @if(!empty($projectData->nearby) && $projectData->nearby->isNotEmpty())
    <div class="location_key_wrap">
      <div class="int_">
        <h3>{{lang('get_closer_to')}}</h3>
        <h5>{{lang('the_citys_attractions_at_your_doorstep')}}</h5>
      </div>

      <div class="key_wrap">
        <!-- Swiper -->
        <div class="swiper-container ">
          <div class="swiper-wrapper">
            @foreach($projectData->nearby as $nearby)
            <div class="swiper-slide k_item">
              <div class="inner_ ">
                <div class="top_box">
                  <div class="icon_box">
                    <img src="{{PP($nearby->getData('nt_image'))}}" loading="lazy" alt="">
                  </div>
                  <div class="number_">
                    <span>{{$nearby->getData('nt_distance')}}</span>
                    <small>{{$nearby->getData('nt_distance_unit')}}</small>
                  </div>
                </div>
                <div class="title_">{{$nearby->getData('nt_title')}}</div>
              </div>
            </div>
            @endforeach
          </div>
        </div>
        <div class="nav_box  box_center_">
          <div class="nav_ left_"></div>
          <div class="nav_ right_"></div>
        </div>
      </div>
    </div>
    @endif
  </section>
  @if($projectData->brochureAvailable())
  <section class="page-section" id="brochures">
    <div class="container">
      <h3 class="section-title">
        <span>{{lang('project_material')}}</span>
      </h3>

      <div class="amenities_wrap">

        @if(!empty($projectData->getData('project_brochure')))
        <a class="a_box" href="{{route('pdf',[$projectData->getData('project_slug'),'brochure'])}}" target="_blank">
          <div class="icon_box">
            <img src="{{getFrontendAsset('images/reportage_graphics_brochure2.svg')}}" loading="lazy" alt="" />
          </div>
          <div class="name_">
          {{lang('brochure')}}
          </div>
       </a>
       @elseif(!empty($projectData->getData('project_brochure_url')))
        <a class="a_box"  href="{{ $projectData->getData('project_brochure_url') }}" target="_blank">
          <div class="icon_box">
            <img src="{{getFrontendAsset('images/reportage_graphics_brochure2.svg')}}" loading="lazy" alt="" />
          </div>
          <div class="name_">
             {{lang('brochure')}}
          </div>
        </a>
        @endif

       @if(!empty($projectData->getData('project_factsheet')))
        <a class="a_box"  href="{{route('pdf',[$projectData->getData('project_slug'),'factsheet'])}}" target="_blank">
          <div class="icon_box">
            <img src="{{getFrontendAsset('images/reportage_graphics_factsheet.svg')}}" loading="lazy" alt="" />
          </div>
          <div class="name_">
            {{lang('factsheet')}}
          </div>
        </a>
        @elseif(!empty($projectData->getData('project_factsheet_url')))
        <a class="a_box"  href="{{ $projectData->getData('project_factsheet_url') }}" target="_blank">
          <div class="icon_box">
            <img src="{{getFrontendAsset('images/reportage_graphics_factsheet.svg')}}" loading="lazy" alt="" />
          </div>
          <div class="name_">
             {{lang('factsheet')}}
          </div>
        </a>
        @endif

        @if(!empty($projectData->getData('project_unit_type')))
        <a class="a_box"  href="{{route('pdf',[$projectData->getData('project_slug'),'unit-type'])}}" target="_blank">
          <div class="icon_box">
            <img src="{{getFrontendAsset('images/reportage_graphics_unit_type.svg')}}" loading="lazy" alt="" />
          </div>
          <div class="name_">
              {{lang('unit_type_sheet')}}
          </div>
       </a>
        @elseif(!empty($projectData->getData('project_unit_type_url')))
        <a class="a_box"  href="{{ $projectData->getData('project_unit_type_url') }}" target="_blank">
          <div class="icon_box">
            <img src="{{getFrontendAsset('images/reportage_graphics_unit_type.svg')}}" loading="lazy" alt="" />
          </div>
          <div class="name_">
             {{lang('unit_type_sheet')}}
          </div>
        </a>
        @endif


        @if(!empty($projectData->getData('project_trifold')))
        <a class="a_box"  href="{{route('pdf',[$projectData->getData('project_slug'),'trifold'])}}" target="_blank">
          <div class="icon_box">
            <img src="{{getFrontendAsset('images/reportage_graphics_trifold.svg')}}" loading="lazy" alt="" />
          </div>
          <div class="name_">
             {{lang('trifold')}}
          </div>
        </a>
        @elseif(!empty($projectData->getData('project_trifold_url')))
        <a class="a_box"  href="{{ $projectData->getData('project_trifold_url') }}" target="_blank">
          <div class="icon_box">
            <img src="{{getFrontendAsset('images/reportage_graphics_trifold.svg')}}" loading="lazy" alt="" />
          </div>
          <div class="name_">
             {{lang('trifold')}}
          </div>
        </a>
        @endif


        @if(!empty($projectData->getData('project_floor_plane')))
        <a class="a_box"  href="{{route('pdf',[$projectData->getData('project_slug'),'floor-plane'])}}" target="_blank">
          <div class="icon_box">
            <img src="{{getFrontendAsset('images/reportage_graphics_floor_plan.svg')}}" loading="lazy" alt="" />
          </div>
          <div class="name_">
             {{lang('floor_plane')}}
          </div>
        </a>
        @elseif(!empty($projectData->getData('project_floor_plane_url')))
        <a class="a_box"  href="{{ $projectData->getData('project_floor_plane_url') }}" target="_blank">
          <div class="icon_box">
            <img src="{{getFrontendAsset('images/reportage_graphics_floor_plan.svg')}}" loading="lazy" alt="" />
          </div>
          <div class="name_">
             {{lang('floor_plane')}}
          </div>
        </a>
        @endif

        @if(!empty($projectData->getData('project_master_plan')))
        <a class="a_box"  href="{{route('pdf',[$projectData->getData('project_slug'),'master-plan'])}}" target="_blank">
          <div class="icon_box">
            <img src="{{getFrontendAsset('images/reportage_graphics_master_plan.svg')}}" loading="lazy" alt="" />
          </div>
          <div class="name_">
             {{lang('master_plane')}}
          </div>
        </a>
        @elseif(!empty($projectData->getData('project_master_plan_url')))
        <a class="a_box"  href="{{ $projectData->getData('project_master_plan_url') }}" target="_blank">
          <div class="icon_box">
            <img src="{{getFrontendAsset('images/reportage_graphics_master_plan.svg')}}" loading="lazy" alt="" />
          </div>
          <div class="name_">
             {{lang('master_plane')}}
          </div>
        </a>
        @endif

        @if(!empty($projectData->getData('project_master_vrtour')))
        <a class="a_box"  href="{{route('pdf',[$projectData->getData('project_slug'),'master-vrtour'])}}" target="_blank">
          <div class="icon_box">
            <img src="{{getFrontendAsset('images/reportage_graphics_master_vrtour.svg')}}" loading="lazy" alt="" />
          </div>
          <div class="name_">
             {{lang('master_vrtour')}}
          </div>
        </a>
        @elseif(!empty($projectData->getData('project_master_vrtour_url')))
        <a class="a_box"  href="{{ $projectData->getData('project_master_vrtour_url') }}" target="_blank">
          <div class="icon_box">
            <img src="{{getFrontendAsset('images/reportage_graphics_master_vrtour.svg')}}" loading="lazy" alt="" />
          </div>
          <div class="name_">
             {{lang('master_vrtour')}}
          </div>
        </a>
        @endif                

      </div>
    </div>
  </section>
  @endif
  <section class="page-section" id="interior_and_exterior">
    <div class="container ">
      <div class="grid_2_wrap">
        <div class="g_box interior_and_exterior">
          <div class="normal_slider_box v1_">
            <!-- Swiper -->
            @if(!empty($projectData->exteriorGallery) && $projectData->exteriorGallery->isNotEmpty())
            <div class="swiper-container ">
              <div class="swiper-wrapper">
                @foreach($projectData->exteriorGallery as $gallery)
                <div class="swiper-slide g_item">
                  <a href="{{PPO($gallery->getData('pm_file_hash'))}}" class="inner_ " data-fancybox="exteriorGallery">
                    <div class="img_box p_img">
                      <picture>
                        <source srcset="{{webp($gallery->getData('pm_file_hash'))}}" type="image/webp">
                        <source srcset="{{PP($gallery->getData('pm_file_hash'))}}" type="image/{{FT($gallery->getData('pm_file_hash'))}}">
                        <img src="{{PP($gallery->getData('pm_file_hash'))}}" loading="lazy" alt="">
                      </picture>
                    </div>
                  </a>
                </div>
                @endforeach
              </div>
            </div>

            <div class="nav_box  box_center_">
              <div class="nav_ left_"></div>
              <div class="nav_ right_"></div>
            </div>
            
            <h3 class="section-title">
              <span> {{lang('exterior')}}</span>
            </h3>
            @endif
          </div>

          <div class="text_box">
            {!!$projectData->getData('project_exterior')!!}
          </div>
        </div>
        <div class="g_box interior_and_exterior">
          <div class="normal_slider_box v1_">
            <!-- Swiper -->
            @if(!empty($projectData->interiorGallery) && $projectData->interiorGallery->isNotEmpty())
            <div class="swiper-container ">
              <div class="swiper-wrapper">
                @foreach($projectData->interiorGallery as $gallery)
                <div class="swiper-slide g_item">
                  <a href="{{PPO($gallery->getData('pm_file_hash'))}}" class="inner_ " data-fancybox="interiorGallery">
                    <div class="img_box p_img">
                      <picture>
                        <source srcset="{{webp($gallery->getData('pm_file_hash'))}}" type="image/webp">
                        <source srcset="{{PP($gallery->getData('pm_file_hash'))}}" type="image/{{FT($gallery->getData('pm_file_hash'))}}">
                        <img src="{{PP($gallery->getData('pm_file_hash'))}}" loading="lazy" alt="">
                      </picture>
                    </div>
                  </a>
                </div>
                @endforeach
              </div>
            </div>
            <div class="nav_box  box_center_">
              <div class="nav_ left_"></div>
              <div class="nav_ right_"></div>
            </div>
            <h3 class="section-title">
              <span>{{lang('interior')}}</span>
            </h3>
            @endif
          </div>

          <div class="text_box">
            {!!$projectData->getData('project_interior')!!}
          </div>
        </div>
      </div>
    </div>

    <div class="text_marc_box p_relative">
        @include('frontend.partials.marquee')
    </div>
    @if(!empty($projectData->projectAmenities) && $projectData->projectAmenities->isNotEmpty())
    <div class="container">
      <h3 class="section-title">
        <span>{{lang('amenities')}}</span>
      </h3>

      <div class="amenities_wrap">
        @foreach($projectData->projectAmenities as $amenity)
        <div class="a_box">
          <div class="icon_box">
            <img src="{{PP($amenity->getData('amenities_image'))}}" loading="lazy" alt="" />
          </div>
          <div class="name_">
            {{$amenity->getData('post_title')}}
          </div>
        </div>
        @endforeach
      </div>
    </div>
    @endif
  </section>
  @if(!empty($projectData->RoomType) && $projectData->RoomType->isNotEmpty() )
  <section class="page-section" id="unit_types">
    <div class="container  ">
      <div class="title_box  w_tool padding_top">
        <div class="t_box">
          <h3 class="section-title">
            <span>{{lang('unit_types')}}</span>
          </h3>
        </div>
        <div class="tool_wrap style_2" id="unit-types">

        </div>
      </div>
    </div>

    <div class="unit_types_wrap">
      <div class="slider_nav">
        <ul>
          @foreach($projectData->RoomType as $key=>$room)

            <li>
              <a class="dir-btn {{($loop->first)?'active_':''}}" href="#"  data-unit-type="{{$room->getData('br_id')}}">{{$room->getData('br_title')}}
                <span></span><span></span><span></span><span></span>
                <b aria-hidden="true">{{$room->getData('br_title')}}</b>
                <b aria-hidden="true">{{$room->getData('br_title')}}</b>
                <b aria-hidden="true">{{$room->getData('br_title')}}</b>
                <b aria-hidden="true">{{$room->getData('br_title')}}</b>
              </a>
            </li>

          @endforeach
        </ul>
      </div>

      <div class="normal_slider_box" id="unit-type-slider">

      </div>
    </div>

  </section>
  @endif
  @if(!empty($projectData->virtualTour) && $projectData->virtualTour->isNotEmpty())
  <section class="page-section" id="virtual_tour">
    <div class="container-fluid no_pad ">
      <div class="title_box  v_center">
        <h3 class="section-title">
          <span>{{lang('virtual_tour')}}</span>
        </h3>

        <div class="tool_wrap style_2">
          <ul>
            @foreach($projectData->virtualTour as $key=>$tour)
            <li>
              <a href="#" class="link_ " data-v-slide="{{$key}}" data-v-tid="tour_{{$key}}" data-v-url="{{$tour->getData('vl_link')}}">
                <span>{{$tour->getData('vl_title')}}</span>
              </a>
            </li>
            @endforeach
          </ul>
        </div>
      </div>

      <div class="virtual_tour_wrap">
        <div class="main_img_box">
          <div class="swiper-container ">
            <div class="swiper-wrapper">
              @foreach($projectData->virtualTour as $key=>$tour)
              <div class="swiper-slide image_item">
                <div class="img_box ">
                  <svg viewBox="0 0 1920 883.112" preserveAspectRatio="none">
                    <defs>
                      <clipPath id="a">
                        <path
                          d="M2034,2016.112s-579.979-93.746-960-89.336c-378.581,4.394-960,89.336-960,89.336V1133s547.735,112.769,960,112.769c415.195,0,960-112.769,960-112.769Z"
                          transform="translate(-114 1945)" />
                      </clipPath>

                    </defs>
                    <g transform="translate(0 -3078)" opacity="0.44" clip-path="url(#a)">
                      <image transform="translate(0 2967)" xlink:href="{{PP($tour->getData('vl_image'))}}"
                        style="mix-blend-mode:luminosity;isolation:isolate" />

                    </g>
                  </svg>
                </div>

               <div class="video_item">
                   <button   class="video_close fancybox-button fancybox-button--close" title="Close"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 10.6L6.6 5.2 5.2 6.6l5.4 5.4-5.4 5.4 1.4 1.4 5.4-5.4 5.4 5.4 1.4-1.4-5.4-5.4 5.4-5.4-1.4-1.4-5.4 5.4z"></path></svg></button>
                  <iframe id="tour_{{$key}}"  frameborder="0" src="{{ ($key==0)?$tour->getData('vl_link'):''}}" ></iframe> </div>
              </div>
              @endforeach
            </div>

          </div>
        </div>
        <div class="thu_img_box">
          <div class="swiper-container ">
            <div class="swiper-wrapper">
            @foreach($projectData->virtualTour as $key=>$tour)
              <div class="swiper-slide image_item">
              <!--  <a href="{{$tour->getData('vl_link')}}" data-type="iframe" data-fancybox="tour" class="img_box p_img"> -->
                <a   class="img_box p_img">
                  <picture>
                    <source srcset="{{webp($tour->getData('vl_image'))}}" type="image/webp">
                    <source srcset="{{PP($tour->getData('vl_image'))}}" type="image/{{FT($tour->getData('vl_image'))}}">
                    <img src="{{PP($tour->getData('vl_image'))}}" loading="lazy" alt="">
                  </picture>
                </a>
              </div>
              @endforeach
            </div>
          </div>

          <div class="svg_over_lay">
            <svg x="0px" y="0px" viewBox="0 0 516 522.243" enable-background="new 0 0 516 522.243" xml:space="preserve">
              <g class="circle_ c_1">
                <path fill="none" stroke="#DADADA" stroke-miterlimit="10" d="M258,509.538c-39.164,0-58.988-48.722-68.339-72.76
		c-21.878-56.235-28.307-116.881-28.307-175.657s6.429-119.422,28.307-175.657c9.352-24.037,29.175-72.76,68.339-72.76
		s58.988,48.722,68.339,72.76c21.878,56.235,28.307,116.881,28.307,175.657s-6.429,119.422-28.307,175.657
		C316.988,460.816,297.164,509.538,258,509.538z" id="wire" />
                <circle fill="#FAC25A" cx="0" cy="0" r="3.5">
                  <animateMotion dur="7.6s" repeatCount="indefinite">
                    <mpath xlink:href="#wire"></mpath>
                  </animateMotion>
                </circle>
              </g>
              <g class="circle_ c_2">
                <path fill="none" stroke="#DADADA" stroke-miterlimit="10" d="M506.417,261.121c0,39.164-48.722,58.988-72.76,68.339
		C377.422,351.339,316.776,357.768,258,357.768s-119.422-6.429-175.657-28.307c-24.037-9.352-72.76-29.175-72.76-68.339
		s48.722-58.988,72.76-68.339c56.235-21.878,116.881-28.307,175.657-28.307s119.422,6.429,175.657,28.307
		C457.694,202.134,506.417,221.958,506.417,261.121z" id="wire_2" />
                <circle fill="#FAC25A" cx="0" cy="0" r="3.5">
                  <animateMotion dur="11.6s" repeatCount="indefinite">
                    <mpath xlink:href="#wire_2"></mpath>
                  </animateMotion>
                </circle>
              </g>
            </svg>


            <div class="ov_title">
              {{lang('discover_our_virtual_tours')}}
            </div>
          </div>
        </div>
      </div>

    </div>
  </section>
  @endif

  <section class="page-section" id="project_updates">
    <div class="container ">
      <div class="grid_2_wrap">
        @if(!empty(!empty($projectData->getData('project_video'))))
        <div class="g_box project_updates">
          <h3 class="section-title">
            <span>{{lang('project_video')}}</span>
          </h3>
          <div class="normal_slider_box">
            <!-- Swiper -->
            <div class="swiper-container ">
              <div class="swiper-wrapper">
                <div class="swiper-slide g_item">
                  <a href="{{youtubeEmbedUrlFromUrl($projectData->getData('project_video'))}}" class="inner_ " data-fancybox="gl1">
                    <div class="img_box p_img small_pad">
                      <picture>
                        <source srcset="{{webp($projectData->getData('project_image'))}}" type="image/webp">
                        <source srcset="{{PP($projectData->getData('project_image'))}}" type="image/{{FT($projectData->getData('project_image'))}}">
                        <img src="{{PP($projectData->getData('project_image'))}}" loading="lazy" alt="">
                      </picture>
                      <div class="icons_box">
                        <svg viewBox="0 0 155 155">
                          <g transform="translate(-471 -6337)">
                            <path
                              d="M20.03,6.055a4,4,0,0,1,6.941,0l16.6,28.956A4,4,0,0,1,40.1,41H6.9a4,4,0,0,1-3.47-5.989Z"
                              transform="translate(578 6389) rotate(90)" fill="#fff" />
                            <g transform="translate(471 6337)" fill="none" stroke="#fff" stroke-width="2">
                              <circle cx="77.5" cy="77.5" r="77.5" stroke="none" />
                              <circle cx="77.5" cy="77.5" r="76.5" fill="none" />
                            </g>
                          </g>
                        </svg>
                      </div>
                    </div>
                  </a>
                </div>


              </div>
            </div>




          </div>
        </div>
        @endif
        @if(!empty($projectData->constructionUpdates) && $projectData->constructionUpdates->isNotEmpty())
        <div class="g_box project_updates">
          <h3 class="section-title">
            <span>{{lang('construction_update')}}</span>
          </h3>
          <div class="normal_slider_box">
            <!-- Swiper -->
            <div class="swiper-container ">
              <div class="swiper-wrapper">
                  @foreach($projectData->constructionUpdates as $prUpdates)
                  <div class="swiper-slide g_item ">
                  <a href="{{PPO($prUpdates->getData('construction_update_image'))}}" class="inner_ " data-fancybox="gl2">
                    <div class="img_box p_img small_pad">
                      <picture>
                        <source srcset="{{webp($prUpdates->getData('construction_update_image'))}}" type="image/webp">
                        <source srcset="{{pp($prUpdates->getData('construction_update_image'))}}" type="image/{{FT($prUpdates->getData('construction_update_image'))}}">
                        <img src="{{PP($prUpdates->getData('construction_update_image'))}}" loading="lazy" alt="">
                      </picture>
                      <div class="completed_box">
                        <div class="per_">
                          {{$prUpdates->getData('work_percentage')}}%
                        </div>
                        <div class="text_">
                        {{$prUpdates->getData('post_title')}}
                        </div>
                        <div class="circle_ complete" data-circle="{{$prUpdates->getData('work_percentage')}}">
                          <svg viewBox="-1 -1 34 34">

                            <circle cx="16" cy="16" r="15.9155" class="progress-bar__progress
                  js-progress-bar" />
                          </svg>
                        </div>
                      </div>
                    </div>
                    <div class="date_">
                     {{printDateMYLang($prUpdates->getData('update_date'))}}
                    </div>
                  </a>
                  </div>
                  @endforeach
              </div>
            </div>
            <div class="nav_tool abs_">
              <div class="swiper-pagination"></div>
              {{-- <a class="dir-btn" href="{{PPO($prUpdates->getData('construction_update_image'))}}" data-fancybox="images-preview"
                data-options='{"caption" : " July 2021" }' rel="gallery"> --}}
              <a class="dir-btn" href="{{route('construction-updates-details', [$lang, 'slug' => $projectData->getSlug()])}}" rel="gallery">
                {{lang('view_all')}}
                <span></span><span></span><span></span><span></span>
                <b aria-hidden="true">{{lang('view_all')}}</b>
                <b aria-hidden="true">{{lang('view_all')}}</b>
                <b aria-hidden="true">{{lang('view_all')}}</b>
                <b aria-hidden="true">{{lang('view_all')}}</b>
              </a>
            </div>
            <div style="display: none;">
            @if(!empty($prUpdates->media))
              @foreach($prUpdates->media as $gallery)
               @if($gallery->getData('pm_media_type')=="image")
                  <a href="{{$gallery->getImage()}}" data-fancybox="images-preview"
                data-options='{"caption" :  {{printDateMYLang($prUpdates->getData("update_date"))}}  }' rel="gallery"></a>
                @else
                <a href="{{ $gallery->getVideoUrl()}}" data-fancybox="images-preview"
                data-options='{"caption" :  {{printDateMYLang($prUpdates->getData("update_date"))}}  }' rel="gallery"></a>
                @endif
              @endforeach
            @endif
            </div>
          </div>
        </div>
        @endif
      </div>

      </div>
    </div>
  </section>

  {{-- <section class="page-section" id="">
    <div class="container ">

      <div class="contact_info_wrap">
        <h2>{{lang('ready_for_a_new_living')}}<strong>{{lang('project_title_experience')}}{{lang('question_symbol')}}</strong></h2>
        <h4>{{lang('register_your_interest_now_for_more_information')}}</h4>

        <div class="more_wrap">
          <a class="dir-btn" href="#pop1" data-fancybox-modal>{{lang('contact_us')}}
            <span></span><span></span><span></span><span></span>
            <b aria-hidden="true">{{lang('contact_us')}}</b>
            <b aria-hidden="true">{{lang('contact_us')}}</b>
            <b aria-hidden="true">{{lang('contact_us')}}</b>
            <b aria-hidden="true">{{lang('contact_us')}}</b>
          </a>
        </div>
      </div>
    </div>
  </section> --}}

  <section class="page-section spondor_form" id="enquire">
  <div class="container">
    <div class="contact_info_wrap">
      <h2>{{lang('ready_for_a_new_living')}}<strong> {{lang('project_title_experience')}}{{lang('question_symbol')}}</strong></h2>
      <h4>{{lang('register_your_interest_now_for_more_information')}}</h4>

      <div class="from_wrap">
      {{Form::open(array('url'=>route('project-inquiry',[$lang]),'name'=>'project-inquiry','id'=>'project-inquiry','role'=>'form','autocomplete'=>'off') )}}
          <input  name="project_id" value="{{$projectData->getData('project_id')}}" type="hidden">
          <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="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 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('projectInquiry') !!}

              <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>
        {{Form::close()}}
      </div>
      <div class="spnsr_tg">
        <p>{{lang('or_you_can_write_us_to')}} <a href="mailto:info@reportageuae.com">info@reportageuae.com</a></p>
      </div>
    </div>
  </div>
</section>

  <div class="aj_loader ">
      <div class="inner_loader">
      <div class="c_loader"></div>
      </div>
  </div>
</main>

@stop

@section('scripts')
@parent

<script type="text/javascript" src="{{ asset('assets/frontend/dist/scripts/vendor/jquery.mousewheel.min.js') }}" ></script>
<script type="text/javascript" src="{{ asset('assets/frontend/dist/scripts/vendor/wheel-zoom.min.js') }}" ></script>

<script type="text/javascript" >
    $( window ).on("load", function() {
    function zooming(){

        $('.fancybox-image').dragZoom({
        scope: $("body"),
        zoom: 1.2,
        onWheelStart: function() {
        }
        });
    };



 $('[data-fancybox="unt"]').fancybox({

 });

 $('body').on('click' ,'[data-fancybox="unittypes"]',function(e){
  setTimeout(function(){
  zooming();
},200)

 });});



</script>



<!-- <script type="text/javascript" src="https://www.google.com/recaptcha/api.js?hl={{$lang}}" async defer></script> -->
<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')
@include('frontend.scripts.datepicker')
<script src="{{getFrontendAsset('scripts/lib/jquery.mb.YTPlayer.js')}}"></script>

<script src="https://maps.googleapis.com/maps/api/js?key={{$mapkey}}&callback=initMap" async
  defer></script>
<script type="text/javascript">
  // captcha lazy load
  function reCaptchaOnFocus() {
      var head = document.getElementsByTagName('head')[0]
      var script = document.createElement('script')
      script.type = 'text/javascript';
      script.src = 'https://www.google.com/recaptcha/api.js?hl={{$lang}}'
      head.appendChild(script);

      // remove focus to avoid js error:
      document.getElementById('user_email').addEventListener('focus', reCaptchaOnFocus);
    };
    // add initial event listener to the form inputs
    document.getElementById('user_email').addEventListener('focus', reCaptchaOnFocus, false);

  var map;
  var lat= {{$projectData->getData("project_location_lat")}};
  var lng= {{$projectData->getData("project_location_lng")}};
  var mapLink= '{{$projectData->getData("project_map_url")}}';
  var infowindow;
  var latLng = {

    lat: lat,
    lng: lng,
  };
   var styles = [
    {
      "featureType": "all",
      "elementType": "labels",
      "stylers": [
        {
          "visibility": "off"
        }
      ]
    },
    {
      "featureType": "all",
      "elementType": "labels.text.fill",
      "stylers": [
        {
          "saturation": 36
        },
        {
          "color": "#000000"
        },
        {
          "lightness": 40
        }
      ]
    },
    {
      "featureType": "all",
      "elementType": "labels.text.stroke",
      "stylers": [
        {
          "visibility": "on"
        },
        {
          "color": "#000000"
        },
        {
          "lightness": 16
        }
      ]
    },
    {
      "featureType": "all",
      "elementType": "labels.icon",
      "stylers": [
        {
          "visibility": "off"
        }
      ]
    },
    {
      "featureType": "administrative",
      "elementType": "geometry.fill",
      "stylers": [
        {
          "color": "#000000"
        }
      ]
    },
    {
      "featureType": "administrative",
      "elementType": "geometry.stroke",
      "stylers": [
        {
          "color": "#000000"
        },
        {
          "lightness": 17
        },
        {
          "weight": 1.2
        }
      ]
    },
    {
      "featureType": "administrative",
      "elementType": "labels",
      "stylers": [
        {
          "visibility": "off"
        }
      ]
    },
    {
      "featureType": "landscape",
      "elementType": "geometry",
      "stylers": [
        {
          "color": "#2c3339"
        }
      ]
    },
    {
      "featureType": "landscape",
      "elementType": "labels",
      "stylers": [
        {
          "visibility": "off"
        }
      ]
    },
    {
      "featureType": "poi",
      "elementType": "geometry",
      "stylers": [
        {
          "color": "#2c3339"
        }
      ]
    },
    {
      "featureType": "poi",
      "elementType": "labels",
      "stylers": [
        {
          "visibility": "off"
        }
      ]
    },
    {
      "featureType": "poi.medical",
      "elementType": "geometry",
      "stylers": [
        {
          "color": "#2c3339"
        }
      ]
    },
    {
      "featureType": "poi.park",
      "elementType": "geometry",
      "stylers": [
        {
          "color": "#2c3339"
        }
      ]
    },
    {
      "featureType": "poi.school",
      "elementType": "geometry",
      "stylers": [
        {
          "color": "#2c3339"
        }
      ]
    },
    {
      "featureType": "road.highway",
      "elementType": "geometry.fill",
      "stylers": [
        {
          "color": "#46515a"
        },
        {
          "visibility": "on"
        }
      ]
    },
    {
      "featureType": "road.highway",
      "elementType": "geometry.stroke",
      "stylers": [
        {
          "lightness": 29
        },
        {
          "weight": 0.2
        },
        {
          "visibility": "off"
        }
      ]
    },
    {
      "featureType": "road.highway",
      "elementType": "labels",
      "stylers": [
        {
          "visibility": "on"
        }
      ]
    },
    {
      "featureType": "road.arterial",
      "elementType": "geometry",
      "stylers": [
        {
          "color": "#000000"
        },
        {
          "lightness": 18
        },
        {
          "visibility": "off"
        }
      ]
    },
    {
      "featureType": "road.arterial",
      "elementType": "geometry.fill",
      "stylers": [
        {
          "color": "#46515a"
        },
        {
          "visibility": "on"
        }
      ]
    },
    {
      "featureType": "road.arterial",
      "elementType": "labels",
      "stylers": [
        {
          "visibility": "on"
        }
      ]
    },
    {
      "featureType": "road.local",
      "elementType": "geometry",
      "stylers": [
        {
          "color": "#5b6369"
        },
        {
          "lightness": 16
        }
      ]
    },
    {
      "featureType": "road.local",
      "elementType": "geometry.fill",
      "stylers": [
        {
          "color": "#46515a"
        }
      ]
    },
    {
      "featureType": "road.local",
      "elementType": "geometry.stroke",
      "stylers": [
        {
          "visibility": "off"
        }
      ]
    },
    {
      "featureType": "road.local",
      "elementType": "labels",
      "stylers": [
        {
          "visibility": "off"
        }
      ]
    },
    {
      "featureType": "transit",
      "elementType": "geometry",
      "stylers": [
        {
          "color": "#000000"
        },
        {
          "lightness": 19
        }
      ]
    },
    {
      "featureType": "transit",
      "elementType": "labels",
      "stylers": [
        {
          "visibility": "off"
        }
      ]
    },
    {
      "featureType": "water",
      "elementType": "geometry",
      "stylers": [
        {
          "color": "#000000"
        },
        {
          "lightness": 17
        }
      ]
    }
  ];


  function initMap() {
    map = new google.maps.Map(document.getElementById('map'), {
      center: latLng,
      zoom: 14,
      styles: styles,
      disableDefaultUI: true,
      mapTypeControl: false,
      scaleControl: false,
      zoomControl: false,
      draggable :true,
    //  gestureHandling : 'none',
    //  draggableCursor :'default'
    });



    var markers = [];

    if(mapLink)
    {
      var location_link=mapLink;
    }
    else
    {
      var location_link= "http://www.google.com/maps/place/"+lat+","+lng;
    }


    var features = [{
      position: new google.maps.LatLng(lat, lng),
      type: 'default',
      id: "abu_dhabi",
      color: 'p'
    }

    ];

    features.forEach(function (feature) {

      var icons = '{{getFrontendAsset("images/map_pin.png")}}';
      var icons_lg = '{{getFrontendAsset("images/map_pin.png")}}';

      var marker = new google.maps.Marker({
        position: feature.position,
        icon: {
          url: icons
        },
        map: map,
        title: 'I might be here',
        //url: "http://www.google.com/maps/place/"+lat+","+lng,
        url: location_link,
        label: {
          text: feature.id,
          fontSize: "0"
        }


      });
      markers.push(marker);

      //

      var contentString =  "<style>.gm-ui-hover-effect {outline: none;}.gm-style .gm-style-iw-c{ background-color: #fac25a;padding:0} .gm-style-iw-d{margin:12px;overflow:auto !important;}.gm-style .gm-style-iw-t::after {background: linear-gradient(45deg,rgb(250 194 90) 50%,rgba(255,255,255,0) 51%,rgba(255,255,255,0) 100%);}</style><a target='_blank' href='"+location_link+"'><p style='margin-bottom: 5px;'><img width='100px' src='{{PP($projectData->getData('project_logo'))}}'> </P> <p style='color:#000;font-weight: 500;margin-bottom:0'>{{$projectData->getData('project_title')}}</p></a>";
    infowindow = new google.maps.InfoWindow({
      content: contentString
    });
      //

      marker.addListener('click', function () {

        //marker.setIcon(icons.active);
        marker.setIcon(icons_lg);
        marker.getPosition();
        marker.setZIndex(2);

        map.panTo(marker.getPosition());
        window.open(this.url, '_blank');
      //  infowindow.open(map, this);
      });





      marker.addListener('mouseover', function () {


        infowindow.open(map, this);
      });




    });


    google.maps.event.addListenerOnce(map, 'tilesloaded', function () {
      $('.map').addClass('map-loaded');
      // google.maps.event.trigger(markers[0], 'click');
    });

  };
</script>
<script>
  $(function () {
    $('.input-field select').formSelect();
    // top menu sticky
    var off_ = 80
    /*if ($(window).width() <= 1024) {
      off_ = 70
    }*/
    if ($(window).width() > 1024) {
      $(".sticky_menu").stickit({
        top: off_
      });
    }
    // top menu click
    $("[data-scroll-to]").on("click", function (e) {
      e.preventDefault();
      var this_ = $(this),
        target_ = this_.data("scroll-to");


      $("[data-scroll-to]").removeClass('active_');



      if ($(target_).length) {
        $("html, body")
          .stop()
          .animate(
            {
              scrollTop: $(target_).offset().top - 150,
            },
            500,
            function () {
              $(".sticky_menu ul>li").removeClass('active');
              this_.addClass('active_');
            }
          );
        e.preventDefault();
      }
    });

    // scroll menu activation
    var lastId,
      topMenu = $(".sticky_menu"),
      menuItems = topMenu.find("a"),
      scrollItems = menuItems.map(function () {
        var item = $($(this).attr("data-scroll-to"));
        if (item.length) {
          return item;
        }
      });
    var offset = 150;

    $(window).scroll(function () {
      var fromTop = $(this).scrollTop() + offset;
      var cur = scrollItems.map(function () {
        if ($(this).offset().top < fromTop) return this;
      });
      cur = cur[cur.length - 1];
      var id = cur && cur.length ? cur[0].id : "";
      if (lastId !== id) {
        lastId = id;
        $("[data-scroll-to]").removeClass('active_');
        menuItems
          .parent()
          .removeClass("active")
          .end()
          .filter("[data-scroll-to='#" + id + "']")
          .parent()
          .addClass("active");
      }
    });


    // unit type slider



    // About slider
    var about_slider_thu = new Swiper(".virtual_tour_wrap .thu_img_box .swiper-container", {
      spaceBetween: 10,
      slidesPerView: 1,
      effect: "cube",
      grabCursor: true,
      cubeEffect: {
        shadowScale: 0.94,
      },
      watchOverflow:true,
      //freeMode: true,
      watchSlidesVisibility: true,
      watchSlidesProgress: true,

    });
    var about_slider_main = new Swiper(".virtual_tour_wrap .main_img_box .swiper-container", {
      spaceBetween: 10,
      slidesPerView: 1,
      speed: 1500,
      watchOverflow:true,
      effect: "fade",
      fadeEffect: {
        crossFade: true
      },


      thumbs: {
        swiper: about_slider_thu,
      },
    });
    $("[data-v-slide='0']").addClass('active_');

    $('[data-v-slide]').on('click', function (e) {
      e.preventDefault();
      var this_ = $(this)

      $(".virtual_tour_wrap iframe").attr('src', '');

      taget_ = this_.data('v-slide');
      url_ = this_.data('v-url');
      id_ = this_.data('v-tid');

      $('[data-v-slide]').removeClass('active_');
      this_.addClass('active_');

      $("#"+id_).attr('src', url_);
      about_slider_main.slideTo(taget_);
    });

    $('.thu_img_box ').tilt({
      reset: false
    });

    // progress circle
    $('[data-circle]').each(function () {
      var this_ = $(this),
        target_v = this_.data('circle')
      target_ = this_.find('.js-progress-bar');

      var strokeDashOffsetValue = 100 - target_v;

      target_.css("stroke-dashoffset", strokeDashOffsetValue);
    })



    function slider_thumbnail_set() {
      var p_img = $('.banner_inner .swiper-slide-prev [data-thump]').data('thump');
      var n_img = $('.banner_inner .swiper-slide-next [data-thump]').data('thump');

      // set img on next btn
      $('.button-next .img_.main_').css("background-image", "url(" + n_img + ")");

      // set img on pre btn
      $('.button-prev .img_.main_').css("background-image", "url(" + p_img + ")");
    }

    var banner_slider = new Swiper(".banner_inner .swiper-container", {
      loop: false,
      speed: 0,
      effect: 'fade',
      loopAdditionalSlides: 2,
      watchOverflow:true,
      navigation: {
        nextEl: ".banner_inner .button-next",
        prevEl: ".banner_inner .button-prev",
      },
      on: {
        init: function () {
          // Set thumbnail
          setTimeout(function () {
            slider_thumbnail_set();
            setTimeout(function () {
              $('.home-banner .button-next .img_.main_, .home-banner .button-prev .img_.main_').css('visibility', 'visible');
            }, 10);
          }, 200);
        },
      }
    });

    $('.banner_inner .button-next, .banner_inner .button-prev').tilt({
      scale: 1
    });

    banner_slider.on('slideNextTransitionStart', function () {
      $('.banner_inner').addClass('change_');
    });

    banner_slider.on('slidePrevTransitionStart', function () {
      $('.banner_inner').addClass('change_');
    });

    banner_slider.on('transitionEnd', function () {
      // Set thumbnail
      setTimeout(function () {
        slider_thumbnail_set();
        setTimeout(function () {
          $('.banner_inner').removeClass('change_ ');
        }, 10);
      }, 300);
    });

    if ($(window).width() < 767) {
      banner_slider.autoplay.start()
    }

    // location slider
    var news_slider = new Swiper(".key_wrap .swiper-container", {
      slidesPerView: 2,
      spaceBetween: 60,
      watchOverflow:true,
      navigation: {
        nextEl: ".key_wrap .nav_.right_",
        prevEl: ".key_wrap .nav_.left_",
      },
      breakpoints: {
		 250: {
          slidesPerView: 1,
          spaceBetween: 20,
        },
        320: {
          slidesPerView: 1,
          spaceBetween: 20,
        },
        768: {
          slidesPerView: 2,
          spaceBetween: 10,
        },
        980: {
          slidesPerView: 3,
          spaceBetween: 10,
        },
        1025: {
          slidesPerView: 3,
          spaceBetween: 20,
        },
      },
    });
    // normal slider

    var normal_slider = new Swiper('.project_updates.g_box:nth-child(1) .swiper-container', {
      slidesPerView: 1,
      spaceBetween: 0,
      watchOverflow:true,
      loop: false,
      pagination: {
        el: ".project_updates.g_box:nth-child(1) .swiper-pagination",
        clickable: true,
        dynamicBullets :true
      },
      effect: 'fade',
      navigation: {
        nextEl: '.project_updates.g_box:nth-child(1) .nav_.right_',
        prevEl: '.project_updates.g_box:nth-child(1) .nav_.left_',
      },
    })

    var normal_slider2 = new Swiper('.project_updates.g_box:nth-child(2) .swiper-container', {
      slidesPerView: 1,
      spaceBetween: 0,
      loop: false,
      watchOverflow:true,
      pagination: {
        el: ".project_updates.g_box:nth-child(2) .swiper-pagination",
        clickable: true,
        dynamicBullets :true
      },
      effect: 'fade',
      navigation: {
        nextEl: '.project_updates.g_box:nth-child(2) .nav_.right_',
        prevEl: '.project_updates.g_box:nth-child(2) .nav_.left_',
      },
    })


    ///
    var normal_slider = new Swiper('.interior_and_exterior.g_box:nth-child(1) .swiper-container', {
      slidesPerView: 1,
      spaceBetween: 0,
      watchOverflow:true,
      loop: true,
      pagination: {
        el: ".interior_and_exterior.g_box:nth-child(1) .swiper-pagination",
        clickable: true,
        dynamicBullets :true
      },
      effect: 'fade',
      navigation: {
        nextEl: '.interior_and_exterior.g_box:nth-child(1) .nav_.right_',
        prevEl: '.interior_and_exterior.g_box:nth-child(1) .nav_.left_',
      },
    })

    var normal_slider2 = new Swiper('.interior_and_exterior.g_box:nth-child(2) .swiper-container', {
      slidesPerView: 1,
      spaceBetween: 0,
      loop: true,
      watchOverflow:true,
      pagination: {
        el: ".interior_and_exterior.g_box:nth-child(2) .swiper-pagination",
        clickable: true,
        dynamicBullets :true
      },
      effect: 'fade',
      navigation: {
        nextEl: '.interior_and_exterior.g_box:nth-child(2) .nav_.right_',
        prevEl: '.interior_and_exterior.g_box:nth-child(2) .nav_.left_',
      },
    })

    var myPlayer = jQuery(".bgndVideo").YTPlayer({
      //  remember_last_time: should_remember,
      coverImage: $(this). closest("[data- thumb]"),
      onReady: function (player) {
        //   YTPConsole.append(player.id + " player is ready");
        //  YTPConsole.append("<br>");
      }
    });

  })
  var activeForm = null;
    function formSubmit(){
        grecaptcha.execute();
        if(activeForm)
        {
            $(activeForm).submit();
        }
        return true;
    }
    $.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')}}.'));

$( document ).ready(function() {
            $('#project-inquiry  [name=g-recaptcha-response]').addClass('projectInquiry');
        });
$('#phone_number').mask("000000000000000");
$('#project-inquiry').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
				},
				'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') }}",
				},
        // 'commercial_messages': {
        //     required: "{{ trans('messages.field_required') }}",
        // },
        'accept_privacy_policy': {
            required: "{{ trans('messages.field_required') }}",
        },        
        'enquire_type':{
          required:"{{ trans('messages.field_required') }}",
        },        
        /*
				'message':{
					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');
				
				$('.userMessage').html('').hide();
				if (grecaptcha.getResponse) {
					activeForm = null;
					var $form = $(form);
					dataToSend = $(form).serializeArray();
					

					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('');

              window.location.href = "{{ route('project-inquiry-success',[$lang]) }}";
              /*
                  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('projectInquiry');
				}
				else{
					grecaptchaExecute('projectInquiry');
				}
				return false;
			}
		});

 $('[data-unit-type]').on('click',function(e){
    e.preventDefault();
    var url_ = "{{route('get-unit-type',[$lang,$projectData->project_id])}}";
    var unitType=$(this).data('unit-type');
    $('[data-unit-type]').removeClass('active_');
    $(this).addClass('active_');
    var data={'unitType':unitType};
    $('.aj_loader').addClass('show');
      sendAjax(url_,'GET',data,function(response){
        $('.aj_loader').removeClass('show');
        if(response.status)
        {
            $('#unit-types').html(response.tab);
            $('#unit-type-slider').html(response.slider);
            unittypeSliderInit();
        }
      });

 })
 function unittypeSliderInit(){
  var unit_types_slider = new Swiper('.unit_types_wrap .swiper-container', {
      slidesPerView: 1,
      spaceBetween: 20,
      watchOverflow:true,
      navigation: {
        nextEl: '.unit_types_wrap .nav_.right_',
        prevEl: '.unit_types_wrap .nav_.left_',
      },
    })
    // unit type category click
    $('[data-unit]').on('click', function (e) {
      e.preventDefault();
      var this_ = $(this)
      taget_ = this_.data('unit');
      unit_types_slider.slideTo(taget_);

    });
    unit_types_slider.on('slideChange', function () {
      $('[data-unit]').removeClass('active_');
      $('[data-unit="' + unit_types_slider.activeIndex + '"]').addClass('active_');

    });
 }



 @if(!empty($projectData->RoomType) && $projectData->RoomType->isNotEmpty() )
  $(window).scroll(function(){
    if (divInView($('#unit_types')) && !$('#unit_types').hasClass('loaded') ){
          $('[data-unit-type]').first().click();
          $('#unit_types').addClass('loaded');
      }
  })
@endif
 function divInView(param)
  {
      var contentViewTop = $(window).scrollTop();
      var contentViewBottom = contentViewTop + $(window).height();
      var scrolltop = $(param).offset().top;
      var elementBottom = scrolltop + $(param).height();
      return ((elementBottom <= contentViewBottom) && (scrolltop >= contentViewTop));
  }
// AR -- 14-08-2021
  $( ".virtual_tour_wrap .thu_img_box .image_item a.img_box" ).on( "click", function() {

    $(this).closest( ".virtual_tour_wrap" ).addClass('video_play');
});
  $( ".virtual_tour_wrap .main_img_box .swiper-container .video_close" ).on( "click", function() {

    $(this).closest( ".virtual_tour_wrap" ).removeClass('video_play');
});
//-- AR -- 14-08-2021 -- */



</script>









@stop