{% extends 'equipe/_layout.html.twig' %}

{% block title %}Galerie photos - {{ groupe.nom }}{% endblock %}

{% block page_title %}Galerie photos à publier - {{ groupe.nom }}{% endblock %}

{% block body %}
    <div class="card mb-5 mb-xl-8">
        <div class="card-header border-0 pt-6">
            <div class="card-title"><h3>Ajouter une photo</h3></div>
        </div>
        <div class="card-body pt-0">
            <form method="post" action="{{ path('equipe_photos_televerser', {groupeId: groupe.id}) }}" enctype="multipart/form-data">
                <input type="hidden" name="_csrf_token" value="{{ csrf_token('photos_televerser_' ~ groupe.id) }}">
                <div class="mb-4">
                    <label class="form-label">Fichier (JPEG/PNG/WebP, 8 Mo max) *</label>
                    <input type="file" name="fichier" accept="image/jpeg,image/png,image/webp" required class="form-control">
                </div>
                <fieldset class="border rounded p-4 mb-4">
                    <legend class="fs-6 fw-bold">Enfants visibles sur la photo</legend>
                    <div class="d-flex flex-wrap gap-4">
                        {% for enfant in groupe.enfants %}
                            {% if enfant.actif %}
                                <div class="form-check">
                                    <input class="form-check-input" type="checkbox" name="enfants[]" value="{{ enfant.id }}" id="photo-enfant-{{ enfant.id }}">
                                    <label class="form-check-label" for="photo-enfant-{{ enfant.id }}">{{ enfant.prenom }} {{ enfant.nom }}</label>
                                </div>
                            {% endif %}
                        {% endfor %}
                    </div>
                </fieldset>
                <button type="submit" class="btn btn-primary">Téléverser</button>
            </form>
        </div>
    </div>

    {% if lignes is empty %}
        <div class="card"><div class="card-body text-muted">Aucune photo pour ce groupe.</div></div>
    {% else %}
        {% for ligne in lignes %}
            <details class="card mb-4{% if ligne.bloquee %} border-danger{% endif %}">
                <summary class="card-header pt-4 pb-4 cursor-pointer d-flex align-items-center gap-4">
                    <img src="{{ ligne.lienMiniature }}" alt="{{ ligne.photo.nomOriginal }}" class="rounded" style="max-height:60px">
                    <span>
                        {{ ligne.photo.nomOriginal }} - {{ ligne.photo.dateAjout|date('d/m/Y H:i') }}
                        {% if ligne.photo.publiee %}
                            <span class="badge badge-light-success">Publiée</span>
                        {% elseif ligne.bloquee %}
                            <span class="badge badge-light-danger">Bloquée - consentement manquant</span>
                        {% else %}
                            <span class="badge badge-light">Non publiée</span>
                        {% endif %}
                    </span>
                </summary>
                <div class="card-body">
                    <img src="{{ ligne.lienConsultation }}" alt="{{ ligne.photo.nomOriginal }}" class="rounded mb-4" style="max-width:100%">

                    <p>
                        Enfants tagués :
                        {% for enfant in ligne.photo.enfantsTagges %}
                            {{ enfant.prenom }} {{ enfant.nom }}{% if not loop.last %}, {% endif %}
                        {% else %}
                            aucun
                        {% endfor %}
                    </p>

                    {% if ligne.bloquee %}
                        <div class="alert alert-danger">Au moins un enfant visible n'a pas de consentement "suivi quotidien" accordé - publication bloquée.</div>
                    {% endif %}

                    <div class="d-flex gap-2 mb-6">
                        <form method="post" action="{{ path(ligne.photo.publiee ? 'equipe_photos_depublier' : 'equipe_photos_publier', {groupeId: groupe.id, photoId: ligne.photo.id}) }}">
                            <input type="hidden" name="_csrf_token" value="{{ csrf_token((ligne.photo.publiee ? 'photos_depublier_' : 'photos_publier_') ~ ligne.photo.id) }}">
                            <button type="submit" class="btn {{ ligne.photo.publiee ? 'btn-light' : 'btn-light-success' }}" {% if not ligne.photo.publiee and ligne.bloquee %}disabled{% endif %}>{{ ligne.photo.publiee ? 'Dépublier' : 'Publier' }}</button>
                        </form>

                        <form method="post" action="{{ path('equipe_photos_supprimer', {groupeId: groupe.id, photoId: ligne.photo.id}) }}">
                            <input type="hidden" name="_csrf_token" value="{{ csrf_token('photos_supprimer_' ~ ligne.photo.id) }}">
                            <button type="submit" class="btn btn-light-danger">Supprimer</button>
                        </form>
                    </div>

                    <fieldset class="border rounded p-4">
                        <legend class="fs-6 fw-bold">Flouter ou recadrer une zone (pixels)</legend>
                        <div class="row g-5">
                            <div class="col-md-6">
                                <h5>Flouter</h5>
                                <form method="post" action="{{ path('equipe_photos_flouter', {groupeId: groupe.id, photoId: ligne.photo.id}) }}">
                                    <input type="hidden" name="_csrf_token" value="{{ csrf_token('photos_flouter_' ~ ligne.photo.id) }}">
                                    <div class="row g-2 mb-3">
                                        <div class="col-3"><label class="form-label">X</label><input type="number" name="x" min="0" required class="form-control form-control-sm"></div>
                                        <div class="col-3"><label class="form-label">Y</label><input type="number" name="y" min="0" required class="form-control form-control-sm"></div>
                                        <div class="col-3"><label class="form-label">Largeur</label><input type="number" name="largeur" min="1" required class="form-control form-control-sm"></div>
                                        <div class="col-3"><label class="form-label">Hauteur</label><input type="number" name="hauteur" min="1" required class="form-control form-control-sm"></div>
                                    </div>
                                    <div class="mb-3">
                                        <label class="form-label">Enfant à retirer du taggage (facultatif)</label>
                                        <select name="enfant_retire_id" class="form-select form-select-sm">
                                            <option value="">- Aucun -</option>
                                            {% for enfant in ligne.photo.enfantsTagges %}
                                                <option value="{{ enfant.id }}">{{ enfant.prenom }} {{ enfant.nom }}</option>
                                            {% endfor %}
                                        </select>
                                    </div>
                                    <button type="submit" class="btn btn-light btn-sm">Flouter cette zone</button>
                                </form>
                            </div>
                            <div class="col-md-6">
                                <h5>Recadrer</h5>
                                <form method="post" action="{{ path('equipe_photos_recadrer', {groupeId: groupe.id, photoId: ligne.photo.id}) }}">
                                    <input type="hidden" name="_csrf_token" value="{{ csrf_token('photos_recadrer_' ~ ligne.photo.id) }}">
                                    <div class="row g-2 mb-3">
                                        <div class="col-3"><label class="form-label">X</label><input type="number" name="x" min="0" required class="form-control form-control-sm"></div>
                                        <div class="col-3"><label class="form-label">Y</label><input type="number" name="y" min="0" required class="form-control form-control-sm"></div>
                                        <div class="col-3"><label class="form-label">Largeur</label><input type="number" name="largeur" min="1" required class="form-control form-control-sm"></div>
                                        <div class="col-3"><label class="form-label">Hauteur</label><input type="number" name="hauteur" min="1" required class="form-control form-control-sm"></div>
                                    </div>
                                    <div class="mb-3">
                                        <label class="form-label">Enfant à retirer du taggage (facultatif)</label>
                                        <select name="enfant_retire_id" class="form-select form-select-sm">
                                            <option value="">- Aucun -</option>
                                            {% for enfant in ligne.photo.enfantsTagges %}
                                                <option value="{{ enfant.id }}">{{ enfant.prenom }} {{ enfant.nom }}</option>
                                            {% endfor %}
                                        </select>
                                    </div>
                                    <button type="submit" class="btn btn-light btn-sm">Recadrer sur cette zone</button>
                                </form>
                            </div>
                        </div>
                    </fieldset>
                </div>
            </details>
        {% endfor %}
    {% endif %}
{% endblock %}