MarineMaintenance/templates/email_settings.html

{% extends 'base.html' %}
{% block title %}Configuración Email{% endblock %}
{% block page_title %}Configuración de Email{% endblock %}
{% block content %}
<div style="display:grid;grid-template-columns:1fr 1fr;gap:20px;max-width:900px">

<div class="card">
    <div class="card-header">⚙️ Servidor SMTP</div>
    <p style="font-size:12px;color:var(--gray);margin-bottom:16px">
        Configura el servidor de correo para enviar reportes por email.
        Funciona con Gmail, Outlook, Yahoo o cualquier servidor SMTP.
    </p>
    <form method="POST">
        <div class="form-group mb-3">
            <label>Servidor SMTP</label>
            <input type="text" name="smtp_host" value="{{ cfg.smtp_host if cfg else '' }}"
                   placeholder="smtp.gmail.com">
        </div>
        <div class="form-grid mb-3">
            <div class="form-group">
                <label>Puerto</label>
                <select name="smtp_port">
                    <option value="587" {% if not cfg or cfg.smtp_port==587 %}selected{% endif %}>587 (TLS — recomendado)</option>
                    <option value="465" {% if cfg and cfg.smtp_port==465 %}selected{% endif %}>465 (SSL)</option>
                    <option value="25"  {% if cfg and cfg.smtp_port==25  %}selected{% endif %}>25 (sin cifrado)</option>
                </select>
            </div>
            <div class="form-group">
                <label>Usar TLS</label>
                <select name="use_tls">
                    <option value="1" {% if not cfg or cfg.use_tls %}selected{% endif %}>Sí</option>
                    <option value="0" {% if cfg and not cfg.use_tls %}selected{% endif %}>No</option>
                </select>
            </div>
        </div>
        <div class="form-group mb-3">
            <label>Usuario (email de la cuenta)</label>
            <input type="email" name="smtp_user" value="{{ cfg.smtp_user if cfg else '' }}"
                   placeholder="tu@gmail.com">
        </div>
        <div class="form-group mb-3">
            <label>Contraseña / App Password</label>
            <input type="password" name="smtp_password" value="{{ cfg.smtp_password if cfg else '' }}"
                   placeholder="••••••••">
            <div style="font-size:11px;color:var(--gray);margin-top:4px">
                Para Gmail usa una <a href="https://myaccount.google.com/apppasswords" target="_blank" style="color:var(--cyan)">App Password</a>, no tu contraseña normal.
            </div>
        </div>
        <div class="form-group mb-3">
            <label>Nombre del Remitente</label>
            <input type="text" name="from_name" value="{{ cfg.from_name if cfg else '' }}"
                   placeholder="Marine Maintenance Pro">
        </div>
        <div class="form-group mb-4">
            <label>Email del Remitente</label>
            <input type="email" name="from_email" value="{{ cfg.from_email if cfg else '' }}"
                   placeholder="reportes@tuempresa.com">
        </div>
        <div class="flex gap-3">
            <button type="submit" class="btn btn-primary">💾 Guardar</button>
        </div>
    </form>
</div>

<div>
    <div class="card mb-4">
        <div class="card-header">🧪 Probar Configuración</div>
        <p style="font-size:12px;color:var(--gray);margin-bottom:12px">
            Envía un email de prueba para verificar que la configuración es correcta.
        </p>
        <div class="form-group mb-3">
            <label>Enviar prueba a</label>
            <input type="email" id="testEmail" placeholder="tu@email.com">
        </div>
        <button onclick="testEmail()" class="btn btn-secondary">📧 Enviar Prueba</button>
        <div id="testResult" style="margin-top:10px;font-size:13px"></div>
    </div>

    <div class="card">
        <div class="card-header">📋 Guías Rápidas</div>
        <div style="font-size:12px;color:var(--gray);line-height:1.8">
            <div style="margin-bottom:10px">
                <strong style="color:var(--white)">Gmail:</strong><br>
                Host: smtp.gmail.com · Puerto: 587<br>
                Requiere App Password (2FA activado)
            </div>
            <div style="margin-bottom:10px">
                <strong style="color:var(--white)">Outlook / Hotmail:</strong><br>
                Host: smtp-mail.outlook.com · Puerto: 587
            </div>
            <div>
                <strong style="color:var(--white)">Yahoo:</strong><br>
                Host: smtp.mail.yahoo.com · Puerto: 587
            </div>
        </div>
    </div>
</div>

</div>
{% endblock %}
{% block scripts %}
<script>
function testEmail() {
    const to = document.getElementById('testEmail').value.trim();
    const res = document.getElementById('testResult');
    if (!to) { res.textContent = 'Ingresa un email.'; return; }
    res.textContent = 'Enviando...'; res.style.color = 'var(--gray)';
    fetch('/settings/email/test', {
        method:'POST', headers:{'Content-Type':'application/json'},
        body: JSON.stringify({to})
    }).then(r=>r.json()).then(d=>{
        if (d.ok) { res.textContent = '✅ Email enviado. Revisa tu bandeja.'; res.style.color='var(--success)'; }
        else      { res.textContent = '❌ ' + d.error; res.style.color='var(--danger)'; }
    });
}
</script>
{% endblock %}