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

{% block title %}{% endblock %}

{% block stylesheets %}
	{{ encore_entry_link_tags('user-show') }}
{% endblock %}

{% block javascripts %}
	{{ encore_entry_script_tags('user-show') }}
{% 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">
				<a href="">
					<i class="fa fa-home "></i>
				</a>
			</li>
			<li class="breadcrumb-item">
				<a href="{{ url('app_general_settings') }}">Paramètres</a>
			</li>
			<li class="breadcrumb-item">
				<a href="{{ url('app_organization_index') }}">Organisation</a>
			</li>
			<li class="breadcrumb-item">
				<a href="{{ url('app_user_index') }}">Utilisateurs</a>
			</li>
			<li class="breadcrumb-item active" aria-current="page">{{ user.firstname ?? '' }}
				{{ user.lastName ?? '' }}</li>
		</ol>
	</nav>
{% endblock %}

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

{% set containerType = 'container' %}
{% block content %}
	<div class="row mb-3">
		<div class="col-12">
			<div class="card rounded-top-4">
				<div class="card-header rounded-top-4">
					<div class="align-content-end pull-left">
						<a class="btn btn-link" href="{{ path('app_user_index') }}">
							<i class="mdi mdi-chevron-left"></i>
							Retour à la liste</a>
					</div>
				</div>
				<div class="card-body">
					<form method="POST" id="userDetailsForm" enctype="multipart/form-data" action="{{path('app_user_save')}}">
						<div class="row">
							<div class="col-12">
								<div class="mb-3">
									{% include 'partials/_image_upload.html.twig' with {
										path: user.avatar ? asset(user.avatar) : url('app_user_avatar', {id: user.id}),
										label: 'Avatar',
										name: 'avatar',
									}%}
								</div>
								<div class="mb-3">
									<label class="form-label">Sexe:
									</label>
									<div class="form-check form-check-inline ms-2">
										<input name="sex" value="Male" type="radio" id="customRadio1" required class="form-check-input form-check-blue" {% if user.sex == 'Male' %} checked {% endif %}>
										<label class="form-check-label " for="customRadio1">
											Homme
											<i class="mdi mdi-gender-male"></i>
										</label>
									</div>
									<div class="form-check form-check-inline ms-2">
										<input name="sex" value="Female" type="radio" id="customRadio2" required class="form-check-input form-check-pink" {% if user.sex == 'Female' %} checked {% endif %}>
										<label class="form-check-label " for="customRadio2">
											Femme
											<i class="mdi mdi-gender-female"></i>
										</label>
									</div>
								</div>
								<div class="mb-3">
									<label for="email" class="form-label">Email</label>
									<input class="form-control" id="email" name="email" value="{{user.email}}">
								</div>
								<div class="mb-3">
									<label for="firstName" class="form-label">Prénom</label>
									<input class="form-control" type="text" id="firstName" name="firstName" value="{{user.firstName}}" required>
								</div>
								<div class="mb-3">
									<label for="lastName" class="form-label">Nom</label>
									<input class="form-control" type="nom" id="lastName" name="lastName" value="{{user.lastName}}" required>
								</div>
								<div class="mb-3">
									<label for="phoneNumber" class="form-label">Numéro de téléphone</label>
									<input type="text" class="form-control" name="phoneNumber" value="{{ user.phoneNumber }}" required>
								</div>
								<div class="mb-3">
									<label for="dateOfBirth" class="form-label">Date de naissance</label>
									<input type="date" class="form-control" name="dateOfBirth" value="{{ user.dateOfBirth|date('Y-m-d') }}" required>
								</div>
								<div class="mb-3">
									<label for="fonction" class="form-label">Fonction</label>
									<input type="text" class="form-control" name="fonction" value="{{ user.fonction }}" required>
								</div>
								<div class="mb-3">
									<label for="department" class="form-label">Département</label>
									<select class="form-control" id="department" name="department" type="text" required>
										<option value="">-- Choisir --</option>
										{% for department in departments %}
											<option value="{{ department.id }}" {% if user.department is not null and department.id == user.department.id %} selected {% endif %}>
												{{ department.name }}
											</option>
										{% endfor %}
									</select>
								</div>
								<div class="mb-3">
									<label for="roles" class="form-label">Rôles</label>
									<div class="row" id="roles">
										{% set roleIds = [] %}
										{% for role in user.userRoles %}
											{% set roleIds = roleIds|merge([role.id]) %}
										{% endfor %}
										{% for role in roles %}
											<div>
												<div class="form-check form-switch">
													<input class="form-check-input" type="checkbox" id="role_{{ role.id }}" name="roles[]" value="{{ role.id }}" {% if role.id in roleIds %} checked {% endif %}>
													<label class="form-check-label" for="role_{{ role.id }}">{{ role.name }}</label>
												</div>
											</div>
										{% endfor %}
									</div>
								</div>
								<div class="mb-3">
									<input class="form-check-input" type="checkbox" id="isActive" name="isActive" {% if user.isActive == true %} checked {% endif %}>
									<label class="form-check-label" for="isActive">Statut du compte</label>
								</div>
								<div class="mb-3">
									<label for="createdAt" class="form-label">Date de création</label>
									<input type="text" class="form-control" id="createdAt" value="{{ user.createdAt|date('d/m/Y') }}" readonly disabled>
								</div>
								<div class="mb-3">
									<label for="lastLoginAt" class="form-label">Date dernière connexion</label>
									<input type="text" class="form-control" id="lastLoginAt" value="{{ user.lastLoginAt|date('d/m/Y') }}" readonly disabled>
								</div>
							</div>
						</div>
						<div class="row">
							<div class="col-12 text-center my-3">
								<button id="btnSave" type="submit" class="btn btn-primary rounded-pill width-xl">Enregister</button>
							</div>
						</div>
					</form>
				</div>
			</div>
		</div>
	</div>
{% endblock %}