@extends('layouts.layout')


@section('app')

<section class="inner-hero bg_img dark--overlay lazy" data-bg="{{asset('images/breadcrumb.webp')}}">
    <div class="container position-relative">
      <div class="row">
        <div class="col-lg-12">
          <h2 class="text-center ">{{$meta['title']}}</h2>
          <ul class="page-breadcrumb d-flex justify-content-center">
            <li><a href="{{route('home')}}" class="">Home</a></li>
            <li>{{$meta['title']}}</li>
          </ul>
        </div>
      </div>
    </div>
</section>
<section class="pt-80 pb-80">
	<div class="container-fluid">
        <div class="row mb-none-30 ajaxLoad">
        @forelse($data as $item)
            @include('components.title_card', ['is_list' => true])
          @if($loop->last)
          {{-- {{dd($meta['route']->parameters)}} --}}
          @if($pagination->hasMorePages())
          <a href="{{ route($meta['route']->getName(), array_merge($meta['route']->parameters, ['page' => $pagination->currentPage() + 1])) }}" data-params="{{base64_encode(json_encode( ['page' => $pagination->currentPage() + 1,
          'route_parameters' => $meta['route']->parameters,
          'route' => route('api.'.$meta['route']->getName()), 'has_more_pages' => $pagination->hasMorePages() ]))}}" data-lazy-function="more" id="next-page" class="text-center w-10" title="Load More">
                          <img width="120" height="120" src="{{ asset('images/loading.svg') }}" alt="Load More">
          </a>
          @endif
          @endif
          @empty
          <div class="col-xl-4 col-lg-4 col-md-6 col-sm-12 col-xs-12 mb-30 mx-auto">
              <img src="{{ asset('images/no-results.png') }}" alt="No Results">
          </div>
        @endforelse
        </div>
      </div>
      {{-- {{ $pagination->links('components.paginator', ['route' => ['name' => $meta['route']->getName(), 'params'=> $meta['route']->parameters]]) }} --}}
</section>

{{-- <div class="card my-4 border-0 shadow">
    <div class="card-header bg-primary d-flex justify-content-between">
        <h1 class="fs-5 fw-bold text-white text-uppercase mb-0">{{  $meta['page_title'] ?? $meta['title']}}</h1>
        @if(!$pagination->onFirstPage())
        <span class="text-white">Page {{$pagination->currentPage()}}</span>
        @endif
    </div>
    <div class="card-body">
        <div class="row row-cols-2 row-cols-sm-4 row-cols-lg-6 row-cols-xl-8 g-4">
            @foreach ($data as $item)
            @includeWhen($type == 'movie', 'components.movie_card')
            @includeWhen($type == 'show', 'components.show_card')
        @endforeach

        </div>
    </div>
</div> --}}

{{-- <h1 class="col-span-full mb-1 text-xl font-semibold text-body bg-slate-100 p-3 mt-5 flex justify-between">
    <span>
        {{ $meta['title']}}
        </span>
        <span class="font-extralight">

            @unless($pagination->onFirstPage()) Page {{ $pagination->currentPage() }} @endunless
        </span>
</h1> --}}


@endsection

@section('footer')
<script type="module">
    // var send = 0;
    // if ($(window).scrollTop() + $(window).height() > $(document).height() - 60) {
    //     if ($('.ajaxLoad').hasClass('loaded')) {
    //         $('.loading').removeClass('loader');
    //         return false;
    //     }
    //     $('.loading').addClass('loader');
    //     setTimeout(function() {
    //         if (send == 0) {
    //             send = 1;
    //             var url = 'https://script.viserlab.com/playlab/demo/load-more';
    //             var id = $('.data_id').last().data('id');
    //             var category_id = $('.category_id').last().data('category_id');
    //             var subcategory_id = $('.subcategory_id').last().data('subcategory_id');
    //             var search = $('.search').last().data('search');
    //             var data = {
    //                 id: id,
    //                 category_id: category_id,
    //                 subcategory_id: subcategory_id,
    //                 search: search
    //             };
    //             $.get(url, data, function(response) {
    //                 if (response == 'end') {
    //                     $('.loading').removeClass('loader');
    //                     $('.footer').removeClass('d-none');
    //                     $('.ajaxLoad').addClass('loaded');
    //                     return false;
    //                 }
    //                 $('.loading').removeClass('loader');
    //                 $('.sections').append(response);
    //                 $('.ajaxLoad').append(response);
    //                 send = 0;
    //             });
    //         }
    //     }, 1000);
    // }
</script>

@endsection