@props([
    'id'     => 'form_id',
    'action' => '',
    'method' => 'POST',
    'lang'   => true,
])

@php
    $httpMethod = strtoupper($method);
    $spoof      = !in_array($httpMethod, ['GET','POST']);
@endphp


<form id="{{ $id }}"
      action="{{ $action }}"
      method="POST"
      enctype="multipart/form-data"
      autocomplete="off">

    @csrf


    {{ $slot }}

</form>


@push('scripts')

    <style>
        .error-highlight {
            box-shadow: 0 0 0 3px rgba(220, 53, 69, 0.3);
            border-color: #dc3545 !important;
            transition: all 0.3s ease;
        }

        .cursor-not-allowed {
            cursor: not-allowed !important;
        }
    </style>

    <script>
        document.addEventListener("DOMContentLoaded", function () {


            const form      = document.getElementById('{{ $id }}');
            const submitBtn = document.getElementById('submit_button');

            form.addEventListener('submit', function (e) {
                e.preventDefault();

                const formData = new FormData(form);

                submitBtn.disabled = true;

                // Clear previous errors
                form.querySelectorAll('.is-invalid').forEach(el => el.classList.remove('is-invalid'));
                form.querySelectorAll('.invalid-feedback').forEach(el => {
                    el.textContent = '';
                    el.style.display = 'none';
                });

                $.ajax({
                    url: form.getAttribute('action'),
                    method: "POST",
                    data: formData,
                    processData: false,
                    contentType: false,
                    beforeSend: function (xhr) {
                        submitBtn.disabled = false;
                    },
                    success: function (res) {
                        // Re-enable button on success
                        // submitBtn.disabled = false;
                        // submitBtn.classList.remove('opacity-75', 'cursor-not-allowed');

                        {{--Swal.fire({--}}
                        {{--    toast: 'success',--}}
                        {{--    icon: 'success',--}}
                        {{--    title: res.message,--}}
                        {{--    position: '{{ app()->getLocale() == 'ar' ? 'top-end' : 'top-start' }}',--}}
                        {{--    showConfirmButton: false,--}}
                        {{--    timer: 3000,--}}
                        {{--    timerProgressBar: true--}}
                        {{--});--}}
                        sessionStorage.setItem('create_toast', JSON.stringify({
                            title: res.message,
                            icon: 'success',
                            type: true
                        }));
                        if (res.redirect_url) {
                            window.location.href = res.redirect_url;
                        }
                    },

                    error: function (xhr) {
                        // Re-enable button on error
                        submitBtn.disabled = false;
                        submitBtn.classList.remove('opacity-75', 'cursor-not-allowed');

                        if (xhr.status === 422) {
                            const errors = xhr.responseJSON.errors;
                            let firstLang = null;
                            let firstErrorElement = null;

                            Object.entries(errors).forEach(([field, messages]) => {
                                let input = document.querySelector(`[name="${field}"]`);
                                if (field == 'permissions') {
                                    const errorDiv = document.querySelector('.error-permissions');
                                    if (errorDiv) {
                                        errorDiv.innerHTML = `<span class="text-danger small">${messages[0]}</span>`;
                                    }
                                    errorDiv.scrollIntoView({
                                        behavior: 'smooth',
                                        block: 'center'
                                    });
                                }

                                // If input not found, try converting dot notation (backend) to bracket notation (frontend)
                                // e.g. name.en -> name[en]
                                if (!input && field.includes('.')) {
                                    const bracketName = field.replace(/\.(\w+)/g, '[$1]');
                                    input = document.querySelector(`[name="${bracketName}"]`);
                                }

                                if (!input) return;

                                input.classList.add('is-invalid');

                                let feedback = input.nextElementSibling;

                                // If immediate sibling is not feedback (e.g. input is wrapped by intlTelInput or similar),
                                // search in the closest parent container
                                if (!feedback || !feedback.classList.contains('invalid-feedback')) {
                                    const parent = input.closest('.mb-3, .form-group, [class*="col-"]') || input.parentElement;
                                    if (parent) {
                                        feedback = parent.querySelector('.invalid-feedback');
                                    }
                                }

                                if (feedback && feedback.classList.contains('invalid-feedback')) {
                                    feedback.innerHTML = messages.join('<br>');
                                    feedback.style.display = 'block';
                                }

                                // Store first error element for scrolling
                                if (!firstErrorElement) {
                                    firstErrorElement = input;
                                }

                                // Auto-switch translation tab
                                if (field.includes('.') && !firstLang) {
                                    firstLang = field.split('.')[1];
                                    switchToTab(firstLang);
                                }
                            });

                            // Scroll to first error element
                            if (firstErrorElement) {
                                setTimeout(() => {
                                    firstErrorElement.scrollIntoView({
                                        behavior: 'smooth',
                                        block: 'center',
                                        inline: 'nearest'
                                    });

                                    // Focus on the first error element
                                    firstErrorElement.focus();

                                    // Add highlight effect
                                    firstErrorElement.classList.add('error-highlight');
                                    setTimeout(() => {
                                        firstErrorElement.classList.remove('error-highlight');
                                    }, 2000);
                                }, 100);
                            }

                            toastr.error("Please fix the errors before submitting again.");
                        } else {
                            toastr.error("Unexpected error, please try again.");
                        }
                    }
                });

            });

        });
    </script>


@endpush