<x-admin-layout>
    <x-slot name="header">
        <div class="flex items-center justify-between">
            <div>
                <h2 class="font-semibold text-lg text-gray-800 dark:text-gray-200 leading-tight">
                    <i class="fas fa-envelope mr-2"></i>@trans_db('title', 'settings', 'Settings') - SMTP
                </h2>
                <p class="mt-1 text-sm text-gray-600 dark:text-gray-400">
                    <a href="{{ route('dashboard') }}" class="text-blue-600 dark:text-blue-400 hover:underline">Dashboard</a>
                    <span class="mx-2">/</span>
                    <a href="{{ route('admin.dashboard') }}" class="text-blue-600 dark:text-blue-400 hover:underline">Admin</a>
                    <span class="mx-2">/</span>
                    <a href="{{ route('admin.settings.index') }}" class="text-blue-600 dark:text-blue-400 hover:underline">@trans_db('title', 'settings', 'Settings')</a>
                    <span class="mx-2">/</span>
                    <span>SMTP</span>
                </p>
            </div>
        </div>
    </x-slot>

    {{-- Alerte cu suport Dark Mode --}}
    @if (session('success'))
        <div class="bg-green-100 dark:bg-green-900/30 border-l-4 border-green-500 text-green-700 dark:text-green-300 p-4 mb-6 rounded" role="alert">
            <div class="flex items-center">
                <i class="fas fa-check-circle mr-3 text-green-500"></i>
                <div>
                    <p class="font-bold">Succes!</p>
                    <p>{{ session('success') }}</p>
                </div>
            </div>
        </div>
    @endif

    @if (session('error'))
        <div class="bg-red-100 dark:bg-red-900/30 border-l-4 border-red-500 text-red-700 dark:text-red-300 p-4 mb-6 rounded" role="alert">
            <div class="flex items-center">
                <i class="fas fa-exclamation-circle mr-3 text-red-500"></i>
                <div>
                    <p class="font-bold">Eroare!</p>
                    <p>{{ session('error') }}</p>
                </div>
            </div>
        </div>
    @endif

    @if ($errors->any())
        <div class="bg-red-100 dark:bg-red-900/30 border-l-4 border-red-500 text-red-700 dark:text-red-300 p-4 mb-6 rounded" role="alert">
            <div class="flex items-start">
                <i class="fas fa-exclamation-triangle mr-3 mt-1 text-red-500"></i>
                <div>
                    <p class="font-bold">Erori de validare!</p>
                    <ul class="list-disc list-inside mt-2">
                        @foreach ($errors->all() as $error)
                            <li>{{ $error }}</li>
                        @endforeach
                    </ul>
                </div>
            </div>
        </div>
    @endif

    <div class="py-12">
        <div class="px-6 lg:px-8">
            <div class="flex gap-6">
                {{-- Settings Sidebar Component --}}
                <x-settings-sidebar />

                {{-- Main Content Area --}}
                <div class="flex-1 space-y-6">
                    {{-- Card Status SMTP --}}
                    @php
                        $smtpEnabledValue = $settings->get('smtp')?->firstWhere('key', 'smtp_enabled')?->value ?? '0';
                        $smtpEnabled = $smtpEnabledValue === '1' || $smtpEnabledValue === 1 || $smtpEnabledValue === true;
                        $smtpHost = $settings->get('smtp')?->firstWhere('key', 'smtp_host')?->value;
                        $smtpPort = $settings->get('smtp')?->firstWhere('key', 'smtp_port')?->value ?? '587';
                    @endphp

                    <div class="bg-white dark:bg-gray-800 rounded-xl shadow-sm border border-gray-100 dark:border-gray-700 p-6">
                        <div class="flex items-center justify-between">
                            <div class="flex items-center space-x-4">
                                <div class="w-12 h-12 {{ $smtpEnabled ? 'bg-green-500' : 'bg-yellow-500' }} rounded-lg flex items-center justify-center">
                                    <i class="fas fa-envelope text-xl text-white"></i>
                                </div>
                                <div>
                                    <h3 class="text-lg font-semibold text-gray-900 dark:text-gray-100">Status SMTP</h3>
                                    @if($smtpEnabled && $smtpHost)
                                        <p class="text-sm text-green-600 dark:text-green-400">
                                            <i class="fas fa-check-circle mr-1"></i>Configurat: <span class="font-mono">{{ $smtpHost }}:{{ $smtpPort }}</span>
                                        </p>
                                    @elseif($smtpEnabled)
                                        <p class="text-sm text-yellow-600 dark:text-yellow-400">
                                            <i class="fas fa-exclamation-triangle mr-1"></i>Activat dar neconfigurat complet
                                        </p>
                                    @else
                                        <p class="text-sm text-gray-500 dark:text-gray-400">
                                            <i class="fas fa-times-circle mr-1"></i>SMTP dezactivat - email-urile nu vor fi trimise
                                        </p>
                                    @endif
                                </div>
                            </div>
                            <div class="flex items-center space-x-3">
                                {{-- Test Email Button --}}
                                <button type="button"
                                        id="test-email-btn"
                                        onclick="testSmtpEmail()"
                                        class="inline-flex items-center px-4 py-2 {{ $smtpEnabled ? 'bg-green-600 hover:bg-green-700' : 'bg-gray-400 cursor-not-allowed' }} text-white font-medium rounded-lg transition"
                                        {{ !$smtpEnabled ? 'disabled' : '' }}>
                                    <i class="fas fa-paper-plane mr-2" id="test-email-icon"></i>
                                    <span id="test-email-text">Test Email</span>
                                </button>
                            </div>
                        </div>

                        {{-- Test Result Area --}}
                        <div id="test-result" class="hidden mt-4 p-4 rounded-lg">
                            {{-- Rezultatul testului va fi inserat aici via JavaScript --}}
                        </div>
                    </div>

                    {{-- Formular Principal --}}
                    <div class="bg-white dark:bg-gray-800 overflow-hidden shadow-sm rounded-xl border border-gray-100 dark:border-gray-700">
                        <div class="p-6">
                            <div class="flex items-center justify-between mb-6">
                                <h3 class="text-lg font-semibold text-gray-900 dark:text-gray-100">
                                    <i class="fas fa-server text-green-600 mr-2"></i>Configurare SMTP
                                </h3>
                                {{-- Indicator modificări nesalvate --}}
                                <div id="unsaved-indicator" class="hidden items-center text-amber-600 dark:text-amber-400 text-sm">
                                    <i class="fas fa-exclamation-circle mr-1.5"></i>
                                    <span>Modificări nesalvate</span>
                                </div>
                            </div>

                            {{-- Presetări Provideri SMTP --}}
                            <div class="mb-6 p-4 bg-blue-50 dark:bg-blue-900/20 rounded-xl border border-blue-200 dark:border-blue-800">
                                <label class="block text-sm font-medium text-blue-800 dark:text-blue-300 mb-2">
                                    <i class="fas fa-magic mr-1"></i>Configurare rapidă - Selectează provider
                                </label>
                                <select id="smtp-preset"
                                        onchange="applySmtpPreset(this.value)"
                                        class="block w-full md:w-1/2 rounded-lg border-blue-300 dark:border-blue-700 bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 shadow-sm focus:border-blue-500 focus:ring-blue-500">
                                    <option value="">-- Selectează un provider --</option>
                                    <option value="gmail">📧 Gmail / Google Workspace</option>
                                    <option value="outlook">📨 Outlook / Office 365</option>
                                    <option value="sendgrid">📤 SendGrid</option>
                                    <option value="mailgun">📬 Mailgun</option>
                                    <option value="ses">☁️ Amazon SES</option>
                                    <option value="mailtrap">🧪 Mailtrap (Testing)</option>
                                    <option value="custom">⚙️ Configurare manuală</option>
                                </select>
                                <p class="mt-2 text-xs text-blue-600 dark:text-blue-400">
                                    <i class="fas fa-info-circle mr-1"></i>Selectează un provider pentru a completa automat setările de bază.
                                </p>
                            </div>

                            <form method="POST" action="{{ route('admin.settings.update') }}" id="smtp-form">
                                @csrf
                                @method('PUT')

                                <div class="space-y-6">
                                    {{-- Toggle SMTP Enabled --}}
                                    <div class="flex items-center p-4 bg-gray-50 dark:bg-gray-700/50 rounded-xl border border-gray-200 dark:border-gray-600">
                                        <label class="relative inline-flex items-center cursor-pointer">
                                            <input type="checkbox"
                                                   name="settings[smtp_enabled]"
                                                   id="smtp_enabled"
                                                   value="1"
                                                   {{ $smtpEnabled ? 'checked' : '' }}
                                                   class="sr-only peer">
                                            <div class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-green-300 dark:peer-focus:ring-green-800 rounded-full peer dark:bg-gray-600 peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:start-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-500 peer-checked:bg-green-600"></div>
                                        </label>
                                        <div class="ml-4">
                                            <span class="font-medium text-gray-900 dark:text-gray-100">Activează SMTP</span>
                                            <p class="text-xs text-gray-500 dark:text-gray-400 mt-0.5">Când este dezactivat, email-urile nu vor fi trimise.</p>
                                        </div>
                                    </div>

                                    {{-- Row 1: Host & Port --}}
                                    <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
                                        <div class="md:col-span-2">
                                            <label for="smtp_host" class="block text-sm font-medium text-gray-700 dark:text-gray-300">
                                                <i class="fas fa-server text-gray-400 mr-1"></i>SMTP Host
                                            </label>
                                            <input type="text"
                                                   name="settings[smtp_host]"
                                                   id="smtp_host"
                                                   value="{{ $settings->get('smtp')?->firstWhere('key', 'smtp_host')?->value }}"
                                                   placeholder="smtp.example.com"
                                                   class="mt-1 block w-full rounded-lg border-gray-300 shadow-sm focus:border-green-500 focus:ring-green-500 dark:bg-gray-700 dark:border-gray-600 dark:text-white">
                                        </div>
                                        <div>
                                            <label for="smtp_port" class="block text-sm font-medium text-gray-700 dark:text-gray-300">
                                                <i class="fas fa-plug text-gray-400 mr-1"></i>Port
                                            </label>
                                            <input type="number"
                                                   name="settings[smtp_port]"
                                                   id="smtp_port"
                                                   value="{{ $settings->get('smtp')?->firstWhere('key', 'smtp_port')?->value ?? '587' }}"
                                                   placeholder="587"
                                                   min="1"
                                                   max="65535"
                                                   class="mt-1 block w-full rounded-lg border-gray-300 shadow-sm focus:border-green-500 focus:ring-green-500 dark:bg-gray-700 dark:border-gray-600 dark:text-white">
                                        </div>
                                    </div>

                                    {{-- Row 2: Username & Password --}}
                                    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                                        <div>
                                            <label for="smtp_username" class="block text-sm font-medium text-gray-700 dark:text-gray-300">
                                                <i class="fas fa-user text-gray-400 mr-1"></i>Username
                                            </label>
                                            <input type="text"
                                                   name="settings[smtp_username]"
                                                   id="smtp_username"
                                                   value="{{ $settings->get('smtp')?->firstWhere('key', 'smtp_username')?->value }}"
                                                   placeholder="user@example.com"
                                                   class="mt-1 block w-full rounded-lg border-gray-300 shadow-sm focus:border-green-500 focus:ring-green-500 dark:bg-gray-700 dark:border-gray-600 dark:text-white">
                                        </div>
                                        <div>
                                            <label for="smtp_password" class="block text-sm font-medium text-gray-700 dark:text-gray-300">
                                                <i class="fas fa-key text-gray-400 mr-1"></i>Password
                                            </label>
                                            <div class="mt-1 relative">
                                                <input type="password"
                                                       name="settings[smtp_password]"
                                                       id="smtp_password"
                                                       value="{{ $settings->get('smtp')?->firstWhere('key', 'smtp_password')?->value }}"
                                                       placeholder="••••••••"
                                                       class="block w-full rounded-lg border-gray-300 shadow-sm focus:border-green-500 focus:ring-green-500 dark:bg-gray-700 dark:border-gray-600 dark:text-white pr-10">
                                                <button type="button"
                                                        onclick="togglePasswordVisibility()"
                                                        class="absolute inset-y-0 right-0 flex items-center pr-3 text-gray-400 hover:text-gray-600 dark:hover:text-gray-300">
                                                    <i class="fas fa-eye" id="password-toggle-icon"></i>
                                                </button>
                                            </div>
                                            <p class="mt-1 text-xs text-gray-500 dark:text-gray-400">
                                                Pentru Gmail, folosește un <a href="https://myaccount.google.com/apppasswords" target="_blank" class="text-blue-500 hover:underline">App Password</a>
                                            </p>
                                        </div>
                                    </div>

                                    {{-- Row 3: Encryption --}}
                                    <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
                                        <div>
                                            <label for="smtp_encryption" class="block text-sm font-medium text-gray-700 dark:text-gray-300">
                                                <i class="fas fa-lock text-gray-400 mr-1"></i>Encryption
                                            </label>
                                            <select name="settings[smtp_encryption]"
                                                    id="smtp_encryption"
                                                    class="mt-1 block w-full rounded-lg border-gray-300 shadow-sm focus:border-green-500 focus:ring-green-500 dark:bg-gray-700 dark:border-gray-600 dark:text-white">
                                                @php
                                                    $currentEncryption = $settings->get('smtp')?->firstWhere('key', 'smtp_encryption')?->value ?? 'tls';
                                                @endphp
                                                <option value="tls" {{ $currentEncryption === 'tls' ? 'selected' : '' }}>TLS (Recomandat)</option>
                                                <option value="ssl" {{ $currentEncryption === 'ssl' ? 'selected' : '' }}>SSL</option>
                                                <option value="" {{ $currentEncryption === '' ? 'selected' : '' }}>None (Nesigur)</option>
                                            </select>
                                        </div>
                                    </div>

                                    {{-- Separator --}}
                                    <div class="border-t border-gray-200 dark:border-gray-700 pt-6">
                                        <h4 class="text-base font-medium text-gray-900 dark:text-gray-100 mb-4">
                                            <i class="fas fa-id-card text-green-600 mr-2"></i>Identitate Expeditor
                                        </h4>
                                    </div>

                                    {{-- Row 4: From Address & From Name --}}
                                    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                                        <div>
                                            <label for="smtp_from_address" class="block text-sm font-medium text-gray-700 dark:text-gray-300">
                                                <i class="fas fa-at text-gray-400 mr-1"></i>From Address
                                            </label>
                                            <input type="email"
                                                   name="settings[smtp_from_address]"
                                                   id="smtp_from_address"
                                                   value="{{ $settings->get('smtp')?->firstWhere('key', 'smtp_from_address')?->value }}"
                                                   placeholder="noreply@example.com"
                                                   class="mt-1 block w-full rounded-lg border-gray-300 shadow-sm focus:border-green-500 focus:ring-green-500 dark:bg-gray-700 dark:border-gray-600 dark:text-white">
                                            <p class="mt-1 text-xs text-gray-500 dark:text-gray-400">
                                                Adresa de pe care se vor trimite email-urile
                                            </p>
                                        </div>
                                        <div>
                                            <label for="smtp_from_name" class="block text-sm font-medium text-gray-700 dark:text-gray-300">
                                                <i class="fas fa-signature text-gray-400 mr-1"></i>From Name
                                            </label>
                                            <input type="text"
                                                   name="settings[smtp_from_name]"
                                                   id="smtp_from_name"
                                                   value="{{ $settings->get('smtp')?->firstWhere('key', 'smtp_from_name')?->value }}"
                                                   placeholder="DNS Panel"
                                                   class="mt-1 block w-full rounded-lg border-gray-300 shadow-sm focus:border-green-500 focus:ring-green-500 dark:bg-gray-700 dark:border-gray-600 dark:text-white">
                                            <p class="mt-1 text-xs text-gray-500 dark:text-gray-400">
                                                Numele afișat în inbox-ul destinatarului
                                            </p>
                                        </div>
                                    </div>
                                </div>

                                <div class="mt-8 flex items-center justify-end border-t border-gray-200 dark:border-gray-700 pt-6">
                                    <button type="submit"
                                            class="inline-flex items-center bg-blue-600 hover:bg-blue-700 text-white font-bold py-2.5 px-6 rounded-lg transition shadow-sm">
                                        <i class="fas fa-save mr-2"></i>Salvează Setările
                                    </button>
                                </div>
                            </form>
                        </div>
                    </div>

                    {{-- Info Box - Ghid Configurare --}}
                    <div class="bg-gradient-to-r from-blue-50 to-indigo-50 dark:from-blue-900/20 dark:to-indigo-900/20 rounded-xl border border-blue-200 dark:border-blue-800 p-6">
                        <h4 class="text-base font-semibold text-blue-800 dark:text-blue-300 mb-4">
                            <i class="fas fa-book-open mr-2"></i>Ghid Configurare SMTP
                        </h4>

                        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
                            {{-- Gmail --}}
                            <div class="bg-white dark:bg-gray-800 rounded-lg p-4 border border-blue-100 dark:border-blue-900">
                                <div class="flex items-center mb-2">
                                    <img src="https://www.google.com/favicon.ico" alt="Gmail" class="w-5 h-5 mr-2">
                                    <span class="font-medium text-gray-900 dark:text-gray-100">Gmail</span>
                                </div>
                                <ul class="text-xs text-gray-600 dark:text-gray-400 space-y-1">
                                    <li><i class="fas fa-server text-gray-400 mr-1"></i>smtp.gmail.com:587</li>
                                    <li><i class="fas fa-lock text-gray-400 mr-1"></i>TLS encryption</li>
                                    <li><i class="fas fa-key text-gray-400 mr-1"></i><a href="https://myaccount.google.com/apppasswords" target="_blank" class="text-blue-500 hover:underline">Necesită App Password</a></li>
                                </ul>
                            </div>

                            {{-- Office 365 --}}
                            <div class="bg-white dark:bg-gray-800 rounded-lg p-4 border border-blue-100 dark:border-blue-900">
                                <div class="flex items-center mb-2">
                                    <img src="https://www.microsoft.com/favicon.ico" alt="Office" class="w-5 h-5 mr-2">
                                    <span class="font-medium text-gray-900 dark:text-gray-100">Office 365</span>
                                </div>
                                <ul class="text-xs text-gray-600 dark:text-gray-400 space-y-1">
                                    <li><i class="fas fa-server text-gray-400 mr-1"></i>smtp.office365.com:587</li>
                                    <li><i class="fas fa-lock text-gray-400 mr-1"></i>TLS encryption</li>
                                    <li><i class="fas fa-user text-gray-400 mr-1"></i>Email complet ca username</li>
                                </ul>
                            </div>

                            {{-- SendGrid --}}
                            <div class="bg-white dark:bg-gray-800 rounded-lg p-4 border border-blue-100 dark:border-blue-900">
                                <div class="flex items-center mb-2">
                                    <i class="fas fa-paper-plane text-blue-500 mr-2"></i>
                                    <span class="font-medium text-gray-900 dark:text-gray-100">SendGrid</span>
                                </div>
                                <ul class="text-xs text-gray-600 dark:text-gray-400 space-y-1">
                                    <li><i class="fas fa-server text-gray-400 mr-1"></i>smtp.sendgrid.net:587</li>
                                    <li><i class="fas fa-user text-gray-400 mr-1"></i>Username: apikey</li>
                                    <li><i class="fas fa-key text-gray-400 mr-1"></i>Password: API Key</li>
                                </ul>
                            </div>
                        </div>

                        <div class="mt-4 p-3 bg-yellow-50 dark:bg-yellow-900/20 rounded-lg border border-yellow-200 dark:border-yellow-800">
                            <p class="text-xs text-yellow-800 dark:text-yellow-300">
                                <i class="fas fa-lightbulb mr-1"></i>
                                <strong>Sfat:</strong> Pentru Gmail și Office 365, activează "Less secure apps" sau folosește App Passwords pentru autentificare sigură.
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    {{-- JavaScript --}}
    <script>
        // Presetări SMTP pentru provideri comuni
        const smtpPresets = {
            gmail: { host: 'smtp.gmail.com', port: '587', encryption: 'tls' },
            outlook: { host: 'smtp.office365.com', port: '587', encryption: 'tls' },
            sendgrid: { host: 'smtp.sendgrid.net', port: '587', encryption: 'tls' },
            mailgun: { host: 'smtp.mailgun.org', port: '587', encryption: 'tls' },
            ses: { host: 'email-smtp.us-east-1.amazonaws.com', port: '587', encryption: 'tls' },
            mailtrap: { host: 'sandbox.smtp.mailtrap.io', port: '587', encryption: 'tls' },
        };

        function applySmtpPreset(preset) {
            if (preset && smtpPresets[preset]) {
                const config = smtpPresets[preset];
                document.getElementById('smtp_host').value = config.host;
                document.getElementById('smtp_port').value = config.port;
                document.getElementById('smtp_encryption').value = config.encryption;

                // Arată indicator nesalvat
                showUnsavedIndicator();

                // Notificare
                showNotification('Presetare aplicată! Completează username și password.', 'info');
            }
        }

        function togglePasswordVisibility() {
            const passwordInput = document.getElementById('smtp_password');
            const toggleIcon = document.getElementById('password-toggle-icon');

            if (passwordInput.type === 'password') {
                passwordInput.type = 'text';
                toggleIcon.classList.remove('fa-eye');
                toggleIcon.classList.add('fa-eye-slash');
            } else {
                passwordInput.type = 'password';
                toggleIcon.classList.remove('fa-eye-slash');
                toggleIcon.classList.add('fa-eye');
            }
        }

        function testSmtpEmail() {
            const btn = document.getElementById('test-email-btn');
            const icon = document.getElementById('test-email-icon');
            const text = document.getElementById('test-email-text');
            const resultDiv = document.getElementById('test-result');

            // Disable button și arată loading
            btn.disabled = true;
            icon.classList.remove('fa-paper-plane');
            icon.classList.add('fa-spinner', 'fa-spin');
            text.textContent = 'Se trimite...';

            // Trimite request AJAX
            fetch('{{ route("admin.settings.test-email") }}', {
                method: 'GET',
                headers: {
                    'X-Requested-With': 'XMLHttpRequest',
                    'Accept': 'application/json',
                }
            })
            .then(response => response.json())
            .then(data => {
                resultDiv.classList.remove('hidden');

                if (data.success) {
                    resultDiv.className = 'mt-4 p-4 rounded-lg bg-green-100 dark:bg-green-900/30 border border-green-200 dark:border-green-800';
                    resultDiv.innerHTML = `
                        <div class="flex items-center text-green-700 dark:text-green-300">
                            <i class="fas fa-check-circle mr-2 text-xl"></i>
                            <div>
                                <p class="font-medium">Email de test trimis cu succes!</p>
                                <p class="text-sm mt-1">Verifică inbox-ul pentru adresa configurată.</p>
                            </div>
                        </div>
                    `;
                } else {
                    resultDiv.className = 'mt-4 p-4 rounded-lg bg-red-100 dark:bg-red-900/30 border border-red-200 dark:border-red-800';
                    resultDiv.innerHTML = `
                        <div class="flex items-start text-red-700 dark:text-red-300">
                            <i class="fas fa-times-circle mr-2 text-xl mt-0.5"></i>
                            <div>
                                <p class="font-medium">Eroare la trimiterea email-ului</p>
                                <p class="text-sm mt-1">${data.message || 'Verifică configurația SMTP.'}</p>
                            </div>
                        </div>
                    `;
                }
            })
            .catch(error => {
                resultDiv.classList.remove('hidden');
                resultDiv.className = 'mt-4 p-4 rounded-lg bg-red-100 dark:bg-red-900/30 border border-red-200 dark:border-red-800';
                resultDiv.innerHTML = `
                    <div class="flex items-start text-red-700 dark:text-red-300">
                        <i class="fas fa-exclamation-triangle mr-2 text-xl mt-0.5"></i>
                        <div>
                            <p class="font-medium">Eroare de conexiune</p>
                            <p class="text-sm mt-1">${error.message}</p>
                        </div>
                    </div>
                `;
            })
            .finally(() => {
                // Restore button
                btn.disabled = false;
                icon.classList.remove('fa-spinner', 'fa-spin');
                icon.classList.add('fa-paper-plane');
                text.textContent = 'Test Email';
            });
        }

        function showNotification(message, type = 'info') {
            // Creează notificare temporară
            const notification = document.createElement('div');
            notification.className = `fixed top-4 right-4 z-50 p-4 rounded-lg shadow-lg transition-all transform translate-x-full ${
                type === 'info' ? 'bg-blue-500 text-white' :
                type === 'success' ? 'bg-green-500 text-white' :
                'bg-red-500 text-white'
            }`;
            notification.innerHTML = `<i class="fas fa-info-circle mr-2"></i>${message}`;
            document.body.appendChild(notification);

            // Animație intrare
            setTimeout(() => notification.classList.remove('translate-x-full'), 100);

            // Șterge după 3 secunde
            setTimeout(() => {
                notification.classList.add('translate-x-full');
                setTimeout(() => notification.remove(), 300);
            }, 3000);
        }

        function showUnsavedIndicator() {
            const indicator = document.getElementById('unsaved-indicator');
            indicator.classList.remove('hidden');
            indicator.classList.add('flex');
        }

        // Track form changes
        document.addEventListener('DOMContentLoaded', function() {
            const form = document.getElementById('smtp-form');
            const indicator = document.getElementById('unsaved-indicator');
            let initialValues = {};

            // Salvăm valorile inițiale
            const inputs = form.querySelectorAll('input, select');
            inputs.forEach(input => {
                if (input.type === 'checkbox') {
                    initialValues[input.name] = input.checked;
                } else {
                    initialValues[input.name] = input.value;
                }
            });

            // Verificăm modificări
            form.addEventListener('change', function() {
                let hasChanges = false;
                inputs.forEach(input => {
                    const currentValue = input.type === 'checkbox' ? input.checked : input.value;
                    if (initialValues[input.name] !== currentValue) {
                        hasChanges = true;
                    }
                });

                if (hasChanges) {
                    indicator.classList.remove('hidden');
                    indicator.classList.add('flex');
                } else {
                    indicator.classList.add('hidden');
                    indicator.classList.remove('flex');
                }
            });

            // Avertisment la părăsirea paginii
            window.addEventListener('beforeunload', function(e) {
                if (!indicator.classList.contains('hidden')) {
                    e.preventDefault();
                    e.returnValue = '';
                }
            });

            form.addEventListener('submit', function() {
                indicator.classList.add('hidden');
            });
        });
    </script>
</x-admin-layout>
