@extends("layouts.zones.diagnose")
@section('content')
<div id="rs-services" class="mt-30 pb-130">
    <div class="container-fluid"> 
        <div class="row  text-center">
            <div class="col-lg-6 col-md-6 col-sm-12">
                <div class="col-md-12 border card-body card-diagnose-company clarify" id="companyCard" onclick="selectCard(1)">
                    <div class="align-middle h-100">
                        <h2 class="mt-5">Test <br> empresarial</h2>
                        <img src="{{asset('assets/images/flecha-removebg-preview.png')}}" class="" alt="">
                    </div>
                </div>
            </div> 
            <div class="col-lg-6 col-md-6 col-sm-12">
                <div class="col-md-12 border card-body card-diagnose-personal strong-card"  id="personalCard" onclick="selectCard(2)">
                    <div class="align-middle h-100">
                        <h2 class="mt-5">Test <br> personal</h2>
                        <img src="{{asset('assets/images/flecha-removebg-preview.png')}}" class="" alt="">
                    </div>
                </div>
            </div> 
        </div>

        @yield('content-questions')
    </div>       
</div>

<section style="">
    <div class="row text-center">
        <div class="col-lg-1 col-md-1"></div>
        <div class="col-lg-2 col-md-2 mb-5 ml-3"><a href="{{url('sensibilizar')}}" class="botonsrs">Sensibilizar</a></div>
        <div class="col-lg-2 col-md-2 mb-5 ml-3"><a href="{{url('informar')}}" class="botonsrd">Diagnosticar</a></div>
        <div class="col-lg-2 col-md-2 mb-5 ml-3"><a href="{{url('diagnosticar')}}" class="botonsra">Actuar</a></div>
        <div class="col-lg-2 col-md-2 mb-5 ml-3"><a href="{{url('evaluar')}}" class="botonsre">Evaluar</a></div>
        <div class="col-lg-2 col-md-2 mb-5 ml-3"><a href="#" class="botonsrr">Recomendados</a></div>
        <div class="col-lg-1 col-md-1"></div>
    </div>
</section>

@endsection

@section('scripts')

<script>
            console.log(JSON.parse(sessionStorage.getItem("questionsDiagnose")));

    let temporalValue = null;

    function clickOption(id){
        $(".question-button-text").removeClass("active");
        $(".question-button-number").removeClass("active");
        $(`#opt-${id}`).addClass('active');

        temporalValue = id;
    }

    function saveQuestion(questionNumber){
        if(temporalValue == null) {
            Swal.fire({
            icon: "error",
            title: "Oops...",
            text: "Por favor seleccione una respuesta",
            });
        }
        else {
            if(questionNumber !=10){
                let responses = JSON.parse(sessionStorage.getItem("questionsDiagnose"));
                if(!responses) responses = [];
                // similar behavior as an HTTP redirect
                window.location.replace("{{url('/diagnosticar')}}/q"+parseInt(questionNumber+1));
                responses[questionNumber] = temporalValue;
                sessionStorage.setItem("questionsDiagnose", JSON.stringify(responses));
                console.log(JSON.parse(sessionStorage.getItem("questionsDiagnose")));
            }
            else{

                Swal.fire({
                    title: "Submit your Github username",
                    input: "text",
                    inputAttributes: {
                        autocapitalize: "off"
                    },
                    showCancelButton: true,
                    confirmButtonText: "Look up",
                    showLoaderOnConfirm: true,
                    preConfirm: async (login) => {
                        try {
                        const githubUrl = `
                            https://api.github.com/users/${login}
                        `;
                        const response = await fetch(githubUrl);
                        if (!response.ok) {
                            return Swal.showValidationMessage(`
                            ${JSON.stringify(await response.json())}
                            `);
                        }
                        return response.json();
                        } catch (error) {
                        Swal.showValidationMessage(`
                            Request failed: ${error}
                        `);
                        }
                    },
                    allowOutsideClick: () => !Swal.isLoading()
                    }).then((result) => {
                    if (result.isConfirmed) {
                        Swal.fire({
                        title: `${result.value.login}'s avatar`,
                        imageUrl: result.value.avatar_url
                        });
                    }
                });

                let timerInterval;
                Swal.fire({
                title: "Enviando tus selecciones, por favor espera",
                timer: 2000,
                timerProgressBar: true,
                didOpen: () => {
                    Swal.showLoading();
                },
                willClose: () => {
                    clearInterval(timerInterval);
                }
                }).then((result) => {
                /* Read more about handling dismissals below */
                if (result.dismiss === Swal.DismissReason.timer) {
                    Swal.fire({
                        icon: "success",
                        title: "Oops...",
                        text: "listo",
                    });
                }
                });
            }
        }
    }


</script>
@endsection