@extends('V2.layouts.onBoarding')

@section('content')
    <div class="content_wrapper">
        <div class="inner_title">
            <h3>¿Cuáles de estos problemas de salud relacionados con el tabaquismo estás enfrentando
                actualmente?<span>*</span></h3>
            <p>Selecciona todos los 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="setHealthIssues[]" id="tiredness" value="Tiredness"
                        @checked(in_array('Tiredness', $setHealthIssues))>
                    <label class="checkbox_btn" for="tiredness">
                        Cansancio
                    </label>
                </div>

                <div class="form_field">
                    <input class="checkbox" type="checkbox" name="setHealthIssues[]" id="shortnessofbreath"
                        value="Shortness of breath" @checked(in_array('Shortness of breath', $setHealthIssues))>
                    <label class="checkbox_btn" for="shortnessofbreath">
                        Falta de aliento
                    </label>
                </div>

                <div class="form_field">
                    <input class="checkbox" type="checkbox" name="setHealthIssues[]" id="asthma" value="Asthma/COPD"
                        @checked(in_array('Asthma/COPD', $setHealthIssues))>
                    <label class="checkbox_btn" for="asthma">
                        Asma/EPOC
                    </label>
                </div>

                <div class="form_field">
                    <input class="checkbox" type="checkbox" name="setHealthIssues[]" id="frequentcough"
                        value="Regular cough/cold/flu" @checked(in_array('Regular cough/cold/flu', $setHealthIssues))>
                    <label class="checkbox_btn" for="frequentcough">
                        Tos/resfriado/gripe regular
                    </label>
                </div>

                <div class="form_field">
                    <input class="checkbox" type="checkbox" name="setHealthIssues[]" id="cancer" value="Cancer"
                        @checked(in_array('Cancer', $setHealthIssues))>
                    <label class="checkbox_btn" for="cancer">
                        Cáncer
                    </label>
                </div>

                <div class="form_field">
                    <input class="checkbox" type="checkbox" name="setHealthIssues[]" id="bloodpressure"
                        value="High blood pressure" @checked(in_array('High blood pressure', $setHealthIssues))>
                    <label class="checkbox_btn" for="bloodpressure">
                        Alta presión sanguínea
                    </label>
                </div>

                <div class="form_field">
                    <input class="checkbox" type="checkbox" name="setHealthIssues[]" id="moodissues" value="Mood issues"
                        @checked(in_array('Mood issues', $setHealthIssues))>
                    <label class="checkbox_btn" for="moodissues">
                        Problemas de estado de ánimo
                    </label>
                </div>

                <div class="form_field">
                    <input class="checkbox" type="checkbox" name="setHealthIssues[]" id="sexualhealth"
                        value="Sexual health/impotence/fertility" @checked(in_array('Sexual health/impotence/fertility', $setHealthIssues))>
                    <label class="checkbox_btn" for="sexualhealth">
                        Salud sexual/impotencia/fertilidad
                    </label>
                </div>

                <div class="form_field">
                    <input class="checkbox" type="checkbox" name="setHealthIssues[]" id="other" value="Other"
                        @checked(in_array('Other', $setHealthIssues))>
                    <label class="checkbox_btn" for="other">
                        Otros
                    </label>
                </div>

                <div class="form_field">
                    <input class="checkbox" type="checkbox" name="setHealthIssues[]" id="nohealthissue"
                        value="No health issues" @checked(in_array('No health issues', $setHealthIssues))>
                    <label class="checkbox_btn" for="nohealthissue">
                        Sin problemas de salud
                    </label>
                </div>
            </div>
            <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() {
            const fbConfig = {
                type: "custom",
                eventName: "OnBoardStage3",
                params: {
                    Stage: "3",
                    section: "onboarding"
                }
            };
            dispatchFacebookTracking(fbConfig);

            const fbConfigLead = {
                type: "lead",
                eventId: '{{ $fb_event_id }}',
                email: '{{ $fb_event_email }}',
                externalId: '{{ $fb_external_id }}',
            };
            dispatchFacebookTracking(fbConfigLead);

            $("#btnBack").on("click", function() {
                window.location =
                    "{{ isset($backUrl) && $backUrl != '' ? $backUrl : url($onBoardUrlPrefix . 'smoking-behavior/2-6') }}";
            });

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