@extends('layouts.main')

@section('title')
    {{ __('events.create') }}
@endsection

@section('page_title')
    {{ __('events.create') }}
@endsection

@php
    $breadcrumbs = [
        ['url' => route('events.index'), 'label' => __('events.title')],
        ['url' => '', 'label' => __('events.create')],
    ];
@endphp

@section('content')
    <input type="hidden" name="node_qr_url" value="{{ config('whatsapp.node_qr_url') }}">
    <input type="hidden" name="app_url" value="{{ config('app.url') }}">
    <input type="hidden" name="whatsapp_auth_token" value="{{ config('whatsapp.auth_token', 'your-secret-token-change-in-production') }}">
    
    <div class="space-y-6 w-full">
        <!-- Header Section -->
        <div class="border border-white bg-fl-gray-extra-light/50 backdrop-blur-xl rounded-24 p-4 sm:p-6 shadow-front-box-shadow-glow">
            <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
                <div class="flex items-center space-x-4">
                    <div class="w-12 h-12 bg-primary rounded-2xl flex items-center justify-center shadow-sm flex-shrink-0">
                        <i class="fas fa-calendar-plus text-white text-xl"></i>
                    </div>
                    <div class="flex-1 min-w-0">
                        <h1 class="text-xl sm:text-2xl font-semibold text-gray-700">{{ __('events.create_new') }}</h1>
                        <p class="text-sm sm:text-base text-gray-600 mt-1">{{ __('events.setup_description') }}</p>
                    </div>
                </div>
                <div class="flex items-center gap-3 text-sm bg-white/70 border border-white rounded-2xl px-4 py-3 shadow-sm">
                    <div class="min-w-10 h-10 bg-primary/10 rounded-xl flex items-center justify-center">
                        <i class="fas fa-bolt text-primary text-lg"></i>
                    </div>
                    <div>
                        <p class="font-semibold text-gray-700">{{ __('events.event_setup') }}</p>
                        <p class="text-xs text-gray-500">{{ __('events.quick_easy') }}</p>
                    </div>
                </div>
            </div>
        </div>

        <!-- Alert Messages -->
        @if (Session::has('message'))
            <div class="alert alert-danger border border-red-200 rounded-2xl shadow-sm" role="alert">
                <div class="flex items-center">
                    <i class="fas fa-exclamation-circle mr-3"></i>
                    <div class="alert-body">{{ Session::get('message') }}</div>
                </div>
            </div>
        @endif

        <div class="grid grid-cols-1 xl:grid-cols-3 gap-6">
            <!-- Main Form Card -->
            <div class="xl:col-span-2 border border-white bg-white/90 backdrop-blur-xl rounded-24 shadow-front-box-shadow-glow">
                <div class="border border-white bg-fl-gray-extra-light/50 backdrop-blur-xl rounded-24 shadow-front-box-shadow-glow hover:shadow-front-large-blur transition-all duration-300 md:p-6 p-4">
                    <div class="flex items-center space-x-4">
                        <div class="min-w-12 h-12 bg-primary/10 rounded-2xl flex items-center justify-center">
                            <i class="fas fa-link text-primary text-lg"></i>
                        </div>
                        <div>
                            <h3 class="text-lg font-semibold text-gray-700">{{ __('events.setup_whatsapp_connection') }}</h3>
                            <p class="text-sm text-gray-600">{{ __('events.enter_event_details_instruction') }}</p>
                        </div>
                    </div>

                    <form method="post" action="{{ route('events.store') }}" id="event-form" class="space-y-6">
                        @csrf
                        <input type="hidden" name="session_id" id="session_id" value="{{ $sessionId }}">
                        
                        <!-- Form Fields -->
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                            <!-- Event Name Field -->
                            <div class="space-y-2">
                                <label class="form-label" for="name">
                                    <i class="fas fa-calendar-alt mr-2"></i>
                                    {{ __('events.name') }}
                                </label>
                                <input type="text" id="name" class="form-control !mt-0 @error('name') is-invalid @enderror" 
                                       oninput="validateFormInputs()" onkeypress="handleEnterKey(event)" name="name" placeholder="{{ __('events.name_placeholder') }}" />
                                @error('name')
                                    <span class="invalid-feedback">{{ $message }}</span>
                                @enderror
                            </div>

                            <!-- Mobile Number Field -->
                            <div class="space-y-2">
                                <label class="form-label" for="mobile_number">
                                    <i class="fas fa-phone mr-2"></i>
                                    {{ __('events.whatsapp_number') }}
                                </label>
                                <input type="number" id="mobile_number" oninput="validateFormInputs()" onkeypress="handleEnterKey(event)"
                                       class="form-control !mt-0 @error('phone') is-invalid @enderror" 
                                       name="mobile_number" placeholder="{{ __('events.whatsapp_number_placeholder') }}" />
                                <p id="wa-login-msg" class="text-green-600 text-sm mt-2 hidden items-center">
                                    <i class="fas fa-check-circle mr-1"></i>
                                    {{ __('events.whatsapp_logged_in') }}
                                </p>
                                @error('phone')
                                    <span class="invalid-feedback">{{ $message }}</span>
                                @enderror
                            </div>
                        </div>

                        <!-- Action Buttons -->
                        <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3">
                            <div class="flex items-start space-x-2 text-sm text-gray-500">
                                <i class="fas fa-info-circle text-primary mt-1"></i>
                                <p>{{ __('events.connection_help_text') }}</p>
                            </div>
                            <button type="button" onclick="generateQRCode()" id="generateQRButton" 
                                    disabled class="btn btn-primary flex items-center justify-center w-full sm:w-auto shadow-lg hover:shadow-xl transition-all duration-200">
                                <i class="fas fa-qrcode mr-2"></i>
                                {{ __('events.generate_qr_code') }}
                            </button>
                        </div>

                        <!-- QR Code Section -->
                        <div class="qr-div justify-center mt-2 hidden">
                            <div class="bg-fl-gray-extra-light/60 border border-dashed border-primary/30 rounded-24 p-6 text-center w-full">
                                <div id="loader" class="flex flex-col items-center justify-center space-y-3">
                                    <div class="animate-spin rounded-full h-12 w-12 border-b-2 border-primary"></div>
                                    <p class="text-sm text-gray-600">{{ __('events.generating_qr') }}</p>
                                </div>
                                <div id="qr-code-container" class="hidden">
                                    <div class="bg-white rounded-2xl p-4 inline-block shadow-md border border-gray-100">
                                        <img src="" alt="QR code" id="qr-code" class="mx-auto">
                                    </div>
                                    <div class="mt-4 space-y-1">
                                        <p class="text-gray-600 flex items-center justify-center">
                                            <i class="fas fa-mobile-alt mr-2"></i>
                                            {{ __('events.scan_qr_whatsapp') }}
                                        </p>
                                        <p class="text-sm text-gray-500">
                                            {{ __('events.scan_qr_instructions') }}
                                        </p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>

            <!-- Quick Tips Card -->
            <div class="xl:col-span-1 flex flex-col gap-4">
                <div class="bg-gradient-to-br from-primary/10 via-white to-secondary/10 rounded-24 border border-white shadow-front-box-shadow-glow h-full">
                    <div class="md:p-6 p-4 space-y-4">
                        <div class="flex items-center space-x-4">
                            <div class="min-w-12 h-12 bg-primary/10 border border-primary/20 rounded-2xl flex items-center justify-center">
                                <i class="fas fa-lightbulb text-primary"></i>
                            </div>
                            <div>
                                <h3 class="text-lg font-semibold text-gray-700">{{ __('events.quick_tips') }}</h3>
                                <p class="text-sm text-gray-600">{{ __('events.quick_tips_subtitle') }}</p>
                            </div>
                        </div>
                        <ul class="space-y-3 text-sm text-gray-600">
                            <li class="flex items-start space-x-3">
                                <span class="w-6 h-6 rounded-full bg-green-100 text-green-600 flex items-center justify-center mt-0.5">
                                    <i class="fas fa-check text-xs"></i>
                                </span>
                                <span>{{ __('events.tip_1') }}</span>
                            </li>
                            <li class="flex items-start space-x-3">
                                <span class="w-6 h-6 rounded-full bg-green-100 text-green-600 flex items-center justify-center mt-0.5">
                                    <i class="fas fa-check text-xs"></i>
                                </span>
                                <span>{{ __('events.tip_2') }}</span>
                            </li>
                            <li class="flex items-start space-x-3">
                                <span class="w-6 h-6 rounded-full bg-green-100 text-green-600 flex items-center justify-center mt-0.5">
                                    <i class="fas fa-check text-xs"></i>
                                </span>
                                <span>{{ __('events.tip_3') }}</span>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('custom_scripts')
