{% extends 'base.html.twig' %}

{% block stylesheets %}
	<link rel="stylesheet" href="{{asset('css/user.css')}}">

	<link
	rel="stylesheet" href="{{ asset('css/partial.css') }}">

	<!-- SITE TITTLE -->
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.1/css/all.min.css"/>
	<link
	rel="stylesheet" href="https://maxst.icons8.com/vue-static/landings/line-awesome/line-awesome/1.3.0/css/line-awesome.min.css"/>

	<!-- Bootstrap -->
	<link href="https://cdn.jsdelivr.net/npm/bootstrap@4.4.1/dist/css/bootstrap.min.css" rel="stylesheet">
	<link
	href="plugins/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet"/>

	<!-- Font Awesome -->
	<link href="plugins/font-awesome/css/font-awesome.min.css" rel="stylesheet"/>
	<link href="plugins/jquery-nice-select/css/nice-select.css" rel="stylesheet"/>
	<link href="plugins/seiyria-bootstrap-slider/dist/css/bootstrap-slider.min.css" rel="stylesheet"/>
	<!-- CUSTOM CSS -->

	<!-- FAVICON -->
<link href="img/favicon.png" rel="shortcut icon"> <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
	<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
	<!--[if lt IE 9]><![endif]-->

<style>
		body {
			color: #1a202c;
			text-align: left;
			background-color: #e2e8f0;
		}
		.main-body {
			padding: 15px;
		}

		.navbar-expand-lg {
			justify-content: space-between;
		}

		.navbar {
			padding-top: 50px;
			padding-bottom: 50px;
		}

		.nav-link {
			color: #4a5568;
		}
		.card {
			box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
		}

		.card {
			position: relative;
			display: flex;
			flex-direction: column;
			min-width: 0;
			word-wrap: break-word;
			background-color: #fff;
			background-clip: border-box;
			border: 0 solid rgba(0, 0, 0, 0.125);
			border-radius: 0.25rem;
		}

		.card-body {
			flex: 1 1 auto;
			min-height: 1px;
			padding: 1rem;
		}

		.gutters-sm {
			margin-right: -8px;
			margin-left: -8px;
		}

		.gutters-sm > .col,
		.gutters-sm > [class*=col-] {
			padding-right: 8px;
			padding-left: 8px;
		}
		.mb-3,
		.my-3 {
			margin-bottom: 1rem !important;
		}

		.bg-gray-300 {
			background-color: #e2e8f0;
		}
		.h-100 {
			height: 100% !important;
		}
		.shadow-none {
			box-shadow: none !important;
		}

		.user-delete-modal {
			width: 50%;
			height: 600px;
		}

		.user-delete-modal label {
			color: white;
		}

		.user-delete-modal p {
			color: white;
			font-size: inherit;
		}

		.modal-header {
			border-bottom: none;
		}

		/* toggle styling starts here */
		/* hide the "default" checkbox/appearance */
		/* reset */
		* {
			margin: 0;
			padding: 0;
		}
		label {
			font-size: inherit;
		}

		.toggle-checkbox {
			display: none;
		}

		.slider {
			position: relative;
		}

		/* ellipsis */
		.slider::before {
			background: #aeb0af;
			border-radius: 10%;
			boder: 1px solid #aeb0af;
			bottom: 0;
			content: '';
			height: 24px;
			margin: auto;
			position: absolute;
			top: 0;
			width: 45px;
		}

		/* circle */
		.slider::after {
			background: white;
			border-radius: 10%;
			bottom: 0;
			content: '';
			height: 22px;
			left: 1px;
			margin: auto;
			position: absolute;
			top: 0;
			transition: 0.4s;
			width: 16px;
		}
		label.slider:hover {
			cursor: pointer;
		}

		.toggle-switch {
			margin-left: 50px;
		}

		.toggle-switch.on {
			display: none;
		}

		.toggle-checkbox:checked + .slider::before {
			background-color: #007bff;
		}

		.toggle-checkbox:checked + .slider::after {
			background-color: white;
			left: 12px;
			transform: translateX(16px);
		}

		.toggle-checkbox:checked ~ .slider > .toggle-switch.off {
			display: none;
		}

		.toggle-checkbox:checked ~ .slider > .toggle-switch.on {
			display: inline-block;
		}

		.container-edite {

			width: 74%;
		}
	</style>


{% endblock %}
{% block title %}Paramètre du compte{% endblock %}
	

