@extends('layout')

@section('title')
    {{ __('Question') }}
@stop

@section('header_styles')
    <meta name="description"
          content="{{ __("Devenez Head of SEO chez WebWizards, invoquez des créatures mythiques et optimisez votre site dans cette aventure SEO interactive !") }}">
    <style>
        body {
            overflow: hidden;
        }

        #avatar{
            display: block;
            width: 150px;
            height: 150px;
            box-sizing: border-box;
            border: 5px white solid;
            border-radius: 50%;
            overflow: hidden;
            margin-left: auto;
            margin-right: auto;
            box-shadow: 0 5px 15px 0px rgba(0, 0, 0, 0.6);
            transform: translatey(0px);
            -webkit-animation: float 4s ease-in-out infinite;
            animation: float 6s ease-in-out infinite;
        }

        @keyframes float {
            0% {
                box-shadow: 0 5px 15px 0px rgba(0, 0, 0, 0.6);
                transform: translatey(0px);
            }
            50% {
                box-shadow: 0 25px 15px 0px rgba(0, 0, 0, 0.2);
                transform: translatey(-20px);
            }
            100% {
                box-shadow: 0 5px 15px 0px rgba(0, 0, 0, 0.6);
                transform: translatey(0px);
            }
        }

        .wizard-forms{
            padding-top: 30px;
        }

        .texte-introduction{
            text-align: start;
        }

        .quiz-title{
            max-width: 1135px;
        }

        .quiz-option-selector ul{
            display: flex;
            justify-content: center;
            flex-wrap: wrap;
        }

        .quiz-option-selector li{
            float:none;
        }

        .quiz-option-selector li label .exp-label{
            font-size: 18px;
            line-height: 18px;
            height: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .quiz-option-selector li label .exp-number{
            margin-right: 20px;
        }

        .quiz-option-selector{
            padding-bottom: 40px;
        }

        .bottom-vector{
            display:flex;
            position: fixed;
            bottom: 0;
            right: 20px;
            left: 20px;
        }

        .bottom-vector img{
            height: 164px;
            align-self: center;
        }

        @font-face {
            font-family: "Pokemon GB";
            src: url("./templates/pokemon-gameboy/dist/styles/fonts/Pokemon GB.woff") format("woff");
            src: url("./templates/pokemon-gameboy/dist/styles/fonts/Pokemon GB.ttf") format("truetype");
        }

        .texte-conseil{
            position: relative;
            border-image: url("./templates/pokemon-gameboy/dist/styles/images/frame-hd.png") 42 round;
            border-width: 21px;
            border-style: solid;
            padding: 1em;
            margin: 1em 0 8px 0;
            width: 100%;
            max-width: 100%;
            font-family: "Pokemon GB";
            font-smooth: never;
            -webkit-font-smoothing: none;
            min-width: 320px;
            background: #F8F3F8;
            color: #181010;
            image-rendering: pixelated;
        }

        .texte-conseil h3{
            font-family: "Pokemon GB";
            margin-bottom: 8px;
        }

        #texte-passer{
            color: #ed1b34;
            width: 100%;
            text-align: center;
            font-size: 20px;
            position: fixed;
            bottom: 40px;
            animation: floating 1.5s infinite;
        }

        @keyframes floating {
            0%, 100% {
                transform: scale(1);
            }
            50% {
                transform: scale(1.2);
            }
        }

        .bottom-vector a{
            color: #181010;
            text-decoration: none;
            position: relative;
            font-family: "Pokemon GB";
            font-size: 1em;
            background: none;
            border: none;
            padding: 0 0 0 1em;
            text-transform: uppercase;
            text-align: left;
            cursor: pointer;
        }

        .bottom-vector a:hover{
            color: #181010;
            text-decoration: none;
        }

        .bottom-vector a:hover::before {
            content: "";
            position: absolute;
            top: 0;
            left: -2px;
            width: 2px;
            height: 2px;
            top: 2px;
            font-size: 2px;
            color: #181010;
            box-shadow: 1em 0em 0 #181010, 2em 0em 0 #181010, 1em 1em 0 #181010, 2em 1em 0 #181010, 3em 1em 0 #181010, 1em 2em 0 #181010, 2em 2em 0 #181010, 3em 2em 0 #181010, 4em 2em 0 #181010, 1em 3em 0 #181010, 2em 3em 0 #181010, 3em 3em 0 #181010, 4em 3em 0 #181010, 5em 3em 0 #181010, 1em 4em 0 #181010, 2em 4em 0 #181010, 3em 4em 0 #181010, 4em 4em 0 #181010, 1em 5em 0 #181010, 2em 5em 0 #181010, 3em 5em 0 #181010, 1em 6em 0 #181010, 2em 6em 0 #181010;
        }

        .quiz-countdown {
            top: 15px;
            left: 0;
            position: absolute;
        }

        .quiz-countdown li {
            width: 70px;
            height: 36px;
            margin-left: 24px;
            border-radius: 8px;
            position: relative;
            display: inline-block;
            background-color: white;
            border: 2px solid #e7e7e7;
        }

        .quiz-countdown .count-down-number {
            font-size: 22px;
            line-height: 32px;
            font-family: "Pokemon GB";
        }

        .quiz-countdown .count-unit {
            display: block;
            color: #ed1b34;
            margin-top: 5px;
            font-size: 12px;
            text-transform: uppercase;
        }

        #texte-fin{
            font-size: 16px;
            text-align: center;
            font-family: "Pokemon GB";
            border-radius: 8px;
            position: relative;
            display: inline-block;
            background-color: white;
            border: 2px solid #e7e7e7;
            padding: 8px;
        }

        #bloc-boutons-fin{
            margin-top: 20px;
            display: flex;
            justify-content: center;
        }

        .bouton-custom{
            width: 200px;
            height: 60px;
            padding: 10px;
            cursor: pointer;
            position: relative;
            border-radius: 4px;
            background-color: #fff;
            border: 2px solid #e7e7e7;
            color: #446d76;
            font-weight: 600;
            font-size: 18px;
            line-height: 18px;
            cursor: pointer;
        }

        #bouton-mute{
            position: fixed;
            z-index: 4;
            width: 48px;
            height: 48px;
            top: 15px;
            right: 15px;
            font-size: 22px;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        @media screen and (max-width: 600px) {
            body {
                overflow: auto;
            }

            .wizard-forms{
                padding-bottom: 0;
            }

            .quiz-title{
                margin-top: 40px;
            }

            .bottom-vector {
                position: initial;
                margin-top: 40px;
                flex-direction: column;
            }

            .bottom-vector img{
                align-self: end;
            }

            .texte-conseil{
                margin-top: 0;
            }

            .texte-conseil h3{
                font-size: 1.5rem;
            }

            #texte-conseil{
                flex-direction: column;
            }
        }

    </style>
