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

@section('content')

<!-- 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>
                    </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
                @auth('web')
                  @if (optional(auth()->user())->hasActiveSubscription())
                  
                          <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()->user()->subscription->onTrial()) {
                                                    $currentvideo = $masterclass->videos->where('available_ontrial', 1)->first();
                                                } else {
                                                    $currentvideo = $masterclass->videos->first();
                                                }
                                            }
                                        @endphp
                                        @if($currentvideo!=null)
                                              <div class="ratio ratio-16x9 mb-4">
                                                    <iframe
                                                      id="main-video"
                                                      src="{{$currentvideo->lien}}?modestbranding=1&rel=0&iv_load_policy=3&playsinline=1&controls=1"
                                                      title="Main video"
                                                      frameborder="0"
                                                      allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
                                                      allowfullscreen>
                                                    </iframe>
                                                    </div>
                                                    <!-- Video Details Panel -->
                                                    <div class="video-description">
                                                        <div class="video-details">
                                                            <h4 id="video-title">{{$currentvideo->titre}}</h4>
                                                            <p id="video-description">{{$currentvideo->description}}</p>
                                                        </div>
                                              </div>
                                        @endif
                                   
                                </div>

                                <!-- Video Playlist -->
                                <div class="col-md-4">
                                    <div class="list-group">
                                        @forelse($masterclass->videos as $video)
                                            @if (auth()->user()->subscription->onTrial() && !$video->available_ontrial)
                                                @continue
                                            @endif
                                            <a class="list-group-item list-group-item-action video-thumb @if($videotoplay && $currentVideoId==$video->id) bg-info @endif mb-2" href="{{ route('masterclass.show', ['slug' => $masterclass->slug, 'videoid' => $video->id]) }}"

                                            >
                                                    <div class="d-flex w-100 position-relative ">
                                                        <img src="{{$masterclass->image}}"  alt="Video 1 thumbnail" class="img-fluid me-3" style="width: 100px; border-radius: 8px;max-height:80px">
                                                        <span class="play-overlay"><i class="bi bi-play-circle-fill text-secondary"></i></span>
                                                        <div>
                                                            <h5 class="mb-1">{{$video->titre}}</h5>
                                                            <p class="mb-1">{{$video->description}}</p>
                                                        </div>
                                                    </div>
                                            </a>
                                            @empty

                                        @endforelse
                                       
                                      
                                       
                                    </div>
                                </div>
                            </div>
                        @else
                             <div class="alert alert-warning text-center pt-3 pb-3 mt-3">
                             Vous n'avez pas d'abonnement actif. Veuillez vous abonner pour accéder à ce contenu.
                            </div>
                        @endif
                    @endauth
                <div class="masterclass-main">
                       {!!$masterclass->description !!}
                    </div>

                    <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 src="https://player.vimeo.com/api/player.js"></script>
<script>

 document.addEventListener('DOMContentLoaded', () => {
            const playerPlyr = new Plyr('.js-player', {
                controls: ['play', 'progress', 'volume', 'fullscreen'],
                autoplay: false,
            });
        });

    const iframe = document.querySelector('iframe');
    const player = new Vimeo.Player(iframe);
    
@isset($currentvideo)
     resumePlayback({{$currentvideo->id}},player);
    player.on("pause", function(e) {
            var timeout;
            // save reference
            var v = this

            // clear previous timeout, if any
            clearTimeout(timeout);
            player.getCurrentTime().then(function(currenttime) {
              currtym=currenttime;
            });
            player.getDuration().then(function(vduration) {
             duration=vduration;
            });
            // call immediately if paused or when started
            performaction(currtym, duration,{{$currentvideo->id}})
            
            // set up interval to fire very 5 seconds
            if (e.type === "playing") {
              timeout = setInterval(function() {
            performaction(currtym, duration,{{$currentvideo->id}})
              }, 3000)
            }
        })

      

    player.on('play', function() {
            player.getCurrentTime().then(function(currenttime) {
              currtym=currenttime;
            });
            player.getDuration().then(function(vduration) {
             duration=vduration;
            });
            // call immediately if paused or when started
            performaction(currtym, duration,{{$currentvideo->id}})
    });

   player.on('progress', function() {
            player.getCurrentTime().then(function(currenttime) {
              currtym=currenttime;
            });
            player.getDuration().then(function(vduration) {
             duration=vduration;
            });
            // call immediately if paused or when started
            //performaction(currtym, 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){
                    player.currentTime = data['playbackTime'];
                    player.setCurrentTime(data['playbackTime']).then(function(seconds) {
                      // `seconds` indicates the actual time that the player seeks to
                    }).catch(function(error) {
                      switch (error.name) {
                        case 'RangeError':
                            // The time is less than 0 or greater than the video's duration
                            break;
                        default:
                            // Some other error occurred
                            break;
                      }
                    });
            },
            dataType: "json"
        });
    }
    


</script>


@endpush
@endsection