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

{% block title %}{% endblock %}

{% block stylesheets %}
	{{ encore_entry_link_tags('report-generate') }}
{% endblock %}

{% block javascripts %}
	{{ encore_entry_script_tags('report-generate') }}
{% 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">Rapports</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">
		<div class="col-12">
			<div class="card rounded-4 shadow-sm">

				{% include 'project/partials/_project_card_header.html.twig' %}

				<div class="card-body rounded-4 py-3 px-3">

					<!-- Header -->
					<div class="d-flex justify-content-between align-items-center mb-2 flex-wrap gap-2">
						<h5 class="mb-0 text-body fw-semibold">
							<i class="mdi mdi-file-document-outline me-1 text-primary"></i> Rapports du projet
						</h5>

						<button class="btn btn-sm btn-primary rounded-pill px-3" id="generateReportBtn">
							<i class="mdi mdi-plus"></i> Nouveau
						</button>
					</div>

					<!-- KPIs -->
					<div class="row g-2 mb-3">
						<div class="col-6 col-sm-3">
							<div class="card bg-primary-subtle text-primary shadow-sm rounded-3 border-0 h-100">
								<div class="card-body text-center py-2 px-2">
									<div class="small text-uppercase fw-semibold">
										<i class="mdi mdi-file-document-multiple-outline me-1"></i> Rapports
									</div>
									<div class="h5 fw-bold mb-0" id="statistic-total">0</div>
								</div>
							</div>
						</div>
						<div class="col-6 col-sm-3">
							<div class="card bg-success-subtle text-success shadow-sm rounded-3 border-0 h-100">
								<div class="card-body text-center py-2 px-2">
									<div class="small text-uppercase fw-semibold">
										<i class="mdi mdi-check-circle-outline me-1"></i> Actif
									</div>
									<div class="h5 fw-bold mb-0" id="statistic-active">0</div>
								</div>
							</div>
						</div>
						<div class="col-6 col-sm-3">
							<div class="card bg-danger-subtle text-danger shadow-sm rounded-3 border-0 h-100">
								<div class="card-body text-center py-2 px-2">
									<div class="small text-uppercase fw-semibold">
										<i class="mdi mdi-alert-circle-outline me-1"></i> Inactif
									</div>
									<div class="h5 fw-bold mb-0" id="statistic-paused">0</div>
								</div>
							</div>
						</div>
						<div class="col-6 col-sm-3">
							<div class="card bg-secondary-subtle text-secondary shadow-sm rounded-3 border-0 h-100">
								<div class="card-body text-center py-2 px-2">
									<div class="small text-uppercase fw-semibold">
										<i class="mdi mdi-file-chart-outline me-1"></i> Fichiers
									</div>
									<div class="h5 fw-bold mb-0" id="statistic-files">0</div>
								</div>
							</div>
						</div>
					</div>

					<!-- Table -->
					<div class="table-responsive border rounded py-2">
						<table class="table table-sm table-hover align-middle mb-0" id="report-instance-table">
							<thead class="table-light small text-nowrap">
							<tr>
								<th>Nom</th>
								<th>Type</th>
								<th>Début</th>
								<th>Fin</th>
								<th>Statut</th>
								<th class="text-end">Actions</th>
							</tr>
							</thead>
							<tbody></tbody>
						</table>
					</div>
				</div>
			</div>
		</div>
	</div>

	{% include 'project/reports/_modal_add_report_instance.html.twig' %}

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