@extends('layouts.app',['ver' => 2])

@section('content')

<style>
 .plyr--video .plyr__controls{
     padding-top:calc(var(--plyr-control-spacing, 700px)*3.5);

 }
 
 .plyr--video .plyr__controls {
  background: linear-gradient(to top, #000000bf, #0000);
  background-repeat: no-repeat;
  background-size: 100% 2%; /* Only 20% height */
  background-position: bottom; /* Position it at the bottom */
}
</style>
<!-- mastartclass area start hare  -->
        
        <section class="masterclass-area">
            <div class="container">
                <div class="masterclass-wapper">
                    <div class="top-content">
                        <h3>{!!$masterclass->titre!!}</h3>
                        <p>Intervenant: <span class="fw-bold">{!!$masterclass->presentateur->nom!!} {!!$masterclass->presentateur->prenom!!}</span></p>
                       <p >
                          {!!$masterclass->description !!}
                       </p>
                    </div>
                                         
                </div>
                <!-- @guest('web')
                  <div class="alert alert-info text-center pt-3 pb-3 mt-3">
                    Pour visualiser ces Masterclass veuillez vous connecter entant que Membre Sufi Heritage en <a  href="{{ route('login') }}">cliquant ici</a> ou vous inscrire si ce n'est pas déjà fait en <a  href="{{ route('public.register') }}">cliquant ici </a>
                  </div>
                @endguest -->
               <div class="row pt-5">
    <!-- Main Video Player -->
    <div class="col-md-8">
        @php
            $currentvideo = $videotoplay ?? null;

            if (!$currentvideo && $masterclass->videos->count() > 0) {
               if (auth()->check() && optional(auth()->user()->subscription)->onTrial()) {
                    $currentvideo = $masterclass->videos->where('available_ontrial', 1)->first();
                } else {
                    $currentvideo = $masterclass->videos->first();
                }
            }
            
            // Extract YouTube Video ID from the full URL
            function getYoutubeId($url) {
                        preg_match('/(?:\/|v=|youtu\.be\/|embed\/)([a-zA-Z0-9_-]{11})/', $url, $matches);
                        return $matches[1] ?? null;
            }

            $videoId = $currentvideo ? getYoutubeId($currentvideo->lien) : null;
        @endphp
    

        @if($currentvideo)
            <div class="mb-4" >
               @if(auth()->check() && auth()->user()->hasActiveSubscription())
                    <!-- Show playable video for subscribed users -->
                    <div id="vid" class="js-player" data-plyr-provider="youtube" data-plyr-embed-id="{{ $currentvideo->lien }}" >
                    </div>
                @else
                    <!-- Show disabled player with overlay message -->
                    <div class="position-relative">
                        <img src="{{ route('video.thumbnail', ['videoId' => encrypt($videoId)]) }}" class="img-fluid w-100" style="border-radius: 8px;">
                        <div class="overlay d-flex align-items-center justify-content-center" 
                             style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); border-radius: 8px;">
                            <div class="text-center action-btn">
                                @if(auth()->check())
                                    <!-- User is logged in but not subscribed -->
                                    <p class="text-white fw-bold">Vous devez vous abonner pour regarder.</p>
                                    <a href="{{ route('subscribe.show') }}" >S'abonner</a>
                                @else
                                    <!-- User is not logged in -->
                                   <p class="fw-bold text-white">Connectez-vous et abonnez-vous pour regarder</p>
                                    <a href="{{ route('login') }}" >Se connecter</a>
                                    <a href="{{ route('subscribe.show') }}" class=" btn-light">S'abonner</a>

                                @endif
                            </div>
                        </div>
                    </div>
                @endif

            </div>

            <!-- Video Details -->
            <div class="video-description">
                <h4>{{ $currentvideo->titre }}</h4>
                <p>{{ $currentvideo->description }}</p>
            </div>
        @endif
    </div>

    <!-- Video Playlist -->
    <div class="col-md-4">
        <div class="list-group">
            @foreach($masterclass->videos as $video)
                @php
                 // Extract YouTube Video ID from the full URL
                 preg_match('/(?:\/|v=)([a-zA-Z0-9_-]{11})/', $video->lien, $matches);
                 $cvideoId = $matches[1] ?? null;
                @endphp
                <div class="list-group-item list-group-item-action video-thumb mb-2 
                    @if($videotoplay && $currentVideoId == $video->id) bg-info @endif">
                    <div class="d-flex w-100 position-relative">
                        <img src="{{ route('video.thumbnail', ['videoId' => encrypt($cvideoId)]) }}"
                             alt="Video Thumbnail" class="img-fluid me-3" 
                             style="width: 100px; border-radius: 8px; max-height: 80px">
                       
                        <div>
                            <h5 class="mb-1">{{ $video->titre }}</h5>
                            <p class="mb-1">{{ $video->description }}</p>

                        
                        
                            
                            @if(auth()->check() && auth()->user()->hasActiveSubscription())
                                <a href="{{ route('masterclass.show', ['slug' => $masterclass->slug, 'videoid' => $video->id]) }}" 
                                   class=""><span class="play-overlay"><i class="bi bi-play-circle-fill text-dark"></i></span></a>
                            @elseif(auth()->check())
                                <!-- User is logged in but does not have an active subscription -->
                                <button class="btn btn-sm btn-secondary" disabled>Abonnement requis</button>
                            @endif

                        </div>
                    </div>
                </div>
            @endforeach
        </div>
    </div>
