@extends('layout.b2c')
@section('title', 'Pretplata za online kurseve')
@section('meta-description', 'Pretplatite se i otključaj neograničen pristup svim online kursevima Krojaceve Škole. Uči u svom ritmu, bilo kada i bilo gde. Brzo i bezbedno plaćanje.')

@section('content')
    <div class="page-wrapper">

        {{-- @include('front.buy_subscribe.partials._header') --}}

        @include('front.buy_subscribe.partials._section-purchase-course-kupovina')

        @include('front.buy_subscribe.partials._section-purchase')
        
        @include('front.partials.index_b2c._footer')

        <!-- floating-button-mobile -->
        {{-- <div class="footer-floating-btn">
            <button class="btn btn-square-50 neon-blue-bg pulse-effect blue" type="button" onclick="location.href = '#';">
                Biznis korisnici
            </button>
        </div> --}}
        <!-- floating-button-mobile end -->
    </div>
    <!--- page-wrapper end -->
    @include('front.buy_subscribe.partials._modal-dodaj-adresu')
@endsection

@section('add-scripts')
    @parent
    <!-- Dodavanje na Large Check klase checked za izabrani radio input -->
    <script type="text/javascript">
        document.addEventListener('DOMContentLoaded', function() {
            // Find all radio inputs
            const radioInputs = document.querySelectorAll('input[name="subscriber_type_id"]');

            // Add event listener for each radio input
            radioInputs.forEach(radio => {
                radio.addEventListener('change', function() {
                    document.querySelector("#subscriber_type_name").innerHTML = JSON.parse(radio
                        .dataset.subscriber_type).name
                    document.querySelector("#subscriber_type_price").innerHTML = JSON.parse(radio
                        .dataset.subscriber_type).price
                    // Remove class 'checked' from all large-check elements
                    document.querySelectorAll('.large-check').forEach(check => {
                        check.classList.remove('checked');
                    });

                    // Add class 'checked' only on selected element
                    if (this.checked) {
                        this.closest('.large-check').classList.add('checked');
                    }
                });
            });
        });
    </script>

    <!-- Dodavanje na Medium Check klase checked za izabrani radio input -->
    <script type="text/javascript">
        document.addEventListener('DOMContentLoaded', function() {
            // Find all radio inputs
            const radioInputs = document.querySelectorAll('input[name="payment_method"]');

            // Add event listener for each radio input
            radioInputs.forEach(radio => {
                radio.addEventListener('change', function() {
                    document.querySelector("#chosen_payment_method_name").innerHTML = JSON.parse(
                        radio.dataset.payment_method).name
                    // Remove class 'checked' from all large-check elements
                    document.querySelectorAll('.medium-check').forEach(check => {
                        check.classList.remove('checked');
                    });

                    document.querySelector("#chosen_payment_method_name_label").innerHTML = JSON.parse(radio.dataset.payment_method).value == 'kreditna_kartica' ? 'Automatska obnova, može se isključiti u bilo kom trenutku' : 'Obnova nije automatska, dobićete podsetnik putem mejla';

                    // Add class 'checked' only on selected element
                    if (this.checked) {
                        this.closest('.medium-check').classList.add('checked');
                    }
                });
            });
        });
    </script>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const saveButton = document.querySelector('#modal-dodaj-adresu .modal-footer .btn');

            saveButton.addEventListener('click', function() {
                // Dohvati elemente
                const inputAddress = document.getElementById('inputAddress');
                const selectCountry = document.getElementById('selectCountry');
                const inputCity = document.getElementById('inputCity');
                const inputPostalNumber = document.getElementById('inputPostalNumber');

                let isValid = true;

                // Funkcija za proveru i dodavanje/uklanjanje klase
                function validateField(field) {
                    if (!field.value.trim()) {
                        field.classList.add('is-invalid');
                        isValid = false;
                    } else {
                        field.classList.remove('is-invalid');
                    }
                }

                // // Validacija svih polja
                // validateField(inputAddress);
                // validateField(selectCountry);
                // validateField(inputCity);
                // validateField(inputPostalNumber);

                // Ako nije validno, prekidamo dalje izvršavanje
                if (!isValid) {
                    document.querySelector("#payment-address-holder").classList.add('d-none')
                    return;
                }

                // Ako je sve validno, nastavi
                const formData = {
                    address: inputAddress.value.trim(),
                    country: selectCountry.value,
                    city: inputCity.value.trim(),
                    postalNumber: inputPostalNumber.value.trim()
                };

                console.log('Form data:', formData);

                document.querySelector("#text-address").innerHTML = formData.address;
                document.querySelector("#text-country").innerHTML = formData.country;
                document.querySelector("#text-city").innerHTML = formData.city;
                document.querySelector("#text-post-code").innerHTML = formData.postalNumber;

                document.querySelector("#address").value = formData.address;
                document.querySelector("#country").value = formData.country;
                document.querySelector("#city").value = formData.city;
                document.querySelector("#post_code").value = formData.postalNumber;

                document.querySelector("#payment-address-holder").classList.remove('d-none')

                const modalElement = document.getElementById('modal-dodaj-adresu');
                const modalInstance = bootstrap.Modal.getInstance(modalElement);
                modalInstance.hide();
                // Ovde može i AJAX slanje, zatvaranje modala itd.
            });
        });
    </script>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const form = document.getElementById('kupovina-store-form');

            form.addEventListener('submit', function(e) {
                let errors = [];
                let isValid = true;

                // Provera radio dugmadi
                const subscriberType = document.querySelector('input[name="subscriber_type_id"]:checked');
                const paymentMethod = document.querySelector('input[name="payment_method"]:checked');

                if (!subscriberType) {
                    isValid = false;
                    errors = [...errors, "Nije izabran tip pretplatnika."];
                }

                if (!paymentMethod) {
                    isValid = false;
                    errors = [...errors, "Nije izabran način plaćanja."];
                }

                // Provera input polja
                // const fields = ['address', 'country', 'city', 'post_code'];

                // fields.forEach(fieldName => {
                //     const field = document.getElementById(fieldName);
                //     if (!field.value.trim()) {
                //         isValid = false;
                //     } else {
                //         field.classList.remove('is-invalid');
                //     }
                // });

                if (!isValid) {
                    e.preventDefault(); // Sprečava slanje forme
                    alert(errors.join(','))
                }
            });
        });
    </script>
@endsection