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

{% block title %}Liste des projets{% endblock %}

{% block body %}
<div class="d-flex align-items-center justify-content-between mb-4">
    <h1 class="display-5 fw-bold mb-0">Projets</h1>
    <button class="btn btn-primary btn-lg shadow" data-bs-toggle="modal" data-bs-target="#addProjetModal">
        <i class="bi bi-plus-lg me-1"></i> Nouveau projet
    </button>
</div>

<div class="table-responsive shadow-sm rounded">
    <table class="table table-hover align-middle mb-0">
        <thead class="table-light">
            <tr>
                <th>Nom</th>
                <th>Commentaire</th>
                <th>Date de lancement</th>
                <th>Date de clôture</th>
                <th>Statut</th>
                <th>Actions</th>
            </tr>
        </thead>
        <tbody>
        {% for projet in projets %}
            <tr>
                <td><span class="fw-semibold text-primary">{{ projet.nom }}</span></td>
                <td>{{ projet.commentaire }}</td>
                <td>{{ projet.dateLancement ? projet.dateLancement|date('d/m/Y') : '' }}</td>
                <td>{{ projet.dateCloture ? projet.dateCloture|date('d/m/Y') : '' }}</td>
                <td><span class="badge bg-info text-dark">{{ projet.statut }}</span></td>
                <td>
                    <a class="btn btn-sm btn-outline-primary me-1" href="{{ path('projet_show', {id: projet.id}) }}">
                        <i class="bi bi-eye"></i> Détails
                    </a>
                    <button class="btn btn-sm btn-outline-secondary me-1" data-bs-toggle="modal" data-bs-target="#editProjetModal{{ projet.id }}">
                        <i class="bi bi-pencil"></i> Modifier
                    </button>
                    <form method="post" action="{{ path('projet_delete', {id: projet.id}) }}" style="display:inline-block" data-contrib-count="{{ projet.contributions|length }}">
                        <input type="hidden" name="_token" value="{{ csrf_token('delete' ~ projet.id) }}">
                        <input type="hidden" name="_force" value="0">
                        <button class="btn btn-sm btn-danger btn-delete-projet"><i class="bi bi-trash"></i> Supprimer</button>
                    </form>
                    <div class="modal fade" id="editProjetModal{{ projet.id }}" tabindex="-1" aria-hidden="true">
                        <div class="modal-dialog">
                            <div class="modal-content">
                                <form method="post" action="{{ path('projet_edit', {id: projet.id}) }}">
                                    <input type="hidden" name="_token" value="{{ csrf_token('edit_projet_' ~ projet.id) }}">
                                    <div class="modal-header">
                                        <h5 class="modal-title">Modifier le projet</h5>
                                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                                    </div>
                                    <div class="modal-body">
                                        <div class="mb-2">
                                            <label class="form-label">Nom</label>
                                            <input type="text" name="nom" class="form-control" value="{{ projet.nom }}" required maxlength="50">
                                        </div>
                                        <div class="mb-2">
                                            <label class="form-label">Commentaire</label>
                                            <textarea name="commentaire" class="form-control">{{ projet.commentaire }}</textarea>
                                        </div>
                                        <div class="mb-2">
                                            <label class="form-label">Date de lancement</label>
                                            <input type="date" name="dateLancement" class="form-control" value="{{ projet.dateLancement ? projet.dateLancement|date('Y-m-d') : '' }}">
                                        </div>
                                        <div class="mb-2">
                                            <label class="form-label">Date de clôture</label>
                                            <input type="date" name="dateCloture" class="form-control" value="{{ projet.dateCloture ? projet.dateCloture|date('Y-m-d') : '' }}">
                                        </div>
                                        <div class="mb-2">
                                            <label class="form-label">Statut</label>
                                            <select name="statut" class="form-select" required>
                                                <option value="en_attente" {% if projet.statut == 'en_attente' %}selected{% endif %}>En attente</option>
                                                <option value="en_cours" {% if projet.statut == 'en_cours' %}selected{% endif %}>En cours</option>
                                                <option value="termine" {% if projet.statut == 'termine' %}selected{% endif %}>Terminé</option>
                                                <option value="annule" {% if projet.statut == 'annule' %}selected{% endif %}>Annulé</option>
                                            </select>
                                        </div>
                                    </div>
                                    <div class="modal-footer">
                                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Annuler</button>
                                        <button type="submit" class="btn btn-primary">Enregistrer</button>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </td>
            </tr>
        {% else %}
            <tr>
                <td colspan="6" class="text-center text-muted">Aucun projet trouvé.</td>
            </tr>
        {% endfor %}
        </tbody>
    </table>
</div>
{% endblock %}

{% block bottom_javascripts %}
    {{ parent() }}
    <!-- Modal ajout projet -->
    <div class="modal fade" id="addProjetModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <form method="post" action="{{ path('projet_add') }}">
                    <div class="modal-header">
                        <h5 class="modal-title">Ajouter un projet</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body">
                        <input type="hidden" name="_token" value="{{ csrf_token('projet_add') }}">
                        <div class="mb-2">
                            <label class="form-label">Nom</label>
                            <input type="text" name="nom" class="form-control" required maxlength="50">
                        </div>
                        <div class="mb-2">
                            <label class="form-label">Commentaire</label>
                            <textarea name="commentaire" class="form-control"></textarea>
                        </div>
                        <div class="mb-2">
                            <label class="form-label">Date de lancement</label>
                            <input type="date" name="dateLancement" class="form-control">
                        </div>
                        <div class="mb-2">
                            <label class="form-label">Date de clôture</label>
                            <input type="date" name="dateCloture" class="form-control">
                        </div>
                        <div class="mb-2">
                            <label class="form-label">Statut</label>
                            <select name="statut" class="form-select" required>
                                <option value="en_attente">En attente</option>
                                <option value="en_cours">En cours</option>
                                <option value="termine">Terminé</option>
                                <option value="annule">Annulé</option>
                            </select>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Annuler</button>
                        <button type="submit" class="btn btn-primary">Ajouter</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
    <script>
        (function(){
            document.querySelectorAll('form[data-contrib-count]').forEach(function(form){
                var btn = form.querySelector('.btn-delete-projet');
                btn.addEventListener('click', function(ev){
                    ev.preventDefault();
                    var count = parseInt(form.dataset.contribCount || '0', 10);
                    var proceed = false;
                    if (count > 0) {
                        proceed = confirm('Ce projet contient ' + count + ' contribution(s). La suppression entrainera la perte des contributions. Confirmer la suppression ?');
                        if (proceed) {
                            form.querySelector('input[name="_force"]').value = '1';
                        }
                    } else {
                        proceed = confirm('Confirmer la suppression du projet ?');
                    }
                    if (proceed) {
                        form.submit();
                    }
                });
            });
        })();
    </script>
{% endblock %}