@extends('frontend.layouts.master')
@section('styles')
<link rel="stylesheet" type="text/css" href="//cdn.curator.io/3.1/css/curator.css" />
@parent
@stop
@section('content')
<main>
  <section class="inner_banner">
    <div class="bg_ p_img">
      @if(!empty($banner))
      <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="{{lang('media_banner_alt_keywords')}}">
      </picture>
      @else
      <picture>
        <source srcset="{{getFrontendAsset('images/media_banner.webp')}}" type="image/webp">
        <source srcset="{{getFrontendAsset('images/media_banner.jpg')}}" type="image/jpeg">
        <img src="{{getFrontendAsset('images/media_banner.jpg')}}" loading="lazy" alt="{{lang('media_banner_alt_keywords')}}">
      </picture>
      @endif
    </div>

    <div class="container">
      <div class="page_title">
        <h1>
          <span>{{lang('media_center')}}</span>
        </h1>
      </div>
      @if(!empty($newsList) && $newsList->isNotEmpty())
      <div class="title_box w_tool">
        <div class="t_box">
          <h3 class="section-title">
            <span>{{lang('media_latest')}}</span>
          </h3>
          <h5 class="small_title_">
            <span>{{lang('news')}}</span>
          </h5>
        </div>
        <div class="tool_wrap">
          <ul>
            <li>
              <div class="input_box">
                <select id="month-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>
      @endif
    </div>

    @include('frontend.layouts.social')

  </section>
  @if(!empty($newsList) && $newsList->isNotEmpty())
  <section class="page-section">
    <div class="container ">
      <div class="latest_news_wrap n1" id="news-grid">
        @include('frontend.media-center.ajax.news_block')
      </div>
    </div>
  </section>
   @endif

  <section class="page-section">
    @if(!empty($eventList) && $eventList->isNotEmpty())
    <div class="container ">
      <div class="title_box w_tool">
        <div class="t_box">
          <h3 class="section-title">
            <span>{{lang('events')}}</span>
          </h3>

        </div>
        <div class="tool_wrap">
          <ul>
            <li>
              <div class="input_box">
                <select id="event-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 class="latest_news_wrap e1" id="event-grid">
        <div class="news_row">
          <div class="p_box w_nav">
            <div class="nav_box  ">
              <div class="nav_ left_"></div>
              <div class="nav_ right_"></div>
            </div>
          </div>

          <div class="news_list_wrap" >
            <!-- Swiper -->
            <div class="swiper-container ">
              <div class="swiper-wrapper">
                @foreach($eventList as $event)
                <div class="swiper-slide n_item">
                  <a href="{{route('event-details',[$lang,$event->getData('post_slug')])}}" class="inner_ ">
                    <div class="img_box p_img">
                      <picture>
                        <source srcset="{{webp($event->getData('event_image'))}}" type="image/webp">
                        <source srcset="{{PP($event->getData('event_image'))}}" type="image/{{FT($event->getData('event_image'))}}">
                        <img src="{{PP($event->getData('event_image'))}}" loading="lazy" alt="{{$event->getData('post_title')}}">
                      </picture>
                    </div>
                    <div class="content_box">
                      <div class="c_">
                        <div class="title">
                          <span>{{$event->getData('post_title')}}</span>
                        </div>
                        <div class="meta_">
                          <span>{{DTF($event->getData('event_date'))}}</span>
                        </div>
                      </div>
                    </div>
                  </a>
                </div>
                @endforeach
              </div>

            </div>
          </div>
        </div>
        <div class="more_wrap">
              <a class="dir-btn" href="{{route('events',$lang)}}">{{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>
    </div>

    @endif
    <div class="text_marc_box">
        @include('frontend.partials.marquee')
    </div>
  </section>
 <section class="page-section">
    <div class="container ">
      <div class="title_box ">
        <h3 class="section-title">
          <span>{{lang('reportage_social')}}</span>
        </h3>
      </div>
      <div class="social_grid_wrap ">
        <div class="social_row">
         <div class="s_item">
            <div class="inner_ ">

              <div class="curator_box">
                <div id="curator-feed-default-feed-layout"></div>
              </div>
              <div class="logo_box ">
                <svg viewBox="0 0 29.915 29.915">
                  <g transform="translate(1.5 1.5)">
                    <path
                      d="M9.729,3H23.186a6.729,6.729,0,0,1,6.729,6.729V23.186a6.729,6.729,0,0,1-6.729,6.729H9.729A6.729,6.729,0,0,1,3,23.186V9.729A6.729,6.729,0,0,1,9.729,3Z"
                      transform="translate(-3 -3)" fill="none" stroke="#fff" stroke-linecap="round"
                      stroke-linejoin="round" stroke-width="3" />
                    <path d="M22.773,16.528a5.383,5.383,0,1,1-4.535-4.535,5.383,5.383,0,0,1,4.535,4.535Z"
                      transform="translate(-3.932 -3.919)" fill="none" stroke="#fff" stroke-linecap="round"
                      stroke-linejoin="round" stroke-width="3" />
                    <path d="M26.25,9.75h0" transform="translate(-5.391 -3.694)" fill="none" stroke="#fff"
                      stroke-linecap="round" stroke-linejoin="round" stroke-width="3" />
                  </g>
                </svg>
              </div>
            </div>
          </div>
          <div class="s_item">
            <div class="inner_ ">

              <div class="curator_box">
                <div id="curator-feed-default-feed-fb"></div>
              </div>
              <div class="logo_box ">
                <svg viewBox="0 0 15.664 29.115">
                  <path
                    d="M13.257,15.635v-5.56h4.485v-2.8a7.317,7.317,0,0,1,1.964-5.153A6.249,6.249,0,0,1,24.466,0h4.455V5.561H24.466a.981.981,0,0,0-.785.48,1.951,1.951,0,0,0-.349,1.179v2.853h5.589v5.56h-5.59V29.115h-5.59V15.635Z"
                    transform="translate(-13.257)" fill="#fff"></path>
                </svg>
              </div>
            </div>
          </div>
          <div class="place_"></div>
        </div>
         <div class="social_row">
          <div class="s_item">
            <div class="inner_ ">
              <div class="curator_box">
                <div id="curator-feed-default-feed-twitter"></div>
              </div>
              <div class="logo_box ">
                <svg viewBox="0 0 34.775 29.203">
                  <path
                    d="M33.275,4.5a15.743,15.743,0,0,1-4.535,2.21,6.47,6.47,0,0,0-11.352,4.333v1.444a15.4,15.4,0,0,1-13-6.543s-5.777,13,7.221,18.776A16.812,16.812,0,0,1,1.5,27.608c13,7.222,28.886,0,28.886-16.61a6.5,6.5,0,0,0-.116-1.2,11.15,11.15,0,0,0,3-5.3Z"
                    transform="translate(0 -2.872)" fill="none" stroke="#fff" stroke-linecap="round"
                    stroke-linejoin="round" stroke-width="3" />
                </svg>
              </div>
            </div>
          </div>
         
          <div class="place_"></div>
        </div>
       
      </div>

    </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('video_banner'))}}" type="image/webp">
                  <source srcset="{{PP($video->getData('video_banner'))}}" type="image/{{FT($video->getData('video_banner'))}}">
                  <img src="{{PP($video->getData('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 class="more_wrap">
        <a class="dir-btn" href="{{route('videos',$lang)}}">{{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>
      
    </div>
    


  </section>
  @endif

</main>

@stop

@section('scripts')
@parent
<script type="text/javascript" src="//cdn.curator.io/3.1/js/curator.js"></script>
<script type="text/javascript">
 var els_insta = document.querySelector('.social_grid_wrap .s_item');
  window.addEventListener('DOMContentLoaded', (event) => {

   


    function getGridWidth() {
      var cal = els_insta.offsetWidth
      return cal
    }


    //var grid_Width = getGridWidth();

    setTimeout(() => {
      var insta_ = new Curator.Widgets.Carousel({
        debug: false, // While you're testing
        container: '#curator-feed-default-feed-layout',
        feedId: 'c9e5a9b1-732c-4543-9943-db3fcc6954c1',
        carousel: {
          autoPlay: false,
          autoLoad: true,
          minWidth: 0,
          maxWidth: getGridWidth(),
          infinite: false
        }
      });

      var facebook_ = new Curator.Widgets.Carousel({
        debug: false, // While you're testing
        container: '#curator-feed-default-feed-fb',
        feedId: 'bb598e9c-ff65-412d-9b9a-5015332ae52e',
        carousel: {
          autoPlay: false,
          autoLoad: true,
          minWidth: 0,
          maxWidth: getGridWidth(),
          infinite: false
        }
      });

      var twitter_ = new Curator.Widgets.Carousel({
        debug: false, // While you're testing
        container: '#curator-feed-default-feed-twitter',
        feedId: 'ff00e22e-a21b-44d4-bb2e-89213f57de88',
        carousel: {
          autoPlay: false,
          autoLoad: true,
          minWidth: 0,
          maxWidth: getGridWidth(),
          infinite: false
        }
      });
    }, 200)


  });

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

        $('[data-play]').on('click', function (e) {
            e.preventDefault();
            var this_ = $(this),
                p_target_ = this_.closest('.video_grid'),
                video_ = p_target_.find('video');


            p_target_.toggleClass('playing_');

            if (p_target_.hasClass('playing_')) {
                $(video_).trigger('play');
            } else {
                $(video_).trigger('pause');
            }


        });
    });