@stop

@section('page')
    <div class="wrapper position-relative">
        <span class="bouton-custom sounded" id="bouton-mute" type="button">🔉</span>
        <div class="wizard-content-1 clearfix">
            <div class="steps d-inline-block position-absolute clearfix">
                <ul class="tablist multisteps-form__progress" id="list-steps">

                </ul>
            </div>
            <div class="step-inner-content clearfix position-relative">
                <div class="form-area position-relative" id="steps">
                    <div class="multisteps-form__panel js-active" data-animation="fadeIn">
                        <div class="wizard-forms clearfix position-relative">
                            <div class="quiz-title text-center">
                                <span>{{ __('Web Wizards') }}</span>
                                <h2>{{ __('Le site dont vous êtes le héros, version SEO') }}</h2>
                                <p>
                                    {{ __("Bienvenue sur ce site ! Je suis Dimitri de Babbar et j'ai créé ce petit site à titre informatif et ludique. Quand j'ai débarqué dans le SEO, j'ai essayé petit à petit de comprendre les métiers du SEO afin de mieux comprendre les enjeux et le quotidien des divers acteurs.") }}
                                </p>
                                <p>{{ __("Ce mini-jeu est mon hommage au SEO...") }}</p>
                            </div>
                            <div class="quiz-option-selector clearfix" style="padding-top: 10px; padding-bottom: 20px">
                                <ul>
                                    <li class="proposition" data-id="0">
                                        <label class="start-quiz-item">
                                            <input type="radio" name="quiz" value="1"
                                                   class="exp-option-box">
                                            <span class="exp-label">{{ __('Commencer') }}</span>
                                            <span class="checkmark-border"></span>
                                        </label>
                                    </li>
                                </ul>
                            </div>
                            <a href="https://x.com/DimitriBabbar" rel="nofollow noopener" id="avatar" target="_blank">
                                <img src="https://pbs.twimg.com/profile_images/1621420318077116417/3U0i0Nv6_400x400.jpg"
                                 alt="Dimitri de Babbar">
                            </a>
                            <div class="bottom-vector bloc-conseil" data-id="0">
                                <img src="{{ asset('assets/img/teacher.png') }}" alt="">
                                <section class="texte-conseil">
                                    <h3>{{ __("Liens utiles") }}</h3>
                                    <p id="texte-conseil" style="display: flex; justify-content: space-between">
                                        <a href="https://yourtext.guru/" rel="dofollow" target="_blank">YourText.guru</a>
                                        <a href="https://www.babbar.tech/" rel="dofollow" target="_blank">Babbar.tech</a>
                                        <a href="https://blog.babbar.tech/" rel="dofollow" target="_blank">Le blog de
                                            Babbar</a>
                                    </p>
                                </section>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <p id="texte-passer" style="display: none">{{ __('Espace pour passer le texte') }}</p>
    </div>
