{% extends 'layout/a4-sheet.html.twig' %}

{% block title %}{{ project.name }} – Fiche projet (A4){% endblock %}

{% block stylesheets %}
    {{ encore_entry_link_tags('planned') }}
    <link rel="stylesheet" type="text/css" href="https://printjs-4de6.kxcdn.com/print.min.css">
{% endblock %}

{% block javascripts %}
    {{ encore_entry_script_tags('planned') }}
    <script src="https://printjs-4de6.kxcdn.com/print.min.js"></script>
    <script>
        function printA4JS() {
            // Collect all active stylesheets to preserve current styling
            const cssHrefs = Array.from(document.querySelectorAll('link[rel="stylesheet"]'))
                .map(l => l.href)
                .filter(Boolean);

            // Use printJS to print only the A4 sheet with styles
            printJS({
                printable: 'overview-sheet',
                type: 'html',
                css: cssHrefs,
                targetStyles: ['*'], // keep all computed styles from the element
                scanStyles: true,
                documentTitle: document.title
            });
        }
    </script>
{% endblock %}


{% block content %}
    <div class="container-fluid" id="overview-sheet" data-project-id="{{ project.id }}" data-project-acronym="{{ project.acronym }}">

        <div class="sheet-A4" >
            <div>
                <h5 class="mb-1 fw-semibold text-primary"><i class="mdi mdi-clipboard-check-outline me-2"></i>{{ project.name }}</h5>
                <hr>
            </div>
            <div class="d-flex justify-content-between align-items-start avoid-break">
                <div class="me-3">
                    <div class="d-flex align-items-center gap-2">
                        <span><i class="mdi mdi-pound me-1"></i> Acronyme : </span>
                        <span class="badge bg-primary-subtle text-primary rounded-pill">{{ project.acronym }}</span>
                    </div>
                    <div class="d-flex align-items-center gap-2">
                        <span><i class="mdi mdi-list-status me-1"></i>Statut :</span>
                        <span class="badge text-uppercase bg-{{ project.status|statusRegistryColor }}">{{ project.status|trans }}</span>
                    </div>
                    <div class="mt-1"><i class="mdi mdi-calendar me-1"></i>Début : {{ project.startDate|date('m/d/Y') }}</div>
                    <div class="mt-1"><i class="mdi mdi-calendar me-1"></i>Fin : {{ project.endDate|date('m/d/Y')  }}</div>
                </div>
                <div class="grid-3" style="min-width: 320px;">
                    <div class="kpi-box pb-2">
                        <div class="icon"><i class="mdi mdi-progress-check"></i></div>
                        <div>
                            <div class="label">Progression</div>
                            <div class="value">{{ project.progress|round }}%</div>
                        </div>
                    </div>
                    <div class="kpi-box pb-2">
                        <div class="icon"><i class="mdi mdi-currency-usd"></i></div>
                        <div>
                            <div class="label">Budget alloué</div>
                            <div class="value">{{ project.totalBudget|format_currency(project.currency) }}</div>
                        </div>
                    </div>
                    <div class="kpi-box pb-2">
                        <div class="icon"><i class="mdi mdi-domain"></i></div>
                        <div>
                            <div class="label">Propriétaire</div>
                            <div class="value">{{ project.department.name }}</div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="hr"></div>
            <div class="section">
                <div class="part-title my-3"><span class="num">1</span> Définition</div>
                <!-- Description -->
                <div class="section-title"><i class="fas fa-align-left"></i>Description</div>
                <div class="desc" id="project-description">{{ project.description|raw }}</div>

                <!-- Métadonnées & Rôles (table) -->
                <div class="section mt-2">
                    <div class="section-title"><i class="mdi mdi-information-outline"></i>Métadonnées & rôles</div>
                    <table class="table-simple table-compact">
                        <tbody>
                        <tr><th style="width:220px">Programme</th><td>{{ project.program ? project.program.name : 'Non défini' }}</td></tr>
                        <tr><th>Propriétaire</th><td>{{ project.department.name }}</td></tr>
                        <tr><th>Statut</th><td><span class="badge text-uppercase bg-{{ project.status|statusRegistryColor }}">{{ project.status|trans }}</span></td></tr>
                        <tr><th>Période</th><td>{{ task_remaining_time(project.startDate, project.endDate) }}</td></tr>
                        <tr><th>Devise</th><td>{{ project.currency }}</td></tr>
                        <tr><th>Budget alloué</th><td>{{ project.totalBudget|format_currency(project.currency) }}</td></tr>
                        <tr><th>Lignes budgétaires</th><td>{{ project.budgetLines|length }}</td></tr>
                        <tr><th>Responsable</th><td>{{ project.responsible.fullname }}</td></tr>
                        <tr><th>Chargé de suivi</th><td>{{ project.monitor.fullname }}</td></tr>
                        </tbody>
                    </table>
                </div>
                <div class="section">
                    <div class="section-title"><i class="mdi mdi-bullseye-arrow"></i>Objectifs stratégiques</div>
                    <ul class="list-v">
                        {% for objective in objectives %}
                            <li>
                                <i class="mdi mdi-check-circle-outline"></i>
                                <div>
                                    <div class="mini fw-semibold">{{ objective.name }}</div>
                                    {% if objective.description %}<div class="tiny">{{ objective.description }}</div>{% endif %}
                                </div>
                            </li>
                        {% else %}
                            <li class="tiny">Aucun objectif renseigné.</li>
                        {% endfor %}
                    </ul>
                </div>

                <div class="section">
                    <div class="section-title d-flex align-items-center"><i class="mdi mdi-package-variant"></i>Indicateurs de résultats <span class="badge badge-chip ms-2">{{ outputs|length }}</span></div>
                    {% if outputs is empty %}
                        <div class="alert alert-light border py-2 tiny mb-1"><i class="mdi mdi-information-outline me-1"></i>Aucun extrant défini pour le moment.</div>
                    {% else %}
                        <div class="caption-mini">Codes, unités, cibles, réalisés et taux de réalisation.</div>
                        <table class="table-simple table-compact">
                            <thead>
                            <tr>
                                <th style="width:120px">Code</th>
                                <th>Intitulé</th>
                                <th style="width:90px">Unité</th>
                                <th style="width:90px">Cible</th>
                                <th style="width:100px">Réalisé</th>
                                <th style="width:90px">Taux</th>
                            </tr>
                            </thead>
                            <tbody>
                            {% for output in outputs %}
                                {% set unit     = output.unit|default('—') %}
                                {% set target   = output.target is defined ? output.target : null %}
                                {% set achieved = output.achieved is defined ? output.achieved : null %}
                                {% set rate     = output.completionRate is defined and output.completionRate is not null ? output.completionRate|round(0, 'floor') : null %}
                                {% set clamped  = rate is not null and rate < 0 ? 0 : (rate is not null and rate > 100 ? 100 : rate) %}
                                <tr>
                                    <td>{{ output.code|default('—') }}</td>
                                    <td>{{ output.name }}</td>
                                    <td>{{ unit }}</td>
                                    <td>{{ target is not null ? target ~ ' ' ~ unit : '—' }}</td>
                                    <td>{{ achieved is not null ? achieved ~ ' ' ~ unit : '—' }}</td>
                                    <td>
                                        {% if clamped is not null %}
                                            <span class="badge {{ clamped < 50 ? 'bg-danger' : (clamped < 80 ? 'bg-warning text-dark' : 'bg-success') }}">{{ clamped }}%</span>
                                        {% else %}
                                            <span class="tiny text-muted">—</span>
                                        {% endif %}
                                    </td>
                                </tr>
                            {% endfor %}
                            </tbody>
                        </table>
                    {% endif %}
                </div>

                <!-- Parties prenantes (table) -->
                <div class="section">
                    <div class="section-title"><i class="mdi mdi-domain"></i>Parties prenantes</div>
                    {% if stakeholders|length > 0 %}
                        <table class="table-simple table-compact">
                            <thead>
                            <tr>
                                <th>Nom</th>
                                <th>Organisation</th>
                                <th>Email</th>
                                <th>Téléphone</th>
                                <th>Rôle</th>
                            </tr>
                            </thead>
                            <tbody>
                            {% for stakeholder in stakeholders %}
                                <tr>
                                    <td>{{ stakeholder.name }}</td>
                                    <td>{{ stakeholder.organization|default('—') }}</td>
                                    <td>{{ stakeholder.email|default('—') }}</td>
                                    <td>{{ stakeholder.phone|default('—') }}</td>
                                    <td>{{ ('stakeholder.type.' ~ stakeholder.role)|trans }}</td>
                                </tr>
                            {% endfor %}
                            </tbody>
                        </table>
                    {% else %}
                        <div class="tiny text-muted"><i class="mdi mdi-account-off me-1"></i>Aucun acteur clé défini.</div>
                    {% endif %}
                </div>
                <div class="section">
                    <div class="section-title"><i class="mdi mdi-folder-outline"></i>Documents & pièces</div>
                    {% if files|length > 0 %}
                        <table class="table-simple table-compact">
                            <thead>
                            <tr>
                                <th>Nom</th>
                                <th style="width:80px">Type</th>
                                <th style="width:110px">Ajouté le</th>
                            </tr>
                            </thead>
                            <tbody>
                            {% for file in files %}
                                {% set ext = file.name|split('.')|last|lower %}
                                <tr>
                                    <td class="mini text-truncate">{{ file.name }}</td>
                                    <td class="tiny">{{ ext|upper }}</td>
                                    <td class="tiny">{{ file.createdAt|date('d M Y') }}</td>
                                </tr>
                            {% endfor %}
                            </tbody>
                        </table>
                    {% else %}
                        <div class="tiny text-muted"><i class="mdi mdi-file-search-outline me-1"></i>Aucun fichier chargé.</div>
                    {% endif %}
                </div>

                <div class="section">
                    <div class="section-title"><i class="mdi mdi-map-marker-outline"></i>Localisation géographique</div>
                    <ul>
                        {% for locality in localities %}
                            <li>{{ locality }} </li>
                        {% endfor%}
                    </ul>

                </div>

            </div>

            <hr>
            <div class="section">
                <div class="part-title my-2"><span class="num">2</span> Planification</div>
                <div class="section-title"><i class="mdi mdi-calendar-month-outline"></i>Vue graphique</div>
                <canvas id="milestonesChart" height="150"></canvas>
                <div class="tiny text-muted mt-1">Vue compacte des jalons. Basculer en vue détaillée dans l'application.</div>
            </div>
            <div class="section tiny avoid-break">
                <div class="section-title">
                    <i class="mdi mdi-finance"></i>Budgétaires — Allocations par lignes budgétaires
                </div>

                {% set currency = project.currency %}
                {% set total_authorized_commitment = 0 %}
                {% set total_authorized_disb = 0 %}

                <table class="table-simple table-compact">
                    <thead>
                    <tr>
                        <th style="width:140px">Ligne (code)</th>
                        <th>Intitulé</th>
                        <th style="width:140px">Période</th>
                        <th style="width:135px" class="text-end">Engagement autorisé</th>
                        <th style="width:135px" class="text-end">Décaissement autorisé</th>
                    </tr>
                    </thead>
                    <tbody>
                    {% for line in project.budgetLines %}
                        {% set line_code  = line.identityNumber|default('—') %}
                        {% set line_label = line.title|default(line.label|default('—')) %}

                        {% if line.allocations is defined and line.allocations|length > 0 %}
                            {% for allocation in line.allocations %}
                                {% set auth_commit = allocation.authorizedCommitmentAmount|default(0) %}
                                {% set auth_disb   = allocation.authorizedDisbursement|default(0) %}

                                {% set total_authorized_commitment = total_authorized_commitment + auth_commit %}
                                {% set total_authorized_disb       = total_authorized_disb + auth_disb %}

                                <tr>
                                    <td title="Code de la ligne">{{ line_code }}</td>
                                    <td title="Intitulé de la ligne">{{ line_label }}</td>
                                    <td>
                                      <span class="tiny">
                                        <i class="mdi mdi-calendar-range me-1"></i>{{ allocation.periodLabel|default('—') }}
                                      </span>
                                    </td>
                                    <td class="text-end"
                                        title="{{ auth_commit|format_currency(currency, { fraction_digit: 0 }) }}">
                                        {{ auth_commit|minify_budget }}
                                    </td>
                                    <td class="text-end"
                                        title="{{ auth_disb|format_currency(currency, { fraction_digit: 0 }) }}">
                                        {{ auth_disb|minify_budget }}
                                    </td>
                                </tr>
                            {% endfor %}
                        {% else %}
                            <tr class="text-muted">
                                <td>{{ line_code }}</td>
                                <td>{{ line_label }}</td>
                                <td colspan="3">
                                    <i class="mdi mdi-alert-circle-outline me-1"></i>
                                    Aucune allocation définie pour cette ligne.
                                </td>
                            </tr>
                        {% endif %}
                    {% endfor %}
                    </tbody>

                    <tfoot>
                    <tr>
                        <th colspan="3" class="text-end">Total</th>
                        <th class="text-end" title="{{ total_authorized_commitment|format_currency(currency, { fraction_digit: 0 }) }}">
                            {{ total_authorized_commitment|minify_budget }}
                        </th>
                        <th class="text-end" title="{{ total_authorized_disb|format_currency(currency, { fraction_digit: 0 }) }}">
                            {{ total_authorized_disb|minify_budget }}
                        </th>
                    </tr>
                    </tfoot>
                </table>

                <div class="caption-mini">
                    Les montants affichés sont <em>minifiés</em> (abrégés) pour la lisibilité. {{ '(' ~ currency ~ ')' }}.
                </div>
            </div>
        </div>
        <button class="print-btn no-print" onclick="printA4JS()">
            <i class="mdi mdi-printer"></i>
        </button>
    </div>
{% endblock %}