@extends('V2.layouts.onBoarding')

@section('content')
    <div class="content_wrapper">
        <div class="inner_title">
            <h3>Me preocupa que si dejo de fumar...<span>*</span></h3>
            <p>Selecciona todas las que correspondan</p>
            <span class="error_msg"></span>
        </div>

        <form id="frmBasic" name="frmBasic">
            <div class="wrap">

                <div class="form_field">
                    <input class="checkbox" type="checkbox" name="setQuittingConcerns[]" id="chk1"
                        value="I’ll have to change my lifestyle" @checked(!empty($setQuittingConcerns) && in_array('I’ll have to change my lifestyle', $setQuittingConcerns))>
                    <label class="checkbox_btn" for="chk1">
                        Tendré que cambiar mi estilo de vida
                    </label>
                </div>

                <div class="form_field">
                    <input class="checkbox" type="checkbox" name="setQuittingConcerns[]" id="chk2"
                        value="I’ll lose my friends" @checked(!empty($setQuittingConcerns) && in_array('I’ll lose my friends', $setQuittingConcerns))>
                    <label class="checkbox_btn" for="chk2">
                        Perderé a mis amigos
                    </label>
                </div>

                <div class="form_field">
                    <input class="checkbox" type="checkbox" name="setQuittingConcerns[]" id="chk3"
                        value="I’ll gain weight" @checked(!empty($setQuittingConcerns) && in_array('I’ll gain weight', $setQuittingConcerns))>
                    <label class="checkbox_btn" for="chk3">
                        Subiré de peso
                    </label>
                </div>

                <div class="form_field">
                    <input class="checkbox" type="checkbox" name="setQuittingConcerns[]" id="chk4"
                        value="I’ll relapse because quitting smoking is really difficult" @checked(
                            !empty($setQuittingConcerns) &&
                                in_array('I’ll relapse because quitting smoking is really difficult', $setQuittingConcerns))>
                    <label class="checkbox_btn" for="chk4">
                        Recaeré porque dejar de fumar es muy difícil
                    </label>
                </div>

                <div class="form_field">
                    <input class="checkbox" type="checkbox" name="setQuittingConcerns[]" id="chk5"
                        value="I will have withdrawal symptoms" @checked(!empty($setQuittingConcerns) && in_array('I will have withdrawal symptoms', $setQuittingConcerns))>
                    <label class="checkbox_btn" for="chk5">
                        Tendré síntomas de abstinencia
                    </label>
                </div>

                <div class="form_field">
                    <input class="checkbox" type="checkbox" name="setQuittingConcerns[]" id="chk6"
                        value="My mental health issues will get worse" @checked(!empty($setQuittingConcerns) && in_array('My mental health issues will get worse', $setQuittingConcerns))>
                    <label class="checkbox_btn" for="chk6">
                        Mis problemas de salud mental empeorarán
                    </label>
                </div>

                <div class="form_field">
                    <input class="checkbox" type="checkbox" name="setQuittingConcerns[]" id="chk7"
                        value="Not worried. Just excited." @checked(!empty($setQuittingConcerns) && in_array('Not worried. Just excited.', $setQuittingConcerns))>
                    <label class="checkbox_btn" for="chk7">
                        No estoy preocupado/a. Solo emocionado/a.
                    </label>
                </div>
            </div>

            <div class="form_field button_wrap">
                <button type="button" class="button" name="btnSubmit" id="btnSubmit">Siguiente</button>
            </div>
        </form>
    </div>
@endsection

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

        $("#btnSubmit").on("click", function() {
            var url = "{{ url($onBoardUrlPrefix . 'thought-patterns/5-2/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>