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

{% block title %}{% endblock %}

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

{% block javascripts %}
	{{ encore_entry_script_tags('report-details') }}
	{{ encore_entry_script_tags('pdf_viewer') }}
	{{ encore_entry_script_tags('pdf_viewer_modal') }}
{% 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_reports', {acronym: project.acronym}) }}">Rapports</a>
			</li>
			<li class="breadcrumb-item active" aria-current="page">{{ report.title }}</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>
		</div>
	</div>

	<div class="row">
		<div class="col-12">
			<div class="card rounded-4 shadow-sm">
				<div class="card-body">
					<div class="mb-3">
						<a href="{{ path('app_project_reports', { acronym: project.acronym }) }}" class="btn btn-sm btn-outline-secondary rounded-pill">
							<i class="mdi mdi-arrow-left"></i>
							Retour aux rapports
						</a>
					</div>
					<h3 class="mb-2">{{ project.name }}</h3>
					<div class="d-flex flex-wrap align-items-center gap-3">
						<span id="badge-status" class="badge {{ report.isActive ? 'bg-success' : 'bg-warning'}} rounded-pill px-2 py-1">
							<i class="mdi {{ report.isActive ? 'mdi-play-circle' : 'mdi-pause-circle' }}"></i>
							<span>{{ report.isActive ? 'Actif' : 'Inactif' }}</span>
						</span>
						<span class="text-muted">
							<i class="mdi mdi-calendar-range me-1"></i>
							{{ 'Période' }}
							:
							{{ report.periodStart ? report.periodStart|date('d/m/Y') : '—' }}
							→
							{{ report.periodEnd ? report.periodEnd|date('d/m/Y') : '—' }}
						</span>
						<span class="text-muted">
							<i class="mdi mdi-update me-1"></i>
							{{ report.updatedAt|date('d/m/Y H:i') }}
						</span>
					</div>
				</div>
			</div>
		</div>
	</div>

	<div class="row">
		<div class="col-12">
			<div class="card rounded-4 shadow-sm">
				<div class="card-header rounded-top-4">
					<h5 class="mb-0">
						<i class="mdi mdi-cog me-2"></i>Configuration du rapport
					</h5>
				</div>
				<div class="card-body">
					<div class="row g-3 mb-4">
						<div class="col-md-6">
							<div class="border-start border-primary border-4 bg-light p-2">
								<small class="text-muted text-uppercase fw-bold">Type de rapport</small>
								<div class="fw-semibold mt-1">
									{{ ('report.templates.' ~ report.templateCode|lower)| trans }}
								</div>
							</div>
						</div>
						<div class="col-md-6">
							<div class="border-start border-primary border-4 bg-light p-2">
								<small class="text-muted text-uppercase fw-bold">Identifiant</small>
								<div class="fw-semibold mt-1">{{ '#' ~ report.id }}</div>
							</div>
						</div>
					</div>

					<h6 class="text-uppercase text-muted fw-bold border-bottom pb-1">
						Blocs à inclure
					</h6>
					<div class="d-flex flex-wrap gap-2 mb-4">
						{% for cap, value in templateMeta.capabilities %}
							{% set on = report.payload.include[cap] ?? false %}
							<span class="badge rounded-pill {{ on ? 'bg-primary' : 'bg-secondary' }} p-1">
								<i class="mdi {{ on ? 'mdi-check-circle-outline' : 'mdi-close-circle-outline' }}"></i>
								{{ ('report.includes.' ~ cap)|trans }}
							</span>
						{% endfor %}
					</div>

					<h6 class="text-uppercase text-muted fw-bold border-bottom pb-1">
						Graphiques à inclure
					</h6>
					<div class="d-flex flex-wrap gap-2 mb-4">
						{% for chart in templateMeta.charts %}
							<span class="badge rounded-pill bg-primary p-1">
								<i class="mdi mdi-chart-areaspline"></i>
								{{ ('report.charts.' ~ chart)|trans }}
							</span>
						{% endfor %}
					</div>


					<div class="d-flex justify-content-start align-items-end border-top pt-1">
						<div class="me-2">
							<strong class="text-muted">Format :</strong>
							<span>
								<i class="mdi mdi-file-pdf text-danger" style="font-size: 1rem;"></i>
							</span>
						</div>

						<div>
							<strong class="text-muted">Langue :</strong>
							<span>
								{% if report.payload.include.lang is defined %}
									{{ report.payload.include.lang|upper }}
								{% endif %}
							</span>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>

	<div class="row">
		<div class="col-12">
			<div class="card rounded-4 shadow-sm mb-4">
				<div class="card-header rounded-top-4">
					<h5 class="mb-0">
						<i class="mdi mdi-calendar-clock me-2"></i>Planification
					</h5>
				</div>
				<div class="card-body">
					<div class="bg-success-subtle rounded-2 p-2 mb-3">
						<strong>Fréquence :</strong><br>
						{{ report.rrule ? (report.rrule|rrule_to_human) : '' }}
					</div>

					<div class="bg-light rounded-2 p-2 mb-3">
						<strong>Rrule :</strong><br>
						<code class="d-block bg-dark text-success p-3 rounded mt-2">{{ report.rrule }}</code>
					</div>

					<div class="d-flex justify-content-end gap-2">
						<button type="button" class="btn btn-primary btn-sm rounded-pill" id="reportUpdateBtn" data-report-id="{{ report.id}}">
							<i class="mdi mdi-eye-outline"></i>
							Modifier
						</button>
						<button type="button" class="btn {{ report.isActive ? 'btn-warning' : 'btn-success'}} btn-sm rounded-pill" id="pauseReportBtn" data-report-id="{{ report.id}}" data-report-active="{{ report.isActive}}">
							<i class="mdi {{ report.isActive ? 'mdi-pause-circle' : 'mdi-play-circle' }} me-1"></i>
							<span>{{ report.isActive ? 'Mettre en pause' : 'Activer'}}</span>
						</button>
					</div>
				</div>
			</div>
		</div>
	</div>

	<div class="row">
		<div class="col-12">
			<div class="card rounded-4 shadow-sm mb-4">
				<div class="card-header rounded-top-4 d-flex justify-content-between align-items-center">
					<h5 class="mb-0">
						<i class="mdi mdi-folder-outline me-2"></i>Rapports générés
					</h5>
					<div class="d-flex">
						<button type="button" class="btn btn-icon btn-outline-primary btn-sm rounded-pill me-2" id="refreshReportFileTable">
							<i class="mdi mdi-reload me-2"></i> Rafraîchir
						</button>
						<button class="btn btn-primary btn-sm rounded-pill" id="manuel-generate-report" data-report-id="{{ report.id }}">
							<i class="mdi mdi-clock-outline me-2"></i>
							Générer Manuellement
						</button>
					</div>
				</div>
				<div class="card-body">
					<div class="row">
						<div class="col-12">
							<div class="table-responsive">
								<table id="reportFileTable" class="table table-hover align-middle mb-0">
									<thead>
										<tr>
											<th>Nom</th>
											<th>Date de génération</th>
											<th>Format</th>
											<th>Type</th>
											<th>Actions</th>
										</tr>
									</thead>
									<tbody></tbody>
								</table>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>

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

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