@extends('layouts.app')

@section('title', 'Home - ' . config('app.name'))

@section('content')
<section class="container mt-2 mb-5">
    @php $data_hero = $data['banner'] ?? []; @endphp
    
    @if(config('app.ads_home'))
    <div class="row g-0 mb-2">
        <div class="col-12">
            <a href="{{config('app.ads_link_url_full')}}">
              <img src="{{config('app.ads_image_url_full')}}" class="img-fluid w-100" alt="Banner Full">
            </a>
        </div>
    </div>
    @endif
    
    <div class="d-none d-lg-block">
        @if (isset($data_hero) && count($data_hero) >= 3)
            @php
                $main_item = $data_hero[0];
                $main_genre = isset($main_item['Genre']) ? implode(', ', $main_item['Genre']) : '';
                $genreID = isset($main_item['Genre_ID']) ? implode(', ', $main_item['Genre_ID']) : '';
                $side_item_1 = $data_hero[1];
                $side_item_2 = $data_hero[2];
            @endphp
            <div class="row g-4">
                <div class="col-lg-8">
                    <div class="row hero-main-item">
                        <div class="col-md-4">
                            <a href="{{ $main_item['Permalink'] }}" alt="{{ $main_item['Title'] }}">
                                <img src="{{ $main_item['Poster'] }}" alt="{{ $main_item['Title'] }}">
                            </a>
                        </div>
                        <div class="col-md-8 d-flex flex-column justify-content-center hero-text">
                            <a href="{{ $main_item['Permalink'] }}" alt="{{ $main_item['Title'] }}">
                                <h1>{{ $main_item['Title'] }}</h1>
                            </a>
                            <p class="episode-count">{{ $main_item['Total_Episode'] }} Episode</p>
                            <p class="synopsis">{{ $main_item['Synopsis'] }}</p>
                            @if (!empty($main_item['Genre']) && !empty($main_item['Genre_ID']))
                            <span class="">
                            @foreach($main_item['Genre'] as $key => $genreName)
                                @if(isset($main_item['Genre_ID'][$key]))
                                    
                                        <a href="{{ url($lang . '/genres/' . $main_item['Genre_ID'][$key]) }}" class="genre">
                                            {{ $genreName }}
                                        </a>
                                    
                                @endif
                            @endforeach
                            </span>
                            @endif
                        </div>
                    </div>
                </div>

                <div class="col-lg-4 d-flex flex-column justify-content-center gap-3">
                    <div class="hero-side-item">
                        <a href="{{ $side_item_1['Permalink'] }}" class="text-decoration-none">
                            <img src="{{ $side_item_1['Poster'] }}" alt="{{ $side_item_1['Title'] }}">
                        </a>
                        <div class="hero-text">
                             <a href="{{ $side_item_1['Permalink'] }}" class="text-decoration-none">
                                <h2>{{ $side_item_1['Title'] }}</h2>
                            </a>
                            <p class="episode-count">{{ $side_item_1['Total_Episode'] }} Episode</p>
                            <p class="synopsis">{{ $side_item_1['Synopsis'] }}</p>
                        </div>
                    </div>
                    <div class="hero-side-item">
                        <a href="{{ $side_item_2['Permalink'] }}" class="text-decoration-none">
                            <img src="{{ $side_item_2['Poster'] }}" alt="{{ $side_item_2['Title'] }}">
                        </a>
                        <div class="hero-text">
                            <a href="{{ $side_item_2['Permalink'] }}" class="text-decoration-none">
                                <h2>{{ $side_item_2['Title'] }}</h2>
                            </a>
                            <p class="episode-count">{{ $side_item_2['Total_Episode'] }} Episode</p>
                            <p class="synopsis">{{ $side_item_2['Synopsis'] }}</p>
                        </div>
                    </div>
                </div>
            </div>
        @else
            <div class="col-12"><p>Data unggulan tidak cukup untuk ditampilkan.</p></div>
        @endif
    </div>

    <div class="d-lg-none">
        @if (!empty($data_hero))
        <div id="mobileHeroSlider" class="carousel slide" data-bs-ride="carousel">
            <div class="carousel-indicators" style="bottom: -30px;">
                @foreach ($data_hero as $index => $hero_item)
                    <button type="button" data-bs-target="#mobileHeroSlider" data-bs-slide-to="{{ $index }}" 
                        class="@if($loop->first) active @endif" 
                        aria-current="@if($loop->first) true @else false @endif" 
                        aria-label="Slide {{ $index + 1 }}">
                    </button>
                @endforeach
            </div>
            <div class="carousel-inner">
                @foreach ($data_hero as $index => $hero_item)
                <div class="carousel-item @if($loop->first) active @endif">
                    <div class="hero-side-item slide">
                        <a href="{{ $hero_item['Permalink'] }}" class="text-decoration-none">
                            <img src="{{ $hero_item['Poster'] }}" alt="{{ $hero_item['Title'] }}">
                        </a>
                        <div class="hero-text">
                            <a href="{{ $hero_item['Permalink'] }}" class="text-decoration-none">
                                <h2>{{ $hero_item['Title'] }}</h2>
                            </a>
                            <p class="episode-count">{{ $hero_item['Total_Episode'] }} Episode</p>
                            <p class="synopsis">{{ $hero_item['Synopsis'] }}</p>
                        </div>
                    </div>
                </div>
                @endforeach
            </div>
        </div>
        @endif
    </div>
    
    @if(config('app.ads_home'))
    <div class="row g-1 mt-4">
        <div class="col-lg-6">
            <a href="{{config('app.ads_link_url_half1')}}">
              <img src="{{config('app.ads_image_url_half1')}}" class="img-fluid" alt="Banner Half">
            </a>
        </div>
        <div class="col-lg-6">
            <a href="{{config('app.ads_link_url_half2')}}">
              <img src="{{config('app.ads_image_url_half2')}}" class="img-fluid" alt="Banner Half">
            </a>
        </div>
    </div>
    @endif
    
