{% extends 'layout/content.html.twig' %}

{% block title %}{{ project.name }} - Récapitulatif{% endblock %}

{% block stylesheets %}
    {{ encore_entry_link_tags('planned') }}
{% endblock %}

{% block javascripts %}
    {{ encore_entry_script_tags('planned') }}
{% endblock %}

{% block breadcrumb %}
    {{ render(controller('App\\Controller\\SharedController::getBreadcrumb', {type: 'project', id: project.id })) }}
{% endblock %}

{% block sidebar %}
    {{ render(controller('App\\Controller\\SharedController::getProjectSideBarMenu', {acronym: project.acronym, step: step, show : 'show'})) }}
{% endblock %}

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

        <!-- Header Projet -->
        <div class="card rounded-4 shadow-sm mb-3 avoid-break">
            <div class="card-body rounded-4 py-3">
                <div class="row align-items-start g-2">
                    <div class="col-md-7">
                        <h5 class="mb-1 fw-semibold">
                            <i class="mdi mdi-clipboard-check-outline me-2 text-primary"></i>{{ project.name }}
                        </h5>
                        <div class="d-flex align-items-center gap-2">
            <span class="badge bg-primary-subtle text-primary rounded-pill">
              <i class="mdi mdi-pound me-1"></i>{{ project.acronym }}
            </span>
                        </div>
                    </div>

                    <div class="col-md-5">
                        <div class="d-flex flex-column align-items-md-end">
                            <div class="d-flex align-items-center mb-1 gap-2">
                                <span class="fw-semibold">Statut :</span>
                                <span class="badge bg-{{ project.status|statusRegistryColor }} text-uppercase px-3">{{ project.status|trans }}</span>
                            </div>
                            <div class="text-muted small">
                                <i class="mdi mdi-calendar me-1"></i>{{ task_remaining_time(project.startDate, project.endDate) }}
                            </div>
                            <div class="small">
                                <i class="mdi mdi-progress-check me-1"></i>Progression : <span class="fw-semibold">{{ project.progress|round }}%</span>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="mt-2">
                    <h6 style="color: #323a46; margin-bottom: 12px; font-size: 16px;">
                        <i class="fas fa-align-left" style="color: #4a81d4; margin-right: 8px;"></i> Description
                    </h6>
                    <div class="description-container">
                        <div id="project-description">
                            {{ project.description|raw }}
                        </div>
                        <button class="read-more-btn btn btn-xs btn-primary" onclick="toggleDescription()">
                            Lire la suite <i class="fas fa-arrow-down" style="margin-left: 4px;"></i>
                        </button>
                    </div>
                </div>
            </div>

            <!-- Métadonnées -->
            <div class="p-3 pt-0">
                <div class="row g-2">
                    <div class="col-6 col-lg-3">
                        <div class="d-flex align-items-center gap-2 p-2 border rounded-3">
                            <span class="badge bg-primary-subtle text-primary"><i class="mdi mdi-source-branch"></i></span>
                            <div>
                                <div class="text-muted small">Programme</div>
                                <div class="fw-medium">{{ project.program ? project.program.name : 'Non défini' }}</div>
                            </div>
                        </div>
                    </div>
                    <div class="col-6 col-lg-3">
                        <div class="d-flex align-items-center gap-2 p-2 border rounded-3">
                            <span class="badge bg-primary-subtle text-primary"><i class="mdi mdi-domain"></i></span>
                            <div>
                                <div class="text-muted small">Propriétaire</div>
                                <div class="fw-medium">{{ project.department.name }}</div>
                            </div>
                        </div>
                    </div>
                    <div class="col-6 col-md-3 col-lg-2">
                        <div class="d-flex align-items-center gap-2 p-2 border rounded-3">
                            <span class="badge bg-primary-subtle text-primary"><i class="mdi mdi-currency-usd"></i></span>
                            <div>
                                <div class="text-muted small">Devise</div>
                                <div class="fw-medium">{{ project.currency }}</div>
                            </div>
                        </div>
                    </div>
                    <div class="col-6 col-md-3 col-lg-2">
                        <div class="d-flex align-items-center gap-2 p-2 border rounded-3">
                            <span class="badge bg-primary-subtle text-primary"><i class="mdi mdi-chart-pie-outline"></i></span>
                            <div>
                                <div class="text-muted small">Lignes budgétaires</div>
                                <div class="fw-medium">{{ project.budgetLines|length }}</div>
                            </div>
                        </div>
                    </div>
                    <div class="col-6 col-md-3 col-lg-2">
                        <div class="d-flex align-items-center gap-2 p-2 border rounded-3">
                            <span class="badge bg-primary-subtle text-primary"><i class="mdi mdi-sack"></i></span>
                            <div>
                                <div class="text-muted small">Budget alloué</div>
                                <div class="fw-medium">{{ project.totalBudget|format_currency(project.currency) }}</div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Barre d’avancement -->
                <div class="mt-3">
                    <div class="d-flex justify-content-between align-items-center mb-1">
                        <span class="text-muted small">Avancement du projet</span>
                        <span class="fw-medium small">{{ project.progress|round }}%</span>
                    </div>
                    <div class="progress" style="height: 10px;">
                        <div class="progress-bar bg-success" role="progressbar"
                             style="width: {{ project.progress }}%;" aria-valuenow="{{ project.progress|round }}"
                             aria-valuemin="0" aria-valuemax="100"></div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Acteurs & Parties prenantes -->
        <div class="row mb-3 g-3 avoid-break">
            <div class="col-md-4">
                <div class="card rounded-4 shadow-sm h-100">
                    <div class="card-header rounded-top-4 d-flex justify-content-between align-items-center">
                        <h6 class="mb-0"><i class="mdi mdi-account-tie-outline me-2"></i>Acteurs</h6>
                    </div>
                    <div class="card-body text-center">
                        <div class="row g-3">
                            <div class="col">
                                <div class="mb-2"><i class="mdi mdi-account-circle-outline mdi-36px text-secondary"></i></div>
                                <h6 class="mb-0">{{ project.responsible.fullname }}</h6>
                                <div class="text-muted small">Responsable</div>
                            </div>
                            <div class="col">
                                <div class="mb-2"><i class="mdi mdi-account-circle-outline mdi-36px text-secondary"></i></div>
                                <h6 class="mb-0">{{ project.monitor.fullname }}</h6>
                                <div class="text-muted small">Chargé de suivi</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div><!-- /col-4 -->

            <div class="col-md-8">
                <div class="card rounded-4 shadow-sm h-100">
                    <div class="card-header rounded-top-4 d-flex justify-content-between align-items-center">
                        <h6 class="mb-0"><i class="mdi mdi-domain me-2"></i>Parties prenantes</h6>
                    </div>
                    <div class="card-body">
                        {% if stakeholders|length > 0 %}
                            <div class="row g-3">
                                {% for stakeholder in stakeholders %}
                                    <div class="col-12 col-md-6 col-lg-4">
                                        <div class="card h-100 border-light shadow-sm rounded-3">
                                            <div class="card-body">
                                                <h6 class="card-title mb-1 text-primary">
                                                    <i class="mdi mdi-account-circle-outline me-1"></i>{{ stakeholder.name }}
                                                </h6>
                                                <p class="card-text small text-muted mb-1">
                                                    <i class="mdi mdi-domain me-1"></i>{{ stakeholder.organization|default('—') }}
                                                </p>
                                                <p class="card-text small text-muted mb-1">
                                                    <i class="mdi mdi-email-outline me-1"></i>{{ stakeholder.email|default('—') }}
                                                </p>
                                                <p class="card-text small text-muted mb-2">
                                                    <i class="mdi mdi-phone-outline me-1"></i>{{ stakeholder.phone|default('—') }}
                                                </p>
                                                <span class="badge bg-secondary-subtle text-secondary border">
                        {{ ('stakeholder.type.' ~ stakeholder.role)|trans }}
                      </span>
                                            </div>
                                        </div>
                                    </div>
                                {% endfor %}
                            </div>
                        {% else %}
                            <div class="alert alert-light text-muted small d-flex align-items-center mb-0">
                                <i class="mdi mdi-account-off me-2"></i>Aucun acteur clé défini pour ce projet.
                            </div>
                        {% endif %}
                    </div>
                </div>
            </div><!-- /col-8 -->
        </div>

        <!-- Définition du projet -->
        <div class="card rounded-4 avoid-break shadow-sm mb-3">
            <div class="card-header rounded-top-4 d-flex justify-content-between align-items-center">
                <h6 class="mb-0"><i class="mdi mdi-format-list-bulleted-square me-2"></i>Définition du projet</h6>
                <i class="mdi mdi-information-outline text-muted"></i>
            </div>
            <div class="card-body">
                <div class="row g-3">
                    <div class="col-sm-6">
                        <h6 class="text-muted mb-2 text-uppercase">
                            <i class="mdi mdi-bullseye-arrow me-2"></i>Objectifs stratégiques
                        </h6>
                        <ul class="list-group list-group-flush">
                            {% for objective in objectives %}
                                <li class="list-group-item d-flex align-items-start">
                                    <i class="mdi mdi-check-circle-outline text-success me-2 mt-1"></i>
                                    <div>
                                        <div>{{ objective.name }}</div>
                                    </div>
                                </li>
                            {% endfor %}
                        </ul>
                    </div>

                    <div class="col-sm-6">
                        <div class="d-flex align-items-center mb-2">
                            <h6 class="text-muted text-uppercase mb-0">
                                <i class="mdi mdi-package-variant-closed-check me-2"></i>Indicateurs de résultats
                            </h6>
                            <span class="badge bg-light text-secondary ms-2">{{ outputs|length }}</span>
                        </div>

                        {% if outputs is empty %}
                            <div class="alert alert-light border d-flex align-items-center py-2">
                                <i class="mdi mdi-information-outline me-2 fs-5"></i>
                                <div class="small mb-0">Aucun extrant défini pour le moment.</div>
                            </div>
                        {% endif %}

                        <div class="vstack gap-2">
                            {% 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) %}

                                {% set rateClass = 'bg-secondary' %}
                                {% if clamped is not null %}
                                    {% if clamped < 50 %}{% set rateClass = 'bg-danger' %}
                                    {% elseif clamped < 80 %}{% set rateClass = 'bg-warning text-dark' %}
                                    {% else %}{% set rateClass = 'bg-success' %}
                                    {% endif %}
                                {% endif %}

                                <div class="card border shadow-sm rounded-3">
                                    <div class="card-body py-2 px-3">
                                        <div class="d-flex justify-content-between align-items-start gap-3">
                                            <div class="flex-grow-1">
                                                <div class="fw-semibold">{{ output.name }}</div>
                                                <div class="text-muted small">
                                                    <span class="me-2">Unité : <span class="fw-medium">{{ unit }}</span></span>
                                                    {% if output.code is defined and output.code %}
                                                        <span>• Code : <span class="fw-medium">{{ output.code }}</span></span>
                                                    {% endif %}
                                                </div>
                                            </div>
                                            <div class="text-end">
                                                <div class="d-flex flex-md-column justify-content-end gap-1">
                        <span class="badge bg-primary-subtle text-primary border" data-bs-toggle="tooltip" title="Objectif (cible)">
                          Cible : {{ target is not null ? target ~ ' ' ~ unit : '—' }}
                        </span>
                                                    <span class="badge {{ achieved is not null ? 'bg-success-subtle text-success border' : 'bg-light text-muted border' }}" data-bs-toggle="tooltip" title="Valeur réalisée">
                          Réalisé : {{ achieved is not null ? achieved ~ ' ' ~ unit : '—' }}
                        </span>
                                                </div>
                                            </div>
                                        </div>

                                        {% if clamped is not null %}
                                            <div class="mt-2">
                                                <div class="progress" style="height:8px;">
                                                    <div class="progress-bar {{ rateClass }} progress-bar-striped" role="progressbar"
                                                         style="width: {{ clamped }}%;" aria-valuenow="{{ clamped }}" aria-valuemin="0" aria-valuemax="100"></div>
                                                </div>
                                                <div class="d-flex justify-content-between small text-muted mt-1">
                                                    <span>Taux de réalisation</span>
                                                    <span class="badge {{ rateClass }}">{{ clamped }}%</span>
                                                </div>
                                            </div>
                                        {% else %}
                                            <div class="small text-muted mt-2">
                                                <i class="mdi mdi-dots-horizontal"></i> Taux non renseigné
                                            </div>
                                        {% endif %}
                                    </div>
                                </div>
                            {% endfor %}
                        </div>

                    </div>
                </div>
            </div>
        </div>

        <!-- Planification -->
        <div class="card rounded-4 avoid-break shadow-sm mb-3">
            <div class="card-header rounded-top-4 d-flex justify-content-between align-items-center">
                <h6 class="mb-0"><i class="mdi mdi-calendar-month-outline me-2"></i>Planification</h6>
                <ul class="nav nav-pills ms-auto" id="planification-pills-tab" role="tablist">
                    <li class="nav-item" role="presentation">
                        <button class="nav-link active btn-sm" id="pills-graphic-tab" data-bs-toggle="pill" data-bs-target="#pills-graphic" type="button" role="tab" aria-controls="pills-graphic" aria-selected="true">
                            <i class="mdi mdi-chart-line me-1"></i>Graphique
                        </button>
                    </li>
                    <li class="nav-item ms-1" role="presentation">
                        <button class="nav-link btn-sm" id="pills-list-tab" data-bs-toggle="pill" data-bs-target="#pills-list" type="button" role="tab" aria-controls="pills-list" aria-selected="false">
                            <i class="mdi mdi-format-list-bulleted me-1"></i>Liste
                        </button>
                    </li>
                </ul>
            </div>
            <div class="card-body pt-2">
                <div class="tab-content" id="pills-tabContent">
                    <div class="tab-pane fade show active" id="pills-graphic" role="tabpanel" aria-labelledby="pills-graphic-tab">
                        <canvas id="milestonesChart" height="100"></canvas>
                    </div>
                    <div class="tab-pane fade" id="pills-list" role="tabpanel" aria-labelledby="pills-list-tab">
                        <div class="row g-3 mt-1">
                            {% for milestone in milestones %}
                                {% set barColor = milestone.actual >= milestone.planned ? 'success' : 'danger' %}
                                <div class="col-6 col-md-4 col-lg-3">
                                    <div class="card border rounded-4 border-{{ barColor }} h-100">
                                        <div class="card-header rounded-top-4 py-2">{{ milestone.period }}</div>
                                        <div class="card-body">
                                            <div class="position-relative" style="height:10px; background-color:#e9ecef; border-radius:4px;">
                                                <div class="position-absolute top-0 start-0 h-100 bg-secondary" style="width: {{ milestone.planned }}%; opacity:.25;"></div>
                                                <div class="position-absolute top-0 start-0 h-100 bg-{{ barColor }}" style="width: {{ milestone.actual }}%;"></div>
                                            </div>
                                            <div class="small text-muted mt-2">
                                                Planifié : {{ milestone.planned }}%
                                                {% if milestone.actual > 0 %}
                                                    <span class="float-end">Réalisé : {{ milestone.actual }}%</span>
                                                {% endif %}
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            {% endfor %}
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Localisation & Documents -->
        <div class="row g-3 avoid-break mb-3">
            <div class="col-lg-6">
                <div class="card rounded-4 shadow-sm h-100">
                    <div class="card-header rounded-top-4 d-flex justify-content-between align-items-center">
                        <h6 class="mb-0"><i class="mdi mdi-map-marker-outline me-2"></i>Localisation géographique</h6>
                        <i class="mdi mdi-earth text-muted"></i>
                    </div>
                    <div class="card-body">
                        <div id="sn-map" data-level="region" data-entities='["{{ localities|join('","') }}"]'></div>
                    </div>
                </div>
            </div>

            <div class="col-lg-6">
                <div class="card rounded-4 shadow-sm h-100">
                    <div class="card-header rounded-top-4 d-flex justify-content-between align-items-center">
                        <h6 class="mb-0"><i class="mdi mdi-folder-outline me-2"></i>Documents & pièces associées</h6>
                        <i class="mdi mdi-folder-open-outline text-muted"></i>
                    </div>
                    <div class="card-body">
                        <div class="row g-2">
                            {% if files|length > 0 %}
                                {% for file in files %}
                                    {% set ext = file.name|split('.')|last|lower %}
                                    {% set icon = 'mdi-file' %}
                                    {% set color = 'text-secondary' %}

                                    {% if ext in ['pdf'] %}
                                        {% set icon = 'mdi-file-pdf-box' %}
                                        {% set color = 'text-danger' %}
                                    {% elseif ext in ['doc', 'docx'] %}
                                        {% set icon = 'mdi-file-word-box' %}
                                        {% set color = 'text-primary' %}
                                    {% elseif ext in ['xls', 'xlsx', 'csv'] %}
                                        {% set icon = 'mdi-file-excel-box' %}
                                        {% set color = 'text-success' %}
                                    {% elseif ext in ['png', 'jpg', 'jpeg', 'gif'] %}
                                        {% set icon = 'mdi-file-image-outline' %}
                                        {% set color = 'text-info' %}
                                    {% elseif ext in ['zip', 'rar', '7z'] %}
                                        {% set icon = 'mdi-archive-outline' %}
                                        {% set color = 'text-warning' %}
                                    {% elseif ext in ['ppt', 'pptx'] %}
                                        {% set icon = 'mdi-file-powerpoint-box' %}
                                        {% set color = 'text-danger' %}
                                    {% elseif ext in ['txt', 'md', 'rtf'] %}
                                        {% set icon = 'mdi-file-document-outline' %}
                                    {% endif %}

                                    <div class="col-12">
                                        <div class="d-flex align-items-center p-2 border rounded-3">
                                            <i class="mdi {{ icon }} mdi-24px {{ color }} me-2"></i>
                                            <div class="flex-grow-1">
                                                <div class="d-flex align-items-center justify-content-between">
                                                    <h6 class="mb-0 text-truncate" title="{{ file.name }}">{{ file.name }}</h6>
                                                    <a href="{{ file.url ?? '#' }}" class="btn btn-sm btn-outline-secondary ms-2" title="Télécharger">
                                                        <i class="mdi mdi-download"></i>
                                                    </a>
                                                </div>
                                                <div class="text-muted small">
                                                    {{ ext|upper }} • ajouté le {{ file.createdAt|date('d M Y') }}
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                {% endfor %}
                            {% else %}
                                <div class="alert alert-light text-muted small d-flex align-items-center mb-0">
                                    <i class="mdi mdi-file-search-outline me-2"></i>Aucun fichier chargé pour le moment.
                                </div>
                            {% endif %}
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Actions -->
        <div class="action-bar d-flex justify-content-around align-items-center">
            {{ project_action_buttons(project) }}
        </div>

    </div>
{% endblock %}