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

{% block title %}{% endblock %}
{% block stylesheets %}
	<link rel="stylesheet" href="{{ asset('css/admin.css') }}">
	<link href='https://unpkg.com/boxicons@2.0.7/css/boxicons.min.css' rel='stylesheet'>
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.1/css/all.min.css"/>
{% endblock %}
{% block body %}
	<div
		class="sidebar">
		{# <div class="logo-details">																																																																																																																																																																																																																																																																																		<span class="logo_name">Maman Julienne</span>																																																																																																																																																																																																																																																																																	</div> #}
		<ul class="nav-links">
			<li>
				<a href="{{ path('app_admin_home') }}">
					<i class="fas fa-th-large"></i>
					<span class="links_name">Dashboard</span>
				</a>
			</li>
			<li>
				<a href="{{ path('app_admin_users')}}" style="background-color:#000; color:#fff;">
					<i class="fas fa-th-large" style="color:#fff;"></i>
					<span class="links_name" style="color:#fff;">Utilisateurs</span>
				</a>
			</li>
			<li>
				<a href="{{ path('app_admin_annonces') }}">
					<i class="fas fa-archive"></i>
					<span class="links_name">Annonces</span>
				</a>
			</li>
			<li>
				<a href="{{ path('app_admin_signalement')}}">
					<i class="fas fa-th-large"></i>
					<span class="links_name">Signalements</span>
				</a>
			</li>
			<li>
				<a href="#">
					<i class="fas fa-lightbulb"></i>
					<span class="links_name">Publicités</span>
				</a>
			</li>
			<li>
				<a href="{{ path('admin_stats') }}">
					<i class="fas fa-chart-pie"></i>
					<span class="links_name">Statistiques</span>
				</a>
			</li>
			<li>
				<a href="#">
					<i class="fas fa-info-circle"></i>
					<span class="links_name">À propos</span>
				</a>
			</li>
			<li>
				<a href="{{ path('messages_support') }}">
					<i class="fas fa-envelope"></i>
					<span class="links_name">Messages</span>
				</a>
			</li>
			<li>
				<a href="#">
					<i class="fas fa-database"></i>
					<span class="links_name">Data</span>
				</a>
			</li>
			<li>
				<a href="#">
					<i class="fas fa-cog"></i>
					<span class="links_name">Setting</span>
				</a>
			</li>
			<li class="log_out">
				<a href="{{ path('app_logout') }}">
					<i class="fas fa-sign-out-alt"></i>
					<span class="links_name">Log out</span>
				</a>
			</li>
		</ul>
	</div>
	<section class="home-section">
		<nav>
			<div class="sidebar-button">
				<i class='bx bx-menu sidebarBtn'></i>
				<span class="nav-active-link-title">Annonces</span>
			</div>
			<div class="search-box">
				<input type="text" placeholder="Rechercher...">
				<i class='bx bx-search'></i>
			</div>
			<div class="profile-details">
				<img src="/uploads/images/users/{{app.user.avatar}}" alt="admin-avatar">
				<span class="admin_name">{{ app.user.firstname|capitalize }}
					{{ app.user.name|capitalize }}</span>
			</div>
		</nav>
		<div class="home-content">
			<div class="ads-boxes">
				<table class="table striped">
					<thead>
						<tr>
							<th>ID</th>
							<th>Titre</th>
							<th>Date</th>
							<th>Active</th>
							<th>Offre</th>
							<th>Actions</th>
						</tr>
					</thead>
					<tbody>
						{% for user in users %}
							<tr>
								<td>{{user.id}}</td>
								<td>
									<a href="{{ path('users', {slug: user.slug}) }}" class="btn_log_user">{{user.firstname}}
										{{user.name}}
									</a>
								</td>
								<td>{{user.createdAt|format_datetime(locale='fr',pattern=" dd MMMM YYYY")|capitalize }}</td>
								<td>
									<label class="switch-activeAds mt-2">
										<input type="checkbox" {{ (user.active) ? 'checked' : ''}} data-id="{{user.id}}">
										<span class="slider round"></span>
									</label>
								</td>
								<td>								
									{% if user.subscription %}
										
										{% if user.subscription.stripeSubscriptionId != null %}
											<div class="badge badge-info">
												Premium
											</div>
										{% else %}
											<div class="badge badge-info">
												Gratuite
											</div>
										{% endif %}

									{% endif %}
								</td>
								<td class="">
									<a href="#" class="btn-supp press modal-trigger" data-target="modal-delete" data-id="{{user.id}}" data-titre="{{user.name}}">Supprimer</a>
								</td>
							</tr>
						{% endfor %}
					</tbody>
				</table>

				<!-- Modal remove user -->

				<div class="modal shadow-1 white modal-falling" id="modal-delete" data-ax="modal">
					<div class="modal-header">Supprimer cet Utilisateur</div>

					<div class="divider"></div>
					<div class="modal-content"></div>
					<div class="divider"></div>
					<div class="modal-footer">
						<a href="" class="btn red">Valider</a>
						<button data-target="modal-delete" class="ml-auto btn small primary modal-trigger">Close</button>
					</div>
				</div>
			</div>

			<!-- Modal remove user -->

		</section>
	{% endblock %}
	{% block javascripts %}
		<script src="{{ ('js/nav.js') }}"></script>
		<script>
			window.onload = () => { // let modal = new Modal('#modal-delete');
let activer = document.querySelectorAll("[type=checkbox]")
for (let bouton of activer) {
bouton.addEventListener("click", function () {

let xmlhttp = new XMLHttpRequest;

xmlhttp.open("get", `active/user/${
this.dataset.id
}`)
xmlhttp.send()
})
}

let supprimer = document.querySelectorAll(".modal-trigger")
for (let bouton of supprimer) {
bouton.addEventListener("click", function () {
document.querySelector(".modal-footer a").href = `delete/users/${
this.dataset.id
}`
document.querySelector(".modal-content").innerText = `Êtes-vous sûr(e) de vouloir supprimer cette utilisateur ? "${
this.dataset.titre
}"`
})

}
}
		</script>
	{% endblock %}