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

{% block title %}{% endblock %}

{% block stylesheets %}
    {{ encore_entry_link_tags('followup_initialization') }}
    {{ encore_entry_link_tags('report_progression') }}
    {{ encore_entry_link_tags('reported_problem') }}
    {{ encore_entry_link_tags('risk') }}
{% endblock %}

{% block javascripts %}
    {{ encore_entry_script_tags('followup_initialization') }}
    {{ encore_entry_script_tags('reported_problem') }}
    {{ encore_entry_script_tags('risk') }}
{% endblock %}

{% block breadcrumb %}
    <nav aria-label="breadcrumb">
        <ol class="breadcrumb bg-white px-3 py-2 rounded shadow-sm rounded-pill align-items-center">
            <li class="breadcrumb-item d-flex align-items-center">
                <a href="{{ url('app_task_index') }}" class="text-primary">
                    <i class="fa fa-home me-1"></i>Accueil
                </a>
            </li>
            <li class="breadcrumb-item">
                <a href="{{ url('app_project_list') }}">Projets</a>
            </li>
            <li class="breadcrumb-item">
                <a href="{{ url('app_project_details', { acronym: project.acronym }) }}">Projet : {{ project.acronym }}</a>
            </li>
            <li class="breadcrumb-item active" aria-current="page">Initialisation du Suivi</li>
        </ol>
    </nav>
{% endblock %}

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