</section>

<main class="container mt-5">
    <div class="d-flex justify-content-between">
        <h3 class="section-title">{{ __('translate.must-sees') }}</h3>
        <a href="/{{$lang}}/browse" class="see-all" aria-label="See All"><span class="see-text">{{ __('translate.more') }}</span> <i class="bi bi-chevron-right"></i></a>
    </div>
    <div class="row row-cols-3 row-cols-sm-3 row-cols-md-4 row-cols-lg-6 g-2">
        @php $data_seen = $data['wajib_ditonton'] ?? []; @endphp
        @foreach($data_seen as $seen)
            @php $genre = implode(', ', $seen['Genre']); @endphp
            <div class="col">
                <div class="card card-drama">
                    <div class="position-relative">
                        <a href="{{ $seen['Permalink'] }}" alt="{{ $seen['Title'] }}">
                            <img src="{{ $seen['Poster'] }}" class="card-img-top" alt="{{ $seen['Title'] }}">
                        </a>
                        <span class=" card-img-overlay-top d-none d-sm-block">{{ $seen['Total_Episode'] }} Episode</span>
                    </div>
                    <div class="card-body">
                        <a href="{{ $seen['Permalink'] }}" alt="{{ $seen['Title'] }}">
                            <h4 class="card-title">{{ $seen['Title'] }}</h4>
                        </a>
                        <p class="card-text d-none d-sm-block">{{ $genre }}</p>
                    </div>
                </div>
            </div>
        @endforeach
    </div> 

    <div class="d-flex justify-content-between">
        <h3 class="section-title">{{ __('translate.trending') }}</h3>
        <a href="/{{$lang}}/browse" class="see-all" aria-label="See All"><span class="see-text">{{ __('translate.more') }}</span> <i class="bi bi-chevron-right"></i></a>
    </div>
    <div class="row row-cols-3 row-cols-sm-3 row-cols-md-4 row-cols-lg-6 g-2">
        @php $data_trend = $data['sedang_tren'] ?? []; @endphp
        @foreach($data_trend as $trend)
            @php $genre = implode(', ', $trend['Genre']); @endphp
            <div class="col">
                <div class="card card-drama">
                    <div class="position-relative">
                        <a href="{{ $trend['Permalink'] }}" alt="{{ $trend['Title'] }}">
                            <img src="{{ $trend['Poster'] }}" class="card-img-top" alt="{{ $trend['Title'] }}">
                        </a>
                        <span class=" card-img-overlay-top d-none d-sm-block">{{ $trend['Total_Episode'] }} Episode</span>
                    </div>
                    <div class="card-body">
                        <a href="{{ $trend['Permalink'] }}" alt="{{ $trend['Title'] }}">
                            <h4 class="card-title">{{ $trend['Title'] }}</h4>
                        </a>
                        <p class="card-text d-none d-sm-block">{{ $genre }}</p>
                    </div>
                </div>
            </div>
        @endforeach
    </div> 

    <div class="d-flex justify-content-between">
        <h3 class="section-title">{{ __('translate.hidden-gems') }}</h3>
        <a href="/{{$lang}}/browse" class="see-all" aria-label="See All"><span class="see-text">{{ __('translate.more') }}</span> <i class="bi bi-chevron-right"></i></a>
    </div>
    <div class="row row-cols-3 row-cols-sm-3 row-cols-md-4 row-cols-lg-6 g-2">
        @php $data_drama = $data['drama_menarik'] ?? []; @endphp
        @foreach($data_drama as $drama)
            @php $genre = implode(', ', $drama['Genre']); @endphp
            <div class="col">
                <div class="card card-drama">
                    <div class="position-relative">
                        <a href="{{ $drama['Permalink'] }}" alt="{{ $drama['Title'] }}">
                            <img src="{{ $drama['Poster'] }}" class="card-img-top" alt="{{ $drama['Title'] }}">
                        </a>
                        <span class=" card-img-overlay-top d-none d-sm-block">{{ $drama['Total_Episode'] }} Episode</span>
                    </div>
                    <div class="card-body">
                        <a href="{{ $drama['Permalink'] }}" alt="{{ $drama['Title'] }}">
                            <h4 class="card-title">{{ $drama['Title'] }}</h4>
                        </a>
                        <p class="card-text d-none d-sm-block">{{ $genre }}</p>
                    </div>
                </div>
            </div>
        @endforeach
    </div> 
</main>
@endsection