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

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

{% block body %}
	<style>
		.flash-animate {
			animation: flash-green 0.6s ease-in-out;
		}

		@keyframes flash-green {
			0% {
				background-color: #28a745;
				color: white;
			}
			100% {
				background-color: inherit;
				color: inherit;
			}
		}
	</style>


	<div
		class="m-1 ">
		{# Affichage du titre de la page #}
		">
		<h2 class="text-center mt-5">Liste des Produits</h2>

		{# Message d'alerte selon le statut du panier #}
		<div class="alert alert-warning text-center">
			{% if cart_session is empty %}
				Sélectionnez votre événement
			{% else %}
				Validez votre préparation avant de changer d'événement
			{% endif %}
		</div>


		<div class=" mb-4">
			<div
				class="d-flex flex-wrap gap-2 justify-content-center align-items-center ">
				<!-- Select Event -->
				<select id="eventSelect" name="event_id" class="form-select" style="max-width: 250px;">
					<option value="">Sélectionnez un événement</option>
					{% for event in events %}
						<option value="{{ event.id }}" {% if cart_session is defined and cart_session["eventId"] is defined and event.id in cart_session["eventId"] %} selected {% endif %}>
							{{ event.name }}
						</option>
					{% endfor %}
				</select>

				<!-- Select Category -->
				<select id="categorySelect" name="category" class="form-select" style="max-width: 250px;">
					<option value="">Chercher par catégorie</option>
					{% for category in categorys %}
						<option value="{{ category.id }}">{{ category.name }}</option>
					{% endfor %}
				</select>

				<!-- Input Search -->
				<input type="text" id="searchInput" class="form-control" placeholder="Recherche de produit..." style="max-width: 250px;">
			</div>
		</div>

		<div class="text-center m-3">
			<a href="{{ path('app_product_new') }}" class="btn btn-success">Créer un nouveau produit</a>
		</div>
		{# ----------------------------------------------tableau product------------------------------------------- #}

		<div
			class="MyDiv m-0 m-sm-2 w-100 overflow-auto">
			{# Affichage du message "Aucun produit trouvé" si aucun produit n'est disponible #}
			{% if products is empty %}
				<div class="alert alert-info text-center" id="no-results">
					Aucun produit trouvé
				</div>
			{% else %}
				<div class="alert alert-info text-center d-none" id="no-results">
					Aucun produit trouvé
				</div>
			{% endif %}

			{# Tableau des produits #}
			<table role="table" class="">
				<caption class="visually-hidden">Tableau des produits disponibles</caption>

				<thead>
					<tr>
						<th class="MyCell d-none d-md-table-cell">image</th>
						<th class="MyCell">Nom</th>
						<th class="MyCell d-none d-md-table-cell">Catégorie</th>
						<th class="MyCell">Stock Initial</th>
						{% for i in 0..6 %}
							<th class="MyCell d-none d-md-table-cell  ">Week +{{ i }}</th>
						{% endfor %}
						<th class="MyCell">quantity</th>
						<th class="MyCell">Actions</th>



					</tr>
				</thead>
				<tbody>
					{% for productList in products %}
						<tr
							class="product-item" data-category="{{ productList.category.id }}" data-name="{{ productList.name|lower }}">
							{# Image produit #}

							<td class="CellStart d-none d-md-table-cell">
								<img width="70px" loading="lazy" src="{{ asset('uploads/pictures/' ~ (productList.picture ?? 'default.png')) }}" alt="image de {{ productList.name }}">
							</td>

							<td class="MyCell" id="{{ productList.name }}">{{ productList.name }}</td>
							<td class="MyCell d-none d-md-table-cell">{{ productList.category ? productList.category.name : "N/A" }}</td>
							<td class="MyCell">{{ productList.stockInitial }}</td>

							{% for semaine in stockSemaines[productList.id] %}
								<td class="MyCell d-none d-md-table-cell {{ semaine.stock|number_format and semaine.stock|number_format < 0 ? 'text-danger text-white' : '' }}">
									{{ semaine.stock }}
								</td>
							{% endfor %}

							<td class="category-{{ productList.category.id }}" style="display:none;"></td>

							<td class="MyCell">
								<input class="form-control form-control-sm mb-1 quantity-input" type="number" value="1" min="1" data-product-id="{{ productList.id }}" data-default-event-id="{{ cart_session['eventId'][0] ?? '' }}" data-status="{{ cart_session['status'] ?? 'new' }}" data-action="{{ path('app_technician_cart_add') }}">
							</td>
							<td class="MyCell col-1">
								<a href="{{ path('app_product_show', {'id':  productList.id}) }}" class="btn btn-primary col-9 m-1">Détails</a>
								<button class="btn btn-warning mt-1 col-9 m-1 btn-add-to-cart-tech" data-product-id="{{ productList.id }}">
									Ajouter
								</button>
							</td>





						</tr>

					{% else %}
						<tr>
							<td class="p-3" colspan="14">Aucun produit trouvé</td>
						</tr>
					{% endfor %}

				</tbody>

			</table>
		</div>
	</div>
<script>
document.addEventListener("DOMContentLoaded", function () {
    // --------- MAJ event_id sur tous les inputs ----------
    const eventSelect = document.getElementById("eventSelect");
    const eventIdInputs = document.querySelectorAll("input[name='event_id']");

    function updateEventIdInputs() {
        const selectedEventId = eventSelect.value;
        eventIdInputs.forEach(input => input.value = selectedEventId);
    }

    if (eventSelect) {
        eventSelect.addEventListener("change", updateEventIdInputs);
        updateEventIdInputs();
    }
	// Si un event est déjà dans la session, on le sélectionne dans le select
const cartTech = {{ app.session.get('cart_technician')|json_encode|raw }};
if (cartTech && cartTech.eventId) {
    const eventOption = document.querySelector(`#eventSelect option[value="${cartTech.eventId}"]`);
    if (eventOption) {
        eventOption.selected = true;
        // Forcer mise à jour manuelle si d'autres champs dépendent de #eventSelect
        eventSelect.dispatchEvent(new Event('change'));
    }
}


    // --------- Filtrage produits par recherche + catégorie ----------
    const searchInput = document.getElementById('searchInput');
    const categorySelect = document.getElementById('categorySelect');
    const productRows = document.querySelectorAll('.product-item');

    function filterProducts() {
        const searchTerm = searchInput.value.toLowerCase();
        const selectedCategory = categorySelect.value;
        let foundMatch = false;

        productRows.forEach(row => {
            const name = row.dataset.name;
            const categoryId = row.dataset.category;
            const matchesSearch = name.includes(searchTerm);
            const matchesCategory = !selectedCategory || categoryId === selectedCategory;
            const show = matchesSearch && matchesCategory;
            row.style.display = show ? '' : 'none';
            if (show) foundMatch = true;
        });

        const noResults = document.getElementById('no-results');
        if (noResults) noResults.style.display = foundMatch ? 'none' : 'block';
    }

    if (searchInput) searchInput.addEventListener('input', filterProducts);
    if (categorySelect) categorySelect.addEventListener('change', filterProducts);
    filterProducts();

    // --------- Ajout au panier technicien (AJAX) ----------
    document.querySelectorAll('.btn-add-to-cart-tech').forEach(button => {
        button.addEventListener('click', function () {
            const productId = this.dataset.productId;
            const quantityInput = document.querySelector(`input[data-product-id="${productId}"]`);
            const quantity = quantityInput.value;
            const productName = this.dataset.productName;

            const defaultEventId = quantityInput.dataset.defaultEventId;
            const selectedEventId = document.getElementById("eventSelect")?.value;
            const eventId = defaultEventId !== '' ? defaultEventId : selectedEventId;

            const status = quantityInput.dataset.status || 'new';
            const actionUrl = quantityInput.dataset.action;

            if (!eventId) {
                alert("Veuillez sélectionner un évènement.");
                return;
            }

            fetch(actionUrl, {
                method: 'POST',
                headers: {
                    'X-Requested-With': 'XMLHttpRequest',
                    'Content-Type': 'application/x-www-form-urlencoded'
                },
                body: new URLSearchParams({
                    product_id: productId,
                    quantity: quantity,
                    event_id: eventId,
                    status: status
                })
            })
            .then(response => response.json())
            .then(data => {
                // ✅ Badge panier technicien
                const badge = document.getElementById('tech-cart-count');
                if (badge) {
                    badge.textContent = data.cartCount;
                    badge.classList.add('bg-success');
                    setTimeout(() => badge.classList.remove('bg-success'), 500);
                }

                // ✅ Dropdown panier
                const detailDiv = document.getElementById('tech-cart-details');
                if (detailDiv && data.cartHtml) {
                    detailDiv.innerHTML = data.cartHtml;
                }

                // ✅ MAJ cellule quantité du tableau produit
                const quantityCell = document.getElementById('product-quantity-' + productId);
                if (quantityCell && data.cartHtml) {
                    const regex = new RegExp(
                        `<strong>\\s*${productName.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')}\\s*</strong>[\\s\\S]*?value="(\\d+)"`,
                        'i'
                    );
                    const match = data.cartHtml.match(regex);
                    if (match) {
                        quantityCell.innerHTML = `<span>${match[1]}</span>`;
                    }
                }

                console.log(data.message || 'Produit ajouté.');
            })
            .catch(error => {
                console.error('Erreur AJAX :', error);
                alert("Erreur lors de l’ajout au panier.");
            });
        });
    });
});
</script>



{% endblock %}