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

{% block title %}{% endblock %}

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

{% block javascripts %}
	{{ encore_entry_script_tags('report_progression') }}
{% 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">
				<a href="{{ url('app_project_followup', { acronym: project.acronym }) }}">Projet :
					{{ project.acronym }}</a>
			</li>
			<li class="breadcrumb-item active" aria-current="page">Suivi Évaluation</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' %}
				{% if activities is empty %}
					<div class="kanban-box text-center p-2 border shadow-sm bg-light py-5">
						<div class="mb-3">
							<i class="mdi mdi-calendar-alert mdi-48px text-muted"></i>
						</div>
						<p class="fs-5 text-muted">Pas d'activité pour le moment.</p>
					</div>
				{% else %}
					<form id="report-progression-form" method="post" action="{{ path('app_report_progression_submit', {id: project.id}) }}" class="mb-4">
						<div class="table-responsive-horizontal ">
							<table class="table bg-white table-bordered fs-6">
								<thead>
									<tr>
										<th class="sticky-col bg-white" style="width: 200px; z-index: 2;">Activité</th>
										{% for month, mothName in monthNames %}
											<th style="min-width: 50px;border-left: 1px solid currentColor;" class="text-primary-emphasis">Planifié
												{{ mothName|trans }}
												{{ month|date('Y') }}</th>
											<th style="min-width: 50px;border-right: 1px solid currentColor;" class="">Réalisé
												{{ mothName|trans }}
												{{ month|date('Y') }}</th>
										{% endfor %}
										{% if currentMonth %}
											<th style="min-width: 75px;" class="text-info-emphasis">Cible
												{{ (currentMonth)|date('M')|trans }}
												{{ currentMonth|date('Y') }}</th>
											<th style="min-width: 75px;"></th>
										{% endif %}
									</tr>
								</thead>
								<tbody>
									{% for activity in activities %}
										{% set lastPlanned = null %}
										{% set lastActual = null %}
										<tr>
											<td class="activity-label sticky-col bg-white" style="z-index: 2;">{{ activity.name }}</td>
											{% for month in months %}
												{% set milestone = milestones[activity.id][month|date('Y-m')] ?? null %}
												{% if milestone and milestone.plannedProgress is not null %}
													{% set lastPlanned = milestone.plannedProgress ?? 0 %}
													{% set lastActual = milestone.actualProgress ?? 0 %}
													<td class="bg-white px-0" style="border-left: 1px solid currentColor;">
														<input class="form-control-plaintext text-center text-primary-emphasis p-0 m-0" type="text" name="progress[planned][{{ milestone.id }}]" value="{{ milestone.plannedProgress }} %" disabled>
													</td>
													<td class="bg-white px-0" style="border-right: 1px solid currentColor;">
														<div class="d-inline-flex align-items-center justify-content-center position-relative percent-input-wrapper">
															<input class="form-control-plaintext text-center p-0 m-0 no-spinner percent-input" type="number" name="progress[actual][{{ milestone.id }}]" value="{{ milestone.actualProgress ?? '' }}" placeholder="NR" min="0" max="100" step="1">
															<span class="percent-sign">
																{% if milestone.actualProgress %}
																	%
																{% endif %}
															</span>
														</div>
													</td>
												{% else %}
													<td class="bg-soft-light px-0" style="border-left: 1px solid currentColor;">
														<input class="form-control-plaintext text-center text-primary-emphasis p-0 m-0" type="text" disabled>
													</td>
													<td class="bg-soft-light px-0" style="border-right: 1px solid currentColor;">
														<input class="form-control-plaintext text-center text-primary-emphasis p-0 m-0" type="text" disabled>
													</td>
												{% endif %}
											{% endfor %}
											<!-- Ciblage actual month -->
											{% set currentMilestone = milestones[activity.id][currentMonth|date('Y-m')] ?? null %}
											{% if currentMilestone  is not null %}
												<td class="bg-white px-0 text-info-emphasis" style="border-left: 1px solid currentColor;">
													<div class="d-inline-flex align-items-center justify-content-center position-relative percent-input-wrapper">
														<input class="form-control-plaintext text-center p-0 m-0 no-spinner percent-input text-info-emphasis" type="number" name="progress[target][{{ currentMilestone.id }}]" placeholder="NR" value="{{ currentMilestone.expectedNextProgress ?? '' }}" min="0" max="100" step="1">
														<span class="percent-sign text-info-emphasis">
															{% if currentMilestone.expectedNextProgress %}
																%
															{% endif %}
														</span>
													</div>
												</td>
											{% else %}
												<td class="bg-soft-light px-0">
													<input class="form-control-plaintext text-center text-primary-emphasis p-0 m-0" type="text" disabled>
												</td>
											{% endif %}
											<!-- Dont remove -->
											<td></td>
										</tr>
									{% endfor %}
								</tbody>
							</table>
						</div>
						<button type="submit" class="btn width-xl rounded-pill waves-effect btn-primary float-end me-3">Enregistrer</button>
					</form>
				{% endif %}
			</div>
		</div>
	</div>
	<div class="action-bar d-flex justify-content-around align-items-center">
		{{ project_action_buttons(project) }}
	</div>
{% endblock %}