@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>{{$module->title}}</p>
    </div>
    <div class="breadcrumb">
      <ul>
        <li><a href="{{route('home.index')}}">Home</a></li>
        <li><a class="active">{{$module->title}}</a></li>
      </ul>
    </div>
  </div>
</div> 
<!-- Banner Section End -->

<!-- Banner Bottom Section Start -->
<div class="business-page-section">
  <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 action="{{route('ad.search.result',$module->slug)}}">
          <div class="input-group">
            <input name="search" type="text" class="form-control" placeholder="Search.." aria-label="search keywords" aria-describedby="basic-addon2">
            <div class="input-group-append">
               <button type="submit" class="btn btn-outline-secondary"><i class="fas fa-search"></i></button>
            </div>
          </div>
        </form>
      </div>
    </div>
    <div class="row" id="categoryListAppend">

      @if( isset( $directoryCategories ) && count( $directoryCategories ) > 0 )

        @foreach( $directoryCategories as $directoryCat )

            <div class="col-lg-2 col-md-3 col-sm-4">
              <div class="content">
                <a href="{{ route('directory.subcategory.list',['moduleSlug' => $module->slug, 'categorySlug' => $directoryCat->slug] )}}">
                  @if( isset(  $directoryCat->image ) && file_exists( public_path('category/'.$directoryCat->image) ) )
                  <div class="image">
                    <img src="{{asset('category/'.$directoryCat->image)}}" alt="{{$directoryCat->title}}">
                  </div>
                  @else
                  <div class="image">
                    <img src="{{asset('frontend/image/placeholder.jpg')}}" alt="{{$directoryCat->title}}">
                  </div>
                  @endif
                  <p class="title" data-toggle="tooltip" data-placement="right" title="{{$directoryCat->title}}">{{$directoryCat->title}}</p>
                  <p class="number">({{count($directoryCat->directory)}})</p>
                </a>
              </div>
            </div>
          
         

        @endforeach

        @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>Category not Available!</h2>
               
            </div>
            </div>
          </div>
        </section>

      @endif

    </div>
    <!-- <nav aria-label="..." class="pagination-section"> -->
              {!!$directoryCategories->links()!!}
          <!-- </nav> -->
    <nav aria-label="..." class="pagination-section main-pagination">
    <!--   <ul class="pagination justify-content-center">
        <li class="page-item disabled">
          <span class="page-link">Previous</span>
        </li>
        <li class="page-item"><a class="page-link" href="#">1</a></li>
        <li class="page-item active">
          <span class="page-link">
            2
            <span class="sr-only">(current)</span>
          </span>
        </li>
        <li class="page-item"><a class="page-link" href="#">3</a></li>
        <li class="page-item">
          <a class="page-link" href="#">Next</a>
        </li>
      </ul> -->
    </nav>
  </div>
</div>
<!-- Banner Bottom 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.directory.category.list',$module->slug)}}",

          method: 'GET',

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

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

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

      });
  }

</script>

@endsection