@extends('layouts.admin')

@section('title', 'Email Settings')

@section('page-title', 'Email Settings')

@section('breadcrumbs')
    <a href="{{ route('admin.settings.index') }}" class="hover:text-primary">Settings</a>
    <span class="material-symbols-outlined text-xs">chevron_right</span>
    <span class="text-primary font-medium">Email Settings</span>
@endsection

@section('content')
<div class="max-w-7xl mx-auto">
    <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-6">
        <div class="mb-6">
            <h2 class="text-xl font-bold text-gray-900">Email Settings</h2>
            <p class="text-sm text-gray-500 mt-1">Configure email server settings for sending notifications</p>
        </div>

        @if (session('success'))
            <div class="mb-6 p-4 bg-green-50 border border-green-200 rounded-lg flex items-center gap-2">
                <span class="material-symbols-outlined text-green-600">check_circle</span>
                <span class="text-sm text-green-800">{{ session('success') }}</span>
            </div>
        @endif

        @if (session('error'))
            <div class="mb-6 p-4 bg-red-50 border border-red-200 rounded-lg flex items-center gap-2">
                <span class="material-symbols-outlined text-red-600">error</span>
                <span class="text-sm text-red-800">{{ session('error') }}</span>
            </div>
        @endif

        @if ($errors->any())
            <div class="mb-6 p-4 bg-red-50 border border-red-200 rounded-lg">
                <div class="flex items-start">
                    <span class="material-symbols-outlined text-red-600 mr-2">error</span>
                    <div class="flex-1">
                        <h3 class="text-sm font-medium text-red-800 mb-2">Please correct the following errors:</h3>
                        <ul class="list-disc list-inside text-sm text-red-700 space-y-1">
                            @foreach ($errors->all() as $error)
                                <li>{{ $error }}</li>
                            @endforeach
                        </ul>
                    </div>
                </div>
            </div>
        @endif

        <form method="POST" action="{{ route('admin.settings.email.update') }}" class="space-y-6" id="email-settings-form">
            @csrf
            
            <!-- Mail Driver Selection -->
            <div>
                <label for="mailer" class="block text-sm font-medium text-gray-700 mb-2">
                    Mail Driver <span class="text-red-500">*</span>
                </label>
                <select name="mailer" id="mailer" required class="w-full rounded-lg border border-gray-300 bg-white text-gray-900 px-4 py-2.5 shadow-sm focus:border-primary focus:ring-2 focus:ring-primary/20 transition-colors sm:text-sm" onchange="toggleMailerFields()">
                    <option value="smtp" {{ ($currentMailer ?? 'smtp') === 'smtp' ? 'selected' : '' }}>SMTP</option>
                    <option value="sendgrid" {{ ($currentMailer ?? '') === 'sendgrid' ? 'selected' : '' }}>SendGrid</option>
                    <option value="mailgun" {{ ($currentMailer ?? '') === 'mailgun' ? 'selected' : '' }}>Mailgun</option>
                    <option value="ses" {{ ($currentMailer ?? '') === 'ses' ? 'selected' : '' }}>SES (Amazon)</option>
                </select>
                <p class="mt-1 text-xs text-gray-500">Select the mail driver you want to use</p>
            </div>

            <!-- SMTP Configuration -->
            <div id="smtp-config" class="mailer-config">
                <h3 class="text-lg font-semibold text-gray-900 mb-4">SMTP Configuration</h3>
                <div class="mb-4 p-4 bg-blue-50 border border-blue-200 rounded-lg">
                    <div class="flex items-start gap-3">
                        <span class="material-symbols-outlined text-blue-600 text-lg">info</span>
                        <div class="flex-1">
                            <h4 class="text-sm font-semibold text-blue-900 mb-2">How to Configure SMTP</h4>
                            <ol class="text-xs text-blue-800 space-y-1.5 list-decimal list-inside">
                                <li>Get SMTP credentials from your email provider (Gmail, Outlook, custom SMTP server, etc.)</li>
                                <li><strong>Mail Host:</strong> SMTP server address (e.g., smtp.gmail.com, smtp.mailtrap.io)</li>
                                <li><strong>Mail Port:</strong> Usually 587 (TLS) or 465 (SSL) for secure connections, 25 for unencrypted</li>
                                <li><strong>Mail Username:</strong> Your email address or SMTP username</li>
                                <li><strong>Mail Password:</strong> Your email password or app-specific password</li>
                                <li><strong>Mail Encryption:</strong> Choose TLS (recommended) or SSL based on your provider</li>
                            </ol>
                            <div class="mt-2 p-2 bg-blue-100 rounded text-xs text-blue-900">
                                <strong>Common SMTP Settings:</strong>
                                <ul class="mt-1 space-y-1 list-disc list-inside">
                                    <li><strong>Gmail:</strong> smtp.gmail.com, Port 587, TLS</li>
                                    <li><strong>Outlook:</strong> smtp-mail.outlook.com, Port 587, TLS</li>
                                    <li><strong>Mailtrap (Testing):</strong> smtp.mailtrap.io, Port 2525, TLS</li>
                                    <li><strong>SendGrid:</strong> smtp.sendgrid.net, Port 587, TLS</li>
                                </ul>
                            </div>
                            <p class="mt-2 text-xs text-blue-700">
                                <strong>Note:</strong> For Gmail, you may need to enable "Less secure app access" or use an App Password. For production, use a dedicated SMTP service.
                            </p>
                        </div>
                    </div>
                </div>
                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                    <div>
                        <label for="smtp_host" class="block text-sm font-medium text-gray-700 mb-2">
                            Mail Host <span class="text-red-500">*</span>
                        </label>
                        <input type="text" name="smtp_host" id="smtp_host" value="{{ old('smtp_host', $emailConfig->host ?? env('MAIL_HOST', '')) }}" required class="w-full rounded-lg border border-gray-300 bg-white text-gray-900 px-4 py-2.5 shadow-sm placeholder:text-gray-400 focus:border-primary focus:ring-2 focus:ring-primary/20 transition-colors sm:text-sm" placeholder="smtp.mailtrap.io">
                    </div>
                    <div>
                        <label for="smtp_port" class="block text-sm font-medium text-gray-700 mb-2">
                            Mail Port <span class="text-red-500">*</span>
                        </label>
                        <input type="number" name="smtp_port" id="smtp_port" value="{{ old('smtp_port', $emailConfig->port ?? env('MAIL_PORT', '2525')) }}" required min="1" max="65535" class="w-full rounded-lg border border-gray-300 bg-white text-gray-900 px-4 py-2.5 shadow-sm placeholder:text-gray-400 focus:border-primary focus:ring-2 focus:ring-primary/20 transition-colors sm:text-sm" placeholder="2525">
                    </div>
                    <div>
                        <label for="smtp_username" class="block text-sm font-medium text-gray-700 mb-2">Mail Username</label>
                        <input type="text" name="smtp_username" id="smtp_username" value="{{ old('smtp_username', $emailConfig->username ?? env('MAIL_USERNAME', '')) }}" class="w-full rounded-lg border border-gray-300 bg-white text-gray-900 px-4 py-2.5 shadow-sm placeholder:text-gray-400 focus:border-primary focus:ring-2 focus:ring-primary/20 transition-colors sm:text-sm" placeholder="username">
                    </div>
                    <div>
                        <label for="smtp_password" class="block text-sm font-medium text-gray-700 mb-2">Mail Password</label>
                        <input type="password" name="smtp_password" id="smtp_password" value="{{ old('smtp_password') }}" class="w-full rounded-lg border border-gray-300 bg-white text-gray-900 px-4 py-2.5 shadow-sm placeholder:text-gray-400 focus:border-primary focus:ring-2 focus:ring-primary/20 transition-colors sm:text-sm" placeholder="Leave blank to keep current password">
                    </div>
                    <div>
                        <label for="smtp_encryption" class="block text-sm font-medium text-gray-700 mb-2">Mail Encryption</label>
                        <select name="smtp_encryption" id="smtp_encryption" class="w-full rounded-lg border border-gray-300 bg-white text-gray-900 px-4 py-2.5 shadow-sm focus:border-primary focus:ring-2 focus:ring-primary/20 transition-colors sm:text-sm">
                            <option value="tls" {{ old('smtp_encryption', $emailConfig->encryption ?? env('MAIL_ENCRYPTION', 'tls')) === 'tls' ? 'selected' : '' }}>TLS</option>
                            <option value="ssl" {{ old('smtp_encryption', $emailConfig->encryption ?? env('MAIL_ENCRYPTION', '')) === 'ssl' ? 'selected' : '' }}>SSL</option>
                        </select>
                    </div>
                </div>
            </div>

            <!-- Mailgun Configuration -->
            <div id="mailgun-config" class="mailer-config hidden">
                <h3 class="text-lg font-semibold text-gray-900 mb-4">Mailgun Configuration</h3>
                <div class="mb-4 p-4 bg-blue-50 border border-blue-200 rounded-lg">
                    <div class="flex items-start gap-3">
                        <span class="material-symbols-outlined text-blue-600 text-lg">info</span>
                        <div class="flex-1">
                            <h4 class="text-sm font-semibold text-blue-900 mb-2">How to Get Your Mailgun Credentials</h4>
                            <ol class="text-xs text-blue-800 space-y-1.5 list-decimal list-inside">
                                <li>Sign up at <a href="https://www.mailgun.com/" target="_blank" class="underline font-medium">Mailgun</a> (free tier available)</li>
                                <li>Go to <strong>Dashboard</strong> → <strong>Sending</strong> → <strong>Domain Settings</strong></li>
                                <li><strong>Mailgun Domain:</strong> Your verified sending domain (e.g., mg.example.com)</li>
                                <li><strong>Mailgun Secret:</strong> Go to <strong>Settings</strong> → <strong>API Keys</strong> → Copy your Private API Key</li>
                                <li><strong>Mailgun Endpoint:</strong> Usually "api.mailgun.net" (US) or "api.eu.mailgun.net" (EU)</li>
                                <li>Verify your domain by adding DNS records (SPF, DKIM, MX)</li>
                            </ol>
                            <p class="mt-2 text-xs text-blue-700">
                                <strong>Note:</strong> Free tier includes 5,000 emails/month for 3 months. Domain verification is required for production use.
                            </p>
                        </div>
                    </div>
                </div>
                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                    <div>
                        <label for="mailgun_domain" class="block text-sm font-medium text-gray-700 mb-2">
                            Mailgun Domain <span class="text-red-500">*</span>
                        </label>
                        <input type="text" name="mailgun_domain" id="mailgun_domain" value="{{ old('mailgun_domain', env('MAILGUN_DOMAIN', '')) }}" class="w-full rounded-lg border border-gray-300 bg-white text-gray-900 px-4 py-2.5 shadow-sm placeholder:text-gray-400 focus:border-primary focus:ring-2 focus:ring-primary/20 transition-colors sm:text-sm" placeholder="mg.example.com">
                    </div>
                    <div>
                        <label for="mailgun_secret" class="block text-sm font-medium text-gray-700 mb-2">
                            Mailgun Secret <span class="text-red-500">*</span>
                        </label>
                        <input type="password" name="mailgun_secret" id="mailgun_secret" value="{{ old('mailgun_secret') }}" class="w-full rounded-lg border border-gray-300 bg-white text-gray-900 px-4 py-2.5 shadow-sm placeholder:text-gray-400 focus:border-primary focus:ring-2 focus:ring-primary/20 transition-colors sm:text-sm" placeholder="Leave blank to keep current">
                    </div>
                    <div>
                        <label for="mailgun_endpoint" class="block text-sm font-medium text-gray-700 mb-2">Mailgun Endpoint</label>
                        <input type="text" name="mailgun_endpoint" id="mailgun_endpoint" value="{{ old('mailgun_endpoint', env('MAILGUN_ENDPOINT', 'api.mailgun.net')) }}" class="w-full rounded-lg border border-gray-300 bg-white text-gray-900 px-4 py-2.5 shadow-sm placeholder:text-gray-400 focus:border-primary focus:ring-2 focus:ring-primary/20 transition-colors sm:text-sm" placeholder="api.mailgun.net">
                    </div>
                </div>
            </div>

            <!-- SES Configuration -->
            <div id="ses-config" class="mailer-config hidden">
                <h3 class="text-lg font-semibold text-gray-900 mb-4">Amazon SES Configuration</h3>
                <div class="mb-4 p-4 bg-blue-50 border border-blue-200 rounded-lg">
                    <div class="flex items-start gap-3">
                        <span class="material-symbols-outlined text-blue-600 text-lg">info</span>
                        <div class="flex-1">
                            <h4 class="text-sm font-semibold text-blue-900 mb-2">How to Get Your Amazon SES Credentials</h4>
                            <ol class="text-xs text-blue-800 space-y-1.5 list-decimal list-inside">
                                <li>Sign in to <a href="https://console.aws.amazon.com/ses/" target="_blank" class="underline font-medium">AWS Console</a></li>
                                <li>Go to <strong>IAM</strong> → <strong>Users</strong> → <strong>Create User</strong></li>
                                <li>Attach policy: <strong>AmazonSESFullAccess</strong> or create custom policy</li>
                                <li>Go to <strong>Security Credentials</strong> → <strong>Create Access Key</strong></li>
                                <li><strong>AWS Access Key ID:</strong> Copy the Access Key ID</li>
                                <li><strong>AWS Secret Access Key:</strong> Copy the Secret Access Key (save it securely!)</li>
                                <li><strong>AWS Region:</strong> Select your SES region (e.g., us-east-1, eu-west-1)</li>
                                <li>Verify your email address or domain in <strong>SES</strong> → <strong>Verified Identities</strong></li>
                            </ol>
                            <p class="mt-2 text-xs text-blue-700">
                                <strong>Note:</strong> Free tier includes 62,000 emails/month. New accounts start in sandbox mode (can only send to verified emails). Request production access to send to any email.
                            </p>
                        </div>
                    </div>
                </div>
                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                    <div>
                        <label for="ses_key" class="block text-sm font-medium text-gray-700 mb-2">
                            AWS Access Key ID <span class="text-red-500">*</span>
                        </label>
                        <input type="text" name="ses_key" id="ses_key" value="{{ old('ses_key', env('AWS_ACCESS_KEY_ID', '')) }}" class="w-full rounded-lg border border-gray-300 bg-white text-gray-900 px-4 py-2.5 shadow-sm placeholder:text-gray-400 focus:border-primary focus:ring-2 focus:ring-primary/20 transition-colors sm:text-sm" placeholder="AKIAIOSFODNN7EXAMPLE">
                    </div>
                    <div>
                        <label for="ses_secret" class="block text-sm font-medium text-gray-700 mb-2">
                            AWS Secret Access Key <span class="text-red-500">*</span>
                        </label>
                        <input type="password" name="ses_secret" id="ses_secret" value="{{ old('ses_secret') }}" class="w-full rounded-lg border border-gray-300 bg-white text-gray-900 px-4 py-2.5 shadow-sm placeholder:text-gray-400 focus:border-primary focus:ring-2 focus:ring-primary/20 transition-colors sm:text-sm" placeholder="Leave blank to keep current">
                    </div>
                    <div>
                        <label for="ses_region" class="block text-sm font-medium text-gray-700 mb-2">
                            AWS Region <span class="text-red-500">*</span>
                        </label>
                        <input type="text" name="ses_region" id="ses_region" value="{{ old('ses_region', env('AWS_DEFAULT_REGION', 'us-east-1')) }}" class="w-full rounded-lg border border-gray-300 bg-white text-gray-900 px-4 py-2.5 shadow-sm placeholder:text-gray-400 focus:border-primary focus:ring-2 focus:ring-primary/20 transition-colors sm:text-sm" placeholder="us-east-1">
                    </div>
                </div>
            </div>

            <!-- SendGrid Configuration -->
            <div id="sendgrid-config" class="mailer-config hidden">
                <h3 class="text-lg font-semibold text-gray-900 mb-4">SendGrid Configuration</h3>
                <div class="mb-4 p-4 bg-blue-50 border border-blue-200 rounded-lg">
                    <div class="flex items-start gap-3">
                        <span class="material-symbols-outlined text-blue-600 text-lg">info</span>
                        <div class="flex-1">
                            <h4 class="text-sm font-semibold text-blue-900 mb-2">How to Get Your SendGrid Credentials</h4>
                            <ol class="text-xs text-blue-800 space-y-1.5 list-decimal list-inside">
                                <li>Sign up at <a href="https://sendgrid.com/" target="_blank" class="underline font-medium">SendGrid</a> (free tier available)</li>
                                <li>Go to <strong>Settings</strong> → <strong>API Keys</strong></li>
                                <li>Click <strong>"Create API Key"</strong></li>
                                <li>Choose <strong>"Full Access"</strong> or <strong>"Mail Send"</strong> permissions</li>
                                <li><strong>API Key:</strong> Copy the API key immediately (it won't be shown again!)</li>
                                <li>Verify your sender identity in <strong>Settings</strong> → <strong>Sender Authentication</strong></li>
                            </ol>
                            <div class="mt-2 p-2 bg-blue-100 rounded text-xs text-blue-900">
                                <strong>SendGrid SMTP Settings (Alternative):</strong>
                                <ul class="mt-1 space-y-1 list-disc list-inside">
                                    <li><strong>Host:</strong> smtp.sendgrid.net</li>
                                    <li><strong>Port:</strong> 587 (TLS) or 465 (SSL)</li>
                                    <li><strong>Username:</strong> apikey</li>
                                    <li><strong>Password:</strong> Your API Key</li>
                                </ul>
                            </div>
                            <p class="mt-2 text-xs text-blue-700">
                                <strong>Note:</strong> Free tier includes 100 emails/day forever. For production, verify your domain for better deliverability.
                            </p>
                        </div>
                    </div>
                </div>
                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                    <div>
                        <label for="sendgrid_api_key" class="block text-sm font-medium text-gray-700 mb-2">
                            API Key
                        </label>
                        <input type="password" name="sendgrid_api_key" id="sendgrid_api_key" value="{{ old('sendgrid_api_key') }}" class="w-full rounded-lg border border-gray-300 bg-white text-gray-900 px-4 py-2.5 shadow-sm placeholder:text-gray-400 focus:border-primary focus:ring-2 focus:ring-primary/20 transition-colors sm:text-sm" placeholder="Leave blank to keep current">
                        <p class="mt-1 text-xs text-gray-500">Your SendGrid API Key (starts with SG...). Leave blank to keep current value.</p>
                    </div>
                </div>
            </div>

            <!-- From Address and Name (Common for all drivers) -->
            <div class="pt-6 border-t border-gray-200">
                <h3 class="text-lg font-semibold text-gray-900 mb-4">From Address</h3>
                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                    <div>
                        <label for="from_address" class="block text-sm font-medium text-gray-700 mb-2">
                            From Address <span class="text-red-500">*</span>
                        </label>
                        <input type="email" name="from_address" id="from_address" value="{{ old('from_address', $emailConfig->from_address ?? env('MAIL_FROM_ADDRESS', '')) }}" required class="w-full rounded-lg border border-gray-300 bg-white text-gray-900 px-4 py-2.5 shadow-sm placeholder:text-gray-400 focus:border-primary focus:ring-2 focus:ring-primary/20 transition-colors sm:text-sm" placeholder="noreply@example.com">
                    </div>
                    <div>
                        <label for="from_name" class="block text-sm font-medium text-gray-700 mb-2">
                            From Name <span class="text-red-500">*</span>
                        </label>
                        <input type="text" name="from_name" id="from_name" value="{{ old('from_name', $emailConfig->from_name ?? env('MAIL_FROM_NAME', '')) }}" required class="w-full rounded-lg border border-gray-300 bg-white text-gray-900 px-4 py-2.5 shadow-sm placeholder:text-gray-400 focus:border-primary focus:ring-2 focus:ring-primary/20 transition-colors sm:text-sm" placeholder="ProInvoice">
                    </div>
                </div>
            </div>

            <!-- Form Actions -->
            <div class="flex items-center justify-end gap-3 pt-6 border-t border-gray-200">
                <button type="button" onclick="openTestEmailModal()" class="px-4 py-2.5 border border-gray-300 text-gray-700 rounded-lg hover:bg-gray-50 transition-colors font-medium">
                    <span class="material-symbols-outlined text-sm mr-2 align-middle">mail</span>
                    Test Email
                </button>
                <button type="submit" class="px-4 py-2.5 bg-primary text-white rounded-lg hover:bg-primary/90 transition-colors font-medium shadow-sm focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary">
                    Save Settings
                </button>
            </div>
        </form>
    </div>
</div>

<!-- Test Email Modal -->
<div id="test-email-modal" data-admin-modal class="hidden fixed inset-0 z-[100] overflow-y-auto" aria-labelledby="modal-title" role="dialog" aria-modal="true">
    <div class="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
        <div class="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" aria-hidden="true" onclick="closeTestEmailModal()"></div>
        <span class="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">&#8203;</span>
        <div class="inline-block align-bottom bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full">
            <form method="POST" action="{{ route('admin.settings.email.test') }}">
                @csrf
                <div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
                    <h3 class="text-lg leading-6 font-medium text-gray-900 mb-4">Send Test Email</h3>
                    <div>
                        <label for="test_email" class="block text-sm font-medium text-gray-700 mb-2">
                            Email Address <span class="text-red-500">*</span>
                        </label>
                        <input type="email" name="test_email" id="test_email" required class="w-full rounded-lg border border-gray-300 bg-white text-gray-900 px-4 py-2.5 shadow-sm placeholder:text-gray-400 focus:border-primary focus:ring-2 focus:ring-primary/20 transition-colors sm:text-sm" placeholder="test@example.com">
                        <p class="mt-1 text-xs text-gray-500">Enter an email address to send a test email</p>
                    </div>
                </div>
                <div class="bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse">
                    <button type="submit" class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-primary text-base font-medium text-white hover:bg-primary/90 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary sm:ml-3 sm:w-auto sm:text-sm">
                        Send Test Email
                    </button>
                    <button type="button" onclick="closeTestEmailModal()" class="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm">
                        Cancel
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

<script>
function toggleMailerFields() {
    const mailer = document.getElementById('mailer').value;
    
    // Hide all config sections
    document.querySelectorAll('.mailer-config').forEach(el => {
        el.classList.add('hidden');
    });
    
    // Show relevant config section
    if (mailer === 'smtp') {
        document.getElementById('smtp-config').classList.remove('hidden');
        // Make SMTP fields required
        document.getElementById('smtp_host').required = true;
        document.getElementById('smtp_port').required = true;
    } else {
        document.getElementById('smtp_host').required = false;
        document.getElementById('smtp_port').required = false;
    }
    
    if (mailer === 'mailgun') {
        document.getElementById('mailgun-config').classList.remove('hidden');
        document.getElementById('mailgun_domain').required = true;
        document.getElementById('mailgun_secret').required = true;
    } else {
        document.getElementById('mailgun_domain').required = false;
        document.getElementById('mailgun_secret').required = false;
    }
    
    if (mailer === 'ses') {
        document.getElementById('ses-config').classList.remove('hidden');
        document.getElementById('ses_key').required = true;
        document.getElementById('ses_secret').required = true;
        document.getElementById('ses_region').required = true;
    } else {
        document.getElementById('ses_key').required = false;
        document.getElementById('ses_secret').required = false;
        document.getElementById('ses_region').required = false;
    }
    
    if (mailer === 'sendgrid') {
        document.getElementById('sendgrid-config').classList.remove('hidden');
    }
}

function openTestEmailModal() {
    document.getElementById('test-email-modal').classList.remove('hidden');
}

function closeTestEmailModal() {
    document.getElementById('test-email-modal').classList.add('hidden');
}

// Initialize on page load
document.addEventListener('DOMContentLoaded', function() {
    toggleMailerFields();
});
</script>
@endsection