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

{% block title %}Dashboard - Admin
{% 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"/>
	<style>
		
	</style>	
{% 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') }}" style="background-color:#000; color:#fff;">
					<i class="fas fa-th-large" style="color:#fff;"></i>
					<span class="links_name" style="color:#fff;">Dashboard</span>
				</a>
			</li>
			<li>
				<a href="{{ path('app_admin_users')}}">
					<i class="fas fa-users"></i>
					<span class="links_name">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-ban"></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="_logout">
				<a href="{{ path('app_logout') }}">
					<i class="fas fa-sign-out-alt"></i>
					<span class="links_name">Log out</span>
				</a>
			</li>
		</ul>
	</div>

	<!-- Side bar -->
	
	<section class="home-section">

		<!-- Menu nav Bar -->
		<nav>
			<div class="sidebar-button">
				<i class='bx bx-menu sidebarBtn'></i>
				<span class="nav-active-link-title">Dashboard</span>
			</div>
      
			{# <div class="search-box"><input type="text" placeholder="Search..."><i class='bx bx-search'></i></div> #}		

			<div class="d-flex justify-content-center w-75">
				
				<div class="profile-details d-inline d-flex align-items-center">
					<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>

				<!-- Notifications section -->
				{% include 'partials/notifications/_notification_sidebar.html.twig' %}
				<!-- Notifications section -->	

			</div>
			

		</nav>
		<!-- Menu nav Bar -->
		

		<!-- Content -->
		<div class="home-content">	

			<!--- Notification toast -->
			<div class="push-notification-toast"style="position: absolute; right: 10px; width: max-content">
				{{ include ('partials/notifications/_notification_toast.html.twig') }}
			</div>
			<!--- Notification toast -->


			<div class="overview-boxes">
				<div class="box">
					<div class="right-side">
						<div class="box-topic">Utilisateurs</div>
						{% if is_granted('ROLE_USER') %}
							<div class="number">{{users|length }}</div>
						{% endif %}
					</div>
					<div class='cart'>
						<i class="fas fa-users" style="margin-left: 6.5px;"></i>
					</div>
				</div>
				<div class="box">
					<div class="right-side">
						<div class="box-topic">Annonces</div>
						<div class="number">{{annonces|length }}</div>
					</div>
					<div class='cart two'>
						<i class="fas fa-align-left" style="margin-left: 10px;"></i>
					</div>
				</div>
				<div class="box">
					<div class="right-side">
						<div class="box-topic">Profils signalés</div>
						{% if alerts is empty %}
							<div class="number">0</div>
						{% else %}
							<div class="number">{{alerts.profil|length }}</div>
						{% endif %}
					</div>
					<div class='cart three'>
						<i class="fas fa-ban" style="margin-left: 8.5px;"></i>
					</div>
				</div>
				<div class="box">
					<div class="right-side">
						<div class="box-topic">Publicités</div>
						{% if publicities is empty %}
							<div class="number">0</div>
						{% else %}
							<div class="number">{{publicities|length }}</div>
						{% endif %}
					</div>
					<div class="cart four">
						<i class="fas fa-bullhorn" style="margin-left: 6.5px;"></i>
					</div>
				</div>
			</div>

			<div class="dash-boxes">
				<div class="recent-dash box">
					<div class="title-last-ads">Recent</div>
					<div class="dash-details">
						<table class="table striped">
							<thead>
								<tr class="details">
									<th class="topic">Date</th>
									<th class="topic">Utilisateur</th>
									<th class="topic">Titre de l'offre</th>
									<th class="topic">Etat</th>
								</tr>
							</thead>
							<tbody>
								{% for lastAd in lastAds %}

									<tr>

										<td>
											<a href="{{ path('offer_detail', {slug: lastAd.slug})}}">{{lastAd.createdAt|format_datetime(locale='fr',pattern="EEEE dd MMMM YYYY")|capitalize }}
											</a>
										</td>
										<td>
											<a href="{{ path('users', {slug: lastAd.users.slug}) }}" class="btn_log_user">
												{{lastAd.users.firstname|capitalize}}
												{{lastAd.users.name|capitalize}}
											</a>
										</td>
										<td>
											<a href="{{ path('offer_detail', {slug: lastAd.slug})}}">{{lastAd.title|capitalize}}</a>
										</td>
										<td>
											{% if lastAd.active == false %}
												<p style="background-color: rgb(200, 0, 0); padding:8px 8px; border-radius: 4px; color: #fff;">Inactive</p>
												<p>
												{% else %}
													Active
											{% endif %}
										</td>
									</td>
								</tr>

							{% endfor %}
						</tbody>
					</table>

				</div>
				<div class="button_more">
					<a href="{{ path('app_admin_annonces') }}">Plus</a>
				</div>

			</div>

			<div class="top-last-user box">
				<div class="title-last-user">Les derniers inscrit</div>
				<ul class="top-top-last-user-details">
					{% for lastUser in lastUsers %}

						<li class="last-user_li">
							<a href="{{ path('users', {slug: lastUser.slug}) }}" class="btn_log_user">
								<img src="/uploads/images/users/{{ lastUser.avatar}}" alt="{{lastUser.firstname|title}}- {{lastUser.name|title}}-card-img-top">
								<span class="box-last-user-name">
									{{lastUser.firstname|title}}
									{{lastUser.name|title}}
								</span>
								<span class="ml-2">
									{{lastUser.country|capitalize}}
								</span>
							</a>

							<small>
								{{lastUser.createdAt|format_datetime(locale='fr',pattern="dd MMMM YYYY")|capitalize}}
							</small>

						</li>
					{% endfor %}
				</ul>
				<div class="button_more">
					<a href="{{ path('app_admin_users') }}">Plus</a>
				</div>
			</div>
		</div>


	</section>

	{% endblock %}
	{% block javascripts %}
		<script src="{{ asset('js/nav.js') }}"></script>
	{% endblock %}