@extends('V2.layouts.onBoarding')

@section('content')
    <div class="content_wrapper">
        @if (!empty($vPastQuitAttempts) && $vPastQuitAttempts[0] != 'Never')
            <div class="text_wrapper">
                <p>El fracaso puede ser frustrante y desmotivador. Así que no repitamos lo que no te funcionó.</p>

                <p><em class="blue bg_yellow">Es hora de probar algo nuevo.</em></p>

                <div class="slider_wrap cstm_slider_overwrite">
                    <div class="image_slider owl-carousel owl-carousel">
                        <div class="item">
                            <img src="https://quitsure.s3.ap-south-1.amazonaws.com/on-boarding/reviews/p6/p4.4-review1.png">
                        </div>
                        <div class="item">
                            <img src="https://quitsure.s3.ap-south-1.amazonaws.com/on-boarding/reviews/p6/p4.4-review2.png">
                        </div>
                        <div class="item">
                            <img src="https://quitsure.s3.ap-south-1.amazonaws.com/on-boarding/reviews/p6/p4.4-review3.png">
                        </div>
                    </div>
                </div>

                <p class="bg_orange border_radius">
                    “Aunque nadie puede volver atrás y hacer un nuevo comienzo, cualquiera puede comenzar ahora y crear un
                    nuevo final.” – Carl Bard
                </p>
            </div>

            <div class="button_wrap">
                <button type="button" class="button" name="btnSubmit" id="btnSubmit">¡Estoy listo/a para el éxito!</button>
            </div>
        @else
            <div class="text_wrapper">
                <p class="bg_orange border_radius">
                    “Aunque nadie puede volver atrás y hacer un nuevo comienzo, cualquiera puede comenzar ahora y crear un
                    nuevo final.” – Carl Bard
                </p>
            </div>
            <div class="button_wrap">
                <button type="button" class="button" name="btnSubmit" id="btnSubmit">Siguiente</button>
            </div>
        @endif
    </div>
@endsection

@push('bodyStyles')
    @vite('resources/assets/owl/owl.carousel.min.css')
    @vite('resources/assets/owl/owl.theme.default.min.css')
@endpush

@push('scripts')
    <script src="{{ Vite::asset('resources/assets/owl/owl.carousel.min.js') }}"></script>

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

            $("#btnSubmit").on("click", function() {
                var url = "{{ url($onBoardUrlPrefix . 'quitting-history/4-4/Submit') }}";
                ApiService.post(url)
                    .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') }}";
                    });
            });

            $('.image_slider').owlCarousel({
                loop: false,
                responsiveClass: true,
                responsive: {
                    0: {
                        items: 1,
                        nav: false,
                        dots: true,
                        loop: false,
                    },
                    600: {
                        items: 1,
                        nav: false,
                        dots: true,
                        loop: false,
                    },
                    800: {
                        items: 2,
                        nav: false,
                        loop: false,
                        dots: true,

                    }
                }
            })
        });
    </script>
@endpush