<?php // Christo Lochenberg Developments | info@christodev.co.za | +27 61 523 9126 ?>
<div id="email" class="tab-content <?php echo $activeTab === 'email' ? '' : 'hidden'; ?> space-y-6">
    
    <div class="bg-yellow-50 dark:bg-yellow-900/10 border border-yellow-200 dark:border-yellow-800/30 rounded-xl p-5 shadow-sm flex items-start">
        <svg class="w-6 h-6 text-yellow-600 dark:text-yellow-500 mr-3 flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"></path></svg>
        <div>
            <h4 class="text-sm font-bold text-yellow-800 dark:text-yellow-400">Important Requirement</h4>
            <p class="text-xs text-yellow-700 dark:text-yellow-400/80 mt-1 leading-relaxed">You must configure a valid SMTP server here for password resets and system notifications to function. The system uses an automated background queueing engine to prevent application lag.</p>
        </div>
    </div>

    <div class="bg-white dark:bg-gray-800 rounded-xl shadow-sm border border-gray-200 dark:border-gray-700/50 overflow-hidden">
        <div class="p-5 border-b border-gray-200 dark:border-gray-700/50 bg-gray-50 dark:bg-gray-900/40 flex items-center">
            <svg class="w-4 h-4 mr-2 text-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"></path></svg>
            <h3 class="text-sm font-bold text-gray-900 dark:text-white uppercase tracking-wider">Mail Server Setup</h3>
        </div>
        <div class="p-6">
            <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
                <div class="md:col-span-2">
                    <label class="block text-[10px] font-bold text-gray-500 uppercase tracking-wider mb-2">SMTP Host</label>
                    <input type="text" name="smtp_host" value="<?php echo $data['settings']['smtp_host'] ?? ''; ?>" placeholder="mail.yourdomain.com" class="w-full px-4 py-2.5 rounded-lg border border-gray-300 dark:border-gray-700 bg-gray-50 dark:bg-gray-900/50 text-gray-900 dark:text-white focus:ring-2 focus:ring-primary outline-none transition-colors">
                </div>
                <div>
                    <label class="block text-[10px] font-bold text-gray-500 uppercase tracking-wider mb-2">SMTP Port</label>
                    <input type="number" name="smtp_port" value="<?php echo $data['settings']['smtp_port'] ?? '465'; ?>" placeholder="465" class="w-full px-4 py-2.5 rounded-lg border border-gray-300 dark:border-gray-700 bg-gray-50 dark:bg-gray-900/50 text-gray-900 dark:text-white focus:ring-2 focus:ring-primary outline-none transition-colors">
                </div>
                <div>
                    <label class="block text-[10px] font-bold text-gray-500 uppercase tracking-wider mb-2">Encryption Protocol</label>
                    <select name="smtp_encryption" class="w-full px-4 py-2.5 rounded-lg border border-gray-300 dark:border-gray-700 bg-gray-50 dark:bg-gray-900/50 text-gray-900 dark:text-white focus:ring-2 focus:ring-primary outline-none transition-colors">
                        <option value="ssl" <?php echo (($data['settings']['smtp_encryption'] ?? 'ssl') === 'ssl') ? 'selected' : ''; ?>>SSL (Implicit - Usually Port 465)</option>
                        <option value="tls" <?php echo (($data['settings']['smtp_encryption'] ?? '') === 'tls') ? 'selected' : ''; ?>>TLS (Explicit - Usually Port 587)</option>
                        <option value="none" <?php echo (($data['settings']['smtp_encryption'] ?? '') === 'none') ? 'selected' : ''; ?>>None (Not Recommended)</option>
                    </select>
                </div>
                <div>
                    <label class="block text-[10px] font-bold text-gray-500 uppercase tracking-wider mb-2">SMTP Username</label>
                    <input type="text" name="smtp_user" value="<?php echo $data['settings']['smtp_user'] ?? ''; ?>" class="w-full px-4 py-2.5 rounded-lg border border-gray-300 dark:border-gray-700 bg-gray-50 dark:bg-gray-900/50 text-gray-900 dark:text-white focus:ring-2 focus:ring-primary outline-none transition-colors">
                </div>
                <div>
                    <label class="block text-[10px] font-bold text-gray-500 uppercase tracking-wider mb-2">SMTP Password</label>
                    <input type="password" name="smtp_pass" placeholder="Leave blank to keep existing password" class="w-full px-4 py-2.5 rounded-lg border border-gray-300 dark:border-gray-700 bg-gray-50 dark:bg-gray-900/50 text-gray-900 dark:text-white focus:ring-2 focus:ring-primary outline-none transition-colors">
                </div>
            </div>
            
            <div class="grid grid-cols-1 md:grid-cols-2 gap-6 pt-6 border-t border-gray-200 dark:border-gray-700/50">
                <div>
                    <label class="block text-[10px] font-bold text-gray-500 uppercase tracking-wider mb-2">Sender Name (From)</label>
                    <input type="text" name="smtp_from_name" value="<?php echo $data['settings']['smtp_from_name'] ?? ''; ?>" class="w-full px-4 py-2.5 rounded-lg border border-gray-300 dark:border-gray-700 bg-gray-50 dark:bg-gray-900/50 text-gray-900 dark:text-white focus:ring-2 focus:ring-primary outline-none transition-colors">
                </div>
                <div>
                    <label class="block text-[10px] font-bold text-gray-500 uppercase tracking-wider mb-2">Sender Email (From)</label>
                    <input type="email" name="smtp_from_email" value="<?php echo $data['settings']['smtp_from_email'] ?? ''; ?>" class="w-full px-4 py-2.5 rounded-lg border border-gray-300 dark:border-gray-700 bg-gray-50 dark:bg-gray-900/50 text-gray-900 dark:text-white focus:ring-2 focus:ring-primary outline-none transition-colors">
                </div>
            </div>
        </div>
    </div>

    <div class="bg-white dark:bg-gray-800 rounded-xl shadow-sm border border-gray-200 dark:border-gray-700/50 overflow-hidden">
        <div class="p-5 border-b border-gray-200 dark:border-gray-700/50 bg-gray-50 dark:bg-gray-900/40 flex items-center">
            <svg class="w-4 h-4 mr-2 text-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"></path></svg>
            <h3 class="text-sm font-bold text-gray-900 dark:text-white uppercase tracking-wider">Global Blind Copy (BCC)</h3>
        </div>
        <div class="p-6">
            <div class="flex flex-col md:flex-row md:items-center justify-between gap-6">
                <div class="w-full md:w-2/3">
                    <label class="block text-[10px] font-bold text-gray-500 uppercase tracking-wider mb-2">BCC Destination Email</label>
                    <input type="email" name="smtp_bcc_email" value="<?php echo $data['settings']['smtp_bcc_email'] ?? ''; ?>" placeholder="admin@domain.com" class="w-full px-4 py-2.5 rounded-lg border border-gray-300 dark:border-gray-700 bg-gray-50 dark:bg-gray-900/50 text-gray-900 dark:text-white focus:ring-2 focus:ring-primary outline-none transition-colors">
                    <p class="text-xs text-gray-500 dark:text-gray-400 mt-2">Silently copy an administrator on all outgoing system emails.</p>
                </div>
                <div class="w-full md:w-1/3 flex items-center justify-start md:justify-end mt-4 md:mt-0">
                    <label class="relative inline-flex items-center cursor-pointer">
                        <input type="checkbox" name="smtp_bcc_enable" value="1" class="sr-only peer" <?php echo (isset($data['settings']['smtp_bcc_enable']) && $data['settings']['smtp_bcc_enable'] == '1') ? 'checked' : ''; ?>>
                        <div class="w-11 h-6 bg-gray-300 peer-focus:outline-none rounded-full peer dark:bg-gray-600 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-400 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-primary"></div>
                        <span class="ml-3 text-sm font-bold text-gray-700 dark:text-gray-300">Enable BCC</span>
                    </label>
                </div>
            </div>
        </div>
    </div>

    <div class="bg-gray-50 dark:bg-gray-800/30 rounded-xl shadow-sm border border-dashed border-gray-300 dark:border-gray-700 overflow-hidden">
        <div class="p-6">
            <h4 class="text-sm font-bold text-gray-900 dark:text-white mb-4 uppercase tracking-wider">Test SMTP Configuration</h4>
            <div class="flex flex-col sm:flex-row items-end gap-4">
                <div class="w-full sm:w-2/3">
                    <label class="block text-[10px] font-bold text-gray-500 uppercase tracking-wider mb-2">Send Test Email To:</label>
                    <input type="email" name="test_email_address" placeholder="you@email.com" class="w-full px-4 py-2.5 rounded-lg border border-gray-300 dark:border-gray-700 bg-white dark:bg-gray-900/50 text-gray-900 dark:text-white focus:ring-2 focus:ring-primary outline-none transition-colors">
                </div>
                <button type="button" onclick="submitTestEmail()" class="w-full sm:w-1/3 bg-gray-800 dark:bg-gray-700 hover:bg-gray-900 dark:hover:bg-gray-600 text-white font-bold py-2.5 px-4 rounded-lg transition-all focus:ring-4 focus:ring-gray-500/50 shadow-sm">
                    Send Test Email
                </button>
            </div>
        </div>
    </div>
</div>