{% extends "dashboard/base_dash.html" %}
{% block title %}Mes rendez-vous — GiniFollow{% endblock %}
{% block dashboard_inner %}
<div class="px-3 px-lg-4 py-4">
    <p class="dash-help mb-4">
        <strong>Mes rendez-vous :</strong> vos appels planifiés avec un accompagnateur (visio ou messagerie). Le statut est mis à jour par l’équipe après chaque créneau (succès, non honoré, annulation). L’historique liste tous vos rendez-vous.
    </p>
    <div class="d-flex justify-content-between align-items-center mb-3 flex-wrap gap-2">
        <h2 class="h5 fw-bold mb-0">À venir</h2>
        <a href="{% url 'agenda' %}" class="btn btn-sm btn-primary">Prendre un créneau</a>
    </div>
    <div class="card border-0 shadow-sm rounded-3 mb-4">
        <div class="list-group list-group-flush">
            {% for r in rdv_a_venir %}
            <div class="list-group-item py-3 d-flex flex-column flex-md-row justify-content-between gap-3">
                <div>
                    <div class="fw-bold">{{ r.date_heure|date:"l d F Y à H:i" }}</div>
                    <div class="small text-muted">{{ r.get_mode_display }} — {{ r.accompagnateur.get_full_name|default:r.accompagnateur.username }}</div>
                    <div class="mt-2">
                        {% if r.statut == "confirme" %}
                        <span class="badge rounded-pill text-bg-info">Confirmé</span>
                        {% else %}
                        <span class="badge rounded-pill text-bg-primary">Planifié</span>
                        {% endif %}
                    </div>
                    {% if r.lien_reunion %}<a href="{{ r.lien_reunion }}" class="small d-inline-block mt-2" target="_blank" rel="noopener">Lien de réunion</a>{% endif %}
                </div>
                <form method="post" action="{% url 'dashboard_annuler_rdv' r.pk %}" onsubmit="return confirm('Annuler ce rendez-vous ?');">
                    {% csrf_token %}
                    <button type="submit" class="btn btn-outline-danger btn-sm">Annuler</button>
                </form>
            </div>
            {% empty %}
            <div class="list-group-item text-muted py-4 text-center">Aucun rendez-vous à venir.</div>
            {% endfor %}
        </div>
    </div>

    <h2 class="h5 fw-bold mb-3">Historique complet</h2>
    <p class="small text-muted mb-3">Tous vos créneaux : planifiés, réalisés, non honorés ou annulés.</p>
    <div class="card border-0 shadow-sm rounded-3">
        <div class="table-responsive">
            <table class="table table-hover mb-0 align-middle">
                <thead class="table-light">
                    <tr>
                        <th>Date &amp; heure</th>
                        <th>Accompagnateur</th>
                        <th>Mode</th>
                        <th>Statut appel</th>
                    </tr>
                </thead>
                <tbody>
                    {% for r in historique_rdv %}
                    <tr>
                        <td>{{ r.date_heure|date:"d/m/Y H:i" }}</td>
                        <td class="small">{{ r.accompagnateur.get_full_name|default:r.accompagnateur.username }}</td>
                        <td>{{ r.get_mode_display }}</td>
                        <td>
                            {% if r.statut == "effectue" %}
                            <span class="badge rounded-pill text-bg-success">Réussi</span>
                            {% elif r.statut == "absent" %}
                            <span class="badge rounded-pill text-bg-danger">Non honoré / échec</span>
                            {% elif r.statut == "annule" %}
                            <span class="badge rounded-pill text-bg-secondary">Annulé</span>
                            {% elif r.statut == "confirme" %}
                            <span class="badge rounded-pill text-bg-info">Confirmé</span>
                            {% else %}
                            <span class="badge rounded-pill text-bg-primary">Planifié</span>
                            {% endif %}
                        </td>
                    </tr>
                    {% empty %}
                    <tr><td colspan="4" class="text-muted text-center py-4">Aucun rendez-vous enregistré.</td></tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    </div>
</div>
{% endblock %}