@extends('layouts.app')

@section('title', $data['Title'] . ' - ' . config('app.name'))

@section('content')
    <main class="container my-4">
        <div class="row card-bread">
            <div class="col-12">
                <nav aria-label="breadcrumb">
                    <ol class="breadcrumb">
                        <li class="breadcrumb-item"><a href="{{ route('home', ['lang' => $lang]) }}">Home</a></li>
                        <span class="separator"><i class="bi bi-chevron-right"></i></span>
                        <li class="breadcrumb-item"><a href="#">{{ $category }}</a></li>
                        <span class="separator"><i class="bi bi-chevron-right"></i></span>
                        <li class="breadcrumb-item active" aria-current="page">{{ $data['Title'] }}</li>
                    </ol>
                </nav>
                <hr class="line-bread">
            </div>
        </div>

        <div class="row g-4 card-content">

            <div class="col-md-3 text-center">
                <img class="single-poster" src="{{ $data['Poster'] }}" alt="{{ $data['Title'] }}">
                <div class="d-flex justify-content-center d-none d-lg-block play-bow">
                    <a href="{{ $data['Permalink_Episode'] }}" class="btn btn-play-now btn-play-top btn-lg">
                        <i class="bi bi-play-circle-fill"></i>
                        <span>Play Now</span>
                    </a>
                </div>
            </div>

            <div class="single-content col-md-8 d-flex flex-column text-center text-md-start">
                
                <h1 class="single-title">{{ $data['Title'] }}</h1>
                
                <p class="episode-count">{{ $data['Total_Episode'] }}</p>

                <p class="synopsis d-none d-sm-block">
                    {{ $data['Sinopsis'] }}
                </p>
                <div class="mb-4">
                @if (!empty($data['Genre']) && !empty($data['Genre_ID']))
                @foreach($data['Genre'] as $key => $genreName)
                    @if(isset($data['Genre_ID'][$key]))
                        <a href="{{ url($lang . '/genres/' . $data['Genre_ID'][$key]) }}" class="genre-tag">
                            {{ $genreName }}
                        </a>
                    @endif
                @endforeach
                @endif
                </div>

                <div class="d-flex justify-content-center d-lg-none play-bow">
                    <a href="{{ $data['Permalink_Episode'] }}" class="btn btn-play-now btn-lg">
                        <i class="bi bi-play-circle-fill"></i>
                        <span>Play Now</span>
                    </a>
                </div>

                <div class="share-section d-none d-md-flex">
                    <span class="share-text">Share:</span>
                    <a href="https://www.facebook.com/sharer/sharer.php?u={{ urlencode(url()->current()) }}" 
                       class="share-icon" 
                       target="_blank" rel="noopener noreferrer" title="Bagikan ke Facebook">
                       <i class="bi bi-facebook"></i>
                    </a>
                
                    <a href="https://twitter.com/intent/tweet?url={{ urlencode(url()->current()) }}&text={{ urlencode($data['Title']) }}" 
                       class="share-icon" 
                       target="_blank" rel="noopener noreferrer" title="Bagikan ke Twitter/X">
                       <i class="bi bi-twitter-x"></i>
                    </a>
                
                    <a href="https://t.me/share/url?url={{ urlencode(url()->current()) }}&text={{ urlencode($data['Title']) }}" 
                       class="share-icon" 
                       target="_blank" rel="noopener noreferrer" title="Bagikan ke Telegram">
                       <i class="bi bi-telegram"></i>
                    </a>
                
                    <a href="#" id="copy-link-button" class="share-icon copy-link-button" 
                       data-permalink="{{ url()->current() }}" 
                       title="Salin Link">
                       <i class="bi bi-link-45deg"></i>
                    </a>
                </div>

            </div>
        </div>
        <div class="my-5"></div>
        <div class="row d-sm-none">
            <div class="col-12">
                <h2 class="section-title">Introduction</h2>
                <p class="single-synopsis">
                    {{ $data['Sinopsis'] }}
                </p>
            </div>
        </div>
    
        <div class="container my-5 d-none d-lg-block">
            
            <h2 class="section-title mb-3">
                Episode List 
                <span class="episode-count-title">({{ $total_episodes }} Episodes)</span>
            </h2>
    
            <div class="row row-cols-2 row-cols-md-4 row-cols-lg-6 g-1">
                
                @foreach($ep_list as $index => $episode)
                    @php
                        $poster = $episode['Poster'];
                        $title = $episode['Title'];
                        $ep_num = $episode['Episode'];
                        $permalink = $episode['Permalink'];
                        $col_class = ($index < 11) ? '' : 'd-none hidden-ep';
                    @endphp
                
                <div class="col {{ $col_class }}">
                    <a href="{{ $permalink }}" class="ep-item">
                        <img src="{{ $poster }}" alt="Poster {{ $title }} - Episode {{ $ep_num }}" class="ep-poster">
                        <div class="ep-info">
                            <h5 class="ep-title" title="{{ $title }}">{{ $title }}</h5>
                            <span class="ep-number">Episode.{{ $ep_num }}</span>
                        </div>
                    </a>
                </div>
                
                @endforeach
                
                @if ($total_episodes > 11)
                <div class="col" id="view-more-col">
                    <a href="#" class="ep-item view-more-btn" id="view-more-btn">
                        <span>Lihat lebih banyak <i class="bi bi-arrow-down-circle-fill"></i></span>
                    </a>
                </div>
                @endif
            </div>
        </div>
        
        <div class="container my-1 d-lg-none ep-list-trigger-mobile">
            <div class="d-flex justify-content-between" data-bs-toggle="offcanvas" data-bs-target="#episodeOffcanvas">
                <a href="#" class="d-block d-md-none">
                    <span>Episode List ({{ $total_episodes }} Episodes)</span>
                </a>
                <i class="bi bi-chevron-right"></i>
            </div>
            
            <div class="d-none d-md-block">
                <div class="row row-cols-2 row-cols-md-4 row-cols-lg-6 g-3">
                    @foreach($ep_list as $index => $episode)
                        @php
                            $poster = $episode['Poster'];
                            $title = $episode['Title'];
                            $ep_num = $episode['Episode'];
                            $permalink = $episode['Permalink'];
                            $col_class = ($index < 11) ? '' : 'd-none hidden-ep';
                        @endphp
                    
                    <div class="col {{ $col_class }}">
                        <a href="{{ $permalink }}" class="ep-item">
                            <img src="{{ $poster }}" alt="Poster" class="ep-poster">
                            <div class="ep-info">
                                <h5 class="ep-title" title="{{ $title }}">{{ $title }}</h5>
                                <span class="ep-number">EP.{{ $ep_num }}</span>
                            </div>
                        </a>
                    </div>
                    
                    @endforeach
                    
                    @if ($total_episodes > 11)
                    <div class="col" id="view-more-col">
                        <a href="#" class="ep-item view-more-btn" id="view-more-btn">
                            <span>View More</span>
                            <i class="bi bi-chevron-down"></i>
                        </a>
                    </div>
                    @endif
                </div>
            </div>
        </div>
        
        <div class="offcanvas offcanvas-bottom" tabindex="-1" id="episodeOffcanvas" aria-labelledby="episodeOffcanvasLabel">
            <div class="offcanvas-header">
                <h2 class="ep-title offcanvas-title" id="episodeOffcanvasLabel">{{ $ep_list[0]['Title'] ?? $data['Title'] }}</h2>
                <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
            </div>
            
            <div class="offcanvas-body pt-0">
                @if (!empty($ep_list))
                    @php $chunked_episodes = array_chunk($ep_list, 50); @endphp
        
                <ul class="nav nav-tabs" id="episodeTab" role="tablist">
                    @foreach ($chunked_episodes as $index => $chunk)
                        @php
                            $start_ep = $chunk[0]['Episode'];
                            $end_ep = end($chunk)['Episode'];
                            $is_active = ($index == 0) ? 'active' : '';
                        @endphp
                        <li class="nav-item" role="presentation">
                            <button class="nav-link {{ $is_active }}" id="tab-{{ $index }}" data-bs-toggle="tab" 
                                    data-bs-target="#content-{{ $index }}" type="button" role="tab" 
                                    aria-controls="content-{{ $index }}" aria-selected="{{ ($index == 0) ? 'true' : 'false' }}">
                                {{ $start_ep }} - {{ $end_ep }}
                            </button>
                        </li>
                    @endforeach
                </ul>
        
                <div class="tab-content pt-3" id="episodeTabContent">
                    @foreach ($chunked_episodes as $index => $chunk)
                        @php $is_active = ($index == 0) ? 'show active' : ''; @endphp
                        <div class="tab-pane fade {{ $is_active }}" id="content-{{ $index }}" role="tabpanel" aria-labelledby="tab-{{ $index }}">
                            <div class="row row-cols-6 g-2">
                                @foreach ($chunk as $episode)
                                    @php
                                        $ep_num = $episode['Episode'];
                                        $permalink = $episode['Permalink'];
                                        $is_locked = $episode['is_locked'];
                                    @endphp
                                    <div class="col ep_num">
                                        <a href="{{$permalink }}" class="ep-grid-btn">
                                            {{ $ep_num }}
                                        </a>
                                    </div>
                                @endforeach
                            </div>
                        </div>
                    @endforeach
                </div>
                @endif
            </div>
        </div>
        <div class="share-section d-lg-none">
            <span class="share-text">Share:</span>
            <a href="https://www.facebook.com/sharer/sharer.php?u={{ urlencode(url()->current()) }}" 
               class="share-icon" 
               target="_blank" rel="noopener noreferrer" title="Bagikan ke Facebook">
               <i class="bi bi-facebook"></i>
            </a>
        
            <a href="https://twitter.com/intent/tweet?url={{ urlencode(url()->current()) }}&text={{ urlencode($data['Title']) }}" 
               class="share-icon" 
               target="_blank" rel="noopener noreferrer" title="Bagikan ke Twitter/X">
               <i class="bi bi-twitter-x"></i>
            </a>
        
            <a href="https://t.me/share/url?url={{ urlencode(url()->current()) }}&text={{ urlencode($data['Title']) }}" 
               class="share-icon" 
               target="_blank" rel="noopener noreferrer" title="Bagikan ke Telegram">
               <i class="bi bi-telegram"></i>
            </a>
        
            <a href="#" id="copy-link-button" class="share-icon copy-link-button" 
               data-permalink="{{ url()->current() }}" 
               title="Salin Link">
               <i class="bi bi-link-45deg"></i>
            </a>
        </div>
        
        <div class="container mt-5 related-video">
            <div class="d-flex justify-content-between">
                <h4 class="section-title">Direkomendasikan Untukmu</h4>
            </div>
            <div class="row row-cols-3 row-cols-sm-3 row-cols-md-4 row-cols-lg-6 g-2">
                @foreach($related_list as $related)
                <div class="col">
                    <div class="card card-drama">
                        <a href="{{ $related['Permalink'] }}" alt="{{ $related['Title'] }}">
                            <div class="position-relative">
                                <img src="{{ $related['Poster'] }}" class="card-img-top" alt="{{ $related['Title'] }}">
                                <span class=" card-img-overlay-top d-none d-sm-block">{{ $related['Total_Episode'] }} Episode</span>
                            </div>
                            <div class="card-body">
                                <h2 class="card-title">{{ $related['Title'] }}</h2>
                                <p class="card-text d-none d-sm-block">{{ $related['Genre'] }}</p>
                            </div>
                        </a>
                    </div>
                </div>
                @endforeach
            </div> 
        </div>
    </main>

    <nav class="bottom-nav">
        <a href="javascript:;" data-bs-toggle="offcanvas" data-bs-target="#episodeOffcanvas" class="bottom-nav-item">
            <i class="bi bi-music-note-list"></i>
            <span>Episodes</span>
        </a>
        <a href="{{ $data['Permalink_Episode'] }}" class="bottom-nav-item active">
            <i class="bi bi-play-btn"></i>
            <span>Play</span>
        </a>
        <a href="#download" class="bottom-nav-item">
            <i class="bi bi-cloud-arrow-down-fill"></i>
            <span>Download</span>
        </a>
    </nav>
<div id="copy-toast" class="toast-notification">
    <i class="bi bi-check-circle-fill"></i>
    Link copied to clipboard!
</div>
<script type="text/javascript">
const nextUrl = @json($data['next_episode_url'] ?? null);
</script>
@endsection