@extends('frontend.layouts.app')

@section('content')

@if( isset( $module->module_banner_image ) )

@php $bannerImage = asset('module-banner/'.$module->module_banner_image); @endphp

<style type="text/css">
  .inner-banner-section
  {
    background-image:url("{{$bannerImage}}");
  }
</style>

@endif

<!-- Banner Section Start -->
<div class="inner-banner-section">
    <div class="inner-banner-content">
      <div class="page-name">
        <p>Flyers</p>
      </div>
      <div class="breadcrumb">
        <ul>
          <li><a href="{{route('home.index')}}">Home</a></li>
          <li><a class="active">Flyers</a></li>
        </ul>
      </div>
    </div>
</div>
<!-- Banner Section End -->

<div class="topsearch-sec">
  <div class="container">
    <div class="row top">
      <div class="col-md-9">
        <div class="alphabetical">
          <ul>
             <li><a href="javascript:void(0);">A</a></li>
            <li><a href="javascript:void(0);">B</a></li>
            <li><a href="javascript:void(0);">C</a></li>
            <li><a href="javascript:void(0);">D</a></li>
            <li><a href="javascript:void(0);">E</a></li>
            <li><a href="javascript:void(0);">F</a></li>
            <li><a href="javascript:void(0);">G</a></li>
            <li><a href="javascript:void(0);">H</a></li>
            <li><a href="javascript:void(0);">I</a></li>
            <li><a href="javascript:void(0);">J</a></li>
            <li><a href="javascript:void(0);">K</a></li>
            <li><a href="javascript:void(0);">L</a></li>
            <li><a href="javascript:void(0);">M</a></li>
            <li><a href="javascript:void(0);">N</a></li>
            <li><a href="javascript:void(0);">O</a></li>
            <li><a href="javascript:void(0);">P</a></li>
            <li><a href="javascript:void(0);">Q</a></li>
            <li><a href="javascript:void(0);">R</a></li>
            <li><a href="javascript:void(0);">S</a></li>
            <li><a href="javascript:void(0);">T</a></li>
            <li><a href="javascript:void(0);">U</a></li>
            <li><a href="javascript:void(0);">V</a></li>
            <li><a href="javascript:void(0);">X</a></li>
            <li><a href="javascript:void(0);">Y</a></li>
            <li><a href="javascript:void(0);">Z</a></li>
          </ul>
        </div>
      </div>
      <div class="col-md-3">
        <form>
          <div class="input-group">
            <input name="search" type="text" class="form-control" placeholder="Search" aria-describedby="basic-addon2" autocomplete="off">
            <div class="input-group-append">
              <button class="btn btn-outline-secondary" type="submit" id="searchButton"><i class="fas fa-search"></i></button>
            </div> 
          </div>
        </form>
      </div>
    </div>
  </div>
</div>


<!-- Flyer Page Section Start -->
<div class="flyer-page-section">

  <div class="container">
  
      <div class="flyer-page-content">
  
    	@if( isset( $flyers ) && count( $flyers ) > 0 )

        <div class="row" id="flyersListAppend">

      		@foreach( $flyers as $flyer )

	          <div class="col-lg-3 col-md-4 col-sm-12">
	            <a href="{{ route('flyers.detail',$flyer->slug) }}" class="box">
	              <div class="image">
                  @if( isset( $flyer->featured_image ) )
	                 <img src="{{ asset('flyers/'.$flyer->featured_image) }}">
                  @endif
	              </div>
	              <div class="title">
	                <h2>{{ $flyer->contact_name }}</h2>
	              </div>
	              <div class="description">
	                <p>{{ $flyer->title }}</p>
	              </div>
	              <div class="date">
	                <p>
                    <span>Flyer Valid</span> 
                    @if( isset($flyer->event_start_date) )
                    From
                    {{ $flyer->event_start_date }} 
                    @else
                      @if( isset($flyer->coupon_start_date) )
                      From
                      {{ $flyer->coupon_start_date }} 
                      @else
                        @if( isset( $flyer->option_c_start_date ) )
                        From
                        {{ $flyer->option_c_start_date }} 
                        @endif
                      @endif

                    @endif


                    @if( isset($flyer->event_end_date) )
                    to
                    {{ $flyer->event_end_date }} 
                    @else
                      @if( isset($flyer->coupon_end_date) )
                      to
                      {{ $flyer->coupon_end_date }} 
                      @else
                      @if( isset( $flyer->option_c_end_date ) )
                        to
                        {{ $flyer->option_c_end_date }} 
                        @endif
                      @endif

                    @endif
                  </p>
	              </div>
	            </a>
	          </div>
  	 
         @endforeach

        </div>


        @else

          <section class="notfound-block">
            <div class="container">
              <div class="not-found__inner">
                <figure class="not-found__img">
                  <img src="{{asset('payment/product-not-found.png')}}" class="img-fluid" alt="Product Not Found Images">
                </figure>
                <div class="not-found__content">
                  <h2>Flyers not Available!</h2>
                 
              </div>
              </div>
            </div>
          </section>

        @endif

         <div class="row">
          <div class="business-list-content">
          {!!$flyers->links()!!}
          </div>
        </div>

      </div>
     
  </div>
</div>
<!-- Flyer Page Section End -->


@endsection


@section('scripts')

<script type="text/javascript">
   $('.alphabetical ul li a').on('click',function(){

    elem              = $(this);

    var searchKeyword = $('input[name=search]').val();

    elem.toggleClass('active'); 

    if(elem.hasClass('active'))
    {
        $('.alphabetical ul li a').removeClass('active');

        elem.addClass('active');

        var alphabeticalValue = $(this).text();
    }   
    else
    {
        var alphabeticalValue = null;
    }

    filterAction( alphabeticalValue, searchKeyword );

  });

  $('#searchButton').on('click',function(event){

    event.preventDefault();

    var alphabeticalValue = $('.alphabetical ul li a.active').text();

    var searchKeyword = $('input[name=search]').val();

    filterAction( alphabeticalValue, searchKeyword );

  });

  // Execute a function when the user releases a key on the keyboard
  $('#searchForm').keypress(function (event) {
      if (event.keyCode == 13) {
          event.preventDefault();
          $('#searchButton').click();
      }
  });

function filterAction( alphabeticalValue, searchKeyword )
  {
      $.ajax({

          url: "{{route('ajax.flyers.category.list')}}",

          method: 'GET',

          data: { alphabet:alphabeticalValue, search: searchKeyword },

          beforeSend: function()
          {
            $("#flyersListAppend").html('Loading...');
          },

          success: function(data)
          {
            $("#flyersListAppend").html(data.html);
          }

      });
  }
</script>

@endsection