</div>
                    
                    @if(!auth()->check() || !auth()->user()->hasActiveSubscription())
                        <div class="alert text-center mt-4 p-4 rounded shadow-lg action-btn" style="background-color: #f8f9fa; color: #212529; border-left: 4px solid #000;">
                            <h5 class="fw-bold mb-2">Vous devez être abonné pour regarder ces vidéos.</h5>
                            <a href="{{ route('subscribe.show') }}" class="btn fw-semibold px-4 py-2" style="background-color: #000; color: #fff; border: 1px solid #000;">
                                S'abonner
                            </a>
                        </div>
                    @endif






                <div class="mst-bg">
                        <img src="{{ asset('public_assets/images/continuity-pattern.png')}}" alt="">
                    </div>
            </div>
            <input type="hidden" name="_token" value="{{csrf_token()}}"/>
        </section>

        <div class="masterclass-img-box">
            <img src="{{ asset('public_assets/images/mastarclass-img.png')}}" alt="">
        </div>
       
@push('scripts')

<script>




    
@isset($currentvideo)
     //resumePlayback({{$currentvideo->id}},player);
    
     document.addEventListener('DOMContentLoaded', () => {
            const playerPlyr = new Plyr('.js-player', {
                controls: ['play', 'progress', 'volume', 'fullscreen'],
                autoplay: false,
            });
            playerPlyr.once('ready', event => {
              resumePlayback({{$currentvideo->id}},playerPlyr);
            });
           
             playerPlyr.on('pause', (event) => {
                const currentTime = playerPlyr.currentTime;
                const duration = playerPlyr.duration;
                performaction(currentTime, duration,{{$currentvideo->id}})
            });
           
        });

 @endisset



    function performaction(currentTime, duration, videoId)
    {
        var data = {time: currentTime, duration: duration}; //data to send to server 
        var dataType = "json"//expected datatype from server 
        var headers = { 'X-CSRF-TOKEN': $('input[name="_token"]').val()}
        $.post({   
            url: '/saveTime/'+videoId,   //url of the server which stores time data   
            data: data,
            headers: headers,
            success: function(data,status){
                    // alert(status);
                     var data = JSON.parse(data)
                     //alert(data['message']);
            },   
            dataType: dataType 
        });
    }
    function resumePlayback(videoId,player){//Ajax request for getting the time
        $.ajax({
            url: '/getTime/'+videoId,
            success: function(data,status){
               if(data['playbackTime']!=''){
                    player.currentTime = parseFloat(data['playbackTime']);
               }
            },
            dataType: "json"
        });
    }
    


</script>


@endpush
@endsection