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

{% block title %}Tableau de bord
{% endblock %}

{% block body %}
	{% if app.user %}
		<h2 class="text-center mt-2">Bienvenue
			{{ app.user.firstName }}
			!</h2>
	{% else %}
		<h2 class="text-center mt-2">Bienvenue !</h2>
	{% endif %}

	<div class="row justify-content-around mt-4">
		<div class="card bg-dark text-white col-md-4 col-lg-3 m-3 p-3 shadow-sm">
			<h5 class="card-title mb-3">Total des commandes</h5>

			{# {% if orderCounts|length > 0%}
				<ul class="list-unstyled">
					{% for order in orderCounts %}
						<li>
							<span class="badge bg-{{ order.status == 'new' ? 'primary' : order.status == 'bp' ? 'warning' : order.status == 'bl' ? 'success' : 'danger' }}">
								{{ order.status }}
								:
								{{ order.total }}
							</span>
						</li>
					{% endfor %}
				</ul>
			{% endif %} #}

			<div class="d-flex flex-wrap gap-2">
				<a class="btn btn-primary" href="{{ path('app_event_new') }}">+ Événement</a>
				<a class="btn btn-primary" href="{{ path('app_site_event_new') }}">+ Site</a>
				<a class="btn btn-primary" href="{{ path('app_contact_new') }}">+ Contact</a>
			</div>
			<div class="d-flex flex-wrap gap-2 mt-3">
				<div class="form-check form-check-inline">
					<input class="form-check-input data-toggle" type="checkbox" value="events" id="toggleEvents" checked>
					<label class="form-check-label" for="toggleEvents">Événements</label>
				</div>
				<div class="form-check form-check-inline">
					<input class="form-check-input data-toggle" type="checkbox" value="eventDetails" id="toggleDetails" checked>
					<label class="form-check-label" for="toggleDetails">Détails</label>
				</div>
				<div class="form-check form-check-inline">
					<input class="form-check-input data-toggle" type="checkbox" value="absences" id="toggleAbsences" checked>
					<label class="form-check-label" for="toggleAbsences">Absences</label>
				</div>
				<div class="form-check form-check-inline">
					<input class="form-check-input data-toggle" type="checkbox" value="interventionTeams" id="toggleTeams" checked>
					<label class="form-check-label" for="toggleTeams">Équipes</label>
				</div>
			</div>
			<div class="my-4">
				<h5 class="text-white mb-3">Légende des couleurs du planning</h5>
				<div class="row row-cols-2 row-cols-md-4 g-2 text-white small">

					<div class="d-flex align-items-center gap-2">
						<span class="p-3 legend-color" style="width:120px;height:40px;background-color:#A0522D;display:inline-block;border-radius:3px;">Montage</span>

					</div>

					<div class="d-flex align-items-center gap-2">
						<span class="p-3 legend-color" style="width:120px;height:40px;background-color:#FFD700;display:inline-block;border-radius:3px;">Show</span>

					</div>

					<div class="d-flex align-items-center gap-2">
						<span class="p-3 legend-color" style="width:120px;height:40px;background-color:#FF8C00;display:inline-block;border-radius:3px;">Démontage</span>

					</div>
					<div class="w-100"></div>
					<div class="d-flex align-items-center gap-2">
						<span class="p-3 legend-color" style="width:120px;height:40px;background-color:#1E90FF;display:inline-block;border-radius:3px;">
							Nouveau
						</span>

					</div>

					<div class="d-flex align-items-center gap-2">
						<span class="p-3 legend-color" style="width:120px;height:40px;background-color:#FFA500;display:inline-block;border-radius:3px;">Prét
						</span>

					</div>

					<div class="d-flex align-items-center gap-2">
						<span class="p-3 legend-color" style="width:120px;height:40px;background-color:#228B22;display:inline-block;border-radius:3px;">Livré
						</span>

					</div>

					<div class="d-flex align-items-center gap-2">
						<span class="p-3 legend-color" style="width:120px;height:40px;background-color:#DC143C;display:inline-block;border-radius:3px;">Retour</span>

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

		</div>


		<div class="col-11 col-lg-7 m-3 ">
			<div class="card">
				<div class="card-header bg-dark text-white">Planning des événements</div>
				<div class="card-body p-2" id="calendar"></div>
			</div>
		</div>
	</div>

	<div class="row m-5 justify-content-center justify-content-lg-around">
		<h2 class="text-white">Événements à venir :</h2>
		{% for event in events %}
			{% if event.dateEnd > date('now') %}
				<div class=" col-12 col-lg-3 m-2  MyDiv">
					<div class="card-body text-center">
						<div class="gallery">
							{% set firstImage = event.galeryPictures|first %}
							{% if firstImage %}
								<img class="w-100" src="{{ asset('uploads/pictures/' ~ firstImage.picture) }}" alt="Image de {{ event.name }}">
							{% else %}
								<img class="w-100" src="{{ asset('uploads/pictures/default.png') }}" alt="Aucune image disponible">
							{% endif %}
						</div>
						<h5 class="card-title mt-2">{{ event.name }}</h5>
						<p>Montage :
							{{ event.dateMontage|date('d/m') }}</p>
						<p>Démontage :
							{{ event.dateEnd|date('d/m') }}</p>
						<p>Lieu :
							{{ event.site.city }}</p>
						<a href="{{ path('app_event_show', {'id': event.id}) }}" class="btn btn-primary">Détails</a>
					</div>
				</div>
			{% endif %}
		{% endfor %}
	</div>


	<script src='https://cdn.jsdelivr.net/npm/fullcalendar@6.1.15/index.global.min.js'></script>
	<script src='fullcalendar/core/locales-all.global.js'></script>
	<script>
const calendarData = {{ data|raw }};
let calendar; // Déclaration globale

document.addEventListener('DOMContentLoaded', function () {
    const calendarEl = document.getElementById('calendar');

    calendar = new FullCalendar.Calendar(calendarEl, {
        initialView: 'dayGridMonth',
        locale: 'fr',
        headerToolbar: {
            left: 'prev,next today',
            center: 'title',
            right: 'dayGridMonth,timeGridWeek,timeGridDay,list'
        },
        events: [], // Vide au départ, rempli ensuite dynamiquement
        eventClick: function (info) {
            if (info.event.url) {
                window.location.href = info.event.url;
            }
        }
    });

    calendar.render();

    updateCalendarDisplay(); // Charger les événements au démarrage
});

function updateCalendarDisplay() {
    const checkboxes = document.querySelectorAll('.data-toggle');
    const selectedTypes = Array.from(checkboxes)
        .filter(cb => cb.checked)
        .map(cb => cb.value);

    const filteredEvents = [];

    if (selectedTypes.includes('events') && calendarData.events) {
        filteredEvents.push(...calendarData.events);
    }
    if (selectedTypes.includes('eventDetails') && calendarData.eventDetails) {
        filteredEvents.push(...calendarData.eventDetails);
    }
    if (selectedTypes.includes('absences') && calendarData.absences) {
        filteredEvents.push(...calendarData.absences);
    }
    if (selectedTypes.includes('interventionTeams') && calendarData.interventionTeams) {
        filteredEvents.push(...calendarData.interventionTeams);
    }

    calendar.removeAllEvents();
    calendar.addEventSource(filteredEvents);
}

// Réagir aux clics sur les cases à cocher
document.querySelectorAll('.data-toggle').forEach(cb => {
    cb.addEventListener('change', updateCalendarDisplay);
});
</script>

{% endblock %}