@extends('V2.layouts.onBoarding')

@section('content')
    <div class="content_wrapper radio_wrapper">
        <div class="inner_title">
            <h3>Pour compléter le programme, nous avons besoin de seulement 30 à 60 minutes par jour pour les 6 à 12
                prochains jours. C'est tout ! Prenez un moment pour vous engager à consacrer ce temps à votre chemin vers la
                liberté.<span>*</span></h3>
        </div>

        <form id="frmBasic" name="frmBasic">
            <div class="wrap">
                <div class="form_field">
                    <input class="radio" type="radio" name="setProgramCommit" id="rbt1"
                        value="I am investing in my future. I am ready to commit this time." @checked($setProgramCommit == 'I am investing in my future. I am ready to commit this time.')>
                    <label class="radio_btn" for="rbt1">
                        J'investis dans mon avenir. Je suis prêt(e) à consacrer ce temps.
                    </label>
                </div>

                <div class="form_field">
                    <input class="radio" type="radio" name="setProgramCommit" id="rbt2"
                        value="I will do the program later. I am not sure if I am ready yet." @checked($setProgramCommit == 'I will do the program later. I am not sure if I am ready yet.')>
                    <label class="radio_btn" for="rbt2">
                        Je ferai le programme plus tard. Je ne suis pas sûr(e) d'être prêt(e) maintenant.
                    </label>
                </div>

                <div class="form_field">
                    <input class="radio" type="radio" name="setProgramCommit" id="rbt3"
                        value="Life is really busy right now. I don't know if I can give an hour a day to this."
                        @checked($setProgramCommit == "Life is really busy right now. I don't know if I can give an hour a day to this.")>
                    <label class="radio_btn" for="rbt3">
                        La vie est vraiment chargée en ce moment. Je ne sais pas si je peux y consacrer une heure par jour.
                    </label>
                </div>
            </div>
        </form>
    </div>
@endsection

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

        $("#frmBasic input:radio").on("click", function() {
            var url = "{{ url($onBoardUrlPrefix . 'program-setup/6-1/Submit') }}";
            ApiService.post(url, $("#frmBasic").serialize())
                .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>