@extends('V2.layouts.onBoarding')

@section('content')
    <div class="content_wrapper radio_wrapper">
        <div class="inner_title mb-4">
            <h3>Conecta con nosotros en WhatsApp</h3>
            <ul class="cstm_ul_whatsup">
                <li>Recibe contenido motivacional diario</li>
                <li>Consejos para mantenerte en el camino correcto</li>
                <li>Chat gratuito con expertos</li>
            </ul>
        </div>

        <form id="frmBasic" name="frmBasic">
            <div class="wrap">
                <div class="form_field">
                    <input class="radio connectRadio" type="radio" data-value="YES" name="vConnect" id="rbt1"
                        value="Yes, let’s connect!" {{ !empty($vMobile) ? 'checked' : '' }}>
                    <label class="radio_btn" for="rbt1">
                        ¡Sí, conectemos!
                    </label>
                </div>

                <div class="form_field">
                    <input class="radio connectRadio" type="radio" data-value="NO" name="vConnect" id="rbt2"
                        value="No, thanks!">
                    <label class="radio_btn" for="rbt2">
                        ¡No, gracias!
                    </label>
                </div>

                {{-- WhatsApp Content --}}
                <div class="{{ empty($vMobile) ? 'whatsapp-hide' : '' }}" id="whatsappContent">
                    <div class="inner_title mb-4">
                        <h3>Mi número de WhatsApp es</h3>
                        <span class="error_msg"></span>
                    </div>

                    <div class="form_field form_field2 form_fiel3 overlap_css_tele">
                        <select class="select cstm_tele_select" name="vDialCode" id="vDialCode">
                            @foreach ($country as $row)
                                <option value="{{ str_replace('+', '', $row->vDialCode) }}"
                                    {{ $connectCountry == $row->iCurrencyId ? 'selected' : '' }}>
                                    {{ $row->vCountryName . ' (' . $row->vDialCode . ')' }}
                                </option>
                            @endforeach
                        </select>

                        <input class="input cstm_input_tele" type="number" name="vMobile" value="{{ $vMobile ?? '' }}"
                            onkeypress="return ((event.charCode >= 48 && event.charCode <= 57) 
                            || event.charCode==190 || event.charCode==110 || event.charCode==46);"
                            inputmode="numeric">
                    </div>

                    <div class="form_field button_wrap">
                        <button type="button" class="button" name="btnSubmit" id="btnSubmit">Enviar</button>
                    </div>
                </div>
            </div>
        </form>
    </div>
@endsection
@push('scripts')
    <script type="module">
        $(function() {
            $("#btnBack").on("click", function() {
                window.location =
                    "{{ isset($backUrl) && $backUrl != '' ? $backUrl : url($onBoardUrlPrefix . 'current-status/3-4') }}";
            });

            $('.connectRadio').on("click", function() {
                let ConnectValue = $('[name=vConnect]:checked').attr('data-value')

                if (ConnectValue == "YES") {
                    $('#whatsappContent').removeClass('whatsapp-hide')
                } else {
                    window.location = "{{ url($onBoardUrlPrefix . 'current-status/3-5') }}";
                }
            })

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