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

{% block title %}Suite Consultance - Historique des emails{% 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">Historique des emails de {{ 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">
        {% if emails %}
            <div class="table-responsive">
                <table class="table table-striped table-hover">
                    <thead>
                        <tr>
                            <th>Date</th>
                            <th>Sujet</th>
                            <th>Statut</th>
                            <th>Actions</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for email in emails %}
                        <tr>
                            <td>{{ email.timestamp|datetime }}</td>
                            <td>{{ email.subject }}</td>
                            <td>
                                {% if email.success %}
                                    <span class="badge bg-success">Envoyé</span>
                                {% else %}
                                    <span class="badge bg-danger">Échec</span>
                                {% endif %}
                            </td>
                            <td>
                                <button type="button" class="btn btn-sm btn-info view-email" data-email='{{ email|tojson }}'>
                                    <i class="fas fa-eye"></i> Voir
                                </button>
                            </td>
                        </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
        {% else %}
            <div class="alert alert-info">
                Aucun email n'a été envoyé à ce prospect.
            </div>
        {% endif %}
    </div>
</div>

<!-- Modal de visualisation d'email -->
<div class="modal fade" id="emailModal" tabindex="-1" aria-labelledby="emailModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="emailModalLabel">Détails de l'email</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <div class="mb-3">
                    <h6>Date d'envoi</h6>
                    <p id="email_date"></p>
                </div>
                <div class="mb-3">
                    <h6>Destinataire</h6>
                    <p id="email_recipient"></p>
                </div>
                <div class="mb-3">
                    <h6>Sujet</h6>
                    <p id="email_subject"></p>
                </div>
                <div>
                    <h6>Contenu</h6>
                    <div id="email_content" class="border p-3"></div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Fermer</button>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
    document.addEventListener('DOMContentLoaded', function() {
        // Afficher les détails de l'email dans le modal
        document.querySelectorAll('.view-email').forEach(button => {
            button.addEventListener('click', function() {
                const emailData = JSON.parse(this.getAttribute('data-email'));
                
                // Remplir les champs du modal
                document.getElementById('email_date').textContent = new Date(emailData.timestamp).toLocaleString();
                document.getElementById('email_recipient').textContent = emailData.to;
                document.getElementById('email_subject').textContent = emailData.subject;
                document.getElementById('email_content').innerHTML = emailData.content;
                
                // Afficher le modal
                const emailModal = new bootstrap.Modal(document.getElementById('emailModal'));
                emailModal.show();
            });
        });
    });
</script>
{% endblock %}