{% extends 'layouts/base.html' %}

{% block title %}Suite Consultance - Configuration Email{% endblock %}
{% block module_name %}crm{% endblock %}

{% block content %}
<div class="d-flex justify-content-between align-items-center mb-4">
    <h1 class="h2 text-crm">Configuration Email</h1>
    <a href="{{ url_for('crm') }}" class="btn btn-outline-crm">
        <i class="fas fa-arrow-left"></i> Retour au CRM
    </a>
</div>

<div class="card">
    <div class="card-body">
        <form method="POST" action="{{ url_for('email_config') }}">
            <div class="row g-3">
                <!-- Configuration SMTP -->
                <div class="col-12">
                    <h5 class="border-bottom pb-2 mb-3">Configuration SMTP</h5>
                </div>
                
                <div class="col-md-6">
                    <div class="mb-3">
                        <label for="smtp_server" class="form-label">Serveur SMTP *</label>
                        <input type="text" class="form-control" id="smtp_server" name="smtp_server" value="{{ config.smtp_server }}" required>
                        <small class="text-muted">Exemple: smtp.gmail.com</small>
                    </div>
                </div>
                
                <div class="col-md-6">
                    <div class="mb-3">
                        <label for="smtp_port" class="form-label">Port SMTP *</label>
                        <input type="number" class="form-control" id="smtp_port" name="smtp_port" value="{{ config.smtp_port }}" required>
                        <small class="text-muted">Exemple: 587 (TLS) ou 465 (SSL)</small>
                    </div>
                </div>
                
                <!-- Authentification -->
                <div class="col-12">
                    <h5 class="border-bottom pb-2 mb-3 mt-3">Authentification</h5>
                </div>
                
                <div class="col-md-6">
                    <div class="mb-3">
                        <label for="username" class="form-label">Adresse email *</label>
                        <input type="email" class="form-control" id="username" name="username" value="{{ config.username }}" required>
                    </div>
                </div>
                
                <div class="col-md-6">
                    <div class="mb-3">
                        <label for="password" class="form-label">Mot de passe *</label>
                        <input type="password" class="form-control" id="password" name="password" value="{{ config.password }}" required>
                        <small class="text-muted">Pour Gmail, utilisez un "mot de passe d'application"</small>
                    </div>
                </div>
                
                <!-- Information d'expéditeur -->
                <div class="col-12">
                    <h5 class="border-bottom pb-2 mb-3 mt-3">Informations d'expéditeur</h5>
                </div>
                
                <div class="col-md-6">
                    <div class="mb-3">
                        <label for="sender_name" class="form-label">Nom d'expéditeur *</label>
                        <input type="text" class="form-control" id="sender_name" name="sender_name" value="{{ config.sender_name }}" required>
                    </div>
                </div>
                
                <div class="col-md-6">
                    <div class="mb-3">
                        <label for="sender_email" class="form-label">Email d'expéditeur *</label>
                        <input type="email" class="form-control" id="sender_email" name="sender_email" value="{{ config.sender_email }}" required>
                        <small class="text-muted">Doit généralement correspondre à l'adresse email d'authentification</small>
                    </div>
                </div>
                
                <div class="col-12 mt-3">
                    <button type="submit" class="btn btn-primary">
                        <i class="fas fa-save"></i> Enregistrer la configuration
                    </button>
                    <a href="{{ url_for('crm') }}" class="btn btn-outline-secondary">
                        Annuler
                    </a>
                    <button type="button" id="test_config" class="btn btn-info float-end">
                        <i class="fas fa-vial"></i> Tester la configuration
                    </button>
                </div>
            </div>
        </form>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
    document.addEventListener('DOMContentLoaded', function() {
        // Test de la configuration
        document.getElementById('test_config').addEventListener('click', function() {
            // Récupérer les données du formulaire
            const formData = {
                smtp_server: document.getElementById('smtp_server').value,
                smtp_port: document.getElementById('smtp_port').value,
                username: document.getElementById('username').value,
                password: document.getElementById('password').value,
                sender_name: document.getElementById('sender_name').value,
                sender_email: document.getElementById('sender_email').value
            };
            
            // Vérifier que tous les champs sont remplis
            for (const key in formData) {
                if (!formData[key]) {
                    alert('Veuillez remplir tous les champs avant de tester la configuration.');
                    return;
                }
            }
            
            // Envoyer une requête pour tester la configuration
            fetch('/api/test_email_config', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify(formData)
            })
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    alert('Test réussi ! La configuration email fonctionne correctement.');
                } else {
                    alert('Échec du test : ' + data.error);
                }
            })
            .catch(error => {
                alert('Erreur lors du test : ' + error);
            });
        });
    });
</script>
{% endblock %}