@extends('frontend.layouts.master')
@section('styles')
@parent
@stop
@section('content')
<main>
  <section class="inner_banner">
    <div class="bg_ p_img">
      <picture>
        <source srcset="{{getFrontendAsset('images/project_banner.webp')}}" type="image/webp">
        <source srcset="{{getFrontendAsset('images/project_banner.jpg')}}" type="image/jpeg">
        <img src="{{getFrontendAsset('images/project_banner.jpg')}}" loading="lazy" alt="">
      </picture>
    </div>

    <div class="container">
      <div class="page_title no_p_b">
        <div class="breadcrumb_wrap">
          <ul>
            <li>
              <a href="{{URL::to('/')}}" class="link_">
                {{lang('home')}}
              </a>
            </li>
            <li>
              <a href="{{route('construction-updates',$lang)}}" class="link_">
                {{lang('construction_updates')}}
              </a>
            </li>
            <li class="active_">
              <span>{{ $project->getTitle() }}</span>
            </li>
          </ul>
        </div>
        <h1>
          <span>{{ $project->getTitle() }}</span>
        </h1>
        <h5 class="small_title_">
          <span>{{lang('construction_updates')}}</span>
        </h5>
      </div>
      <div class="title_box w_tool">
        <div class="aj_loader" id="p-loader">
              <div class="inner_loader">
                <div class="c_loader"></div>
              </div>
        </div>
        <div class="t_box">

        </div>
        <div class="tool_wrap">
          <ul>
            <li>
              <div class="input_box">
                <select data-filter id="year" class="filter_">
                  <option value="">{{lang('year')}}</option>
                  @for($y=2018;$y<=date('Y');$y++)
                  <option value="{{$y}}">{{$y}}</option>
                  @endfor
                </select>
              </div>
            </li>
            <li>
              <div class="input_box">
                <select data-filter id="month" class="filter_">
                  <option value="">{{lang('month')}}</option>
                  <option value="01">{{lang('jan')}}</option>
                  <option value="02">{{lang('feb')}}</option>
                  <option value="03">{{lang('mar')}}</option>
                  <option value="04">{{lang('apr')}}</option>
                  <option value="05">{{lang('may')}}</option>
                  <option value="06">{{lang('jun')}}</option>
                  <option value="07">{{lang('jul')}}</option>
                  <option value="08">{{lang('aug')}}</option>
                  <option value="09">{{lang('sep')}}</option>
                  <option value="10">{{lang('oct')}}</option>
                  <option value="11">{{lang('nov')}}</option>
                  <option value="12">{{lang('dec')}}</option>
                </select>
              </div>
            </li>
          </ul>
        </div>

      </div>

    </div>
   @include('frontend.layouts.social')
  </section>
  <section class="page-section w_marq">

    <div class="container ">

      <div class="project_list_wrap " id="project-grid">
        @include('frontend.projects.ajax.construction_update_block')
      </div>

      @if(!empty($constructionUpdates) && !empty($constructionUpdates->nextPageUrl()))
        <div class="more_wrap">
          <a id="show-more" class="dir-btn" href="{{$constructionUpdates->nextPageUrl()}}">{{lang('view_more')}}<span></span><span></span><span></span><span></span><b
              aria-hidden="true">{{lang('view_more')}}</b><b aria-hidden="true">{{lang('view_more')}}</b><b aria-hidden="true">{{lang('view_more')}}</b><b
              aria-hidden="true">{{lang('view_more')}}</b></a>
        </div>
        @endif

    </div>
    <div class="text_marc_box">
        @include('frontend.partials.marquee')
    </div>
  </section>