@stop

@section('footer_scripts')
    <script>
        let chemin = '';
        let i = 0;
        let technique = 0;
        let popularite = 0;
        let semantique = 0;
        let question_en_cours = null;
        var son_type = new Audio('{{ asset('assets/sounds/son_type.wav') }}');
        var son_choix = new Audio('{{ asset('assets/sounds/son_choix.wav') }}');
        var son_fin = new Audio('{{ asset('assets/sounds/son_fin.wav') }}');
        let muted = localStorage.getItem('muted') === 'true';

        $(document).ready(function () {
            gestionSon();
        });

        function chargerQuestion(chemin){
            $.ajax({
                type: "GET",
                url: '{{ url('question') }}/' + chemin,
            }).done(function (response) {
                $('#texte-passer').show();
                $('#steps').empty();
                $('#steps').append(`
                    <div class="multisteps-form__panel js-active" data-animation="fadeIn">
                        <div class="wizard-forms clearfix position-relative">
                            <div class="quiz-countdown text-center ul-li">
                                <ul>
                                    <li class="days">
                                        <span class="count-down-number">${technique}</span>
                                        <span class="count-unit">{{ __('Technique') }}</span>
                                    </li>
                                    <li class="hours">
                                        <span class="count-down-number">${popularite}</span>
                                        <span class="count-unit">{{ __('Popularité') }}</span>
                                    </li>
                                    <li class="minutes">
                                        <span class="count-down-number">${semantique}</span>
                                        <span class="count-unit">{{ __('Sémantique') }}</span>
                                    </li>
                                </ul>
                            </div>
                            <div class="quiz-title text-center">
                                <span>{{ __('Étape') }} ${i}</span>
                                <h2>${response.question.intitule}</h2>
                                <p class="texte-introduction en_cours" data-id="${response.question.id}"></p>
                            </div>
                            <div class="quiz-option-selector clearfix">
                                <ul>
                                    ` + (response.question.proposition1 != null ? `
                                    <li class="proposition" style="display:none" data-id="${response.question.id}">
                                        <label class="start-quiz-item">
                                            <input type="radio" name="quiz" value="A"
                                                   class="exp-option-box">
                                            <span class="exp-number text-uppercase">A</span>
                                            <span class="exp-label">${response.question.proposition1}</span>
                                            <span class="checkmark-border"></span>
                                        </label>
                                    </li>
                                     ` : '') + `
                                    ` + (response.question.proposition2 != null ? `
                                    <li class="proposition" style="display:none" data-id="${response.question.id}">
                                        <label>
                                            <input type="radio" name="quiz" value="B"
                                                   class="exp-option-box">
                                            <span class="exp-number text-uppercase">b</span>
                                            <span class="exp-label">${response.question.proposition2}</span>
                                            <span class="checkmark-border"></span>
                                        </label>
                                    </li>
                                    ` : '') + `
                                    ` + (response.question.proposition3 != null ? `
                                    <li class="proposition" style="display:none" data-id="${response.question.id}">
                                        <label>
                                            <input type="radio" name="quiz" value="C"
                                                   class="exp-option-box">
                                            <span class="exp-number text-uppercase">c</span>
                                            <span class="exp-label">${response.question.proposition3}</span>
                                            <span class="checkmark-border"></span>
                                        </label>
                                    </li>
                                    ` : '') + `
                                </ul>
                                ` + (response.question.fin != null ?
                                `<p id="texte-fin" style="display:none">${response.question.fin}</p>
                                <div id="bloc-boutons-fin" style="display:none">
                                    <button class="bouton-custom bouton-rejouer" type="button">{{ __('Rejouer') }}</button>
                                </div>
                                ` : '') + `
                            </div>
                            <div class="bottom-vector bloc-conseil" style="display:none" data-id="${response.question.id}">
                                <img src="{{ asset('assets/img/teacher.png') }}" alt="">
                                <section class="texte-conseil">
                                    <h3>{{ __('Mise en situation réelle') }}</h3>
                                    <p id="texte-conseil">${response.question.conseil != null ? response.question.conseil : ''}</p>
                                </section>
                            </div>
                        </div>
                    </div>
                `);
                question_en_cours = response.question;
                son_type.play();
                apparitionLettres(0, response.question.introduction)
            });
        }

        let timeOut = null;
        let texte_complet = '';
        function apparitionLettres(i_lettre, texte){
            texte_complet = texte;
            if (i_lettre < texte.length) {
                timeOut = setTimeout(function () {
                    i_lettre++;
                    var type = texte.substring(0, i_lettre);
                    $('.texte-introduction.en_cours').text(type);
                    apparitionLettres(i_lettre, texte);

                    if (i_lettre === texte.length) {
                        let id = $('.texte-introduction.en_cours').data('id');
                        $('.proposition[data-id="' + id + '"]').fadeIn('slow');
                        $('#texte-fin').fadeIn('slow');
                        $('#bloc-boutons-fin').fadeIn('slow');
                        if (question_en_cours != null && question_en_cours.fin != null) {
                            son_fin.play();
                        }
                        if($('#texte-conseil').text() != '')
                            $('.bloc-conseil[data-id="' + id + '"]').fadeIn('slow');
                        $('.texte-introduction.en_cours').removeClass('en_cours');
                        $('#texte-passer').hide();
                        clearTimeout(timeOut);
                    }
                }, 25);
            }
        }

        $('body').on('click', 'input[name="quiz"]', function () {
            i++;
            son_choix.play();
            if(question_en_cours != null){
                if($(this).val() == 'A'){
                    chemin = question_en_cours.liaison1;
                    technique += parseInt(question_en_cours.technique1);
                    popularite += parseInt(question_en_cours.popularite1);
                    semantique += parseInt(question_en_cours.semantique1);
                }
                else if ($(this).val() == 'B') {
                    chemin = question_en_cours.liaison2;
                    technique += parseInt(question_en_cours.technique2);
                    popularite += parseInt(question_en_cours.popularite2);
                    semantique += parseInt(question_en_cours.semantique2);
                }
                else if ($(this).val() == 'C') {
                    chemin = question_en_cours.liaison3;
                    technique += parseInt(question_en_cours.technique3);
                    popularite += parseInt(question_en_cours.popularite3);
                    semantique += parseInt(question_en_cours.semantique3);
                }
            }
            else{
                chemin = '1';
            }
            chargerQuestion(chemin);
        });

        $('body').keyup(function (e) {
            if (e.which === 32) {
                son_type.pause();
                son_type.currentTime = 0;
                let id = $('.texte-introduction.en_cours').data('id');
                $('#texte-fin').fadeIn('slow');
                $('#bloc-boutons-fin').fadeIn('slow');
                $('.proposition[data-id="' + id + '"]').fadeIn('slow');
                if(question_en_cours != null && question_en_cours.fin != null){
                    son_fin.play();
                }
                if ($('#texte-conseil').text() != '')
                    $('.bloc-conseil[data-id="' + id + '"]').fadeIn('slow');
                $('.texte-introduction').text(texte_complet);
                $('.texte-introduction.en_cours').removeClass('en_cours');
                $('#texte-passer').hide();
                clearTimeout(timeOut);
            }
        });

        $('#bouton-mute').click(function(){
            muted = !muted;
            gestionSon();
        });

        function gestionSon(){
            if (muted) {
                son_type.muted = true;
                son_choix.muted = true;
                son_fin.muted = true;
                $('#bouton-mute').addClass('muted').removeClass('sounded').text('🔇');
            } else {
                son_type.muted = false;
                son_choix.muted = false;
                son_fin.muted = false;
                $('#bouton-mute').addClass('sounded').removeClass('muted').text('🔉');
            }
            localStorage.setItem('muted', muted);
        }

        $('body').on('click', '.bouton-rejouer', function () {
            $.ajax({
                type: "POST",
                url: '{{ url('score') }}',
                data: {
                    i: i,
                    chemin: chemin,
                    technique: technique,
                    popularite: popularite,
                    semantique: semantique
                }
            }).done(function (response) {
                window.location.reload();
            });
        });

    </script>
@stop