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

{% block title %}{{ enfant.nomComplet }} | {{ ecole ? ecole.nom : 'SALSABIL Madrassas' }}{% endblock %}
{% block portal_title %}{{ enfant.nomComplet }}{% endblock %}
{% block portal_subtitle %}Suivi publié, informations et documents de l’enfant.{% endblock %}

{% block content %}
<style>
    .parent-child-shell{display:grid;gap:1.15rem}.parent-child-hero{display:grid;grid-template-columns:104px minmax(0,1fr) auto;gap:1rem;align-items:center;padding:1.1rem;border:1px solid var(--portal-border,rgba(15,23,42,.12));border-radius:1.65rem;background:linear-gradient(135deg,color-mix(in srgb,var(--portal-primary,#006b3f) 9%,var(--portal-surface,#fff)),var(--portal-surface,#fff));box-shadow:0 18px 46px rgba(15,23,42,.08)}
    .parent-child-photo{width:96px;height:96px;border-radius:24px;border:1px solid var(--portal-border,rgba(15,23,42,.12));background:var(--portal-surface-soft,#f8fafc);display:grid;place-items:center;overflow:hidden;box-shadow:0 14px 30px rgba(15,23,42,.10)}.parent-child-photo img{width:100%;height:100%;object-fit:cover}.parent-child-photo .material-symbols-outlined{font-size:3rem;color:var(--portal-muted,#64748b)}
    .parent-child-title h2{margin:0;font-size:clamp(1.45rem,4vw,2.45rem);font-weight:950;letter-spacing:-.04em;color:var(--portal-text,#0f172a)}.parent-child-title p{margin:.35rem 0 0;color:var(--portal-muted,#64748b);font-weight:800;line-height:1.55}.parent-child-tags{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:.7rem}.parent-child-tag{display:inline-flex;align-items:center;gap:.25rem;padding:.42rem .65rem;border-radius:999px;background:color-mix(in srgb,var(--portal-primary,#006b3f) 10%,var(--portal-surface,#fff));border:1px solid color-mix(in srgb,var(--portal-primary,#006b3f) 18%,transparent);font-weight:850;font-size:.82rem;color:var(--portal-text,#0f172a)}
    .parent-child-quick{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.75rem}.parent-mini-card{padding:1rem;border:1px solid var(--portal-border,rgba(15,23,42,.12));border-radius:1.25rem;background:var(--portal-surface,#fff);box-shadow:0 10px 28px rgba(15,23,42,.055)}.parent-mini-card span{display:block;font-size:.72rem;text-transform:uppercase;letter-spacing:.06em;font-weight:950;color:var(--portal-muted,#64748b)}.parent-mini-card strong{display:block;margin-top:.28rem;font-size:1.05rem;color:var(--portal-text,#0f172a)}
    .parent-info-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.7rem}.parent-info-item{padding:.85rem;border:1px solid var(--portal-border,rgba(15,23,42,.10));border-radius:1rem;background:color-mix(in srgb,var(--portal-surface-soft,#f8fafc) 86%,transparent)}.parent-info-item span{display:block;font-size:.7rem;text-transform:uppercase;letter-spacing:.06em;font-weight:950;color:var(--portal-muted,#64748b)}.parent-info-item strong{display:block;margin-top:.22rem;color:var(--portal-text,#0f172a)}
    .parent-suivi-filter{display:grid;grid-template-columns:minmax(220px,1fr) auto auto auto;gap:.6rem;align-items:end;margin-bottom:1rem}.parent-suivi-filter .portal-btn{min-height:42px}.parent-suivi-history{display:flex;gap:.45rem;overflow-x:auto;padding:.25rem 0 .45rem;scrollbar-width:thin}.parent-suivi-history a{flex:0 0 auto;padding:.55rem .75rem;border-radius:999px;border:1px solid var(--portal-border,rgba(15,23,42,.12));text-decoration:none;font-weight:850;color:var(--portal-text,#0f172a);background:var(--portal-surface,#fff)}.parent-suivi-history a.active{background:var(--portal-primary,#006b3f);color:#fff;border-color:var(--portal-primary,#006b3f)}
    .parent-suivi-day{border:1px solid var(--portal-border,rgba(15,23,42,.12));border-radius:1.35rem;background:var(--portal-surface,#fff);overflow:hidden;box-shadow:0 12px 30px rgba(15,23,42,.06)}.parent-suivi-day-head{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:1rem;padding:1rem;border-bottom:1px solid var(--portal-border,rgba(15,23,42,.10));background:color-mix(in srgb,var(--portal-primary,#006b3f) 6%,var(--portal-surface,#fff))}.parent-suivi-day-head h3{margin:0;font-size:1.08rem;font-weight:950}.parent-suivi-day-head small{color:var(--portal-muted,#64748b);font-weight:750}.parent-suivi-score{text-align:right}.parent-suivi-score strong{display:block;font-size:1.1rem;color:var(--portal-text,#0f172a)}.parent-suivi-score small{color:var(--portal-muted,#64748b)}
    .parent-suivi-lines{display:grid;gap:.7rem;padding:1rem}.parent-suivi-line{display:grid;grid-template-columns:minmax(150px,.34fr) minmax(0,1fr) minmax(90px,.16fr);gap:.8rem;align-items:start;padding:.85rem;border:1px solid var(--portal-border,rgba(15,23,42,.10));border-radius:1rem;background:color-mix(in srgb,var(--portal-surface-soft,#f8fafc) 86%,transparent)}.parent-suivi-line-title{font-weight:950;color:var(--portal-text,#0f172a)}.parent-suivi-line small{color:var(--portal-muted,#64748b)}.parent-suivi-line-score{text-align:right;white-space:nowrap}.parent-suivi-line-score strong{display:block;font-size:1.05rem;color:var(--portal-primary,#006b3f)}.parent-suivi-empty{padding:1rem;border:1px dashed var(--portal-border,rgba(15,23,42,.12));border-radius:1rem;color:var(--portal-muted,#64748b);background:var(--portal-surface,#fff)}
    [data-theme="dark"] .parent-child-hero,[data-theme="dark"] .parent-mini-card,[data-theme="dark"] .parent-suivi-day,[data-theme="dark"] .parent-suivi-history a{background:var(--portal-surface,#10231f);border-color:rgba(255,255,255,.12);box-shadow:0 16px 38px rgba(0,0,0,.26)}[data-theme="dark"] .parent-info-item,[data-theme="dark"] .parent-suivi-line{background:rgba(255,255,255,.035);border-color:rgba(255,255,255,.10)}
    @media(max-width:900px){.parent-child-hero{grid-template-columns:86px 1fr}.parent-child-photo{width:80px;height:80px}.parent-child-quick{grid-template-columns:1fr}.parent-info-grid{grid-template-columns:1fr}.parent-suivi-filter{grid-template-columns:1fr 1fr}.parent-suivi-filter .date-field{grid-column:1/-1}.parent-suivi-line{grid-template-columns:1fr}.parent-suivi-line-score{text-align:left}.parent-child-hero .portal-btn{grid-column:1/-1;justify-content:center}}
    @media(max-width:560px){.parent-child-hero{grid-template-columns:74px 1fr;padding:.85rem;border-radius:1.25rem}.parent-child-photo{width:68px;height:68px;border-radius:18px}.parent-child-title h2{font-size:1.32rem}.parent-suivi-filter{grid-template-columns:1fr}.parent-suivi-day-head{grid-template-columns:1fr}.parent-suivi-score{text-align:left}}
</style>

<section class="parent-child-shell">
    <section class="parent-child-hero">
        <div class="parent-child-photo">
            {% if enfant.photoName %}
                <img src="/{{ enfant.photoPath }}" alt="Photo {{ enfant.nomComplet }}">
            {% else %}
                <span class="material-symbols-outlined">account_circle</span>
            {% endif %}
        </div>
        <div class="parent-child-title">
            <p class="portal-label mb-1">Fiche enfant</p>
            <h2>{{ enfant.nomComplet }}</h2>
            <p>{{ enfant.matricule ?: enfant.matriculeTemporaire ?: 'Matricule en attente' }}{% if enfant.classe %} · {{ enfant.classe.nom }}{% endif %}{% if enfant.dateNaissance %} · Né(e) le {{ enfant.dateNaissance|date('d/m/Y') }}{% endif %}</p>
            <div class="parent-child-tags">
                <span class="parent-child-tag"><span class="material-symbols-outlined" style="font-size:1rem">family_restroom</span>{{ lien.lienParente ?: 'Tuteur' }}</span>
                {% if enfant.section %}<span class="parent-child-tag">{{ enfant.section.nom }}</span>{% endif %}
                {% if enfant.niveau %}<span class="parent-child-tag">{{ enfant.niveau.nom }}</span>{% endif %}
            </div>
        </div>
        <a class="portal-btn portal-btn-secondary" href="{{ path('parent_dashboard') }}"><span class="material-symbols-outlined">arrow_back</span>Accueil</a>
    </section>

    <section class="parent-child-quick">
        <article class="parent-mini-card"><span>Matricule</span><strong>{{ enfant.matricule ?: enfant.matriculeTemporaire ?: '-' }}</strong></article>
        <article class="parent-mini-card"><span>Classe</span><strong>{{ enfant.classe ? enfant.classe.nom : '-' }}</strong></article>
        <article class="parent-mini-card"><span>Relation</span><strong>{{ lien.lienParente ?: 'Tuteur' }}</strong></article>
    </section>

    <section class="portal-card">
        <div class="portal-section-title"><div><h2>Informations générales</h2><p>Données principales de l’enfant.</p></div></div>
        <div class="parent-info-grid">
            <div class="parent-info-item"><span>Sexe</span><strong>{{ enfant.sexe ?: '-' }}</strong></div>
            <div class="parent-info-item"><span>Naissance</span><strong>{{ enfant.dateNaissance ? enfant.dateNaissance|date('d/m/Y') : '-' }}{% if enfant.lieuNaissance %} à {{ enfant.lieuNaissance }}{% endif %}</strong></div>
            <div class="parent-info-item"><span>Section</span><strong>{{ enfant.section ? enfant.section.nom : '-' }}</strong></div>
            <div class="parent-info-item"><span>Niveau</span><strong>{{ enfant.niveau ? enfant.niveau.nom : '-' }}</strong></div>
        </div>
    </section>

    <section class="portal-card portal-card-soft">
        <div class="portal-section-title"><div><h2>Suivi de la journée</h2><p>Choisissez une date pour consulter le suivi publié par l’école.</p></div></div>
        <form method="get" class="parent-suivi-filter">
            <div class="date-field">
                <label class="portal-label" for="date-suivi">Date du suivi</label>
                <input id="date-suivi" class="form-control" type="date" name="date" value="{{ selectedDate is defined ? selectedDate|date('Y-m-d') : 'now'|date('Y-m-d') }}">
            </div>
            <a class="portal-btn portal-btn-secondary" href="{{ path('parent_child_show', {id: enfant.id, date: previousDate is defined ? previousDate|date('Y-m-d') : 'now'|date_modify('-1 day')|date('Y-m-d')}) }}">← Veille</a>
            <button class="portal-btn portal-btn-primary" type="submit">Afficher</button>
            <a class="portal-btn portal-btn-secondary" href="{{ path('parent_child_show', {id: enfant.id, date: nextDate is defined ? nextDate|date('Y-m-d') : 'now'|date_modify('+1 day')|date('Y-m-d')}) }}">Demain →</a>
        </form>

        {% if latestSuivis is defined and latestSuivis|length > 0 %}
            <div class="mb-3">
                <span class="portal-label">Derniers suivis publiés</span>
                <nav class="parent-suivi-history" aria-label="Derniers suivis publiés">
                    {% for item in latestSuivis %}
                        <a class="{% if selectedDate is defined and item.dateSuivi|date('Y-m-d') == selectedDate|date('Y-m-d') %}active{% endif %}" href="{{ path('parent_child_show', {id: enfant.id, date: item.dateSuivi|date('Y-m-d')}) }}">{{ item.dateSuivi|date('d/m') }}</a>
                    {% endfor %}
                </nav>
            </div>
        {% endif %}

        {% if suivis is defined and suivis|length > 0 %}
            <div class="portal-feed">
                {% for suivi in suivis %}
                    <article class="parent-suivi-day">
                        <header class="parent-suivi-day-head">
                            <div>
                                <h3>Journée du {{ suivi.dateSuivi ? suivi.dateSuivi|date('d/m/Y') : '-' }}</h3>
                                <small>Présence : {{ suivi.presence ?: '-' }}{% if suivi.rangJour %} · Rang : {{ suivi.rangJour }}{% endif %}</small>
                            </div>
                            <div class="parent-suivi-score">
                                {% if suivi.totalBareme %}
                                    <strong>{{ suivi.totalPoints|number_format(1, ',', ' ') }}/{{ suivi.totalBareme|number_format(1, ',', ' ') }}</strong>
                                    <small>{{ suivi.moyenne|number_format(1, ',', ' ') }}%</small>
                                {% else %}
                                    <strong>Publié</strong>
                                {% endif %}
                            </div>
                        </header>
                        {% set visibleLines = suivi.publishedLinesForParent %}
                        {% if visibleLines|length > 0 %}
                            <div class="parent-suivi-lines">
                                {% for line in visibleLines %}
                                    {% set type = line.suiviType %}
                                    <div class="parent-suivi-line">
                                        <div>
                                            <div class="parent-suivi-line-title">{{ type ? type.libelle : 'Suivi' }}</div>
                                            <small>{% if type %}Coef {{ type.coefficient|number_format(0, ',', ' ') }}{% endif %}</small>
                                        </div>
                                        <div>
                                            {% if line.portion %}<p class="mb-1"><strong>Portion :</strong> {{ line.portion }}</p>{% endif %}
                                            {% if line.detail %}<p class="mb-1"><strong>Détail :</strong> {{ line.detail }}</p>{% endif %}
                                            {% if line.appreciation %}<p class="mb-1"><strong>Appréciation :</strong> {{ line.appreciationLabel }}</p>{% endif %}
                                            {% if line.observation %}<p class="mb-0"><strong>Observation :</strong> {{ line.observation }}</p>{% endif %}
                                        </div>
                                        <div class="parent-suivi-line-score">
                                            {% if line.scoreFinal is not null %}<strong>{{ line.scoreFinal|number_format(1, ',', ' ') }}</strong><small>/ {{ line.bareme|number_format(1, ',', ' ') }}</small>{% else %}<strong>-</strong>{% endif %}
                                        </div>
                                    </div>
                                {% endfor %}
                            </div>
                        {% else %}
                            <div class="parent-suivi-empty">Aucun détail publié pour cette journée.</div>
                        {% endif %}
                        {% if suivi.observationGenerale %}
                            <div class="parent-suivi-lines pt-0"><div class="parent-suivi-line"><div class="parent-suivi-line-title">Observation générale</div><div>{{ suivi.observationGenerale }}</div><div></div></div></div>
                        {% endif %}
                    </article>
                {% endfor %}
            </div>
        {% else %}
            <div class="parent-suivi-empty">Aucun suivi publié pour la date sélectionnée.</div>
        {% endif %}
    </section>
</section>
{% endblock %}