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

{% block title %}{% endblock %}

{% block stylesheets %}
	{{ encore_entry_link_tags('project-settings') }}
{% endblock %}

{% block javascripts %}
	{{ encore_entry_script_tags('project-settings') }}
{% 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 active" aria-current="page">
				<a href="#">Créer un nouveau projet</a>
			</li>
		</ol>
	</nav>
{% endblock %}

{% set hasSidebar = false %}
{% block sidebar %}{% endblock %}

{% set containerType = 'container' %}
{% block content %}
	<div class="row" id="project-new-step-settings">
		<div class="col-12">
			<div class="card rounded-4 px-0">
				<div class="card-header rounded-top-4 p-0 px-2">
					<ul class="nav nav-pills card-header-pills nav-justified p-0">
						<li class="nav-item">
							<a href="javascript: void(0);" class="nav-link active rounded-0" style="border-top-left-radius: var(--bs-border-radius-xl) !important;">
								<i class="fa fa-list"></i>
								<span class="d-none d-sm-inline">Détails du projet</span>
							</a>
						</li>
						<li class="nav-item">
							<a href="javascript: void(0);" class="nav-link active rounded-0">
								<i class="fa fa-coins me-1"></i>
								<span class="d-none d-sm-inline">Budget</span>
							</a>
						</li>
						<li class="nav-item">
							<a href="javascript: void(0);" class="nav-link active rounded-0" style="border-top-right-radius: var(--bs-border-radius-xl) !important;">
								<i class="mdi mdi-checkbox-marked-circle-outline me-1"></i>
								<span class="d-none d-sm-inline">Réglages</span>
							</a>
						</li>
					</ul>
				</div>
				<div class="card-body">
					<form id="projectSettingsForm" action="{{ path('app_project_settings',{ acronym: project.acronym }) }}" method="POST">
						<div class="row">
							<div class="col-12 mb-3">
								<h5 class="text-primary">
									<i class="fa fa-chart-line me-2"></i>
									SAISIE DES AVANCEMENTS
								</h5>
								<div class="mb-3">
									<label for="frequencyType" class="form-label">{{ 'settings.frequency.label' | trans }}</label>
									<select id="frequencyType" name="frequency_type" class="form-control">
										<option value="weekly" {{ project_setting(project, 'frequency_type') == 'weekly' ? 'selected' : '' }}>{{ 'settings.frequency_type.weekly'|trans }}</option>
										<option value="twice-weekly" {{ project_setting(project, 'frequency_type') == 'twice-weekly' ? 'selected' : '' }}>{{ 'settings.frequency_type.twice-weekly'|trans }}</option>
										<option value="monthly" {{ project_setting(project, 'frequency_type') == 'monthly' ? 'selected' : '' }}>{{ 'settings.frequency_type.monthly'|trans }}</option>
										<option value="bi-monthly" {{ project_setting(project, 'frequency_type') == 'bi-monthly' ? 'selected' : '' }}>{{ 'settings.frequency_type.bi-monthly'|trans }}</option>
										<option value="quarterly" {{ project_setting(project, 'frequency_type') == 'quarterly' ? 'selected' : '' }}>{{ 'settings.frequency_type.quarterly'|trans }}</option>
										<option value="semi-annual" {{ project_setting(project, 'frequency_type') == 'semi-annual' ? 'selected' : '' }}>{{ 'settings.frequency_type.semi-annual'|trans }}</option>
										<option value="annual" {{ project_setting(project, 'frequency_type') == 'annual' ? 'selected' : '' }}>{{ 'settings.frequency_type.annual'|trans }}</option>
									</select>
								</div>
								<div id="weeklyConfig" class="mb-3 d-none">
									<label>Jours de la semaine :</label>
									<div class="day-checkboxes">
										{% for day in ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'] %}
											<div class="form-check form-check-inline rounded">
												<input type="radio" name="weekly_day" value="{{ day }}" class="form-check-input" id="{{ day }}" {{ project_setting(project, 'weekly_day') == day ? 'checked' : '' }}>
												<label class="form-check-label" for="{{ day }}">{{ day|trans }}</label>
											</div>
										{% endfor %}
									</div>
								</div>
								<div id="monthDayConfig" class="mb-3 d-none">
									<label>Jour du mois :</label>
									<select id="dayInMonth" name="day_in_month" class="form-control">
										{% for dayNumber in 1 .. 31 %}
											<option value="{{ dayNumber }}" {{ project_setting(project, 'day_in_month') == dayNumber ? 'selected' : '' }}>Le
												{{ dayNumber }}</option>
										{% endfor %}
									</select>
								</div>
							</div>
							<div class="col-12 mb-3">
								<h5 class="text-primary">
									<i class="fa fa-columns me-2"></i>
									TABLEAU KANBAN DES TÂCHES
								</h5>
								<p class="small text-muted">
									<i class="fa fa-info-circle"></i>
									Sélectionnez les statuts à afficher ou à masquer sur le tableau de bord du projet, en fonction de vos besoins.
								</p>
								<div class="row mt-2">
									{% for board_place in board_places %}
										<div class="col p-1">
											<div class="card border" aria-hidden="true">
												<div class="card-header placeholder-glow" style="height: 54px">
													<div class="form-check mb-2 form-check-primary">
														<label class="form-check-label fs-6">{{ board_place | trans }}</label>
														<input class="form-check-input workflow_place rounded-circle" name="hide_{{ board_place }}" data-workflow-place="{{ board_place }}" type="checkbox" {{ is_feature_enabled(project, 'hide_' ~ board_place) ?: 'checked' }}/>
													</div>
												</div>
												<div class="card-body p-1">
													<p class="card-text placeholder-glow p-0">
														<span class="placeholder col-8"></span>
														<span class="placeholder col-3 bg-primary"></span>
														<span class="placeholder col-5"></span>
														<span class="placeholder col-5"></span>
														<span class="placeholder col-2"></span>
														<span class="placeholder col-6 bg-transparent"></span>
														<span class="placeholder col-2"></span>
													</p>
												</div>
											</div>
										</div>
									{% endfor %}
								</div>
							</div>
							<div class="col-12 border-top pt-3">
								<button type="submit" class="btn float-end btn-primary rounded-pill waves-effect width-xl float-end">Enregistrer</button>
							</div>
						</div>
					</form>
				</div>
			</div>
		</div>
	</div>
{% endblock %}