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

{% block title %}{% endblock %}

{% block stylesheets %}
	{{ encore_entry_link_tags('project-details') }}
	{{ encore_entry_link_tags('reported_problems') }}
	{{ encore_entry_link_tags('budget-tracking') }}
{% endblock %}

{% block javascripts %}
	{{ encore_entry_script_tags('project-details') }}
	{{ encore_entry_script_tags('reported_problems') }}
	{{ encore_entry_script_tags('budget-tracking') }}
{% 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="row">
		<div class="col-12">
			<div class="card rounded-4">
				{% include 'project/partials/_project_card_header.html.twig' %}
				<div class="card-body mb-3">
					<div class="row">
						<div class="col-12 col-md-6">
							<div class="col-6 mb-2">
								<h5 class="font-600 m-b-5">Nom du projet</h5>
								<a href="#" id="name" data-type="text" data-pk="1" data-url="{{ path('app_project_update', {id: project.id}) }}" data-title="Nom du projet">{{ project.name }}</a>
							</div>
							<div class="col-6 mb-2">
								<h5 class="font-600 m-b-5">Type de projet</h5>
								<a href="#" id="type" data-pk="1" data-url="{{ path('app_project_update', {id: project.id}) }}" data-type="select" data-value="{{ project.type | trans }}">{{ project.type | trans }}</a>
							</div>
						</div>
						<div class="col-12 col-md-6">
							<div class="col-6 mb-2">
								<h5 class="font-600 m-b-5">Date de début</h5>
								<a href="#" id="startDate" data-type="combodate" data-url="{{ path('app_project_update', {id: project.id}) }}" data-value="{{ project.startDate ? project.startDate|date('Y-m-d') : '' }}" data-format="YYYY-MM-DD" data-viewformat="DD/MM/YYYY" data-template="D / MMM / YYYY" data-pk="1" data-title="Choisir la date de début"></a>
							</div>
							<div class="col-6 mb-2">
								<h5 class="font-600 m-b-5">Date de fin</h5>
								<a href="#" id="endDate" data-type="combodate" data-url="{{ path('app_project_update', {id: project.id}) }}" data-value="{{ project.endDate ? project.endDate|date('Y-m-d') : '' }}" data-format="YYYY-MM-DD" data-viewformat="DD/MM/YYYY" data-template="D / MMM / YYYY" data-pk="1" data-title="Choisir la date de fin"></a>
							</div>
						</div>
					</div>
					<div class="row">
						<div class="col-6 mb-2">
							<h5>Responsables / Chef de projet</h5>
							<div class="dropdown">
								<span class="add-new-plus btn-outline-primary cursor-pointer" id="responsibleDropdown" data-bs-toggle="dropdown" aria-expanded="false" data-bs-auto-close="false">
									<i class="mdi mdi-swap-horizontal-bold"></i>
								</span>
								<div class="dropdown-menu w-75 p-1" id="responsibleList">
									<select class="form-select" id="projectResponsible" name="responsible" placeholder="Veuillez sélectionner le responsable." required></select>
								</div>
								{% if project.responsible is not null %}
									<a href="#" class="rounded-circle avatar-sm" id="responsible-avatar" data-bs-toggle="tooltip" data-bs-placement="top" title="{{ project.responsible.firstname }} {{ project.responsible.lastname }}">
										<img src="{{ project.responsible.avatar ? asset(project.responsible.avatar) : url('app_user_avatar', {id : project.responsible.id}) }}" class="rounded-circle avatar-sm"/>
									</a>
								{% endif %}
							</div>
						</div>
						<div class="col-6 mb-2">
							<h5>Chargé de suivi</h5>
							<div class="dropdown">
								<span class="add-new-plus btn-outline-primary cursor-pointer" id="monitorDropdown" data-bs-toggle="dropdown" aria-expanded="false" data-bs-auto-close="false">
									<i class="mdi mdi-swap-horizontal-bold"></i>
								</span>
								<div class="dropdown-menu w-75 p-1" id="monitorList">
									<select class="form-select" id="projectMonitor" name="monitor" placeholder="Veuillez sélectionner le chargé de suivi." required></select>
								</div>
								{% if project.monitor is not null %}
									<a href="#" class="rounded-circle avatar-sm" id="monitor-avatar" data-bs-toggle="tooltip" data-bs-placement="top" title="{{ project.monitor.firstname }} {{ project.monitor.lastname }}">
										<img src="{{ project.monitor.avatar ? asset(project.monitor.avatar) : url('app_user_avatar', {id : project.monitor.id}) }}" class="rounded-circle avatar-sm"/>
									</a>
								{% endif %}
							</div>
						</div>
					</div>
					<div class="row">
						<div class="col-12 mb-2">
							<h5>État d'avancement</h5>
							<div class="progress rounded-4" style="height: 15px;">
								<div class="progress-bar progress-bar-animated bg-primary" role="progressbar" style="width:{{ project.progress }}%" aria-valuenow="{{ project.progress }}" aria-valuemin="0" aria-valuemax="100">{{ project.progress | round }}%</div>
							</div>
						</div>
					</div>
					<div class="row">
						<div class="col-12">
							<h5 class="font-600 m-b-5">Description</h5>
							<div id="projectDescriptionQuill" style="min-height:75px;">
								{{ project.description | raw }}
							</div>
							<div class="mb-2 mt-1 position-absolute" style="right: 25px!important">
								<button data-bs-toggle="tooltip" data-bs-placement="bottom" title="Modifier la description" id="editDescription" class="btn btn-outline-primary btn-sm rounded-pill">
									<i class="mdi mdi-file-edit"></i>
								</button>
								<button data-bs-toggle="tooltip" data-bs-placement="bottom" title="Enregistrer" id="saveDescription" class="d-none btn btn-success btn-sm rounded-pill">
									<i class="mdi mdi-check"></i>
								</button>
								<button id="closeDescription" class="d-none btn btn-danger btn-sm rounded-pill">
									<i class="mdi mdi-close"></i>
								</button>
								<div id="descrSaveLoading" class="d-none spinner-border spinner-border-sm text-primary" role="status">
									<span class="visually-hidden">Loading...</span>
								</div>
							</div>
						</div>
					</div>
					<div class="row" style="margin-top: 8rem;">
						<div class="col-12">
							<h4 class="mb-1 d-flex align-items-center text-secondary fw-semibold p-2 bg-secondary-subtle rounded">
								<i class="fa fa-coins me-2"></i>
								Suvi budgétaire du projet
							</h4>
							{% include 'budget/totals_block.html.twig' with {object:project} %}
						</div>
					</div>
					<div class="row mt-3">
						<div class="col-12">
							<ul class="nav nav-tabs nav-bordered">
								<li class="nav-item">
									<a href="#document_tab" data-bs-toggle="tab" aria-expanded="false" class="nav-link fs-6 fw-lighter active">
										<i class="mdi mdi-paperclip"></i>
										Documents
									</a>
								</li>
								<li class="nav-item">
									<a href="#stakeholders_tab" data-bs-toggle="tab" aria-expanded="false" class="nav-link fs-6 fw-lighter ">
										<i class="fe-users"></i>
										Parties prenantes
									</a>
								</li>
								<li class="nav-item">
									<a href="#reported_problems_tab" data-bs-toggle="tab" aria-expanded="false" class="nav-link fs-6 fw-lighter">
										<i class="fe-alert-triangle"></i>
										Problèmes rapportés
									</a>
								</li>
								<li class="nav-item">
									<a href="#comments_tab" data-bs-toggle="tab" aria-expanded="false" class="nav-link fs-6 fw-lighter">
										<i class="fa fa-comments"></i>
										Commentaires
									</a>
								</li>
							</ul>
							<div class="tab-content h-100">
								<div class="tab-pane active" id="document_tab">
									{% include 'partials/_document_dropzone.html.twig' with { id: project.id, type : 'project', acronym: project.acronym } %}
								</div>
								<div class="tab-pane" id="stakeholders_tab">
									{% include 'stakeholders/index.html.twig' %}
									{% include 'stakeholders/_modal_add_stakeholder.html.twig' %}
								</div>
								<div class="tab-pane" id="reported_problems_tab">
									{% 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 class="tab-pane" id="comments_tab">
									<div class="w-100">
										{% include 'project/detail/comments_tab.html.twig' %}
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>

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