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

{% block title %}{% endblock %}

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

{% block javascripts %}
	{{ encore_entry_script_tags('user-profile') }}
{% 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_dashboard') }}" class="text-primary">
					<i class="fa fa-home me-1"></i>
					Accueil
				</a>
			</li>
			<li class="breadcrumb-item">
				<a href="{{ url('app_general_settings') }}">Paramètres</a>
			</li>
			<li class="breadcrumb-item " aria-current="page">Mon compte</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">
				<div class="card-header border-bottom">
					<h4>Réglages du compte</h4>
				</div>
				<div class="card-body">
					<form method="POST" id="accountSettingsForm" enctype="multipart/form-data" action="{{path('app_update_account')}}">
						<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: app.user.id}),
										label: 'Avatar',
										name: 'avatar',
									}%}
								</div>

								<div class="mb-3">
									<label for="dob-date" class="form-label">Nom Complet</label>
									<input class="form-control" type="text" disabled="true" value="{{ app.user.sex == 'Male' ? 'Monsieur' : 'Madame' }} {{ app.user.firstName }} {{ app.user.lastName }}">
								</div>
								<div class="mb-3">
									<label for="dob-date" class="form-label">Date de naissance</label>
									<input class="form-control" id="dob-date" type="date" value="{{ app.user.dateOfBirth|date('Y-m-d') }}" name="dateOfBirth">
								</div>
								<div class="mb-3">
									<label for="phoneNumber" class="form-label">Département</label>
									<div class="m-0 border-0">
										<span class="badge text-bg-primary fs-5">{{app.user.department is not null ? app.user.department.name : ''}}</span>
									</div>
								</div>
								<div class="mb-3">
									<label for="phoneNumber" class="form-label">Ma fonction</label>
									<input type="text" class="form-control" name="fonction" value="{{ app.user.fonction }}" required>
								</div>
								<div class="mb-3">
									<label for="phoneNumber" class="form-label">Mon numéro de téléphone</label>
									<input type="text" class="form-control" name="phoneNumber" value="{{ app.user.phoneNumber }}" required>
								</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>
								<button id="btnSaveLoading" class="btn rounded-pill btn-primary width-xl d-none " disabled type="button">
									<span class="spinner-border spinner-border-sm me-1" role="status" aria-hidden="true"></span>
								</button>
							</div>
						</div>
					</form>
				</div>
			</div>
		</div>
	</div>
	<div class="row">
		<div class="col-12">
			<div class="card">
				<div class="card-header border-bottom">
					<h4>Changer le mot de passe</h4>
				</div>
				<div class="card-body">
					<form id="passwordChangeForm" action="{{path('user_change_password')}}" method="POST">
						<div class="col-12">
							<div class="mb-1">
								<label for="password" class="form-label">Mot de passe actuel</label>
								<div class="input-group input-group-merge">
									<input type="password" id="currentPassword" name="currentPassword" class="form-control" placeholder="Mot de passe actuel">
									<div class="input-group-text" data-password="false">
										<span class="password-eye"></span>
									</div>
								</div>
							</div>
							<div class="mb-1">
								<label for="password" class="form-label">Nouveau mot de passe</label>
								<div class="input-group input-group-merge">
									<input type="password" id="newPassword" name="newPassword" class="form-control" placeholder="Nouveau mot de passe">
									<div class="input-group-text" data-password="false">
										<span class="password-eye"></span>
									</div>
								</div>
							</div>
							<div class="mb-1">
								<label for="password" class="form-label">Confirmation</label>
								<div class="input-group input-group-merge">
									<input type="password" id="confirmPassword" name="confirmPassword" class="form-control" placeholder="Confirmation nouveau mot de passe">
									<div class="input-group-text" data-password="false">
										<span class="password-eye"></span>
									</div>
								</div>
							</div>
							<div class="row">
								<div class="col text-center my-3">
									<button id="btnCpLoading" class="btn rounded-pill btn-primary width-xl d-none " disabled type="button">
										<span class="spinner-border spinner-border-sm me-1" role="status" aria-hidden="true"></span>
									</button>
									<button id="sbmt_cp" type="submit" class="btn btn-primary rounded-pill width-xl">Enregistrer</button>
								</div>
							</div>
						</div>
					</form>
				</div>
			</div>
		</div>
	</div>
{% endblock %}