{% extends "dashboard/base_dash.html" %}
{% block title %}Paramètres — GiniFollow{% endblock %}
{% block dashboard_inner %}
<div class="px-2 px-lg-3 py-3">
    <p class="dash-help mb-4">
        <strong>Paramètres</strong> regroupe tout ce qui concerne votre dossier médical, la sécurité du compte, vos abonnements et l’aide.
        Utilisez le menu ci-contre pour accéder rapidement à chaque rubrique.
    </p>
    <div class="row g-4 flex-lg-nowrap">
        <div class="col-lg-3 flex-shrink-0">
            <nav class="dash-settings-nav card border-0 shadow-sm rounded-3 p-3 small">
                <span class="text-uppercase text-muted fw-bold d-block mb-2" style="font-size: 0.7rem;">Menu</span>
                <a href="{% url 'dashboard_profil' %}" class="dash-settings-nav-link">Mon profil</a>
                <a href="#infos-medicales" class="dash-settings-nav-link">Informations médicales</a>
                <a href="#securite" class="dash-settings-nav-link">Sécurité</a>
                <a href="#notifications" class="dash-settings-nav-link">Notifications</a>
                <a href="#abonnement" class="dash-settings-nav-link">Abonnement</a>
                <a href="#confidentialite" class="dash-settings-nav-link">Confidentialité</a>
                <a href="#support" class="dash-settings-nav-link">Support</a>
            </nav>
        </div>
        <div class="col-lg-9 min-w-0">

            <section id="rappel-profil" class="dash-section-card card border-0 shadow-sm rounded-3 mb-4">
                <div class="card-body p-4">
                    <h2 class="h5 fw-bold mb-2">Identité & photo</h2>
                    <p class="dash-help mb-3">Les informations d’identité et la photo se gèrent dans <strong>Mon profil</strong> (page dédiée), pour éviter les doublons et garder une expérience claire.</p>
                    <a href="{% url 'dashboard_profil' %}" class="btn btn-primary btn-sm">Ouvrir Mon profil</a>
                </div>
            </section>

            <section id="infos-medicales" class="dash-section-card card border-0 shadow-sm rounded-3 mb-4">
                <div class="card-body p-4">
                    <h2 class="h5 fw-bold mb-2">Informations médicales</h2>
                    <p class="dash-help mb-3">Ces données aident l’équipe à personnaliser l’éducation thérapeutique et les messages de prévention. Elles ne remplacent pas une consultation ni une ordonnance.</p>
                    <form method="post">
                        {% csrf_token %}
                        <input type="hidden" name="action" value="medical">
                        {% for field in medical_form %}
                        <div class="mb-3">
                            <label class="form-label" for="{{ field.id_for_label }}">{{ field.label }}</label>
                            {{ field }}
                            {% if field.errors %}<div class="text-danger small">{{ field.errors|join:", " }}</div>{% endif %}
                        </div>
                        {% endfor %}
                        <button type="submit" class="btn btn-primary">Enregistrer les informations médicales</button>
                    </form>
                </div>
            </section>

            <section id="securite" class="dash-section-card card border-0 shadow-sm rounded-3 mb-4">
                <div class="card-body p-4">
                    <h2 class="h5 fw-bold mb-2">Sécurité</h2>
                    <p class="dash-help mb-3">Protégez l’accès à votre espace santé. Si vous utilisez uniquement Google, le mot de passe est géré par Google ; vous pouvez tout de même ajouter un mot de passe local si besoin.</p>
                    {% if user_has_usable_password %}
                    <a href="{% url 'dashboard_password' %}" class="btn btn-outline-primary">Changer le mot de passe</a>
                    {% else %}
                    <p class="small text-muted mb-2">Vous vous connectez avec Google : aucun mot de passe local n’est défini pour l’instant.</p>
                    <a href="{% url 'account_set_password' %}" class="btn btn-outline-primary btn-sm">Définir un mot de passe sur ce site</a>
                    <p class="small text-muted mt-2 mb-0">(Fonction standard du compte — utile si vous voulez aussi vous connecter par email.)</p>
                    {% endif %}
                </div>
            </section>

            <section id="notifications" class="dash-section-card card border-0 shadow-sm rounded-3 mb-4">
                <div class="card-body p-4">
                    <h2 class="h5 fw-bold mb-2">Notifications</h2>
                    <p class="dash-help mb-3">Les alertes in-app (rendez-vous, messages, rappels) sont listées dans le centre de notifications. Vous pouvez les marquer comme lues pour garder une boîte claire.</p>
                    <a href="{% url 'dashboard_notifications' %}" class="btn btn-outline-primary">Ouvrir mes notifications</a>
                </div>
            </section>

            <section id="abonnement" class="dash-section-card card border-0 shadow-sm rounded-3 mb-4">
                <div class="card-body p-4">
                    <h2 class="h5 fw-bold mb-2">Abonnement</h2>
                    <p class="dash-help mb-3">Retrouvez vos demandes de paiement et le statut de validation. Après validation manuelle, l’accès complet au tableau de bord est activé.</p>
                    <p class="small mb-2">
                        <strong>Statut accès :</strong>
                        {% if profil.dashboard_active %}
                        <span class="text-success">Activé</span>
                        {% if profil.date_activation %}<span class="text-muted"> — depuis le {{ profil.date_activation|date:"d/m/Y" }}</span>{% endif %}
                        {% else %}
                        <span class="text-warning">En attente de validation</span>
                        {% endif %}
                    </p>
                    {% if forfait_actif %}
                    <p class="small mb-3">
                        <strong>Forfait actif :</strong> {{ forfait_actif.forfait.nom }}
                        <span class="text-muted">(validé le {{ forfait_actif.date_traitement|date:"d/m/Y" }})</span>
                    </p>
                    {% endif %}
                    <div class="table-responsive mb-3">
                        <table class="table table-sm align-middle mb-0">
                            <thead class="table-light"><tr><th>Forfait</th><th>Statut</th><th>Soumis le</th><th>Traité le</th></tr></thead>
                            <tbody>
                                {% for d in demandes_abonnement %}
                                <tr>
                                    <td>{{ d.forfait.nom }}</td>
                                    <td>
                                        {% if d.statut == "valide" %}<span class="text-success">{{ d.get_statut_display }}</span>
                                        {% elif d.statut == "rejete" %}<span class="text-danger">Rejet</span>
                                        {% else %}{{ d.get_statut_display }}{% endif %}
                                    </td>
                                    <td class="text-muted small">{{ d.date_soumission|date:"d/m/Y" }}</td>
                                    <td class="text-muted small">{% if d.date_traitement %}{{ d.date_traitement|date:"d/m/Y" }}{% else %}—{% endif %}</td>
                                </tr>
                                {% empty %}
                                <tr><td colspan="4" class="text-muted">Aucune demande.</td></tr>
                                {% endfor %}
                            </tbody>
                        </table>
                    </div>
                    <a href="{% url 'tarifs' %}" class="btn btn-primary btn-sm">Voir les tarifs / nouvelle demande</a>
                </div>
            </section>

            <section id="confidentialite" class="dash-section-card card border-0 shadow-sm rounded-3 mb-4">
                <div class="card-body p-4">
                    <h2 class="h5 fw-bold mb-2">Confidentialité</h2>
                    <p class="dash-help mb-3">Notre engagement sur le traitement de vos données de santé et vos droits d’accès.</p>
                    <a href="{% url 'confidentialite' %}" class="btn btn-outline-secondary" target="_blank" rel="noopener">Lire le document</a>
                </div>
            </section>

            <section id="support" class="dash-section-card card border-0 shadow-sm rounded-3 mb-4">
                <div class="card-body p-4">
                    <h2 class="h5 fw-bold mb-2">Support</h2>
                    <p class="dash-help mb-3">Pour toute question sur le site, le paiement ou un problème technique, contactez-nous par téléphone, WhatsApp ou la page contact.</p>
                    <p class="mb-2">
                        <a href="tel:+{{ support_whatsapp_intl }}" class="btn btn-outline-primary btn-sm me-2"><i class="bi bi-telephone me-1"></i>{{ support_phone }}</a>
                        <a href="https://wa.me/{{ support_whatsapp_intl }}" class="btn btn-success btn-sm" target="_blank" rel="noopener noreferrer">WhatsApp</a>
                    </p>
                    <a href="{% url 'contact' %}" class="btn btn-outline-primary btn-sm">Page contact</a>
                </div>
            </section>
        </div>
    </div>
</div>
{% endblock %}
{% block dashboard_extra_js %}
<script>
(function() {
    var sec = new URLSearchParams(window.location.search).get('section');
    if (sec && document.getElementById(sec)) {
        document.getElementById(sec).scrollIntoView({ behavior: 'smooth', block: 'start' });
    }
    if (window.location.hash) {
        var el = document.querySelector(window.location.hash);
        if (el) el.scrollIntoView({ behavior: 'smooth', block: 'start' });
    }
})();
</script>
{% endblock %}