@extends('V2.layouts.onBoarding')

@section('content')
    <div class="content_wrapper">
        <div class="text_wrapper">
            <div class="inner_title">
                <h1>Which¿Qué programa deberías elegir?</h1>
                <p></p>
                <span class="error_msg"></span>
            </div>
            <p><small>QuitSure existe en 2 formas </small></p>
            <p><b class="blue">‘Texto’</b> and <b class="blue">‘Vídeo’</b> </p>
            <p class="bg_orange border_radius">Ambos tienen exactamente el mismo contenido. </p>
            <p><small>Sin embargo: </small><br>
                El programa ‘Texto’ te proporciona el <em class="blue bg_yellow">90% del material en forma de texto.</em>
            </p>
            <p>El programa ‘Vídeo’ está compuesto en un <em class="blue bg_yellow">90% por vídeos.</em></p>
            <p>Algunos aprenden y entienden mejor el contenido leyendo. La mayoría de los demás aprenden mejor escuchando y
                viendo. Deberías elegir el que es más probable que sigas y disfrutes.</p>
            <p><small>Para ayudarte a tomar una decisión sencilla:</small><br>
            <p class="bg_orange border_radius">Si disfrutas leer libros al menos tanto como ver películas, entonces el
                programa ‘Texto’ es mejor para ti. Si prefieres pasar tu tiempo en Netflix y YouTube, entonces probablemente
                deberías elegir el programa ‘Vídeo’.</p>
            </p>
        </div>

        <div class="button_wrap">
            <button type="button" class="button" name="btnSubmit" id="btnSubmit">ESTOY LISTO/A PARA EMPEZAR</button>
        </div>

    </div>
@endsection

@push('scripts')
    <script type="module">
        $(function() {
            $("#btnBack").on("click", function() {
                window.location =
                    "{{ isset($backUrl) && $backUrl != '' ? $backUrl : url($onBoardUrlPrefix . 'program-setup/6-4') }}";
            });

            $("#btnSubmit").on("click", function() {
                var url = "{{ url($onBoardUrlPrefix . 'program-setup/6-5/Submit') }}";
                ApiService.post(url)
                    .then(response => {
                        const obj = response.data;
                        if (obj.status === true) {
                            window.location.href = obj.url;
                        } else {
                            document.querySelector(".error_msg").innerHTML = '<p>' + obj.message +
                                '</p>';
                        }
                    })
                    .catch(error => {
                        const isOnline = navigator.onLine;
                        document.querySelector(".error_msg").innerHTML = isOnline ?
                            "{{ __('messages.error_while_request') }}" :
                            "{{ __('messages.network_error_please_try_again') }}";
                    });
            });


        });
    </script>
@endpush