@extends('layouts.app')

@section('title', 'Genres '.$genre_list['genres']['0']['name'].' - ' . config('app.name'))

@section('content')
<main class="container mt-3">
    <div class="kategori-container">
        <div class="kategori-wrapper" id="kategori-wrapper">
            @if($lang == 'in')
            <a href="javascript:void();" class="kategori-item aktif">Semua</a>
            @else
            <a href="javascript:void();" class="kategori-item aktif">All</a>
            @endif
    		@foreach($genre_list['genres'] as $genres)
    		<a href="{{$genres['permalink']}}" class="kategori-item">{{$genres['name']}}</a>
    		@endforeach
    	</div>
    	<button class="kategori-toggle-btn btn btn-light d-lg-none" type="button" id="kategori-toggle">
            <i class="bi bi-chevron-down"></i>
        </button>
    </div>
    <div class="d-flex justify-content-between">
        <h4 class="section-title">Genres {{$genre_list['genres']['0']['name']}}</h4>
    </div>
    <div class="row row-cols-3 row-cols-sm-3 row-cols-md-4 row-cols-lg-6 g-2">
        @foreach($result['results'] as $data)
            @php $genre = implode(', ', $data['Genre']); @endphp
            <div class="col">
                <div class="card card-drama">
                    @php
                    $permalink = ltrim($data['Permalink'], '/');
                    if (str_starts_with($permalink, $lang . '/')) {
                        $finalUrl = $permalink;
                    } else {
                        $finalUrl = $lang . '/' . $permalink;
                    }
                    @endphp
                    <a href="{{ url($finalUrl) }}" alt="{{ $data['Title'] }}">
                        <div class="position-relative">
                            <img src="{{ $data['Poster'] }}" class="card-img-top" alt="{{ $data['Title'] }}">
                            @if(!empty($data['Total_Episode']))
                                <span class=" card-img-overlay-top d-none d-sm-block">{{ $data['Total_Episode'] }} Episode</span>
                            @endif
                        </div>
                        <div class="card-body">
                            <h2 class="card-title">{{ $data['Title'] }}</h2>
                            <p class="card-text d-none d-sm-block">{{ $genre }}</p>
                        </div>
                    </a>
                </div>
            </div>
        @endforeach
    </div> 
    <x-pagination :current-page="$current_page" :total-pages="$total_pages" :base-url="$base_url" />
</main>
@endsection