@extends('layouts.app')

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

@section('content')
<main class="my-2">
    <div class="container">
        <div class="row card-bread" style="margin-bottom: 0;">
            <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>
    <div class="container video-eps">
        <div class="items-start"> 
            <div class="video video-player-main">
                <video id="player" class="video-player-placeholder video-player-element" 
                    controls
                    controlsList="nodownload noplaybackrate noremoteplayback"
                    disablePictureInPicture
                    playsinline
                    webkit-playsinline
                    preload="metadata"
                    oncontextmenu="return false;">
                    <source src="{{ $video_url }}" type="video/mp4">
                    Browser Anda tidak mendukung tag video.
                </video>
                <div class="player-options d-flex">
                    <ul id="player-list" class="d-flex justify-content-between"> 
                        <li>
                            <input class="form-check-input" type="checkbox" id="autoplay-switch">
                            <label class="text-white" for="autoplay-switch">Auto Play</label>
                        </li>
                        <li>
                            <input class="form-check-input" type="checkbox" id="autonext-switch">
                            <label class="text-white" for="autonext-switch">Auto Next</label>
                        </li>
                        <li>
                            <a id="light-mode" href="javascript:;"><i class="bi bi-lightbulb-fill"></i> Light</a>
                        </li>
                        <li>
                            <a href="{{ !empty($data['prev_episode_url']) ? $data['prev_episode_url'] : 'javascript:void(0);' }}" class="{{ empty($data['prev_episode_url']) ? 'disabled' : 'active' }}">
                                <i class="{{ empty($data['prev_episode_url']) ? 'bi bi-slash-circle' : 'bi bi-chevron-double-left' }}"></i>
                                <span>Prev</span>
                            </a>
                            <span class="mx-2"></span>
                            <a href="{{ !empty($data['next_episode_url']) ? $data['next_episode_url'] : 'javascript:void(0);' }}" class="{{ empty($data['next_episode_url']) ? 'disabled' : 'active' }}">
                                <span>Next</span>
                                <i class="{{ empty($data['next_episode_url']) ? 'bi bi-slash-circle' : 'bi bi-chevron-double-right' }}"></i>
                            </a>
                        </li>
                        </ul> 
                    </div>
                <h2 class="h4 mt-3 mb-3 d-none d-md-block vid-title">
                    {{ $data['Title'] }} - Episode {{ $current_episode }}
                </h2>
                <a href="#" class="genre-tag d-none d-lg-block">{{ $category }}</a>
                <p class="video-info-desc mt-3 d-none d-lg-block">
                    {{ $data['Sinopsis'] }}
                </p>
            </div>
            
            <div class="video episode-sidebar-wrapper">
                <div class="episode-sidebar"> 
                    <div class="sidebar-header">
                        {{--<h5 class="fw-bold text-dark">Episode (1/{{ $total_episodes }})</h5>--}}
                    </div>
                    
                    @if (!empty($chunked_episodes))
                        <ul class="nav nav-tabs" id="episodeTabDesktop" 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 }}" data-bs-toggle="tab" 
                                            data-bs-target="#content-desktop-{{ $index }}" type="button">
                                        {{ $start_ep }}-{{ $end_ep }}
                                    </button>
                                </li>
                            @endforeach
                        </ul>
                        
                        <div class="tab-content pt-3" id="episodeTabContentDesktop">
                            @foreach ($chunked_episodes as $index => $chunk)
                                <div class="tab-pane fade @if($index == 0) show active @endif" id="content-desktop-{{ $index }}" style="overflow:hidden;">
                                    <div class="row row-cols-6 row-sidebar">
                                        @foreach ($chunk as $episode)
                                            @php
                                                $ep_num = $episode['Episode'];
                                                $permalink = $episode['Permalink'];
                                                $is_locked = $episode['is_locked'];
                                                $ep_active_class = ($ep_num == $current_episode) ? 'active' : '';
                                            @endphp
                                            <a href="{{$permalink}}" class="sidebar-ep {{$ep_active_class}}">
                                                <div class="col">
                                                    {{ $ep_num }}
                                                </div>
                                            </a>
                                        @endforeach
                                    </div>
                                </div>
                            @endforeach
                        </div>
                    @else
                        <p class="text-white-50 mt-3">Episode tidak ditemukan.</p>
                    @endif
                    {{--<div class="d-flex justify-content-between">
                        <h5 class="fw-bold total-eps">{{ $current_episode }}/{{ $total_episodes }}</h5>
                    </div>--}}
                </div>
            </div>
        </div>
    </div> 
    
    <div class="container mt-4 d-lg-none">
        
        <h2 class="section-title">
            Episode List 
            <span class="episode-count-title">({{ $total_episodes }} Episodes)</span>
        </h2>

        <div class="row row-cols-5 g-2">
            @if (!empty($ep_list))
                @for ($i = 0; $i < 9; $i++)
                    @if (!isset($ep_list[$i]))
                        @break
                    @endif
                    
                    @php
                        $episode = $ep_list[$i];
                        $ep_num = $episode['Episode'];
                        $permalink = $episode['Permalink'];
                        $is_locked = $episode['is_locked'];
                        $is_active = ($ep_num == $current_episode) ? 'active' : '';
                        $is_disabled = $is_locked ? 'disabled' : '';
                    @endphp
                    
                    <div class="col">
                        <a href="{{ $permalink }}" class="ep-preview-btn {{ $is_active }}">
                            {{ $ep_num }}
                        </a>
                    </div>
                @endfor
                
                @if ($total_episodes > 9)
                    <div class="col">
                        <a href="#" class="ep-preview-btn" data-bs-toggle="offcanvas" data-bs-target="#episodeOffcanvas">
                            More
                        </a>
                    </div>
                @endif
                
            @endif
        </div>
    </div>
    
    <div class="container">
        <div class="video-info-mobile">
            <h1>{{ $data['Title'] }} - Episode {{ $current_episode }}</h1>
            <a href="#" class="genre-tag d-lg-none">{{ $category }}</a>
            <p class="video-info-desc mt-3 d-lg-none">
                {{ $data['Sinopsis'] }}
            </p>
        </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>
    
    <div class="container d-none d-lg-block">
            
        <h2 class="section-title mb-3">
            Drama Terkait
            <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';
                    $ep_active_class = ($ep_num == $current_episode) ? 'active' : '';
                @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 {{$ep_active_class}}">
                        <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 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">
            @if (!empty($related_list))
                @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
            @else
                <p class="text-muted">Tidak ada rekomendasi.</p>
            @endif
        </div> 
    </div>
