@extends('layouts.app')

@section('title', 'Nonton Drama Pendek Gratis Subtitle Indonesia - ' . config('app.name'))
@section('description', 'Platform streaming drama pendek terlengkap dengan subtitle Indonesia. Nonton ribuan episode drama viral gratis tanpa iklan hanya di ' . config('app.name') . '.')
@section('image', env('OG_IMAGE', '/images/logo-web.png'))
@section('type', 'website')

@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.latest') }}</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_latest = $data['drama_terbaru'] ?? [];@endphp
        @foreach($data_latest as $latest)
            @php $genre = implode(', ', $latest['Genre']); @endphp
            <div class="col">
                <div class="card card-drama">
                    <div class="position-relative">
                        <a href="{{ $latest['Permalink'] }}" alt="{{ $latest['Title'] }}">
                            <img src="{{ $latest['Poster'] }}" class="card-img-top" alt="{{ $latest['Title'] }}">
                        </a>
                        <span class=" card-img-overlay-top d-none d-sm-block">{{ $latest['Jumlah_Episode'] }}</span>
                    </div>
                    <div class="card-body">
                        <a href="{{ $latest['Permalink'] }}" alt="{{ $latest['Title'] }}">
                            <h4 class="card-title">{{ $latest['Title'] }}</h4>
                        </a>
                        <div class="d-flex flex-wrap">
                            @foreach($latest['Genres'] as $genre)
                                <a class="card-text d-none d-sm-block" href="{{ url($genre['permalink']) }}">
                                    {{ $genre['name'] }}{{ !$loop->last ? ',' : '' }}
                                </a>
                                @if(!$loop->last)
                                    &nbsp; @endif
                            @endforeach
                        </div>
                    </div>
                </div>
            </div>
        @endforeach
    </div> 
    
    <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)
            <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>
                        <div class="d-flex flex-wrap">
                            @foreach($seen['Genre'] as $key => $genreName)
                                @if(isset($seen['Genre_ID'][$key]))
                                    <a href="{{ url($lang . '/genres/' . $seen['Genre_ID'][$key]) }}" class="card-text d-none d-sm-inline-block">
                                        {{ $genreName }}{{ !$loop->last ? ',' : '' }}
                                    </a>
                                    
                                    @if(!$loop->last)
                                        <span class="me-1"></span> @endif
                                @endif
                            @endforeach
                        </div>
                    </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)
            <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>
                        <div class="d-flex flex-wrap">
                            @foreach($trend['Genre'] as $key => $genreName)
                                @if(isset($trend['Genre_ID'][$key]))
                                    <a href="{{ url($lang . '/genres/' . $trend['Genre_ID'][$key]) }}" class="card-text d-none d-sm-inline-block">
                                        {{ $genreName }}{{ !$loop->last ? ',' : '' }}
                                    </a>
                                    
                                    @if(!$loop->last)
                                        <span class="me-1"></span> @endif
                                @endif
                            @endforeach
                        </div>
                    </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)
            <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>
                        <div class="d-flex flex-wrap">
                            @foreach($drama['Genre'] as $key => $genreName)
                                @if(isset($drama['Genre_ID'][$key]))
                                    <a href="{{ url($lang . '/genres/' . $drama['Genre_ID'][$key]) }}" class="card-text d-none d-sm-inline-block">
                                        {{ $genreName }}{{ !$loop->last ? ',' : '' }}
                                    </a>
                                    
                                    @if(!$loop->last)
                                        <span class="me-1"></span> @endif
                                @endif
                            @endforeach
                        </div>
                    </div>
                </div>
            </div>
        @endforeach
    </div> 
</main>
@endsection