@extends('frontend.layouts.master')
@section('styles')
@parent
@stop
@section('content')
<main>
 
  <section class="inner_banner">
  
    <div class="banner_inner">
    @if(!empty($communityDetails) && !empty($communityDetails->communityBanner))
      <!-- Swiper -->
      <div class="swiper-container ">
        <div class="swiper-wrapper">
        @foreach($communityDetails->communityBanner as $banner)
          <div class="swiper-slide b_item">
            <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>

          </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>
    </div>
    @endif


    <div class="container">
      <div class="page_title ">
        <div class="breadcrumb_wrap">
          <ul>
            <li>
              <a href="{{route('home',$lang)}}" class="link_">
                {{lang('home')}}
              </a>
            </li>
            <li>
              <a href="{{route('communities',$lang)}}" class="link_">
                {{lang('communities')}}
              </a>
            </li>
            <li class="active_">
              <span>{{$communityDetails->getData('post_title')}}</span>
            </li>
          </ul>
        </div>
        <h1>
          <span>{{$communityDetails->getData('post_title')}}</span>
        </h1>
        <h5 class="small_title_ sm_">
          <span>{{$communityDetails->getData('sub_title')}}</span>
        </h5>
      </div>
      <div class="intro">
        <div class="text_box ">

          {!!$communityDetails->getData('description')!!}
        </div>
      </div>

    </div>


   @include('frontend.layouts.social')
  </section>
  @if(!empty($communityDetails->projects) && $communityDetails->projects->isNotEmpty())
  <section class="page-section">

    <div class="container ">
      <h3 class="section-title">
        <span>{{lang('our_projects')}}</span>
      </h3>

      <div class="project_list_wrap style_2">
        <div class="p_row">
          @foreach($communityDetails->projects as $project)
              <div class="p_item">
                <a href="{{route('project-details',[$lang,$project->getData('project_slug')])}}" class="inner_ link_tilt">
                  <div class="img_box p_img">
                    <picture>
                      <source srcset="{{webp($project->getData('project_image'))}}" type="image/webp">
                      <source srcset="{{PP($project->getData('project_image'))}}" type="image/{{FT($project->getData('project_image'))}}">
                      <img src="{{PP($project->getData('project_image'))}}" loading="lazy" alt="{{$project->getData('project_title')}}">
                    </picture>
                  </div>
                  <div class="content_box">
                    <div class="c_">
                      <div class="title">
                        <span>{{$project->getData('project_title')}}</span>
                      </div>
                      <div class="meta_">
                        <span>{{$project->getData('project_sub_title')}}</span>
                      </div>
                    </div>

                    <div class="logo_box p_img">
                      <picture>
                        <source srcset="{{webp($project->getData('project_logo'))}}" type="image/webp">
                        <source srcset="{{PP($project->getData('project_logo'))}}" type="image/{{FT($project->getData('project_logo'))}}">
                        <img src="{{PP($project->getData('project_logo'))}}" loading="lazy" alt="{{$project->getData('project_title')}}">
                      </picture>
                    </div>
                  </div>
                </a>
              </div>
              @endforeach

        </div>

      </div>
    </div>
  </section>
  @endif

</main>
@stop

@section('scripts')
@parent
<script>
  $(function () {

    $('.link_tilt').tilt({
      perspective: 1000,
      scale: 1.01
    });

    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: true,
      speed: 0,
      effect: 'fade',
      loopAdditionalSlides: 2,
      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()
    }
  })
</script>
@stop