{% block body %}
	<!-- Navigation -->
	<nav class="navbar navbar-expand-lg p-0">
		<div class="navbar-brand p-0">
			
				<strong>Paramètres</strong>
			
		</div>
		
		<ul class="navbar-nav" id="navigation">
			<div class="menu">
				<li class="nav-item p-0">
					<a class="nav-link-back" href="{{ path('users', {'slug': user.slug}) }}">Profil</a>
				</li>
				<li class="nav-item p-0">
					<i class="fas fa-chevron-right"></i>
				</li>
				<li class="nav-item p-0">
					<span class="active-page">Paramètres</span>
				</li>
				<li class="nav-item p-0">
					<!-- Notifications -->
				
	
				<!-- Notifications -->
				</li>
			</div>
		</ul>
		<!-- flex element -->
		<div>
		</div>
		<!-- flex element -->
	</nav>
	<!-- Navigation -->

	<div class="body-wrapper" style="display:flex;justify-content: center;align-items: center;">
		
		{% if app.user == user %}


			<div class="container-edite">


				<div class="row gutters-sm">
					<div class="col-md-4 d-none d-md-block">
						<div class="card">
							<div class="card-body">
								<nav class="nav flex-column nav-pills nav-gap-y-1">
									<a href="#profile" data-toggle="tab" class="nav-item nav-link has-icon nav-link-faded {{ app.session.get('tab_security_flag') == true ? '' : 'active' }}">
										<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-user mr-2">
											<path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path>
											<circle cx="12" cy="7" r="4"></circle>
										</svg>PROFIL
									</a>
									<a href="#security" data-toggle="tab" class="nav-item nav-link has-icon nav-link-faded {{ app.session.get('tab_security_flag') == true ? 'active' : '' }}">
										<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-shield mr-2">
											<path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"></path>
										</svg>SECURITE
									</a>
									<a href="#subscription" data-toggle="tab" class="nav-item nav-link has-icon nav-link-faded">
										<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-credit-card mr-2">
											<rect x="1" y="4" width="22" height="16" rx="2" ry="2"></rect><line x1="1" y1="10" x2="23" y2="10"></line>
										</svg>ABONNEMENT
									</a>
									<a href="#account" data-toggle="tab" class="nav-item nav-link has-icon nav-link-faded">
										<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-settings mr-2">
											<circle cx="12" cy="12" r="3"></circle>
											<path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path>
										</svg>COMPTE
									</a>

								</nav>
							</div>
						</div>
					</div>
					<div class="col-md-8">
						<div class="card">
							<div class="card-header border-bottom mb-3 d-flex d-md-none">
								<ul class="nav nav-tabs card-header-tabs nav-gap-x-1" role="tablist">
									<li class="nav-item">
										<a href="#profile" data-toggle="tab" class="nav-link has-icon active">
											<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-user">
												<path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path>
												<circle cx="12" cy="7" r="4"></circle>
											</svg>
										</a>
									</li>

									<li class="nav-item">
										<a href="#security" data-toggle="tab" class="nav-link has-icon {{ app.session.get('tab_security_flag') == true ? 'active' : '' }}">
											<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-shield">
												<path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"></path>
											</svg>
										</a>
									</li>

									<li class="nav-item">
										<a href="#subscription" data-toggle="tab" class="nav-link has-icon {{ app.session.get('tab_security_flag') == true ? 'active' : '' }}">
											<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-credit-card mr-2">
												<rect x="1" y="4" width="22" height="16" rx="2" ry="2"></rect><line x1="1" y1="10" x2="23" y2="10"></line>
											</svg>
										</a>
									</li>
									
									<li class="nav-item">
										<a href="#account" data-toggle="tab" class="nav-link has-icon">
											<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-settings">
												<circle cx="12" cy="12" r="3"></circle>
												<path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path>
											</svg>
										</a>
									</li>



								</ul>
							</div>
							<div class="card-body tab-content">
								<div class="tab-pane {{ app.session.get('tab_security_flag') == true ? '' : 'active' }}" id="profile">
									<h6>MES INFORMATIONS</h6>
									<hr>

									{{ form_start(form) }}

									<div class="mb-5">
										{{ include('partials/_flash.htlm.twig') }}
										{% if is_granted('ROLE_USER_FREE') %}
											<div class="alert alert-warning text-center">
												Passez à l'offre premium afin de pouvoir modifier vos informations.
											</div>
										{% endif %}										


										{# Si la route est "annonces_edit on affiche l'avatar #}
										{% if app.request.attributes.get('_route') == 'users_profil_modify' %}
											<div class="container-avatar">
												{% if user.avatar == null %}
													<img class="user_avatar_modify" src="{{ ('/images/img/user-default-picture.png') }}" alt="default-avatar" width="150">
												{% else %}
													<img class="user_avatar_modify" src="{{ ('/uploads/images/users/' ~ user.avatar.name) }}" alt="{{(user.firstname)}}-{{(user.name)}}" width="150">
												{# On ajoute un lien permettant de supprimer une image (sera géré en Ajax) #}
													{# <a href="{{ path('users_account_delete_avatar', {'id': user.avatar.id})}}" data-delete data-token="{{ csrf_token('delete' ~ user.avatar.id )}}">Supprimer</a> #}

												{% endif %}

											</div>
										{% endif %}


										<div class="form-group">
											{{ form_row(form.avatar) }}
										</div>
										<!-- Status -->
										<div class="form-group" id="edit_profile_status">
											<div class="edit-status-type">
												<p>Vous êtes professionnel?</p>
												{{ form_widget(form.statut.type) }}
												<label class="slider" for="edit_profile_statut_type">
													<span class="toggle-switch off">NON</span>
													<span class="toggle-switch on">OUI</span>
												</label>
											</div>


											{% if form.statut.content is defined %}
												<div class="status-content form-group">
													{{ form_widget(form.statut.content) }}
												</div>
											{% endif %}
										</div>

									</div>

									<!-- First Name -->
									<div class="form-group">
										<p for="first-name">Prénom</p>
										{{ form_row(form.firstname) }}
									</div>
									<!-- Last Name -->
									<div class="form-group">
										<p for="last-name">Nom</p>
										{{ form_row(form.name) }}
									</div>
									<!-- country -->
									<div class="form-group mb-5">
										<p for="phone">Pays de résidence</p>
										{{ form_row(form.country) }}
									</div>

									{# Active submit button if the user is a premium user #}
									{% if is_granted('ROLE_USER_PREMIUM') %}
										<!-- Submit button -->
										<div class="form-group mb-5">
											{{ form_row(form.enregistrer) }}
										</div>
									{{ form_end(form) }}
									{% endif %}
									
									
								</div>


								<div class="tab-pane {{ app.session.get('tab_security_flag') == true ? 'active' : '' }}" id="security">

									<h6>INFORMATIONS DE S&EacuteCURIT&Eacute</h6>
									<hr>
									<form action="{{ path('users_phone_update') }}" method="post">
										<div class="form-group">
											<label class="d-block">Modifier votre numéro de téléphone</label>
											<input type="text" class="form-control" name="update_phone[phone]" value={{ user.phone }}>
											<input type="hidden" name="_csrf_token" value="{{ csrf_token('updatePhone') }}">
										</div>
										<div class="input-errors">
											{% if app.session.get('errors')['phone'] is defined %}
												<div class="alert alert-danger">
													{{ app.session.get('errors')['phone'] }}
												</div>
											{% endif %}
										</div>
										<div>
											<button type="submit" class="btn btn-secondary btn-sm">Changer mon numéro</button>
										</div>
									</form>
									<hr>
									<form action="{{ path('users_email_update') }}" method="post">
										<div class="form-group">
											<label class="d-block">Modifier votre e-mail</label>
											<input type="email" class="form-control" name="update_email[email]" value={{ user.email }}>
											<input type="hidden" name="_csrf_token" value="{{ csrf_token('updateEmail') }}">
										</div>
										<div class="input-errors">
											{% if app.session.get('errors')['email'] is defined %}
												<div class="alert alert-danger">
													{{ app.session.get('errors')['email'] }}
												</div>
											{% endif %}
										</div>
										<div>
											<button type="submit" class="btn btn-secondary btn-sm">Changer mon e-mail</button>
										</div>
									</form>
									<hr>
									<form action="{{ path('users_pass_update') }}" method="post">
										<div class="form-group-0">
											<label class="d-block">Modifier votre mot de passe</label>
											<input type="text" class="form-control" name="update_pass[old_pass]" placeholder="Enter your old password">
											<input type="text" class="form-control mt-1" name="update_pass[new_pass]" placeholder="New password">
											<input type="text" class="form-control mt-1" name="update_pass[confirm_pass]" placeholder="Confirm new password">
											<input type="hidden" name="_csrf_token" value="{{ csrf_token('resetPassword') }}">
										</div>
										<div class="input-errors">
											{% if app.session.get('errors')['password'] is defined %}
												<div class="alert alert-danger">
													{{ app.session.get('errors')['password'] }}
												</div>
											{% endif %}
										</div>
										<div>
											<button class="btn btn-secondary btn-sm mt-3">changer de mot de passe</button>
										</div>
									</form>


								</div>

								<!-- Subscription settings  -->

								<div class="tab-pane" id="subscription">
									<h6>ABONNEMENT</h6>
									<hr>
									<h6>Votre offre actuelle</h6>

									<p>
										Vous avez souscrit à {{ app.user.subscription.plan.name }}
											{% if app.user.subscription.plan.name == 'l\'offre premium' %}
												à {{ (app.user.subscription.plan.price / 100) | format_currency('EUR')  }}
											{% endif %}
										.
									</p>

									{% if is_granted('ROLE_USER_PREMIUM')%}

									<p>
										Statut:
										{% if app.user.subscription.isActive %}
											<span class="badge badge-pill badge-success ml-5">Active</span>
										{% else %}
											<span class="badge badge-pill badge-secondary ml-5">none</span>	
										{% endif %}
									</p>

									<!-- update offer premium to free -->

									<div class="free-access">																					
										<a href="{{ path('app_subscription_free', { 'id': app.user.id }) }}" class="btn btn-secondary btn-sm" type="button">Changer d'offre</a>										
									</div>

									<!-- update offer premium to free -->									

									{% else %}		

									<!-- update offer free to premium -->

									<div class="ppremium-access">
										<a href="{{ path('app_subscription_premium', { 'id': app.user.id }) }}" class="btn btn-secondary btn-sm" type="button">Changer d'offre</a>
									</div>

									<!-- update offer free to premium -->	

									{% endif %}	

									

								</div>
								<!-- Subscription settings  -->


								<!-- Account settings -->

								<div class="tab-pane" id="account">
									<h6>SUPPRESSION DE VOTRE COMPTE</h6>

									<hr>

									<div class="container d-flex">
										<div class="justify-content-center" style="color:#777;">
											<p style="font-size:14px; font-weight: 400; color:#777;">La suppression definitif de votre compte entrainera :</p>
											<li style="color:#777; list-style-type: none;">
												- La suppression de vos offres.
											</li>
											<li style="color:#777; list-style-type: none;">
												- La suppression des notes, avis et appréciation des utilisateurs ayant échangé avec vous.
											</li>
											<li style="color:#777; list-style-type: none;">
												- Ainsi que la résiliation automatique de votre abonnement à la plateforme.
											</li>
											{#<form method="post" action="{{ path('users_profil_delete', {'slug': user.slug}) }}" onsubmit="return confirm('Êtes-vous sûr de vouloir supprimer votre compte ?');">
																																																																																																																																																																																																																																																																																																																																																																																																																																																										<input type="hidden" name="_token" value="{{ csrf_token('delete' ~ user.slug) }}">
																																																																																																																																																																																																																																																																																																																																																																																																																																																										<button class="user-edit-profil-btn-delete">Supprimez votre compte</button>
																																																																																																																																																																																																																																																																																																																																																																																																																																																									</form>
																																																																																																																																																																																																																																																																																																																																																																																																																																																									#}
											<button class="user-edit-profil-btn-delete" data-target="modal-example">Supprimer ce compte</button>


										</div>
									</div>

									<!-- Delete account Modal -->

									<div class="modal user-delete-modal shadow-1 airforce dark-5 modal-falling mt-3" id="modal-example" data-ax="modal">
										<div class="modal-header text-white">Vous êtes sur le point de supprimer définitivement votre compte</div>

										<div class="modal-content airforce dark-5">

											<p>Nous sommes tristes de vous voir partir...</p>
											<p>Pour quelle raison souhaitez-vous nous quitter ?</p>

											{{ form_start(cancelAccountForm, {'action': path('users_profil_delete', {'slug': user.slug})}) }}
											<div class="form-check" id="account_cancelation_report">

												{% for category in cancelAccountForm.category %}
													<div>
														{{ form_widget(category, {'attr': {'class': 'form-check-input'}}) }}
														{{ form_label(category) }}
													</div>
													{% endfor%}


												</div>
												{{ form_row(cancelAccountForm.cause)}}

												<div class="modal-controls mt-5">
													<button type="submit" for="account_cancellation" class="user-edit-profil btn btn-danger mr-2">Supprimer ce compte</button>
													<button data-target="modal-example" class="btn btn-secondary">Annuler</button>
												</div>
												{{ form_end(cancelAccountForm) }}

												<p class="mt-2">
													<small>Votre abonnement sera automatiquement suspendu. Toute l'équipe de la plateforme vous remercie d'avoir utilisé nos services</small>
												</p>

											</div>
										</div>

										<!-- Delete account Modal -->
									</div>
								</div>

							</div>
						</div>
					</div>
				</div>

			</div>

		{% endif %}
	</div>
</section></div></div>

{% endblock %}
{% block javascripts %}
	<script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
	<script src="{{ asset('js/user/edit_profile_form.js') }}"></script>
	<script src="{{ asset('js/user/delete_account_form.js') }}"></script>
	<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.4.1/dist/js/bootstrap.bundle.min.js"></script>
	<script>
	
	function toggle_visibility(id) {
		var e = document.getElementById(id);
		if (e.style.display == 'block') 
		e.style.display = 'none';
		 else 
		e.style.display = 'block';



	}</script>
{% endblock %}