{{--   @if(!empty($videoGallery) && $videoGallery->isNotEmpty())
  <section class="page-section video_slide_section" id="videos">
    <div class="container-fluid no_pad">
      <div class="title_box ">
        <h3 class="section-title">
          <!-- <span>{{lang('latest')}}</span> -->
        </h3>
        <h5 class="small_title_">
          <span>{{lang('videos')}}</span>
        </h5>
      </div>

      <div class="video_wrap">
        <!-- Swiper -->
        <div class="swiper-container ">
          <div class="swiper-wrapper">
            @foreach($videoGallery as $video)
            <div class="swiper-slide v_item">
              <a href="{{youtubeEmbedUrlFromUrl($video->getData('video_link'))}}" data-fancybox="gallery" class="inner_ ">
                <div class="img_box p_img">
                  <picture>
                  <source srcset="{{webp($video->getData('construction_video_banner'))}}" type="image/webp">
                  <source srcset="{{PP($video->getData('construction_video_banner'))}}" type="image/{{FT($video->getData('construction_video_banner'))}}">
                  <img src="{{PP($video->getData('construction_video_banner'))}}" loading="lazy" alt="{{$video->getData('post_title')}}">
                  </picture>
                </div>

                <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 class="content_box">
                  <div class="c_">
                    <div class="title">
                      <span>{{$video->getData('post_title')}}</span>
                    </div>

                  </div>
                </div>

              </a>
            </div>
            @endforeach
          </div>
        </div>
        <!-- <div class="nav_box  box_center_">
          <div class="nav_ left_"></div>
          <div class="nav_ right_"></div>
        </div> -->
      </div>

    </div>



  </section>
  @endif --}}

</main>

@stop

@section('scripts')
@parent
<script>
  $(function () {
    $('.tool_wrap select').selectric({ disableOnMobile: false, nativeOnMobile: false });

    $('.link_tilt').tilt({
      perspective: 500,
      scale: 1.1
    });

    var video_slider = new Swiper(".video_wrap .swiper-container", {
      slidesPerView: 1,
      spaceBetween: 60,
      watchOverflow: true,
      navigation: {
        nextEl: ".video_wrap .nav_.right_",
        prevEl: ".video_wrap .nav_.left_",
      },
      breakpoints: {
        320: {
          slidesPerView: 1,
          spaceBetween: 20,
        },
        980: {
          slidesPerView: 1,
          spaceBetween: 20,
        },
        1025: {
          slidesPerView: 1,
          spaceBetween: 60,
        },
      },
    });

  })

</script>
<script>
$('#show-more').on('click',function(e){
    e.preventDefault();
    var url_ = $(this).attr('href');
    var year = $('#year').val();
    var month = $('#month').val();
    var data={"year":year,'month':month};
    loadProjects(data,url_,'append');
});
$('[data-filter]').on('change',function(e){
    e.preventDefault();
    $('[data-filter]').removeClass('active_');
    $(this).addClass('active_');
    var year = $('#year').val();
    var month = $('#month').val();
    var url_ =window.currentUrl;
    var data={"year":year,'month':month};
    loadProjects(data,url_,'replace');
})
function loadProjects(data,url_,action)
{
      $('.aj_loader').addClass('show');
      sendAjax(url_,'GET',data,function(response){
        $('.aj_loader').removeClass('show');
        if(response.status)
        {
            if(action=="append"){
                $('#project-grid').append(response.list);
            }else{
                $('#project-grid').html(response.list);
            }

            $('#show-more').attr('href',response.moreLink);
            if(response.viewmore){
                $('.more_wrap').show();
            }else{
                $('.more_wrap').hide();
            }
            slider_init();
        }
      });
}
</script>
<script>
  $(function () {

    slider_init();
  })
  function slider_init()
  {
     // 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);
    })

    // normal slider
    $('.normal_slider_box').each(function () {
      var this_ = $(this),
        traget_ = this_.find('.swiper-container').attr('id'),
        pag_ = this_.find('.swiper-pagination').attr('id');
      var normal_slider = new Swiper('#' + traget_, {
        slidesPerView: 1,
        spaceBetween: 20,
        watchOverflow: true,
        loop: false,
        pagination: {
          el: '#' + pag_,
          clickable: true,
          dynamicBullets :true
        },


      })

    })

  }
</script>

@stop