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

{% block body %}
	<div id="create-product-menu" class="dp-n dp-f-r j-c-c a-i-c p-f t-0 l-0 w-100-p h-100-vh bg-va-transparent z-i-20 b-s-n" id="loader">
		<form id="create-product-form" class="p-r dp-f-c gp-20 ovf-a max-w-85-p max-h-85-p bg-c-white pad-40 b-s-b-b b-r-10" action="{{ path('app_admin_create_product') }}" enctype="multipart/form-data" method="post">
			<button id="closeMenu" class="button dp-f a-i-c j-c-c p-f t-20 r-20 pad-0 h-35 w-35">
				<img src="/icons/croix.svg" alt="Fermer le menu">
			</button>
			<input type="hidden" name="_csrf_token" value="{{ csrf_token('create_product') }}">
			<h2 class="ft-s-50">Créer un nouveau produit</h2>
			{# Zone de drag & drop pour les images #}

			<div class="dp-f-c gp-30">
				<div class="dp-f-c gp-40 pad-20 b-s-b-b b-r-10 b-c-dom-g">
					<div id="drop-zone" class="drop-zone bg-c-grey dp-f-c b-r-5 pad-35 b-s-b-b cur-p" style="background: #e8e8e8; box-shadow: 0px 1px 1px 0px #cacacab0;">
						<p id="drop-text" class="t-a-c">
							{# Glisser / Déposer vos images ici<br>ou cliquer pour sélectionner #}
							Cliquez pour sélectionner vos images (.jpg uniquement)
						</p>
					</div>
					<input
					type="file" id="file-input" name="images[]" multiple accept=".jpg" hidden>
					{# Aperçu des images #}
					<div id="preview-container" class="preview-container dp-f-r f-w-w gp-20 cur-d"></div>
				</div>


				{# Champ pour le libellé #}
				{# <label for="product_name">Libellé du produit *</label>
																																																											<input type="text" id="product_name" name="product_name" required> #}

				<div class="inputBox">
					<input class="promptRegister b-r-10" id="product_name" autocomplete="off" type="text" name="product_name" placeholder=" " required>
					<label for="product_name" class="textLabelDescription">
						<b>Nom du produit*</b>
					</label>
				</div>

				{# Champ pour le prix #}
				{# <label for="product_price">Prix du produit *</label>
																																																											<input type="number" id="product_price" name="product_price" required> #}

				<div class="inputBox">
					<input class="promptRegister b-r-10" id="product_price" autocomplete="off" type="number" step="0.01" name="product_price" placeholder=" " required>
					<label for="product_price" class="textLabelDescription">
						<b>Prix du produit*</b>
					</label>
				</div>

				{# Statut sur le site #}
				<div class="dp-f-c gp-10">
					<p>Status sur le site (boutique & cat. produit)</p>
					<div class="dp-f-r gp-15">
						<label>
							<input type="radio" name="status_site" value="visible" checked>
							Visible
						</label>
						<label>
							<input class="radio-red" type="radio" name="status_site" value="no_visible">
							Non visible
						</label>
					</div>
				</div>

				{# Statut de vente #}
				<div class="dp-f-c gp-10">
					<p>Status de vente sur la boutique</p>
					<div class="dp-f-r gp-15">
						<label>
							<input type="radio" name="status_vente" value="vente" checked>
							À vendre
						</label>
						<label>
							<input type="radio" class="radio-yellow" name="status_vente" value="vendu">
							Vendu
						</label>
						<label>
							<input type="radio" class="radio-blue" name="status_vente" value="exposition">
							Exposition
						</label>
					</div>
				</div>

				<div class="dp-f-c gp-10" id="first-menu">
					<label for="product_type_select">Le type de produit à ajouter</label>
					<select class="select-menu" name="product_type" id="product_type_select">
						<option value="couteau">Couteau</option>
						<option value="decapsuleur">Décapsuleur</option>
						<option value="tire_bouchon">Tire-bouchon</option>
						<option value="cravates_western">Cravates Western</option>
						<option value="accessoires">Accessoires</option>
					</select>
				</div>

				<div class="dp-f-c gp-10 dp-n" id="second-menu">
					<label for="product_model_select">Modèle du couteau</label>
					{% if models is empty %}
						<p class="gColor"><b>Aucun modèle de couteau enregistré !</b></p>
					{% else %}
						<select class="select-menu" name="knife_model" id="product_model_select">
							{% for model in models %}
								<option value="{{ model.getId() }}" data-name="{{ model.getLibelle()|lower }}">
									{{ model.getLibelle() }}
								</option>
							{% endfor %}
						</select>
					{% endif %}
				</div>

				<div class="dp-f-c gp-10 dp-n" id="third-menu-artisanal">
					<label for="artisanal_variant_select">Variante...</label>
					<select class="select-menu" name="artisanal_variant" id="artisanal_variant_select">
						<option value="artisanal">Artisanal</option>
						<option value="rosace">Rosace</option>
						<option value="ours">Ours</option>
					</select>
				</div>

				<div class="dp-f-c gp-10 dp-n" id="third-menu-aurillac">
					<label for="aurillac_variant_select">Variante...</label>
					<select class="select-menu" name="aurillac_variant" id="aurillac_variant_select">
						<option value="poche">Poche</option>
						<option value="table">Table</option>
					</select>
				</div>

				<div class="dp-f-c gp-10">
					<p>Description</p>
					<textarea class="promptRegister b-r-10 w-100-p max-h-300 min-h-100" id="create_product_description" autocomplete="off" type="number" step="0.01" name="product_description" style="resize: vertical;"></textarea>
				</div>
			</div>

			<input type="hidden" name="action_token" value="{{ actionToken }}">

			<button class="button" type="submit">Enregistrer le produit</button>
		</form>
	</div>

	<div id="edit-product-menu" class="dp-n dp-f-r j-c-c a-i-c p-f t-0 l-0 w-100-p h-100-vh bg-va-transparent z-i-20 b-s-n">
		<form id="edit-product-form" class="p-r dp-f-c gp-20 ovf-a max-w-85-p max-h-85-p bg-c-white pad-40 b-s-b-b b-r-10" action="{{ path('app_admin_edit_product', { id: 0 }) }}" enctype="multipart/form-data" method="post">
			<button id="closeMenuEdit" class="button p-f t-20 r-20 pad-0 h-35 w-35">
				<img src="/icons/croix.svg" alt="Fermer le menu">
			</button>

			<input type="hidden" name="_csrf_token" value="{{ csrf_token('edit_product') }}">

			<h2 class="ft-s-50" id="edit-product-title">Modifier un produit (ID_DU_PRODUIT)</h2>

			<!-- Drag & Drop zone -->
			<div class="dp-f-c gp-30">
				<div class="dp-f-c gp-40 pad-20 b-s-b-b b-r-10 b-c-dom-g">
					<div id="drop-zone-edit" class="drop-zone bg-c-grey dp-f-c b-r-5 pad-35 b-s-b-b cur-p" style="background: #e8e8e8; box-shadow: 0px 1px 1px 0px #cacacab0;">
						<p id="drop-text-edit" class="t-a-c">
							Glisser / Déposer vos images ici<br>ou cliquer pour sélectionner
						</p>
					</div>
					<input
					type="file" id="file-input-edit" name="images[]" multiple hidden>
					<!-- Aperçu des images existantes + nouvelles -->
					<div id="preview-container-edit" class="preview-container dp-f-r f-w-w gp-20 cur-d"></div>
				</div>

				<!-- Nom du produit -->
				<div class="inputBox">
					<input class="promptRegister b-r-10" id="edit_product_name" autocomplete="off" type="text" name="product_name" placeholder=" " required>
					<label for="edit_product_name" class="textLabelDescription">
						<b>Nom du produit*</b>
					</label>
				</div>

				<!-- Prix -->
				<div class="inputBox">
					<input class="promptRegister b-r-10" id="edit_product_price" autocomplete="off" type="number" step="0.01" name="product_price" placeholder=" " required>
					<label for="edit_product_price" class="textLabelDescription">
						<b>Prix du produit*</b>
					</label>
				</div>

				<!-- Status site -->
				<div class="dp-f-c gp-10">
					<p>Status sur le site (boutique & cat. produit)</p>
					<div class="dp-f-r gp-15">
						<label>
							<input type="radio" id="status_site_visible" name="status_site" value="visible">
							Visible
						</label>
						<label>
							<input class="radio-red" type="radio" id="status_site_invisible" name="status_site" value="no_visible">
							Non visible
						</label>
					</div>
				</div>

				<!-- Status vente -->
				<div class="dp-f-c gp-10">
					<p>Status de vente sur la boutique</p>
					<div class="dp-f-r gp-15">
						<label>
							<input type="radio" id="status_vente_vente" name="status_vente" value="vente">
							À vendre
						</label>
						<label>
							<input type="radio" id="status_vente_vendu" class="radio-yellow" name="status_vente" value="vendu">
							Vendu
						</label>
						<label>
							<input type="radio" id="status_vente_expo" class="radio-blue" name="status_vente" value="exposition">
							Exposition
						</label>
					</div>
				</div>

				<!-- Type de produit -->
				<div class="dp-f-c gp-10" id="first-menu">
					<label for="edit_product_type_select">Le type de produit</label>
					<select class="select-menu" name="product_type" id="edit_product_type_select">
						<option value="couteau">Couteau</option>
						<option value="tire_bouchon">Tire-bouchon</option>
						<option value="cravates_western">Cravates Western</option>
					</select>
				</div>

				<!-- Modèle -->
				<div class="dp-f-c gp-10 dp-n" id="second-menu-edit">
					<label for="edit_product_model_select">Modèle du couteau</label>
					{% if models is empty %}
						<p>Aucun modèle de couteau enregistré</p>
					{% else %}
						<select class="select-menu" name="knife_model" id="edit_product_model_select">
							{% for model in models %}
								<option value="{{ model.getId() }}" data-name="{{ model.getLibelle()|lower }}">
									{{ model.getLibelle() }}
								</option>
							{% endfor %}
						</select>
					{% endif %}
				</div>

				<!-- Variante Aurillac -->
				<div class="dp-f-c gp-10 dp-n" id="third-menu-artinsanal-edit">
					<label for="edit_artisanal_variant_select">Variante...</label>
					<select class="select-menu" name="artisanal_variant" id="edit_artisanal_variant_select">
						<option value="poche">Poche</option>
						<option value="rosace">Rosace</option>
					</select>
				</div>

				<!-- Variante Aurillac -->
				<div class="dp-f-c gp-10 dp-n" id="third-menu-aurillac-edit">
					<label for="edit_aurillac_variant_select">Variante...</label>
					<select class="select-menu" name="aurillac_variant" id="edit_aurillac_variant_select">
						<option value="poche">Poche</option>
						<option value="table">Table</option>
					</select>
				</div>

				<div class="dp-f-c gp-10">
					<p>Description</p>
					<textarea class="promptRegister b-r-10 w-100-p max-h-300 min-h-100" id="edit_product_description" autocomplete="off" type="number" step="0.01" name="product_description" style="resize: vertical;"></textarea>
				</div>

			</div>

			<button class="button" type="submit">Enregistrer les modifications</button>
		</form>
	</div>


	<script>
		document.addEventListener('DOMContentLoaded', () => {

// ------------------------------------------------------------------
// 1) Ouvrir la modale d’édition
// ------------------------------------------------------------------
window.editProduct = function (productId) { // 1. On fetch les données
fetch('/api/admin/get-product/' + productId).then(resp => resp.json()).then(json => {
if (!json.success) {
alert('Erreur lors de la récupération du produit');
return;
}

const data = json.data;
// 2. On remplit le formulaire
fillEditForm(data);

// 3. On modifie l’URL du form pour poster vers /admin/edit-product/{id}
const form = document.getElementById('edit-product-form');
form.action = '/admin/edit-product/' + data.id;

// 4. On ouvre la modal
const editMenu = document.getElementById('edit-product-menu');
editMenu.classList.remove('dp-n');
document.body.classList.add('ovf-h'); // pour empêcher scroll

}).catch(err => {
console.error(err);
alert('Erreur de réseau');
});
};

// ------------------------------------------------------------------
// 2) Remplir le formulaire avec les données d’un produit
// ------------------------------------------------------------------
function fillEditForm(data) { // Titre
document.getElementById('edit-product-title').textContent = 'Modifier le produit (ID: ' + data.id + ')';

// Champs nom / prix
document.getElementById('edit_product_name').value = data.libelle;
document.getElementById('edit_product_price').value = data.prixVente;

// Status site
if (data.statusSite === 'visible') {
document.getElementById('status_site_visible').checked = true;
} else {
document.getElementById('status_site_invisible').checked = true;
}

// Status vente
if (data.statusVente === 'vente') {
document.getElementById('status_vente_vente').checked = true;
} else if (data.statusVente === 'vendu') {
document.getElementById('status_vente_vendu').checked = true;
} else {
document.getElementById('status_vente_expo').checked = true;
}

// Type de produit
const typeSelect = document.getElementById('edit_product_type_select');
typeSelect.value = data.typeProduit;

// Modèle
const modelSelect = document.getElementById('edit_product_model_select');
if (data.modelId) {
modelSelect.value = data.modelId;
} else {
modelSelect.value = '';
}

// Variante Aurillac
const aurillacSelect = document.getElementById('edit_aurillac_variant_select');
// Variante Artisanal
const artisanalSelect = document.getElementById('edit_artisanal_variant_select');

if (data.variante) {
  // On regarde quel modèle est sélectionné pour savoir quelle variante appliquer
  const selectedModel = modelSelect.options[modelSelect.selectedIndex];
  const modelName = selectedModel.getAttribute('data-name');

  if (modelName === 'aurillac') {
    aurillacSelect.value = data.variante;
  } else if (modelName === 'artisanal') {
    artisanalSelect.value = data.variante;
  }
}


// Description
document.getElementById('edit_product_description').value = data.description;

// Gérer l’affichage second/third menu (logique identique à "create")
toggleSecondMenuEdit();
toggleThirdMenuEdit();

// On met la value du select : si c’est 'couteau', on affiche le menu second
// etc. => cf. plus bas

// 3. Gérer la preview d’images
existingImagesEdit = []; // reset
selectedFilesEdit = [];
// reset

// On vide le container
const previewContainer = document.getElementById('preview-container-edit');
previewContainer.innerHTML = '';

// Pour chaque image existante, on crée un "preview" identique à la création
// Sauf qu’au lieu de stocker un File, on stocke un "faux" objet { filename, isExisting: true }
data.images.forEach(filename => {
const imageObj = {
filename: filename,
isExisting: true
};
existingImagesEdit.push(imageObj);
createPreviewElementEdit(imageObj);
});
}


// ------------------------------------------------------------------
// 3) Gérer la dropzone (pour les nouvelles images)
//    On aura selectedFilesEdit[] pour stocker les fichiers "nouveaux"
// ------------------------------------------------------------------
let selectedFilesEdit = []; // contiendra des objets File
let existingImagesEdit = []; // contiendra { filename: "...", isExisting: true }

const dropZoneEdit = document.getElementById('drop-zone-edit');
const fileInputEdit = document.getElementById('file-input-edit');
const previewContainerEdit = document.getElementById('preview-container-edit');
const formEdit = document.getElementById('edit-product-form');

// Empêche comportement par défaut
['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
dropZoneEdit.addEventListener(eventName, e => e.preventDefault());
});
['dragenter', 'dragover'].forEach(eventName => {
dropZoneEdit.addEventListener(eventName, () => {
dropZoneEdit.classList.add('highlight');
});
});
['dragleave', 'drop'].forEach(eventName => {
dropZoneEdit.classList.remove('highlight');
});

dropZoneEdit.addEventListener('drop', e => {
const files = [...e.dataTransfer.files];
addNewFilesEdit(files);
});
dropZoneEdit.addEventListener('click', () => {
fileInputEdit.click();
});
fileInputEdit.addEventListener('change', e => {
const files = [...e.target.files];
addNewFilesEdit(files);
fileInputEdit.value = ''; // reset
});

function addNewFilesEdit(files) {
files.forEach(file => {
if (!file.type.startsWith('image/')) {
return;
}
// on ajoute un _id unique pour gestion
file._id = Math.random().toString(36).substring(2);
selectedFilesEdit.push(file);
createPreviewElementEdit(file);
});
}

/**
     * Crée un élément .preview-wrapper pour un "objet image" (soit un File, soit {filename,isExisting})
     */
function createPreviewElementEdit(obj) {
const wrapper = document.createElement('div');
wrapper.classList.add('preview-wrapper', 'p-r');
wrapper.style.margin = '10px';

let imgURL = '';
if (obj.isExisting) { // c’est une image déjà sur le serveur
imgURL = '/assets/product/' + obj.filename;
} else { // c’est un File
imgURL = URL.createObjectURL(obj);
}

const img = document.createElement('img');
img.src = imgURL;
img.classList.add('preview-image', 'b-r-5');
img.style.maxWidth = '100px';

const removeBtn = document.createElement('button');
removeBtn.innerHTML = '<img src="/icons/croix.svg" alt="Supprimer">';
removeBtn.classList.add('button-delete', 'p-a', 't--10', 'r--10', 'b-s-n');
removeBtn.style.background = 'red';
removeBtn.style.width = '25px';
removeBtn.style.height = '25px';

removeBtn.addEventListener('click', () => {
wrapper.remove();

if (obj.isExisting) { // On retire l’objet de existingImagesEdit
existingImagesEdit = existingImagesEdit.filter(o => o !== obj);
} else { // On retire le File de selectedFilesEdit
selectedFilesEdit = selectedFilesEdit.filter(f => f._id !== obj._id);
URL.revokeObjectURL(imgURL);
}
});

wrapper.appendChild(img);
wrapper.appendChild(removeBtn);
previewContainerEdit.appendChild(wrapper);
}

// ------------------------------------------------------------------
// 4) Avant l’envoi du formulaire, on reconstruit fileInputEdit.files
//    à partir de selectedFilesEdit,
//    et on crée des inputs hidden pour existingImagesEdit
// ------------------------------------------------------------------
formEdit.addEventListener('submit', e => { // 1) Reconstruire fileInputEdit.files
const dt = new DataTransfer();
selectedFilesEdit.forEach(file => {
dt.items.add(file);
});
fileInputEdit.files = dt.files;

// 2) Créer des <input type="hidden" name="existing_images[]">
//    pour chaque image existante qu’on garde
//    (sinon, si on l’a supprimée, elle ne sera pas envoyée)
// => on en crée dans le form
// => avant d’appeler le submit final
// => Pour éviter de dupliquer, on supprime d’abord tous les
//    inputs hidden existants
document.querySelectorAll('input[name="existing_images[]"]').forEach(inp => inp.remove());

existingImagesEdit.forEach(imgObj => {
const hidden = document.createElement('input');
hidden.type = 'hidden';
hidden.name = 'existing_images[]';
hidden.value = imgObj.filename;
formEdit.appendChild(hidden);
});
});

// ------------------------------------------------------------------
// 5) Gérer l’affichage conditionnel (2e menu, 3e menu) en EDIT
// ------------------------------------------------------------------
const editProductTypeSelect = document.getElementById('edit_product_type_select');
const editSecondMenu = document.getElementById('second-menu-edit');
const editModelSelect = document.getElementById('edit_product_model_select');
const editThirdMenuAurillac = document.getElementById('third-menu-aurillac-edit');
const editThirdMenuArtisanal = document.getElementById('third-menu-artinsanal-edit');


function toggleSecondMenuEdit() {
if (editProductTypeSelect.value === 'couteau') {
editSecondMenu.classList.remove('dp-n');
} else {
editSecondMenu.classList.add('dp-n');
editThirdMenuAurillac.classList.add('dp-n');
editThirdMenuArtisanal.classList.add('dp-n');
}
}

function toggleThirdMenuEdit() {
  if (editSecondMenu.classList.contains('dp-n')) {
    editThirdMenuAurillac.classList.add('dp-n');
    editThirdMenuArtisanal.classList.add('dp-n');
    return;
  }

  const selectedOption = editModelSelect.options[editModelSelect.selectedIndex];
  const dataName = selectedOption.getAttribute('data-name');

  editThirdMenuAurillac.classList.add('dp-n');
  editThirdMenuArtisanal.classList.add('dp-n');

  if (dataName === 'aurillac') {
    editThirdMenuAurillac.classList.remove('dp-n');
  } else if (dataName === 'artisanal') {
    editThirdMenuArtisanal.classList.remove('dp-n');
  }
}


editProductTypeSelect.addEventListener('change', () => {
toggleSecondMenuEdit();
toggleThirdMenuEdit();
});
editModelSelect.addEventListener('change', () => {
toggleThirdMenuEdit();
});

// ------------------------------------------------------------------
// 6) Gérer la fermeture du menu
// ------------------------------------------------------------------
const closeMenuEditBtn = document.getElementById('closeMenuEdit');
closeMenuEditBtn.addEventListener('click', e => {
e.preventDefault();
closeEditMenu();
});
function closeEditMenu() {
document.getElementById('edit-product-menu').classList.add('dp-n');
document.body.classList.remove('ovf-h');
}

});
	</script>


	<div class="pageContainer min-h-100-vh gBgColor">
		<div class="dp-f-c pad-30 b-s-b-b gp-20 bg-va-transparent b-r-10">
			<section class="dp-f-c gp-30 w-100-p">
				<div class="dp-f-r j-c-s-b a-i-c">
					<h1 class="ft-s-50">Liste des produits</h1>
					<div class="dp-f-r gp-10">
						<button class="button h-30 ft-s-14 pad-x-15 pad-y-0" id="open-home-products-modal">
							Modifier produits d’accueil
						</button>
						<button id="toggle-create-product-menu" class="button pad-0 h-30 w-30 ft-s-20">+</button>
					</div>
				</div>
				{% if produits is empty %}
					<table class="table w-100-p" id="produits-table">
						<thead>
							<tr
								class="u-s-n">
								<!-- On ajoute un span .sort-indicator pour l'icône/flèche -->
								<th>Infos</th>
							</tr>
						</thead>
						<tbody>
							<tr>
								<td>Aucun produit n'est présent sur Vulcan'Affûtage, n'hésite pas à en ajouter un !</td>
							</tr>
						</tbody>
					</table>
				{% else %}
					<!-- Votre table -->
					<table class="table w-100-p" id="produits-table">
						<thead>
							<tr
								class="u-s-n">
								<!-- On ajoute un span .sort-indicator pour l'icône/flèche -->
								<th data-sort-type="number">Couverture
								</th>
								<th data-sort-type="string">Nom
									<span class="sort-indicator"></span>
								</th>
								<th data-sort-type="string">Type
									<span class="sort-indicator"></span>
								</th>
								<th data-sort-type="number">Prix vente
									<span class="sort-indicator"></span>
								</th>
								<th data-sort-type="string">Status
									<span class="sort-indicator"></span>
								</th>
								<th>Actions</th>
							</tr>
						</thead>
						<tbody>
							{% for produit in produits %}
								<tr data-id="{{ produit.id }}">
									<td class="w-75 h-75 dp-f a-i-c j-c-c brd-n">
										<a href='/produit/{{ produit.id }}' target="_BLANK">
											<img
												src="/assets/product/{{ produit.id }}-1.jpg"
												loading="lazy"
												decoding="async"
												alt="Cover {{ produit.libelle|e }}"
												class="max-w-100-p max-h-100-p">
										</a>
									</td>
									<td class="libelle">{{ produit.libelle }}</td>
									<td class="type">{{ produit.typeProduit.label() }}</td>
									<td class="prixVente">{{ produit.prixVente }}€</td>
									<td class="status l-h-1-4">
										{{ produit.status.label() }}<br>
										<span class="{% if produit.statusBoutique.label() is same as('Vente') %}vente-bg-elmnt{% elseif produit.statusBoutique.label() is same as('Vendu') %}vendu-bg-elmnt{% elseif produit.statusBoutique.label() is same as('Exposition') %}expo-bg-elmnt{% endif %}">
											{{ produit.statusBoutique.label() }}
										</span>
									</td>


									<td
										class="dp-f-r gp-10 j-c-c a-i-c brd-n h-100-p">										
										<button class="button btn btn-sm btn-edit" onclick="editProduct({{ produit.id }})">
											Modifier
										</button>
										<button class="button btn btn-sm btn-delete rBgColor rBgColor-h" onclick="deleteProduct({{ produit.id }})">
											Supprimer
										</button>
									</td>
								</tr>
							{% endfor %}
						</tbody>
					</table>
				{% endif %}
			</section>
		</div>
	</div>

	{# ===================== MODAL : PRODUITS MIS EN AVANT (ACCUEIL) ===================== #}
	<div id="home-products-modal" class="dp-n p-f t-0 l-0 w-100-p h-100-vh bg-va-transparent z-i-30 dp-f j-c-c a-i-c">
		<div class="dp-f-c gp-15 bg-c-white pad-30 b-r-10 w-100-p p-r" style="max-width:900px; max-height:85vh; overflow-y:auto;">

			<button class="button p-a t-15 r-15 h-25 w-25 dp-f a-i-c j-c-c pad-0" id="close-home-modal">
				<img src="/icons/croix.svg" alt="Fermer">
			</button>

			<h2 class="ft-s-35">Produits mis en avant</h2>
			<p class="ft-s-14 o-7">
				Sélectionne jusqu'à 20 produits affichés sur la page d'accueil. Glisse pour réorganiser l'ordre.
			</p>

			<div id="home-products-list" class="dp-f f-w-w gp-12 mar-t-15" style="min-height:80px;"></div>

			<button id="add-home-product-btn" class="dp-f a-i-c j-c-c gp-8 cur-p pad-10 b-r-8 mar-t-10" style="border:2px dashed var(--dom-green); background:transparent; color:var(--dom-green); font-weight:600; font-size:14px; width:100%;">
				<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" width="16" height="16" fill="currentColor">
					<path d="M480,224H288V32c0-17.673-14.327-32-32-32s-32,14.327-32,32v192H32c-17.673,0-32,14.327-32,32s14.327,32,32,32h192v192c0,17.673,14.327,32,32,32s32-14.327,32-32V288h192c17.673,0,32-14.327,32-32S497.673,224,480,224z"/>
				</svg>
				Ajouter un produit
			</button>

			<div class="dp-f j-c-f-e gp-15 mar-t-20">
				<button class="button bg-grey ft-s-14" id="cancel-home-selection">Annuler</button>
				<button class="button ft-s-14" id="save-home-selection">Valider</button>
			</div>

		</div>
	</div>

	{# ===================== MODAL : SÉLECTION DE PRODUIT ===================== #}
	<div id="select-product-modal" class="dp-n p-f t-0 l-0 w-100-p h-100-vh bg-va-transparent z-i-40 dp-f j-c-c a-i-c">
		<div class="bg-c-white dp-f-c gp-12 pad-30 b-r-10 w-100-p p-r" style="max-width:950px; max-height:85vh; overflow-y:auto;">
			<button class="button p-a t-15 r-15 h-25 w-25 dp-f a-i-c j-c-c pad-0" id="close-select-product" type="button">
				<img src="/icons/croix.svg" alt="Fermer">
			</button>

			<h3 class="ft-s-30">Choisir un produit</h3>

			<div class="dp-f a-i-c gp-10 f-w-w">
				<input
					id="select-product-search"
					class="promptRegister b-r-10"
					type="text"
					placeholder="Rechercher un produit..."
					autocomplete="off"
					style="flex:1; min-width:200px;"
				>
				<select id="select-product-type-filter" class="select-menu b-r-10" style="min-width:160px; height:38px;">
					<option value="">Tous les types</option>
					<option value="couteau">Couteaux</option>
					<option value="tire_bouchon">Tire-bouchons</option>
					<option value="decapsuleur">Décapsuleurs</option>
					<option value="cravates_western">Cravates Western</option>
					<option value="accessoires">Accessoires</option>
				</select>
				<button class="button h-35 w-35 pad-0 a-i-c j-c-c ft-s-15" type="button" id="clear-select-product-search" title="Effacer">✕</button>
			</div>

			<p id="select-product-empty" class="ft-s-14 o-7 dp-n mar-t-10">
				Aucun produit ne correspond à ta recherche.
			</p>

			<div id="select-product-grid" class="dp-f f-w-w gp-15 mar-t-15" style="justify-content:flex-start;">
				{% for produit in produits %}
					<div class="product-choice cur-p b-r-8 ovf-h b-s-b-b"
						 data-id="{{ produit.id }}"
						 data-title="{{ produit.libelle }}"
						 data-type="{{ produit.typeProduit.value }}"
						 data-image="/assets/product/{{ produit.id }}-1.jpg"
						 style="width:160px; border:1px solid #e0e0e0; transition:box-shadow 0.2s, transform 0.15s;">
						<div style="width:160px; height:140px; background:#fafaf8; display:flex; align-items:center; justify-content:center; overflow:hidden;">
							<img
								class="product-thumb"
								loading="lazy"
								decoding="async"
								src="data:image/gif;base64,R0lGODlhAQABAAAAACw="
								data-src="/assets/product/{{ produit.id }}-1.jpg"
								alt="Aperçu {{ produit.libelle|e }}"
								style="max-width:100%; max-height:100%; object-fit:contain;"
							>
						</div>
						<div style="padding:8px 10px;">
							<p class="ft-s-13 truncate-2-lines" title="{{ produit.libelle|e }}" style="line-height:1.3; height:34px; overflow:hidden;">{{ produit.libelle }}</p>
						</div>
					</div>
				{% endfor %}
			</div>

		</div>
	</div>

<script>
// ===================== HOME PRODUCTS MANAGEMENT =====================

let homeProducts = []; // Array of {id, title, image}
const MAX_HOME_PRODUCTS = 20;
let currentSlot = null;

document.getElementById('open-home-products-modal').onclick = () => {
    loadHomeSelection();
    document.getElementById('home-products-modal').classList.remove('dp-n');
};

document.getElementById('close-home-modal').onclick =
document.getElementById('cancel-home-selection').onclick = () => {
    document.getElementById('home-products-modal').classList.add('dp-n');
};

function renderHomeProductsList() {
    const container = document.getElementById('home-products-list');
    const addBtn = document.getElementById('add-home-product-btn');
    container.innerHTML = '';

    homeProducts.forEach((product, index) => {
        const card = document.createElement('div');
        card.className = 'dp-f a-i-c gp-10 pad-8 b-r-8 b-s-b-b';
        card.style.cssText = 'border:1px solid #d0d0d0; background:#fafaf8; min-width:200px; max-width:280px; flex:1 1 200px; position:relative; cursor:grab;';
        card.draggable = true;
        card.dataset.homeIndex = index;

        card.innerHTML = `
            <span class="ft-s-12 o-5" style="min-width:18px; text-align:center;">${index + 1}</span>
            <img src="${product.image}" alt="" style="width:45px; height:45px; object-fit:contain; border-radius:4px; background:#fff;">
            <p class="ft-s-13 truncate-1-line" style="flex:1;" title="${product.title}">${product.title}</p>
            <button class="home-product-remove cur-p" data-index="${index}" style="background:none; border:none; font-size:16px; color:#c00; padding:2px 6px; cursor:pointer;" title="Retirer">✕</button>
        `;

        // Drag events
        card.addEventListener('dragstart', (e) => {
            e.dataTransfer.setData('text/plain', index);
            card.style.opacity = '0.5';
        });
        card.addEventListener('dragend', () => { card.style.opacity = '1'; });
        card.addEventListener('dragover', (e) => { e.preventDefault(); card.style.borderColor = 'var(--dom-green)'; });
        card.addEventListener('dragleave', () => { card.style.borderColor = '#d0d0d0'; });
        card.addEventListener('drop', (e) => {
            e.preventDefault();
            card.style.borderColor = '#d0d0d0';
            const fromIndex = Number(e.dataTransfer.getData('text/plain'));
            const toIndex = Number(card.dataset.homeIndex);
            if (fromIndex !== toIndex) {
                const [moved] = homeProducts.splice(fromIndex, 1);
                homeProducts.splice(toIndex, 0, moved);
                renderHomeProductsList();
            }
        });

        // Remove button
        card.querySelector('.home-product-remove').onclick = (e) => {
            e.stopPropagation();
            homeProducts.splice(index, 1);
            renderHomeProductsList();
        };

        container.appendChild(card);
    });

    // Show/hide add button based on max
    addBtn.style.display = homeProducts.length >= MAX_HOME_PRODUCTS ? 'none' : 'flex';
    addBtn.querySelector('svg + *') || null;
}

function loadHomeSelection() {
    fetch('/api/admin/home-products')
        .then(r => r.json())
        .then(res => {
            if (!res.success) return;

            homeProducts = [];
            // Convert slot-based data to ordered array
            const entries = Object.entries(res.data)
                .map(([slot, product]) => ({ slot: Number(slot), ...product, id: Number(product.id) }))
                .sort((a, b) => a.slot - b.slot);

            entries.forEach(p => {
                homeProducts.push({ id: p.id, title: p.title, image: p.image });
            });

            renderHomeProductsList();
        });
}

document.getElementById('add-home-product-btn').onclick = () => {
    if (homeProducts.length >= MAX_HOME_PRODUCTS) {
        showNotification({ success: 'attention', title: 'Limite atteinte', message: 'Maximum 20 produits sur la page d\'accueil.' });
        return;
    }
    openSelectProductModal();
};

document.getElementById('save-home-selection').onclick = () => {
    const payload = {};
    // Send all 20 slots: filled ones + null for the rest
    for (let i = 1; i <= MAX_HOME_PRODUCTS; i++) {
        payload[i] = homeProducts[i - 1] ? Number(homeProducts[i - 1].id) : null;
    }

    fetch('/api/admin/update-home-products', {
        method: 'POST',
        headers: admCsrfHeaders({'Content-Type': 'application/json'}),
        body: JSON.stringify(payload)
    }).then(r => r.json()).then(res => {
        if (res.success) {
            document.getElementById('home-products-modal').classList.add('dp-n');
            showNotification({ success: true, title: 'Enregistré', message: 'Produits de la page d\'accueil mis à jour.' });
        } else {
            showNotification({ success: false, title: 'Erreur', message: res.message || 'Erreur lors de la sauvegarde.' });
        }
    });
};

// ===================== PRODUCT SELECTOR MODAL =====================

document.querySelectorAll('.product-choice').forEach(card => {
    card.onclick = () => {
        const product = {
            id: Number(card.dataset.id),
            title: card.dataset.title,
            image: card.dataset.image
        };

        // Check if already in the list
        if (homeProducts.some(p => p.id === product.id)) {
            showNotification({ success: 'attention', title: 'Déjà ajouté', message: 'Ce produit est déjà dans la liste.' });
            return;
        }

        homeProducts.push(product);
        renderHomeProductsList();
        document.getElementById('select-product-modal').classList.add('dp-n');
    };
});

const closeSelectProductBtn = document.getElementById('close-select-product');
closeSelectProductBtn.addEventListener('click', (e) => {
    e.preventDefault();
    e.stopPropagation();
    document.getElementById('select-product-modal').classList.add('dp-n');
});

document.getElementById('select-product-modal').addEventListener('click', () => {
    document.getElementById('select-product-modal').classList.add('dp-n');
});

document.querySelector('#select-product-modal > div')
    .addEventListener('click', e => e.stopPropagation());

let productThumbObserver = null;

function initSelectProductLazyLoad() {
    const modal = document.getElementById('select-product-modal');
    const root = modal.querySelector(':scope > div');
    if (!root) return;
    if (productThumbObserver) {
        // Re-observe new images
        modal.querySelectorAll('img[data-src]').forEach(img => {
            if (img.src.includes('R0lGOD')) productThumbObserver.observe(img);
        });
        return;
    }

    productThumbObserver = new IntersectionObserver((entries, obs) => {
        entries.forEach(entry => {
            if (!entry.isIntersecting) return;
            const img = entry.target;
            const src = img.dataset.src;
            if (src && img.src !== src) img.src = src;
            obs.unobserve(img);
        });
    }, { root, rootMargin: '300px' });

    modal.querySelectorAll('img[data-src]').forEach(img => productThumbObserver.observe(img));
}

function openSelectProductModal() {
    const modal = document.getElementById('select-product-modal');
    modal.classList.remove('dp-n');

    const input = document.getElementById('select-product-search');
    const typeFilter = document.getElementById('select-product-type-filter');
    if (input) { input.value = ''; setTimeout(() => input.focus(), 0); }
    if (typeFilter) typeFilter.value = '';

    applySelectProductFilter();
    initSelectProductLazyLoad();
}

function normalizeStr(s) {
    return (s || '').toString().trim().toLowerCase().normalize('NFD').replace(/[\u0300-\u036f]/g, '');
}

function applySelectProductFilter() {
    const input = document.getElementById('select-product-search');
    const typeFilter = document.getElementById('select-product-type-filter');
    const empty = document.getElementById('select-product-empty');
    if (!input) return;

    const q = normalizeStr(input.value);
    const selectedType = typeFilter ? typeFilter.value : '';
    let visibleCount = 0;

    document.querySelectorAll('#select-product-modal .product-choice').forEach(card => {
        const title = normalizeStr(card.dataset.title || card.querySelector('p')?.textContent);
        const type = card.dataset.type || '';
        const matchText = q === '' || title.includes(q);
        const matchType = selectedType === '' || type === selectedType;
        const match = matchText && matchType;

        card.classList.toggle('dp-n', !match);
        if (match) visibleCount++;
    });

    if (empty) empty.classList.toggle('dp-n', visibleCount !== 0);
}

(function initSelectProductSearchOnce() {
    const input = document.getElementById('select-product-search');
    const typeFilter = document.getElementById('select-product-type-filter');
    const clearBtn = document.getElementById('clear-select-product-search');
    if (!input || input.dataset.bound === '1') return;
    input.dataset.bound = '1';

    input.addEventListener('input', () => { applySelectProductFilter(); initSelectProductLazyLoad(); });
    if (typeFilter) typeFilter.addEventListener('change', () => { applySelectProductFilter(); initSelectProductLazyLoad(); });
    if (clearBtn) {
        clearBtn.addEventListener('click', () => {
            input.value = '';
            if (typeFilter) typeFilter.value = '';
            applySelectProductFilter();
            input.focus();
            initSelectProductLazyLoad();
        });
    }
})();

</script>

	<script>
		document.getElementById('toggle-create-product-menu').addEventListener('click', function () {
document.getElementById('create-product-menu').classList.toggle('dp-n');
document.body.classList.toggle('dp-f');
document.body.classList.toggle('ovf-h');
});

document.getElementById('closeMenu').addEventListener('click', function () {
document.getElementById('create-product-menu').classList.toggle('dp-n');
document.body.classList.toggle('dp-f');
document.body.classList.toggle('ovf-h');
});
	</script>


	<script>
		document.addEventListener('DOMContentLoaded', () => {
const table = document.getElementById('produits-table');
const ths = table.querySelectorAll('thead th');

// Initialisation : on met toutes les colonnes en "tiret" (none)
ths.forEach(th => {
th.classList.add('th-sorted-none');
th.dataset.sortState = 0; // 0=none, 1=asc, 2=desc
});

ths.forEach((th, colIndex) => {
th.addEventListener('click', () => { // 1) On récupère l'ancien état de la colonne cliquée
let oldState = parseInt(th.dataset.sortState, 10);

// 2) On réinitialise toutes les autres colonnes en 0 (tiret)
ths.forEach(th2 => {
if (th2 !== th) {
th2.classList.remove('th-sorted-none', 'th-sorted-asc', 'th-sorted-desc');
th2.classList.add('th-sorted-none');
th2.dataset.sortState = 0;
}
});

// 3) On calcule le nouvel état pour la colonne cliquée
let newState = (oldState + 1) % 3; // 0 -> 1 -> 2 -> 0
th.dataset.sortState = newState;

// 4) On applique la classe correspondante (none, asc, desc)
th.classList.remove('th-sorted-none', 'th-sorted-asc', 'th-sorted-desc');
if (newState === 0) {
th.classList.add('th-sorted-none');
} else if (newState === 1) {
th.classList.add('th-sorted-asc');
} else if (newState === 2) {
th.classList.add('th-sorted-desc');
}

// 5) Si tri asc ou desc, on trie le tableau
if (newState !== 0) {
sortTableByColumn(table, colIndex, newState, th.dataset.sortType);
} else {
// => Sinon, on vient de désactiver le tri sur la colonne cliquée
// Vérifions si maintenant *toutes* les colonnes sont à 0
const allNone = Array.from(ths).every(th2 => parseInt(th2.dataset.sortState, 10) === 0);
if (allNone) {
// => plus aucun tri explicite
// => on applique un tri "caché" par ID asc (colIndex=0, sortState=1)
//    sans changer la classe visuelle sur la colonne ID
sortTableByColumn(table, 0, 1, ths[0].dataset.sortType);
}
}
});
});

/**
   * Tri le tableau selon la colonne et l'état (asc/desc).
   * @param {HTMLTableElement} table
   * @param {number} columnIndex
   * @param {number} sortState 1=asc, 2=desc
   * @param {string} sortType "number" ou "string"
   */
function sortTableByColumn(table, columnIndex, sortState, sortType) {
const tbody = table.querySelector('tbody');
let rows = [... tbody.querySelectorAll('tr')];

const isAsc = (sortState === 1);

rows.sort((rowA, rowB) => {
let cellA = rowA.children[columnIndex].innerText.trim();
let cellB = rowB.children[columnIndex].innerText.trim();

if (sortType === 'number') {
cellA = parseFloat(cellA.replace(',', '.')) || 0;
cellB = parseFloat(cellB.replace(',', '.')) || 0;
} else {
cellA = cellA.toLowerCase();
cellB = cellB.toLowerCase();
}

if (cellA < cellB) 
return isAsc ? -1 : 1;



if (cellA > cellB) 
return isAsc ? 1 : -1;



return 0;
});

// On replace les lignes triées
rows.forEach(row => tbody.appendChild(row));
}
});
	</script>


	<script>
		document.addEventListener('DOMContentLoaded', () => {
  const productTypeSelect = document.getElementById('product_type_select');
  const modelSelect = document.getElementById('product_model_select');
  const secondMenu = document.getElementById('second-menu');
  const thirdMenuAurillac = document.getElementById('third-menu-aurillac');
  const thirdMenuArtisanal = document.getElementById('third-menu-artisanal');

  function toggleSecondMenu() {
    const isKnife = productTypeSelect.value === 'couteau';
    secondMenu.classList.toggle('dp-n', !isKnife);
    if (!isKnife) {
      thirdMenuAurillac.classList.add('dp-n');
      thirdMenuArtisanal.classList.add('dp-n');
    }
  }

  function toggleThirdMenu() {
    if (secondMenu.classList.contains('dp-n')) {
      thirdMenuAurillac.classList.add('dp-n');
      thirdMenuArtisanal.classList.add('dp-n');
      return;
    }

    const selectedOption = modelSelect.options[modelSelect.selectedIndex];
    const dataName = selectedOption.getAttribute('data-name');

    thirdMenuAurillac.classList.add('dp-n');
    thirdMenuArtisanal.classList.add('dp-n');

    if (dataName === 'aurillac') {
      thirdMenuAurillac.classList.remove('dp-n');
    } else if (dataName === 'artisanal') {
      thirdMenuArtisanal.classList.remove('dp-n');
    }
  }

  toggleSecondMenu();
  toggleThirdMenu();

  productTypeSelect.addEventListener('change', () => {
    toggleSecondMenu();
    toggleThirdMenu();
  });

  modelSelect.addEventListener('change', toggleThirdMenu);
});

	</script>


	<script>
		document.addEventListener('DOMContentLoaded', () => {
const dropZone = document.getElementById('drop-zone');
const fileInput = document.getElementById('file-input');
const previewContainer = document.getElementById('preview-container');
const form = document.querySelector('#create-product-form');

let selectedFiles = [];

// Empêche comportement par défaut sur drag & drop
['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
dropZone.addEventListener(eventName, e => e.preventDefault());
});

// Gère le style "highlight" en drag
['dragenter', 'dragover'].forEach(eventName => {
dropZone.addEventListener(eventName, () => {
dropZone.classList.add('highlight');
document.getElementById('drop-text').innerHTML = 'Relâchez pour<br>ajouter';
});
});

['dragleave', 'drop'].forEach(eventName => {
dropZone.addEventListener(eventName, () => {
dropZone.classList.remove('highlight');
document.getElementById('drop-text').innerHTML = 'Glisser / Déposer vos images ici<br>ou cliquer pour sélectionner';
});
});

// Drop
dropZone.addEventListener('drop', e => {
const files = [...e.dataTransfer.files];
addFiles(files);
});

// Clic -> ouvre le fileInput
dropZone.addEventListener('click', () => {
fileInput.click();
});

// fileInput
fileInput.addEventListener('change', e => {
const files = [...e.target.files];
addFiles(files);
fileInput.value = ''; // reset
});

/**
     * Ajoute de nouveaux fichiers au tableau `selectedFiles`
     * et crée l'aperçu (sans tout re-rendre)
     */
function addFiles(files) {
files.forEach(file => {
if (!file.type.startsWith('image/')) {
return;
}
// ID unique
file._id = Math.random().toString(36).substring(2, 15);
selectedFiles.push(file);
createPreviewElement(file);
});
}

/**
     * Crée un aperçu DOM pour un fichier donné
     */
function createPreviewElement(file) {
const wrapper = document.createElement('div');
wrapper.classList.add('preview-wrapper', 'p-r');
wrapper.dataset.fileId = file._id;

const imgURL = URL.createObjectURL(file);
const img = document.createElement('img');
img.src = imgURL;
img.classList.add('preview-image', 'b-r-2');

const removeBtn = document.createElement('button');
removeBtn.innerHTML = '<img src="/icons/croix.svg" alt="Supprimer">';
removeBtn.classList.add('button-delete', 'p-a', 't--10', 'r--10', 'b-s-n');

removeBtn.addEventListener('click', () => {
wrapper.remove();
selectedFiles = selectedFiles.filter(f => f._id !== file._id);
URL.revokeObjectURL(imgURL);
});

wrapper.appendChild(img);
wrapper.appendChild(removeBtn);
previewContainer.appendChild(wrapper);
}

/**
     * Juste avant l’envoi classique du formulaire,
     * on recopiede `selectedFiles` dans fileInput.files
     */
form.addEventListener('submit', () => {
const dataTransfer = new DataTransfer();
selectedFiles.forEach(file => dataTransfer.items.add(file));
fileInput.files = dataTransfer.files;
});
});
	</script>


	{# Script JavaScript pour gérer les appels AJAX #}
	<script>
		/**
         * Supprime un produit via l'API, retire la ligne du tableau si succès
         */
function deleteProduct(productId) {
if (!confirm('Êtes-vous sûr de vouloir supprimer ce produit ?')) {
return;
}

fetch('/api/admin/delete-product/' + productId, {
method: 'POST',
headers: admCsrfHeaders()
}).then(response => response.json()).then(data => {
if (data.success) { // Supprimer la ligne du tableau
const row = document.querySelector('tr[data-id="' + productId + '"]');
if (row) {
row.remove();
}
} else {
showNotification({
	success: false,
	title: "Oups... Quelque chose c'est mal passé",
	message: 'Erreur : ' + (data.message || 'Erreur lors de la suppression du produit. Aucune infos supplémentaire'),
})
}
}).catch(error => {
console.error('Erreur fetch:', error);
alert('Une erreur inconnu est survenue. Si le problème persiste contacter Kylian !');
});
}

/**
         * Active / Désactive un produit via l'API, met à jour le statut si succès
         */
function toggleProduct(productId) {
fetch('/api/admin/toggle-product/' + productId, {
method: 'POST',
headers: admCsrfHeaders()
}).then(response => response.json()).then(data => {
if (data.success) { // Mettre à jour le statut dans la ligne
const row = document.querySelector('tr[data-id="' + productId + '"]');
if (row) {
const statusTd = row.querySelector('.status');
statusTd.textContent = (data.newStatus === 'visible') ? 'Visible' : 'Non visible';

// Mettre à jour le texte du bouton
const toggleBtn = row.querySelector('.btn-toggle');
toggleBtn.textContent = (data.newStatus === 'visible') ? 'Rendre invisible' : 'Rendre visible';
}
} else {
alert(data.message || 'Erreur lors du changement de statut du produit.');
}
}).catch(error => {
console.error('Erreur fetch:', error);
alert('Une erreur est survenue.');
});
}

/* La fonction editProduct() de démonstration qui vivait ici a été retirée :
   elle appelait /api/admin/edit-product/{id}, une route qui n'existe pas, et
   sa déclaration écrasait au chargement la vraie editProduct() définie plus
   haut dans la page — le bouton « Modifier » ouvrait deux prompt() puis
   échouait en 404 au lieu d'ouvrir le formulaire d'édition. */
	</script>
{% endblock %}