@extends('client.layouts.app')

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

@section('content')
<style>
    .content-wrapper main{
        background-image: url('{{ asset('img/ingenia/progress_bg.png') }}');
    }
</style>
<div class="container-fluid ingenia-video-pg video-completed">
    <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">
            <div class="all-correct non-last" style="display: none">
                <img src="{{asset('img/ingenia/complimenti-q.png')}}" alt="" class="video-pg-pl">
                <p class="video-qs-text">
                    <span class="ingenia-green">COMPLIMENTI!</span><br>Hai risposto correttamente a tutte le domande, puoi passare al prossimo video.
                </p>
                <a href="#" id="quiz-next-link" class="show-questions">VAI AL PROSSIMO VIDEO</a>
            </div>

            <div class="all-correct final-complete" style="display: none">
                <img src="{{asset('img/ingenia/complimenti-q.png')}}" alt="" class="video-pg-pl">
                <p class="video-qs-text">
                    <span class="ingenia-green">CONGRATULAZIONI!</span><br>HAI COMPLETATO IL TUO PERCORSO. Ora sei un INGENIA NXT EXPERT
                </p>
                <form id="certificate-form">
                    @csrf
                    <div class="form-group">
                        <label for="name_on_certificate">Nome e Cognome</label>
                        <input type="text" class="form-control" id="name_on_certificate" name="name_on_certificate" required maxlength="190">
                    </div>
                    <button type="button" id="certificate-submit" class="btn btn-success">SCARICA IL CERTIFICATO</button>
                    <div id="certificate-error" class="alert alert-danger d-none mt-2"></div>
                </form>
            </div>

            <div class="has-errors-q" style="display: {{$errors->any() ? 'block' : 'none'}};">
                <img src="{{asset('img/ingenia/peccato.png')}}" alt="" class="video-pg-pl">
                <p class="video-qs-text">
                    <span class="ingenia-red">PECCATO!</span><br>Non hai risposto correttamente ad alcune domande, puoi ripetere il questionario.
                </p>
                <a href="#" class="show-questions">TORNA ALLE DOMANDE</a>
            </div>

           <div class="card quiz-card" style="display: {{$errors->any() ? 'none' : 'block'}};">
                <div class="card-body">
                    <div class="d-flex justify-content-between align-items-center quiz-info">
                        <h4 class="card-title mb-0">Per guardare il prossimo video compila rispondi correttamente a tutte le domande</h4>
                    </div>
                    <div id="quiz-errors" class="alert alert-danger d-none"></div>
                    <form id="quiz-form" data-submit-url="{{ route('ingenia.quiz.submit', $module->id) }}" data-next-url="{{ route('ingenia.video', $module->id + 1) }}" data-is-last="{{ $isLast ? '1' : '0' }}" data-certificate-url="{{ route('ingenia.certificate') }}" data-thankyou-url="{{ route('ingenia.thankyou') }}">
                        @csrf
                        @foreach($module->questions as $question)
                        <div class="mb-4 question" data-question-id="{{ $question->id }}">
                            <p class="font-weight-bold question-title">{{ $loop->iteration }}. {{ $question->question }}</p>
                            @foreach($question->options as $option)
                            <div class="form-check">
                                <input class="form-check-input" type="radio" name="answers[{{ $question->id }}]" id="opt-{{ $option->id }}" value="{{ $option->id }}">
                                <label class="form-check-label" for="opt-{{ $option->id }}">{{ $option->option }}</label>
                            </div>
                            @endforeach
                        </div>
                        @endforeach
                    </form>
                </div>
                
                <div class="text-right submit-actions">
                    <button type="button" id="quiz-submit" class="btn btn-primary">Avanti</button>
                </div>
            </div>
        </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();
                }
            });
        }
    });
    jQuery(document).ready(function() {
        jQuery('.show-questions').on('click', function(e) {
            e.preventDefault();
            jQuery('.has-errors-q').hide();
            jQuery('.questions-on-hold .card').show();
        });

        // AJAX quiz submit
        const quizForm = document.getElementById('quiz-form');
        const quizSubmit = document.getElementById('quiz-submit');
        const quizErrors = document.getElementById('quiz-errors');
        const allCorrect = document.querySelector('.all-correct.non-last');
        const finalComplete = document.querySelector('.all-correct.final-complete');
        const submitActions = document.querySelector('.submit-actions');
        const nextBtn = document.getElementById('quiz-next-link');
        const isLast = quizForm ? quizForm.dataset.isLast === '1' : false;
        const certificateUrl = quizForm ? quizForm.dataset.certificateUrl : '';
        const thankyouUrl = quizForm ? quizForm.dataset.thankyouUrl : '';
        const certForm = document.getElementById('certificate-form');
        const certSubmit = document.getElementById('certificate-submit');
        const certError = document.getElementById('certificate-error');
        if (quizForm && quizSubmit) {
            const submitUrl = quizForm.dataset.submitUrl;
            let nextUrl = quizForm.dataset.nextUrl;
            const token = quizForm.querySelector('input[name=\"_token\"]').value;

            const resetHighlights = () => {
                document.querySelectorAll('.question').forEach(q => {
                    q.classList.remove('border', 'border-danger', 'p-3');
                });
            };

            quizSubmit.addEventListener('click', function() {
                quizErrors.classList.add('d-none');
                quizErrors.innerHTML = '';
                resetHighlights();
                quizSubmit.disabled = true;
                const formData = new FormData(quizForm);
                fetch(submitUrl, {
                    method: 'POST',
                    headers: {
                        'X-CSRF-TOKEN': token,
                        'Accept': 'application/json'
                    },
                    body: formData
                })
                .then(async (response) => {
                    const data = await response.json().catch(() => ({}));
                    if (!response.ok) {
                        const wrong = data.wrong || [];
                        document.querySelectorAll('.question').forEach(q => {
                            const qId = q.dataset.questionId;
                            if (wrong.includes(parseInt(qId))) {
                                q.classList.add('border', 'border-danger', 'p-3');
                            }
                        });
                        quizErrors.textContent = data.message || 'Correggi le risposte evidenziate.';
                        quizErrors.classList.remove('d-none');
                        quizSubmit.disabled = false;
                        jQuery('.has-errors-q').show();
                        jQuery('.questions-on-hold .card').hide();
                        return;
                    }
                    // success
                    submitActions.classList.add('d-none');
                    if (data.completed && isLast) {
                        if (finalComplete) {
                            finalComplete.style.display = 'block';
                        }
                        jQuery('.questions-on-hold .card').hide();
                    } else {
                        if (allCorrect) {
                            jQuery('.all-correct.non-last').show();
                            jQuery('.questions-on-hold .card').hide();
                        }
                        if (data.next_url) {
                            nextUrl = data.next_url;
                        }
                        if (nextBtn && nextUrl) {
                            nextBtn.href = nextUrl;
                        }
                    }
                })
                .catch(() => {
                    quizErrors.textContent = 'Errore durante l\'invio. Riprova.';
                    quizErrors.classList.remove('d-none');
                    quizSubmit.disabled = false;
                });
            });

            if (nextBtn) {
                nextBtn.addEventListener('click', function(e) {
                    if (nextUrl) {
                        e.preventDefault();
                        window.location.href = nextUrl;
                    }
                });
            }

            if (certSubmit && certForm) {
                certSubmit.addEventListener('click', function() {
                    if (certError) {
                        certError.classList.add('d-none');
                        certError.innerHTML = '';
                    }
                    const name = certForm.querySelector('#name_on_certificate').value.trim();
                    if (!name) {
                        if (certError) {
                            certError.textContent = 'Inserisci Nome e Cognome.';
                            certError.classList.remove('d-none');
                        }
                        return;
                    }
                    const formData = new FormData(certForm);
                    fetch(certificateUrl, {
                        method: 'POST',
                        headers: {
                            'X-CSRF-TOKEN': token,
                            'Accept': 'application/json'
                        },
                        body: formData
                    }).then(async (response) => {
                        const data = await response.json().catch(() => ({}));
                        if (!response.ok) {
                            if (certError) {
                                certError.textContent = data.message || 'Errore durante la generazione del certificato.';
                                certError.classList.remove('d-none');
                            }
                            return;
                        }
                        const redirect = data.redirect || thankyouUrl;
                        if (redirect) {
                            window.location.href = redirect;
                        }
                    }).catch(() => {
                        if (certError) {
                            certError.textContent = 'Errore durante la generazione del certificato.';
                            certError.classList.remove('d-none');
                        }
                    });
                });
            }
        }
    });
</script>
@endpush