@extends('includes.layouts')

@section('content')
    <div class="iq-main-slider site-video">
        <div class="container-fluid">
            <div class="row">
                <div class="col-lg-12">
                    <div class="pt-0">
                        <video class="video d-block" id="streamingVideo" controls autoplay disablePictureInPicture controlsList="nodownload" oncontextmenu="return false;">
                            <source id="update_video_source" src="" type="video/mp4">
                        </video>
                    </div>
                    @if($prev_episode)
                        <a href="{{ $prev_episode }}" class="swiper-button-prev" style="top: 50% !important; width: 1.80em !important; left: 16px;"></a>
                    @endif
                    @if($next_episode)
                        <a href="{{ $next_episode }}" class="swiper-button-next" style="top: 50% !important; width: 1.80em !important; right: 16px"></a>
                    @endif
                </div>
            </div>
        </div>
    </div>
    @if($other_episodes)
        <section class="main-content movi" style="margin-top: 30px; margin-bottom: 30px;">
            <div class="container-fluid">
                <div class="row" style="margin-bottom: 30px;">
                    <div class="col-sm-12 overflow-hidden">
                        <div class="d-flex align-items-center justify-content-between">
                            <h4 class="main-title">Autres épisodes</h4>
                        </div>
                    </div>
                </div>
                <!-- Swiper -->
                <div id="episodes" class=" tab-pane animated fadeInUp active show">
                    <div class="row episodes list-inline p-0 mb-0 iq-rtl-direction">
                        @foreach($other_episodes as $k => $episode)
                            <div class="e-item col-lg-3 col-sm-12 col-md-6">
                                <div class="block-image position-relative">
                                    <a href="{{ route('watch.show', ['showSeasonEpisode' => $episode->id]) }}">
                                        <img src="@if($episode->image) {{ $episode->image }} @else {{ asset('images/episode.jpg') }} @endif" class="img-fluid img-zoom" alt="" loading="lazy">
                                    </a>
                                    @php
                                        $title = '';
                                        if($episode->season->number < 10) {
                                           $title .= 'S0'.$episode->season->number ;
                                        } else {
                                           $title .= 'S'.$$episode->season->number ;
                                        }

                                       if($episode->id < 10) {
                                           $title .= 'E0'.$episode->episode_number;
                                        } else {
                                           $title .= 'E'.$episode->episode_number;
                                        }
                                    @endphp

                                    <div class="episode-number">{{ $title}}</div>
                                    <div class="episode-play-info">
                                        <div class="episode-play">
                                            <a href="{{ route('watch.show', ['showSeasonEpisode' => $episode->id]) }}">
                                                <i class="ri-play-fill"></i>
                                            </a>
                                        </div>
                                    </div>
                                </div>
                                <div class="epi-desc p-3">
                                    <div class="d-flex align-items-center justify-content-between mb-3">
                                        <span class="text-white rel-date">{{ $episode->duration }}</span>
                                    </div>
                                    <a href="{{ route('watch.show', ['showSeasonEpisode' => $episode->id]) }}">
                                        <h5 class="epi-name text-white mb-0">{{ $episode->title }}</h5>
                                    </a>
                                </div>
                            </div>
                        @endforeach
                    </div>
                </div>
            </div>
        </section>
    @endif
@endsection

@section('js')
    <script>
        $(document).ready(function () {
            var streamingVideo = document.getElementById('streamingVideo');
            var next_episode = '{{ $next_episode}}';
            if (next_episode) {
                streamingVideo.addEventListener('ended', function() {
                    window.location = next_episode;
                });
            }

            const player = document.querySelector("#update_video_source");
            const vid = player.parentElement;

            $.ajax({
                // type: "GET",
                headers: {
                    "Content-Type": "application/json",
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                url: '{{ route('find.video') }}',
                data: {secret : '{{ $showSeasonEpisode->id }}&&{{ Auth::id() }}', entity : 'episode'},
                success: function(x) {
                    let ct = vid.currentTime;
                    player.setAttribute("src", x.url);
                    vid.load();
                    vid.addEventListener(
                        "loadedmetadata",
                        function() {
                            this.currentTime = ct;
                        },
                        false
                    );

                    const promise = vid.play();
                    if(promise !== undefined){
                        promise.then(() => {
                            // Autoplay started
                        }).catch(error => {
                            // Autoplay was prevented.
                        });
                    }
                }
            });
        });
    </script>
@endsection