{% 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')}}">
					<i class="fas fa-archive"></i>
					<span class="links_name">Utilisateurs</span>
				</a>
			</li>
			<li>
				<a href="{{ path('app_admin_annonces') }}" style="background-color:#000; color:#fff;">
					<i class="fas fa-archive" style="color:#fff;"></i>
					<span class="links_name" style="color:#fff;">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>Utilisateur</th>
							<th>Date</th>
							<th>Activation</th>
							<th>Suppression</th>
						</tr>
					</thead>
					<tbody>
						{% for annonce in annonces %}
							<tr>
								<td>{{annonce.id}}</td>
								<td>
									<a href="{{ path('offer_detail', {slug: annonce.slug})}}">{{annonce.title}}</a>
								</td>
								<td>{{annonce.users.firstname|capitalize}}
									{{annonce.users.name|capitalize}}</td>
								<td>{{annonce.createdAt|format_datetime(locale='fr',pattern=" dd MMMM YYYY")|capitalize }}</td>
								<td>
									<label class="switch-activeAds mt-2">
										<input type="checkbox" {{ (annonce.active) ? 'checked' : ''}} data-id="{{annonce.id}}">
										<span class="slider round"></span>
									</label>
								</td>
								<td class="text-center">
									<a href="#" class="btn-supp press modal-trigger" data-target="modal-delete" data-id="{{annonce.id}}" data-titre="{{annonce.title}}">Supprimer</a>
								</td>
							</tr>
						{% endfor %}
					</tbody>
				</table>


				<div class="modal white falling" id="modal-delete">
					<div class="modal-header">Supprimer une annonce</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>
		</section>
	{% endblock %}
	{% block javascripts %}
		<script src="{{ asset('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;
let url = '/admin/active/annonce/';

xmlhttp.open("get", url + 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/annonce/${
this.dataset.id
}`
document.querySelector(".modal-content").innerText = `Êtes-vous sûr(e) de vouloir supprimer l'annonce "${
this.dataset.titre
}"`
})

}
}
		</script>
	{% endblock %}