@extends('frontend.layouts.app')

@section('content')

  @include('frontend.home-section.banner')
  <!-- <script type="text/javascript">
  window.addEventListener('load', (event) => {
    var bannerHeight = document.getElementById('flex-container').clientHeight;
    document.querySelector('.banner-section1').style.setProperty('height',bannerHeight+'px');
  });

  window.addEventListener('resize', (event) => {
    var bannerHeight = document.getElementById('flex-container').clientHeight;
    document.querySelector('.banner-section1').style.setProperty('height',bannerHeight+'px');
  });
</script> -->

  @include('frontend.home-section.event-featured')

  {{-- @include('frontend.home-section.banner-bottom') --}}

  @include('frontend.home-section.event')

  @include('frontend.home-section.partner')

  @include('frontend.home-section.blog')

  @include('frontend.home-section.promote-your-business')

  @include('frontend.home-section.directory-featured')


  {{-- @include('frontend.home-section.fundrazier-featured') --}}

  <input type="hidden" name="ajax_filter_url" value="{{route('home.event.calendar.filter')}}">
@endsection

@section('head-css')
<link rel="stylesheet" type="text/css" href="{{asset('frontend/css/lightcase.css')}}">
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css"/>
@endsection

@section('scripts')
<script src="{{asset('frontend/js/lightcase.js')}}"></script>
<script src="{{asset('frontend/js/calendar.min.js')}}"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>
<script type="text/javascript">

  $('.slider-items').slick({
      lazyLoad: 'ondemand',
      autoplay:true,
      autoplaySpeed: 3500,
      // infinite: true,
      // prevArrow:'.prev',
      // nextArrow:'.next',
      slidesToShow:1,
      fade: true,
      centerMode: true,
      centerPadding: '1px',
      cssEase: 'linear',
      responsive: [
      {
        breakpoint: 680,
        settings: {
          slidesToShow: 1,
          slidesToScroll: 1
        }
      }
    ]
  });

  // window.addEventListener('load', (event) => {
  //   var bannerHeight = document.getElementById('flex-container').clientHeight;
  //   document.getElementById('banner-content-area').style.setProperty('height',bannerHeight+'px');
  // });

  var events    = {};
  var settings  = {};
  var element   = document.getElementById('calendar-app');
  caleandar(element, events, settings);
  var els = document.getElementsByClassName("cld-day");
  var ToDate = new Date();
  for(var i = 0; i < els.length; i++)
  {
      if(els[i].getAttribute('id') !== null)
      {
          if (new Date(els[i].getAttribute('id')).getTime() < ToDate.getTime()) {
              $("#"+els[i].getAttribute('id')).css('pointer-events','none');
              $("#"+els[i].getAttribute('id')).addClass('disableDay');

           }
      }
  }
  $("li.cld-day").css('cursor','pointer');
  $("li.today").removeClass('disableDay');
  $("li.today").css('pointer-events','');

  $('.cld-day').click(function(){

    var ajax_filter_url = $("input[name=ajax_filter_url]").val();

    $('.cld-day').removeClass('today');

    $(this).addClass('today');

    var clickDate = $(this).attr('id');

    $.ajax({

      type: 'GET',

      url: ajax_filter_url,

      data: {caleandar_data:clickDate},

         beforeSend: function(){
           // Handle the beforeSend event
           $('.eventlist').html('<div class="text-center" style="color:#FFF;font-size:50px;margin-top:30px;">Processing....</div>');
         },
         success: function(data) {
           $('.eventlist').html(data.html);
          },
    });

  });
</script>
@endsection