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

{% block title %}Fil du jour - {{ enfant.prenom }} {{ enfant.nom }}{% endblock %}

{% block page_title %}Fil du jour - {{ fil.date|date('d/m/Y') }}{% endblock %}

{% block toolbar_actions %}
    <a href="{{ path('parents_espace_fil', {enfantId: enfant.id, date: fil.date|date_modify('-1 day')|date('Y-m-d')}) }}" class="btn btn-light btn-sm">&larr; Jour précédent</a>
    <a href="{{ path('parents_espace_fil', {enfantId: enfant.id, date: fil.date|date_modify('+1 day')|date('Y-m-d')}) }}" class="btn btn-light btn-sm">Jour suivant &rarr;</a>
{% endblock %}

{% block body %}
    <div class="card">
        <div class="card-header border-0 pt-6">
            <ul class="nav nav-line-tabs nav-line-tabs-2x nav-stretch fw-semibold">
                <li class="nav-item">
                    <a class="nav-link active" data-bs-toggle="tab" href="#tab_alimentation">Alimentation</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" data-bs-toggle="tab" href="#tab_sommeil">Sommeil / Repos</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" data-bs-toggle="tab" href="#tab_sante">Hygiène &amp; Santé</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" data-bs-toggle="tab" href="#tab_activites">Activités pédagogiques et ludiques</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" data-bs-toggle="tab" href="#tab_socialisation">Socialisation et comportement</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" data-bs-toggle="tab" href="#tab_commentaires">Commentaires de l'éducatrice</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" data-bs-toggle="tab" href="#tab_photos">Galerie photos</a>
                </li>
            </ul>
        </div>
        <div class="card-body">
            <div class="tab-content">
                {# ---------- Alimentation ---------- #}
                <div class="tab-pane fade show active" id="tab_alimentation">
                    <div class="d-flex flex-column gap-2">
                        {% for repas in fil.repas %}
                            <div class="border border-warning border-2 rounded p-3 bg-light-warning">
                                <div>{{ repas.dateHeure|date('H:i') }} - {{ repas.moment.label }} - {{ repas.quantiteMangee.label }}{% if repas.menu %} ({{ repas.menu }}){% endif %}{% if repas.commentaire %} - {{ repas.commentaire }}{% endif %}</div>
                                {% if repas.particularite %}
                                    <div class="alert alert-warning py-2 px-3 mt-2 mb-0">{{ repas.particularite }}</div>
                                {% endif %}
                            </div>
                        {% else %}
                            <div class="text-muted">Aucun repas saisi ce jour.</div>
                        {% endfor %}
                    </div>
                </div>

                {# ---------- Sommeil / Repos ---------- #}
                <div class="tab-pane fade" id="tab_sommeil">
                    <div class="d-flex flex-column gap-2">
                        {% for sieste in fil.siestes %}
                            <div class="border border-info border-2 rounded p-3 bg-light-info">{{ sieste.dateHeure|date('H:i') }}{% if sieste.heureFin %} – {{ sieste.heureFin|date('H:i') }}{% endif %} - {{ sieste.qualite.label }}{% if sieste.commentaire %} - {{ sieste.commentaire }}{% endif %}</div>
                        {% else %}
                            <div class="text-muted">Aucune sieste saisie ce jour.</div>
                        {% endfor %}
                    </div>
                </div>

                {# ---------- Hygiène & Santé ---------- #}
                <div class="tab-pane fade" id="tab_sante">
                    <div class="mb-4">
                        <span class="badge badge-light-primary fs-7">{{ fil.nombreChanges }} change(s) aujourd'hui</span>
                    </div>
                    <div class="d-flex flex-column gap-2">
                        {% for soin in fil.soins %}
                            <div class="border border-danger border-2 rounded p-3 bg-light-danger">
                                <div>{{ soin.dateHeure|date('H:i') }} - {{ soin.type.label }}{% if soin.commentaire %} - {{ soin.commentaire }}{% endif %}</div>
                                {% if soin.particularite %}
                                    <div class="alert alert-warning py-2 px-3 mt-2 mb-0">{{ soin.particularite }}</div>
                                {% endif %}
                            </div>
                        {% else %}
                            <div class="text-muted">Aucun soin saisi ce jour.</div>
                        {% endfor %}
                    </div>
                </div>

                {# ---------- Activités pédagogiques et ludiques ---------- #}
                <div class="tab-pane fade" id="tab_activites">
                    <div class="d-flex flex-column gap-2">
                        {% for activite in fil.activites %}
                            <div class="border border-success border-2 rounded p-3 bg-light-success">
                                {{ activite.dateHeure|date('H:i') }}
                                {% if activite.theme %} - <strong>{{ activite.theme.libelle }}</strong>{% endif %}
                                {% if activite.descriptionEffective %} - {{ activite.descriptionEffective }}{% endif %}
                                {% if activite.participation %} - {{ activite.participation.label }}{% endif %}
                            </div>
                        {% else %}
                            <div class="text-muted">Aucune activité saisie ce jour.</div>
                        {% endfor %}
                    </div>
                </div>

                {# ---------- Socialisation et comportement ---------- #}
                <div class="tab-pane fade" id="tab_socialisation">
                    <div class="d-flex flex-column gap-2">
                        {% for humeur in fil.humeurs %}
                            <div class="border border-primary border-2 rounded p-3 bg-light-primary">
                                {{ humeur.dateHeure|date('H:i') }} - {{ humeur.humeur.label }}
                                {% if humeur.relationEnfants %} - Avec les autres enfants : {{ humeur.relationEnfants.label }}{% endif %}
                                {% if humeur.relationAdultes %} - Avec les adultes : {{ humeur.relationAdultes.label }}{% endif %}
                            </div>
                        {% else %}
                            <div class="text-muted">Aucune note d'humeur saisie ce jour.</div>
                        {% endfor %}
                    </div>
                </div>

                {# ---------- Commentaires de l'éducatrice ---------- #}
                <div class="tab-pane fade" id="tab_commentaires">
                    <div class="d-flex flex-column gap-3">
                        {% for synthese in fil.syntheseJournalieres %}
                            <div class="border border-primary border-2 rounded p-3 bg-light-primary">
                                <div class="text-muted fs-8 mb-2">{{ synthese.dateSaisie|date('H:i') }}</div>
                                {% if synthese.observations %}<p class="mb-2"><strong>Observations :</strong> {{ synthese.observations }}</p>{% endif %}
                                {% if synthese.pointsAttention %}<p class="mb-2"><strong>Points d'attention :</strong> {{ synthese.pointsAttention }}</p>{% endif %}
                                {% if synthese.motsEncouragement %}<p class="mb-0"><strong>Mots d'encouragement :</strong> {{ synthese.motsEncouragement }}</p>{% endif %}
                            </div>
                        {% else %}
                            <div class="text-muted">Aucun commentaire saisi ce jour.</div>
                        {% endfor %}
                    </div>
                </div>

                {# ---------- Galerie photos ---------- #}
                <div class="tab-pane fade" id="tab_photos">
                    {% if photos is empty %}
                        <div class="text-muted">Aucune photo publiée pour le moment.</div>
                    {% else %}
                        <div class="row g-4">
                            {% for ligne in photos %}
                                <div class="col-md-3 col-sm-4 col-6">
                                    <a href="{{ ligne.lienConsultation }}" target="_blank" rel="noopener" class="d-block">
                                        <img src="{{ ligne.lienMiniature }}" alt="Photo du {{ ligne.photo.dateAjout|date('d/m/Y') }}" class="rounded w-100" style="aspect-ratio:1;object-fit:cover">
                                    </a>
                                    <div class="text-muted fs-7 mt-1">{{ ligne.photo.dateAjout|date('d/m/Y') }}</div>
                                </div>
                            {% endfor %}
                        </div>
                    {% endif %}

                    {% if videos is not empty %}
                        <div class="d-flex flex-column gap-3 mt-6">
                            {% for ligne in videos %}
                                <div class="d-flex align-items-center justify-content-between border rounded p-3">
                                    <div class="d-flex align-items-center gap-3">
                                        <i class="ki-outline ki-film fs-2x text-muted"></i>
                                        <div>{{ ligne.video.nomOriginal }}</div>
                                    </div>
                                    <a href="{{ ligne.lienTelechargement }}" class="btn btn-light-primary btn-sm">Télécharger</a>
                                </div>
                            {% endfor %}
                        </div>
                    {% endif %}

                    <a href="{{ path('parents_espace_photos', {enfantId: enfant.id}) }}" class="btn btn-light-primary btn-sm mt-4">Voir toute la galerie &rarr;</a>
                </div>
            </div>
        </div>
    </div>
{% endblock %}