@extends('V2.layouts.onBoarding')

@section('content')
    <div class="content_wrapper">
        <div class="text_wrapper">
            <div class="inner_title">
                <h1>Quel programme devriez-vous choisir ?</h1>
                <p></p>
                <span class="error_msg"></span>
            </div>
            <p><small>QuitSure propose 2 versions : </small></p>
            <p><b class="blue">‘Texte’</b> and <b class="blue">‘Vidéo’</b> </p>
            <p class="bg_orange border_radius">Les deux comprennent exactement le même contenu </p>
            <p><small>Cependant: </small><br>
                Le programme ‘Texte’ vous donne <em class="blue bg_yellow">90 % du matériel sous forme de texte</em>
            </p>
            <p>Le programme ‘Vidéo’ est composé de <em class="blue bg_yellow">90 % de vidéos.</em></p>
            <p>Certaines personnes apprennent et comprennent mieux en lisant. La plupart des autres apprennent mieux en
                écoutant et en regardant. Vous devriez choisir celui que vous êtes plus susceptible de suivre et
                d'apprécier.</p>
            <p><small>Pour vous aider à prendre une décision simple: </small><br>
            <p class="bg_orange border_radius">Si vous aimez lire des livres au moins autant que regarder des films, alors le
                programme ‘Texte’ (basé sur le texte) est meilleur pour vous. Si Netflix et YouTube sont là où vous préférez
                passer votre temps, alors vous devriez probablement choisir le programme ‘Vidéo’.</p>
            </p>
        </div>

        <div class="button_wrap">
            <button type="button" class="button" name="btnSubmit" id="btnSubmit">JE SUIS PRÊT(E) À COMMENCER</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