@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>Menu</p>
      </div>
      <div class="breadcrumb">
        <ul>
          <li><a href="{{route('home.index')}}">Home</a></li>
          <li><a class="active">Menu</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">
            <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-items">
      <div class="row" id="menuListAppend">
      
      @if( isset( $menus ) && count( $menus ) >0 )

        @foreach( $menus as $menu )

          @php $province = \App\Models\Province::find($menu->province_id); @endphp

          <div class="col-lg-3 col-md-4 col-sm-12">
            <div class="box-item">
              <a href="{{ route('menu.detail',$menu->slug) }}">
                <div class="menu-image">
                  @if( isset(  $menu->featured_image ) && file_exists( public_path('menu/'.$menu->featured_image) ) )
                  <img src="{{ asset('menu/'.$menu->featured_image) }}" alt="{{ $menu->title }}">
                  @endif
                </div>
              </a>
                <div class="menu-short-info">
                  <h3><a href="{{ route('menu.detail',$menu->slug) }}">{{ $menu->title }}</a></h3>
                  <p><strong>Address</strong> : {{$menu->street_address}}, {{$menu->city.','}}</p>
                  <p><strong>Tel</strong> : <a href="tel:{{$menu->phone}}">{{$menu->phone}}</a></p>
                </div>
              
            </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>Menus not Available!</h2>
               
            </div>
            </div>
          </div>
        </section>

      @endif

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


@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.menu.category.list')}}",

          method: 'GET',

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

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

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

      });
  }
</script>

@endsection