{% block content %}
    <div class="row" id="project-details" data-app-project-id="{{ project.id }}">
        <div class="col-12">
            <div class="card rounded-4">
                {% include 'project/partials/_project_card_header.html.twig' %}
                <div class="card-body">
                    <div id="followupInitializationWizard" data-actual-step="{{ initialization.actualStep ?? 'refDate' }}">
                        <ul class="nav nav-pills bg-light nav-justified form-wizard-header mb-3" id="wizardTabs">
                            <li class="nav-item " data-target-form="#refDateForm">
                                <a href="#refDate" data-bs-toggle="tab" data-toggle="tab"
                                   class="nav-link rounded-0 pt-2 pb-2 active">
                                    <i class="mdi mdi-calendar-start me-1"></i>
                                    <span class="d-none d-sm-inline">Date</span>
                                </a>
                            </li>
                            <li class="nav-item" data-target-form="#activitiesForm">
                                <a href="#activities" data-bs-toggle="tab" data-toggle="tab"
                                   class="nav-link rounded-0 pt-2 pb-2">
                                    <i class="mdi mdi-list-status me-1"></i>
                                    <span class="d-none d-sm-inline">Activités</span>
                                </a>
                            </li>
                            <li class="nav-item" data-target-form="#expensesForm">
                                <a href="#expenses" data-bs-toggle="tab" data-toggle="tab"
                                   class="nav-link rounded-0 pt-2 pb-2">
                                    <i class="mdi mdi-cash me-1"></i>
                                    <span class="d-none d-sm-inline">Dépenses</span>
                                </a>
                            </li>
                            <li class="nav-item" data-target-form="#outputsForm">
                                <a href="#outputs" data-bs-toggle="tab" data-toggle="tab"
                                   class="nav-link rounded-0 pt-2 pb-2">
                                    <i class="mdi mdi-chart-bar me-1"></i>
                                    <span class="d-none d-sm-inline">Extrants</span>
                                </a>
                            </li>
                            <li class="nav-item" data-target-form="#risksForm">
                                <a href="#problems" data-bs-toggle="tab" data-toggle="tab"
                                   class="nav-link rounded-0 pt-2 pb-2">
                                    <i class="mdi mdi-alert-circle-outline me-1"></i>
                                    <span class="d-none d-sm-inline">Problèmes</span>
                                </a>
                            </li>
                            <li class="nav-item" data-target-form="#risksForm">
                                <a href="#risks" data-bs-toggle="tab" data-toggle="tab"
                                   class="nav-link rounded-0 pt-2 pb-2">
                                    <i class="mdi mdi-radiobox-marked me-1"></i>
                                    <span class="d-none d-sm-inline">Risques</span>
                                </a>
                            </li>
                        </ul>
                        <div class="tab-content mb-0 b-0 pt-0">
                            <div class="tab-pane active" id="refDate">
                                <form id="refDateForm" data-validate="true" autocomplete="off" novalidate="novalidate"
                                      method="post" action="#" class="form-horizontal">
                                    <div class="row">
                                        <div class="col-12">
                                            <h4 class="mb-2 d-flex align-items-center text-secondary fw-semibold p-2 bg-secondary-subtle rounded">
                                                <i class="mdi mdi-calendar text-danger me-2"></i>Date de Référence
                                            </h4>
                                            <div class="row justify-content-center">
                                                <div class="col-md-8">
                                                    <div class="mb-4 control-wrapper">
                                                        <div>
                                                            <label for="reference-date" class="form-label fw-bold">Date de référence <span class="text-danger">*</span></label>
                                                            <span class="mdi mdi-information" data-bs-toggle="tooltip" data-bs-placement="top" title="Date à partir de laquelle vous allez insérer les données."></span>
                                                            <input type="text"
                                                                   value="{{ initialization ? initialization.referenceDate|date('Y-m-d') : null }}"
                                                                   id="reference-date" class="form-control"
                                                                   placeholder="Date de référence" name="referenceDate"
                                                                   required>
                                                        </div>
                                                    </div>
                                                    <div class="mb-4">
                                                        <label class="form-label fw-bold">Justification du choix de date
                                                            <span class="text-danger">*</span></label>
                                                        <textarea class="form-control" rows="4"
                                                                  name="refDateJustification" id="refDateJustification"
                                                                  placeholder="Expliquez pourquoi cette date a été choisie comme référence..."
                                                                  required>{{ initialization ? initialization.dateJustification }}</textarea>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </form>
                            </div>
                            <div class="tab-pane fade" id="activities">
                                <form id="activitiesForm" method="post" action="#" class="form-horizontal" data-current-month="{{ activitiesMilestones.currentMonth }}">
                                    <div class="row">
                                        <div class="col-12">
                                            <h4 class="mb-2 d-flex align-items-center text-secondary fw-semibold p-2 bg-secondary-subtle rounded">
                                                <i class="fas fa-tasks me-2"></i>Renseignez l'état d'avancement à date
                                                de toutes les activités du projet
                                            </h4>
                                            {% set months = activitiesMilestones.period.months %}
                                            {% set currentKey = activitiesMilestones.currentMonth %}
                                            {% set lastKey = activitiesMilestones.lastMonth %}

                                            <div class="table-responsive" style="overflow-x:auto;">
                                                <table class="table table-bordered fs-6 align-middle" style="min-width: 980px;">
                                                    <thead class="table-light">
                                                    <tr>
                                                        <th class="sticky-col bg-light-subtle" style="left:0; min-width:26rem;">Activité</th>
                                                        {% for m in months %}
                                                            <th class="text-center" style="min-width:10rem;" colspan="2">
                                                                {{ m.label }}
                                                                {% if m.key == currentKey %}
                                                                    <span class="badge bg-primary-subtle text-primary ms-1">Mois courant</span>
                                                                {% elseif m.key == lastKey %}
                                                                    <span class="badge bg-secondary-subtle text-secondary ms-1">M-1</span>
                                                                {% endif %}
                                                            </th>
                                                        {% endfor %}
                                                        <th style="min-width:18rem;">Commentaire</th>
                                                    </tr>
                                                    <tr>
                                                        <th class="sticky-col bg-light-subtle" style="left:0; min-width:26rem;"></th>
                                                        {% for m in months %}
                                                            <th class="text-center small">Prévu</th>
                                                            <th class="text-center small" style="border-right-color: var(--bs-dark)">Réalisé</th>
                                                        {% endfor %}
                                                        <th></th>
                                                    </tr>
                                                    </thead>

                                                    <tbody>
                                                    {% for activity in activities %}
                                                        {# Index des jalons par 'YYYY-MM' #}
                                                        {% set byMonth = {} %}
                                                        {% for ms in (activitiesMilestones.activities[activity.id].milestones ?? []) %}
                                                            {% set key = ms.plannedDate|date('Y-m') %}
                                                            {% set byMonth = byMonth|merge({ (key): ms }) %}
                                                        {% endfor %}

                                                        <tr id="activityRow{{ activity.id }}" data-activity-id="{{ activity.id }}">
                                                            {# Colonne sticky : Activité #}
                                                            <td class="sticky-col bg-light-subtle" style="left:0; z-index:2; min-width:26rem;">
                                                                {% if activity.parent %}
                                                                    <span class="badge bg-soft-danger text-danger fw-normal">{{ activity.parent.acronym }}</span> /
                                                                {% endif %}
                                                                <span class="badge bg-soft-primary text-primary fw-normal">{{ activity.acronym }}</span>
                                                                <span class="fw-bolder">{{ activity.name }}</span>
                                                                <div class="text-muted small mt-1">
                                                                    Pond : {{ activity.weighting }}% • {{ task_remaining_time(activity.startDate, activity.endDate) }}
                                                                </div>
                                                            </td>

                                                            {# 2 colonnes par mois : prévu et réalisé #}
                                                            {% for m in months %}
                                                                {% set ms = byMonth[m.key] ?? null %}
                                                                {# Planned (Prévu) cell #}
                                                                <td class="p-1">
                                                                    {% if ms %}
                                                                        <input type="number"
                                                                               class="form-control-plaintext text-end percent-input no-spinner w-100"
                                                                               data-milestones-id="{{ ms.id }}"
                                                                               data-month="{{ m.key }}"
                                                                               name="milestones[{{ activity.id }}][{{ m.key }}][planned]"
                                                                               inputmode="numeric" min="0" max="100" step="1"
                                                                               value="{{ ms.plannedProgress|default() }}"
                                                                               placeholder="Cible"
                                                                               data-bs-toggle="tooltip"
                                                                               title="Cible {{ m.label }}">
                                                                    {% else %}
                                                                        <span class="text-muted">—</span>
                                                                    {% endif %}
                                                                </td>

                                                                {# Actual (Réalisé) cell — editable for all months except current #}
                                                                <td class="p-1" style="border-right-color: var(--bs-dark) !important;">
                                                                    {% if ms %}
                                                                        {% if m.key != currentKey %}
                                                                            <input type="number"
                                                                                   class="form-control-plaintext text-end percent-input no-spinner w-100"
                                                                                   data-milestones-id="{{ ms.id }}"
                                                                                   data-month="{{ m.key }}"
                                                                                   name="milestones[{{ activity.id }}][{{ m.key }}][actual]"
                                                                                   inputmode="numeric" min="0" max="100" step="1"
                                                                                   value="{{ ms.actualProgress|default() }}"
                                                                                   placeholder="Réalisé"
                                                                                   data-bs-toggle="tooltip"
                                                                                   title="Réalisé {{ m.label }}">
                                                                        {% else %}
                                                                            <span class="text-muted">—</span>
                                                                        {% endif %}
                                                                    {% else %}
                                                                        <span class="text-muted">—</span>
                                                                    {% endif %}
                                                                </td>
                                                            {% endfor %}

                                                            <td>
                                                                <input type="text" class="form-control-plaintext m-0"
                                                                       name="comment[{{ activity.id }}]"
                                                                       placeholder="Commentaire…">
                                                            </td>
                                                        </tr>
                                                    {% endfor %}
                                                    </tbody>
                                                </table>
                                            </div>
                                        </div>
                                    </div>
                                </form>
                            </div>
                            <div class="tab-pane fade" id="expenses">
                                <form id="expensesForm" method="post" action="#" class="form-horizontal">
                                    <div class="row">
                                        <div class="col-12">
                                            <h4 class="mb-2 d-flex align-items-center text-secondary fw-semibold p-2 bg-secondary-subtle rounded">
                                                <i class="fas fa-coins me-2"></i>Renseignez les dépenses à date de
                                                toutes les activités du projet
                                            </h4>
                                            <div class="table-responsive">
                                                <table class="table table-bordered border fs-6 align-middle">
                                                    <thead class="table-light">
                                                    <tr>
                                                        <th class="bg-light-subtle" style="width: 25rem;">Activité</th>
                                                        <th> Montant Alloué <span class="text-danger">*</span></th>
                                                        <th> Montant Engagé</th>
                                                        <th> Montant Décaissé</th>
                                                        <th style="width: 15rem;">Commentaire</th>
                                                    </tr>
                                                    </thead>
                                                    <tbody>
                                                    {% for activity in activities %}
                                                        <tr id="activityRow{{ activity.id }}"
                                                            data-activity-id="{{ activity.id }}">
                                                            <td class="bg-light-subtle py-0 m-0">
                                                                {% if activity.parent %}
                                                                    <span class="badge bg-soft-danger text-danger fw-normal"> {{ activity.parent.acronym }} </span> /
                                                                {% endif %}
                                                                <span class="badge bg-soft-primary text-primary fw-normal">{{ activity.acronym }}</span>
                                                                <span class="fw-bolder ">{{ activity.name }}</span>
                                                                <br><span
                                                                        class="text-muted">| Pond : {{ activity.weighting }}% | {{ task_remaining_time(activity.startDate, activity.endDate) }}</span>
                                                            </td>
                                                            <td>
                                                                <div class="w-100">
                                                                    <input type="text"
                                                                           class="form-control-plaintext text-end activity-budget-input no-spinner w-100 m-0"
                                                                           inputmode="numeric" required
                                                                           value="{{ activity.budget }}"
                                                                           placeholder="Non renseigné">
                                                                </div>
                                                            </td>
                                                            <td>
                                                                <div class="w-100">
                                                                    <input type="text"
                                                                           class="form-control-plaintext text-end activity-budget-input no-spinner w-100 m-0"
                                                                           inputmode="numeric"
                                                                           placeholder="Non renseigné"
                                                                           value="{{ activity.committedBudget }}">
                                                                </div>
                                                            </td>
                                                            <td>
                                                                <div class="w-100">
                                                                    <input
                                                                            type="text"
                                                                            class="form-control-plaintext text-end activity-budget-input no-spinner w-100 m-0"
                                                                            inputmode="decimal"
                                                                            placeholder="Non renseigné"
                                                                            value="{{ activity.disbursedBudget }}">
                                                                </div>
                                                            </td>
                                                            <td>
                                                                <input type="text" size="40"
                                                                       class="form-control-plaintext m-0"
                                                                       placeholder="Commentaire...">
                                                            </td>
                                                        </tr>
                                                    {% endfor %}
                                                    </tbody>
                                                </table>
                                            </div>
                                        </div>
                                    </div>
                                </form>
                            </div>
                            <div class="tab-pane fade" id="outputs">
                                <form id="outputsForm" method="post" action="#" class="form-horizontal">
                                    <div class="row">
                                        <div class="col-12">
                                            <h4 class="mb-2 d-flex align-items-center text-secondary fw-semibold p-2 bg-secondary-subtle rounded">
                                                <i class="fas fa-building me-2"></i>Saisissez les valeurs réalisées pour
                                                chaque extrant du projet
                                            </h4>
                                            <table class="table table-bordered border fs-6 align-middle">
                                                <thead class="table-light">
                                                <tr>
                                                    <th style="width: 25rem;">Indicateur</th>
                                                    <th>Unité</th>
                                                    <th>Valeur prévue</th>
                                                    <th>Valeur réalisée</th>
                                                    <th style="width: 20rem;">Commentaire</th>
                                                </tr>
                                                </thead>
                                                <tbody>
                                                {% for output in outputs %}
                                                    <tr data-output-id="{{ output.id }}">
                                                        <td class="fw-semibold">{{ output.name }}</td>
                                                        <td>
                                                            <span class="badge badge-outline-primary text-uppercase px-2 py-1">{{ output.unit|default('—') }}</span>
                                                        </td>
                                                        <td>
                                                            <input type="number"
                                                                   class="form-control-plaintext output-input text-end no-spinner w-100 m-0"
                                                                   value="{{ output.target|default('') }}"
                                                                   placeholder="Prévu..." step="1">
                                                        </td>
                                                        <td>
                                                            <input type="number"
                                                                   class="form-control-plaintext output-input text-end no-spinner w-100 m-0"
                                                                   value="{{ output.achieved|default('') }}"
                                                                   placeholder="Réalisé..." step="1">
                                                        </td>
                                                        <td>
                                                            <input type="text" size="40"
                                                                   class="form-control-plaintext m-0"
                                                                   placeholder="Commentaire...">
                                                        </td>
                                                    </tr>
                                                {% else %}
                                                    <tr>
                                                        <td colspan="5" class="text-center text-muted">Aucun indicateur
                                                            défini.
                                                        </td>
                                                    </tr>
                                                {% endfor %}
                                                </tbody>
                                            </table>
                                        </div>
                                    </div>
                                </form>
                            </div>
                            <div class="tab-pane fade" id="problems">
                                <div class="row">
                                    <div class="col-12">
                                        <h4 class="mb-2 d-flex align-items-center text-secondary fw-semibold p-2 bg-secondary-subtle rounded">
                                            <i class="mdi mdi-alert me-2"></i>Problèmes Actuels
                                        </h4>
                                        <div class="mb-3">
                                            {% include 'reported_problem/index.html.twig' %}
                                            {% include 'reported_problem/_modal_add_problem.html.twig' with {projectId : project.id} %}
                                            {% include 'reported_problem/_modal_display_problem.html.twig' %}
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="tab-pane fade" id="risks">
                                <div class="row">
                                    <div class="col-12">
                                        <h4 class="mb-2 d-flex align-items-center text-secondary fw-semibold p-2 bg-secondary-subtle rounded">
                                            <i class="mdi mdi-alert me-2"></i>Problèmes Actuels
                                        </h4>
                                        <div class="mb-3">
                                            {% include 'risk/index.html.twig' %}
                                            {% include 'risk/_modal_detail_risk.html.twig' %}
                                            {% include 'risk/_modal_add_risk.html.twig' with {projectId : project.id} %}
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <ul class="list-inline wizard mb-0">
                                <li class="previous list-inline-item">
                                    <button type="button"
                                            class="btn width-xl waves-effect rounded-pill btn-outline-primary"><i class="fe-arrow-left me-1"></i> Précédent
                                    </button>
                                </li>
                                <li class="next list-inline-item float-end">
                                    <button type="button"
                                            class="btn width-xl btn-primary waves-effect rounded-pill nextBtn">Suivant <i class="fe-arrow-right ms-1"></i>
                                    </button>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
{% endblock %}