@extends('V2.layouts.onBoarding')

@section('content')
    <div class="content_wrapper">
        <div class="inner_title">
            <h3>Escuché sobre QuitSure de…<span>*</span></h3>
            <p></p>
            <span class="error_msg"></span>
        </div>

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

                {{-- Recommended by a QuitSure user --}}
                <div class="form_field">
                    <input class="checkbox" type="checkbox" name="heardAboutUs[]" id="chk1"
                        value="Recommended by a QuitSure user"
                        {{ in_array('Recommended by a QuitSure user', $heardAboutUs ?? []) ? 'checked' : '' }}>
                    <label class="checkbox_btn" for="chk1">Recomendado por un usuario de QuitSure</label>
                </div>

                {{-- The QuitSure Facebook Group --}}
                <div class="form_field">
                    <input class="checkbox" type="checkbox" name="heardAboutUs[]" id="chk2"
                        value="The QuitSure Facebook Group"
                        {{ in_array('The QuitSure Facebook Group', $heardAboutUs ?? []) ? 'checked' : '' }}>
                    <label class="checkbox_btn" for="chk2">El grupo de Facebook de QuitSure</label>
                </div>

                {{-- A Facebook Ad --}}
                <div class="form_field">
                    <input class="checkbox" type="checkbox" name="heardAboutUs[]" id="chk3" value="A Facebook Ad"
                        {{ in_array('A Facebook Ad', $heardAboutUs ?? []) ? 'checked' : '' }}>
                    <label class="checkbox_btn" for="chk3">Un anuncio en Facebook</label>
                </div>

                {{-- Searched on Google --}}
                <div class="form_field">
                    <input class="checkbox" type="checkbox" name="heardAboutUs[]" id="chk4" value="Searched on Google"
                        {{ in_array('Searched on Google', $heardAboutUs ?? []) ? 'checked' : '' }}>
                    <label class="checkbox_btn" for="chk4">Búsqueda en Google</label>
                </div>

                {{-- App store vs Play store --}}
                @if (strtolower($deviceType ?? '') === 'android')
                    <div class="form_field">
                        <input class="checkbox" type="checkbox" name="heardAboutUs[]" id="chk5"
                            value="Searched on the Play Store"
                            {{ in_array('Searched on the Play Store', $heardAboutUs ?? []) ? 'checked' : '' }}>
                        <label class="checkbox_btn" for="chk5">Búsqueda en Play Store</label>
                    </div>
                @else
                    <div class="form_field">
                        <input class="checkbox" type="checkbox" name="heardAboutUs[]" id="chk5"
                            value="Searched on the App store"
                            {{ in_array('Searched on the App store', $heardAboutUs ?? []) ? 'checked' : '' }}>
                        <label class="checkbox_btn" for="chk5">Búsqueda en App store</label>
                    </div>
                @endif

                {{-- On Instagram --}}
                <div class="form_field">
                    <input class="checkbox" type="checkbox" name="heardAboutUs[]" id="chk6" value="On Instagram"
                        {{ in_array('On Instagram', $heardAboutUs ?? []) ? 'checked' : '' }}>
                    <label class="checkbox_btn" for="chk6">En Instagram</label>
                </div>

                {{-- From a non-smoker friend/family --}}
                <div class="form_field">
                    <input class="checkbox" type="checkbox" name="heardAboutUs[]" id="chk7"
                        value="From a non-smoker friend/family"
                        {{ in_array('From a non-smoker friend/family', $heardAboutUs ?? []) ? 'checked' : '' }}>
                    <label class="checkbox_btn" for="chk7">De un amigo/familiar no fumador</label>
                </div>

                {{-- Others --}}
                @php
                    // Extract "Other:*" values if present
                    $other = array_filter($heardAboutUs ?? [], fn($val) => str_starts_with($val, 'Other'));
                    $otherValue = '';
                    if (!empty($other)) {
                        $otherValue = explode(':', implode(',', $other))[1] ?? '';
                    }
                @endphp

                @if (!empty($other))
                    <div class="form_field">
                        <input class="checkbox" type="checkbox" name="heardAboutUs[]" id="chk8" value="Others" checked>
                        <label class="checkbox_btn" for="chk8">Otros</label>
                    </div>
                    <div class="form_field">
                        <input type="text" class="input" name="txtOthers" id="txtOther"
                            placeholder="Where did you hear of us" value="{{ $otherValue }}">
                    </div>
                @else
                    <div class="form_field">
                        <input class="checkbox" type="checkbox" name="heardAboutUs[]" id="chk8" value="Others">
                        <label class="checkbox_btn" for="chk8">Otros</label>
                    </div>
                    <div class="form_field">
                        <input type="text" class="input" name="txtOthers" id="txtOther"
                            placeholder="Where did you hear of us" value="" style="display:none;">
                    </div>
                @endif
            </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() {
            $("#chk8").on("click", function() {
                $("#txtOther").val("");
                if ($(this).is(":checked")) {
                    $("#txtOther").show();
                } else {
                    $("#txtOther").hide();
                }
            });

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

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