@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>Search results for: {{ $query }}</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)
            @if($pagination->hasMorePages())
            <a href="{{ route($meta['route']->getName(), array_merge($meta['route']->parameters, ['page' => $pagination->currentPage() + 1, 'search' => $query])) }}" 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(), 'search' => $query ]))}}" 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>
</section>


@endsection


@push('footer')
@vite(['resources/js/load-more.js'])

@endpush


{{-- <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>
    </div>
    <div class="card-body">
        @if(isset($data['movie']) && !empty($data['movie']))
        <div class="row">
            <span class="text-lg text-white text-center bg-primary py-2 fs-5 fw-semibold rounded">Movies</span>
            <div class="row row-cols-2 row-cols-sm-4 row-cols-lg-6 row-cols-xl-8 g-4">
                @foreach ($data['movie'] as $item)
                @include('components.title_card')
                @endforeach
            </div>
        </div>
        @endif
        @if(isset($data['show']) && !empty($data['show']))
        <div class="row">
            <span class="text-lg text-white text-center bg-primary py-2 fs-5 fw-semibold rounded mt-5">TV Shows</span>
            <div class="row row-cols-2 row-cols-sm-4 row-cols-lg-6 row-cols-xl-8 g-4">
                @foreach ($data['show'] as $item)
                @include('components.title_card')
                @endforeach
            </div>
        </div>
        @endif
        @if( (!isset($data['show']) || empty($data['show'])) && (!isset($data['movie']) || empty($data['movie'])) )
        <div class="row">
        <span class="text-lg text-white text-center bg-primary py-2 fs-5 fw-bold rounded">No Results</span>
        </div>
        @endif
    </div>
</div> --}}