@extends('client.layouts.app')

@section('title', $module->title)

@section('content')
<style>
    .content-wrapper main{
        background-image: url('{{ asset('img/ingenia/progress_bg.png') }}');
    }
</style>
<div class="container-fluid ingenia-video-pg">
    <div class="row">
        <div class="col-lg-12">
            <div class="titles">
                <h4 class="card-title">{{ $module->title }}</h4>
                @if($module->intro_text)
                <p>{{ $module->intro_text }}</p>
                @endif
            </div>
        </div>
        <div class="col-lg-6 video-player">
            <div class="card mb-3">
                <div class="card-body">
                    <div class="embed-responsive embed-responsive-16by9 mb-3 video-frame">
                        <video id="training-video" class="embed-responsive-item" poster="{{ $module->cover_image ?: asset('img/ingenia/inizia-videos-asset.png') }}" data-watched="{{ array_merge(['video' => false], ($progress->status ?? [])[$module->id] ?? [])['video'] ? 1 : 0 }}" controlsList="nodownload noplaybackrate noremoteplayback" disablePictureInPicture oncontextmenu="return false">
                            <source src="{{ $module->video_url }}" type="video/mp4">
                            Il tuo browser non supporta il video.
                        </video>
                    </div>
                    <div class="mb-3 d-flex align-items-center flex-wrap gap-2 video-buttons">
                        <button id="play-pause" class="btn btn-secondary mr-2 mb-2">
                            <img src="{{asset('img/ingenia/video-play.png')}}" alt="">
                        </button>
                        <div class="volume-wrapper mr-2 mb-2">
                            <img src="{{asset('img/ingenia/video-audio.png')}}" alt="">
                            <input id="volume-slider" type="range" min="0" max="1" step="0.05" value="1" class="volume-slider" aria-label="Volume" />
                        </div>
                        <button id="fullscreen" class="btn btn-outline-secondary mb-2" type="button">
                            <img src="{{asset('img/ingenia/video-full-screen.png')}}" alt="">
                        </button>
                    </div>
                    <div id="video-actions" class="d-flex justify-content-between d-none">
                        <form method="POST" action="{{ route('ingenia.video.store', $module->id) }}">
                            @csrf
                            <input type="hidden" name="action" value="stop">
                            <button type="submit" class="btn btn-outline-secondary">Mi fermo qui</button>
                        </form>
                        <form id="video-continue-form" method="POST" action="{{ route('ingenia.video.store', $module->id) }}" data-redirect-quiz="{{ route('ingenia.quiz', $module->id) }}">
                            @csrf
                            <input type="hidden" name="action" value="continue">
                            <button type="submit" class="btn btn-primary">Vado avanti</button>
                        </form>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-lg-6 questions-on-hold">
           <img src="{{asset('img/ingenia/video-pg.png')}}" alt="" class="video-pg-pl">
           <p class="video-qs-text">
            Completa la <span class="ingenia-green">visione obbligatoria</span> del Video <span class="ingenia-green">e accedi al questionario</span> di controllo per ottenere la tua certificazione.
           </p>
        </div>
        <div class="col-lg-12 bottom-return">
            <a href="{{ route('home') }}" class="return-dsh"><img src="{{asset('img/ingenia/return-dsh.svg')}}" class="return-dsh-icon" alt=""> TORNA ALLA DASHBOAD</a>
            <p class="return-dsh-info">Potrai riprendere il video in qualsiasi momento</p>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
    document.addEventListener('DOMContentLoaded', function() {
        const video = document.getElementById('training-video');
        const playPause = document.getElementById('play-pause');
        const actions = document.getElementById('video-actions');
        const volumeSlider = document.getElementById('volume-slider');
        const fullscreenBtn = document.getElementById('fullscreen');
        const continueForm = document.getElementById('video-continue-form');
        if (!video) return;
        let maxTime = 0;
        let hasEnded = video.dataset.watched === '1';
        const shouldAutoContinue = hasEnded ? false : true;
        let autoSubmitted = false;

        const blockSeek = () => {
            if (video.currentTime > maxTime + 0.5) {
                video.currentTime = maxTime;
            }
        };

        video.addEventListener('timeupdate', () => {
            if (video.currentTime > maxTime) {
                maxTime = video.currentTime;
            }
        });

        video.addEventListener('seeking', blockSeek);
        video.addEventListener('loadedmetadata', () => {
            maxTime = video.currentTime;
        });

        video.addEventListener('ended', () => {
            hasEnded = true;
            actions.classList.remove('d-none');
            // playPause.textContent = 'Play';
            if (continueForm && !autoSubmitted && shouldAutoContinue) {
                autoSubmitted = true;
                continueForm.submit();
            }
        });

        if (hasEnded) {
            actions.classList.remove('d-none');
        }

        // Prevent keyboard scrubbing
        video.addEventListener('keydown', (e) => {
            if (['ArrowRight', 'ArrowLeft'].includes(e.key)) {
                e.preventDefault();
            }
        });

        // Remove native controls, manage via custom button
        video.controls = false;

        playPause.addEventListener('click', (e) => {
            e.preventDefault();
            if (video.paused) {
                video.play();
                // playPause.textContent = 'Pausa';
            } else {
                video.pause();
                // playPause.textContent = 'Play';
            }
        });

        const clampVolume = (val) => Math.min(1, Math.max(0, val));
        if (volumeSlider) {
            volumeSlider.addEventListener('input', (e) => {
                video.volume = clampVolume(parseFloat(e.target.value || '1'));
            });
            // initialize from current volume
            volumeSlider.value = video.volume;
        }
        if (fullscreenBtn) {
            fullscreenBtn.addEventListener('click', (e) => {
                e.preventDefault();
                const container = video.closest('.video-frame') || video;
                if (document.fullscreenElement) {
                    document.exitFullscreen();
                } else if (container.requestFullscreen) {
                    container.requestFullscreen();
                }
            });
        }
    });
</script>
@endpush