@extends('layouts.app')

@section('title', $data['Title'] . ' - Episode ' . $current_episode . ' - ' . config('app.name'))
@section('description', 'Nonton ' . $data['Title'] . ' Episode ' . $current_episode . '. ' . Str::limit(strip_tags($data['Sinopsis']), 120))
@section('image', $data['Poster'])
@section('type', 'video.episode')

@section('content')

<style>
.iframe-container{position:relative;width:100%;height:0;padding-bottom:59%;overflow:hidden}.iframe-container iframe{position:absolute;top:0;left:0;width:100%;height:100%}@media only screen and (max-width:991px){.iframe-container{padding-bottom:56.25%}.iframe-container iframe{max-height:100vh}}@media only screen and (max-width:450px){.iframe-container{padding-bottom:100%}}a#ad-link.visible{opacity:1;visibility:visible}a#ad-link{text-decoration:none;position:absolute;top:0;left:0;width:100%;height:100%;z-index:999;cursor:pointer;opacity:0;visibility:hidden;transition:opacity 0.3s ease,visibility 0.3s ease}a#ad-link .message-box{transform:translate(-50%,-50%) scale(.95)}.message-box{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);width:80%;max-width:450px;padding:10px;text-align:center;color:#e0e0e0;background:#2b2b2b;border-radius:8px;box-shadow:0 4px 15px rgb(0 0 0 / .5);transition:opacity 0.3s ease,transform 0.3s ease}.message-box p{margin:8px 0;line-height:1.6}.message-box .warning{color:#ff0;font-weight:700;margin-top:20px;display:block;font-size:12px}
</style>
<script>
    const customPlayer = "{{config('app.custom_player')}}"
</script>
<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_url }}">{{ $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">
                @if(config('app.custom_player') || config('app.custom_player') !== '')
                <div id="player" class="video-player-placeholder">
                    <div class="iframe-container">
                        <iframe class="video-player-element" title="" src="{{config('app.custom_player')}}?host=direct&id={{ urlencode($video_url) }}&poster=&uid=1" width="640" height="320" loading="lazy" allow="fullscreen; accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture; geolocation; web-share; screen-wake-lock; idle-detection">
                        </iframe>
                        @if(config('app.directlink_video'))
                        <a style="opacity: 0;" id="ad-link" href="{{config('app.directlink_video_url')}}" target="_blank" rel="noopener noreferrer nofollow" class="visible">
                            <div class="message-box">
                                <p><strong>Klik Di Mana Saja untuk Memulai Film</strong></p>
                                <p style="font-size: 14px; opacity: 0;">
                                    <em>"Terima kasih sudah mengklik ku 1 kali, untuk menampilkan iklan dan <strong>Play Movie</strong>, mudah rezeki dan sehat terus buat kamu. Aamiin"</em>
                                </p>
                                <span class="warning">THIS PLAYER CONTAINS ADS</span>
                            </div>
                        </a>
                        @endif
                    </div>
                </div>
                @else
                <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>
                @if(config('app.directlink_video'))
                <a style="opacity: 0;" id="ad-link" href="{{config('app.directlink_video_url')}}" target="_blank" rel="noopener noreferrer nofollow" class="visible">
                    <div class="message-box">
                        <p><strong>Klik Di Mana Saja untuk Memulai Film</strong></p>
                        <p style="font-size: 14px; opacity: 0;">
                            <em>"Terima kasih sudah mengklik ku 1 kali, untuk menampilkan iklan dan <strong>Play Movie</strong>, mudah rezeki dan sehat terus buat kamu. Aamiin"</em>
                        </p>
                        <span class="warning">THIS PLAYER CONTAINS ADS</span>
                    </div>
                </a>
                @endif
                @endif
                <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>
                    @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
                <h2 class="h4 mt-3 mb-3 d-none d-md-block vid-title">
                    {{ $data['Title'] }} - Episode {{ $current_episode }}
                </h2>
                <div class="mb-4 d-none d-lg-block">
                @foreach($data['info']['typeTwoList'] as $genre)
                    <a href="{{ url($data['info']['simpleLanguage'] . '/genres/' . $genre['id']) }}" class="genre-tag">
                        {{ $genre['name'] }}
                    </a>
                @endforeach
                </div>
                <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">
            {{ __('translate.ep-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>
            <div class="mb-4 d-lg-none">
            @foreach($data['info']['typeTwoList'] as $genre)
                <a href="{{ url($data['info']['simpleLanguage'] . '/genres/' . $genre['id']) }}" class="genre-tag">
                    {{ $genre['name'] }}
                </a>
            @endforeach
            </div>
            <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">
            {{ __('translate.related') }}
            <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>{{ __('translate.more') }} <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">{{ __('translate.recommendation') }}</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="/" class="bottom-nav-item">
        <i class="bi bi-house"></i>
        <span>Home</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>
@if(config('app.directlink_video'))
<script>
    'use strict';
    document.addEventListener('DOMContentLoaded', function() {
        var adLink = document.getElementById('ad-link');
        var storageKey = 'dramaVidLink';
        var cooldownMinutes = "{{config('app.directlink_video_cool')}}";
        function isLocalStorageSupported() {
            try {
                var testKey = 'test';
                localStorage.setItem(testKey, testKey);
                localStorage.removeItem(testKey);
                return true;
            } catch (e) {
                return false;
            }
        }
        function showAdIfNeeded() {
            if (!isLocalStorageSupported()) {
                adLink.classList.add('visible');
                return;
            }
            var lastClickedTime = parseInt(localStorage.getItem(storageKey), 10);
            var now = new Date().getTime();
            if (isNaN(lastClickedTime) || now > lastClickedTime) {
                adLink.classList.add('visible');
            }
        }
        function handleAdClick() {
            adLink.classList.remove('visible');
            if (isLocalStorageSupported()) {
                var now = new Date().getTime();
                var expiryTime = now + (cooldownMinutes * 60 * 1000);
                localStorage.setItem(storageKey, expiryTime);
            }
        }
        showAdIfNeeded();
        adLink.addEventListener('click', handleAdClick);
    });
</script>
@endif
<script>
document.addEventListener('DOMContentLoaded', function() {
    const dramaKey = "{{ $data['Title'] }}"; 
    const watchData = {
        id: btoa(dramaKey).substring(0, 16),
        title: dramaKey,
        episode: "{{ $current_episode }}",
        poster: "{{ $data['Poster'] }}",
        url: window.location.href,
        timestamp: new Date().getTime()
    };
    let history = JSON.parse(localStorage.getItem('watch_history')) || [];
    history = history.filter(item => item.title !== watchData.title);
    history.unshift(watchData);
    if (history.length > 24) {
        history.pop();
    }
    localStorage.setItem('watch_history', JSON.stringify(history));
});
</script>
@endsection