@extends('V2.layouts.onBoarding')

@section('content')
    <div class="content_wrapper">
        <span class="error_msg"></span>
        <form id="frmBasic" name="frmBasic">
            @if (in_array('Smoking cigarettes', $setNicotineTypes))
                <div class="form_inner">
                    <div class="_wrapper">
                        <div class="inner_title">
                            <h3>Comencé a fumar hace</h3>
                        </div>
                        <div class="form_field form_field2">
                            <input class="input inputYearLimit" type="number" min="0" name="iStartedSmoking"
                                value="{{ $smokingStatus['iStartedSmoking'] ?? '' }}" onkeypress="return numbersonly(event)"
                                inputmode="numeric">
                            <label><b>años</b></label>
                        </div>
                    </div>
                    <div class="devider"></div>
                    <div class="_wrapper ">
                        <div class="inner_title">
                            <h3>Número de cigarrillos que fumo actualmente cigarrillos</h3>
                        </div>
                        <div class="form_field form_field2">
                            <input class="input" type="number" min="0" max="300" name="iSmokingCigarettes"
                                id="inputLimit" value="{{ $smokingStatus['iSmokingCigarettes'] ?? '' }}"
                                onkeypress="return numbersonly(event)" inputmode="numeric">
                            <label><b>cada</b></label>
                            <select class="select" name="vMode">
                                <option value="day" @selected(isset($smokingStatus['vMode']) && $smokingStatus['vMode'] == 'day')>día</option>
                                <option value="week" @selected(isset($smokingStatus['vMode']) && $smokingStatus['vMode'] == 'week')>semana</option>
                            </select>
                        </div>
                    </div>
                    <div class="devider"></div>
                    <div class="_wrapper">
                        <div class="inner_title">
                            <h3>Ya he dejado de fumar</h3>
                        </div>
                        <div class="form_field">
                            <input class="radio" type="radio" name="bAlreadyQuit" id="rbt1" value="YES"
                                @checked($bAlreadyQuit)>
                            <label class="radio_btn" for="rbt1">
                                Sí
                            </label>
                        </div>
                        <div class="form_field">
                            <input class="radio" type="radio" name="bAlreadyQuit" id="rbt2" value="NO"
                                @checked(!$bAlreadyQuit)>
                            <label class="radio_btn" for="rbt2">
                                No
                            </label>
                        </div>
                    </div>
                </div>
            @elseif (count($setNicotineTypes) == 1 && in_array('Chewing tobacco (chewing, dipping, snusing, etc)', $setNicotineTypes))
                <div class="form_inner">
                    <div class="_wrapper">
                        <div class="inner_title">
                            <h3>Comencé a fumar hace</h3>
                        </div>
                        <div class="form_field form_field2">
                            <input class="input inputYearLimit" type="number" name="iStartedSmoking" min="0"
                                pattern="^\d*(\.\d{0,2})?$" value="{{ $smokingStatus['iStartedSmoking'] ?? '' }}"
                                onkeypress="return numbersonly(event)" inputmode="numeric">
                            <label><b>años</b></label>
                        </div>
                    </div>
                    <div class="devider"></div>
                    <div class="_wrapper ">
                        <div class="inner_title">
                            <h3>Número de paquetes que mastico actualmente</h3>
                        </div>
                        <div class="form_field form_field2">
                            <input class="input" type="number" name="iSmokingCigarettes" id="inputLimit" min="0"
                                pattern="^\d*(\.\d{0,2})?$" value="{{ $smokingStatus['iSmokingCigarettes'] ?? '' }}"
                                onkeypress="return numbersonly(event)" inputmode="numeric">
                            <label><b>cada</b></label>
                            <select class="select" name="vMode">
                                <option value="day" @selected(isset($smokingStatus['vMode']) && $smokingStatus['vMode'] == 'day')>día</option>
                                <option value="week" @selected(isset($smokingStatus['vMode']) && $smokingStatus['vMode'] == 'week')>semana</option>
                            </select>
                        </div>
                    </div>
                    <div class="devider"></div>
                    <div class="_wrapper">
                        <div class="inner_title">
                            <h3>Ya he dejado de fumar</h3>
                        </div>
                        <div class="form_field">
                            <input class="radio" type="radio" name="bAlreadyQuit" id="rbt1" value="YES"
                                @checked($bAlreadyQuit)>
                            <label class="radio_btn" for="rbt1">
                                Sí
                            </label>
                        </div>
                        <div class="form_field">
                            <input class="radio" type="radio" name="bAlreadyQuit" id="rbt2" value="NO"
                                @checked(!$bAlreadyQuit)>
                            <label class="radio_btn" for="rbt2">
                                No
                            </label>
                        </div>
                    </div>
                </div>
            @else
                <div class="form_inner">
                    <div class="_wrapper">
                        <div class="inner_title">
                            <h3>Comencé a fumar/vapear hace</h3>
                        </div>
                        <div class="form_field form_field2">
                            <input class="input inputYearLimit" type="number" name="iStartedSmoking" min="0"
                                pattern="^\d*(\.\d{0,2})?$" value="{{ $smokingStatus['iStartedSmoking'] ?? '' }}"
                                onkeypress="return numbersonly(event)" inputmode="numeric">
                            <label><b>años</b></label>
                        </div>
                    </div>
                    <div class="devider"></div>
                    <div class="_wrapper ">
                        <div class="inner_title">
                            <h3>Número de cartuchos/recargas que consumo actualmente</h3>
                        </div>
                        <div class="form_field form_field2 wrap_cstm_field">
                            <div class="wrap_flex_field">
                                <input class="input" type="number" name="iSmokingCigarettes" id="inputLimit"
                                    min="0" pattern="^\d*(\.\d{0,2})?$"
                                    value="{{ $smokingStatus['iSmokingCigarettes'] ?? '' }}"
                                    onkeypress="return numbersonly(event)" inputmode="numeric">
                                <label><b>cada</b></label>
                            </div>
                            <select class="select" name="vMode">
                                <option value="day" @selected(isset($smokingStatus['vMode']) && $smokingStatus['vMode'] == 'day')>día</option>
                                <option value="week" @selected(isset($smokingStatus['vMode']) && $smokingStatus['vMode'] == 'week')>semana</option>
                            </select>
                        </div>
                    </div>

                    <div class="devider"></div>
                    <div class="_wrapper">
                        <div class="inner_title">
                            <h3>Ya he dejado de fumar</h3>
                        </div>
                        <div class="form_field">
                            <input class="radio" type="radio" name="bAlreadyQuit" id="rbt1" value="YES"
                                @checked($bAlreadyQuit)>
                            <label class="radio_btn" for="rbt1">
                                Sí
                            </label>
                        </div>
                        <div class="form_field">
                            <input class="radio" type="radio" name="bAlreadyQuit" id="rbt2" value="NO"
                                @checked(!$bAlreadyQuit)>
                            <label class="radio_btn" for="rbt2">
                                No
                            </label>
                        </div>
                    </div>
                </div>
            @endif
            <div class="form_field button_wrap">
                <button type="button" class="button" name="btnSubmit" id="btnSubmit">SIGUIENTE</button>
            </div>
        </form>
    </div>
@endsection

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

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