{% extends "base.html" %}
{% load static %}

{% block title %}Agenda & Créneaux — GiniFollow{% endblock %}

{% block extra_css %}
<style>
    /* Design System Agenda - Google Calendar Style */
    .gcal-container {
        background-color: #f8fafc;
        border-radius: 1rem;
    }

    /* Mini Calendar (Tableau 1) */
    .gcal-mini-calendar {
        background: #ffffff;
        border-radius: 1rem;
        border: 1px solid #e2e8f0;
        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
    }

    .gcal-day-header {
        font-size: 0.75rem;
        font-weight: 700;
        text-transform: uppercase;
        color: #64748b;
        text-align: center;
        padding: 0.5rem 0;
    }

    .gcal-day-cell {
        aspect-ratio: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 0.875rem;
        font-weight: 500;
        border-radius: 50%;
        cursor: pointer;
        transition: all 0.2s ease;
        text-decoration: none;
        color: #334155;
        margin: 2px auto;
        width: 36px;
        height: 36px;
    }

    .gcal-day-cell:hover {
        background-color: #e2e8f0;
        color: #0f172a;
    }

    /* Cerclage du Jour-J (Jour actif système) */
    .gcal-day-today {
        border: 2px solid #2563eb !important;
        color: #2563eb !important;
        font-weight: 700 !important;
        box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
    }

    .gcal-day-selected {
        background-color: #2563eb !important;
        color: #ffffff !important;
        font-weight: 700 !important;
    }

    .gcal-day-past {
        opacity: 0.45;
        color: #94a3b8;
    }

    /* Grille 7 Jours (Tableau 2) */
    .gcal-grid-card {
        background: #ffffff;
        border-radius: 1rem;
        border: 1px solid #e2e8f0;
        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
    }

    .gcal-grid-header {
        border-bottom: 1px solid #e2e8f0;
        background: #f8fafc;
        border-top-left-radius: 1rem;
        border-top-right-radius: 1rem;
    }

    .gcal-col-header {
        text-align: center;
        padding: 0.75rem 0.25rem;
        border-right: 1px solid #f1f5f9;
    }

    .gcal-col-header:last-child {
        border-right: none;
    }

    /* Slot Card Styling */
    .gcal-slot-btn {
        display: block;
        width: 100%;
        padding: 0.4rem 0.2rem;
        font-size: 0.78rem;
        font-weight: 600;
        text-align: center;
        border-radius: 0.5rem;
        margin-bottom: 0.35rem;
        transition: all 0.2s ease;
        border: 1px solid transparent;
        cursor: pointer;
        text-decoration: none;
    }

    /* Slot 1: Blanc (Disponible / Ouvert) */
    .slot-open {
        background-color: #ffffff;
        border-color: #94a3b8;
        color: #0f172a;
        font-weight: 700;
        box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08);
    }

    .slot-open:hover {
        background-color: #eff6ff;
        border-color: #2563eb;
        color: #1d4ed8;
        transform: translateY(-2px);
        box-shadow: 0 4px 10px rgba(37, 99, 235, 0.2);
    }

    /* Slot 2: Rouge / Hachuré (Réservé / Fermé) */
    .slot-closed {
        background: repeating-linear-gradient(45deg,
                #fee2e2,
                #fee2e2 8px,
                #fecaca 8px,
                #fecaca 16px);
        border-color: #f87171;
        color: #991b1b;
        font-weight: 700;
        cursor: not-allowed;
        opacity: 0.95;
    }

    /* Slot 3: Vert Émeraude (Votre réservation) */
    .slot-user-reserved {
        background: linear-gradient(135deg, #10b981 0%, #047857 100%);
        border-color: #065f46;
        color: #ffffff;
        font-weight: 700;
        box-shadow: 0 3px 8px rgba(16, 185, 129, 0.35);
    }

    /* Légende */
    .gcal-legend-item {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        font-size: 0.85rem;
        font-weight: 500;
        color: #334155;
    }

    .gcal-legend-box {
        width: 24px;
        height: 24px;
        border-radius: 0.375rem;
        flex-shrink: 0;
    }

    .gcal-legend-box.box-open {
        background: #ffffff;
        border: 1px solid #cbd5e1;
    }

    .gcal-legend-box.box-closed {
        background: repeating-linear-gradient(45deg,
                #fef2f2,
                #fef2f2 6px,
                #fee2e2 6px,
                #fee2e2 12px);
        border: 1px solid #fca5a5;
    }

    .gcal-legend-box.box-user {
        background: linear-gradient(135deg, #10b981 0%, #059669 100%);
        border: 1px solid #047857;
    }
</style>
{% endblock %}

{% block page_header %}
<div class="container-fluid page-header py-5 mb-4 wow fadeIn" data-wow-delay="0.1s"
    style="background-image: url('{% static 'images/ginni6.jpg' %}');">
    <div class="container py-4">
        <h1 class="display-5 mb-2 text-white">Agenda des Disponibilités</h1>
        <p class="text-white-50 mb-0">Sélectionnez votre créneau d'accompagnement médical individuel de 09h00 à 22h30.
        </p>
        {% include "partials/gf_page_breadcrumb.html" with breadcrumb_current="Agenda" %}
    </div>
</div>
{% endblock %}

{% block content %}
<div class="container-xxl py-3">
    <div class="container">

        <!-- Messages système / CTA Tarifs -->
        {% if show_tarifs_cta %}
        <div class="alert alert-warning border-0 shadow-sm rounded-3 d-flex flex-column flex-md-row align-items-md-center justify-content-between gap-3 mb-4"
            role="alert">
            <div class="d-flex align-items-center gap-3">
                <i class="bi bi-star-fill text-warning fs-3"></i>
                <div>
                    <strong class="d-block">Accès complet et réservation de créneaux</strong>
                    <span class="small text-muted">Un abonnement actif (valide 1 mois) est requis pour réserver votre
                        rendez-vous individuel.</span>
                </div>
            </div>
            <a href="{% url 'tarifs' %}" class="btn btn-primary btn-sm rounded-pill px-4 flex-shrink-0">Découvrir les
                forfaits & tarifs</a>
        </div>
        {% endif %}

        <div class="row g-4 align-items-start">

            <!-- ========================================== -->
            <!-- TABLEAU 1 : MINI CALENDRIER MENSUEL (Google Calendar Style) -->
            <!-- ========================================== -->
            <div class="col-lg-4 col-xl-3">
                <div class="gcal-mini-calendar p-3">

                    <!-- En-tête Mois & Année -->
                    <div class="d-flex align-items-center justify-content-between mb-3 pb-2 border-bottom">
                        <h6 class="fw-bold mb-0 text-primary">
                            <i class="bi bi-calendar3 me-2"></i>{{ selected_month_label }}
                        </h6>
                        <a href="{% url 'agenda' %}?date={{ today_iso }}"
                            class="btn btn-outline-primary btn-sm rounded-pill px-3 py-1" style="font-size: 0.75rem;"
                            title="Revenir au jour actif">
                            Jour-J
                        </a>
                    </div>

                    <!-- Sélecteur rapide de Date -->
                    <form method="get" action="{% url 'agenda' %}" class="mb-3">
                        <label for="date_picker" class="form-label small text-muted mb-1">Changer la date de référence
                            :</label>
                        <div class="input-group input-group-sm">
                            <input type="date" id="date_picker" name="date" class="form-select form-select-sm"
                                value="{{ selected_date_iso }}">
                            <button type="submit" class="btn btn-primary btn-sm px-3"><i
                                    class="bi bi-search"></i></button>
                        </div>
                    </form>

                    <!-- Message d'Alerte Période Passée (Exigence du Tableau 1) -->
                    {% if is_past_period %}
                    <div
                        class="p-3 mb-3 bg-danger bg-opacity-10 border border-danger border-opacity-25 rounded-3 text-center">
                        <i class="bi bi-exclamation-triangle-fill text-danger fs-3 mb-2 d-block"></i>
                        <h6 class="fw-bold text-danger mb-1" style="font-size: 0.9rem;">Aucune disponibilité pendant
                            cette période</h6>
                        <p class="small text-muted mb-3" style="font-size: 0.78rem;">
                            Les dates passées ne disposent plus de créneaux réservables dans le système.
                        </p>
                        <!-- Bouton ramenant au jour actif / jour-j en cours -->
                        <a href="{% url 'agenda' %}?date={{ today_iso }}"
                            class="btn btn-danger btn-sm rounded-pill w-100 py-2 fw-semibold"
                            style="font-size: 0.8rem;">
                            <i class="bi bi-arrow-counterclockwise me-1"></i> Accéder à la prochaine date de réservation
                        </a>
                    </div>
                    {% else %}
                    <div class="p-3 bg-light rounded-3 mb-3">
                        <div class="d-flex align-items-center gap-2 mb-2">
                            <span class="badge bg-primary rounded-circle p-2"><i
                                    class="bi bi-info-circle text-white"></i></span>
                            <span class="fw-bold small text-dark">Informations sur la période</span>
                        </div>
                        <p class="small text-muted mb-0" style="font-size: 0.78rem;">
                            Jour actif du système : <strong>{{ today_date|date:"d/m/Y" }}</strong>.<br>
                            Le cerclage bleu indique le jour-J actuel.
                        </p>
                    </div>
                    {% endif %}

                    <!-- Guide d'Assistance -->
                    <div class="p-3 rounded-3 bg-primary bg-opacity-10 border border-primary border-opacity-20 mt-3">
                        <div class="d-flex align-items-center gap-2 mb-1">
                            <i class="bi bi-whatsapp text-success fs-5"></i>
                            <h6 class="fw-bold text-primary mb-0" style="font-size: 0.85rem;">Besoin d'aide ?</h6>
                        </div>
                        <p class="small text-muted mb-2" style="font-size: 0.78rem;">Notre équipe médicale reste
                            disponible pour vous guider.</p>
                        <a href="https://wa.me/{{ support_whatsapp_intl }}" target="_blank"
                            class="btn btn-success btn-sm rounded-pill w-100 fw-semibold" style="font-size: 0.78rem;">
                            <i class="bi bi-chat-dots me-1"></i> WhatsApp Support
                        </a>
                    </div>

                </div>
            </div>

            <!-- ========================================== -->
            <!-- TABLEAU 2 : GRILLE HEBDOMADAIRE (7 JOURS / 09h00 - 22h30) -->
            <!-- ========================================== -->
            <div class="col-lg-8 col-xl-9">
                <div class="gcal-grid-card p-3 p-md-4">

                    <!-- Titre du Tableau 2 -->
                    <div
                        class="d-flex flex-column flex-md-row align-items-md-center justify-content-between gap-2 mb-4 pb-3 border-bottom">
                        <div>
                            <h2 class="h5 fw-bold mb-1 text-dark">
                                <i class="bi bi-grid-3x3-gap-fill text-primary me-2"></i>Grille des créneaux horaires
                                (09h00 à 22h30)
                            </h2>
                            <p class="small text-muted mb-0">
                                Affichage sur 7 jours consécutifs à partir du {{ grid_days.0|date:"d F Y" }}.
                            </p>
                        </div>
                        <div class="d-flex align-items-center gap-2">
                            <span class="badge bg-light text-dark border px-3 py-2">
                                <i class="bi bi-clock me-1 text-primary"></i> 28 Créneaux / jour
                            </span>
                        </div>
                    </div>

                    <!-- Grille responsive des 7 jours -->
                    <div class="table-responsive">
                        <div class="row g-2 flex-nowrap min-vw-100 min-vw-md-0" style="min-width: 720px;">

                            {% for day in grid_data %}
                            <div class="col" style="flex: 1; min-width: 100px;">

                                <!-- En-tête Jour -->
                                <div
                                    class="text-center p-2 mb-3 rounded-3 {% if day.is_today %}bg-primary text-white shadow-sm{% else %}bg-light text-dark border{% endif %}">
                                    <div class="fw-bold small">{{ day.day_name }}</div>
                                    <div class="fs-6 fw-extrabold">{{ day.date|date:"d/m" }}</div>
                                    {% if day.is_today %}
                                    <span class="badge bg-white text-primary mt-1"
                                        style="font-size: 0.65rem;">Aujourd'hui</span>
                                    {% endif %}
                                </div>

                                <!-- Liste des Créneaux du Jour (09:00 -> 22:30) -->
                                <div class="d-flex flex-column gap-1">
                                    {% for slot in day.slots %}

                                    {% if slot.status == 'open' %}
                                    <!-- Créneau Blanc (Disponible) -->
                                    {% if request.user.is_authenticated %}
                                    {% if user_is_active_subscriber %}
                                    <!-- Modal Réservation WhatsApp / Google Meet -->
                                    <button type="button" class="gcal-slot-btn slot-open" data-bs-toggle="modal"
                                        data-bs-target="#modalReserverCreneau" data-slot-dt="{{ slot.datetime_val }}"
                                        data-slot-display="{{ day.formatted_date }} à {{ slot.time_display }}"
                                        title="Cliquer pour réserver à {{ slot.time_display }}">
                                        {{ slot.time_display }}
                                    </button>
                                    {% else %}
                                    <!-- Modal Marketing Abonnement Expiré / Non Actif -->
                                    <button type="button" class="gcal-slot-btn slot-open" data-bs-toggle="modal"
                                        data-bs-target="#modalAbonnementRequis"
                                        title="Réservation réservée aux abonnés actifs">
                                        {{ slot.time_display }}
                                    </button>
                                    {% endif %}
                                    {% else %}
                                    <!-- Modal Connexion Requis -->
                                    <button type="button" class="gcal-slot-btn slot-open" data-bs-toggle="modal"
                                        data-bs-target="#modalConnexionRequis" title="Connectez-vous pour réserver">
                                        {{ slot.time_display }}
                                    </button>
                                    {% endif %}

                                    {% elif slot.status == 'user_reserved' %}
                                    <!-- Créneau Vert (Votre Réservation) -->
                                    <div class="gcal-slot-btn slot-user-reserved" title="{{ slot.reason }}">
                                        <i class="bi bi-check-circle-fill me-1"></i>{{ slot.time_display }}
                                    </div>

                                    {% else %}
                                    <!-- Créneau Rouge / Hachuré (Réservé ou Fermé) -->
                                    <div class="gcal-slot-btn slot-closed" title="{{ slot.reason }}">
                                        {{ slot.time_display }}
                                    </div>
                                    {% endif %}

                                    {% endfor %}
                                </div>

                            </div>
                            {% endfor %}

                        </div>
                    </div>

                    <!-- ========================================== -->
                    <!-- LÉGENDE DES COULEURS (Sous le Tableau 2) -->
                    <!-- ========================================== -->
                    <div class="mt-4 pt-3 border-top">
                        <h6 class="fw-bold mb-3 text-dark small text-uppercase tracking-wider">
                            <i class="bi bi-palette-fill text-primary me-2"></i>Légende et significations des couleurs :
                        </h6>
                        <div class="row row-cols-1 row-cols-md-3 g-3">
                            <div class="col">
                                <div class="p-2 border rounded-3 d-flex align-items-center gap-2 bg-light">
                                    <div class="gcal-legend-box box-open"></div>
                                    <div>
                                        <strong class="d-block small text-dark">Blanc : Créneau Ouvert</strong>
                                        <span class="text-muted" style="font-size: 0.75rem;">Disponible immédiatement à
                                            la réservation.</span>
                                    </div>
                                </div>
                            </div>
                            <div class="col">
                                <div class="p-2 border rounded-3 d-flex align-items-center gap-2 bg-light">
                                    <div class="gcal-legend-box box-closed"></div>
                                    <div>
                                        <strong class="d-block small text-danger">Rouge / Hachuré : Déjà Réservé /
                                            Fermé</strong>
                                        <span class="text-muted" style="font-size: 0.75rem;">Occupé par un tiers ou
                                            fermé par l'administration.</span>
                                    </div>
                                </div>
                            </div>
                            <div class="col">
                                <div class="p-2 border rounded-3 d-flex align-items-center gap-2 bg-light">
                                    <div class="gcal-legend-box box-user"></div>
                                    <div>
                                        <strong class="d-block small text-success">Vert Émeraude : Votre
                                            Réservation</strong>
                                        <span class="text-muted" style="font-size: 0.75rem;">Rendez-vous personnel que
                                            vous avez réservé.</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                </div>
            </div>

        </div>

    </div>
</div>

<!-- ========================================== -->
<!-- MODALES D'INTERACTION USER -->
<!-- ========================================== -->

<!-- Modale 1 : Connexion requise pour visiteur non connecté -->
<div class="modal fade" id="modalConnexionRequis" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content border-0 shadow rounded-4">
            <div class="modal-header border-0 bg-light rounded-top-4">
                <h5 class="modal-title fw-bold text-primary">
                    <i class="bi bi-person-lock me-2"></i>Connexion requise
                </h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Fermer"></button>
            </div>
            <div class="modal-body p-4 text-center">
                <i class="bi bi-shield-lock-fill text-primary fs-1 mb-3 d-block"></i>
                <h6 class="fw-bold mb-2">Veuillez vous connecter pour réserver un créneau</h6>
                <p class="text-muted small mb-4">
                    Tous les créneaux sont visibles par tout le monde sur la plateforme. Pour valider votre réservation
                    d'accompagnement, vous devez posséder un compte client GiniFollow.
                </p>
                <div class="d-grid gap-2 d-sm-flex justify-content-sm-center">
                    <a href="{% url 'connexion' %}?next={% url 'agenda' %}" class="btn btn-primary rounded-pill px-4">
                        <i class="bi bi-box-arrow-in-right me-1"></i> Se connecter
                    </a>
                    <a href="{% url 'inscription' %}" class="btn btn-outline-primary rounded-pill px-4">
                        Créer un compte
                    </a>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Modale 2 : Message Marketing Abonnement requis pour utilisateur sans abonnement actif -->
<div class="modal fade" id="modalAbonnementRequis" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content border-0 shadow-lg rounded-4">
            <div class="modal-header border-0 bg-primary text-white rounded-top-4">
                <h5 class="modal-title fw-bold text-white">
                    <i class="bi bi-star-fill text-warning me-2"></i>Débloquez vos réservations de créneaux
                </h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"
                    aria-label="Fermer"></button>
            </div>
            <div class="modal-body p-4">
                <div class="text-center mb-3">
                    <span class="badge bg-warning text-dark px-3 py-2 rounded-pill fw-bold mb-2">Accompagnement
                        VIP</span>
                    <h6 class="fw-bold text-dark fs-5">Un abonnement actif est requis pour réserver</h6>
                </div>
                <p class="text-muted small mb-3">
                    Cher(e) utilisateur(rice), pour réserver votre créneau individuel et bénéficier d'un échange
                    privilégié avec nos accompagnateurs spécialisés (par <strong>WhatsApp</strong> ou <strong>Google
                        Meet</strong>), vous devez disposer d'un abonnement mensuel actif.
                </p>
                <div class="p-3 bg-light rounded-3 mb-4">
                    <ul class="small text-dark mb-0 ps-3">
                        <li class="mb-1">Accès complet à vos créneaux d'accompagnement personnalisés (09h-22h30)</li>
                        <li class="mb-1">Suivi régulier et rappels automatiques par e-mail (30 min et 5 min avant)</li>
                        <li>Formule mensuelle transparente et renouvelable à tout moment</li>
                    </ul>
                </div>
                <div class="d-grid gap-2">
                    <a href="{% url 'tarifs' %}" class="btn btn-primary btn-lg rounded-pill fw-bold py-2">
                        <i class="bi bi-credit-card-fill me-2"></i> Accéder aux forfaits & procéder au paiement
                    </a>
                    <button type="button" class="btn btn-link text-muted btn-sm" data-bs-dismiss="modal">Consulter les
                        créneaux pour l'instant</button>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Modale 3 : Confirmation de réservation pour Abonné Actif (Choix WhatsApp / Google Meet) -->
<div class="modal fade" id="modalReserverCreneau" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content border-0 shadow-lg rounded-4">
            <form method="post" action="{% url 'agenda' %}">
                {% csrf_token %}
                <input type="hidden" name="slot_datetime" id="modal_slot_datetime" value="">

                <div class="modal-header border-0 bg-primary text-white rounded-top-4">
                    <h5 class="modal-title fw-bold text-white">
                        <i class="bi bi-calendar-check me-2"></i>Confirmer votre réservation
                    </h5>
                    <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"
                        aria-label="Fermer"></button>
                </div>

                <div class="modal-body p-4">

                    <div
                        class="p-3 bg-white border border-primary border-2 rounded-3 mb-4 text-center shadow-sm">
                        <span class="small text-secondary d-block mb-1 text-uppercase fw-bold tracking-wider">Créneau sélectionné :</span>
                        <strong id="modal_slot_display" class="fs-4 text-primary fw-extrabold d-block">--</strong>
                    </div>

                    <div class="mb-4">
                        <label for="id_mode_select" class="form-label fw-bold text-dark">
                            <i class="bi bi-headset me-1 text-primary"></i>Choisissez votre mode d'échange :
                        </label>
                        <select name="mode" id="id_mode_select" class="form-select form-select-lg rounded-3" required>
                            <option value="message" selected>💬 Messagerie / Appel WhatsApp (WhatsApp Business)</option>
                            <option value="video">📹 Appel Vidéo Google Meet (Visioconférence)</option>
                        </select>
                        <div class="form-text small mt-2">
                            Un e-mail de confirmation et un lien d'accès vous seront immédiatement envoyés, avec rappels
                            30 min et 5 min avant le rendez-vous.
                        </div>
                    </div>

                </div>

                <div class="modal-footer border-0 bg-light rounded-bottom-4 px-4 py-3">
                    <button type="button" class="btn btn-outline-secondary rounded-pill px-4"
                        data-bs-dismiss="modal">Annuler</button>
                    <button type="submit" class="btn btn-primary rounded-pill px-4 fw-bold">
                        <i class="bi bi-check2-circle me-1"></i> Valider ma réservation
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

{% endblock %}

{% block extra_js %}
<script>
    document.addEventListener('DOMContentLoaded', function () {
        var modalReserver = document.getElementById('modalReserverCreneau');
        if (modalReserver) {
            modalReserver.addEventListener('show.bs.modal', function (event) {
                var button = event.relatedTarget;
                var slotDt = button.getAttribute('data-slot-dt');
                var slotDisplay = button.getAttribute('data-slot-display');

                document.getElementById('modal_slot_datetime').value = slotDt;
                document.getElementById('modal_slot_display').textContent = slotDisplay;
            });
        }
    });
</script>
{% endblock %}