</script>
<script>
  $(function () {
    // media news slider
    newsSwiper();
    setTimeout(function(){  newsSwiper(); }, 500);

    // Event news slider
    eventSwiper();
    setTimeout(function(){  eventSwiper(); }, 500);
    // video slider
    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,
        },
      },
    });
  })

  $('#month-filter').on('change',function(e){
    var month= $(this).val();
    var type= "news";
    var url_ ="{{route('media-filter',$lang)}}";
    $('.aj_loader').addClass('show');
    sendAjax(url_,'GET',{"month":month,'type':type},function(response){
      $('.aj_loader').removeClass('show');
      if(response.status)
      {
        $('#news-grid').html(response.list);
        newsSwiper();
        setTimeout(function(){  newsSwiper(); }, 500);
      }
    });
  })
  $('#event-filter').on('change',function(e){
    var month= $(this).val();
    var type= "events";

    var url_ ="{{route('media-filter',$lang)}}";
    $('.aj_loader').addClass('show');
    sendAjax(url_,'GET',{"month":month,'type':type},function(response){
      $('.aj_loader').removeClass('show');
      if(response.status)
      {
        $('#event-grid').html(response.list);
        eventSwiper();
        setTimeout(function(){  eventSwiper(); }, 500);
      }
    });
  })
  function  eventSwiper()
  {
    var event_slider = new Swiper(".latest_news_wrap.e1 .swiper-container", {
      slidesPerView: 2,
      slidesPerColumn: 2,
      spaceBetween: 60,
      watchOverflow: true,
      watchSlidesVisibility: true, 
      navigation: {
        nextEl: ".latest_news_wrap.e1 .nav_.right_",
        prevEl: ".latest_news_wrap.e1 .nav_.left_",
      },
      breakpoints: {
		 250: {
          slidesPerView: 1,
          spaceBetween: 20,
        },
        320: {
          slidesPerView: 1,
          spaceBetween: 20,
        },
        767: {
          slidesPerView: 2,
          slidesPerColumn: 2,
          spaceBetween: 30,
        },
        1025: {
          slidesPerView: 2,
          slidesPerColumn: 2,
          spaceBetween: 60,
        },
      },
      on: {
      afterInit: function () {
        setTimeout(function(){ 
          var wdth = $( window ).width();
          var sh=$(".latest_news_wrap.e1 .swiper-container .swiper-slide .inner_").height()*2;
        
          if(wdth>980){
 
          $(".latest_news_wrap.e1 .swiper-container").height(sh+100); 
          }else{
 
          $(".latest_news_wrap.e1 .swiper-container").height(sh+60); 
          }
           
           @if($lang == 'ar')
          var act_ = $(".latest_news_wrap.e1 .swiper-container .swiper-slide-active ");
            act_.addClass('ar_active');
            act_.next().addClass('ar_active');
            act_.next().next().addClass('ar_active');
            act_.next().next().next().addClass('ar_active');
           @endif

         }, 500);
       
        },
      },
    });

  @if($lang == 'ar')
    event_slider.on('slideChange', function () {
      var act_ = $(".latest_news_wrap.e1 .swiper-container .swiper-slide-active ");

      if (act_.index() / 2) {
        $(".latest_news_wrap.e1 .swiper-container .swiper-slide ").removeClass('ar_active');

        act_.next().addClass('ar_active');
        act_.next().next().addClass('ar_active');
        act_.next().next().next().addClass('ar_active');
        act_.next().next().next().next().addClass('ar_active');
      } else {
        $(".latest_news_wrap.e1 .swiper-container .swiper-slide ").removeClass('ar_active');
        act_.addClass('ar_active');
        act_.next().addClass('ar_active');
        act_.next().next().addClass('ar_active');
        act_.next().next().next().addClass('ar_active');
      }

      if (event_slider.isEnd) {
        $(".latest_news_wrap.e1 .swiper-container .swiper-slide:last-child").addClass('ar_active');
        if (act_.index() / 2) {
          act_.next().removeClass('ar_active');
        }
      }

    });
     @endif


  }
  function newsSwiper()
  {
    var news_slider = new Swiper(".latest_news_wrap.n1 .swiper-container", {
      slidesPerView: 2,
      slidesPerColumn: 2,
    //  slidesPerColumn: 2,
      watchOverflow: true,
      watchSlidesVisibility: true, 
      spaceBetween: 60,
      navigation: {
        nextEl: ".latest_news_wrap.n1 .nav_.right_",
        prevEl: ".latest_news_wrap.n1 .nav_.left_",
      },
      breakpoints: {
		  200: {
		  slidesPerView: 1,
		  spaceBetween: 20,
		},
        320: {
          slidesPerView: 1,
          spaceBetween: 20,
        },
        767: {
          slidesPerView: 2,
          slidesPerColumn: 2,
          spaceBetween: 30,
        },
        1025: {
          slidesPerView: 2,
          slidesPerColumn: 2,
          spaceBetween: 60,
        }, 
      },
      on: {
      afterInit: function () {
        setTimeout(function(){ 
          var wdth = $( window ).width();
          var sh=$(".latest_news_wrap.n1 .swiper-container .swiper-slide .inner_").height()*2;
        
          if(wdth>980){
 
          $(".latest_news_wrap.n1 .swiper-container").height(sh+100); 
          }else{
 
          $(".latest_news_wrap.n1 .swiper-container").height(sh+60); 
          }

           @if($lang == 'ar')
          var act_ = $(".latest_news_wrap.n1 .swiper-container .swiper-slide-active ");
            act_.addClass('ar_active');
            act_.next().addClass('ar_active');
            act_.next().next().addClass('ar_active');
            act_.next().next().next().addClass('ar_active');
           @endif

         }, 500);
       
        },
      },
    });

     @if($lang == 'ar')
    news_slider.on('slideChange', function () {
      var act_ = $(".latest_news_wrap.n1 .swiper-container .swiper-slide-active ");

      if (act_.index() / 2) {
        $(".latest_news_wrap.n1 .swiper-container .swiper-slide ").removeClass('ar_active');

        act_.next().addClass('ar_active');
        act_.next().next().addClass('ar_active');
        act_.next().next().next().addClass('ar_active');
        act_.next().next().next().next().addClass('ar_active');
      } else {
        $(".latest_news_wrap.n1 .swiper-container .swiper-slide ").removeClass('ar_active');
        act_.addClass('ar_active');
        act_.next().addClass('ar_active');
        act_.next().next().addClass('ar_active');
        act_.next().next().next().addClass('ar_active');
      }

       if (news_slider.isEnd) {
        $(".latest_news_wrap.n1 .swiper-container .swiper-slide:last-child").addClass('ar_active');
        if (act_.index() / 2) {
          act_.next().removeClass('ar_active');
        }
      }

    });
    @endif

  }
</script>
@stop