<script>
    const appUrl = $('input[name="app_url"]').val();
    const url = $('input[name="node_qr_url"]').val();
    const authToken = $('input[name="whatsapp_auth_token"]').val();
    const sessionId = @json($sessionId);
    const DEBUG = {{ config('app.debug') ? 'true' : 'false' }};

    // ==============================================
    // HELPER FUNCTIONS
    // ==============================================

    /**
     * Debug logging - only logs in debug mode
     */
    function debugLog(...args) {
        if (DEBUG) {
            console.log(...args);
        }
    }

    function debugError(...args) {
        if (DEBUG) {
            console.error(...args);
        }
    }

    /**
     * Safe redirect with URL validation
     */
    function safeRedirect(url) {
        try {
            const redirectUrl = new URL(url, window.location.origin);
            if (redirectUrl.origin === window.location.origin) {
                window.location.href = redirectUrl.href;
            } else {
                debugError('Attempted redirect to external URL:', url);
                alert(@json(__('events.invalid_redirect_url')));
            }
        } catch (error) {
            debugError('Invalid URL:', url, error);
            alert('Invalid redirect URL');
        }
    }

    /**
     * Deactivate QR with race condition protection
     */
    function deactivateQR() {
        if (!isQRActive) {
            return false; // Already deactivated
        }
        isQRActive = false;
        return true; // Successfully deactivated
    }

    /**
     * Submit event to server with comprehensive error handling
     */
    async function submitEvent(eventData, context = '') {
        const csrfToken = $('meta[name="csrf-token"]').attr('content');
        debugLog(`Submitting event (${context})...`, eventData);
        
        try {
            const response = await fetch(`${appUrl}/admin/events`, {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': csrfToken,
                    'Accept': 'application/json'
                },
                body: JSON.stringify(eventData),
                credentials: 'same-origin'
            });

            debugLog(`Event submission response status (${context}):`, response.status);
            
            if (!response.ok) {
                if (response.status === 419) {
                    debugError('CSRF token expired');
                    alert(@json(__('events.session_expired')));
                    window.location.reload();
                    throw new Error('CSRF token expired');
                }
                throw new Error(`HTTP error! status: ${response.status}`);
            }
            
            return await response.json();
        } catch (error) {
            debugError(`Error in ${context}:`, error);
            if (DEBUG && error.stack) {
                debugError('Stack trace:', error.stack);
            }
            throw error;
        }
    }

    /**
     * Redirect to campaign creation page
     */
    function redirectToCampaign(eventData) {
        if (eventData.success && eventData.data && eventData.data.id) {
            const redirectUrl = `${appUrl}/admin/campaigns/create/${eventData.data.id}`;
            debugLog('Redirecting to:', redirectUrl);
            safeRedirect(redirectUrl);
            return true;
        } else {
            debugError('Invalid event response:', eventData);
            alert(@json(__('events.failed_to_create_event')));
            return false;
        }
    }

    // ==============================================
    // ACTIVITY-BASED SESSION KEEP-ALIVE
    // ==============================================
    
    let lastUserActivity = Date.now();
    let sessionKeepAliveInterval = null;
    let keepAliveFailures = 0;
    const ACTIVITY_TIMEOUT = 10 * 60 * 1000; // 10 minutes of inactivity
    const PING_INTERVAL = 2 * 60 * 1000; // 2 minutes
    const MAX_FAILURES = 3;

    // Track user activity
    const userActivityEvents = ['mousedown', 'keydown', 'scroll', 'touchstart'];
    userActivityEvents.forEach(event => {
        document.addEventListener(event, () => {
            lastUserActivity = Date.now();
        }, { passive: true });
    });

    // Only ping if user has been active recently
    function startSmartKeepAlive() {
        sessionKeepAliveInterval = setInterval(() => {
            const timeSinceActivity = Date.now() - lastUserActivity;
            
            if (timeSinceActivity < ACTIVITY_TIMEOUT) {
                fetch(`${appUrl}/admin/dashboard`, {
                    method: 'HEAD',
                    credentials: 'same-origin'
                })
                .then(response => {
                    if (response.ok) {
                        keepAliveFailures = 0;
                        debugLog('Session keep-alive successful');
                    } else {
                        keepAliveFailures++;
                        if (keepAliveFailures >= MAX_FAILURES) {
                            debugError('Session keep-alive failed multiple times');
                        }
                    }
                })
                .catch(err => {
                    keepAliveFailures++;
                    debugLog('Session keep-alive error:', err);
                    if (keepAliveFailures >= MAX_FAILURES) {
                        debugError('Network issues detected, session may have expired');
                    }
                });
            } else {
                debugLog('User inactive, skipping keep-alive ping');
            }
        }, PING_INTERVAL);
    }

    // Stop keep-alive when page is hidden/minimized
    document.addEventListener('visibilitychange', () => {
        if (document.hidden) {
            if (sessionKeepAliveInterval) {
                clearInterval(sessionKeepAliveInterval);
                sessionKeepAliveInterval = null;
            }
        } else {
            startSmartKeepAlive();
        }
    });

    startSmartKeepAlive();

    // Clean up on page unload
    window.addEventListener('beforeunload', () => {
        if (sessionKeepAliveInterval) {
            clearInterval(sessionKeepAliveInterval);
        }
    });

    $(document).ready(() => {
        const storedNumber = sessionStorage.getItem('authenticatedNumber');
        if (storedNumber) {
            $('#mobile_number').val(storedNumber).attr('disabled', true);
            $('#generateQRButton').attr('disabled', true);
            $('#generateQRButton').addClass('hidden');
            $('#submitButton').attr('disabled', false);
            $('#submitButton').removeClass('hidden');
            $('#wa-login-msg').removeClass('hidden');
        }
    });

    const validateFormInputs = () => {
        const eventName = $('#name').val().trim();
        const number = $('#mobile_number').val().trim();
        const isNumberValid = /^[0-9]{10,12}$/.test(number);

        if (eventName && isNumberValid && !sessionStorage.getItem('authenticatedNumber')) {
            $('#generateQRButton').attr('disabled', false);
        } else {
            $('#generateQRButton').attr('disabled', true);
            resetQRCodeDisplay();
        }
    };

    const handleEnterKey = (event) => {
        if (event.key === 'Enter') {
            event.preventDefault();
            const eventName = $('#name').val().trim();
            const number = $('#mobile_number').val().trim();
            const isNumberValid = /^[0-9]{10,12}$/.test(number);
            
            if (eventName && isNumberValid && !sessionStorage.getItem('authenticatedNumber')) {
                generateQRCode();
            }
        }
    };

    // Initialize Socket.IO connection with error handling
    let socket = null;
    let isQRActive = false; // Track if QR code is active

    // iOS-Specific Event Handlers - Multiple approaches for maximum compatibility
    const checkConnectionStatus = () => {
        if (!isQRActive) return;
        
        debugLog('Checking connection status (iOS trigger)');
        const mobileNumber = $('#mobile_number').val().trim();
        
        fetch(`${url}/check-device/${sessionId}`, {
            method: 'POST',
            headers: { 
                'Content-Type': 'application/json',
                'Authorization': `Bearer ${authToken}`
            },
            body: JSON.stringify({ mobileNumber: mobileNumber })
        })
        .then(response => response.json())
        .then(data => {
            debugLog('Connection check result:', data);
            if (data.status === 'connected') {
                debugLog('Device was connected! (iOS detection)');
                if (deviceCheckInterval) {
                    clearInterval(deviceCheckInterval);
                    deviceCheckInterval = null;
                }
                
                if (!deactivateQR()) {
                    debugLog('QR already processed, skipping...');
                    return;
                }
                
                // Submit event using helper function
                submitEvent({
                    session_id: sessionId,
                    name: $('#name').val(),
                    mobile_number: data.number,
                    device_connected: 1
                }, 'iOS detection')
                .then(eventData => redirectToCampaign(eventData))
                .catch(error => {
                    // Error already logged by submitEvent
                });
            }
        })
        .catch(error => {
            console.error('Error checking connection:', error);
        });
    };

    // Page Visibility API
    document.addEventListener('visibilitychange', function() {
        if (!document.hidden && isQRActive) {
            debugLog('visibilitychange: Page became visible');
            setTimeout(checkConnectionStatus, 300);
        }
    });

    // Focus event
    window.addEventListener('focus', function() {
        if (isQRActive) {
            debugLog('focus: Window gained focus');
            setTimeout(checkConnectionStatus, 300);
        }
    });

    // Pageshow event
    window.addEventListener('pageshow', function(event) {
        if (isQRActive) {
            debugLog('pageshow: Page shown, persisted:', event.persisted);
            setTimeout(checkConnectionStatus, 300);
        }
    });

    // Resume event
    document.addEventListener('resume', function() {
        if (isQRActive) {
            debugLog('resume: App resumed');
            setTimeout(checkConnectionStatus, 300);
        }
    });

    try {
        socket = io(url, { 
            query: { 
                sessionId: sessionId,
                token: authToken 
            },
            timeout: 10000,
            forceNew: true
        });
        
        socket.on('connect', () => {
            debugLog('Socket.IO connected successfully');
        });
        
        socket.on('connect_error', (error) => {
            debugError('Socket.IO connection error:', error);
            // Continue without Socket.IO - QR generation will still work
        });
        
        socket.on('device-connected', (data) => {
            debugLog('Device connected via socket:', data);
            // Clear polling interval if active
            if (deviceCheckInterval) {
                clearInterval(deviceCheckInterval);
                deviceCheckInterval = null;
            }
            
            if (!deactivateQR()) {
                debugLog('QR already processed, skipping...');
                return;
            }
            
            // Submit event using helper function
            submitEvent({
                session_id: data.sessionId,
                name: $('#name').val(),
                mobile_number: data.authenticatedNumber,
                device_connected: 1
            }, 'socket')
            .then(eventData => redirectToCampaign(eventData))
            .catch(error => {
                // Error already logged by submitEvent
            });
        });

        socket.on('disconnected', (sessionId) => {
            fetch(`${appUrl}/admin/events/check-device/${sessionId}`, {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                body: JSON.stringify({
                    device_connected: 0
                })
            }).then(response => response.json()).catch(error => {
                console.error('Error:', error);
                alert(@json(__('events.unexpected_error_submitting')));
            });
        });
        
    } catch (error) {
        console.error('Failed to initialize Socket.IO:', error);
        // Continue without Socket.IO
    }

    const resetQRCodeDisplay = () => {
        $('.qr-div').removeClass('flex').addClass('hidden');
        $('#qr-code').attr('src', '');
        $('#qr-code-container').addClass('hidden');
        $('#loader').removeClass('hidden');
        isQRActive = false; // Deactivate QR tracking
    };

    let deviceCheckInterval = null;

    const generateQRCode = () => {
        $('.qr-div').removeClass('hidden').addClass('flex');
        $('#loader').removeClass('hidden');
        $('#qr-code-container').addClass('hidden');
        const mobileNumber = $('#mobile_number').val().trim();
        isQRActive = true; // Mark QR as active for visibility detection

        // Clear any existing polling interval
        if (deviceCheckInterval) {
            clearInterval(deviceCheckInterval);
            deviceCheckInterval = null;
        }

        // First, try to initialize the session if Socket.IO failed
        const initializeSession = () => {
            return fetch(`${url}/init-session/${sessionId}`, {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'Authorization': `Bearer ${authToken}`
                }
            }).catch(error => {
                console.log('Session initialization not available, continuing...');
                return Promise.resolve();
            });
        };

        // Check if device is connected (polling fallback)
        const checkDeviceConnection = () => {
            fetch(`${url}/check-device/${sessionId}`, {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'Authorization': `Bearer ${authToken}`
                },
                body: JSON.stringify({
                    mobileNumber: mobileNumber
                })
            })
            .then(response => response.json())
            .then(data => {
                if (data.status === 'connected') {
                    debugLog('Device connected via polling:', data);
                    // Clear polling interval
                    if (deviceCheckInterval) {
                        clearInterval(deviceCheckInterval);
                        deviceCheckInterval = null;
                    }
                    
                    if (!deactivateQR()) {
                        debugLog('QR already processed, skipping...');
                        return;
                    }
                    
                    // Submit event using helper function
                    submitEvent({
                        session_id: sessionId,
                        name: $('#name').val(),
                        mobile_number: data.number,
                        device_connected: 1
                    }, 'polling')
                    .then(eventData => redirectToCampaign(eventData))
                    .catch(error => {
                        // Error already logged by submitEvent
                    });
                }
            })
            .catch(error => {
                console.error('Error checking device connection:', error);
            });
        };

        // Wait for QR code to be available with retry mechanism
        const fetchQRCode = (retryCount = 0) => {
            fetch(`${url}/get-qr/${sessionId}`, {
                headers: {
                    'Authorization': `Bearer ${authToken}`
                }
            })
                .then(response => response.json())
                .then(data => {
                    if (data.qr) {
                        // QR code is available
                        $('#qr-code').attr('src', data.qr);
                        setTimeout(() => {
                            $('#loader').addClass('hidden');
                            $('#qr-code-container').removeClass('hidden');
                            
                            // Start polling for device connection as fallback
                            // More aggressive on mobile
                            const isMobile = /iPhone|iPad|iPod|Android/i.test(navigator.userAgent);
                            const pollingInterval = isMobile ? 1000 : 2000;
                            debugLog('Starting polling, mobile:', isMobile, 'interval:', pollingInterval);
                            
                            if (deviceCheckInterval) {
                                clearInterval(deviceCheckInterval);
                            }
                            deviceCheckInterval = setInterval(checkDeviceConnection, pollingInterval);
                        }, 1000);
                    } else if (data.error && retryCount < 15) {
                        // QR code not ready yet, retry after 2 seconds
                        debugLog(`QR code not ready yet, retrying... (attempt ${retryCount + 1})`);
                        setTimeout(() => fetchQRCode(retryCount + 1), 2000);
                    } else {
                        // Max retries reached or other error
                        $('#loader').addClass('hidden');
                        alert(@json(__('events.failed_to_generate_qr')));
                    }
                })
                .catch(error => {
                    console.error('QR Code generation error:', error);
                    if (retryCount < 15) {
                        // Retry on network error
                        setTimeout(() => fetchQRCode(retryCount + 1), 2000);
                    } else {
                        $('#loader').addClass('hidden');
                        alert(@json(__('events.failed_to_generate_qr')));
                    }
                });
        };

        // Initialize session first, then start fetching QR code
        initializeSession().then(() => {
            // Wait a bit for session to initialize, then start fetching QR code
            setTimeout(() => fetchQRCode(), 3000);
        });
    };

    const submitEventData = () => {
        const eventName = $('#name').val().trim();
        const mobileNumber = $('#mobile_number').val().trim();

        fetch(`${appUrl}/admin/events`, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            },
            body: JSON.stringify({
                name: eventName,
                mobile_number: mobileNumber
            })
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                window.location.href = `${appUrl}/admin/campaigns/create/${data.data.id}`;
            } else {
                if (data.errors) {
                    displayValidationErrors(data.errors);  // Display validation errors if any
                } else {
                    alert(@json(__('events.error_label')) + error);
                }
            }
        })
        .catch(error => {
            console.error('Error:', error);
            alert('An unexpected error occurred while submitting the event.');
        });
    };

    // Function to display validation errors
    const displayValidationErrors = (errors) => {
        $('.invalid-feedback').remove();
        $('.is-invalid').removeClass('is-invalid');

        for (const field in errors) {
            const inputField = $(`#${field}`);
            if (inputField.length) {
                inputField.addClass('is-invalid');
                inputField.after(`<span class="invalid-feedback d-block">${errors[field][0]}</span>`);
            }
        }
    };
</script>
@endpush