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

{% block title %}Suite Consultance - Envoyer un 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">Envoyer un email à {{ prospect.name }}</h1>
    <a href="{{ url_for('prospect_details', prospect_id=prospect.id) }}" class="btn btn-outline-crm">
        <i class="fas fa-arrow-left"></i> Retour au prospect
    </a>
</div>

<div class="card">
    <div class="card-body">
        <form method="POST" action="{{ url_for('send_prospect_email', prospect_id=prospect.id) }}">
            <div class="row g-3">
                <!-- Informations du destinataire -->
                <div class="col-12">
                    <h5 class="border-bottom pb-2 mb-3">Destinataire</h5>
                </div>
                
                <div class="col-md-6">
                    <div class="mb-3">
                        <label for="to_email" class="form-label">Email du destinataire</label>
                        <input type="email" class="form-control" id="to_email" name="to_email" value="{{ prospect.email }}" required>
                    </div>
                </div>
                
                <div class="col-md-6">
                    <div class="mb-3">
                        <label for="template_id" class="form-label">Template</label>
                        <select class="form-select" id="template_id" name="template_id">
                            <option value="">Email personnalisé</option>
                            {% for template in templates %}
                                <option value="{{ template.id }}">{{ template.name }}</option>
                            {% endfor %}
                        </select>
                    </div>
                </div>
                
                <!-- Contenu de l'email -->
                <div class="col-12">
                    <h5 class="border-bottom pb-2 mb-3 mt-3">Contenu de l'email</h5>
                </div>
                
                <div class="col-12">
                    <div class="mb-3">
                        <label for="subject" class="form-label">Sujet *</label>
                        <input type="text" class="form-control" id="subject" name="subject" required>
                    </div>
                </div>
                
                <div class="col-12">
                    <div class="mb-3">
                        <label for="body" class="form-label">Contenu *</label>
                        <textarea class="form-control" id="body" name="body" rows="10" required></textarea>
                        <small class="text-muted">Vous pouvez utiliser du texte formaté HTML.</small>
                    </div>
                </div>
                
                <div class="col-12">
                    <div class="mb-3">
                        <div class="form-check">
                            <input class="form-check-input" type="checkbox" id="update_status" name="update_status" checked>
                            <label class="form-check-label" for="update_status">
                                Mettre à jour le statut du prospect
                            </label>
                        </div>
                    </div>
                </div>
                
                <div class="col-md-6" id="status_selection">
                    <div class="mb-3">
                        <label for="new_status" class="form-label">Nouveau statut</label>
                        <select class="form-select" id="new_status" name="new_status">
                            <option value="Contacté" {% if prospect.status == 'Contacté' %}selected{% endif %}>Contacté</option>
                            <option value="Qualifié" {% if prospect.status == 'Qualifié' %}selected{% endif %}>Qualifié</option>
                            <option value="Proposition" {% if prospect.status == 'Proposition' %}selected{% endif %}>Proposition</option>
                            <option value="Non intéressé" {% if prospect.status == 'Non intéressé' %}selected{% endif %}>Non intéressé</option>
                        </select>
                    </div>
                </div>
                
                <div class="col-12 mt-3">
                    <button type="submit" class="btn btn-primary">
                        <i class="fas fa-paper-plane"></i> Envoyer l'email
                    </button>
                    <a href="{{ url_for('prospect_details', prospect_id=prospect.id) }}" class="btn btn-outline-secondary">
                        Annuler
                    </a>
                </div>
            </div>
        </form>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
    document.addEventListener('DOMContentLoaded', function() {
        const templateSelect = document.getElementById('template_id');
        const subjectInput = document.getElementById('subject');
        const bodyInput = document.getElementById('body');
        const updateStatusCheckbox = document.getElementById('update_status');
        const statusSelection = document.getElementById('status_selection');
        
        // Gestion du choix de template
        templateSelect.addEventListener('change', function() {
            const templateId = this.value;
            if (templateId) {
                // Charger le contenu du template
                fetch(`/api/email_template/${templateId}`)
                    .then(response => response.json())
                    .then(data => {
                        if (data.success) {
                            const template = data.template;
                            
                            // Remplacer les variables dans le sujet et le contenu
                            let subject = template.subject;
                            let content = template.content;
                            
                            // Variables de remplacement
                            const replacements = {
                                'name': '{{ prospect.name }}',
                                'company': '{{ prospect.company }}',
                                'email': '{{ prospect.email }}',
                                'phone': '{{ prospect.phone }}'
                            };
                            
                            // Appliquer les remplacements
                            for (const [key, value] of Object.entries(replacements)) {
                                // Escape $ character for Jinja by using string concatenation instead of template literals
                                const placeholder = "{{" + key + "}}";
                                subject = subject.replace(new RegExp(placeholder, 'g'), value);
                                content = content.replace(new RegExp(placeholder, 'g'), value);
                            }
                            
                            subjectInput.value = subject;
                            bodyInput.value = content;
                        }
                    });
            }
        });
        
        // Afficher/masquer le sélecteur de statut
        updateStatusCheckbox.addEventListener('change', function() {
            statusSelection.style.display = this.checked ? 'block' : 'none';
        });
        
        // Initialiser l'affichage du sélecteur de statut
        statusSelection.style.display = updateStatusCheckbox.checked ? 'block' : 'none';
    });
</script>
{% endblock %}