@extends('layouts.master')

@section('title', config('app.name') . ' : ' . ucfirst($category))
@section('description', 'Mainkan ' . ucfirst($category) . ' hanya di ' . config('app.name'))

@section('content')
<div class="main-content game">

    {{-- BANNER --}}
    @if ($banners->count())
    <div class="container game__slider">
        <div class="swiper-container game-category-slider">
            <div class="swiper-wrapper">
                @foreach ($banners as $banner)
                <div class="swiper-slide">
                    <img loading="lazy"
                         alt="{{ $banner->title }}"
                         src="{{ $banner->image }}">
                </div>
                @endforeach
            </div>
        </div>
    </div>
    @endif

    {{-- BREADCRUMB --}}
    <div class="container">
        <nav class="breadcrumb-container">
            <ul class="breadcrumb-list">
                <li class="breadcrumb-item">
                    <a href="{{ url('/') }}" class="breadcrumb-link">
                        {{ getSetting('site_name') }}
                    </a>
                </li>
                <li class="breadcrumb-item">
                    <a href="{{ url($category === 'sport' ? 'judi-bola' : $category) }}"
                       class="breadcrumb-link">
                        {{ ucfirst($category) }}
                    </a>
                </li>
            </ul>
        </nav>
    </div>

    {{-- LIST PROVIDER --}}
    <div class="container">
        <div class="game__list">
            <div class="page-header">{{ strtoupper($category) }}</div>

            <div class="game-list-container">
                @forelse ($providers as $provider)
                <div class="game-holder">
                    <a onclick="routeNav('{{ url(($category === 'sport' ? 'judi-bola' : $category).'/'.$provider->provider_slug) }}')"
                       href="javascript:void(0)">
                        <div class="game-img">
                            <img loading="lazy"
                                 alt="{{ $provider->provider_name }}"
                                 src="{{ $provider->provider_image ?: asset('assets/images/provider/default.webp') }}"
                                 onerror="this.src='{{ asset('assets/images/provider/default.webp') }}'">

                            <div class="hover-play">
                                <h6>{{ $provider->provider_name }}</h6>
                                <i class="fi fi-sr-play"></i>
                            </div>
                        </div>
                    </a>
                </div>
                @empty
                <div class="text-center w-100 py-5">
                    <p>Tidak ada provider tersedia.</p>
                </div>
                @endforelse
            </div>
        </div>

        {{-- SEO --}}
        <div class="game__seo">
            <div class="seo-content showFooter">
                <h1>{{ ucfirst($category) }}</h1>
                <p>Mainkan {{ ucfirst($category) }} terbaik hanya di {{ getSetting('site_name') }}</p>
            </div>
        </div>
    </div>
</div>
@endsection