@extends('layouts.main')

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

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

@php
    $breadcrumbs = [
        ['url' => route('events.index'), 'label' => __('events.title')],
        ['url' => '', 'label' => __('events.add_device_title')],
    ];
@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-8">
        <!-- Header Section -->
        <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
            <div>
                <h1 class="text-2xl font-semibold text-gray-700">{{ __('events.add_device_title') }}</h1>
                <p class="text-gray-600 mt-1">{{ __('events.connect_whatsapp_description') }}</p>
            </div>
            <div class="flex items-center space-x-3">
                <div class="min-w-10 h-10 bg-primary/10 rounded-lg flex items-center justify-center">
                    <i class="fas fa-mobile-alt text-primary"></i>
                </div>
                <div>
                    <h3 class="text-sm font-medium text-gray-700">{{ __('events.device_connection') }}</h3>
                    <p class="text-xs text-gray-500">{{ __('events.qr_code_authentication') }}</p>
                </div>
            </div>
        </div>

        <!-- Alert Messages -->
        @if (Session::has('message'))
            <div class="alert alert-danger" 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

        <!-- Device Setup Form Card -->
        <div class="bg-white rounded-lg border border-gray-200 shadow-sm max-w-xl">
            <div class="md:p-6 p-4">
                <form method="post" id="event-device-form">
                    @csrf
                    <input type="hidden" name="event_id" id="event_id" value="{{ $event->id }}">
                    <input type="hidden" name="session_id" id="session_id" value="{{ $event->session_id }}">
                    
                    <!-- Compact Form Fields -->
                    <div class="grid grid-cols-1 gap-4">
                        <!-- Event Name Field -->
                        <div class="space-y-2">
                            <label class="text-sm font-medium text-gray-700 flex items-center">
                                <i class="fas fa-calendar-alt mr-2 text-primary"></i>
                                {{ __('events.event_name') }}
                            </label>
                            <input type="text" id="name" class="form-control @error('name') is-invalid @enderror" 
                                   oninput="validateFormInputs()" onkeypress="handleEnterKey(event)" name="name" value="{{ $event->name }}" 
                                   placeholder="{{ __('events.event_name_placeholder') }}" disabled />
                            @error('name')
                                <span class="invalid-feedback">{{ $message }}</span>
                            @enderror
                        </div>

                        <!-- Mobile Number Field -->
                        <div class="space-y-2">
                            <label class="text-sm font-medium text-gray-700 flex items-center">
                                <i class="fas fa-phone mr-2 text-primary"></i>
                                {{ __('events.invitation_from') }}
                            </label>
                            <input type="number" id="mobile_number" oninput="validateFormInputs()" onkeypress="handleEnterKey(event)"
                                   class="form-control @error('mobile_number') is-invalid @enderror" 
                                   name="mobile_number" value="{{ $event->mobile_number }}" 
                                   placeholder="{{ __('events.enter_whatsapp_number_placeholder') }}" />
                            @error('mobile_number')
                                <span class="invalid-feedback">{{ $message }}</span>
                            @enderror
                        </div>
                    </div>

                    <!-- Generate QR Button -->
                    <div class="mt-6 flex justify-end">
                        <button type="button" onclick="generateQRCode()" id="generateQRButton" 
                                disabled class="btn btn-primary flex items-center px-6 py-3">
                            <i class="fas fa-qrcode mr-2"></i>
                            {{ __('events.generate_qr_code_button') }}
                        </button>
                    </div>

                    <!-- QR Code Section -->
                    <div class="qr-div justify-center mt-6 hidden">
                        <div class="bg-gray-50 rounded-lg p-6 text-center">
                            <div id="loader" class="flex justify-center">
                                <div class="animate-spin rounded-full h-12 w-12 border-b-2 border-primary"></div>
                            </div>
                            <div id="qr-code-container" class="hidden">
                                <div class="bg-white rounded-lg p-4 inline-block shadow-sm">
                                    <img src="" alt="QR code" id="qr-code" class="mx-auto">
                                </div>
                                <div class="mt-4">
                                    <p class="text-gray-600 flex items-center justify-center text-sm">
                                        <i class="fas fa-mobile-alt mr-2"></i>
                                        {{ __('events.scan_qr_code_whatsapp') }}
                                    </p>
                                    <p class="text-xs text-gray-500 mt-1">
                                        {{ __('events.open_whatsapp_instructions') }}
                                    </p>
                                </div>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
        </div>

        <!-- Modern Instructions Section -->
        <div class="relative overflow-hidden">
            <!-- Background Pattern -->
            <div class="absolute inset-0 bg-gradient-to-br from-primary/5 via-transparent to-secondary/5"></div>
            <div class="absolute top-0 right-0 w-32 h-32 bg-primary/10 rounded-full -translate-y-16 translate-x-16"></div>
            <div class="absolute bottom-0 left-0 w-24 h-24 bg-secondary/10 rounded-full translate-y-12 -translate-x-12"></div>
            
            <div class="relative bg-white rounded-2xl border border-gray-200 shadow-lg">
                <div class="md:p-8 p-4">
                    <!-- Header with Icon -->
                    <div class="text-center mb-8">
                        <div class="inline-flex items-center justify-center w-16 h-16 bg-gradient-to-br from-primary to-primary/80 rounded-2xl mb-4 shadow-lg">
                            <i class="fas fa-mobile-alt text-white text-2xl"></i>
                        </div>
                        <h3 class="text-2xl font-semibold text-gray-700 mb-2">{{ __('events.device_connection_guide') }}</h3>
                        <p class="text-gray-600">{{ __('events.follow_steps_description') }}</p>
                    </div>

                    <!-- Modern Step Cards -->
                    <div class="md:space-y-6 space-y-4">
                        <!-- Step 1 -->
                        <div class="flex items-start space-x-4 md:p-6 p-4 bg-gradient-to-r from-primary/5 to-primary/10 rounded-xl border border-primary/20 transition-all duration-300">
                            <div class="flex-shrink-0">
                                <div class="min-w-10 h-10 bg-primary rounded-xl flex items-center justify-center shadow-lg">
                                    <span class="text-white font-semibold text-lg">1</span>
                                </div>
                            </div>
                            <div class="flex-1">
                                <div class="flex items-center mb-2">
                                    <i class="fas fa-qrcode text-primary mr-2"></i>
                                    <h4 class="text-base font-semibold text-gray-700">{{ __('events.step_1_generate_qr') }}</h4>
                                </div>
                                <p class="text-gray-600 mb-3 text-sm">{{ __('events.step_1_description') }}</p>
                                <div class="flex items-center text-sm text-primary">
                                    <i class="fas fa-arrow-up mr-2"></i>
                                    <span>{{ __('events.use_button_above') }}</span>
                                </div>
                            </div>
                        </div>

                        <!-- Step 2 -->
                        <div class="flex items-start space-x-4 md:p-6 p-4 bg-gradient-to-r from-secondary/5 to-secondary/10 rounded-xl border border-secondary/20 transition-all duration-300">
                            <div class="flex-shrink-0">
                                <div class="min-w-10 h-10 bg-secondary rounded-xl flex items-center justify-center shadow-lg">
                                    <span class="text-white font-semibold text-lg">2</span>
                                </div>
                            </div>
                            <div class="flex-1">
                                <div class="flex items-center mb-2">
                                    <i class="fab fa-whatsapp text-green-500 mr-2"></i>
                                    <h4 class="text-base font-semibold text-gray-700">{{ __('events.step_2_open_whatsapp') }}</h4>
                                </div>
                                <p class="text-gray-600 mb-3 text-sm">{{ __('events.step_2_description') }}</p>
                                <div class="bg-white rounded-lg p-3 text-sm text-gray-700 border">
                                    <div class="flex items-center text-sm">
                                        <i class="fas fa-mobile-alt mr-2"></i>
                                        <span>{{ __('events.whatsapp_menu_path') }}</span>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Step 3 -->
                        <div class="flex items-start space-x-4 md:p-6 p-4 bg-gradient-to-r from-green-50 to-green-100 rounded-xl border border-green-200 transition-all duration-300">
                            <div class="flex-shrink-0">
                                <div class="min-w-10 h-10 bg-green-500 rounded-xl flex items-center justify-center shadow-lg">
                                    <span class="text-white font-semibold text-lg">3</span>
                                </div>
                            </div>
                            <div class="flex-1">
                                <div class="flex items-center mb-2">
                                    <i class="fas fa-camera text-green-600 mr-2"></i>
                                    <h4 class="text-base font-semibold text-gray-700">{{ __('events.step_3_scan_qr') }}</h4>
                                </div>
                                <p class="text-gray-600 mb-3 text-sm">{{ __('events.step_3_description') }}</p>
                                <div class="flex items-center text-sm text-green-600">
                                    <i class="fas fa-check-circle mr-2"></i>
                                    <span>{{ __('events.device_auto_connected') }}</span>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Success Message -->
                    <div class="md:mt-8 mt-4 p-4 bg-green-50 border border-green-200 rounded-xl">
                        <div class="flex items-start">
                            <i class="fas fa-rocket text-green-600 mr-3 mt-1.5"></i>
                            <div>
                                <h4 class="font-semibold text-green-800 text-base">{{ __('events.ready_to_start') }}</h4>
                                <p class="text-sm text-green-700">{{ __('events.ready_to_start_description') }}</p>
                            </div>
                        </div>
                    </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 eventId = $('#event_id').val().trim();
    const sessionId = $('#session_id').val().trim();
    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
     * Supports both CREATE and UPDATE operations
     */
    async function submitEvent(eventData, context = '', isUpdate = true) {
        const csrfToken = $('meta[name="csrf-token"]').attr('content');
        const endpoint = isUpdate ? `${appUrl}/admin/events/${eventId}` : `${appUrl}/admin/events`;
        const method = isUpdate ? 'PUT' : 'POST';
        
        debugLog(`${isUpdate ? 'Updating' : 'Creating'} event (${context})...`, eventData);
        
        try {
            const response = await fetch(endpoint, {
                method: method,
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': csrfToken,
                    'Accept': 'application/json'
                },
                body: JSON.stringify(eventData),
                credentials: 'same-origin'
            });

            debugLog(`Event ${isUpdate ? 'update' : 'create'} 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_update_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);
        }
    });

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

        if (eventName && isNumberValid) {
            $('#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) {
                generateQRCode();
            }
        }
    };

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

    // iOS-Specific Event Handlers
    const checkConnectionStatus = () => {
        if (!isQRActive) return;
        
        console.log('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;
                }
                
                // Update event using helper function
                submitEvent({
                    session_id: sessionId,
                    name: $('#name').val(),
                    mobile_number: data.number,
                    device_connected: 1
                }, 'iOS detection', true)
                .then(eventData => redirectToCampaign(eventData))
                .catch(error => {
                    // Error already logged by submitEvent
                });
            }
        })
        .catch(error => {
            console.error('Error checking connection:', error);
        });
    };

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

    window.addEventListener('focus', function() {
        if (isQRActive) {
            console.log('focus: Window gained focus');
            setTimeout(checkConnectionStatus, 300);
        }
    });

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

    document.addEventListener('resume', function() {
        if (isQRActive) {
            console.log('resume: App resumed');
            setTimeout(checkConnectionStatus, 300);
        }
    });
    
    try {
        socket = io(url, { 
            query: { 
                sessionId: sessionId,
                token: authToken 
            },
            timeout: 10000,
            forceNew: true
        });
        
        socket.on('connect', () => {
            console.log('Socket.IO connected successfully');
        });
        
        socket.on('connect_error', (error) => {
            console.error('Socket.IO connection error:', error);
            // Continue without Socket.IO - polling will be the fallback
        });
        
        socket.on('device-connected', (data) => {
            console.log('Device connected via socket:', data);
            // Clear polling interval if active
            if (deviceCheckInterval) {
                clearInterval(deviceCheckInterval);
                deviceCheckInterval = null;
            }
            if (!deactivateQR()) {
                debugLog('QR already processed, skipping...');
                return;
            }
            
            // Update event using helper function
            submitEvent({
                session_id: data.sessionId,
                name: $('#name').val(),
                mobile_number: data.authenticatedNumber,
                device_connected: 1
            }, 'socket', true)
            .then(eventData => {
                if (eventData.errors) {
                    displayValidationErrors(eventData.errors);
                } else {
                    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);
            });
        });
    } catch (error) {
        console.error('Failed to initialize Socket.IO:', error);
        // Continue without Socket.IO - polling will be the fallback
    }

    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
    };

    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') {
                    console.log('Device connected via polling:', data);
                    // Clear polling interval
                    if (deviceCheckInterval) {
                        clearInterval(deviceCheckInterval);
                        deviceCheckInterval = null;
                    }
                    if (!deactivateQR()) {
                        debugLog('QR already processed, skipping...');
                        return;
                    }
                    
                    // Update event using helper function
                    submitEvent({
                        session_id: sessionId,
                        name: $('#name').val(),
                        mobile_number: data.number,
                        device_connected: 1
                    }, 'polling', true)
                    .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
                            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 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>`);
            }
        }
    };

    validateFormInputs();
</script>
@endpush