</main>

<nav class="bottom-nav d-lg-none">
    <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="{{ !empty($data['prev_episode_url']) ? $data['prev_episode_url'] : 'javascript:void(0);' }}" class="bottom-nav-item {{ empty($data['prev_episode_url']) ? 'disabled' : 'active' }}">
        <i class="{{ empty($data['prev_episode_url']) ? 'bi bi-slash-circle' : 'bi bi-chevron-double-left' }}"></i>
        <span>Prev</span>
    </a>
    <a href="javascript:;" id="btnPlay" class="bottom-nav-item active">
        <i class="bi bi-play-btn"></i>
        <span>Play</span>
    </a>
    <a href="javascript:;" id="btnPause" class="bottom-nav-item active hidden">
        <i class="bi bi-pause-btn"></i>
        <span>Pause</span>
    </a>
    <a href="{{ !empty($data['next_episode_url']) ? $data['next_episode_url'] : 'javascript:void(0);' }}" class="bottom-nav-item {{ empty($data['next_episode_url']) ? 'disabled' : 'active' }}">
        <i class="{{ empty($data['next_episode_url']) ? 'bi bi-slash-circle' : 'bi bi-chevron-double-right' }}"></i>
        <span>Next</span>
    </a>
    <a href="#download" class="bottom-nav-item">
        <i class="bi bi-cloud-arrow-down-fill"></i>
        <span>Download</span>
    </a>
</nav>

<div class="offcanvas offcanvas-bottom" tabindex="-1" id="episodeOffcanvas" aria-labelledby="episodeOffcanvasLabel">
    <div class="offcanvas-header">
        <h2 class="ep-title offcanvas-title" id="episodeOffcanvasLabel">{{ $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($chunked_episodes))
            <ul class="nav nav-tabs" id="episodeTabMobile" 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 }}" data-bs-toggle="tab" 
                                data-bs-target="#content-mobile-{{ $index }}" type="button">
                            {{ $start_ep }} - {{ $end_ep }}
                        </button>
                    </li>
                @endforeach
            </ul>
            <div class="tab-content pt-3" id="episodeTabContentMobile">
                @foreach ($chunked_episodes as $index => $chunk)
                    <div class="tab-pane fade @if($index == 0) show active @endif" id="content-mobile-{{ $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'];
                                    $ep_active_class = ($ep_num == $current_episode) ? 'active' : '';
                                @endphp
                                <div class="col ep_num {{$ep_active_class}}">
                                    <a href="{{$permalink }}" class="ep-grid-btn {{$ep_active_class}}">
                                        {{ $ep_num }}
                                    </a>
                                </div>
                            @endforeach
                        </div>
                    </div>
                @endforeach
            </div>
        @else
            <p class="text-muted mt-3">Episode tidak ditemukan.</p>
        @endif
    </div>
</div>
<div id="light-overlay"></div>
<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