@extends('V2.layouts.onBoarding')

@section('content')
    <div class="content_wrapper">
        <div class="inner_title">
            <h3>¿Qué desafíos enfrentaste en tus intentos anteriores de dejar de fumar que causaron tu
                recaída?<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="setPastRelapseReasons[]" id="chk1"
                        value="Couldn’t resist cravings" @checked(!empty($setPastRelapseReasons) && in_array('Couldn’t resist cravings', $setPastRelapseReasons))>
                    <label class="checkbox_btn" for="chk1">No pude resistir los antojos</label>
                </div>

                <div class="form_field">
                    <input class="checkbox" type="checkbox" name="setPastRelapseReasons[]" id="chk2"
                        value="Withdrawal symptoms" @checked(!empty($setPastRelapseReasons) && in_array('Withdrawal symptoms', $setPastRelapseReasons))>
                    <label class="checkbox_btn" for="chk2">Síntomas de abstinencia</label>
                </div>

                <div class="form_field">
                    <input class="checkbox" type="checkbox" name="setPastRelapseReasons[]" id="chk3"
                        value="Weight gain" @checked(!empty($setPastRelapseReasons) && in_array('Weight gain', $setPastRelapseReasons))>
                    <label class="checkbox_btn" for="chk3">Aumento de peso</label>
                </div>

                <div class="form_field">
                    <input class="checkbox" type="checkbox" name="setPastRelapseReasons[]" id="chk4"
                        value="Anxiety/restlessness" @checked(!empty($setPastRelapseReasons) && in_array('Anxiety/restlessness', $setPastRelapseReasons))>
                    <label class="checkbox_btn" for="chk4">Ansiedad/inquietud</label>
                </div>

                <div class="form_field">
                    <input class="checkbox" type="checkbox" name="setPastRelapseReasons[]" id="chk5"
                        value="Lack of focus" @checked(!empty($setPastRelapseReasons) && in_array('Lack of focus', $setPastRelapseReasons))>
                    <label class="checkbox_btn" for="chk5">Falta de concentración</label>
                </div>

                <div class="form_field">
                    <input class="checkbox" type="checkbox" name="setPastRelapseReasons[]" id="chk6"
                        value="Wanted just one cigarette" @checked(!empty($setPastRelapseReasons) && in_array('Wanted just one cigarette', $setPastRelapseReasons))>
                    <label class="checkbox_btn" for="chk6">Quería solo un cigarrillo</label>
                </div>

                <div class="form_field">
                    <input class="checkbox" type="checkbox" name="setPastRelapseReasons[]" id="chk7" value="Other"
                        @checked(!empty($setPastRelapseReasons) && in_array('Other', $setPastRelapseReasons))>
                    <label class="checkbox_btn" for="chk7">Otro</label>
                </div>
            </div>

            <div class="form_field button_wrap">
                <button type="submit" class="button" name="btnSubmit" id="btnSubmit">¿Será QuitSure diferente?</button>
            </div>
        </form>
    </div>
@endsection

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

            $("#btnSubmit").on("click", function() {
                var url = "{{ url($onBoardUrlPrefix . 'quitting-history/4-3/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>
@endpush