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

{% block title %}Liste des Annonces
{% endblock %}

{% block body %}
	<section class="section">
		<div class="section-header">
			<h1>Liste des Annonces</h1>
		</div>
		<div class="col-12">
			<div class="card">
				<div class="card-header"></div>
				<div class="card-body">
					{% if annonces is not empty %}
						<table class="table table-striped">
							<thead>
								<tr>
									<th>Id</th>
									<th>Titre</th>
									<th>Host</th>
									<th>Réservations</th>
									<th>Note</th>
									<th>Date d'ajout</th>
									<th>Etat de l'annonce</th>
									<th>actions</th>
								</tr>
							</thead>
							<tbody>
								{% for annonce in annonces %}
									<tr>
										<td>{{ annonce.id }}</td>
										<td>{{ annonce.titre }}</td>
										<td>
											{% if  annonce.host.user.image != null %}
												<img width="80" src="{{ asset('/uploads/imagesUser/'~annonce.host.user.image) }}" alt="Avatar de {{annonce.host.user.nom}}" class="mini-avatar mr-2">
											{% else %}
												<img class="mini-avatar mr-2" width="50" src="{{asset('assets/images/userMessneger.jpg ')}}" alt="Avatar de {{annonce.host.user.nom}}">
											{% endif %}
											{{ annonce.host.user.nom }}
											{{ annonce.host.user.prenom }}
										</td>
										<td class="text-center" style="color:white">
											<span class="badge bg-primary rounded">{{annonce.reservation | length}}</span>
										</td>
										<td class="text-center" style="color:white">
											<span class="badge bg-primary rounded">{{annonce.avgRatings | number_format(1, ',', ' ')}}</span>
										</td>
										<td>{{ annonce.createdAt ? annonce.createdAt|date('Y-m-d H:i:s') : '' }}</td>
										<td>
											<input type="checkbox" class="toggle-status" data-id="{{ annonce.id }}" data-url="{{ path('app_admin_annonce_toggle_status', {'id': annonce.id}) }}" {% if annonce.status %} checked {% endif %} data-toggle="toggle" data-on="Active" data-off="Inactive" data-onstyle="primary" data-offstyle="danger">
											<span id="status-display-{{ annonce.id }}">
												{% if annonce.status %}Active{% else %}Inactive
												{% endif %}
											</span>
										</td>
										<td>
                                            <div class="btn-group">
                                                <a href="{{ path('app_admin_annonce_show', {'id': annonce.id}) }}" class="btn btn-primary"><i class="fa fa-search fa-2x"></i></a>                                   
                                                <form method="post" action="{{ path('app_admin_annonce_delete', {'id': annonce.id}) }}" onsubmit="return confirm('Are you sure you want to delete this item?');">
                                                    <input type="hidden" name="_token" value="{{ csrf_token('delete' ~ annonce.id) }}">
                                                    <button class="btn btn-danger"><i class="fa fa-trash fa-2x"></i></button>
                                                </form>
                                            </div>
                                        </td>
									</tr>
								{% endfor %}
							</tbody>
						</table>
					{% else %}
						<p>no records found</p>
					{% endif %}
				</div>
				<div class="card-footer"></div>
			</div>
		</div>
	</section>
{% endblock %}
{% block javascripts %}
	<script>
		document.addEventListener('DOMContentLoaded', function () {
document.querySelectorAll('.toggle-status').forEach(function (checkbox) {
checkbox.addEventListener('change', function () {
var id = this.getAttribute('data-id');
var url = this.getAttribute('data-url');
var checkbox = this;

fetch(url, {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'X-Requested-With': 'XMLHttpRequest'
},
body: JSON.stringify({})
}).then(response => response.json()).then(data => {
if (data.status === 'success') {
checkbox.checked = data.isActive;
document.getElementById('status-display-' + id).textContent = data.isActive ? 'Active' : 'Inactive';
}
}).catch(error => console.error('Error:', error));
});
});
});
	</script>
{% endblock %}