{% extends 'base.html.twig' %}

{% block title %}Planning des rendez-vous - {{ beneficiaire.nom }} {{ beneficiaire.prenom }}{% endblock %}

{% block body %}
    {% include '_flash_messages.html.twig' %}
    <div class="d-flex">
        <!-- Include de la sidebar -->
        {% include '_sidebar.html.twig' with {
            'beneficiaire': beneficiaire,
            'sectionActive': 'planning'
        } %}

        <!-- Contenu principal avec marge pour la sidebar -->
        <div class="main-content">
            <!-- Header avec thème cohérent -->
            <div class="dossier-header">
                <div class="d-flex justify-content-between align-items-center">
                    <!-- Section gauche : Nom bénéficiaire -->
                    <div class="d-flex align-items-center">
                        <div class="beneficiaire-info text-header">
                            <h4 class="mb-0">
                                {{ beneficiaire.civilite ? beneficiaire.civilite|lower|title ~ ' ' : '' }}
                                {{ beneficiaire.nom }} {{ beneficiaire.prenom }}
                            </h4>
                            <small class="sous-titre">
                                Planning des rendez-vous
                            </small>
                        </div>
                    </div>
                    <div class="header-actions">
                        <a href="{{ path('app_planning_print', {beneficiaireId: beneficiaire.id}) }}" class="btn-action btn-info" target="_blank">
                            <i class="fas fa-print"></i> Imprimer
                        </a>
                    </div>
                </div>
            </div>

            <!-- Contenu de la section avec container -->
            <div class="container-fluid p-4">

                <form method="post" action="{{ path('app_planning_save', {beneficiaireId: beneficiaire.id}) }}">
                    <div class="card mb-4">
                        <div class="card-header text-white purple">
                            <h5 class="mb-0"><i class="fa-solid fa-table-list me-2"></i> Liste des rendez-vous</h5>
                        </div>
                        <div class="card-body p-0">
                            <div class="table-responsive">
                                <table class="table table-bordered mb-0 planning-table">
                                    <thead class="table-header">
                                        <tr>
                                            <th style="width: 6%"><i class="fa-solid fa-calendar-day me-1"></i> Mois</th>
                                            <th style="width: 24%"><i class="fa-solid fa-tags me-1"></i> Type de rendez-vous</th>
                                            <th style="width: 12%"><i class="fa-solid fa-calendar-days me-1"></i> Dates</th>
                                            <th style="width: 12%"><i class="fa-solid fa-clock me-1"></i> Heures</th>
                                            <th style="width: 16%"><i class="fa-solid fa-user me-1"></i> Qui ?</th>
                                            <th style="width: 8%" class="text-center"><i class="fa-solid fa-calendar-check me-1"></i> Présence</th>
                                            <th style="width: 22%"><i class="fas fa-comment-dots me-1"></i> Commentaires</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        {% for mois, rendezVous in planning %}
                                            {% set nbRdv = rendezVous|length %}
                                            {% for key, rdv in rendezVous %}
                                                <tr>
                                                    {% if key == 0 %}
                                                        <td rowspan="{{ nbRdv }}" class="align-middle text-center bg-light">
                                                            <div class="date-badge p-3">
                                                            <strong>Mois {{ mois }}</strong>
                                                            </div>
                                                        </td>
                                                    {% endif %}
                                                    <td>{{ rdv.typeRdv }}</td>
                                                    <td>
                                                        <input type="hidden" name="rdv_{{ rdv.id }}" value="1">
                                                        <div class="position-relative">
                                                            <i class="fa-regular fa-calendar-days position-absolute top-50 start-0 translate-middle-y ms-2 text-muted small" style="pointer-events: none;"></i>
                                                            <input type="text"
                                                                   name="date_{{ rdv.id }}"
                                                                   class="form-control form-control-sm ps-4"
                                                                   value="{{ rdv.dateRdv ? rdv.dateRdv|date('Y-m-d') : '' }}"
                                                                   data-controller="flatpickr"
                                                                   data-flatpickr-target="input"
                                                                   data-flatpickr-mode-value="single"
                                                                   style="cursor: pointer;"
                                                                   placeholder="JJ/MM/AAAA">
                                                        </div>
                                                    </td>
                                                    <td>
                                                        <select name="horaire_{{ rdv.id }}" class="form-select form-select-sm">
                                                            <option value="">-- Choisir --</option>
                                                            {% for horaire in horaires %}
                                                                {% set horaireValue = horaire.debut ~ '-' ~ horaire.fin %}
                                                                {% set selected = (rdv.heureDebut == horaire.debut and rdv.heureFin == horaire.fin) %}
                                                                <option value="{{ horaireValue }}" {{ selected ? 'selected' : '' }}>
                                                                    {{ horaire.debut }} à {{ horaire.fin }}
                                                                </option>
                                                            {% endfor %}
                                                        </select>
                                                    </td>
                                                    <td>
                                                        <select name="utilisateur_{{ rdv.id }}" class="form-select form-select-sm">
                                                            <option value="">-- Choisir --</option>
                                                            {% for user in utilisateurs %}
                                                                <option value="{{ user.id }}" {{ rdv.utilisateurAssigne and rdv.utilisateurAssigne.id == user.id ? 'selected' : '' }}>
                                                                    {{ user.prenom }} {{ user.nom }}
                                                                </option>
                                                            {% endfor %}
                                                        </select>
                                                    </td>
                                                    <td class="text-center align-middle">
                                                        <input type="checkbox"
                                                               name="presence_{{ rdv.id }}"
                                                               class="form-check-input presence-checkbox"
                                                               value="1"
                                                               {{ rdv.presence ? 'checked' : '' }}>
                                                    </td>
                                                    <td>
                                                        <input type="text" 
                                                               name="notes_{{ rdv.id }}" 
                                                               class="form-control form-control-sm" 
                                                               value="{{ rdv.notes }}"
                                                               placeholder="...">
                                                    </td>
                                                </tr>
                                            {% endfor %}
                                        {% endfor %}
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>

                    <div class="d-flex justify-content-between align-items-center mb-4">
                        <button type="submit" class="btn btn-save-inline mb-0">
                            <i class="fas fa-save me-2"></i> Sauvegarder
                        </button>

                        <button type="button" class="btn-action btn-danger" data-bs-toggle="modal" data-bs-target="#resetModal">
                            <i class="fas fa-redo"></i> Réinitialiser le planning
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <!-- Modal de confirmation pour réinitialiser -->
    <div class="modal fade" id="resetModal" tabindex="-1" aria-labelledby="resetModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="resetModalLabel">Confirmer la réinitialisation</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    Êtes-vous sûr de vouloir réinitialiser le planning ? Toutes les données saisies (dates, heures, utilisateurs) seront supprimées.
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Annuler</button>
                    <form method="post" action="{{ path('app_planning_reset', {beneficiaireId: beneficiaire.id}) }}">
                        <input type="hidden" name="_token" value="{{ csrf_token('reset_planning_' ~ beneficiaire.id) }}">
                        <button type="submit" class="btn btn-danger">Réinitialiser</button>
                    </form>
                </div>
            </div>
        </div>
    </div>
{% endblock %}