- Scan ID:
- 2bc276ad-aee9-4e76-b4b5-345ce7a9a320Finished
- Submitted URL:
- https://soft.babi-app.com/api/products
- Report Finished:
Links · 0 found
The outgoing links identified from the page
JavaScript Variables · 20 found
Global JavaScript variables loaded on the window object of a page, are variables declared outside of functions and accessible from anywhere in the code within the current scope
| Name | Type |
|---|---|
| onbeforetoggle | object |
| documentPictureInPicture | object |
| onscrollend | object |
| toggleMobileMenu | function |
| JsBarcode | function |
| QRious | function |
| vehicleModelMultiSelectorUnique | function |
| oeSimilarReferences | function |
| oeReferences | function |
| productReferences | function |
Console log messages · 12 found
Messages logged to the web console
| Type | Category | Log |
|---|---|---|
| warning | javascript |
|
| warning | javascript |
|
| warning | javascript |
|
| warning | javascript |
|
| warning | javascript |
|
| warning | javascript |
|
| warning | javascript |
|
| warning | javascript |
|
| warning | javascript |
|
| error | network |
|
| error | network |
|
| error | network |
|
HTML
The raw HTML body of the page
<!DOCTYPE html><html lang="fr"><head>
<!-- Meta Tags -->
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>QSP Gestion</title>
<!-- Tailwind CSS via CDN -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/tailwind.min.css" rel="stylesheet">
<!-- Font Awesome via CDN -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
<style>
/* ========================================================================
HEADER STYLES
======================================================================== */
/* Import Google Fonts for enhanced typography */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600&family=Poppins:wght@500;600&display=swap');
/* CSS Variables for consistent theming */
:root {
--primary-color: #3b82f6; /* Tailwind blue-500 */
--primary-dark-color: #2563eb; /* Tailwind blue-600 */
--secondary-color: #10b981; /* Tailwind green-500 */
--secondary-dark-color: #059669; /* Tailwind green-600 */
--text-secondary-color: #6b7280; /* Tailwind gray-500 */
--hover-bg-color: #f3f4f6; /* Tailwind gray-100 */
--navbar-height: 64px;
}
/* Body Styles */
body {
font-family: 'Inter', sans-serif;
background-color: #f3f4f6; /* Tailwind gray-100 */
color: #1f2937; /* Tailwind gray-800 */
margin: 0;
padding-top: var(--navbar-height);
line-height: 1.6;
}
/* Header Container */
header.fixed {
background: linear-gradient(90deg, #ffffff, #f9fafb);
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
position: fixed;
top: 0;
width: 100%;
z-index: 50;
transition: background 0.3s ease, box-shadow 0.3s ease;
}
/* Header Container when Scrolled */
header.fixed.scrolled {
background: linear-gradient(90deg, #ffffff, #e5e7eb);
box-shadow: 0 6px 8px rgba(0, 0, 0, 0.15);
}
/* Flex Container inside Header */
header .container {
display: flex;
justify-content: space-between;
align-items: center;
padding: 1rem 1.5rem;
}
/* Logo Section */
header .logo {
display: flex;
align-items: center;
gap: 0.75rem;
}
header .logo i {
color: var(--secondary-color);
font-size: 1.5rem; /* Equivalent to text-2xl */
transition: color 0.3s ease;
}
header .logo h1 {
font-family: 'Poppins', sans-serif;
font-size: 1.25rem; /* Equivalent to text-2xl */
font-weight: 600;
color: var(--primary-color);
transition: color 0.3s ease;
}
header .logo h1 span {
color: var(--secondary-color);
}
/* Navigation Styles */
header nav {
display: flex;
align-items: center;
gap: 1.5rem; /* Equivalent to space-x-6 */
}
header nav a {
position: relative;
font-size: 0.875rem; /* Equivalent to text-sm */
font-weight: 500;
color: var(--text-secondary-color);
text-decoration: none;
transition: color 0.3s ease, transform 0.3s ease;
}
header nav a::after {
content: '';
position: absolute;
width: 0%;
height: 2px;
bottom: -4px;
left: 0;
background-color: var(--secondary-color);
transition: width 0.3s ease;
}
header nav a:hover {
color: var(--secondary-color);
transform: translateY(-2px);
}
header nav a:hover::after {
width: 100%;
}
/* Special Button (.btn-primary) Styles */
header nav .btn-primary {
background-color: var(--primary-color);
color: #ffffff;
padding: 0.5rem 1rem;
border-radius: 0.375rem; /* Equivalent to rounded-md */
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
font-weight: 600;
transition: background-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}
header nav .btn-primary:hover {
background-color: var(--primary-dark-color);
transform: translateY(-2px);
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.15);
}
/* Burger Menu Button Styles */
header button.burger-menu {
font-size: 1.5rem; /* Equivalent to text-2xl */
color: var(--text-secondary-color);
background: none;
border: none;
cursor: pointer;
transition: color 0.3s ease;
}
header button.burger-menu:hover {
color: var(--secondary-color);
}
/* Mobile Navigation Menu Styles */
header nav.mobile-menu {
display: none;
flex-direction: column;
background-color: #ffffff;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
position: absolute;
top: var(--navbar-height);
left: 0;
width: 100%;
z-index: 40;
animation: slideDown 0.3s ease-out forwards;
}
header nav.mobile-menu a {
padding: 0.75rem 1.5rem;
font-size: 0.875rem; /* Equivalent to text-sm */
color: var(--text-secondary-color);
transition: background-color 0.3s ease, color 0.3s ease;
}
header nav.mobile-menu a:hover {
background-color: var(--hover-bg-color);
color: var(--secondary-color);
}
header nav.mobile-menu a.btn-primary {
margin: 0.5rem 1.5rem;
text-align: center;
background-color: var(--secondary-color);
color: #ffffff;
padding: 0.5rem 1rem;
border-radius: 0.375rem;
transition: background-color 0.3s ease;
}
header nav.mobile-menu a.btn-primary:hover {
background-color: var(--secondary-dark-color);
}
/* Show Mobile Menu when Active */
header nav.mobile-menu.active {
display: flex;
}
/* Animation for Mobile Menu */
@keyframes slideDown {
from {
opacity: 0;
transform: translateY(-10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* ========================================================================
RESPONSIVE STYLES
======================================================================== */
/* Desktop Navigation */
@media (min-width: 768px) {
header nav.desktop-menu {
display: flex;
}
}
/* Mobile Navigation */
@media (max-width: 767px) {
header nav.desktop-menu {
display: none;
}
header nav.mobile-menu {
display: none;
}
header nav.mobile-menu.active {
display: flex;
}
}
/* ========================================================================
ACCESSIBILITY & INTERACTIVITY
======================================================================== */
/* Focus Styles for Accessibility */
header nav a:focus, header button.burger-menu:focus {
outline: 2px solid var(--secondary-color);
outline-offset: 2px;
}
/* Icon Transitions */
header button.burger-menu i {
transition: transform 0.3s ease;
}
/* Rotate Burger Icon to Close Icon */
header button.burger-menu.open i.fa-bars {
transform: rotate(90deg);
}
/* ========================================================================
ADDITIONAL EFFECTS
======================================================================== */
/* Tooltip Styles (Optional) */
header nav a[data-tooltip]:hover::after {
content: attr(data-tooltip);
position: absolute;
bottom: -24px;
left: 50%;
transform: translateX(-50%);
background-color: rgba(55, 65, 81, 0.9); /* Tailwind gray-700 */
color: #ffffff;
padding: 0.25rem 0.5rem;
border-radius: 0.25rem;
white-space: nowrap;
opacity: 0;
pointer-events: none;
transition: opacity 0.3s ease;
font-size: 0.75rem; /* Tailwind text-xs */
}
header nav a[data-tooltip]:hover::after {
opacity: 1;
}
</style>
<script>
window.addEventListener('scroll', function() {
const header = document.querySelector('header.fixed');
if (window.scrollY > 50) {
header.classList.add('scrolled');
} else {
header.classList.remove('scrolled');
}
});
// Gestion de l'ouverture/fermeture du menu mobile
function toggleMobileMenu() {
const mobileMenu = document.querySelector('header nav.mobile-menu');
const burgerButton = document.querySelector('header button.burger-menu');
mobileMenu.classList.toggle('active');
burgerButton.classList.toggle('open');
}
document.querySelector('header button.burger-menu').addEventListener('click', toggleMobileMenu);
</script>
<!-- Styles Personnalisés -->
<style>
/* Palette de Couleurs Personnalisées */
:root {
--color-bleu-gaulois: #003366; /* Bleu Gaulois */
--color-moutarde: #FFDB58; /* Moutarde */
--color-gris-clair: #F9FAFB; /* Gris Clair */
--color-gris-foncé: #1F2937; /* Gris Foncé */
--color-vert-sauge: #10B981; /* Vert Sauge */
--color-rouge-danger: #EF4444; /* Rouge Danger */
--color-bleu-primaire: #003366; /* Bleu Primaire (Bleu Gaulois) */
--color-bleu-primaire-fonce: #002244; /* Bleu Primaire Foncé */
--color-moutarde-fonce: #E6C300; /* Moutarde Foncé */
--color-blanc: #FFFFFF; /* Blanc */
}
/* Fond et Textes */
.bg-background {
background-color: var(--color-gris-clair);
}
.text-textPrimary {
color: var(--color-gris-foncé);
}
.text-textSecondary {
color: #4B5563; /* Gris Moyen */
}
.text-primary {
color: var(--color-bleu-primaire);
}
.text-secondary {
color: var(--color-vert-sauge);
}
/* Boutons Personnalisés */
.btn-primary {
background-color: var(--color-bleu-primaire);
color: var(--color-blanc);
font-weight: 600;
padding: 0.5rem 1rem;
border-radius: 0.375rem; /* Rounded-md */
transition: background-color 0.3s ease;
}
.btn-primary:hover {
background-color: var(--color-bleu-primaire-fonce);
}
.btn-secondary {
background-color: var(--color-moutarde);
color: var(--color-blanc);
font-weight: 600;
padding: 0.5rem 1rem;
border-radius: 0.375rem;
transition: background-color 0.3s ease;
}
.btn-secondary:hover {
background-color: var(--color-moutarde-fonce);
}
/* Définition de bg-secondary et hover:bg-secondary-dark */
.bg-secondary {
background-color: var(--color-moutarde);
}
.hover\:bg-secondary-dark:hover {
background-color: var(--color-moutarde-fonce);
}
/* Fond des Cartes */
.bg-cardBg {
background-color: var(--color-blanc);
}
/* Ombres Personnalisées */
.shadow-card {
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
/* Textes d'Alerte */
.text-danger {
color: var(--color-rouge-danger);
}
/* Animations */
.animate-fadeIn {
animation: fadeIn 0.5s ease-in-out;
}
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
/* Boutons Supprimer */
.relative .fa-times-circle:hover {
color: #DC2626; /* Rouge Plus Foncé au Survol */
}
/* Styles pour les Sélecteurs Multi */
.vehicle-model-container-unique {
/* Personnalisez si nécessaire */
}
.vehicle-model-tag-unique {
background-color: #E5E7EB; /* Gris Clair */
color: var(--color-gris-foncé);
padding: 0.25rem 0.5rem;
border-radius: 9999px;
display: flex;
align-items: center;
font-size: 0.75rem;
}
.vehicle-model-remove-btn-unique {
margin-left: 0.25rem;
background: none;
border: none;
cursor: pointer;
color: #6B7280; /* Gris Moyen */
}
.vehicle-model-remove-btn-unique:hover {
color: #374151; /* Gris Foncé */
}
.vehicle-model-input-unique {
flex-grow: 1;
border: none;
outline: none;
font-size: 0.875rem;
padding: 0.25rem;
}
.vehicle-model-dropdown-unique {
/* Personnalisez si nécessaire */
}
.vehicle-model-option-unique {
padding: 0.5rem 1rem;
transition: background-color 0.2s ease;
}
.vehicle-model-option-unique:hover {
background-color: #D1D5DB; /* Gris Clair */
}
.vehicle-model-no-result-unique {
padding: 0.5rem 1rem;
color: #6B7280; /* Gris Moyen */
font-size: 0.875rem;
}
/* Boutons d'Impression */
.btn-print {
background-color: var(--color-moutarde);
color: var(--color-blanc);
padding: 0.5rem 1rem;
border-radius: 0.375rem;
transition: background-color 0.3s ease;
}
.btn-print:hover {
background-color: var(--color-moutarde-fonce);
}
/* Styles Optionnels pour les Tickets d'Impression */
.ticket-container {
text-align: center;
font-family: Arial, sans-serif;
}
.ticket-container canvas {
margin: 10px 0;
}
/* Dropdowns et Suggestions */
.dropdown {
background-color: var(--color-blanc);
border: 1px solid #E5E7EB; /* Gris Clair */
border-radius: 0.375rem;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
max-height: 12rem;
overflow-y: auto;
z-index: 10;
}
.dropdown-item {
padding: 0.5rem 1rem;
cursor: pointer;
transition: background-color 0.2s ease;
}
.dropdown-item:hover {
background-color: #D1D5DB; /* Gris Clair */
}
/* Inputs avec Icônes */
.input-icon {
position: relative;
}
.input-icon i {
position: absolute;
left: 0.75rem;
top: 50%;
transform: translateY(-50%);
color: #6B7280; /* Gris Moyen */
}
.input-icon input {
padding-left: 2.5rem; /* Espace pour l'icône */
}
/* Footer */
footer {
background-color: var(--color-blanc);
color: var(--color-textSecondary);
text-align: center;
padding: 1rem 0;
box-shadow: inset 0 -1px 0 #E5E7EB; /* Ligne de séparation */
}
</style>
<!-- Alpine.js via CDN (déjà inclus dans le <head>) -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/alpinejs/3.12.0/cdn.min.js" defer=""></script>
<!-- JsBarcode and QRious (inclus une seule fois dans le <head>) -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/JsBarcode.all.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/qrious/4.0.2/qrious.min.js"></script>
</head>
<body class="bg-background text-textPrimary font-sans" x-data="{ sidebarOpen: false }">
<!-- En-tête -->
<header class="fixed top-0 w-full bg-white shadow-md z-50">
<div class="container mx-auto flex justify-between items-center px-6 py-4">
<!-- Logo -->
<div class="logo flex items-center space-x-3">
<i class="fas fa-car text-secondary text-2xl"></i>
<h1 class="text-2xl font-bold text-primary">
<span class="text-secondary">QSP</span> Gestion
</h1>
</div>
<!-- Navigation Desktop -->
<nav class="desktop-menu hidden md:flex space-x-6 items-center">
<a href="#" class="text-textSecondary hover:text-secondary transition-colors" data-tooltip="Accéder au Dashboard">Dashboard</a>
<a href="#" class="text-textSecondary hover:text-secondary transition-colors" data-tooltip="Gérer les Produits">Produits</a>
<a href="#" class="text-textSecondary hover:text-secondary transition-colors" data-tooltip="Gérer les Fournisseurs">Fournisseurs</a>
<a href="#" class="text-textSecondary hover:text-secondary transition-colors" data-tooltip="Gérer les Commandes">Commandes</a>
<a href="#" class="text-textSecondary hover:text-secondary transition-colors" data-tooltip="Voir les Rapports">Rapports</a>
<a href="#" class="text-textSecondary hover:text-secondary transition-colors" data-tooltip="Paramètres">Paramètres</a>
<a href="https://soft.babi-app.com/liste" class="btn-primary ml-4">Liste des champs de formulaires</a>
</nav>
<!-- Menu Burger -->
<button class="burger-menu md:hidden text-2xl text-textSecondary focus:outline-none focus:ring-2 focus:ring-secondary rounded" @click="sidebarOpen = !sidebarOpen" aria-label="Menu">
<i :class="sidebarOpen ? 'fas fa-times' : 'fas fa-bars'" class="fas fa-bars"></i>
</button>
</div>
<!-- Menu Mobile -->
<nav class="mobile-menu md:hidden bg-white shadow-md">
<a href="#" class="block px-6 py-3 text-textSecondary hover:bg-gray-100" data-tooltip="Accéder au Dashboard">Dashboard</a>
<a href="#" class="block px-6 py-3 text-textSecondary hover:bg-gray-100" data-tooltip="Gérer les Produits">Produits</a>
<a href="#" class="block px-6 py-3 text-textSecondary hover:bg-gray-100" data-tooltip="Gérer les Fournisseurs">Fournisseurs</a>
<a href="#" class="block px-6 py-3 text-textSecondary hover:bg-gray-100" data-tooltip="Gérer les Commandes">Commandes</a>
<a href="#" class="block px-6 py-3 text-textSecondary hover:bg-gray-100" data-tooltip="Voir les Rapports">Rapports</a>
<a href="#" class="block px-6 py-3 text-textSecondary hover:bg-gray-100" data-tooltip="Paramètres">Paramètres</a>
<a href="https://soft.babi-app.com/liste" class="block px-6 py-3 btn-primary text-white font-semibold text-center hover:bg-primary-dark-color transition-colors" data-tooltip="Voir la Liste des Formulaires">Liste des formulaires</a>
</nav>
</header>
<!-- Contenu Principal -->
<main class="container mx-auto mt-24 px-6">
<!-- Exemple de Carte -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" integrity="sha512-pO4rT+j2GRsDhi5qEj+6MqUVuY+0BKlVjhMtp+E5V36yb+1RzJz1xj9G7qPVXTqKKrE6CzKW/43u2C4X8Dk1ow==" crossorigin="anonymous" referrerpolicy="no-referrer">
<!-- QRious CDN pour générer les QR Codes -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/qrious.min.js"></script>
<!-- JsBarcode CDN pour générer les Codes-Barres -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/JsBarcode.all.min.js"></script>
<!-- Feuille de style personnalisée -->
<style>
/* ========================================================================
CARD STYLES AMÉLIORÉS
======================================================================== */
.card {
position: relative;
background-color: #ffffff; /* Fond blanc */
border-radius: 0.5rem; /* Coins arrondis */
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Ombre pour profondeur */
padding: 1.5rem; /* Padding interne */
overflow: hidden;
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.card:hover {
transform: translateY(-5px);
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
}
/* ========================================================================
QR CODE & BARCODE STYLES AMÉLIORÉS
======================================================================== */
/* QR Code Styles */
.qr-code {
width: 100px; /* Taille réduite */
height: 100px;
animation: fadeInZoom 0.8s ease-out forwards; /* Animation plus rapide */
cursor: pointer; /* Indiquer qu'il est interactif */
}
/* Barcode Styles */
.barcode {
width: 150px; /* Taille réduite */
height: 40px;
animation: fadeInSlide 0.8s ease-out forwards; /* Animation plus rapide */
cursor: pointer; /* Indiquer qu'il est interactif */
}
/* Animation pour QR Code */
@keyframes fadeInZoom {
from {
opacity: 0;
transform: scale(0.5);
}
to {
opacity: 1;
transform: scale(1);
}
}
/* Animation pour Barcode */
@keyframes fadeInSlide {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* ========================================================================
STYLES DES ICONES POUR INTERACTIVITÉ
======================================================================== */
/* Effet au survol pour QR Code */
.qr-code:hover {
transform: scale(1.1);
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}
/* Effet au survol pour Barcode */
.barcode:hover {
transform: scale(1.1);
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}
/* ========================================================================
RESPONSIVITÉ ET POSITIONNEMENT
======================================================================== */
@media (max-width: 768px) {
.qr-code {
width: 80px;
height: 80px;
}
.barcode {
width: 120px;
height: 35px;
}
.card {
padding: 1rem;
}
.card h2 {
font-size: 1.5rem;
}
.card p {
font-size: 0.875rem;
}
}
@media (min-width: 769px) {
.qr-code {
width: 120px;
height: 120px;
}
.barcode {
width: 180px;
height: 50px;
}
}
/* ========================================================================
EFFETS SUPPLÉMENTAIRES POUR PLUS DE DYNAMISME
======================================================================== */
/* Transition Douce pour les Transformations */
.qr-code, .barcode {
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
/* Effet de Rotation Léger pour Dynamisme */
.qr-code.rotate {
animation: rotateAnim 4s linear infinite;
}
@keyframes rotateAnim {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
/* ========================================================================
TOOLTIP STYLES (Optionnel)
======================================================================== */
/* Tooltip container */
.tooltip {
position: relative;
display: inline-block;
}
/* Tooltip text */
.tooltip::after {
content: attr(data-tooltip);
position: absolute;
bottom: 125%; /* Position au-dessus de l'élément */
left: 50%;
transform: translateX(-50%);
background-color: rgba(55, 65, 81, 0.9); /* Couleur gris foncé */
color: #ffffff;
padding: 0.25rem 0.5rem;
border-radius: 0.25rem;
white-space: nowrap;
opacity: 0;
pointer-events: none;
transition: opacity 0.3s ease;
font-size: 0.75rem; /* Taille petite */
z-index: 10;
}
/* Afficher le tooltip au survol */
.tooltip:hover::after {
opacity: 1;
}
</style>
<!-- Votre Carte avec les QR Codes et Codes-Barres Améliorés -->
<div class="card p-6 animate-fadeIn bg-cardBg shadow-card rounded-lg relative overflow-hidden">
<!-- QR Code avec Tooltip -->
<div class="tooltip">
<canvas id="qr-code" class="qr-code" height="100" width="100"></canvas>
<span class="tooltiptext">Scanner le QR Code</span>
</div>
<!-- Code-Barres avec Tooltip -->
<div class="tooltip">
<canvas id="barcode" class="barcode" width="162" height="53"></canvas>
<span class="tooltiptext">Scanner le Code-Barres</span>
</div>
<h2 class="text-2xl font-bold text-primary mb-4">Bienvenue sur QSP Gestion</h2>
<p class="text-textSecondary">Gérez vos produits, fournisseurs, commandes et plus encore avec efficacité.</p>
</div>
<!-- Scripts JavaScript pour Générer les Codes -->
<script>
// Générer le QR Code
const qr = new QRious({
element: document.getElementById('qr-code'),
value: 'https://example.com', // Remplacez par l'URL ou le texte souhaité
size: 100, // Taille réduite en pixels
background: 'white',
foreground: 'black', // Couleur noire
level: 'H' // Niveau de correction d'erreur
});
// Générer le Code-Barres
JsBarcode("#barcode", "123456789012", {
format: "EAN13", // Format du code-barres (peut être changé selon vos besoins)
lineColor: "#000000", // Couleur noire
width: 1.5, // Largeur des lignes réduite
height: 40, // Hauteur réduite du code-barres
displayValue: true, // Afficher la valeur en dessous
fontSize: 12, // Taille de la police réduite
textMargin: 1, // Marge autour du texte réduite
margin: 0 // Marge extérieure
});
// Optionnel : Ajouter un effet de rotation au QR Code après le chargement
window.addEventListener('load', () => {
const qrCodeElement = document.getElementById('qr-code');
qrCodeElement.addEventListener('mouseover', () => {
qrCodeElement.classList.add('rotate');
});
qrCodeElement.addEventListener('mouseout', () => {
qrCodeElement.classList.remove('rotate');
});
});
</script>
<!-- Contenu Principal -->
<!-- Section Import/Export -->
<!-- Contenu des pages -->
<div class="card p-6 animate-fadeIn">
<!-- Reste de votre contenu principal -->
</div>
<h2 class="text-2xl font-bold text-primary mb-6 text-center" x-text="isEdit ? 'Modifier le produit' : 'Ajouter un produit'"></h2>
<!-- Font Awesome -->
<!-- Alpine.js -->
<!-- Font Awesome for icons -->
<!-- Tailwind CSS -->
<!-- Formulaire Produit : Première Partie -->
<form id="product-form" enctype="multipart/form-data" method="POST" action="https://soft.babi-app.com/products">
<input type="hidden" name="_token" value="0NNzsxnGE7beJBGvkItN6Dh4W438ipkYrbGtsG5D" autocomplete="off"> <!-- Affichage des erreurs de validation -->
<div class="max-w-7xl mx-auto p-6 bg-cardBg rounded-lg shadow-card">
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
<!-- Magasin -->
<div>
<label for="associated_store" class="block text-sm font-medium text-textPrimary">
Magasin associé <span class="text-danger">*</span>
</label>
<div class="mt-1 relative">
<select id="associated_store" name="associated_store" class="block w-full pl-10 pr-3 py-2 border border-gray-300 bg-white rounded-md focus:outline-none focus:ring-primary focus:border-primary transition-colors sm:text-sm" required="" aria-required="true" aria-label="Magasin associé">
<option value="">Sélectionner un magasin</option>
<!-- Correction ici -->
<option value="1">qsp soumaa</option> <!-- Utilisation correcte des champs -->
</select>
<div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
<i class="fas fa-warehouse text-gray-400"></i>
</div>
</div>
<p class="mt-2 text-sm text-gray-500">Sélectionne le magasin associé au produit.</p>
</div>
<!-- Désignation du produit -->
<!-- Désignation du produit -->
<div class="relative">
<label for="designation" class="block text-sm font-medium text-textPrimary">
Désignation du produit <span class="text-danger">*</span>
</label>
<div class="mt-1 relative">
<input type="text" id="designation" name="designation_name" class="block w-full pl-10 pr-3 py-2 border border-gray-300 bg-white rounded-md focus:outline-none focus:ring-primary focus:border-primary transition-colors sm:text-sm" required="" aria-required="true" aria-label="Désignation du produit" placeholder="Commencez à taper une désignation" autocomplete="off" oninput="filterDesignations()">
<input type="hidden" name="designation_id" id="designation_id_hidden">
<div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
<i class="fas fa-cube text-gray-400"></i>
</div>
<!-- Liste des suggestions dynamiques -->
<ul id="designation-suggestions" class="absolute w-full bg-white border border-gray-300 hidden max-h-48 overflow-y-auto z-10"></ul>
</div>
<p class="mt-2 text-sm text-gray-500">Sélectionnez la désignation du produit.</p>
</div>
<!-- Script JavaScript -->
<!-- Catégorie du produit -->
<div>
<label for="category" class="block text-sm font-medium text-textPrimary">Catégorie <span class="text-danger">*</span></label>
<div class="mt-1 relative">
<select id="category" name="category_id" class="block w-full pl-10 pr-3 py-2 border border-gray-300 bg-white rounded-md focus:outline-none focus:ring-primary focus:border-primary transition-colors sm:text-sm" required="" aria-required="true" aria-label="Catégorie">
<option value="">Sélectionner une catégorie</option>
<option value="1">AILE</option>
<option value="2">ALTERNATEUR</option>
<option value="3">AMORTISSEUR</option>
<option value="4">ANTIBROUILLARD</option>
<option value="5">ARALDITE</option>
<option value="6">ARBRE</option>
<option value="7">ARMATURE</option>
<option value="8">ANTI</option>
<option value="9">ANTIVOL</option>
<option value="10">ATTACHE</option>
<option value="11">AXE</option>
<option value="12">BAGUE</option>
<option value="13">BAGUETTE</option>
<option value="14">BALAI</option>
<option value="15">BALESTRA</option>
<option value="16">BALLAI</option>
<option value="17">BARILE</option>
<option value="18">BARRE</option>
<option value="19">BARRILET</option>
<option value="20">BATTRE</option>
<option value="21">BATTRIER</option>
<option value="22">BENDIX</option>
<option value="23">BERCEAU</option>
<option value="24">BERSEAU</option>
<option value="26">BIELLE</option>
<option value="49">BOBINE</option>
<option value="50">BOULON</option>
<option value="51">BOUCHON</option>
<option value="52">BOUTON</option>
<option value="53">BRAS</option>
<option value="54">BUTEE</option>
<option value="55">CALANDRE</option>
<option value="56">CALLE</option>
<option value="57">CABLE</option>
<option value="58">CLOCHE</option>
<option value="59">COUPELLE</option>
<option value="60">CONSOLE</option>
<option value="61">COURROIE</option>
<option value="62">COVETTE</option>
<option value="63">CROCHET</option>
<option value="64">CROISILLON</option>
<option value="65">CRIC</option>
<option value="66">CUSSINET</option>
<option value="67">FILTRATION</option>
<option value="68">VIDANGE</option>
</select>
<div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
<i class="fas fa-tag text-gray-400"></i>
</div>
</div>
<p class="mt-2 text-sm text-gray-500">Sélectionnez la catégorie du produit.</p>
</div>
<!-- Sous-Catégorie du produit -->
<div>
<label for="sub_category" class="block text-sm font-medium text-textPrimary">Sous-Catégorie <span class="text-danger">*</span></label>
<div class="mt-1 relative">
<select id="sub_category" name="sub_category_id" class="block w-full pl-10 pr-3 py-2 border border-gray-300 bg-white rounded-md focus:outline-none focus:ring-primary focus:border-primary transition-colors sm:text-sm" required="" aria-required="true" aria-label="Sous-Catégorie">
<option value="">Sélectionner une sous-catégorie</option>
<option value="1">test</option>
<option value="2">AILE AVANT</option>
<option value="184">abdo</option>
<option value="185">piston</option>
<option value="186">FILTRE CARBURANT</option>
<option value="187">FILTRE HABITACLE</option>
<option value="188">VIDANGE MOTEUR</option>
</select>
<div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
<i class="fas fa-tags text-gray-400"></i>
</div>
</div>
<p class="mt-2 text-sm text-gray-500">Sélectionnez la sous-catégorie du produit.</p>
</div>
<!-- Position -->
<div>
<label for="position" class="block text-sm font-medium text-textPrimary">Position de la pièce <span class="text-danger">*</span></label>
<div class="mt-1 relative">
<select id="position" name="position" class="block w-full pl-10 pr-3 py-2 border border-gray-300 bg-white rounded-md focus:outline-none focus:ring-primary focus:border-primary transition-colors sm:text-sm" required="" aria-required="true" aria-label="Position de la pièce">
<option value="">Sélectionner une position</option>
<option value="Avant droit">Avant droit</option>
<option value="Avant gauche">Avant gauche</option>
<option value="Arrière droit">Arrière droit</option>
<option value="Arrière gauche">Arrière gauche</option>
<!-- Ajoutez d'autres options si nécessaire -->
</select>
<div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
<i class="fas fa-compass text-gray-400"></i>
</div>
</div>
<p class="mt-2 text-sm text-gray-500">Sélectionnez la position de la pièce.</p>
</div>
</div>
<!-- Inclusion des Données JSON et du Script JavaScript -->
<script>
document.addEventListener('DOMContentLoaded', function () {
// Données injectées depuis Laravel
const designationData = [{"id":25,"name":"test","sub_category_id":2,"category_id":1},{"id":27,"name":"faycal","sub_category_id":184,"category_id":1},{"id":28,"name":"segment","sub_category_id":185,"category_id":11},{"id":29,"name":"FILTRE A GASOIL","sub_category_id":186,"category_id":67},{"id":30,"name":"FILTRE HABITACLE","sub_category_id":187,"category_id":67}];
const categories = [{"id":1,"name":"AILE","created_at":"2024-10-03T02:08:01.000000Z","updated_at":"2024-10-03T02:11:35.000000Z","sub_categories":[{"id":2,"name":"AILE AVANT","category_id":1,"created_at":"2024-10-03T11:41:47.000000Z","updated_at":"2024-10-03T12:43:03.000000Z"},{"id":184,"name":"abdo","category_id":1,"created_at":"2024-10-08T20:43:58.000000Z","updated_at":"2024-10-08T20:43:58.000000Z"}]},{"id":2,"name":"ALTERNATEUR","created_at":"2024-10-03T02:08:01.000000Z","updated_at":"2024-10-03T02:11:35.000000Z","sub_categories":[{"id":1,"name":"test","category_id":2,"created_at":"2024-10-03T10:53:58.000000Z","updated_at":"2024-10-03T12:42:50.000000Z"}]},{"id":3,"name":"AMORTISSEUR","created_at":"2024-10-03T02:08:01.000000Z","updated_at":"2024-10-03T02:11:35.000000Z","sub_categories":[]},{"id":4,"name":"ANTIBROUILLARD","created_at":"2024-10-03T02:08:01.000000Z","updated_at":"2024-10-03T02:11:35.000000Z","sub_categories":[]},{"id":5,"name":"ARALDITE","created_at":"2024-10-03T02:08:01.000000Z","updated_at":"2024-10-03T02:11:35.000000Z","sub_categories":[]},{"id":6,"name":"ARBRE","created_at":"2024-10-03T02:08:01.000000Z","updated_at":"2024-10-03T02:11:35.000000Z","sub_categories":[]},{"id":7,"name":"ARMATURE","created_at":"2024-10-03T02:08:01.000000Z","updated_at":"2024-10-03T02:11:35.000000Z","sub_categories":[]},{"id":8,"name":"ANTI","created_at":"2024-10-03T02:08:01.000000Z","updated_at":"2024-10-03T02:11:35.000000Z","sub_categories":[]},{"id":9,"name":"ANTIVOL","created_at":"2024-10-03T02:08:01.000000Z","updated_at":"2024-10-03T02:11:35.000000Z","sub_categories":[]},{"id":10,"name":"ATTACHE","created_at":"2024-10-03T02:08:01.000000Z","updated_at":"2024-10-03T02:11:35.000000Z","sub_categories":[]},{"id":11,"name":"AXE","created_at":"2024-10-03T02:08:01.000000Z","updated_at":"2024-10-03T02:11:35.000000Z","sub_categories":[{"id":185,"name":"piston","category_id":11,"created_at":"2024-10-10T17:11:24.000000Z","updated_at":"2024-10-10T17:11:24.000000Z"}]},{"id":12,"name":"BAGUE","created_at":"2024-10-03T02:08:01.000000Z","updated_at":"2024-10-03T02:11:35.000000Z","sub_categories":[]},{"id":13,"name":"BAGUETTE","created_at":"2024-10-03T02:08:01.000000Z","updated_at":"2024-10-03T02:11:35.000000Z","sub_categories":[]},{"id":14,"name":"BALAI","created_at":"2024-10-03T02:08:01.000000Z","updated_at":"2024-10-03T02:11:35.000000Z","sub_categories":[]},{"id":15,"name":"BALESTRA","created_at":"2024-10-03T02:08:01.000000Z","updated_at":"2024-10-03T02:11:35.000000Z","sub_categories":[]},{"id":16,"name":"BALLAI","created_at":"2024-10-03T02:08:01.000000Z","updated_at":"2024-10-03T02:11:35.000000Z","sub_categories":[]},{"id":17,"name":"BARILE","created_at":"2024-10-03T02:08:01.000000Z","updated_at":"2024-10-03T02:11:35.000000Z","sub_categories":[]},{"id":18,"name":"BARRE","created_at":"2024-10-03T02:08:01.000000Z","updated_at":"2024-10-03T02:11:35.000000Z","sub_categories":[]},{"id":19,"name":"BARRILET","created_at":"2024-10-03T02:08:01.000000Z","updated_at":"2024-10-03T02:11:35.000000Z","sub_categories":[]},{"id":20,"name":"BATTRE","created_at":"2024-10-03T02:08:01.000000Z","updated_at":"2024-10-03T02:11:35.000000Z","sub_categories":[]},{"id":21,"name":"BATTRIER","created_at":"2024-10-03T02:08:01.000000Z","updated_at":"2024-10-03T02:11:35.000000Z","sub_categories":[]},{"id":22,"name":"BENDIX","created_at":"2024-10-03T02:08:01.000000Z","updated_at":"2024-10-03T02:11:35.000000Z","sub_categories":[]},{"id":23,"name":"BERCEAU","created_at":"2024-10-03T02:08:01.000000Z","updated_at":"2024-10-03T02:11:35.000000Z","sub_categories":[]},{"id":24,"name":"BERSEAU","created_at":"2024-10-03T02:08:01.000000Z","updated_at":"2024-10-03T02:11:35.000000Z","sub_categories":[]},{"id":26,"name":"BIELLE","created_at":"2024-10-03T02:08:01.000000Z","updated_at":"2024-10-03T02:11:35.000000Z","sub_categories":[]},{"id":49,"name":"BOBINE","created_at":"2024-10-03T02:08:01.000000Z","updated_at":"2024-10-03T02:08:01.000000Z","sub_categories":[]},{"id":50,"name":"BOULON","created_at":"2024-10-03T02:08:01.000000Z","updated_at":"2024-10-03T02:08:01.000000Z","sub_categories":[]},{"id":51,"name":"BOUCHON","created_at":"2024-10-03T02:08:01.000000Z","updated_at":"2024-10-03T02:08:01.000000Z","sub_categories":[]},{"id":52,"name":"BOUTON","created_at":"2024-10-03T02:08:01.000000Z","updated_at":"2024-10-03T02:08:01.000000Z","sub_categories":[]},{"id":53,"name":"BRAS","created_at":"2024-10-03T02:08:01.000000Z","updated_at":"2024-10-03T02:08:01.000000Z","sub_categories":[]},{"id":54,"name":"BUTEE","created_at":"2024-10-03T02:08:01.000000Z","updated_at":"2024-10-03T02:08:01.000000Z","sub_categories":[]},{"id":55,"name":"CALANDRE","created_at":"2024-10-03T02:08:01.000000Z","updated_at":"2024-10-03T02:08:01.000000Z","sub_categories":[]},{"id":56,"name":"CALLE","created_at":"2024-10-03T02:08:01.000000Z","updated_at":"2024-10-03T02:08:01.000000Z","sub_categories":[]},{"id":57,"name":"CABLE","created_at":"2024-10-03T02:08:01.000000Z","updated_at":"2024-10-03T02:08:01.000000Z","sub_categories":[]},{"id":58,"name":"CLOCHE","created_at":"2024-10-03T02:08:01.000000Z","updated_at":"2024-10-03T02:08:01.000000Z","sub_categories":[]},{"id":59,"name":"COUPELLE","created_at":"2024-10-03T02:08:01.000000Z","updated_at":"2024-10-03T02:08:01.000000Z","sub_categories":[]},{"id":60,"name":"CONSOLE","created_at":"2024-10-03T02:08:01.000000Z","updated_at":"2024-10-03T02:08:01.000000Z","sub_categories":[]},{"id":61,"name":"COURROIE","created_at":"2024-10-03T02:08:01.000000Z","updated_at":"2024-10-03T02:08:01.000000Z","sub_categories":[]},{"id":62,"name":"COVETTE","created_at":"2024-10-03T02:08:01.000000Z","updated_at":"2024-10-03T02:08:01.000000Z","sub_categories":[]},{"id":63,"name":"CROCHET","created_at":"2024-10-03T02:08:01.000000Z","updated_at":"2024-10-03T02:08:01.000000Z","sub_categories":[]},{"id":64,"name":"CROISILLON","created_at":"2024-10-03T02:08:01.000000Z","updated_at":"2024-10-03T02:08:01.000000Z","sub_categories":[]},{"id":65,"name":"CRIC","created_at":"2024-10-03T02:08:01.000000Z","updated_at":"2024-10-03T02:08:01.000000Z","sub_categories":[]},{"id":66,"name":"CUSSINET","created_at":"2024-10-03T02:08:01.000000Z","updated_at":"2024-10-03T02:08:01.000000Z","sub_categories":[]},{"id":67,"name":"FILTRATION","created_at":"2024-10-10T17:18:59.000000Z","updated_at":"2024-10-10T17:18:59.000000Z","sub_categories":[{"id":186,"name":"FILTRE CARBURANT","category_id":67,"created_at":"2024-10-10T17:19:41.000000Z","updated_at":"2024-10-10T17:19:41.000000Z"},{"id":187,"name":"FILTRE HABITACLE","category_id":67,"created_at":"2024-10-10T17:21:01.000000Z","updated_at":"2024-10-10T17:21:01.000000Z"}]},{"id":68,"name":"VIDANGE","created_at":"2024-10-10T17:22:19.000000Z","updated_at":"2024-10-10T17:22:19.000000Z","sub_categories":[{"id":188,"name":"VIDANGE MOTEUR","category_id":68,"created_at":"2024-10-10T17:22:42.000000Z","updated_at":"2024-10-10T17:22:42.000000Z"}]}];
const subCategories = [{"id":1,"name":"test","category_id":2,"created_at":"2024-10-03T10:53:58.000000Z","updated_at":"2024-10-03T12:42:50.000000Z"},{"id":2,"name":"AILE AVANT","category_id":1,"created_at":"2024-10-03T11:41:47.000000Z","updated_at":"2024-10-03T12:43:03.000000Z"},{"id":184,"name":"abdo","category_id":1,"created_at":"2024-10-08T20:43:58.000000Z","updated_at":"2024-10-08T20:43:58.000000Z"},{"id":185,"name":"piston","category_id":11,"created_at":"2024-10-10T17:11:24.000000Z","updated_at":"2024-10-10T17:11:24.000000Z"},{"id":186,"name":"FILTRE CARBURANT","category_id":67,"created_at":"2024-10-10T17:19:41.000000Z","updated_at":"2024-10-10T17:19:41.000000Z"},{"id":187,"name":"FILTRE HABITACLE","category_id":67,"created_at":"2024-10-10T17:21:01.000000Z","updated_at":"2024-10-10T17:21:01.000000Z"},{"id":188,"name":"VIDANGE MOTEUR","category_id":68,"created_at":"2024-10-10T17:22:42.000000Z","updated_at":"2024-10-10T17:22:42.000000Z"}];
const designationSelect = document.getElementById('designation');
const categorySelect = document.getElementById('category');
const subCategorySelect = document.getElementById('sub_category');
designationSelect.addEventListener('change', function () {
const selectedDesignationId = this.value;
if (selectedDesignationId) {
// Trouver la désignation sélectionnée
const selectedDesignation = designationData.find(designation => designation.id == selectedDesignationId);
if (selectedDesignation) {
// Mettre à jour la catégorie
categorySelect.value = selectedDesignation.category_id;
// Filtrer les sous-catégories en fonction de la catégorie
const filteredSubCategories = subCategories.filter(sub => sub.category_id == selectedDesignation.category_id);
// Mettre à jour la liste des sous-catégories
subCategorySelect.innerHTML = '<option value="">Sélectionner une sous-catégorie</option>';
filteredSubCategories.forEach(sub => {
const option = document.createElement('option');
option.value = sub.id;
option.text = sub.name;
subCategorySelect.appendChild(option);
});
// Sélectionner la sous-catégorie de la désignation
subCategorySelect.value = selectedDesignation.sub_category_id;
}
} else {
// Réinitialiser les listes déroulantes si aucune désignation n'est sélectionnée
categorySelect.value = '';
subCategorySelect.innerHTML = '<option value="">Sélectionner une sous-catégorie</option>';
}
});
});
</script>
<script>
document.addEventListener('DOMContentLoaded', function () {
// Données injectées depuis Laravel
const designationData = [{"id":25,"name":"test","sub_category_id":2,"category_id":1},{"id":27,"name":"faycal","sub_category_id":184,"category_id":1},{"id":28,"name":"segment","sub_category_id":185,"category_id":11},{"id":29,"name":"FILTRE A GASOIL","sub_category_id":186,"category_id":67},{"id":30,"name":"FILTRE HABITACLE","sub_category_id":187,"category_id":67}];
const categories = [{"id":1,"name":"AILE","created_at":"2024-10-03T02:08:01.000000Z","updated_at":"2024-10-03T02:11:35.000000Z","sub_categories":[{"id":2,"name":"AILE AVANT","category_id":1,"created_at":"2024-10-03T11:41:47.000000Z","updated_at":"2024-10-03T12:43:03.000000Z"},{"id":184,"name":"abdo","category_id":1,"created_at":"2024-10-08T20:43:58.000000Z","updated_at":"2024-10-08T20:43:58.000000Z"}]},{"id":2,"name":"ALTERNATEUR","created_at":"2024-10-03T02:08:01.000000Z","updated_at":"2024-10-03T02:11:35.000000Z","sub_categories":[{"id":1,"name":"test","category_id":2,"created_at":"2024-10-03T10:53:58.000000Z","updated_at":"2024-10-03T12:42:50.000000Z"}]},{"id":3,"name":"AMORTISSEUR","created_at":"2024-10-03T02:08:01.000000Z","updated_at":"2024-10-03T02:11:35.000000Z","sub_categories":[]},{"id":4,"name":"ANTIBROUILLARD","created_at":"2024-10-03T02:08:01.000000Z","updated_at":"2024-10-03T02:11:35.000000Z","sub_categories":[]},{"id":5,"name":"ARALDITE","created_at":"2024-10-03T02:08:01.000000Z","updated_at":"2024-10-03T02:11:35.000000Z","sub_categories":[]},{"id":6,"name":"ARBRE","created_at":"2024-10-03T02:08:01.000000Z","updated_at":"2024-10-03T02:11:35.000000Z","sub_categories":[]},{"id":7,"name":"ARMATURE","created_at":"2024-10-03T02:08:01.000000Z","updated_at":"2024-10-03T02:11:35.000000Z","sub_categories":[]},{"id":8,"name":"ANTI","created_at":"2024-10-03T02:08:01.000000Z","updated_at":"2024-10-03T02:11:35.000000Z","sub_categories":[]},{"id":9,"name":"ANTIVOL","created_at":"2024-10-03T02:08:01.000000Z","updated_at":"2024-10-03T02:11:35.000000Z","sub_categories":[]},{"id":10,"name":"ATTACHE","created_at":"2024-10-03T02:08:01.000000Z","updated_at":"2024-10-03T02:11:35.000000Z","sub_categories":[]},{"id":11,"name":"AXE","created_at":"2024-10-03T02:08:01.000000Z","updated_at":"2024-10-03T02:11:35.000000Z","sub_categories":[{"id":185,"name":"piston","category_id":11,"created_at":"2024-10-10T17:11:24.000000Z","updated_at":"2024-10-10T17:11:24.000000Z"}]},{"id":12,"name":"BAGUE","created_at":"2024-10-03T02:08:01.000000Z","updated_at":"2024-10-03T02:11:35.000000Z","sub_categories":[]},{"id":13,"name":"BAGUETTE","created_at":"2024-10-03T02:08:01.000000Z","updated_at":"2024-10-03T02:11:35.000000Z","sub_categories":[]},{"id":14,"name":"BALAI","created_at":"2024-10-03T02:08:01.000000Z","updated_at":"2024-10-03T02:11:35.000000Z","sub_categories":[]},{"id":15,"name":"BALESTRA","created_at":"2024-10-03T02:08:01.000000Z","updated_at":"2024-10-03T02:11:35.000000Z","sub_categories":[]},{"id":16,"name":"BALLAI","created_at":"2024-10-03T02:08:01.000000Z","updated_at":"2024-10-03T02:11:35.000000Z","sub_categories":[]},{"id":17,"name":"BARILE","created_at":"2024-10-03T02:08:01.000000Z","updated_at":"2024-10-03T02:11:35.000000Z","sub_categories":[]},{"id":18,"name":"BARRE","created_at":"2024-10-03T02:08:01.000000Z","updated_at":"2024-10-03T02:11:35.000000Z","sub_categories":[]},{"id":19,"name":"BARRILET","created_at":"2024-10-03T02:08:01.000000Z","updated_at":"2024-10-03T02:11:35.000000Z","sub_categories":[]},{"id":20,"name":"BATTRE","created_at":"2024-10-03T02:08:01.000000Z","updated_at":"2024-10-03T02:11:35.000000Z","sub_categories":[]},{"id":21,"name":"BATTRIER","created_at":"2024-10-03T02:08:01.000000Z","updated_at":"2024-10-03T02:11:35.000000Z","sub_categories":[]},{"id":22,"name":"BENDIX","created_at":"2024-10-03T02:08:01.000000Z","updated_at":"2024-10-03T02:11:35.000000Z","sub_categories":[]},{"id":23,"name":"BERCEAU","created_at":"2024-10-03T02:08:01.000000Z","updated_at":"2024-10-03T02:11:35.000000Z","sub_categories":[]},{"id":24,"name":"BERSEAU","created_at":"2024-10-03T02:08:01.000000Z","updated_at":"2024-10-03T02:11:35.000000Z","sub_categories":[]},{"id":26,"name":"BIELLE","created_at":"2024-10-03T02:08:01.000000Z","updated_at":"2024-10-03T02:11:35.000000Z","sub_categories":[]},{"id":49,"name":"BOBINE","created_at":"2024-10-03T02:08:01.000000Z","updated_at":"2024-10-03T02:08:01.000000Z","sub_categories":[]},{"id":50,"name":"BOULON","created_at":"2024-10-03T02:08:01.000000Z","updated_at":"2024-10-03T02:08:01.000000Z","sub_categories":[]},{"id":51,"name":"BOUCHON","created_at":"2024-10-03T02:08:01.000000Z","updated_at":"2024-10-03T02:08:01.000000Z","sub_categories":[]},{"id":52,"name":"BOUTON","created_at":"2024-10-03T02:08:01.000000Z","updated_at":"2024-10-03T02:08:01.000000Z","sub_categories":[]},{"id":53,"name":"BRAS","created_at":"2024-10-03T02:08:01.000000Z","updated_at":"2024-10-03T02:08:01.000000Z","sub_categories":[]},{"id":54,"name":"BUTEE","created_at":"2024-10-03T02:08:01.000000Z","updated_at":"2024-10-03T02:08:01.000000Z","sub_categories":[]},{"id":55,"name":"CALANDRE","created_at":"2024-10-03T02:08:01.000000Z","updated_at":"2024-10-03T02:08:01.000000Z","sub_categories":[]},{"id":56,"name":"CALLE","created_at":"2024-10-03T02:08:01.000000Z","updated_at":"2024-10-03T02:08:01.000000Z","sub_categories":[]},{"id":57,"name":"CABLE","created_at":"2024-10-03T02:08:01.000000Z","updated_at":"2024-10-03T02:08:01.000000Z","sub_categories":[]},{"id":58,"name":"CLOCHE","created_at":"2024-10-03T02:08:01.000000Z","updated_at":"2024-10-03T02:08:01.000000Z","sub_categories":[]},{"id":59,"name":"COUPELLE","created_at":"2024-10-03T02:08:01.000000Z","updated_at":"2024-10-03T02:08:01.000000Z","sub_categories":[]},{"id":60,"name":"CONSOLE","created_at":"2024-10-03T02:08:01.000000Z","updated_at":"2024-10-03T02:08:01.000000Z","sub_categories":[]},{"id":61,"name":"COURROIE","created_at":"2024-10-03T02:08:01.000000Z","updated_at":"2024-10-03T02:08:01.000000Z","sub_categories":[]},{"id":62,"name":"COVETTE","created_at":"2024-10-03T02:08:01.000000Z","updated_at":"2024-10-03T02:08:01.000000Z","sub_categories":[]},{"id":63,"name":"CROCHET","created_at":"2024-10-03T02:08:01.000000Z","updated_at":"2024-10-03T02:08:01.000000Z","sub_categories":[]},{"id":64,"name":"CROISILLON","created_at":"2024-10-03T02:08:01.000000Z","updated_at":"2024-10-03T02:08:01.000000Z","sub_categories":[]},{"id":65,"name":"CRIC","created_at":"2024-10-03T02:08:01.000000Z","updated_at":"2024-10-03T02:08:01.000000Z","sub_categories":[]},{"id":66,"name":"CUSSINET","created_at":"2024-10-03T02:08:01.000000Z","updated_at":"2024-10-03T02:08:01.000000Z","sub_categories":[]},{"id":67,"name":"FILTRATION","created_at":"2024-10-10T17:18:59.000000Z","updated_at":"2024-10-10T17:18:59.000000Z","sub_categories":[{"id":186,"name":"FILTRE CARBURANT","category_id":67,"created_at":"2024-10-10T17:19:41.000000Z","updated_at":"2024-10-10T17:19:41.000000Z"},{"id":187,"name":"FILTRE HABITACLE","category_id":67,"created_at":"2024-10-10T17:21:01.000000Z","updated_at":"2024-10-10T17:21:01.000000Z"}]},{"id":68,"name":"VIDANGE","created_at":"2024-10-10T17:22:19.000000Z","updated_at":"2024-10-10T17:22:19.000000Z","sub_categories":[{"id":188,"name":"VIDANGE MOTEUR","category_id":68,"created_at":"2024-10-10T17:22:42.000000Z","updated_at":"2024-10-10T17:22:42.000000Z"}]}];
const subCategories = [{"id":1,"name":"test","category_id":2,"created_at":"2024-10-03T10:53:58.000000Z","updated_at":"2024-10-03T12:42:50.000000Z"},{"id":2,"name":"AILE AVANT","category_id":1,"created_at":"2024-10-03T11:41:47.000000Z","updated_at":"2024-10-03T12:43:03.000000Z"},{"id":184,"name":"abdo","category_id":1,"created_at":"2024-10-08T20:43:58.000000Z","updated_at":"2024-10-08T20:43:58.000000Z"},{"id":185,"name":"piston","category_id":11,"created_at":"2024-10-10T17:11:24.000000Z","updated_at":"2024-10-10T17:11:24.000000Z"},{"id":186,"name":"FILTRE CARBURANT","category_id":67,"created_at":"2024-10-10T17:19:41.000000Z","updated_at":"2024-10-10T17:19:41.000000Z"},{"id":187,"name":"FILTRE HABITACLE","category_id":67,"created_at":"2024-10-10T17:21:01.000000Z","updated_at":"2024-10-10T17:21:01.000000Z"},{"id":188,"name":"VIDANGE MOTEUR","category_id":68,"created_at":"2024-10-10T17:22:42.000000Z","updated_at":"2024-10-10T17:22:42.000000Z"}];
const designationInput = document.getElementById('designation');
const suggestionsList = document.getElementById('designation-suggestions');
const hiddenInput = document.getElementById('designation_id_hidden');
const categorySelect = document.getElementById('category');
const subCategorySelect = document.getElementById('sub_category');
function filterDesignations() {
const input = designationInput.value.toLowerCase();
// Filtrer les désignations en fonction de la saisie utilisateur
const suggestions = designationData.filter(designation => designation.name.toLowerCase().includes(input));
// Vider la liste des suggestions précédentes
suggestionsList.innerHTML = '';
if (input.length > 0) {
suggestionsList.classList.remove('hidden');
// Ajouter les nouvelles suggestions à la liste
suggestions.forEach(designation => {
const li = document.createElement('li');
li.textContent = designation.name;
li.classList.add('cursor-pointer', 'p-2', 'hover:bg-gray-200');
li.onclick = () => selectDesignation(designation);
suggestionsList.appendChild(li);
});
} else {
suggestionsList.classList.add('hidden');
}
}
function selectDesignation(designation) {
designationInput.value = designation.name;
hiddenInput.value = designation.id;
// Mettre à jour la catégorie et la sous-catégorie en fonction de la désignation sélectionnée
categorySelect.value = designation.category_id;
const filteredSubCategories = subCategories.filter(sub => sub.category_id == designation.category_id);
subCategorySelect.innerHTML = '<option value="">Sélectionner une sous-catégorie</option>';
filteredSubCategories.forEach(sub => {
const option = document.createElement('option');
option.value = sub.id;
option.text = sub.name;
subCategorySelect.appendChild(option);
});
subCategorySelect.value = designation.sub_category_id;
// Masquer la liste des suggestions après la sélection
suggestionsList.classList.add('hidden');
}
designationInput.addEventListener('input', filterDesignations);
});
</script>
<!-- Sous-Catégorie du produit -->
<!-- Deuxième Partie du Formulaire : Références de Produits -->
<!-- Deuxième Partie du Formulaire : Références de Produits -->
<div class="max-w-7xl mx-auto p-6 bg-white shadow-md rounded-lg mt-8" x-data="productReferences()" x-init="init()">
<h2 class="text-2xl font-semibold mb-4 text-gray-800">Références de Produits</h2>
<template x-for="(reference, index) in references" :key="reference.id">
<div class="border border-gray-300 p-6 rounded-lg mb-6 relative">
<!-- Bouton Supprimer la Référence -->
<button type="button" @click="removeReference(index)" class="absolute top-4 right-4 text-red-500 hover:text-red-700">
<i class="fas fa-times-circle fa-2x"></i>
</button>
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
<!-- Référence du Produit -->
<div x-data="referenceSelector()">
<!-- Champ Référence de Produit -->
<div>
<label for="product_reference" class="block text-sm font-medium text-gray-700">
Référence de Produit <span class="text-red-500">*</span>
</label>
<div class="mt-1 relative">
<input type="text" :id="'product_reference_' + index" :name="'product_references[' + index + '][product_reference]'" placeholder="Sélectionnez une référence" x-model="search" @focus="open = true" @click.away="open = false" class="block w-full pl-10 pr-3 py-2 border border-gray-300 rounded-md focus:ring-primary focus:border-primary">
<div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
<i class="fas fa-box-open text-gray-400"></i>
</div>
<!-- Dropdown des suggestions -->
<div x-show="open" x-transition="" class="absolute mt-1 w-full bg-white shadow-lg max-h-60 rounded-md py-1 text-base ring-1 ring-black ring-opacity-5 overflow-auto z-10">
<template x-for="(reference, index) in filteredReferences" :key="index">
<div @click="selectReference(reference)" class="cursor-pointer flex items-center px-4 py-2 hover:bg-gray-100">
<i class="fas fa-box-open mr-3 text-gray-400"></i>
<span x-text="reference"></span>
</div>
</template>
<div x-show="filteredReferences.length === 0" class="px-4 py-2 text-gray-500">
Aucune référence trouvée.
</div>
</div>
</div>
</div>
</div>
<!-- Script Alpine.js pour le Sélecteur de Référence de Produit -->
<script>
function referenceSelector() {
return {
search: '',
open: false,
// Convertir la collection Laravel en un tableau JavaScript
references: ["test",null],
get filteredReferences() {
if (this.search.trim() === '') {
return this.references;
}
return this.references.filter(reference =>
reference.toLowerCase().includes(this.search.toLowerCase())
);
},
selectReference(reference) {
this.search = reference;
this.open = false;
}
}
}
</script>
<!-- Marque du Produit -->
<!-- Sélecteur de Marque de Véhicule -->
<!-- Autres Champs du Formulaire -->
<!-- Bouton de Soumission -->
<!-- Script Alpine.js pour le Champ de Marque de Véhicule -->
<!-- Alpine.js -->
<!-- Champ de Sélection de Marque de Véhicule -->
<!-- resources/views/products.blade.php -->
<div x-data="vehicleBrandSelector([{"id":1,"name":"Alpine","logo":"https:\/\/www.cars-data.com\/design\/images\/cars-logo\/alpine-logo-small.jpg"},{"id":2,"name":"Toyota","logo":"https:\/\/www.cars-data.com\/design\/images\/cars-logo\/toyota-logo-small.jpg"},{"id":3,"name":"Volkswagen","logo":"https:\/\/www.cars-data.com\/design\/images\/cars-logo\/volkswagen-logo-small.jpg"},{"id":4,"name":"Ford","logo":"https:\/\/www.cars-data.com\/design\/images\/cars-logo\/ford-logo-small.jpg"},{"id":5,"name":"Honda","logo":"https:\/\/www.cars-data.com\/design\/images\/cars-logo\/honda-logo-small.jpg"},{"id":6,"name":"Chevrolet","logo":"https:\/\/www.cars-data.com\/design\/images\/cars-logo\/chevrolet-logo-small.jpg"},{"id":7,"name":"Mercedes-Benz","logo":"https:\/\/www.cars-data.com\/design\/images\/cars-logo\/mercedes-benz-logo-small.jpg"},{"id":8,"name":"BMW","logo":"https:\/\/www.cars-data.com\/design\/images\/cars-logo\/bmw-logo-small.jpg"},{"id":9,"name":"Audi","logo":"https:\/\/www.cars-data.com\/design\/images\/cars-logo\/audi-logo-small.jpg"},{"id":10,"name":"Nissan","logo":"https:\/\/www.cars-data.com\/design\/images\/cars-logo\/nissan-logo-small.jpg"},{"id":11,"name":"Hyundai","logo":"https:\/\/www.cars-data.com\/design\/images\/cars-logo\/hyundai-logo-small.jpg"},{"id":12,"name":"Kia","logo":"https:\/\/www.cars-data.com\/design\/images\/cars-logo\/kia-logo-small.jpg"},{"id":13,"name":"Subaru","logo":"https:\/\/www.cars-data.com\/design\/images\/cars-logo\/subaru-logo-small.jpg"},{"id":14,"name":"Mazda","logo":"https:\/\/www.cars-data.com\/design\/images\/cars-logo\/mazda-logo-small.jpg"},{"id":15,"name":"Lexus","logo":"https:\/\/www.cars-data.com\/design\/images\/cars-logo\/lexus-logo-small.jpg"},{"id":16,"name":"Tesla","logo":"https:\/\/www.cars-data.com\/design\/images\/cars-logo\/tesla-logo-small.jpg"},{"id":17,"name":"Volvo","logo":"https:\/\/www.cars-data.com\/design\/images\/cars-logo\/volvo-logo-small.jpg"},{"id":18,"name":"Jaguar","logo":"https:\/\/www.cars-data.com\/design\/images\/cars-logo\/jaguar-logo-small.jpg"},{"id":19,"name":"Porsche","logo":"https:\/\/www.cars-data.com\/design\/images\/cars-logo\/porsche-logo-small.jpg"},{"id":20,"name":"Ferrari","logo":"https:\/\/www.cars-data.com\/design\/images\/cars-logo\/ferrari-logo-small.jpg"},{"id":21,"name":"Lamborghini","logo":"https:\/\/www.cars-data.com\/design\/images\/cars-logo\/lamborghini-logo-small.jpg"},{"id":22,"name":"Mitsubishi","logo":"https:\/\/www.cars-data.com\/design\/images\/cars-logo\/mitsubishi-logo-small.jpg"},{"id":23,"name":"Renault","logo":"https:\/\/www.cars-data.com\/design\/images\/cars-logo\/renault-logo-small.jpg"},{"id":24,"name":"Peugeot","logo":"https:\/\/www.cars-data.com\/design\/images\/cars-logo\/peugeot-logo-small.jpg"},{"id":25,"name":"Citro\u00ebn","logo":"https:\/\/www.cars-data.com\/design\/images\/cars-logo\/citroen-logo-small.jpg"},{"id":26,"name":"Fiat","logo":"https:\/\/www.cars-data.com\/design\/images\/cars-logo\/fiat-logo-small.jpg"},{"id":27,"name":"Seat","logo":"https:\/\/www.cars-data.com\/design\/images\/cars-logo\/seat-logo-small.jpg"},{"id":28,"name":"Skoda","logo":"https:\/\/www.cars-data.com\/design\/images\/cars-logo\/skoda-logo-small.jpg"},{"id":29,"name":"Suzuki","logo":"https:\/\/www.cars-data.com\/design\/images\/cars-logo\/suzuki-logo-small.jpg"},{"id":30,"name":"Dodge","logo":"https:\/\/www.cars-data.com\/design\/images\/cars-logo\/dodge-logo-small.jpg"},{"id":31,"name":"Jeep","logo":"https:\/\/www.cars-data.com\/design\/images\/cars-logo\/jeep-logo-small.jpg"},{"id":32,"name":"Cadillac","logo":"https:\/\/www.cars-data.com\/design\/images\/cars-logo\/cadillac-logo-small.jpg"},{"id":33,"name":"Buick","logo":"https:\/\/www.cars-data.com\/design\/images\/cars-logo\/buick-logo-small.jpg"},{"id":34,"name":"Chrysler","logo":"https:\/\/www.cars-data.com\/design\/images\/cars-logo\/chrysler-logo-small.jpg"},{"id":35,"name":"Acura","logo":"https:\/\/www.cars-data.com\/design\/images\/cars-logo\/acura-logo-small.jpg"},{"id":36,"name":"Infiniti","logo":"https:\/\/www.cars-data.com\/design\/images\/cars-logo\/infiniti-logo-small.jpg"},{"id":37,"name":"Genesis","logo":"https:\/\/www.cars-data.com\/design\/images\/cars-logo\/genesis-logo-small.jpg"},{"id":38,"name":"Lincoln","logo":"https:\/\/www.cars-data.com\/design\/images\/cars-logo\/lincoln-logo-small.jpg"},{"id":39,"name":"Mini","logo":"https:\/\/www.cars-data.com\/design\/images\/cars-logo\/mini-logo-small.jpg"},{"id":40,"name":"Smart","logo":"https:\/\/www.cars-data.com\/design\/images\/cars-logo\/smart-logo-small.jpg"},{"id":41,"name":"Maserati","logo":"https:\/\/www.cars-data.com\/design\/images\/cars-logo\/maserati-logo-small.jpg"},{"id":42,"name":"Bentley","logo":"https:\/\/www.cars-data.com\/design\/images\/cars-logo\/bentley-logo-small.jpg"},{"id":43,"name":"Aston Martin","logo":"https:\/\/www.cars-data.com\/design\/images\/cars-logo\/aston-martin-logo-small.jpg"},{"id":44,"name":"Rolls-Royce","logo":"https:\/\/www.cars-data.com\/design\/images\/cars-logo\/rolls-royce-logo-small.jpg"},{"id":45,"name":"Bugatti","logo":"https:\/\/www.cars-data.com\/design\/images\/cars-logo\/bugatti-logo-small.jpg"},{"id":46,"name":"Pagani","logo":"https:\/\/www.cars-data.com\/design\/images\/cars-logo\/pagani-logo-small.jpg"},{"id":47,"name":"Koenigsegg","logo":"https:\/\/www.cars-data.com\/design\/images\/cars-logo\/koenigsegg-logo-small.jpg"},{"id":48,"name":"Lotus","logo":"https:\/\/www.cars-data.com\/design\/images\/cars-logo\/lotus-logo-small.jpg"},{"id":49,"name":"McLaren","logo":"https:\/\/www.cars-data.com\/design\/images\/cars-logo\/mclaren-logo-small.jpg"}])" class="relative">
<label for="oe_similar_brand" class="block text-sm font-medium text-gray-700">
Marque OE <span class="text-danger">*</span>
</label>
<div class="mt-1 relative">
<input type="text" id="oe_similar_brand" name="oe_similar_brand" x-model="search" @input="filterBrands" @focus="openDropdown" @keydown.escape="closeDropdown" @keydown.arrow-down.prevent="highlightNext" @keydown.arrow-up.prevent="highlightPrevious" @keydown.enter.prevent="selectHighlighted" placeholder="Sélectionner une marque OE" class="block w-full pl-10 pr-3 py-2 border border-gray-300 bg-white rounded-md focus:ring-primary focus:border-primary" autocomplete="off">
<div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
<i class="fas fa-car text-gray-400"></i>
</div>
<!-- Dropdown des suggestions -->
<ul x-show="isOpen && filteredBrands.length > 0" x-transition="" class="absolute z-10 w-full bg-white border border-gray-300 rounded-md mt-1 max-h-60 overflow-auto shadow-lg">
<template x-for="(brand, index) in filteredBrands" :key="brand.id">
<li @click="selectBrand(brand)" @mouseover="highlightedIndex = index" :class="{'bg-gray-100': highlightedIndex === index}" class="cursor-pointer flex items-center px-4 py-2 hover:bg-gray-100">
<img :src="brand.logo" alt="" class="w-5 h-5 mr-2">
<span x-text="brand.name"></span>
</li>
</template>
<li x-show="filteredBrands.length === 0" class="px-4 py-2 text-gray-500">
Aucun résultat trouvé.
</li>
</ul>
</div>
<p class="mt-2 text-sm text-gray-500">Sélectionnez la marque OE du véhicule.</p>
<!-- Champ caché pour stocker l'ID de la marque sélectionnée -->
<input type="hidden" name="oe_similar_brands[]" x-model="selectedBrandId">
</div>
<script>
function vehicleBrandSelector(vehicles) {
return {
search: '',
selectedBrandId: '',
isOpen: false,
allBrands: vehicles,
filteredBrands: [],
highlightedIndex: 0,
openDropdown() {
this.isOpen = true;
this.filterBrands();
},
closeDropdown() {
this.isOpen = false;
},
filterBrands() {
const query = this.search.trim().toLowerCase();
if (query === '') {
this.filteredBrands = [];
} else {
this.filteredBrands = this.allBrands.filter(brand =>
brand.name.toLowerCase().includes(query)
);
}
this.highlightedIndex = 0;
this.isOpen = true;
},
selectBrand(brand) {
this.search = brand.name;
this.selectedBrandId = brand.id;
this.isOpen = false;
},
highlightNext() {
if (this.highlightedIndex < this.filteredBrands.length - 1) {
this.highlightedIndex++;
}
},
highlightPrevious() {
if (this.highlightedIndex > 0) {
this.highlightedIndex--;
}
},
selectHighlighted() {
if (this.filteredBrands.length > 0) {
this.selectBrand(this.filteredBrands[this.highlightedIndex]);
}
},
// Fermer le dropdown si l'utilisateur clique à l'extérieur
init() {
document.addEventListener('click', (event) => {
if (!event.target.closest('[x-data="vehicleBrandSelector(...)"]')) {
this.closeDropdown();
}
});
}
};
}
</script>
<!-- Sélecteur de Pays -->
<div>
<label for="country" class="block text-sm font-medium text-gray-700">Pays <span class="text-red-500">*</span></label>
<div x-data="countrySelector()" class="mt-1 relative">
<input type="text" id="country" placeholder="Sélectionnez un pays" x-model="search" @focus="open = true" @click.away="open = false" class="block w-full pl-10 pr-3 py-2 border border-gray-300 rounded-md focus:ring-primary focus:border-primary">
<div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
<i class="fas fa-globe text-gray-400"></i>
</div>
<!-- Dropdown des suggestions -->
<div x-show="open" x-transition="" class="absolute mt-1 w-full bg-white shadow-lg max-h-60 rounded-md py-1 text-base ring-1 ring-black ring-opacity-5 overflow-auto z-10">
<template x-for="(country, index) in filteredCountries" :key="index">
<div @click="selectCountry(country)" class="cursor-pointer flex items-center px-4 py-2 hover:bg-gray-100">
<img :src="country.flag" :alt="country.name" class="w-5 h-5 mr-3 flex-shrink-0">
<span x-text="country.name"></span>
</div>
</template>
<div x-show="filteredCountries.length === 0" class="px-4 py-2 text-gray-500">
Aucun pays trouvé.
</div>
</div>
</div>
</div>
<!-- Script Alpine.js pour le Sélecteur de Pays -->
<script>
function countrySelector() {
return {
search: '',
open: false,
countries: [
{ name: 'Afghanistan', code: 'af', flag: 'https://flagcdn.com/af.svg' },
{ name: 'Afrique du Sud', code: 'za', flag: 'https://flagcdn.com/za.svg' },
{ name: 'Albanie', code: 'al', flag: 'https://flagcdn.com/al.svg' },
{ name: 'Algérie', code: 'dz', flag: 'https://flagcdn.com/dz.svg' },
{ name: 'Allemagne', code: 'de', flag: 'https://flagcdn.com/de.svg' },
{ name: 'Andorre', code: 'ad', flag: 'https://flagcdn.com/ad.svg' },
{ name: 'Angola', code: 'ao', flag: 'https://flagcdn.com/ao.svg' },
{ name: 'Antigua-et-Barbuda', code: 'ag', flag: 'https://flagcdn.com/ag.svg' },
{ name: 'Arabie Saoudite', code: 'sa', flag: 'https://flagcdn.com/sa.svg' },
{ name: 'Argentine', code: 'ar', flag: 'https://flagcdn.com/ar.svg' },
{ name: 'Arménie', code: 'am', flag: 'https://flagcdn.com/am.svg' },
{ name: 'Australie', code: 'au', flag: 'https://flagcdn.com/au.svg' },
{ name: 'Autriche', code: 'at', flag: 'https://flagcdn.com/at.svg' },
{ name: 'Azerbaïdjan', code: 'az', flag: 'https://flagcdn.com/az.svg' },
{ name: 'Bahamas', code: 'bs', flag: 'https://flagcdn.com/bs.svg' },
{ name: 'Bahreïn', code: 'bh', flag: 'https://flagcdn.com/bh.svg' },
{ name: 'Bangladesh', code: 'bd', flag: 'https://flagcdn.com/bd.svg' },
{ name: 'Barbade', code: 'bb', flag: 'https://flagcdn.com/bb.svg' },
{ name: 'Belgique', code: 'be', flag: 'https://flagcdn.com/be.svg' },
{ name: 'Belize', code: 'bz', flag: 'https://flagcdn.com/bz.svg' },
{ name: 'Bénin', code: 'bj', flag: 'https://flagcdn.com/bj.svg' },
{ name: 'Bhoutan', code: 'bt', flag: 'https://flagcdn.com/bt.svg' },
{ name: 'Biélorussie', code: 'by', flag: 'https://flagcdn.com/by.svg' },
{ name: 'Birmanie', code: 'mm', flag: 'https://flagcdn.com/mm.svg' },
{ name: 'Bolivie', code: 'bo', flag: 'https://flagcdn.com/bo.svg' },
{ name: 'Bosnie-Herzégovine', code: 'ba', flag: 'https://flagcdn.com/ba.svg' },
{ name: 'Botswana', code: 'bw', flag: 'https://flagcdn.com/bw.svg' },
{ name: 'Brésil', code: 'br', flag: 'https://flagcdn.com/br.svg' },
{ name: 'Brunei', code: 'bn', flag: 'https://flagcdn.com/bn.svg' },
{ name: 'Bulgarie', code: 'bg', flag: 'https://flagcdn.com/bg.svg' },
{ name: 'Burkina Faso', code: 'bf', flag: 'https://flagcdn.com/bf.svg' },
{ name: 'Burundi', code: 'bi', flag: 'https://flagcdn.com/bi.svg' },
{ name: 'Cambodge', code: 'kh', flag: 'https://flagcdn.com/kh.svg' },
{ name: 'Cameroun', code: 'cm', flag: 'https://flagcdn.com/cm.svg' },
{ name: 'Canada', code: 'ca', flag: 'https://flagcdn.com/ca.svg' },
{ name: 'Cap-Vert', code: 'cv', flag: 'https://flagcdn.com/cv.svg' },
{ name: 'Chili', code: 'cl', flag: 'https://flagcdn.com/cl.svg' },
{ name: 'Chine', code: 'cn', flag: 'https://flagcdn.com/cn.svg' },
{ name: 'Chypre', code: 'cy', flag: 'https://flagcdn.com/cy.svg' },
{ name: 'Colombie', code: 'co', flag: 'https://flagcdn.com/co.svg' },
{ name: 'Comores', code: 'km', flag: 'https://flagcdn.com/km.svg' },
{ name: 'Congo (Brazzaville)', code: 'cg', flag: 'https://flagcdn.com/cg.svg' },
{ name: 'Congo (Kinshasa)', code: 'cd', flag: 'https://flagcdn.com/cd.svg' },
{ name: 'Corée du Nord', code: 'kp', flag: 'https://flagcdn.com/kp.svg' },
{ name: 'Corée du Sud', code: 'kr', flag: 'https://flagcdn.com/kr.svg' },
{ name: 'Costa Rica', code: 'cr', flag: 'https://flagcdn.com/cr.svg' },
{ name: 'Côte d’Ivoire', code: 'ci', flag: 'https://flagcdn.com/ci.svg' },
{ name: 'Croatie', code: 'hr', flag: 'https://flagcdn.com/hr.svg' },
{ name: 'Cuba', code: 'cu', flag: 'https://flagcdn.com/cu.svg' },
{ name: 'Danemark', code: 'dk', flag: 'https://flagcdn.com/dk.svg' },
{ name: 'Djibouti', code: 'dj', flag: 'https://flagcdn.com/dj.svg' },
{ name: 'Dominique', code: 'dm', flag: 'https://flagcdn.com/dm.svg' },
{ name: 'Égypte', code: 'eg', flag: 'https://flagcdn.com/eg.svg' },
{ name: 'Émirats arabes unis', code: 'ae', flag: 'https://flagcdn.com/ae.svg' },
{ name: 'Équateur', code: 'ec', flag: 'https://flagcdn.com/ec.svg' },
{ name: 'Érythrée', code: 'er', flag: 'https://flagcdn.com/er.svg' },
{ name: 'Espagne', code: 'es', flag: 'https://flagcdn.com/es.svg' },
{ name: 'Estonie', code: 'ee', flag: 'https://flagcdn.com/ee.svg' },
{ name: 'Eswatini', code: 'sz', flag: 'https://flagcdn.com/sz.svg' },
{ name: 'États-Unis', code: 'us', flag: 'https://flagcdn.com/us.svg' },
{ name: 'Éthiopie', code: 'et', flag: 'https://flagcdn.com/et.svg' },
{ name: 'Fidji', code: 'fj', flag: 'https://flagcdn.com/fj.svg' },
{ name: 'Finlande', code: 'fi', flag: 'https://flagcdn.com/fi.svg' },
{ name: 'France', code: 'fr', flag: 'https://flagcdn.com/fr.svg' },
{ name: 'Gabon', code: 'ga', flag: 'https://flagcdn.com/ga.svg' },
{ name: 'Gambie', code: 'gm', flag: 'https://flagcdn.com/gm.svg' },
{ name: 'Géorgie', code: 'ge', flag: 'https://flagcdn.com/ge.svg' },
{ name: 'Ghana', code: 'gh', flag: 'https://flagcdn.com/gh.svg' },
{ name: 'Grèce', code: 'gr', flag: 'https://flagcdn.com/gr.svg' },
{ name: 'Grenade', code: 'gd', flag: 'https://flagcdn.com/gd.svg' },
{ name: 'Guatemala', code: 'gt', flag: 'https://flagcdn.com/gt.svg' },
{ name: 'Guinée', code: 'gn', flag: 'https://flagcdn.com/gn.svg' },
{ name: 'Guinée-Bissau', code: 'gw', flag: 'https://flagcdn.com/gw.svg' },
{ name: 'Guinée équatoriale', code: 'gq', flag: 'https://flagcdn.com/gq.svg' },
{ name: 'Guyana', code: 'gy', flag: 'https://flagcdn.com/gy.svg' },
{ name: 'Haïti', code: 'ht', flag: 'https://flagcdn.com/ht.svg' },
{ name: 'Honduras', code: 'hn', flag: 'https://flagcdn.com/hn.svg' },
{ name: 'Hongrie', code: 'hu', flag: 'https://flagcdn.com/hu.svg' },
{ name: 'Inde', code: 'in', flag: 'https://flagcdn.com/in.svg' },
{ name: 'Indonésie', code: 'id', flag: 'https://flagcdn.com/id.svg' },
{ name: 'Irak', code: 'iq', flag: 'https://flagcdn.com/iq.svg' },
{ name: 'Iran', code: 'ir', flag: 'https://flagcdn.com/ir.svg' },
{ name: 'Irlande', code: 'ie', flag: 'https://flagcdn.com/ie.svg' },
{ name: 'Islande', code: 'is', flag: 'https://flagcdn.com/is.svg' },
{ name: 'Israël', code: 'il', flag: 'https://flagcdn.com/il.svg' },
{ name: 'Italie', code: 'it', flag: 'https://flagcdn.com/it.svg' },
{ name: 'Jamaïque', code: 'jm', flag: 'https://flagcdn.com/jm.svg' },
{ name: 'Japon', code: 'jp', flag: 'https://flagcdn.com/jp.svg' },
{ name: 'Jordanie', code: 'jo', flag: 'https://flagcdn.com/jo.svg' },
{ name: 'Kazakhstan', code: 'kz', flag: 'https://flagcdn.com/kz.svg' },
{ name: 'Kenya', code: 'ke', flag: 'https://flagcdn.com/ke.svg' },
{ name: 'Kirghizistan', code: 'kg', flag: 'https://flagcdn.com/kg.svg' },
{ name: 'Kiribati', code: 'ki', flag: 'https://flagcdn.com/ki.svg' },
{ name: 'Koweït', code: 'kw', flag: 'https://flagcdn.com/kw.svg' },
{ name: 'Laos', code: 'la', flag: 'https://flagcdn.com/la.svg' },
{ name: 'Lesotho', code: 'ls', flag: 'https://flagcdn.com/ls.svg' },
{ name: 'Lettonie', code: 'lv', flag: 'https://flagcdn.com/lv.svg' },
{ name: 'Liban', code: 'lb', flag: 'https://flagcdn.com/lb.svg' },
{ name: 'Libéria', code: 'lr', flag: 'https://flagcdn.com/lr.svg' },
{ name: 'Libye', code: 'ly', flag: 'https://flagcdn.com/ly.svg' },
{ name: 'Liechtenstein', code: 'li', flag: 'https://flagcdn.com/li.svg' },
{ name: 'Lituanie', code: 'lt', flag: 'https://flagcdn.com/lt.svg' },
{ name: 'Luxembourg', code: 'lu', flag: 'https://flagcdn.com/lu.svg' },
{ name: 'Macédoine du Nord', code: 'mk', flag: 'https://flagcdn.com/mk.svg' },
{ name: 'Madagascar', code: 'mg', flag: 'https://flagcdn.com/mg.svg' },
{ name: 'Malaisie', code: 'my', flag: 'https://flagcdn.com/my.svg' },
{ name: 'Malawi', code: 'mw', flag: 'https://flagcdn.com/mw.svg' },
{ name: 'Maldives', code: 'mv', flag: 'https://flagcdn.com/mv.svg' },
{ name: 'Mali', code: 'ml', flag: 'https://flagcdn.com/ml.svg' },
{ name: 'Malte', code: 'mt', flag: 'https://flagcdn.com/mt.svg' },
{ name: 'Maroc', code: 'ma', flag: 'https://flagcdn.com/ma.svg' },
{ name: 'Marshall', code: 'mh', flag: 'https://flagcdn.com/mh.svg' },
{ name: 'Maurice', code: 'mu', flag: 'https://flagcdn.com/mu.svg' },
{ name: 'Mauritanie', code: 'mr', flag: 'https://flagcdn.com/mr.svg' },
{ name: 'Mexique', code: 'mx', flag: 'https://flagcdn.com/mx.svg' },
{ name: 'Micronésie', code: 'fm', flag: 'https://flagcdn.com/fm.svg' },
{ name: 'Moldavie', code: 'md', flag: 'https://flagcdn.com/md.svg' },
{ name: 'Monaco', code: 'mc', flag: 'https://flagcdn.com/mc.svg' },
{ name: 'Mongolie', code: 'mn', flag: 'https://flagcdn.com/mn.svg' },
{ name: 'Monténégro', code: 'me', flag: 'https://flagcdn.com/me.svg' },
{ name: 'Mozambique', code: 'mz', flag: 'https://flagcdn.com/mz.svg' },
{ name: 'Namibie', code: 'na', flag: 'https://flagcdn.com/na.svg' },
{ name: 'Nauru', code: 'nr', flag: 'https://flagcdn.com/nr.svg' },
{ name: 'Népal', code: 'np', flag: 'https://flagcdn.com/np.svg' },
{ name: 'Nicaragua', code: 'ni', flag: 'https://flagcdn.com/ni.svg' },
{ name: 'Niger', code: 'ne', flag: 'https://flagcdn.com/ne.svg' },
{ name: 'Nigeria', code: 'ng', flag: 'https://flagcdn.com/ng.svg' },
{ name: 'Niue', code: 'nu', flag: 'https://flagcdn.com/nu.svg' },
{ name: 'Norvège', code: 'no', flag: 'https://flagcdn.com/no.svg' },
{ name: 'Nouvelle-Zélande', code: 'nz', flag: 'https://flagcdn.com/nz.svg' },
{ name: 'Oman', code: 'om', flag: 'https://flagcdn.com/om.svg' },
{ name: 'Ouganda', code: 'ug', flag: 'https://flagcdn.com/ug.svg' },
{ name: 'Ouzbékistan', code: 'uz', flag: 'https://flagcdn.com/uz.svg' },
{ name: 'Pakistan', code: 'pk', flag: 'https://flagcdn.com/pk.svg' },
{ name: 'Palaos', code: 'pw', flag: 'https://flagcdn.com/pw.svg' },
{ name: 'Palestine', code: 'ps', flag: 'https://flagcdn.com/ps.svg' },
{ name: 'Panama', code: 'pa', flag: 'https://flagcdn.com/pa.svg' },
{ name: 'Papouasie-Nouvelle-Guinée', code: 'pg', flag: 'https://flagcdn.com/pg.svg' },
{ name: 'Paraguay', code: 'py', flag: 'https://flagcdn.com/py.svg' },
{ name: 'Pays-Bas', code: 'nl', flag: 'https://flagcdn.com/nl.svg' },
{ name: 'Pérou', code: 'pe', flag: 'https://flagcdn.com/pe.svg' },
{ name: 'Philippines', code: 'ph', flag: 'https://flagcdn.com/ph.svg' },
{ name: 'Pologne', code: 'pl', flag: 'https://flagcdn.com/pl.svg' },
{ name: 'Portugal', code: 'pt', flag: 'https://flagcdn.com/pt.svg' },
{ name: 'Qatar', code: 'qa', flag: 'https://flagcdn.com/qa.svg' },
{ name: 'République centrafricaine', code: 'cf', flag: 'https://flagcdn.com/cf.svg' },
{ name: 'République tchèque', code: 'cz', flag: 'https://flagcdn.com/cz.svg' },
{ name: 'République démocratique du Congo', code: 'cd', flag: 'https://flagcdn.com/cd.svg' },
{ name: 'Roumanie', code: 'ro', flag: 'https://flagcdn.com/ro.svg' },
{ name: 'Royaume-Uni', code: 'gb', flag: 'https://flagcdn.com/gb.svg' },
{ name: 'Russie', code: 'ru', flag: 'https://flagcdn.com/ru.svg' },
{ name: 'Rwanda', code: 'rw', flag: 'https://flagcdn.com/rw.svg' },
{ name: 'Saint-Christophe-et-Niévès', code: 'kn', flag: 'https://flagcdn.com/kn.svg' },
{ name: 'Sainte-Lucie', code: 'lc', flag: 'https://flagcdn.com/lc.svg' },
{ name: 'Saint-Marin', code: 'sm', flag: 'https://flagcdn.com/sm.svg' },
{ name: 'Saint-Vincent-et-les Grenadines', code: 'vc', flag: 'https://flagcdn.com/vc.svg' },
{ name: 'Salomon', code: 'sb', flag: 'https://flagcdn.com/sb.svg' },
{ name: 'Salvador', code: 'sv', flag: 'https://flagcdn.com/sv.svg' },
{ name: 'Samoa', code: 'ws', flag: 'https://flagcdn.com/ws.svg' },
{ name: 'Sao Tomé-et-Principe', code: 'st', flag: 'https://flagcdn.com/st.svg' },
{ name: 'Sénégal', code: 'sn', flag: 'https://flagcdn.com/sn.svg' },
{ name: 'Serbie', code: 'rs', flag: 'https://flagcdn.com/rs.svg' },
{ name: 'Seychelles', code: 'sc', flag: 'https://flagcdn.com/sc.svg' },
{ name: 'Sierra Leone', code: 'sl', flag: 'https://flagcdn.com/sl.svg' },
{ name: 'Singapour', code: 'sg', flag: 'https://flagcdn.com/sg.svg' },
{ name: 'Slovaquie', code: 'sk', flag: 'https://flagcdn.com/sk.svg' },
{ name: 'Slovénie', code: 'si', flag: 'https://flagcdn.com/si.svg' },
{ name: 'Somalie', code: 'so', flag: 'https://flagcdn.com/so.svg' },
{ name: 'Soudan', code: 'sd', flag: 'https://flagcdn.com/sd.svg' },
{ name: 'Soudan du Sud', code: 'ss', flag: 'https://flagcdn.com/ss.svg' },
{ name: 'Sri Lanka', code: 'lk', flag: 'https://flagcdn.com/lk.svg' },
{ name: 'Suède', code: 'se', flag: 'https://flagcdn.com/se.svg' },
{ name: 'Suisse', code: 'ch', flag: 'https://flagcdn.com/ch.svg' },
{ name: 'Suriname', code: 'sr', flag: 'https://flagcdn.com/sr.svg' },
{ name: 'Swaziland', code: 'sz', flag: 'https://flagcdn.com/sz.svg' },
{ name: 'Syrie', code: 'sy', flag: 'https://flagcdn.com/sy.svg' },
{ name: 'Tadjikistan', code: 'tj', flag: 'https://flagcdn.com/tj.svg' },
{ name: 'Taïwan', code: 'tw', flag: 'https://flagcdn.com/tw.svg' },
{ name: 'Tanzanie', code: 'tz', flag: 'https://flagcdn.com/tz.svg' },
{ name: 'Tchad', code: 'td', flag: 'https://flagcdn.com/td.svg' },
{ name: 'Thaïlande', code: 'th', flag: 'https://flagcdn.com/th.svg' },
{ name: 'Timor oriental', code: 'tl', flag: 'https://flagcdn.com/tl.svg' },
{ name: 'Togo', code: 'tg', flag: 'https://flagcdn.com/tg.svg' },
{ name: 'Tonga', code: 'to', flag: 'https://flagcdn.com/to.svg' },
{ name: 'Trinité-et-Tobago', code: 'tt', flag: 'https://flagcdn.com/tt.svg' },
{ name: 'Tunisie', code: 'tn', flag: 'https://flagcdn.com/tn.svg' },
{ name: 'Turkménistan', code: 'tm', flag: 'https://flagcdn.com/tm.svg' },
{ name: 'Turquie', code: 'tr', flag: 'https://flagcdn.com/tr.svg' },
{ name: 'Tuvalu', code: 'tv', flag: 'https://flagcdn.com/tv.svg' },
{ name: 'Ukraine', code: 'ua', flag: 'https://flagcdn.com/ua.svg' },
{ name: 'Uruguay', code: 'uy', flag: 'https://flagcdn.com/uy.svg' },
{ name: 'Vanuatu', code: 'vu', flag: 'https://flagcdn.com/vu.svg' },
{ name: 'Vatican', code: 'va', flag: 'https://flagcdn.com/va.svg' },
{ name: 'Venezuela', code: 've', flag: 'https://flagcdn.com/ve.svg' },
{ name: 'Viêt Nam', code: 'vn', flag: 'https://flagcdn.com/vn.svg' },
{ name: 'Yémen', code: 'ye', flag: 'https://flagcdn.com/ye.svg' },
{ name: 'Zambie', code: 'zm', flag: 'https://flagcdn.com/zm.svg' },
{ name: 'Zimbabwe', code: 'zw', flag: 'https://flagcdn.com/zw.svg' },
// Ajoutez ici tous les autres pays si nécessaire
],
get filteredCountries() {
if (this.search.trim() === '') {
return this.countries;
}
return this.countries.filter(country =>
country.name.toLowerCase().includes(this.search.toLowerCase())
);
},
selectCountry(country) {
this.search = country.name;
this.open = false;
// Vous pouvez également gérer le code du pays ou d'autres actions ici
}
}
}
</script>
<!-- Quantité / Unité -->
<div>
<label :for="'quantity_' + index" class="block text-sm font-medium text-gray-700">Quantité / Unité <span class="text-danger">*</span></label>
<div class="mt-1 relative">
<input type="number" :id="'quantity_' + index" name="product_references[][quantity]" x-model="reference.quantity" min="1" placeholder="Entrez la quantité" class="block w-full pl-10 pr-3 py-2 border border-gray-300 rounded-md focus:ring-primary focus:border-primary">
<div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
<i class="fas fa-sort-numeric-up-alt text-gray-400"></i>
</div>
</div>
</div>
<div>
<!-- Champ Unité -->
<div>
<label for="unite" class="block text-sm font-medium text-gray-700">
Unité <span class="text-red-500">*</span>
</label>
<div class="mt-1 relative">
<select id="unite" name="unite" class="block w-full pl-10 pr-3 py-2 border border-gray-300 bg-white rounded-md focus:outline-none focus:ring-primary focus:border-primary sm:text-sm">
<option value="">Sélectionnez une unité</option>
<option value="kg">Kilogramme (kg)</option>
<option value="g">Gramme (g)</option>
<option value="lb">Livre (lb)</option>
<option value="oz">Once (oz)</option>
<option value="l">Litre (l)</option>
<option value="ml">Millilitre (ml)</option>
<option value="m">Mètre (m)</option>
<option value="cm">Centimètre (cm)</option>
<option value="mm">Millimètre (mm)</option>
<option value="m²">Mètre carré (m²)</option>
<option value="m³">Mètre cube (m³)</option>
<option value="pcs">Pièces (pcs)</option>
<option value="doz">Douzaine (doz)</option>
<option value="pack">Pack</option>
<option value="box">Boîte (box)</option>
<option value="set">Ensemble (set)</option>
<option value="ft">Pied (ft)</option>
<option value="in">Pouce (in)</option>
<option value="yd">Yard (yd)</option>
<option value="mi">Mile (mi)</option>
<!-- Ajoutez d'autres unités si nécessaire -->
</select>
<div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
<i class="fas fa-ruler-combined text-gray-400"></i>
</div>
</div>
</div>
</div>
<!-- Prix d’achat -->
<div>
<label :for="'purchase_price_' + index" class="block text-sm font-medium text-gray-700">Prix d’achat (DA) <span class="text-danger">*</span></label>
<div class="mt-1 relative">
<input type="number" :id="'purchase_price_' + index" name="product_references[][purchase_price]" x-model="reference.purchase_price" placeholder="Prix d’achat" class="block w-full pl-10 pr-3 py-2 border border-gray-300 rounded-md focus:ring-primary focus:border-primary">
<div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
<i class="fas fa-money-bill-alt text-gray-400"></i>
</div>
</div>
</div>
<!-- Prix de vente -->
<div>
<label :for="'sale_price_' + index" class="block text-sm font-medium text-gray-700">Prix de vente (DA) <span class="text-danger">*</span></label>
<div class="mt-1 relative">
<input type="number" :id="'sale_price_' + index" name="product_references[][sale_price]" x-model="reference.sale_price" placeholder="Prix de vente" class="block w-full pl-10 pr-3 py-2 border border-gray-300 rounded-md focus:ring-primary focus:border-primary">
<div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
<i class="fas fa-tags text-gray-400"></i>
</div>
</div>
</div>
<!-- Emplacement en Stock -->
<div x-data="autocomplete(["test"])" class="mb-4">
<label for="stock_location" class="block text-sm font-medium text-gray-700">
Emplacement en Stock <span class="text-danger">*</span>
</label>
<div class="mt-1 relative">
<input type="text" id="stock_location" name="stock_location" x-model="query" @input="filterEmplacements" @keydown.down.prevent="highlightNext" @keydown.up.prevent="highlightPrevious" @keydown.enter.prevent="selectEmplacement" placeholder="Emplacement en stock" class="block w-full pl-10 pr-3 py-2 border border-gray-300 rounded-md focus:ring-primary focus:border-primary" autocomplete="off">
<div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
<i class="fas fa-map-marker-alt text-gray-400"></i>
</div>
<!-- Liste des suggestions -->
<ul x-show="filteredEmplacements.length > 0" class="absolute z-10 w-full bg-white border border-gray-300 mt-1 rounded-md max-h-60 overflow-auto">
<template x-for="(emplacement, idx) in filteredEmplacements" :key="emplacement">
<li class="px-4 py-2 cursor-pointer hover:bg-gray-200" :class="{'bg-gray-200': idx === highlightedIndex}" @click="selectEmplacement(emplacement)" @mouseover="highlightedIndex = idx">
<span x-text="emplacement"></span>
</li>
</template>
</ul>
</div>
</div>
<!-- Définir la fonction autocomplete -->
<script>
function autocomplete(emplacements) {
return {
query: '',
filteredEmplacements: [],
highlightedIndex: 0,
filterEmplacements() {
if (this.query.length === 0) {
this.filteredEmplacements = [];
return;
}
const queryLower = this.query.toLowerCase();
this.filteredEmplacements = emplacements.filter(emplacement => emplacement.toLowerCase().includes(queryLower));
},
highlightNext() {
if (this.highlightedIndex < this.filteredEmplacements.length - 1) {
this.highlightedIndex++;
}
},
highlightPrevious() {
if (this.highlightedIndex > 0) {
this.highlightedIndex--;
}
},
selectEmplacement(emplacement = null) {
if (emplacement) {
this.query = emplacement;
} else if (this.filteredEmplacements.length > 0) {
this.query = this.filteredEmplacements[this.highlightedIndex];
}
this.filteredEmplacements = [];
}
}
}
</script>
<!-- Fournisseur -->
<div x-data="fournisseurSelector()">
<!-- Champ Fournisseur -->
<div>
<label for="fournisseur" class="block text-sm font-medium text-gray-700">
Fournisseur <span class="text-red-500">*</span>
</label>
<div class="mt-1 relative">
<input type="text" id="fournisseur" name="fournisseur" placeholder="Sélectionnez un fournisseur" x-model="search" @focus="open = true" @click.away="open = false" class="block w-full pl-10 pr-3 py-2 border border-gray-300 rounded-md focus:ring-primary focus:border-primary">
<div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
<i class="fas fa-user-tie text-gray-400"></i>
</div>
<!-- Dropdown des suggestions -->
<div x-show="open" x-transition="" class="absolute mt-1 w-full bg-white shadow-lg max-h-60 rounded-md py-1 text-base ring-1 ring-black ring-opacity-5 overflow-auto z-10">
<template x-for="(fournisseur, index) in filteredFournisseurs" :key="index">
<div @click="selectFournisseur(fournisseur)" class="cursor-pointer flex items-center px-4 py-2 hover:bg-gray-100">
<i class="fas fa-user-tie mr-3 text-gray-400"></i>
<span x-text="fournisseur"></span>
</div>
</template>
<div x-show="filteredFournisseurs.length === 0" class="px-4 py-2 text-gray-500">
Aucun fournisseur trouvé.
</div>
</div>
</div>
</div>
</div>
<!-- Script Alpine.js pour le Sélecteur de Fournisseur -->
<script>
function fournisseurSelector() {
return {
search: '',
open: false,
// Convertir la collection Laravel en un tableau JavaScript
fournisseurs: ["fournisseur 1"],
get filteredFournisseurs() {
if (this.search.trim() === '') {
return this.fournisseurs;
}
return this.fournisseurs.filter(fournisseur =>
fournisseur.toLowerCase().includes(this.search.toLowerCase())
);
},
selectFournisseur(fournisseur) {
this.search = fournisseur;
this.open = false;
}
}
}
</script>
<!-- Nouveau champ : Code Interne avec Code-Barres -->
<!-- Code Interne avec Code-Barres et Texte Sous-Jacent -->
<div>
<label :for="'internal_code_' + index" class="block text-sm font-medium text-gray-700">
Code Interne <span class="text-danger">*</span>
</label>
<div class="mt-1 relative">
<input type="text" :id="'internal_code_' + index" name="product_references[][internal_code]" x-model="reference.internal_code" placeholder="Code interne" class="block w-full pl-10 pr-3 py-2 border border-gray-300 rounded-md bg-gray-100 cursor-not-allowed" readonly="">
<div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
<i class="fas fa-key text-gray-400"></i>
</div>
</div>
<!-- Emplacement pour le Code-Barres -->
<div class="mt-2 flex flex-col items-center">
<svg :id="'barcode_' + index"></svg>
<!-- Texte du Code Interne sous le Code-Barres -->
<p class="mt-1 text-sm text-gray-600" x-text="reference.internal_code"></p>
</div>
</div>
<!-- Photo du Produit -->
<div>
<label :for="'product_image_' + index" class="block text-sm font-medium text-gray-700">Photo du Produit</label>
<div class="mt-1 relative">
<input type="file" :id="'product_image_' + index" name="product_references[][product_image]" accept="image/*,video/*" class="block w-full pl-10 pr-3 py-2 border border-gray-300 rounded-md focus:ring-primary focus:border-primary">
<div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
<i class="fas fa-file-upload text-gray-400"></i>
</div>
</div>
<p class="mt-2 text-sm text-gray-500">Formats acceptés : JPG, PNG, MP4, etc.</p>
</div>
</div>
</div>
</template><div class="border border-gray-300 p-6 rounded-lg mb-6 relative">
<!-- Bouton Supprimer la Référence -->
<button type="button" @click="removeReference(index)" class="absolute top-4 right-4 text-red-500 hover:text-red-700">
<i class="fas fa-times-circle fa-2x"></i>
</button>
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
<!-- Référence du Produit -->
<div x-data="referenceSelector()">
<!-- Champ Référence de Produit -->
<div>
<label for="product_reference" class="block text-sm font-medium text-gray-700">
Référence de Produit <span class="text-red-500">*</span>
</label>
<div class="mt-1 relative">
<input type="text" :id="'product_reference_' + index" :name="'product_references[' + index + '][product_reference]'" placeholder="Sélectionnez une référence" x-model="search" @focus="open = true" @click.away="open = false" class="block w-full pl-10 pr-3 py-2 border border-gray-300 rounded-md focus:ring-primary focus:border-primary" id="product_reference_0" name="product_references[0][product_reference]">
<div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
<i class="fas fa-box-open text-gray-400"></i>
</div>
<!-- Dropdown des suggestions -->
<div x-show="open" x-transition="" class="absolute mt-1 w-full bg-white shadow-lg max-h-60 rounded-md py-1 text-base ring-1 ring-black ring-opacity-5 overflow-auto z-10" style="display: none;">
<template x-for="(reference, index) in filteredReferences" :key="index">
<div @click="selectReference(reference)" class="cursor-pointer flex items-center px-4 py-2 hover:bg-gray-100">
<i class="fas fa-box-open mr-3 text-gray-400"></i>
<span x-text="reference"></span>
</div>
</template><div @click="selectReference(reference)" class="cursor-pointer flex items-center px-4 py-2 hover:bg-gray-100">
<i class="fas fa-box-open mr-3 text-gray-400"></i>
<span x-text="reference">test</span>
</div><div @click="selectReference(reference)" class="cursor-pointer flex items-center px-4 py-2 hover:bg-gray-100">
<i class="fas fa-box-open mr-3 text-gray-400"></i>
<span x-text="reference"></span>
</div>
<div x-show="filteredReferences.length === 0" class="px-4 py-2 text-gray-500" style="display: none;">
Aucune référence trouvée.
</div>
</div>
</div>
</div>
</div>
<!-- Script Alpine.js pour le Sélecteur de Référence de Produit -->
<script>
function referenceSelector() {
return {
search: '',
open: false,
// Convertir la collection Laravel en un tableau JavaScript
references: ["test",null],
get filteredReferences() {
if (this.search.trim() === '') {
return this.references;
}
return this.references.filter(reference =>
reference.toLowerCase().includes(this.search.toLowerCase())
);
},
selectReference(reference) {
this.search = reference;
this.open = false;
}
}
}
</script>
<!-- Marque du Produit -->
<!-- Sélecteur de Marque de Véhicule -->
<!-- Autres Champs du Formulaire -->
<!-- Bouton de Soumission -->
<!-- Script Alpine.js pour le Champ de Marque de Véhicule -->
<!-- Alpine.js -->
<!-- Champ de Sélection de Marque de Véhicule -->
<!-- resources/views/products.blade.php -->
<div x-data="vehicleBrandSelector([{"id":1,"name":"Alpine","logo":"https:\/\/www.cars-data.com\/design\/images\/cars-logo\/alpine-logo-small.jpg"},{"id":2,"name":"Toyota","logo":"https:\/\/www.cars-data.com\/design\/images\/cars-logo\/toyota-logo-small.jpg"},{"id":3,"name":"Volkswagen","logo":"https:\/\/www.cars-data.com\/design\/images\/cars-logo\/volkswagen-logo-small.jpg"},{"id":4,"name":"Ford","logo":"https:\/\/www.cars-data.com\/design\/images\/cars-logo\/ford-logo-small.jpg"},{"id":5,"name":"Honda","logo":"https:\/\/www.cars-data.com\/design\/images\/cars-logo\/honda-logo-small.jpg"},{"id":6,"name":"Chevrolet","logo":"https:\/\/www.cars-data.com\/design\/images\/cars-logo\/chevrolet-logo-small.jpg"},{"id":7,"name":"Mercedes-Benz","logo":"https:\/\/www.cars-data.com\/design\/images\/cars-logo\/mercedes-benz-logo-small.jpg"},{"id":8,"name":"BMW","logo":"https:\/\/www.cars-data.com\/design\/images\/cars-logo\/bmw-logo-small.jpg"},{"id":9,"name":"Audi","logo":"https:\/\/www.cars-data.com\/design\/images\/cars-logo\/audi-logo-small.jpg"},{"id":10,"name":"Nissan","logo":"https:\/\/www.cars-data.com\/design\/images\/cars-logo\/nissan-logo-small.jpg"},{"id":11,"name":"Hyundai","logo":"https:\/\/www.cars-data.com\/design\/images\/cars-logo\/hyundai-logo-small.jpg"},{"id":12,"name":"Kia","logo":"https:\/\/www.cars-data.com\/design\/images\/cars-logo\/kia-logo-small.jpg"},{"id":13,"name":"Subaru","logo":"https:\/\/www.cars-data.com\/design\/images\/cars-logo\/subaru-logo-small.jpg"},{"id":14,"name":"Mazda","logo":"https:\/\/www.cars-data.com\/design\/images\/cars-logo\/mazda-logo-small.jpg"},{"id":15,"name":"Lexus","logo":"https:\/\/www.cars-data.com\/design\/images\/cars-logo\/lexus-logo-small.jpg"},{"id":16,"name":"Tesla","logo":"https:\/\/www.cars-data.com\/design\/images\/cars-logo\/tesla-logo-small.jpg"},{"id":17,"name":"Volvo","logo":"https:\/\/www.cars-data.com\/design\/images\/cars-logo\/volvo-logo-small.jpg"},{"id":18,"name":"Jaguar","logo":"https:\/\/www.cars-data.com\/design\/images\/cars-logo\/jaguar-logo-small.jpg"},{"id":19,"name":"Porsche","logo":"https:\/\/www.cars-data.com\/design\/images\/cars-logo\/porsche-logo-small.jpg"},{"id":20,"name":"Ferrari","logo":"https:\/\/www.cars-data.com\/design\/images\/cars-logo\/ferrari-logo-small.jpg"},{"id":21,"name":"Lamborghini","logo":"https:\/\/www.cars-data.com\/design\/images\/cars-logo\/lamborghini-logo-small.jpg"},{"id":22,"name":"Mitsubishi","logo":"https:\/\/www.cars-data.com\/design\/images\/cars-logo\/mitsubishi-logo-small.jpg"},{"id":23,"name":"Renault","logo":"https:\/\/www.cars-data.com\/design\/images\/cars-logo\/renault-logo-small.jpg"},{"id":24,"name":"Peugeot","logo":"https:\/\/www.cars-data.com\/design\/images\/cars-logo\/peugeot-logo-small.jpg"},{"id":25,"name":"Citro\u00ebn","logo":"https:\/\/www.cars-data.com\/design\/images\/cars-logo\/citroen-logo-small.jpg"},{"id":26,"name":"Fiat","logo":"https:\/\/www.cars-data.com\/design\/images\/cars-logo\/fiat-logo-small.jpg"},{"id":27,"name":"Seat","logo":"https:\/\/www.cars-data.com\/design\/images\/cars-logo\/seat-logo-small.jpg"},{"id":28,"name":"Skoda","logo":"https:\/\/www.cars-data.com\/design\/images\/cars-logo\/skoda-logo-small.jpg"},{"id":29,"name":"Suzuki","logo":"https:\/\/www.cars-data.com\/design\/images\/cars-logo\/suzuki-logo-small.jpg"},{"id":30,"name":"Dodge","logo":"https:\/\/www.cars-data.com\/design\/images\/cars-logo\/dodge-logo-small.jpg"},{"id":31,"name":"Jeep","logo":"https:\/\/www.cars-data.com\/design\/images\/cars-logo\/jeep-logo-small.jpg"},{"id":32,"name":"Cadillac","logo":"https:\/\/www.cars-data.com\/design\/images\/cars-logo\/cadillac-logo-small.jpg"},{"id":33,"name":"Buick","logo":"https:\/\/www.cars-data.com\/design\/images\/cars-logo\/buick-logo-small.jpg"},{"id":34,"name":"Chrysler","logo":"https:\/\/www.cars-data.com\/design\/images\/cars-logo\/chrysler-logo-small.jpg"},{"id":35,"name":"Acura","logo":"https:\/\/www.cars-data.com\/design\/images\/cars-logo\/acura-logo-small.jpg"},{"id":36,"name":"Infiniti","logo":"https:\/\/www.cars-data.com\/design\/images\/cars-logo\/infiniti-logo-small.jpg"},{"id":37,"name":"Genesis","logo":"https:\/\/www.cars-data.com\/design\/images\/cars-logo\/genesis-logo-small.jpg"},{"id":38,"name":"Lincoln","logo":"https:\/\/www.cars-data.com\/design\/images\/cars-logo\/lincoln-logo-small.jpg"},{"id":39,"name":"Mini","logo":"https:\/\/www.cars-data.com\/design\/images\/cars-logo\/mini-logo-small.jpg"},{"id":40,"name":"Smart","logo":"https:\/\/www.cars-data.com\/design\/images\/cars-logo\/smart-logo-small.jpg"},{"id":41,"name":"Maserati","logo":"https:\/\/www.cars-data.com\/design\/images\/cars-logo\/maserati-logo-small.jpg"},{"id":42,"name":"Bentley","logo":"https:\/\/www.cars-data.com\/design\/images\/cars-logo\/bentley-logo-small.jpg"},{"id":43,"name":"Aston Martin","logo":"https:\/\/www.cars-data.com\/design\/images\/cars-logo\/aston-martin-logo-small.jpg"},{"id":44,"name":"Rolls-Royce","logo":"https:\/\/www.cars-data.com\/design\/images\/cars-logo\/rolls-royce-logo-small.jpg"},{"id":45,"name":"Bugatti","logo":"https:\/\/www.cars-data.com\/design\/images\/cars-logo\/bugatti-logo-small.jpg"},{"id":46,"name":"Pagani","logo":"https:\/\/www.cars-data.com\/design\/images\/cars-logo\/pagani-logo-small.jpg"},{"id":47,"name":"Koenigsegg","logo":"https:\/\/www.cars-data.com\/design\/images\/cars-logo\/koenigsegg-logo-small.jpg"},{"id":48,"name":"Lotus","logo":"https:\/\/www.cars-data.com\/design\/images\/cars-logo\/lotus-logo-small.jpg"},{"id":49,"name":"McLaren","logo":"https:\/\/www.cars-data.com\/design\/images\/cars-logo\/mclaren-logo-small.jpg"}])" class="relative">
<label for="oe_similar_brand" class="block text-sm font-medium text-gray-700">
Marque OE <span class="text-danger">*</span>
</label>
<div class="mt-1 relative">
<input type="text" id="oe_similar_brand" name="oe_similar_brand" x-model="search" @input="filterBrands" @focus="openDropdown" @keydown.escape="closeDropdown" @keydown.arrow-down.prevent="highlightNext" @keydown.arrow-up.prevent="highlightPrevious" @keydown.enter.prevent="selectHighlighted" placeholder="Sélectionner une marque OE" class="block w-full pl-10 pr-3 py-2 border border-gray-300 bg-white rounded-md focus:ring-primary focus:border-primary" autocomplete="off">
<div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
<i class="fas fa-car text-gray-400"></i>
</div>
<!-- Dropdown des suggestions -->
<ul x-show="isOpen && filteredBrands.length > 0" x-transition="" class="absolute z-10 w-full bg-white border border-gray-300 rounded-md mt-1 max-h-60 overflow-auto shadow-lg" style="display: none;">
<template x-for="(brand, index) in filteredBrands" :key="brand.id">
<li @click="selectBrand(brand)" @mouseover="highlightedIndex = index" :class="{'bg-gray-100': highlightedIndex === index}" class="cursor-pointer flex items-center px-4 py-2 hover:bg-gray-100">
<img :src="brand.logo" alt="" class="w-5 h-5 mr-2">
<span x-text="brand.name"></span>
</li>
</template>
<li x-show="filteredBrands.length === 0" class="px-4 py-2 text-gray-500">
Aucun résultat trouvé.
</li>
</ul>
</div>
<p class="mt-2 text-sm text-gray-500">Sélectionnez la marque OE du véhicule.</p>
<!-- Champ caché pour stocker l'ID de la marque sélectionnée -->
<input type="hidden" name="oe_similar_brands[]" x-model="selectedBrandId">
</div>
<script>
function vehicleBrandSelector(vehicles) {
return {
search: '',
selectedBrandId: '',
isOpen: false,
allBrands: vehicles,
filteredBrands: [],
highlightedIndex: 0,
openDropdown() {
this.isOpen = true;
this.filterBrands();
},
closeDropdown() {
this.isOpen = false;
},
filterBrands() {
const query = this.search.trim().toLowerCase();
if (query === '') {
this.filteredBrands = [];
} else {
this.filteredBrands = this.allBrands.filter(brand =>
brand.name.toLowerCase().includes(query)
);
}
this.highlightedIndex = 0;
this.isOpen = true;
},
selectBrand(brand) {
this.search = brand.name;
this.selectedBrandId = brand.id;
this.isOpen = false;
},
highlightNext() {
if (this.highlightedIndex < this.filteredBrands.length - 1) {
this.highlightedIndex++;
}
},
highlightPrevious() {
if (this.highlightedIndex > 0) {
this.highlightedIndex--;
}
},
selectHighlighted() {
if (this.filteredBrands.length > 0) {
this.selectBrand(this.filteredBrands[this.highlightedIndex]);
}
},
// Fermer le dropdown si l'utilisateur clique à l'extérieur
init() {
document.addEventListener('click', (event) => {
if (!event.target.closest('[x-data="vehicleBrandSelector(...)"]')) {
this.closeDropdown();
}
});
}
};
}
</script>
<!-- Sélecteur de Pays -->
<div>
<label for="country" class="block text-sm font-medium text-gray-700">Pays <span class="text-red-500">*</span></label>
<div x-data="countrySelector()" class="mt-1 relative">
<input type="text" id="country" placeholder="Sélectionnez un pays" x-model="search" @focus="open = true" @click.away="open = false" class="block w-full pl-10 pr-3 py-2 border border-gray-300 rounded-md focus:ring-primary focus:border-primary">
<div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
<i class="fas fa-globe text-gray-400"></i>
</div>
<!-- Dropdown des suggestions -->
<div x-show="open" x-transition="" class="absolute mt-1 w-full bg-white shadow-lg max-h-60 rounded-md py-1 text-base ring-1 ring-black ring-opacity-5 overflow-auto z-10" style="display: none;">
<template x-for="(country, index) in filteredCountries" :key="index">
<div @click="selectCountry(country)" class="cursor-pointer flex items-center px-4 py-2 hover:bg-gray-100">
<img :src="country.flag" :alt="country.name" class="w-5 h-5 mr-3 flex-shrink-0">
<span x-text="country.name"></span>
</div>
</template><div @click="selectCountry(country)" class="cursor-pointer flex items-center px-4 py-2 hover:bg-gray-100">
<img :src="country.flag" :alt="country.name" class="w-5 h-5 mr-3 flex-shrink-0" src="https://flagcdn.com/af.svg" alt="Afghanistan">
<span x-text="country.name">Afghanistan</span>
</div><div @click="selectCountry(country)" class="cursor-pointer flex items-center px-4 py-2 hover:bg-gray-100">
<img :src="country.flag" :alt="country.name" class="w-5 h-5 mr-3 flex-shrink-0" src="https://flagcdn.com/za.svg" alt="Afrique du Sud">
<span x-text="country.name">Afrique du Sud</span>
</div><div @click="selectCountry(country)" class="cursor-pointer flex items-center px-4 py-2 hover:bg-gray-100">
<img :src="country.flag" :alt="country.name" class="w-5 h-5 mr-3 flex-shrink-0" src="https://flagcdn.com/al.svg" alt="Albanie">
<span x-text="country.name">Albanie</span>
</div><div @click="selectCountry(country)" class="cursor-pointer flex items-center px-4 py-2 hover:bg-gray-100">
<img :src="country.flag" :alt="country.name" class="w-5 h-5 mr-3 flex-shrink-0" src="https://flagcdn.com/dz.svg" alt="Algérie">
<span x-text="country.name">Algérie</span>
</div><div @click="selectCountry(country)" class="cursor-pointer flex items-center px-4 py-2 hover:bg-gray-100">
<img :src="country.flag" :alt="country.name" class="w-5 h-5 mr-3 flex-shrink-0" src="https://flagcdn.com/de.svg" alt="Allemagne">
<span x-text="country.name">Allemagne</span>
</div><div @click="selectCountry(country)" class="cursor-pointer flex items-center px-4 py-2 hover:bg-gray-100">
<img :src="country.flag" :alt="country.name" class="w-5 h-5 mr-3 flex-shrink-0" src="https://flagcdn.com/ad.svg" alt="Andorre">
<span x-text="country.name">Andorre</span>
</div><div @click="selectCountry(country)" class="cursor-pointer flex items-center px-4 py-2 hover:bg-gray-100">
<img :src="country.flag" :alt="country.name" class="w-5 h-5 mr-3 flex-shrink-0" src="https://flagcdn.com/ao.svg" alt="Angola">
<span x-text="country.name">Angola</span>
</div><div @click="selectCountry(country)" class="cursor-pointer flex items-center px-4 py-2 hover:bg-gray-100">
<img :src="country.flag" :alt="country.name" class="w-5 h-5 mr-3 flex-shrink-0" src="https://flagcdn.com/ag.svg" alt="Antigua-et-Barbuda">
<span x-text="country.name">Antigua-et-Barbuda</span>
</div><div @click="selectCountry(country)" class="cursor-pointer flex items-center px-4 py-2 hover:bg-gray-100">
<img :src="country.flag" :alt="country.name" class="w-5 h-5 mr-3 flex-shrink-0" src="https://flagcdn.com/sa.svg" alt="Arabie Saoudite">
<span x-text="country.name">Arabie Saoudite</span>
</div><div @click="selectCountry(country)" class="cursor-pointer flex items-center px-4 py-2 hover:bg-gray-100">
<img :src="country.flag" :alt="country.name" class="w-5 h-5 mr-3 flex-shrink-0" src="https://flagcdn.com/ar.svg" alt="Argentine">
<span x-text="country.name">Argentine</span>
</div><div @click="selectCountry(country)" class="cursor-pointer flex items-center px-4 py-2 hover:bg-gray-100">
<img :src="country.flag" :alt="country.name" class="w-5 h-5 mr-3 flex-shrink-0" src="https://flagcdn.com/am.svg" alt="Arménie">
<span x-text="country.name">Arménie</span>
</div><div @click="selectCountry(country)" class="cursor-pointer flex items-center px-4 py-2 hover:bg-gray-100">
<img :src="country.flag" :alt="country.name" class="w-5 h-5 mr-3 flex-shrink-0" src="https://flagcdn.com/au.svg" alt="Australie">
<span x-text="country.name">Australie</span>
</div><div @click="selectCountry(country)" class="cursor-pointer flex items-center px-4 py-2 hover:bg-gray-100">
<img :src="country.flag" :alt="country.name" class="w-5 h-5 mr-3 flex-shrink-0" src="https://flagcdn.com/at.svg" alt="Autriche">
<span x-text="country.name">Autriche</span>
</div><div @click="selectCountry(country)" class="cursor-pointer flex items-center px-4 py-2 hover:bg-gray-100">
<img :src="country.flag" :alt="country.name" class="w-5 h-5 mr-3 flex-shrink-0" src="https://flagcdn.com/az.svg" alt="Azerbaïdjan">
<span x-text="country.name">Azerbaïdjan</span>
</div><div @click="selectCountry(country)" class="cursor-pointer flex items-center px-4 py-2 hover:bg-gray-100">
<img :src="country.flag" :alt="country.name" class="w-5 h-5 mr-3 flex-shrink-0" src="https://flagcdn.com/bs.svg" alt="Bahamas">
<span x-text="country.name">Bahamas</span>
</div><div @click="selectCountry(country)" class="cursor-pointer flex items-center px-4 py-2 hover:bg-gray-100">
<img :src="country.flag" :alt="country.name" class="w-5 h-5 mr-3 flex-shrink-0" src="https://flagcdn.com/bh.svg" alt="Bahreïn">
<span x-text="country.name">Bahreïn</span>
</div><div @click="selectCountry(country)" class="cursor-pointer flex items-center px-4 py-2 hover:bg-gray-100">
<img :src="country.flag" :alt="country.name" class="w-5 h-5 mr-3 flex-shrink-0" src="https://flagcdn.com/bd.svg" alt="Bangladesh">
<span x-text="country.name">Bangladesh</span>
</div><div @click="selectCountry(country)" class="cursor-pointer flex items-center px-4 py-2 hover:bg-gray-100">
<img :src="country.flag" :alt="country.name" class="w-5 h-5 mr-3 flex-shrink-0" src="https://flagcdn.com/bb.svg" alt="Barbade">
<span x-text="country.name">Barbade</span>
</div><div @click="selectCountry(country)" class="cursor-pointer flex items-center px-4 py-2 hover:bg-gray-100">
<img :src="country.flag" :alt="country.name" class="w-5 h-5 mr-3 flex-shrink-0" src="https://flagcdn.com/be.svg" alt="Belgique">
<span x-text="country.name">Belgique</span>
</div><div @click="selectCountry(country)" class="cursor-pointer flex items-center px-4 py-2 hover:bg-gray-100">
<img :src="country.flag" :alt="country.name" class="w-5 h-5 mr-3 flex-shrink-0" src="https://flagcdn.com/bz.svg" alt="Belize">
<span x-text="country.name">Belize</span>
</div><div @click="selectCountry(country)" class="cursor-pointer flex items-center px-4 py-2 hover:bg-gray-100">
<img :src="country.flag" :alt="country.name" class="w-5 h-5 mr-3 flex-shrink-0" src="https://flagcdn.com/bj.svg" alt="Bénin">
<span x-text="country.name">Bénin</span>
</div><div @click="selectCountry(country)" class="cursor-pointer flex items-center px-4 py-2 hover:bg-gray-100">
<img :src="country.flag" :alt="country.name" class="w-5 h-5 mr-3 flex-shrink-0" src="https://flagcdn.com/bt.svg" alt="Bhoutan">
<span x-text="country.name">Bhoutan</span>
</div><div @click="selectCountry(country)" class="cursor-pointer flex items-center px-4 py-2 hover:bg-gray-100">
<img :src="country.flag" :alt="country.name" class="w-5 h-5 mr-3 flex-shrink-0" src="https://flagcdn.com/by.svg" alt="Biélorussie">
<span x-text="country.name">Biélorussie</span>
</div><div @click="selectCountry(country)" class="cursor-pointer flex items-center px-4 py-2 hover:bg-gray-100">
<img :src="country.flag" :alt="country.name" class="w-5 h-5 mr-3 flex-shrink-0" src="https://flagcdn.com/mm.svg" alt="Birmanie">
<span x-text="country.name">Birmanie</span>
</div><div @click="selectCountry(country)" class="cursor-pointer flex items-center px-4 py-2 hover:bg-gray-100">
<img :src="country.flag" :alt="country.name" class="w-5 h-5 mr-3 flex-shrink-0" src="https://flagcdn.com/bo.svg" alt="Bolivie">
<span x-text="country.name">Bolivie</span>
</div><div @click="selectCountry(country)" class="cursor-pointer flex items-center px-4 py-2 hover:bg-gray-100">
<img :src="country.flag" :alt="country.name" class="w-5 h-5 mr-3 flex-shrink-0" src="https://flagcdn.com/ba.svg" alt="Bosnie-Herzégovine">
<span x-text="country.name">Bosnie-Herzégovine</span>
</div><div @click="selectCountry(country)" class="cursor-pointer flex items-center px-4 py-2 hover:bg-gray-100">
<img :src="country.flag" :alt="country.name" class="w-5 h-5 mr-3 flex-shrink-0" src="https://flagcdn.com/bw.svg" alt="Botswana">
<span x-text="country.name">Botswana</span>
</div><div @click="selectCountry(country)" class="cursor-pointer flex items-center px-4 py-2 hover:bg-gray-100">
<img :src="country.flag" :alt="country.name" class="w-5 h-5 mr-3 flex-shrink-0" src="https://flagcdn.com/br.svg" alt="Brésil">
<span x-text="country.name">Brésil</span>
</div><div @click="selectCountry(country)" class="cursor-pointer flex items-center px-4 py-2 hover:bg-gray-100">
<img :src="country.flag" :alt="country.name" class="w-5 h-5 mr-3 flex-shrink-0" src="https://flagcdn.com/bn.svg" alt="Brunei">
<span x-text="country.name">Brunei</span>
</div><div @click="selectCountry(country)" class="cursor-pointer flex items-center px-4 py-2 hover:bg-gray-100">
<img :src="country.flag" :alt="country.name" class="w-5 h-5 mr-3 flex-shrink-0" src="https://flagcdn.com/bg.svg" alt="Bulgarie">
<span x-text="country.name">Bulgarie</span>
</div><div @click="selectCountry(country)" class="cursor-pointer flex items-center px-4 py-2 hover:bg-gray-100">
<img :src="country.flag" :alt="country.name" class="w-5 h-5 mr-3 flex-shrink-0" src="https://flagcdn.com/bf.svg" alt="Burkina Faso">
<span x-text="country.name">Burkina Faso</span>
</div><div @click="selectCountry(country)" class="cursor-pointer flex items-center px-4 py-2 hover:bg-gray-100">
<img :src="country.flag" :alt="country.name" class="w-5 h-5 mr-3 flex-shrink-0" src="https://flagcdn.com/bi.svg" alt="Burundi">
<span x-text="country.name">Burundi</span>
</div><div @click="selectCountry(country)" class="cursor-pointer flex items-center px-4 py-2 hover:bg-gray-100">
<img :src="country.flag" :alt="country.name" class="w-5 h-5 mr-3 flex-shrink-0" src="https://flagcdn.com/kh.svg" alt="Cambodge">
<span x-text="country.name">Cambodge</span>
</div><div @click="selectCountry(country)" class="cursor-pointer flex items-center px-4 py-2 hover:bg-gray-100">
<img :src="country.flag" :alt="country.name" class="w-5 h-5 mr-3 flex-shrink-0" src="https://flagcdn.com/cm.svg" alt="Cameroun">
<span x-text="country.name">Cameroun</span>
</div><div @click="selectCountry(country)" class="cursor-pointer flex items-center px-4 py-2 hover:bg-gray-100">
<img :src="country.flag" :alt="country.name" class="w-5 h-5 mr-3 flex-shrink-0" src="https://flagcdn.com/ca.svg" alt="Canada">
<span x-text="country.name">Canada</span>
</div><div @click="selectCountry(country)" class="cursor-pointer flex items-center px-4 py-2 hover:bg-gray-100">
<img :src="country.flag" :alt="country.name" class="w-5 h-5 mr-3 flex-shrink-0" src="https://flagcdn.com/cv.svg" alt="Cap-Vert">
<span x-text="country.name">Cap-Vert</span>
</div><div @click="selectCountry(country)" class="cursor-pointer flex items-center px-4 py-2 hover:bg-gray-100">
<img :src="country.flag" :alt="country.name" class="w-5 h-5 mr-3 flex-shrink-0" src="https://flagcdn.com/cl.svg" alt="Chili">
<span x-text="country.name">Chili</span>
</div><div @click="selectCountry(country)" class="cursor-pointer flex items-center px-4 py-2 hover:bg-gray-100">
<img :src="country.flag" :alt="country.name" class="w-5 h-5 mr-3 flex-shrink-0" src="https://flagcdn.com/cn.svg" alt="Chine">
<span x-text="country.name">Chine</span>
</div><div @click="selectCountry(country)" class="cursor-pointer flex items-center px-4 py-2 hover:bg-gray-100">
<img :src="country.flag" :alt="country.name" class="w-5 h-5 mr-3 flex-shrink-0" src="https://flagcdn.com/cy.svg" alt="Chypre">
<span x-text="country.name">Chypre</span>
</div><div @click="selectCountry(country)" class="cursor-pointer flex items-center px-4 py-2 hover:bg-gray-100">
<img :src="country.flag" :alt="country.name" class="w-5 h-5 mr-3 flex-shrink-0" src="https://flagcdn.com/co.svg" alt="Colombie">
<span x-text="country.name">Colombie</span>
</div><div @click="selectCountry(country)" class="cursor-pointer flex items-center px-4 py-2 hover:bg-gray-100">
<img :src="country.flag" :alt="country.name" class="w-5 h-5 mr-3 flex-shrink-0" src="https://flagcdn.com/km.svg" alt="Comores">
<span x-text="country.name">Comores</span>
</div><div @click="selectCountry(country)" class="cursor-pointer flex items-center px-4 py-2 hover:bg-gray-100">
<img :src="country.flag" :alt="country.name" class="w-5 h-5 mr-3 flex-shrink-0" src="https://flagcdn.com/cg.svg" alt="Congo (Brazzaville)">
<span x-text="country.name">Congo (Brazzaville)</span>
</div><div @click="selectCountry(country)" class="cursor-pointer flex items-center px-4 py-2 hover:bg-gray-100">
<img :src="country.flag" :alt="country.name" class="w-5 h-5 mr-3 flex-shrink-0" src="https://flagcdn.com/cd.svg" alt="Congo (Kinshasa)">
<span x-text="country.name">Congo (Kinshasa)</span>
</div><div @click="selectCountry(country)" class="cursor-pointer flex items-center px-4 py-2 hover:bg-gray-100">
<img :src="country.flag" :alt="country.name" class="w-5 h-5 mr-3 flex-shrink-0" src="https://flagcdn.com/kp.svg" alt="Corée du Nord">
<span x-text="country.name">Corée du Nord</span>
</div><div @click="selectCountry(country)" class="cursor-pointer flex items-center px-4 py-2 hover:bg-gray-100">
<img :src="country.flag" :alt="country.name" class="w-5 h-5 mr-3 flex-shrink-0" src="https://flagcdn.com/kr.svg" alt="Corée du Sud">
<span x-text="country.name">Corée du Sud</span>
</div><div @click="selectCountry(country)" class="cursor-pointer flex items-center px-4 py-2 hover:bg-gray-100">
<img :src="country.flag" :alt="country.name" class="w-5 h-5 mr-3 flex-shrink-0" src="https://flagcdn.com/cr.svg" alt="Costa Rica">
<span x-text="country.name">Costa Rica</span>
</div><div @click="selectCountry(country)" class="cursor-pointer flex items-center px-4 py-2 hover:bg-gray-100">
<img :src="country.flag" :alt="country.name" class="w-5 h-5 mr-3 flex-shrink-0" src="https://flagcdn.com/ci.svg" alt="Côte d’Ivoire">
<span x-text="country.name">Côte d’Ivoire</span>
</div><div @click="selectCountry(country)" class="cursor-pointer flex items-center px-4 py-2 hover:bg-gray-100">
<img :src="country.flag" :alt="country.name" class="w-5 h-5 mr-3 flex-shrink-0" src="https://flagcdn.com/hr.svg" alt="Croatie">
<span x-text="country.name">Croatie</span>
</div><div @click="selectCountry(country)" class="cursor-pointer flex items-center px-4 py-2 hover:bg-gray-100">
<img :src="country.flag" :alt="country.name" class="w-5 h-5 mr-3 flex-shrink-0" src="https://flagcdn.com/cu.svg" alt="Cuba">
<span x-text="country.name">Cuba</span>
</div><div @click="selectCountry(country)" class="cursor-pointer flex items-center px-4 py-2 hover:bg-gray-100">
<img :src="country.flag" :alt="country.name" class="w-5 h-5 mr-3 flex-shrink-0" src="https://flagcdn.com/dk.svg" alt="Danemark">
<span x-text="country.name">Danemark</span>
</div><div @click="selectCountry(country)" class="cursor-pointer flex items-center px-4 py-2 hover:bg-gray-100">
<img :src="country.flag" :alt="country.name" class="w-5 h-5 mr-3 flex-shrink-0" src="https://flagcdn.com/dj.svg" alt="Djibouti">
<span x-text="country.name">Djibouti</span>
</div><div @click="selectCountry(country)" class="cursor-pointer flex items-center px-4 py-2 hover:bg-gray-100">
<img :src="country.flag" :alt="country.name" class="w-5 h-5 mr-3 flex-shrink-0" src="https://flagcdn.com/dm.svg" alt="Dominique">
<span x-text="country.name">Dominique</span>
</div><div @click="selectCountry(country)" class="cursor-pointer flex items-center px-4 py-2 hover:bg-gray-100">
<img :src="country.flag" :alt="country.name" class="w-5 h-5 mr-3 flex-shrink-0" src="https://flagcdn.com/eg.svg" alt="Égypte">
<span x-text="country.name">Égypte</span>
</div><div @click="selectCountry(country)" class="cursor-pointer flex items-center px-4 py-2 hover:bg-gray-100">
<img :src="country.flag" :alt="country.name" class="w-5 h-5 mr-3 flex-shrink-0" src="https://flagcdn.com/ae.svg" alt="Émirats arabes unis">
<span x-text="country.name">Émirats arabes unis</span>
</div><div @click="selectCountry(country)" class="cursor-pointer flex items-center px-4 py-2 hover:bg-gray-100">
<img :src="country.flag" :alt="country.name" class="w-5 h-5 mr-3 flex-shrink-0" src="https://flagcdn.com/ec.svg" alt="Équateur">
<span x-text="country.name">Équateur</span>
</div><div @click="selectCountry(country)" class="cursor-pointer flex items-center px-4 py-2 hover:bg-gray-100">
<img :src="country.flag" :alt="country.name" class="w-5 h-5 mr-3 flex-shrink-0" src="https://flagcdn.com/er.svg" alt="Érythrée">
<span x-text="country.name">Érythrée</span>
</div><div @click="selectCountry(country)" class="cursor-pointer flex items-center px-4 py-2 hover:bg-gray-100">
<img :src="country.flag" :alt="country.name" class="w-5 h-5 mr-3 flex-shrink-0" src="https://flagcdn.com/es.svg" alt="Espagne">
<span x-text="country.name">Espagne</span>
</div><div @click="selectCountry(country)" class="cursor-pointer flex items-center px-4 py-2 hover:bg-gray-100">
<img :src="country.flag" :alt="country.name" class="w-5 h-5 mr-3 flex-shrink-0" src="https://flagcdn.com/ee.svg" alt="Estonie">
<span x-text="country.name">Estonie</span>
</div><div @click="selectCountry(country)" class="cursor-pointer flex items-center px-4 py-2 hover:bg-gray-100">
<img :src="country.flag" :alt="country.name" class="w-5 h-5 mr-3 flex-shrink-0" src="https://flagcdn.com/sz.svg" alt="Eswatini">
<span x-text="country.name">Eswatini</span>
</div><div @click="selectCountry(country)" class="cursor-pointer flex items-center px-4 py-2 hover:bg-gray-100">
<img :src="country.flag" :alt="country.name" class="w-5 h-5 mr-3 flex-shrink-0" src="https://flagcdn.com/us.svg" alt="États-Unis">
<span x-text="country.name">États-Unis</span>
</div><div @click="selectCountry(country)" class="cursor-pointer flex items-center px-4 py-2 hover:bg-gray-100">
<img :src="country.flag" :alt="country.name" class="w-5 h-5 mr-3 flex-shrink-0" src="https://flagcdn.com/et.svg" alt="Éthiopie">
<span x-text="country.name">Éthiopie</span>
</div><div @click="selectCountry(country)" class="cursor-pointer flex items-center px-4 py-2 hover:bg-gray-100">
<img :src="country.flag" :alt="country.name" class="w-5 h-5 mr-3 flex-shrink-0" src="https://flagcdn.com/fj.svg" alt="Fidji">
<span x-text="country.name">Fidji</span>
</div><div @click="selectCountry(country)" class="cursor-pointer flex items-center px-4 py-2 hover:bg-gray-100">
<img :src="country.flag" :alt="country.name" class="w-5 h-5 mr-3 flex-shrink-0" src="https://flagcdn.com/fi.svg" alt="Finlande">
<span x-text="country.name">Finlande</span>
</div><div @click="selectCountry(country)" class="cursor-pointer flex items-center px-4 py-2 hover:bg-gray-100">
<img :src="country.flag" :alt="country.name" class="w-5 h-5 mr-3 flex-shrink-0" src="https://flagcdn.com/fr.svg" alt="France">
<span x-text="country.name">France</span>
</div><div @click="selectCountry(country)" class="cursor-pointer flex items-center px-4 py-2 hover:bg-gray-100">
<img :src="country.flag" :alt="country.name" class="w-5 h-5 mr-3 flex-shrink-0" src="https://flagcdn.com/ga.svg" alt="Gabon">
<span x-text="country.name">Gabon</span>
</div><div @click="selectCountry(country)" class="cursor-pointer flex items-center px-4 py-2 hover:bg-gray-100">
<img :src="country.flag" :alt="country.name" class="w-5 h-5 mr-3 flex-shrink-0" src="https://flagcdn.com/gm.svg" alt="Gambie">
<span x-text="country.name">Gambie</span>
</div><div @click="selectCountry(country)" class="cursor-pointer flex items-center px-4 py-2 hover:bg-gray-100">
<img :src="country.flag" :alt="country.name" class="w-5 h-5 mr-3 flex-shrink-0" src="https://flagcdn.com/ge.svg" alt="Géorgie">
<span x-text="country.name">Géorgie</span>
</div><div @click="selectCountry(country)" class="cursor-pointer flex items-center px-4 py-2 hover:bg-gray-100">
<img :src="country.flag" :alt="country.name" class="w-5 h-5 mr-3 flex-shrink-0" src="https://flagcdn.com/gh.svg" alt="Ghana">
<span x-text="country.name">Ghana</span>
</div><div @click="selectCountry(country)" class="cursor-pointer flex items-center px-4 py-2 hover:bg-gray-100">
<img :src="country.flag" :alt="country.name" class="w-5 h-5 mr-3 flex-shrink-0" src="https://flagcdn.com/gr.svg" alt="Grèce">
<span x-text="country.name">Grèce</span>
</div><div @click="selectCountry(country)" class="cursor-pointer flex items-center px-4 py-2 hover:bg-gray-100">
<img :src="country.flag" :alt="country.name" class="w-5 h-5 mr-3 flex-shrink-0" src="https://flagcdn.com/gd.svg" alt="Grenade">
<span x-text="country.name">Grenade</span>
</div><div @click="selectCountry(country)" class="cursor-pointer flex items-center px-4 py-2 hover:bg-gray-100">
<img :src="country.flag" :alt="country.name" class="w-5 h-5 mr-3 flex-shrink-0" src="https://flagcdn.com/gt.svg" alt="Guatemala">
<span x-text="country.name">Guatemala</span>
</div><div @click="selectCountry(country)" class="cursor-pointer flex items-center px-4 py-2 hover:bg-gray-100">
<img :src="country.flag" :alt="country.name" class="w-5 h-5 mr-3 flex-shrink-0" src="https://flagcdn.com/gn.svg" alt="Guinée">
<span x-text="country.name">Guinée</span>
</div><div @click="selectCountry(country)" class="cursor-pointer flex items-center px-4 py-2 hover:bg-gray-100">
<img :src="country.flag" :alt="country.name" class="w-5 h-5 mr-3 flex-shrink-0" src="https://flagcdn.com/gw.svg" alt="Guinée-Bissau">
<span x-text="country.name">Guinée-Bissau</span>
</div><div @click="selectCountry(country)" class="cursor-pointer flex items-center px-4 py-2 hover:bg-gray-100">
<img :src="country.flag" :alt="country.name" class="w-5 h-5 mr-3 flex-shrink-0" src="https://flagcdn.com/gq.svg" alt="Guinée équatoriale">
<span x-text="country.name">Guinée équatoriale</span>
</div><div @click="selectCountry(country)" class="cursor-pointer flex items-center px-4 py-2 hover:bg-gray-100">
<img :src="country.flag" :alt="country.name" class="w-5 h-5 mr-3 flex-shrink-0" src="https://flagcdn.com/gy.svg" alt="Guyana">
<span x-text="country.name">Guyana</span>
</div><div @click="selectCountry(country)" class="cursor-pointer flex items-center px-4 py-2 hover:bg-gray-100">
<img :src="country.flag" :alt="country.name" class="w-5 h-5 mr-3 flex-shrink-0" src="https://flagcdn.com/ht.svg" alt="Haïti">
<span x-text="country.name">Haïti</span>
</div><div @click="selectCountry(country)" class="cursor-pointer flex items-center px-4 py-2 hover:bg-gray-100">
<img :src="country.flag" :alt="country.name" class="w-5 h-5 mr-3 flex-shrink-0" src="https://flagcdn.com/hn.svg" alt="Honduras">
<span x-text="country.name">Honduras</span>
</div><div @click="selectCountry(country)" class="cursor-pointer flex items-center px-4 py-2 hover:bg-gray-100">
<img :src="country.flag" :alt="country.name" class="w-5 h-5 mr-3 flex-shrink-0" src="https://flagcdn.com/hu.svg" alt="Hongrie">
<span x-text="country.name">Hongrie</span>
</div><div @click="selectCountry(country)" class="cursor-pointer flex items-center px-4 py-2 hover:bg-gray-100">
<img :src="country.flag" :alt="country.name" class="w-5 h-5 mr-3 flex-shrink-0" src="https://flagcdn.com/in.svg" alt="Inde">
<span x-text="country.name">Inde</span>
</div><div @click="selectCountry(country)" class="cursor-pointer flex items-center px-4 py-2 hover:bg-gray-100">
<img :src="country.flag" :alt="country.name" class="w-5 h-5 mr-3 flex-shrink-0" src="https://flagcdn.com/id.svg" alt="Indonésie">
<span x-text="country.name">Indonésie</span>
</div><div @click="selectCountry(country)" class="cursor-pointer flex items-center px-4 py-2 hover:bg-gray-100">
<img :src="country.flag" :alt="country.name" class="w-5 h-5 mr-3 flex-shrink-0" src="https://flagcdn.com/iq.svg" alt="Irak">
<span x-text="country.name">Irak</span>
</div><div @click="selectCountry(country)" class="cursor-pointer flex items-center px-4 py-2 hover:bg-gray-100">
<img :src="country.flag" :alt="country.name" class="w-5 h-5 mr-3 flex-shrink-0" src="https://flagcdn.com/ir.svg" alt="Iran">
<span x-text="country.name">Iran</span>
</div><div @click="selectCountry(country)" class="cursor-pointer flex items-center px-4 py-2 hover:bg-gray-100">
<img :src="country.flag" :alt="country.name" class="w-5 h-5 mr-3 flex-shrink-0" src="https://flagcdn.com/ie.svg" alt="Irlande">
<span x-text="country.name">Irlande</span>
</div><div @click="selectCountry(country)" class="cursor-pointer flex items-center px-4 py-2 hover:bg-gray-100">
<img :src="country.flag" :alt="country.name" class="w-5 h-5 mr-3 flex-shrink-0" src="https://flagcdn.com/is.svg" alt="Islande">
<span x-text="country.name">Islande</span>
</div><div @click="selectCountry(country)" class="cursor-pointer flex items-center px-4 py-2 hover:bg-gray-100">
<img :src="country.flag" :alt="country.name" class="w-5 h-5 mr-3 flex-shrink-0" src="https://flagcdn.com/il.svg" alt="Israël">
<span x-text="country.name">Israël</span>
</div><div @click="selectCountry(country)" class="cursor-pointer flex items-center px-4 py-2 hover:bg-gray-100">
<img :src="country.flag" :alt="country.name" class="w-5 h-5 mr-3 flex-shrink-0" src="https://flagcdn.com/it.svg" alt="Italie">
<span x-text="country.name">Italie</span>
</div><div @click="selectCountry(country)" class="cursor-pointer flex items-center px-4 py-2 hover:bg-gray-100">
<img :src="country.flag" :alt="country.name" class="w-5 h-5 mr-3 flex-shrink-0" src="https://flagcdn.com/jm.svg" alt="Jamaïque">
<span x-text="country.name">Jamaïque</span>
</div><div @click="selectCountry(country)" class="cursor-pointer flex items-center px-4 py-2 hover:bg-gray-100">
<img :src="country.flag" :alt="country.name" class="w-5 h-5 mr-3 flex-shrink-0" src="https://flagcdn.com/jp.svg" alt="Japon">
<span x-text="country.name">Japon</span>
</div><div @click="selectCountry(country)" class="cursor-pointer flex items-center px-4 py-2 hover:bg-gray-100">
<img :src="country.flag" :alt="country.name" class="w-5 h-5 mr-3 flex-shrink-0" src="https://flagcdn.com/jo.svg" alt="Jordanie">
<span x-text="country.name">Jordanie</span>
</div><div @click="selectCountry(country)" class="cursor-pointer flex items-center px-4 py-2 hover:bg-gray-100">
<img :src="country.flag" :alt="country.name" class="w-5 h-5 mr-3 flex-shrink-0" src="https://flagcdn.com/kz.svg" alt="Kazakhstan">
<span x-text="country.name">Kazakhstan</span>
</div><div @click="selectCountry(country)" class="cursor-pointer flex items-center px-4 py-2 hover:bg-gray-100">
<img :src="country.flag" :alt="country.name" class="w-5 h-5 mr-3 flex-shrink-0" src="https://flagcdn.com/ke.svg" alt="Kenya">
<span x-text="country.name">Kenya</span>
</div><div @click="selectCountry(country)" class="cursor-pointer flex items-center px-4 py-2 hover:bg-gray-100">
<img :src="country.flag" :alt="country.name" class="w-5 h-5 mr-3 flex-shrink-0" src="https://flagcdn.com/kg.svg" alt="Kirghizistan">
<span x-text="country.name">Kirghizistan</span>
</div><div @click="selectCountry(country)" class="cursor-pointer flex items-center px-4 py-2 hover:bg-gray-100">
<img :src="country.flag" :alt="country.name" class="w-5 h-5 mr-3 flex-shrink-0" src="https://flagcdn.com/ki.svg" alt="Kiribati">
<span x-text="country.name">Kiribati</span>
</div><div @click="selectCountry(country)" class="cursor-pointer flex items-center px-4 py-2 hover:bg-gray-100">
<img :src="country.flag" :alt="country.name" class="w-5 h-5 mr-3 flex-shrink-0" src="https://flagcdn.com/kw.svg" alt="Koweït">
<span x-text="country.name">Koweït</span>
</div><div @click="selectCountry(country)" class="cursor-pointer flex items-center px-4 py-2 hover:bg-gray-100">
<img :src="country.flag" :alt="country.name" class="w-5 h-5 mr-3 flex-shrink-0" src="https://flagcdn.com/la.svg" alt="Laos">
<span x-text="country.name">Laos</span>
</div><div @click="selectCountry(country)" class="cursor-pointer flex items-center px-4 py-2 hover:bg-gray-100">
<img :src="country.flag" :alt="country.name" class="w-5 h-5 mr-3 flex-shrink-0" src="https://flagcdn.com/ls.svg" alt="Lesotho">
<span x-text="country.name">Lesotho</span>
</div><div @click="selectCountry(country)" class="cursor-pointer flex items-center px-4 py-2 hover:bg-gray-100">
<img :src="country.flag" :alt="country.name" class="w-5 h-5 mr-3 flex-shrink-0" src="https://flagcdn.com/lv.svg" alt="Lettonie">
<span x-text="country.name">Lettonie</span>
</div><div @click="selectCountry(country)" class="cursor-pointer flex items-center px-4 py-2 hover:bg-gray-100">
<img :src="country.flag" :alt="country.name" class="w-5 h-5 mr-3 flex-shrink-0" src="https://flagcdn.com/lb.svg" alt="Liban">
<span x-text="country.name">Liban</span>
</div><div @click="selectCountry(country)" class="cursor-pointer flex items-center px-4 py-2 hover:bg-gray-100">
<img :src="country.flag" :alt="country.name" class="w-5 h-5 mr-3 flex-shrink-0" src="https://flagcdn.com/lr.svg" alt="Libéria">
<span x-text="country.name">Libéria</span>
</div><div @click="selectCountry(country)" class="cursor-pointer flex items-center px-4 py-2 hover:bg-gray-100">
<img :src="country.flag" :alt="country.name" class="w-5 h-5 mr-3 flex-shrink-0" src="https://flagcdn.com/ly.svg" alt="Libye">
<span x-text="country.name">Libye</span>
</div><div @click="selectCountry(country)" class="cursor-pointer flex items-center px-4 py-2 hover:bg-gray-100">
<img :src="country.flag" :alt="country.name" class="w-5 h-5 mr-3 flex-shrink-0" src="https://flagcdn.com/li.svg" alt="Liechtenstein">
<span x-text="country.name">Liechtenstein</span>
</div><div @click="selectCountry(country)" class="cursor-pointer flex items-center px-4 py-2 hover:bg-gray-100">
<img :src="country.flag" :alt="country.name" class="w-5 h-5 mr-3 flex-shrink-0" src="https://flagcdn.com/lt.svg" alt="Lituanie">
<span x-text="country.name">Lituanie</span>
</div><div @click="selectCountry(country)" class="cursor-pointer flex items-center px-4 py-2 hover:bg-gray-100">
<img :src="country.flag" :alt="country.name" class="w-5 h-5 mr-3 flex-shrink-0" src="https://flagcdn.com/lu.svg" alt="Luxembourg">
<span x-text="country.name">Luxembourg</span>
</div><div @click="selectCountry(country)" class="cursor-pointer flex items-center px-4 py-2 hover:bg-gray-100">
<img :src="country.flag" :alt="country.name" class="w-5 h-5 mr-3 flex-shrink-0" src="https://flagcdn.com/mk.svg" alt="Macédoine du Nord">
<span x-text="country.name">Macédoine du Nord</span>
</div><div @click="selectCountry(country)" class="cursor-pointer flex items-center px-4 py-2 hover:bg-gray-100">
<img :src="country.flag" :alt="country.name" class="w-5 h-5 mr-3 flex-shrink-0" src="https://flagcdn.com/mg.svg" alt="Madagascar">
<span x-text="country.name">Madagascar</span>
</div><div @click="selectCountry(country)" class="cursor-pointer flex items-center px-4 py-2 hover:bg-gray-100">
<img :src="country.flag" :alt="country.name" class="w-5 h-5 mr-3 flex-shrink-0" src="https://flagcdn.com/my.svg" alt="Malaisie">
<span x-text="country.name">Malaisie</span>
</div><div @click="selectCountry(country)" class="cursor-pointer flex items-center px-4 py-2 hover:bg-gray-100">
<img :src="country.flag" :alt="country.name" class="w-5 h-5 mr-3 flex-shrink-0" src="https://flagcdn.com/mw.svg" alt="Malawi">
<span x-text="country.name">Malawi</span>
</div><div @click="selectCountry(country)" class="cursor-pointer flex items-center px-4 py-2 hover:bg-gray-100">
<img :src="country.flag" :alt="country.name" class="w-5 h-5 mr-3 flex-shrink-0" src="https://flagcdn.com/mv.svg" alt="Maldives">
<span x-text="country.name">Maldives</span>
</div><div @click="selectCountry(country)" class="cursor-pointer flex items-center px-4 py-2 hover:bg-gray-100">
<img :src="country.flag" :alt="country.name" class="w-5 h-5 mr-3 flex-shrink-0" src="https://flagcdn.com/ml.svg" alt="Mali">
<span x-text="country.name">Mali</span>
</div><div @click="selectCountry(country)" class="cursor-pointer flex items-center px-4 py-2 hover:bg-gray-100">
<img :src="country.flag" :alt="country.name" class="w-5 h-5 mr-3 flex-shrink-0" src="https://flagcdn.com/mt.svg" alt="Malte">
<span x-text="country.name">Malte</span>
</div><div @click="selectCountry(country)" class="cursor-pointer flex items-center px-4 py-2 hover:bg-gray-100">
<img :src="country.flag" :alt="country.name" class="w-5 h-5 mr-3 flex-shrink-0" src="https://flagcdn.com/ma.svg" alt="Maroc">
<span x-text="country.name">Maroc</span>
</div><div @click="selectCountry(country)" class="cursor-pointer flex items-center px-4 py-2 hover:bg-gray-100">
<img :src="country.flag" :alt="country.name" class="w-5 h-5 mr-3 flex-shrink-0" src="https://flagcdn.com/mh.svg" alt="Marshall">
<span x-text="country.name">Marshall</span>
</div><div @click="selectCountry(country)" class="cursor-pointer flex items-center px-4 py-2 hover:bg-gray-100">
<img :src="country.flag" :alt="country.name" class="w-5 h-5 mr-3 flex-shrink-0" src="https://flagcdn.com/mu.svg" alt="Maurice">
<span x-text="country.name">Maurice</span>
</div><div @click="selectCountry(country)" class="cursor-pointer flex items-center px-4 py-2 hover:bg-gray-100">
<img :src="country.flag" :alt="country.name" class="w-5 h-5 mr-3 flex-shrink-0" src="https://flagcdn.com/mr.svg" alt="Mauritanie">
<span x-text="country.name">Mauritanie</span>
</div><div @click="selectCountry(country)" class="cursor-pointer flex items-center px-4 py-2 hover:bg-gray-100">
<img :src="country.flag" :alt="country.name" class="w-5 h-5 mr-3 flex-shrink-0" src="https://flagcdn.com/mx.svg" alt="Mexique">
<span x-text="country.name">Mexique</span>
</div><div @click="selectCountry(country)" class="cursor-pointer flex items-center px-4 py-2 hover:bg-gray-100">
<img :src="country.flag" :alt="country.name" class="w-5 h-5 mr-3 flex-shrink-0" src="https://flagcdn.com/fm.svg" alt="Micronésie">
<span x-text="country.name">Micronésie</span>
</div><div @click="selectCountry(country)" class="cursor-pointer flex items-center px-4 py-2 hover:bg-gray-100">
<img :src="country.flag" :alt="country.name" class="w-5 h-5 mr-3 flex-shrink-0" src="https://flagcdn.com/md.svg" alt="Moldavie">
<span x-text="country.name">Moldavie</span>
</div><div @click="selectCountry(country)" class="cursor-pointer flex items-center px-4 py-2 hover:bg-gray-100">
<img :src="country.flag" :alt="country.name" class="w-5 h-5 mr-3 flex-shrink-0" src="https://flagcdn.com/mc.svg" alt="Monaco">
<span x-text="country.name">Monaco</span>
</div><div @click="selectCountry(country)" class="cursor-pointer flex items-center px-4 py-2 hover:bg-gray-100">
<img :src="country.flag" :alt="country.name" class="w-5 h-5 mr-3 flex-shrink-0" src="https://flagcdn.com/mn.svg" alt="Mongolie">
<span x-text="country.name">Mongolie</span>
</div><div @click="selectCountry(country)" class="cursor-pointer flex items-center px-4 py-2 hover:bg-gray-100">
<img :src="country.flag" :alt="country.name" class="w-5 h-5 mr-3 flex-shrink-0" src="https://flagcdn.com/me.svg" alt="Monténégro">
<span x-text="country.name">Monténégro</span>
</div><div @click="selectCountry(country)" class="cursor-pointer flex items-center px-4 py-2 hover:bg-gray-100">
<img :src="country.flag" :alt="country.name" class="w-5 h-5 mr-3 flex-shrink-0" src="https://flagcdn.com/mz.svg" alt="Mozambique">
<span x-text="country.name">Mozambique</span>
</div><div @click="selectCountry(country)" class="cursor-pointer flex items-center px-4 py-2 hover:bg-gray-100">
<img :src="country.flag" :alt="country.name" class="w-5 h-5 mr-3 flex-shrink-0" src="https://flagcdn.com/na.svg" alt="Namibie">
<span x-text="country.name">Namibie</span>
</div><div @click="selectCountry(country)" class="cursor-pointer flex items-center px-4 py-2 hover:bg-gray-100">
<img :src="country.flag" :alt="country.name" class="w-5 h-5 mr-3 flex-shrink-0" src="https://flagcdn.com/nr.svg" alt="Nauru">
<span x-text="country.name">Nauru</span>
</div><div @click="selectCountry(country)" class="cursor-pointer flex items-center px-4 py-2 hover:bg-gray-100">
<img :src="country.flag" :alt="country.name" class="w-5 h-5 mr-3 flex-shrink-0" src="https://flagcdn.com/np.svg" alt="Népal">
<span x-text="country.name">Népal</span>
</div><div @click="selectCountry(country)" class="cursor-pointer flex items-center px-4 py-2 hover:bg-gray-100">
<img :src="country.flag" :alt="country.name" class="w-5 h-5 mr-3 flex-shrink-0" src="https://flagcdn.com/ni.svg" alt="Nicaragua">
<span x-text="country.name">Nicaragua</span>
</div><div @click="selectCountry(country)" class="cursor-pointer flex items-center px-4 py-2 hover:bg-gray-100">
<img :src="country.flag" :alt="country.name" class="w-5 h-5 mr-3 flex-shrink-0" src="https://flagcdn.com/ne.svg" alt="Niger">
<span x-text="country.name">Niger</span>
</div><div @click="selectCountry(country)" class="cursor-pointer flex items-center px-4 py-2 hover:bg-gray-100">
<img :src="country.flag" :alt="country.name" class="w-5 h-5 mr-3 flex-shrink-0" src="https://flagcdn.com/ng.svg" alt="Nigeria">
<span x-text="country.name">Nigeria</span>
</div><div @click="selectCountry(country)" class="cursor-pointer flex items-center px-4 py-2 hover:bg-gray-100">
<img :src="country.flag" :alt="country.name" class="w-5 h-5 mr-3 flex-shrink-0" src="https://flagcdn.com/nu.svg" alt="Niue">
<span x-text="country.name">Niue</span>
</div><div @click="selectCountry(country)" class="cursor-pointer flex items-center px-4 py-2 hover:bg-gray-100">
<img :src="country.flag" :alt="country.name" class="w-5 h-5 mr-3 flex-shrink-0" src="https://flagcdn.com/no.svg" alt="Norvège">
<span x-text="country.name">Norvège</span>
</div><div @click="selectCountry(country)" class="cursor-pointer flex items-center px-4 py-2 hover:bg-gray-100">
<img :src="country.flag" :alt="country.name" class="w-5 h-5 mr-3 flex-shrink-0" src="https://flagcdn.com/nz.svg" alt="Nouvelle-Zélande">
<span x-text="country.name">Nouvelle-Zélande</span>
</div><div @click="selectCountry(country)" class="cursor-pointer flex items-center px-4 py-2 hover:bg-gray-100">
<img :src="country.flag" :alt="country.name" class="w-5 h-5 mr-3 flex-shrink-0" src="https://flagcdn.com/om.svg" alt="Oman">
<span x-text="country.name">Oman</span>
</div><div @click="selectCountry(country)" class="cursor-pointer flex items-center px-4 py-2 hover:bg-gray-100">
<img :src="country.flag" :alt="country.name" class="w-5 h-5 mr-3 flex-shrink-0" src="https://flagcdn.com/ug.svg" alt="Ouganda">
<span x-text="country.name">Ouganda</span>
</div><div @click="selectCountry(country)" class="cursor-pointer flex items-center px-4 py-2 hover:bg-gray-100">
<img :src="country.flag" :alt="country.name" class="w-5 h-5 mr-3 flex-shrink-0" src="https://flagcdn.com/uz.svg" alt="Ouzbékistan">
<span x-text="country.name">Ouzbékistan</span>
</div><div @click="selectCountry(country)" class="cursor-pointer flex items-center px-4 py-2 hover:bg-gray-100">
<img :src="country.flag" :alt="country.name" class="w-5 h-5 mr-3 flex-shrink-0" src="https://flagcdn.com/pk.svg" alt="Pakistan">
<span x-text="country.name">Pakistan</span>
</div><div @click="selectCountry(country)" class="cursor-pointer flex items-center px-4 py-2 hover:bg-gray-100">
<img :src="country.flag" :alt="country.name" class="w-5 h-5 mr-3 flex-shrink-0" src="https://flagcdn.com/pw.svg" alt="Palaos">
<span x-text="country.name">Palaos</span>
</div><div @click="selectCountry(country)" class="cursor-pointer flex items-center px-4 py-2 hover:bg-gray-100">
<img :src="country.flag" :alt="country.name" class="w-5 h-5 mr-3 flex-shrink-0" src="https://flagcdn.com/ps.svg" alt="Palestine">
<span x-text="country.name">Palestine</span>
</div><div @click="selectCountry(country)" class="cursor-pointer flex items-center px-4 py-2 hover:bg-gray-100">
<img :src="country.flag" :alt="country.name" class="w-5 h-5 mr-3 flex-shrink-0" src="https://flagcdn.com/pa.svg" alt="Panama">
<span x-text="country.name">Panama</span>
</div><div @click="selectCountry(country)" class="cursor-pointer flex items-center px-4 py-2 hover:bg-gray-100">
<img :src="country.flag" :alt="country.name" class="w-5 h-5 mr-3 flex-shrink-0" src="https://flagcdn.com/pg.svg" alt="Papouasie-Nouvelle-Guinée">
<span x-text="country.name">Papouasie-Nouvelle-Guinée</span>
</div><div @click="selectCountry(country)" class="cursor-pointer flex items-center px-4 py-2 hover:bg-gray-100">
<img :src="country.flag" :alt="country.name" class="w-5 h-5 mr-3 flex-shrink-0" src="https://flagcdn.com/py.svg" alt="Paraguay">
<span x-text="country.name">Paraguay</span>
</div><div @click="selectCountry(country)" class="cursor-pointer flex items-center px-4 py-2 hover:bg-gray-100">
<img :src="country.flag" :alt="country.name" class="w-5 h-5 mr-3 flex-shrink-0" src="https://flagcdn.com/nl.svg" alt="Pays-Bas">
<span x-text="country.name">Pays-Bas</span>
</div><div @click="selectCountry(country)" class="cursor-pointer flex items-center px-4 py-2 hover:bg-gray-100">
<img :src="country.flag" :alt="country.name" class="w-5 h-5 mr-3 flex-shrink-0" src="https://flagcdn.com/pe.svg" alt="Pérou">
<span x-text="country.name">Pérou</span>
</div><div @click="selectCountry(country)" class="cursor-pointer flex items-center px-4 py-2 hover:bg-gray-100">
<img :src="country.flag" :alt="country.name" class="w-5 h-5 mr-3 flex-shrink-0" src="https://flagcdn.com/ph.svg" alt="Philippines">
<span x-text="country.name">Philippines</span>
</div><div @click="selectCountry(country)" class="cursor-pointer flex items-center px-4 py-2 hover:bg-gray-100">
<img :src="country.flag" :alt="country.name" class="w-5 h-5 mr-3 flex-shrink-0" src="https://flagcdn.com/pl.svg" alt="Pologne">
<span x-text="country.name">Pologne</span>
</div><div @click="selectCountry(country)" class="cursor-pointer flex items-center px-4 py-2 hover:bg-gray-100">
<img :src="country.flag" :alt="country.name" class="w-5 h-5 mr-3 flex-shrink-0" src="https://flagcdn.com/pt.svg" alt="Portugal">
<span x-text="country.name">Portugal</span>
</div><div @click="selectCountry(country)" class="cursor-pointer flex items-center px-4 py-2 hover:bg-gray-100">
<img :src="country.flag" :alt="country.name" class="w-5 h-5 mr-3 flex-shrink-0" src="https://flagcdn.com/qa.svg" alt="Qatar">
<span x-text="country.name">Qatar</span>
</div><div @click="selectCountry(country)" class="cursor-pointer flex items-center px-4 py-2 hover:bg-gray-100">
<img :src="country.flag" :alt="country.name" class="w-5 h-5 mr-3 flex-shrink-0" src="https://flagcdn.com/cf.svg" alt="République centrafricaine">
<span x-text="country.name">République centrafricaine</span>
</div><div @click="selectCountry(country)" class="cursor-pointer flex items-center px-4 py-2 hover:bg-gray-100">
<img :src="country.flag" :alt="country.name" class="w-5 h-5 mr-3 flex-shrink-0" src="https://flagcdn.com/cz.svg" alt="République tchèque">
<span x-text="country.name">République tchèque</span>
</div><div @click="selectCountry(country)" class="cursor-pointer flex items-center px-4 py-2 hover:bg-gray-100">
<img :src="country.flag" :alt="country.name" class="w-5 h-5 mr-3 flex-shrink-0" src="https://flagcdn.com/cd.svg" alt="République démocratique du Congo">
<span x-text="country.name">République démocratique du Congo</span>
</div><div @click="selectCountry(country)" class="cursor-pointer flex items-center px-4 py-2 hover:bg-gray-100">
<img :src="country.flag" :alt="country.name" class="w-5 h-5 mr-3 flex-shrink-0" src="https://flagcdn.com/ro.svg" alt="Roumanie">
<span x-text="country.name">Roumanie</span>
</div><div @click="selectCountry(country)" class="cursor-pointer flex items-center px-4 py-2 hover:bg-gray-100">
<img :src="country.flag" :alt="country.name" class="w-5 h-5 mr-3 flex-shrink-0" src="https://flagcdn.com/gb.svg" alt="Royaume-Uni">
<span x-text="country.name">Royaume-Uni</span>
</div><div @click="selectCountry(country)" class="cursor-pointer flex items-center px-4 py-2 hover:bg-gray-100">
<img :src="country.flag" :alt="country.name" class="w-5 h-5 mr-3 flex-shrink-0" src="https://flagcdn.com/ru.svg" alt="Russie">
<span x-text="country.name">Russie</span>
</div><div @click="selectCountry(country)" class="cursor-pointer flex items-center px-4 py-2 hover:bg-gray-100">
<img :src="country.flag" :alt="country.name" class="w-5 h-5 mr-3 flex-shrink-0" src="https://flagcdn.com/rw.svg" alt="Rwanda">
<span x-text="country.name">Rwanda</span>
</div><div @click="selectCountry(country)" class="cursor-pointer flex items-center px-4 py-2 hover:bg-gray-100">
<img :src="country.flag" :alt="country.name" class="w-5 h-5 mr-3 flex-shrink-0" src="https://flagcdn.com/kn.svg" alt="Saint-Christophe-et-Niévès">
<span x-text="country.name">Saint-Christophe-et-Niévès</span>
</div><div @click="selectCountry(country)" class="cursor-pointer flex items-center px-4 py-2 hover:bg-gray-100">
<img :src="country.flag" :alt="country.name" class="w-5 h-5 mr-3 flex-shrink-0" src="https://flagcdn.com/lc.svg" alt="Sainte-Lucie">
<span x-text="country.name">Sainte-Lucie</span>
</div><div @click="selectCountry(country)" class="cursor-pointer flex items-center px-4 py-2 hover:bg-gray-100">
<img :src="country.flag" :alt="country.name" class="w-5 h-5 mr-3 flex-shrink-0" src="https://flagcdn.com/sm.svg" alt="Saint-Marin">
<span x-text="country.name">Saint-Marin</span>
</div><div @click="selectCountry(country)" class="cursor-pointer flex items-center px-4 py-2 hover:bg-gray-100">
<img :src="country.flag" :alt="country.name" class="w-5 h-5 mr-3 flex-shrink-0" src="https://flagcdn.com/vc.svg" alt="Saint-Vincent-et-les Grenadines">
<span x-text="country.name">Saint-Vincent-et-les Grenadines</span>
</div><div @click="selectCountry(country)" class="cursor-pointer flex items-center px-4 py-2 hover:bg-gray-100">
<img :src="country.flag" :alt="country.name" class="w-5 h-5 mr-3 flex-shrink-0" src="https://flagcdn.com/sb.svg" alt="Salomon">
<span x-text="country.name">Salomon</span>
</div><div @click="selectCountry(country)" class="cursor-pointer flex items-center px-4 py-2 hover:bg-gray-100">
<img :src="country.flag" :alt="country.name" class="w-5 h-5 mr-3 flex-shrink-0" src="https://flagcdn.com/sv.svg" alt="Salvador">
<span x-text="country.name">Salvador</span>
</div><div @click="selectCountry(country)" class="cursor-pointer flex items-center px-4 py-2 hover:bg-gray-100">
<img :src="country.flag" :alt="country.name" class="w-5 h-5 mr-3 flex-shrink-0" src="https://flagcdn.com/ws.svg" alt="Samoa">
<span x-text="country.name">Samoa</span>
</div><div @click="selectCountry(country)" class="cursor-pointer flex items-center px-4 py-2 hover:bg-gray-100">
<img :src="country.flag" :alt="country.name" class="w-5 h-5 mr-3 flex-shrink-0" src="https://flagcdn.com/st.svg" alt="Sao Tomé-et-Principe">
<span x-text="country.name">Sao Tomé-et-Principe</span>
</div><div @click="selectCountry(country)" class="cursor-pointer flex items-center px-4 py-2 hover:bg-gray-100">
<img :src="country.flag" :alt="country.name" class="w-5 h-5 mr-3 flex-shrink-0" src="https://flagcdn.com/sn.svg" alt="Sénégal">
<span x-text="country.name">Sénégal</span>
</div><div @click="selectCountry(country)" class="cursor-pointer flex items-center px-4 py-2 hover:bg-gray-100">
<img :src="country.flag" :alt="country.name" class="w-5 h-5 mr-3 flex-shrink-0" src="https://flagcdn.com/rs.svg" alt="Serbie">
<span x-text="country.name">Serbie</span>
</div><div @click="selectCountry(country)" class="cursor-pointer flex items-center px-4 py-2 hover:bg-gray-100">
<img :src="country.flag" :alt="country.name" class="w-5 h-5 mr-3 flex-shrink-0" src="https://flagcdn.com/sc.svg" alt="Seychelles">
<span x-text="country.name">Seychelles</span>
</div><div @click="selectCountry(country)" class="cursor-pointer flex items-center px-4 py-2 hover:bg-gray-100">
<img :src="country.flag" :alt="country.name" class="w-5 h-5 mr-3 flex-shrink-0" src="https://flagcdn.com/sl.svg" alt="Sierra Leone">
<span x-text="country.name">Sierra Leone</span>
</div><div @click="selectCountry(country)" class="cursor-pointer flex items-center px-4 py-2 hover:bg-gray-100">
<img :src="country.flag" :alt="country.name" class="w-5 h-5 mr-3 flex-shrink-0" src="https://flagcdn.com/sg.svg" alt="Singapour">
<span x-text="country.name">Singapour</span>
</div><div @click="selectCountry(country)" class="cursor-pointer flex items-center px-4 py-2 hover:bg-gray-100">
<img :src="country.flag" :alt="country.name" class="w-5 h-5 mr-3 flex-shrink-0" src="https://flagcdn.com/sk.svg" alt="Slovaquie">
<span x-text="country.name">Slovaquie</span>
</div><div @click="selectCountry(country)" class="cursor-pointer flex items-center px-4 py-2 hover:bg-gray-100">
<img :src="country.flag" :alt="country.name" class="w-5 h-5 mr-3 flex-shrink-0" src="https://flagcdn.com/si.svg" alt="Slovénie">
<span x-text="country.name">Slovénie</span>
</div><div @click="selectCountry(country)" class="cursor-pointer flex items-center px-4 py-2 hover:bg-gray-100">
<img :src="country.flag" :alt="country.name" class="w-5 h-5 mr-3 flex-shrink-0" src="https://flagcdn.com/so.svg" alt="Somalie">
<span x-text="country.name">Somalie</span>
</div><div @click="selectCountry(country)" class="cursor-pointer flex items-center px-4 py-2 hover:bg-gray-100">
<img :src="country.flag" :alt="country.name" class="w-5 h-5 mr-3 flex-shrink-0" src="https://flagcdn.com/sd.svg" alt="Soudan">
<span x-text="country.name">Soudan</span>
</div><div @click="selectCountry(country)" class="cursor-pointer flex items-center px-4 py-2 hover:bg-gray-100">
<img :src="country.flag" :alt="country.name" class="w-5 h-5 mr-3 flex-shrink-0" src="https://flagcdn.com/ss.svg" alt="Soudan du Sud">
<span x-text="country.name">Soudan du Sud</span>
</div><div @click="selectCountry(country)" class="cursor-pointer flex items-center px-4 py-2 hover:bg-gray-100">
<img :src="country.flag" :alt="country.name" class="w-5 h-5 mr-3 flex-shrink-0" src="https://flagcdn.com/lk.svg" alt="Sri Lanka">
<span x-text="country.name">Sri Lanka</span>
</div><div @click="selectCountry(country)" class="cursor-pointer flex items-center px-4 py-2 hover:bg-gray-100">
<img :src="country.flag" :alt="country.name" class="w-5 h-5 mr-3 flex-shrink-0" src="https://flagcdn.com/se.svg" alt="Suède">
<span x-text="country.name">Suède</span>
</div><div @click="selectCountry(country)" class="cursor-pointer flex items-center px-4 py-2 hover:bg-gray-100">
<img :src="country.flag" :alt="country.name" class="w-5 h-5 mr-3 flex-shrink-0" src="https://flagcdn.com/ch.svg" alt="Suisse">
<span x-text="country.name">Suisse</span>
</div><div @click="selectCountry(country)" class="cursor-pointer flex items-center px-4 py-2 hover:bg-gray-100">
<img :src="country.flag" :alt="country.name" class="w-5 h-5 mr-3 flex-shrink-0" src="https://flagcdn.com/sr.svg" alt="Suriname">
<span x-text="country.name">Suriname</span>
</div><div @click="selectCountry(country)" class="cursor-pointer flex items-center px-4 py-2 hover:bg-gray-100">
<img :src="country.flag" :alt="country.name" class="w-5 h-5 mr-3 flex-shrink-0" src="https://flagcdn.com/sz.svg" alt="Swaziland">
<span x-text="country.name">Swaziland</span>
</div><div @click="selectCountry(country)" class="cursor-pointer flex items-center px-4 py-2 hover:bg-gray-100">
<img :src="country.flag" :alt="country.name" class="w-5 h-5 mr-3 flex-shrink-0" src="https://flagcdn.com/sy.svg" alt="Syrie">
<span x-text="country.name">Syrie</span>
</div><div @click="selectCountry(country)" class="cursor-pointer flex items-center px-4 py-2 hover:bg-gray-100">
<img :src="country.flag" :alt="country.name" class="w-5 h-5 mr-3 flex-shrink-0" src="https://flagcdn.com/tj.svg" alt="Tadjikistan">
<span x-text="country.name">Tadjikistan</span>
</div><div @click="selectCountry(country)" class="cursor-pointer flex items-center px-4 py-2 hover:bg-gray-100">
<img :src="country.flag" :alt="country.name" class="w-5 h-5 mr-3 flex-shrink-0" src="https://flagcdn.com/tw.svg" alt="Taïwan">
<span x-text="country.name">Taïwan</span>
</div><div @click="selectCountry(country)" class="cursor-pointer flex items-center px-4 py-2 hover:bg-gray-100">
<img :src="country.flag" :alt="country.name" class="w-5 h-5 mr-3 flex-shrink-0" src="https://flagcdn.com/tz.svg" alt="Tanzanie">
<span x-text="country.name">Tanzanie</span>
</div><div @click="selectCountry(country)" class="cursor-pointer flex items-center px-4 py-2 hover:bg-gray-100">
<img :src="country.flag" :alt="country.name" class="w-5 h-5 mr-3 flex-shrink-0" src="https://flagcdn.com/td.svg" alt="Tchad">
<span x-text="country.name">Tchad</span>
</div><div @click="selectCountry(country)" class="cursor-pointer flex items-center px-4 py-2 hover:bg-gray-100">
<img :src="country.flag" :alt="country.name" class="w-5 h-5 mr-3 flex-shrink-0" src="https://flagcdn.com/th.svg" alt="Thaïlande">
<span x-text="country.name">Thaïlande</span>
</div><div @click="selectCountry(country)" class="cursor-pointer flex items-center px-4 py-2 hover:bg-gray-100">
<img :src="country.flag" :alt="country.name" class="w-5 h-5 mr-3 flex-shrink-0" src="https://flagcdn.com/tl.svg" alt="Timor oriental">
<span x-text="country.name">Timor oriental</span>
</div><div @click="selectCountry(country)" class="cursor-pointer flex items-center px-4 py-2 hover:bg-gray-100">
<img :src="country.flag" :alt="country.name" class="w-5 h-5 mr-3 flex-shrink-0" src="https://flagcdn.com/tg.svg" alt="Togo">
<span x-text="country.name">Togo</span>
</div><div @click="selectCountry(country)" class="cursor-pointer flex items-center px-4 py-2 hover:bg-gray-100">
<img :src="country.flag" :alt="country.name" class="w-5 h-5 mr-3 flex-shrink-0" src="https://flagcdn.com/to.svg" alt="Tonga">
<span x-text="country.name">Tonga</span>
</div><div @click="selectCountry(country)" class="cursor-pointer flex items-center px-4 py-2 hover:bg-gray-100">
<img :src="country.flag" :alt="country.name" class="w-5 h-5 mr-3 flex-shrink-0" src="https://flagcdn.com/tt.svg" alt="Trinité-et-Tobago">
<span x-text="country.name">Trinité-et-Tobago</span>
</div><div @click="selectCountry(country)" class="cursor-pointer flex items-center px-4 py-2 hover:bg-gray-100">
<img :src="country.flag" :alt="country.name" class="w-5 h-5 mr-3 flex-shrink-0" src="https://flagcdn.com/tn.svg" alt="Tunisie">
<span x-text="country.name">Tunisie</span>
</div><div @click="selectCountry(country)" class="cursor-pointer flex items-center px-4 py-2 hover:bg-gray-100">
<img :src="country.flag" :alt="country.name" class="w-5 h-5 mr-3 flex-shrink-0" src="https://flagcdn.com/tm.svg" alt="Turkménistan">
<span x-text="country.name">Turkménistan</span>
</div><div @click="selectCountry(country)" class="cursor-pointer flex items-center px-4 py-2 hover:bg-gray-100">
<img :src="country.flag" :alt="country.name" class="w-5 h-5 mr-3 flex-shrink-0" src="https://flagcdn.com/tr.svg" alt="Turquie">
<span x-text="country.name">Turquie</span>
</div><div @click="selectCountry(country)" class="cursor-pointer flex items-center px-4 py-2 hover:bg-gray-100">
<img :src="country.flag" :alt="country.name" class="w-5 h-5 mr-3 flex-shrink-0" src="https://flagcdn.com/tv.svg" alt="Tuvalu">
<span x-text="country.name">Tuvalu</span>
</div><div @click="selectCountry(country)" class="cursor-pointer flex items-center px-4 py-2 hover:bg-gray-100">
<img :src="country.flag" :alt="country.name" class="w-5 h-5 mr-3 flex-shrink-0" src="https://flagcdn.com/ua.svg" alt="Ukraine">
<span x-text="country.name">Ukraine</span>
</div><div @click="selectCountry(country)" class="cursor-pointer flex items-center px-4 py-2 hover:bg-gray-100">
<img :src="country.flag" :alt="country.name" class="w-5 h-5 mr-3 flex-shrink-0" src="https://flagcdn.com/uy.svg" alt="Uruguay">
<span x-text="country.name">Uruguay</span>
</div><div @click="selectCountry(country)" class="cursor-pointer flex items-center px-4 py-2 hover:bg-gray-100">
<img :src="country.flag" :alt="country.name" class="w-5 h-5 mr-3 flex-shrink-0" src="https://flagcdn.com/vu.svg" alt="Vanuatu">
<span x-text="country.name">Vanuatu</span>
</div><div @click="selectCountry(country)" class="cursor-pointer flex items-center px-4 py-2 hover:bg-gray-100">
<img :src="country.flag" :alt="country.name" class="w-5 h-5 mr-3 flex-shrink-0" src="https://flagcdn.com/va.svg" alt="Vatican">
<span x-text="country.name">Vatican</span>
</div><div @click="selectCountry(country)" class="cursor-pointer flex items-center px-4 py-2 hover:bg-gray-100">
<img :src="country.flag" :alt="country.name" class="w-5 h-5 mr-3 flex-shrink-0" src="https://flagcdn.com/ve.svg" alt="Venezuela">
<span x-text="country.name">Venezuela</span>
</div><div @click="selectCountry(country)" class="cursor-pointer flex items-center px-4 py-2 hover:bg-gray-100">
<img :src="country.flag" :alt="country.name" class="w-5 h-5 mr-3 flex-shrink-0" src="https://flagcdn.com/vn.svg" alt="Viêt Nam">
<span x-text="country.name">Viêt Nam</span>
</div><div @click="selectCountry(country)" class="cursor-pointer flex items-center px-4 py-2 hover:bg-gray-100">
<img :src="country.flag" :alt="country.name" class="w-5 h-5 mr-3 flex-shrink-0" src="https://flagcdn.com/ye.svg" alt="Yémen">
<span x-text="country.name">Yémen</span>
</div><div @click="selectCountry(country)" class="cursor-pointer flex items-center px-4 py-2 hover:bg-gray-100">
<img :src="country.flag" :alt="country.name" class="w-5 h-5 mr-3 flex-shrink-0" src="https://flagcdn.com/zm.svg" alt="Zambie">
<span x-text="country.name">Zambie</span>
</div><div @click="selectCountry(country)" class="cursor-pointer flex items-center px-4 py-2 hover:bg-gray-100">
<img :src="country.flag" :alt="country.name" class="w-5 h-5 mr-3 flex-shrink-0" src="https://flagcdn.com/zw.svg" alt="Zimbabwe">
<span x-text="country.name">Zimbabwe</span>
</div>
<div x-show="filteredCountries.length === 0" class="px-4 py-2 text-gray-500" style="display: none;">
Aucun pays trouvé.
</div>
</div>
</div>
</div>
<!-- Script Alpine.js pour le Sélecteur de Pays -->
<script>
function countrySelector() {
return {
search: '',
open: false,
countries: [
{ name: 'Afghanistan', code: 'af', flag: 'https://flagcdn.com/af.svg' },
{ name: 'Afrique du Sud', code: 'za', flag: 'https://flagcdn.com/za.svg' },
{ name: 'Albanie', code: 'al', flag: 'https://flagcdn.com/al.svg' },
{ name: 'Algérie', code: 'dz', flag: 'https://flagcdn.com/dz.svg' },
{ name: 'Allemagne', code: 'de', flag: 'https://flagcdn.com/de.svg' },
{ name: 'Andorre', code: 'ad', flag: 'https://flagcdn.com/ad.svg' },
{ name: 'Angola', code: 'ao', flag: 'https://flagcdn.com/ao.svg' },
{ name: 'Antigua-et-Barbuda', code: 'ag', flag: 'https://flagcdn.com/ag.svg' },
{ name: 'Arabie Saoudite', code: 'sa', flag: 'https://flagcdn.com/sa.svg' },
{ name: 'Argentine', code: 'ar', flag: 'https://flagcdn.com/ar.svg' },
{ name: 'Arménie', code: 'am', flag: 'https://flagcdn.com/am.svg' },
{ name: 'Australie', code: 'au', flag: 'https://flagcdn.com/au.svg' },
{ name: 'Autriche', code: 'at', flag: 'https://flagcdn.com/at.svg' },
{ name: 'Azerbaïdjan', code: 'az', flag: 'https://flagcdn.com/az.svg' },
{ name: 'Bahamas', code: 'bs', flag: 'https://flagcdn.com/bs.svg' },
{ name: 'Bahreïn', code: 'bh', flag: 'https://flagcdn.com/bh.svg' },
{ name: 'Bangladesh', code: 'bd', flag: 'https://flagcdn.com/bd.svg' },
{ name: 'Barbade', code: 'bb', flag: 'https://flagcdn.com/bb.svg' },
{ name: 'Belgique', code: 'be', flag: 'https://flagcdn.com/be.svg' },
{ name: 'Belize', code: 'bz', flag: 'https://flagcdn.com/bz.svg' },
{ name: 'Bénin', code: 'bj', flag: 'https://flagcdn.com/bj.svg' },
{ name: 'Bhoutan', code: 'bt', flag: 'https://flagcdn.com/bt.svg' },
{ name: 'Biélorussie', code: 'by', flag: 'https://flagcdn.com/by.svg' },
{ name: 'Birmanie', code: 'mm', flag: 'https://flagcdn.com/mm.svg' },
{ name: 'Bolivie', code: 'bo', flag: 'https://flagcdn.com/bo.svg' },
{ name: 'Bosnie-Herzégovine', code: 'ba', flag: 'https://flagcdn.com/ba.svg' },
{ name: 'Botswana', code: 'bw', flag: 'https://flagcdn.com/bw.svg' },
{ name: 'Brésil', code: 'br', flag: 'https://flagcdn.com/br.svg' },
{ name: 'Brunei', code: 'bn', flag: 'https://flagcdn.com/bn.svg' },
{ name: 'Bulgarie', code: 'bg', flag: 'https://flagcdn.com/bg.svg' },
{ name: 'Burkina Faso', code: 'bf', flag: 'https://flagcdn.com/bf.svg' },
{ name: 'Burundi', code: 'bi', flag: 'https://flagcdn.com/bi.svg' },
{ name: 'Cambodge', code: 'kh', flag: 'https://flagcdn.com/kh.svg' },
{ name: 'Cameroun', code: 'cm', flag: 'https://flagcdn.com/cm.svg' },
{ name: 'Canada', code: 'ca', flag: 'https://flagcdn.com/ca.svg' },
{ name: 'Cap-Vert', code: 'cv', flag: 'https://flagcdn.com/cv.svg' },
{ name: 'Chili', code: 'cl', flag: 'https://flagcdn.com/cl.svg' },
{ name: 'Chine', code: 'cn', flag: 'https://flagcdn.com/cn.svg' },
{ name: 'Chypre', code: 'cy', flag: 'https://flagcdn.com/cy.svg' },
{ name: 'Colombie', code: 'co', flag: 'https://flagcdn.com/co.svg' },
{ name: 'Comores', code: 'km', flag: 'https://flagcdn.com/km.svg' },
{ name: 'Congo (Brazzaville)', code: 'cg', flag: 'https://flagcdn.com/cg.svg' },
{ name: 'Congo (Kinshasa)', code: 'cd', flag: 'https://flagcdn.com/cd.svg' },
{ name: 'Corée du Nord', code: 'kp', flag: 'https://flagcdn.com/kp.svg' },
{ name: 'Corée du Sud', code: 'kr', flag: 'https://flagcdn.com/kr.svg' },
{ name: 'Costa Rica', code: 'cr', flag: 'https://flagcdn.com/cr.svg' },
{ name: 'Côte d’Ivoire', code: 'ci', flag: 'https://flagcdn.com/ci.svg' },
{ name: 'Croatie', code: 'hr', flag: 'https://flagcdn.com/hr.svg' },
{ name: 'Cuba', code: 'cu', flag: 'https://flagcdn.com/cu.svg' },
{ name: 'Danemark', code: 'dk', flag: 'https://flagcdn.com/dk.svg' },
{ name: 'Djibouti', code: 'dj', flag: 'https://flagcdn.com/dj.svg' },
{ name: 'Dominique', code: 'dm', flag: 'https://flagcdn.com/dm.svg' },
{ name: 'Égypte', code: 'eg', flag: 'https://flagcdn.com/eg.svg' },
{ name: 'Émirats arabes unis', code: 'ae', flag: 'https://flagcdn.com/ae.svg' },
{ name: 'Équateur', code: 'ec', flag: 'https://flagcdn.com/ec.svg' },
{ name: 'Érythrée', code: 'er', flag: 'https://flagcdn.com/er.svg' },
{ name: 'Espagne', code: 'es', flag: 'https://flagcdn.com/es.svg' },
{ name: 'Estonie', code: 'ee', flag: 'https://flagcdn.com/ee.svg' },
{ name: 'Eswatini', code: 'sz', flag: 'https://flagcdn.com/sz.svg' },
{ name: 'États-Unis', code: 'us', flag: 'https://flagcdn.com/us.svg' },
{ name: 'Éthiopie', code: 'et', flag: 'https://flagcdn.com/et.svg' },
{ name: 'Fidji', code: 'fj', flag: 'https://flagcdn.com/fj.svg' },
{ name: 'Finlande', code: 'fi', flag: 'https://flagcdn.com/fi.svg' },
{ name: 'France', code: 'fr', flag: 'https://flagcdn.com/fr.svg' },
{ name: 'Gabon', code: 'ga', flag: 'https://flagcdn.com/ga.svg' },
{ name: 'Gambie', code: 'gm', flag: 'https://flagcdn.com/gm.svg' },
{ name: 'Géorgie', code: 'ge', flag: 'https://flagcdn.com/ge.svg' },
{ name: 'Ghana', code: 'gh', flag: 'https://flagcdn.com/gh.svg' },
{ name: 'Grèce', code: 'gr', flag: 'https://flagcdn.com/gr.svg' },
{ name: 'Grenade', code: 'gd', flag: 'https://flagcdn.com/gd.svg' },
{ name: 'Guatemala', code: 'gt', flag: 'https://flagcdn.com/gt.svg' },
{ name: 'Guinée', code: 'gn', flag: 'https://flagcdn.com/gn.svg' },
{ name: 'Guinée-Bissau', code: 'gw', flag: 'https://flagcdn.com/gw.svg' },
{ name: 'Guinée équatoriale', code: 'gq', flag: 'https://flagcdn.com/gq.svg' },
{ name: 'Guyana', code: 'gy', flag: 'https://flagcdn.com/gy.svg' },
{ name: 'Haïti', code: 'ht', flag: 'https://flagcdn.com/ht.svg' },
{ name: 'Honduras', code: 'hn', flag: 'https://flagcdn.com/hn.svg' },
{ name: 'Hongrie', code: 'hu', flag: 'https://flagcdn.com/hu.svg' },
{ name: 'Inde', code: 'in', flag: 'https://flagcdn.com/in.svg' },
{ name: 'Indonésie', code: 'id', flag: 'https://flagcdn.com/id.svg' },
{ name: 'Irak', code: 'iq', flag: 'https://flagcdn.com/iq.svg' },
{ name: 'Iran', code: 'ir', flag: 'https://flagcdn.com/ir.svg' },
{ name: 'Irlande', code: 'ie', flag: 'https://flagcdn.com/ie.svg' },
{ name: 'Islande', code: 'is', flag: 'https://flagcdn.com/is.svg' },
{ name: 'Israël', code: 'il', flag: 'https://flagcdn.com/il.svg' },
{ name: 'Italie', code: 'it', flag: 'https://flagcdn.com/it.svg' },
{ name: 'Jamaïque', code: 'jm', flag: 'https://flagcdn.com/jm.svg' },
{ name: 'Japon', code: 'jp', flag: 'https://flagcdn.com/jp.svg' },
{ name: 'Jordanie', code: 'jo', flag: 'https://flagcdn.com/jo.svg' },
{ name: 'Kazakhstan', code: 'kz', flag: 'https://flagcdn.com/kz.svg' },
{ name: 'Kenya', code: 'ke', flag: 'https://flagcdn.com/ke.svg' },
{ name: 'Kirghizistan', code: 'kg', flag: 'https://flagcdn.com/kg.svg' },
{ name: 'Kiribati', code: 'ki', flag: 'https://flagcdn.com/ki.svg' },
{ name: 'Koweït', code: 'kw', flag: 'https://flagcdn.com/kw.svg' },
{ name: 'Laos', code: 'la', flag: 'https://flagcdn.com/la.svg' },
{ name: 'Lesotho', code: 'ls', flag: 'https://flagcdn.com/ls.svg' },
{ name: 'Lettonie', code: 'lv', flag: 'https://flagcdn.com/lv.svg' },
{ name: 'Liban', code: 'lb', flag: 'https://flagcdn.com/lb.svg' },
{ name: 'Libéria', code: 'lr', flag: 'https://flagcdn.com/lr.svg' },
{ name: 'Libye', code: 'ly', flag: 'https://flagcdn.com/ly.svg' },
{ name: 'Liechtenstein', code: 'li', flag: 'https://flagcdn.com/li.svg' },
{ name: 'Lituanie', code: 'lt', flag: 'https://flagcdn.com/lt.svg' },
{ name: 'Luxembourg', code: 'lu', flag: 'https://flagcdn.com/lu.svg' },
{ name: 'Macédoine du Nord', code: 'mk', flag: 'https://flagcdn.com/mk.svg' },
{ name: 'Madagascar', code: 'mg', flag: 'https://flagcdn.com/mg.svg' },
{ name: 'Malaisie', code: 'my', flag: 'https://flagcdn.com/my.svg' },
{ name: 'Malawi', code: 'mw', flag: 'https://flagcdn.com/mw.svg' },
{ name: 'Maldives', code: 'mv', flag: 'https://flagcdn.com/mv.svg' },
{ name: 'Mali', code: 'ml', flag: 'https://flagcdn.com/ml.svg' },
{ name: 'Malte', code: 'mt', flag: 'https://flagcdn.com/mt.svg' },
{ name: 'Maroc', code: 'ma', flag: 'https://flagcdn.com/ma.svg' },
{ name: 'Marshall', code: 'mh', flag: 'https://flagcdn.com/mh.svg' },
{ name: 'Maurice', code: 'mu', flag: 'https://flagcdn.com/mu.svg' },
{ name: 'Mauritanie', code: 'mr', flag: 'https://flagcdn.com/mr.svg' },
{ name: 'Mexique', code: 'mx', flag: 'https://flagcdn.com/mx.svg' },
{ name: 'Micronésie', code: 'fm', flag: 'https://flagcdn.com/fm.svg' },
{ name: 'Moldavie', code: 'md', flag: 'https://flagcdn.com/md.svg' },
{ name: 'Monaco', code: 'mc', flag: 'https://flagcdn.com/mc.svg' },
{ name: 'Mongolie', code: 'mn', flag: 'https://flagcdn.com/mn.svg' },
{ name: 'Monténégro', code: 'me', flag: 'https://flagcdn.com/me.svg' },
{ name: 'Mozambique', code: 'mz', flag: 'https://flagcdn.com/mz.svg' },
{ name: 'Namibie', code: 'na', flag: 'https://flagcdn.com/na.svg' },
{ name: 'Nauru', code: 'nr', flag: 'https://flagcdn.com/nr.svg' },
{ name: 'Népal', code: 'np', flag: 'https://flagcdn.com/np.svg' },
{ name: 'Nicaragua', code: 'ni', flag: 'https://flagcdn.com/ni.svg' },
{ name: 'Niger', code: 'ne', flag: 'https://flagcdn.com/ne.svg' },
{ name: 'Nigeria', code: 'ng', flag: 'https://flagcdn.com/ng.svg' },
{ name: 'Niue', code: 'nu', flag: 'https://flagcdn.com/nu.svg' },
{ name: 'Norvège', code: 'no', flag: 'https://flagcdn.com/no.svg' },
{ name: 'Nouvelle-Zélande', code: 'nz', flag: 'https://flagcdn.com/nz.svg' },
{ name: 'Oman', code: 'om', flag: 'https://flagcdn.com/om.svg' },
{ name: 'Ouganda', code: 'ug', flag: 'https://flagcdn.com/ug.svg' },
{ name: 'Ouzbékistan', code: 'uz', flag: 'https://flagcdn.com/uz.svg' },
{ name: 'Pakistan', code: 'pk', flag: 'https://flagcdn.com/pk.svg' },
{ name: 'Palaos', code: 'pw', flag: 'https://flagcdn.com/pw.svg' },
{ name: 'Palestine', code: 'ps', flag: 'https://flagcdn.com/ps.svg' },
{ name: 'Panama', code: 'pa', flag: 'https://flagcdn.com/pa.svg' },
{ name: 'Papouasie-Nouvelle-Guinée', code: 'pg', flag: 'https://flagcdn.com/pg.svg' },
{ name: 'Paraguay', code: 'py', flag: 'https://flagcdn.com/py.svg' },
{ name: 'Pays-Bas', code: 'nl', flag: 'https://flagcdn.com/nl.svg' },
{ name: 'Pérou', code: 'pe', flag: 'https://flagcdn.com/pe.svg' },
{ name: 'Philippines', code: 'ph', flag: 'https://flagcdn.com/ph.svg' },
{ name: 'Pologne', code: 'pl', flag: 'https://flagcdn.com/pl.svg' },
{ name: 'Portugal', code: 'pt', flag: 'https://flagcdn.com/pt.svg' },
{ name: 'Qatar', code: 'qa', flag: 'https://flagcdn.com/qa.svg' },
{ name: 'République centrafricaine', code: 'cf', flag: 'https://flagcdn.com/cf.svg' },
{ name: 'République tchèque', code: 'cz', flag: 'https://flagcdn.com/cz.svg' },
{ name: 'République démocratique du Congo', code: 'cd', flag: 'https://flagcdn.com/cd.svg' },
{ name: 'Roumanie', code: 'ro', flag: 'https://flagcdn.com/ro.svg' },
{ name: 'Royaume-Uni', code: 'gb', flag: 'https://flagcdn.com/gb.svg' },
{ name: 'Russie', code: 'ru', flag: 'https://flagcdn.com/ru.svg' },
{ name: 'Rwanda', code: 'rw', flag: 'https://flagcdn.com/rw.svg' },
{ name: 'Saint-Christophe-et-Niévès', code: 'kn', flag: 'https://flagcdn.com/kn.svg' },
{ name: 'Sainte-Lucie', code: 'lc', flag: 'https://flagcdn.com/lc.svg' },
{ name: 'Saint-Marin', code: 'sm', flag: 'https://flagcdn.com/sm.svg' },
{ name: 'Saint-Vincent-et-les Grenadines', code: 'vc', flag: 'https://flagcdn.com/vc.svg' },
{ name: 'Salomon', code: 'sb', flag: 'https://flagcdn.com/sb.svg' },
{ name: 'Salvador', code: 'sv', flag: 'https://flagcdn.com/sv.svg' },
{ name: 'Samoa', code: 'ws', flag: 'https://flagcdn.com/ws.svg' },
{ name: 'Sao Tomé-et-Principe', code: 'st', flag: 'https://flagcdn.com/st.svg' },
{ name: 'Sénégal', code: 'sn', flag: 'https://flagcdn.com/sn.svg' },
{ name: 'Serbie', code: 'rs', flag: 'https://flagcdn.com/rs.svg' },
{ name: 'Seychelles', code: 'sc', flag: 'https://flagcdn.com/sc.svg' },
{ name: 'Sierra Leone', code: 'sl', flag: 'https://flagcdn.com/sl.svg' },
{ name: 'Singapour', code: 'sg', flag: 'https://flagcdn.com/sg.svg' },
{ name: 'Slovaquie', code: 'sk', flag: 'https://flagcdn.com/sk.svg' },
{ name: 'Slovénie', code: 'si', flag: 'https://flagcdn.com/si.svg' },
{ name: 'Somalie', code: 'so', flag: 'https://flagcdn.com/so.svg' },
{ name: 'Soudan', code: 'sd', flag: 'https://flagcdn.com/sd.svg' },
{ name: 'Soudan du Sud', code: 'ss', flag: 'https://flagcdn.com/ss.svg' },
{ name: 'Sri Lanka', code: 'lk', flag: 'https://flagcdn.com/lk.svg' },
{ name: 'Suède', code: 'se', flag: 'https://flagcdn.com/se.svg' },
{ name: 'Suisse', code: 'ch', flag: 'https://flagcdn.com/ch.svg' },
{ name: 'Suriname', code: 'sr', flag: 'https://flagcdn.com/sr.svg' },
{ name: 'Swaziland', code: 'sz', flag: 'https://flagcdn.com/sz.svg' },
{ name: 'Syrie', code: 'sy', flag: 'https://flagcdn.com/sy.svg' },
{ name: 'Tadjikistan', code: 'tj', flag: 'https://flagcdn.com/tj.svg' },
{ name: 'Taïwan', code: 'tw', flag: 'https://flagcdn.com/tw.svg' },
{ name: 'Tanzanie', code: 'tz', flag: 'https://flagcdn.com/tz.svg' },
{ name: 'Tchad', code: 'td', flag: 'https://flagcdn.com/td.svg' },
{ name: 'Thaïlande', code: 'th', flag: 'https://flagcdn.com/th.svg' },
{ name: 'Timor oriental', code: 'tl', flag: 'https://flagcdn.com/tl.svg' },
{ name: 'Togo', code: 'tg', flag: 'https://flagcdn.com/tg.svg' },
{ name: 'Tonga', code: 'to', flag: 'https://flagcdn.com/to.svg' },
{ name: 'Trinité-et-Tobago', code: 'tt', flag: 'https://flagcdn.com/tt.svg' },
{ name: 'Tunisie', code: 'tn', flag: 'https://flagcdn.com/tn.svg' },
{ name: 'Turkménistan', code: 'tm', flag: 'https://flagcdn.com/tm.svg' },
{ name: 'Turquie', code: 'tr', flag: 'https://flagcdn.com/tr.svg' },
{ name: 'Tuvalu', code: 'tv', flag: 'https://flagcdn.com/tv.svg' },
{ name: 'Ukraine', code: 'ua', flag: 'https://flagcdn.com/ua.svg' },
{ name: 'Uruguay', code: 'uy', flag: 'https://flagcdn.com/uy.svg' },
{ name: 'Vanuatu', code: 'vu', flag: 'https://flagcdn.com/vu.svg' },
{ name: 'Vatican', code: 'va', flag: 'https://flagcdn.com/va.svg' },
{ name: 'Venezuela', code: 've', flag: 'https://flagcdn.com/ve.svg' },
{ name: 'Viêt Nam', code: 'vn', flag: 'https://flagcdn.com/vn.svg' },
{ name: 'Yémen', code: 'ye', flag: 'https://flagcdn.com/ye.svg' },
{ name: 'Zambie', code: 'zm', flag: 'https://flagcdn.com/zm.svg' },
{ name: 'Zimbabwe', code: 'zw', flag: 'https://flagcdn.com/zw.svg' },
// Ajoutez ici tous les autres pays si nécessaire
],
get filteredCountries() {
if (this.search.trim() === '') {
return this.countries;
}
return this.countries.filter(country =>
country.name.toLowerCase().includes(this.search.toLowerCase())
);
},
selectCountry(country) {
this.search = country.name;
this.open = false;
// Vous pouvez également gérer le code du pays ou d'autres actions ici
}
}
}
</script>
<!-- Quantité / Unité -->
<div>
<label :for="'quantity_' + index" class="block text-sm font-medium text-gray-700" for="quantity_0">Quantité / Unité <span class="text-danger">*</span></label>
<div class="mt-1 relative">
<input type="number" :id="'quantity_' + index" name="product_references[][quantity]" x-model="reference.quantity" min="1" placeholder="Entrez la quantité" class="block w-full pl-10 pr-3 py-2 border border-gray-300 rounded-md focus:ring-primary focus:border-primary" id="quantity_0">
<div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
<i class="fas fa-sort-numeric-up-alt text-gray-400"></i>
</div>
</div>
</div>
<div>
<!-- Champ Unité -->
<div>
<label for="unite" class="block text-sm font-medium text-gray-700">
Unité <span class="text-red-500">*</span>
</label>
<div class="mt-1 relative">
<select id="unite" name="unite" class="block w-full pl-10 pr-3 py-2 border border-gray-300 bg-white rounded-md focus:outline-none focus:ring-primary focus:border-primary sm:text-sm">
<option value="">Sélectionnez une unité</option>
<option value="kg">Kilogramme (kg)</option>
<option value="g">Gramme (g)</option>
<option value="lb">Livre (lb)</option>
<option value="oz">Once (oz)</option>
<option value="l">Litre (l)</option>
<option value="ml">Millilitre (ml)</option>
<option value="m">Mètre (m)</option>
<option value="cm">Centimètre (cm)</option>
<option value="mm">Millimètre (mm)</option>
<option value="m²">Mètre carré (m²)</option>
<option value="m³">Mètre cube (m³)</option>
<option value="pcs">Pièces (pcs)</option>
<option value="doz">Douzaine (doz)</option>
<option value="pack">Pack</option>
<option value="box">Boîte (box)</option>
<option value="set">Ensemble (set)</option>
<option value="ft">Pied (ft)</option>
<option value="in">Pouce (in)</option>
<option value="yd">Yard (yd)</option>
<option value="mi">Mile (mi)</option>
<!-- Ajoutez d'autres unités si nécessaire -->
</select>
<div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
<i class="fas fa-ruler-combined text-gray-400"></i>
</div>
</div>
</div>
</div>
<!-- Prix d’achat -->
<div>
<label :for="'purchase_price_' + index" class="block text-sm font-medium text-gray-700" for="purchase_price_0">Prix d’achat (DA) <span class="text-danger">*</span></label>
<div class="mt-1 relative">
<input type="number" :id="'purchase_price_' + index" name="product_references[][purchase_price]" x-model="reference.purchase_price" placeholder="Prix d’achat" class="block w-full pl-10 pr-3 py-2 border border-gray-300 rounded-md focus:ring-primary focus:border-primary" id="purchase_price_0">
<div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
<i class="fas fa-money-bill-alt text-gray-400"></i>
</div>
</div>
</div>
<!-- Prix de vente -->
<div>
<label :for="'sale_price_' + index" class="block text-sm font-medium text-gray-700" for="sale_price_0">Prix de vente (DA) <span class="text-danger">*</span></label>
<div class="mt-1 relative">
<input type="number" :id="'sale_price_' + index" name="product_references[][sale_price]" x-model="reference.sale_price" placeholder="Prix de vente" class="block w-full pl-10 pr-3 py-2 border border-gray-300 rounded-md focus:ring-primary focus:border-primary" id="sale_price_0">
<div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
<i class="fas fa-tags text-gray-400"></i>
</div>
</div>
</div>
<!-- Emplacement en Stock -->
<div x-data="autocomplete(["test"])" class="mb-4">
<label for="stock_location" class="block text-sm font-medium text-gray-700">
Emplacement en Stock <span class="text-danger">*</span>
</label>
<div class="mt-1 relative">
<input type="text" id="stock_location" name="stock_location" x-model="query" @input="filterEmplacements" @keydown.down.prevent="highlightNext" @keydown.up.prevent="highlightPrevious" @keydown.enter.prevent="selectEmplacement" placeholder="Emplacement en stock" class="block w-full pl-10 pr-3 py-2 border border-gray-300 rounded-md focus:ring-primary focus:border-primary" autocomplete="off">
<div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
<i class="fas fa-map-marker-alt text-gray-400"></i>
</div>
<!-- Liste des suggestions -->
<ul x-show="filteredEmplacements.length > 0" class="absolute z-10 w-full bg-white border border-gray-300 mt-1 rounded-md max-h-60 overflow-auto" style="display: none;">
<template x-for="(emplacement, idx) in filteredEmplacements" :key="emplacement">
<li class="px-4 py-2 cursor-pointer hover:bg-gray-200" :class="{'bg-gray-200': idx === highlightedIndex}" @click="selectEmplacement(emplacement)" @mouseover="highlightedIndex = idx">
<span x-text="emplacement"></span>
</li>
</template>
</ul>
</div>
</div>
<!-- Définir la fonction autocomplete -->
<script>
function autocomplete(emplacements) {
return {
query: '',
filteredEmplacements: [],
highlightedIndex: 0,
filterEmplacements() {
if (this.query.length === 0) {
this.filteredEmplacements = [];
return;
}
const queryLower = this.query.toLowerCase();
this.filteredEmplacements = emplacements.filter(emplacement => emplacement.toLowerCase().includes(queryLower));
},
highlightNext() {
if (this.highlightedIndex < this.filteredEmplacements.length - 1) {
this.highlightedIndex++;
}
},
highlightPrevious() {
if (this.highlightedIndex > 0) {
this.highlightedIndex--;
}
},
selectEmplacement(emplacement = null) {
if (emplacement) {
this.query = emplacement;
} else if (this.filteredEmplacements.length > 0) {
this.query = this.filteredEmplacements[this.highlightedIndex];
}
this.filteredEmplacements = [];
}
}
}
</script>
<!-- Fournisseur -->
<div x-data="fournisseurSelector()">
<!-- Champ Fournisseur -->
<div>
<label for="fournisseur" class="block text-sm font-medium text-gray-700">
Fournisseur <span class="text-red-500">*</span>
</label>
<div class="mt-1 relative">
<input type="text" id="fournisseur" name="fournisseur" placeholder="Sélectionnez un fournisseur" x-model="search" @focus="open = true" @click.away="open = false" class="block w-full pl-10 pr-3 py-2 border border-gray-300 rounded-md focus:ring-primary focus:border-primary">
<div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
<i class="fas fa-user-tie text-gray-400"></i>
</div>
<!-- Dropdown des suggestions -->
<div x-show="open" x-transition="" class="absolute mt-1 w-full bg-white shadow-lg max-h-60 rounded-md py-1 text-base ring-1 ring-black ring-opacity-5 overflow-auto z-10" style="display: none;">
<template x-for="(fournisseur, index) in filteredFournisseurs" :key="index">
<div @click="selectFournisseur(fournisseur)" class="cursor-pointer flex items-center px-4 py-2 hover:bg-gray-100">
<i class="fas fa-user-tie mr-3 text-gray-400"></i>
<span x-text="fournisseur"></span>
</div>
</template><div @click="selectFournisseur(fournisseur)" class="cursor-pointer flex items-center px-4 py-2 hover:bg-gray-100">
<i class="fas fa-user-tie mr-3 text-gray-400"></i>
<span x-text="fournisseur">fournisseur 1</span>
</div>
<div x-show="filteredFournisseurs.length === 0" class="px-4 py-2 text-gray-500" style="display: none;">
Aucun fournisseur trouvé.
</div>
</div>
</div>
</div>
</div>
<!-- Script Alpine.js pour le Sélecteur de Fournisseur -->
<script>
function fournisseurSelector() {
return {
search: '',
open: false,
// Convertir la collection Laravel en un tableau JavaScript
fournisseurs: ["fournisseur 1"],
get filteredFournisseurs() {
if (this.search.trim() === '') {
return this.fournisseurs;
}
return this.fournisseurs.filter(fournisseur =>
fournisseur.toLowerCase().includes(this.search.toLowerCase())
);
},
selectFournisseur(fournisseur) {
this.search = fournisseur;
this.open = false;
}
}
}
</script>
<!-- Nouveau champ : Code Interne avec Code-Barres -->
<!-- Code Interne avec Code-Barres et Texte Sous-Jacent -->
<div>
<label :for="'internal_code_' + index" class="block text-sm font-medium text-gray-700" for="internal_code_0">
Code Interne <span class="text-danger">*</span>
</label>
<div class="mt-1 relative">
<input type="text" :id="'internal_code_' + index" name="product_references[][internal_code]" x-model="reference.internal_code" placeholder="Code interne" class="block w-full pl-10 pr-3 py-2 border border-gray-300 rounded-md bg-gray-100 cursor-not-allowed" readonly="" id="internal_code_0">
<div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
<i class="fas fa-key text-gray-400"></i>
</div>
</div>
<!-- Emplacement pour le Code-Barres -->
<div class="mt-2 flex flex-col items-center">
<svg :id="'barcode_' + index" id="barcode_0" width="266px" height="60px" x="0px" y="0px" viewBox="0 0 266 60" xmlns="http://www.w3.org/2000/svg" version="1.1" style="transform: translate(0,0)"><rect x="0" y="0" width="266" height="60" style="fill:#ffffff;"></rect><g transform="translate(10, 10)" style="fill:#000;"><rect x="0" y="0" width="4" height="40"></rect><rect x="6" y="0" width="2" height="40"></rect><rect x="12" y="0" width="2" height="40"></rect><rect x="22" y="0" width="2" height="40"></rect><rect x="30" y="0" width="2" height="40"></rect><rect x="38" y="0" width="4" height="40"></rect><rect x="44" y="0" width="4" height="40"></rect><rect x="54" y="0" width="2" height="40"></rect><rect x="58" y="0" width="2" height="40"></rect><rect x="66" y="0" width="2" height="40"></rect><rect x="74" y="0" width="6" height="40"></rect><rect x="82" y="0" width="4" height="40"></rect><rect x="88" y="0" width="6" height="40"></rect><rect x="96" y="0" width="2" height="40"></rect><rect x="100" y="0" width="4" height="40"></rect><rect x="110" y="0" width="4" height="40"></rect><rect x="118" y="0" width="6" height="40"></rect><rect x="126" y="0" width="2" height="40"></rect><rect x="132" y="0" width="2" height="40"></rect><rect x="140" y="0" width="4" height="40"></rect><rect x="146" y="0" width="6" height="40"></rect><rect x="154" y="0" width="6" height="40"></rect><rect x="162" y="0" width="2" height="40"></rect><rect x="170" y="0" width="4" height="40"></rect><rect x="176" y="0" width="6" height="40"></rect><rect x="184" y="0" width="2" height="40"></rect><rect x="192" y="0" width="4" height="40"></rect><rect x="198" y="0" width="6" height="40"></rect><rect x="206" y="0" width="2" height="40"></rect><rect x="212" y="0" width="4" height="40"></rect><rect x="220" y="0" width="4" height="40"></rect><rect x="230" y="0" width="6" height="40"></rect><rect x="238" y="0" width="2" height="40"></rect><rect x="242" y="0" width="4" height="40"></rect></g></svg>
<!-- Texte du Code Interne sous le Code-Barres -->
<p class="mt-1 text-sm text-gray-600" x-text="reference.internal_code">CHOV6LWW</p>
</div>
</div>
<!-- Photo du Produit -->
<div>
<label :for="'product_image_' + index" class="block text-sm font-medium text-gray-700" for="product_image_0">Photo du Produit</label>
<div class="mt-1 relative">
<input type="file" :id="'product_image_' + index" name="product_references[][product_image]" accept="image/*,video/*" class="block w-full pl-10 pr-3 py-2 border border-gray-300 rounded-md focus:ring-primary focus:border-primary" id="product_image_0">
<div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
<i class="fas fa-file-upload text-gray-400"></i>
</div>
</div>
<p class="mt-2 text-sm text-gray-500">Formats acceptés : JPG, PNG, MP4, etc.</p>
</div>
</div>
</div>
<!-- Bouton Ajouter une Référence de Produit -->
<button type="button" @click="addReference" class="inline-flex items-center px-4 py-2 bg-blue-600 text-white text-sm font-medium rounded-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 transition">
<i class="fas fa-plus mr-2"></i> Ajouter une Référence de Produit
</button>
</div>
<!-- Section Références OE et Marques OE -->
<div x-data="oeReferences()" class="max-w-7xl mx-auto p-6 bg-white shadow-md rounded-lg mt-8">
<h2 class="text-2xl font-semibold text-gray-700 mb-4">Références OE</h2>
<template x-for="(reference, index) in references" :key="reference.id">
<div class="border border-gray-300 rounded-md p-4 mb-4 relative">
<!-- Bouton de suppression -->
<button type="button" @click="removeReference(index)" class="absolute top-2 right-2 text-red-500 hover:text-red-700">
<i class="fas fa-times-circle fa-lg"></i>
</button>
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
<!-- Référence OE -->
<div>
<label :for="'oe_reference_' + index" class="block text-sm font-medium text-gray-700">Référence OE <span class="text-danger">*</span></label>
<div class="mt-1 relative">
<input :id="'oe_reference_' + index" type="text" name="oe_references[]" x-model="reference.oe_reference" placeholder="Entrer la référence OE" class="block w-full pl-10 pr-3 py-2 border border-gray-300 rounded-md focus:ring-primary focus:border-primary" required="">
<div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
<i class="fas fa-id-card text-gray-400"></i>
</div>
</div>
<p class="mt-2 text-sm text-gray-500">Entrez la référence OE du produit.</p>
</div>
<!-- Marque OE -->
<div x-data="vehicleBrandMultiSelector([{"id":1,"name":"Alpine","logo":"https:\/\/www.cars-data.com\/design\/images\/cars-logo\/alpine-logo-small.jpg"},{"id":2,"name":"Toyota","logo":"https:\/\/www.cars-data.com\/design\/images\/cars-logo\/toyota-logo-small.jpg"},{"id":3,"name":"Volkswagen","logo":"https:\/\/www.cars-data.com\/design\/images\/cars-logo\/volkswagen-logo-small.jpg"},{"id":4,"name":"Ford","logo":"https:\/\/www.cars-data.com\/design\/images\/cars-logo\/ford-logo-small.jpg"},{"id":5,"name":"Honda","logo":"https:\/\/www.cars-data.com\/design\/images\/cars-logo\/honda-logo-small.jpg"},{"id":6,"name":"Chevrolet","logo":"https:\/\/www.cars-data.com\/design\/images\/cars-logo\/chevrolet-logo-small.jpg"},{"id":7,"name":"Mercedes-Benz","logo":"https:\/\/www.cars-data.com\/design\/images\/cars-logo\/mercedes-benz-logo-small.jpg"},{"id":8,"name":"BMW","logo":"https:\/\/www.cars-data.com\/design\/images\/cars-logo\/bmw-logo-small.jpg"},{"id":9,"name":"Audi","logo":"https:\/\/www.cars-data.com\/design\/images\/cars-logo\/audi-logo-small.jpg"},{"id":10,"name":"Nissan","logo":"https:\/\/www.cars-data.com\/design\/images\/cars-logo\/nissan-logo-small.jpg"},{"id":11,"name":"Hyundai","logo":"https:\/\/www.cars-data.com\/design\/images\/cars-logo\/hyundai-logo-small.jpg"},{"id":12,"name":"Kia","logo":"https:\/\/www.cars-data.com\/design\/images\/cars-logo\/kia-logo-small.jpg"},{"id":13,"name":"Subaru","logo":"https:\/\/www.cars-data.com\/design\/images\/cars-logo\/subaru-logo-small.jpg"},{"id":14,"name":"Mazda","logo":"https:\/\/www.cars-data.com\/design\/images\/cars-logo\/mazda-logo-small.jpg"},{"id":15,"name":"Lexus","logo":"https:\/\/www.cars-data.com\/design\/images\/cars-logo\/lexus-logo-small.jpg"},{"id":16,"name":"Tesla","logo":"https:\/\/www.cars-data.com\/design\/images\/cars-logo\/tesla-logo-small.jpg"},{"id":17,"name":"Volvo","logo":"https:\/\/www.cars-data.com\/design\/images\/cars-logo\/volvo-logo-small.jpg"},{"id":18,"name":"Jaguar","logo":"https:\/\/www.cars-data.com\/design\/images\/cars-logo\/jaguar-logo-small.jpg"},{"id":19,"name":"Porsche","logo":"https:\/\/www.cars-data.com\/design\/images\/cars-logo\/porsche-logo-small.jpg"},{"id":20,"name":"Ferrari","logo":"https:\/\/www.cars-data.com\/design\/images\/cars-logo\/ferrari-logo-small.jpg"},{"id":21,"name":"Lamborghini","logo":"https:\/\/www.cars-data.com\/design\/images\/cars-logo\/lamborghini-logo-small.jpg"},{"id":22,"name":"Mitsubishi","logo":"https:\/\/www.cars-data.com\/design\/images\/cars-logo\/mitsubishi-logo-small.jpg"},{"id":23,"name":"Renault","logo":"https:\/\/www.cars-data.com\/design\/images\/cars-logo\/renault-logo-small.jpg"},{"id":24,"name":"Peugeot","logo":"https:\/\/www.cars-data.com\/design\/images\/cars-logo\/peugeot-logo-small.jpg"},{"id":25,"name":"Citro\u00ebn","logo":"https:\/\/www.cars-data.com\/design\/images\/cars-logo\/citroen-logo-small.jpg"},{"id":26,"name":"Fiat","logo":"https:\/\/www.cars-data.com\/design\/images\/cars-logo\/fiat-logo-small.jpg"},{"id":27,"name":"Seat","logo":"https:\/\/www.cars-data.com\/design\/images\/cars-logo\/seat-logo-small.jpg"},{"id":28,"name":"Skoda","logo":"https:\/\/www.cars-data.com\/design\/images\/cars-logo\/skoda-logo-small.jpg"},{"id":29,"name":"Suzuki","logo":"https:\/\/www.cars-data.com\/design\/images\/cars-logo\/suzuki-logo-small.jpg"},{"id":30,"name":"Dodge","logo":"https:\/\/www.cars-data.com\/design\/images\/cars-logo\/dodge-logo-small.jpg"},{"id":31,"name":"Jeep","logo":"https:\/\/www.cars-data.com\/design\/images\/cars-logo\/jeep-logo-small.jpg"},{"id":32,"name":"Cadillac","logo":"https:\/\/www.cars-data.com\/design\/images\/cars-logo\/cadillac-logo-small.jpg"},{"id":33,"name":"Buick","logo":"https:\/\/www.cars-data.com\/design\/images\/cars-logo\/buick-logo-small.jpg"},{"id":34,"name":"Chrysler","logo":"https:\/\/www.cars-data.com\/design\/images\/cars-logo\/chrysler-logo-small.jpg"},{"id":35,"name":"Acura","logo":"https:\/\/www.cars-data.com\/design\/images\/cars-logo\/acura-logo-small.jpg"},{"id":36,"name":"Infiniti","logo":"https:\/\/www.cars-data.com\/design\/images\/cars-logo\/infiniti-logo-small.jpg"},{"id":37,"name":"Genesis","logo":"https:\/\/www.cars-data.com\/design\/images\/cars-logo\/genesis-logo-small.jpg"},{"id":38,"name":"Lincoln","logo":"https:\/\/www.cars-data.com\/design\/images\/cars-logo\/lincoln-logo-small.jpg"},{"id":39,"name":"Mini","logo":"https:\/\/www.cars-data.com\/design\/images\/cars-logo\/mini-logo-small.jpg"},{"id":40,"name":"Smart","logo":"https:\/\/www.cars-data.com\/design\/images\/cars-logo\/smart-logo-small.jpg"},{"id":41,"name":"Maserati","logo":"https:\/\/www.cars-data.com\/design\/images\/cars-logo\/maserati-logo-small.jpg"},{"id":42,"name":"Bentley","logo":"https:\/\/www.cars-data.com\/design\/images\/cars-logo\/bentley-logo-small.jpg"},{"id":43,"name":"Aston Martin","logo":"https:\/\/www.cars-data.com\/design\/images\/cars-logo\/aston-martin-logo-small.jpg"},{"id":44,"name":"Rolls-Royce","logo":"https:\/\/www.cars-data.com\/design\/images\/cars-logo\/rolls-royce-logo-small.jpg"},{"id":45,"name":"Bugatti","logo":"https:\/\/www.cars-data.com\/design\/images\/cars-logo\/bugatti-logo-small.jpg"},{"id":46,"name":"Pagani","logo":"https:\/\/www.cars-data.com\/design\/images\/cars-logo\/pagani-logo-small.jpg"},{"id":47,"name":"Koenigsegg","logo":"https:\/\/www.cars-data.com\/design\/images\/cars-logo\/koenigsegg-logo-small.jpg"},{"id":48,"name":"Lotus","logo":"https:\/\/www.cars-data.com\/design\/images\/cars-logo\/lotus-logo-small.jpg"},{"id":49,"name":"McLaren","logo":"https:\/\/www.cars-data.com\/design\/images\/cars-logo\/mclaren-logo-small.jpg"}])" class="relative" @click.away="closeDropdown()">
<label for="oe_similar_brand" class="block text-sm font-medium text-gray-700">
Marques OE <span class="text-red-500">*</span>
</label>
<div class="mt-1 relative">
<!-- Conteneur des tags sélectionnés et du champ de recherche -->
<div class="flex flex-wrap items-center gap-1 border border-gray-300 bg-white rounded-md p-2 shadow-sm focus-within:border-primary transition-colors">
<!-- Affichage des marques sélectionnées -->
<template x-for="(brand, index) in selectedBrands" :key="brand.id">
<span class="flex items-center bg-gray-100 text-gray-800 px-2 py-1 rounded-full text-xs">
<img :src="brand.logo" alt="" class="w-3 h-3 mr-1">
<span x-text="brand.name"></span>
<button type="button" @click="removeBrand(index)" class="ml-1 text-gray-500 hover:text-gray-700 focus:outline-none">
<svg xmlns="http://www.w3.org/2000/svg" class="h-3 w-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
</svg>
</button>
</span>
</template>
<!-- Champ de recherche -->
<input type="text" id="oe_similar_brand" name="oe_similar_brand" x-model="search" @input="filterBrands" @focus="openDropdown" @keydown.escape="closeDropdown" @keydown.arrow-down.prevent="highlightNext" @keydown.arrow-up.prevent="highlightPrevious" @keydown.enter.prevent="selectHighlighted" placeholder="Ajouter une marque OE" class="flex-grow border-none focus:ring-0 focus:outline-none text-sm text-gray-700 placeholder-gray-400" autocomplete="off">
</div>
<!-- Icône de voiture -->
<div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
<i class="fas fa-car text-gray-400"></i>
</div>
<!-- Dropdown des suggestions -->
<ul x-show="isOpen && filteredBrands.length > 0" x-transition:enter="transition ease-out duration-200" x-transition:enter-start="opacity-0 translate-y-1" x-transition:enter-end="opacity-100 translate-y-0" x-transition:leave="transition ease-in duration-150" x-transition:leave-start="opacity-100 translate-y-0" x-transition:leave-end="opacity-0 translate-y-1" class="absolute z-10 w-full bg-white border border-gray-300 rounded-md mt-1 max-h-60 overflow-auto shadow-lg">
<template x-for="(brand, index) in filteredBrands" :key="brand.id">
<li @click="toggleBrand(brand)" @mouseover="highlightedIndex = index" :class="{'bg-primary-100': highlightedIndex === index}" class="cursor-pointer flex items-center px-4 py-2 hover:bg-primary-100 transition-colors">
<img :src="brand.logo" alt="" class="w-4 h-4 mr-2 rounded-sm">
<span class="text-sm text-gray-700" x-text="brand.name"></span>
<!-- Indicateur de sélection -->
<span x-show="isSelected(brand)" class="ml-auto text-primary-600">
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
</svg>
</span>
</li>
</template>
<li x-show="filteredBrands.length === 0" class="px-4 py-2 text-gray-500 text-sm">
Aucun résultat trouvé.
</li>
</ul>
</div>
<p class="mt-2 text-sm text-gray-500">Sélectionnez les marques OE du véhicule.</p>
<!-- Champs cachés pour stocker les IDs des marques sélectionnées -->
<template x-for="brand in selectedBrands" :key="brand.id">
<input type="hidden" name="oe_similar_brands[]" :value="brand.id">
</template>
</div>
<script>
function vehicleBrandMultiSelector(vehicles) {
return {
search: '',
selectedBrands: [],
isOpen: false,
allBrands: vehicles,
filteredBrands: [],
highlightedIndex: 0,
debounceTimeout: null,
/**
* Ouvre le dropdown et filtre les marques.
*/
openDropdown() {
this.isOpen = true;
this.filterBrands();
},
/**
* Ferme le dropdown.
*/
closeDropdown() {
this.isOpen = false;
},
/**
* Filtre les marques en fonction de la recherche et des marques déjà sélectionnées.
* Utilise un debounce pour optimiser les performances lors de la saisie rapide.
*/
filterBrands() {
// Annuler le debounce précédent
clearTimeout(this.debounceTimeout);
// Appliquer un debounce de 300ms
this.debounceTimeout = setTimeout(() => {
const query = this.search.trim().toLowerCase();
if (query === '') {
this.filteredBrands = this.allBrands.filter(brand =>
!this.isSelected(brand)
);
} else {
this.filteredBrands = this.allBrands.filter(brand =>
brand.name.toLowerCase().includes(query) &&
!this.isSelected(brand)
);
}
this.highlightedIndex = 0;
this.isOpen = this.filteredBrands.length > 0;
}, 300);
},
/**
* Vérifie si une marque est déjà sélectionnée.
* @param {Object} brand - La marque à vérifier.
* @returns {Boolean} - Vrai si la marque est sélectionnée, sinon faux.
*/
isSelected(brand) {
return this.selectedBrands.some(selected => selected.id === brand.id);
},
/**
* Bascule la sélection d'une marque.
* @param {Object} brand - La marque à basculer.
*/
toggleBrand(brand) {
const index = this.selectedBrands.findIndex(b => b.id === brand.id);
if (index !== -1) {
this.removeBrand(index);
} else {
this.selectBrand(brand);
}
},
/**
* Sélectionne une marque.
* @param {Object} brand - La marque à sélectionner.
*/
selectBrand(brand) {
this.selectedBrands.push(brand);
this.search = '';
this.filterBrands();
this.isOpen = false;
},
/**
* Supprime une marque sélectionnée.
* @param {Number} index - L'index de la marque à supprimer.
*/
removeBrand(index) {
this.selectedBrands.splice(index, 1);
this.filterBrands();
},
/**
* Navigue vers la marque suivante dans la liste filtrée.
*/
highlightNext() {
if (this.highlightedIndex < this.filteredBrands.length - 1) {
this.highlightedIndex++;
}
},
/**
* Navigue vers la marque précédente dans la liste filtrée.
*/
highlightPrevious() {
if (this.highlightedIndex > 0) {
this.highlightedIndex--;
}
},
/**
* Sélectionne la marque actuellement mise en surbrillance.
*/
selectHighlighted() {
if (this.filteredBrands.length > 0) {
this.toggleBrand(this.filteredBrands[this.highlightedIndex]);
}
},
/**
* Initialise le composant en filtrant les marques.
*/
init() {
this.filterBrands();
// Fermer le dropdown lorsqu'on clique en dehors
document.addEventListener('click', (event) => {
if (!event.target.closest('.multi-select-container')) {
this.closeDropdown();
}
});
}
};
}
</script>
</div></div></template><div class="border border-gray-300 rounded-md p-4 mb-4 relative">
<!-- Bouton de suppression -->
<button type="button" @click="removeReference(index)" class="absolute top-2 right-2 text-red-500 hover:text-red-700">
<i class="fas fa-times-circle fa-lg"></i>
</button>
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
<!-- Référence OE -->
<div>
<label :for="'oe_reference_' + index" class="block text-sm font-medium text-gray-700" for="oe_reference_0">Référence OE <span class="text-danger">*</span></label>
<div class="mt-1 relative">
<input :id="'oe_reference_' + index" type="text" name="oe_references[]" x-model="reference.oe_reference" placeholder="Entrer la référence OE" class="block w-full pl-10 pr-3 py-2 border border-gray-300 rounded-md focus:ring-primary focus:border-primary" required="" id="oe_reference_0">
<div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
<i class="fas fa-id-card text-gray-400"></i>
</div>
</div>
<p class="mt-2 text-sm text-gray-500">Entrez la référence OE du produit.</p>
</div>
<!-- Marque OE -->
<div x-data="vehicleBrandMultiSelector([{"id":1,"name":"Alpine","logo":"https:\/\/www.cars-data.com\/design\/images\/cars-logo\/alpine-logo-small.jpg"},{"id":2,"name":"Toyota","logo":"https:\/\/www.cars-data.com\/design\/images\/cars-logo\/toyota-logo-small.jpg"},{"id":3,"name":"Volkswagen","logo":"https:\/\/www.cars-data.com\/design\/images\/cars-logo\/volkswagen-logo-small.jpg"},{"id":4,"name":"Ford","logo":"https:\/\/www.cars-data.com\/design\/images\/cars-logo\/ford-logo-small.jpg"},{"id":5,"name":"Honda","logo":"https:\/\/www.cars-data.com\/design\/images\/cars-logo\/honda-logo-small.jpg"},{"id":6,"name":"Chevrolet","logo":"https:\/\/www.cars-data.com\/design\/images\/cars-logo\/chevrolet-logo-small.jpg"},{"id":7,"name":"Mercedes-Benz","logo":"https:\/\/www.cars-data.com\/design\/images\/cars-logo\/mercedes-benz-logo-small.jpg"},{"id":8,"name":"BMW","logo":"https:\/\/www.cars-data.com\/design\/images\/cars-logo\/bmw-logo-small.jpg"},{"id":9,"name":"Audi","logo":"https:\/\/www.cars-data.com\/design\/images\/cars-logo\/audi-logo-small.jpg"},{"id":10,"name":"Nissan","logo":"https:\/\/www.cars-data.com\/design\/images\/cars-logo\/nissan-logo-small.jpg"},{"id":11,"name":"Hyundai","logo":"https:\/\/www.cars-data.com\/design\/images\/cars-logo\/hyundai-logo-small.jpg"},{"id":12,"name":"Kia","logo":"https:\/\/www.cars-data.com\/design\/images\/cars-logo\/kia-logo-small.jpg"},{"id":13,"name":"Subaru","logo":"https:\/\/www.cars-data.com\/design\/images\/cars-logo\/subaru-logo-small.jpg"},{"id":14,"name":"Mazda","logo":"https:\/\/www.cars-data.com\/design\/images\/cars-logo\/mazda-logo-small.jpg"},{"id":15,"name":"Lexus","logo":"https:\/\/www.cars-data.com\/design\/images\/cars-logo\/lexus-logo-small.jpg"},{"id":16,"name":"Tesla","logo":"https:\/\/www.cars-data.com\/design\/images\/cars-logo\/tesla-logo-small.jpg"},{"id":17,"name":"Volvo","logo":"https:\/\/www.cars-data.com\/design\/images\/cars-logo\/volvo-logo-small.jpg"},{"id":18,"name":"Jaguar","logo":"https:\/\/www.cars-data.com\/design\/images\/cars-logo\/jaguar-logo-small.jpg"},{"id":19,"name":"Porsche","logo":"https:\/\/www.cars-data.com\/design\/images\/cars-logo\/porsche-logo-small.jpg"},{"id":20,"name":"Ferrari","logo":"https:\/\/www.cars-data.com\/design\/images\/cars-logo\/ferrari-logo-small.jpg"},{"id":21,"name":"Lamborghini","logo":"https:\/\/www.cars-data.com\/design\/images\/cars-logo\/lamborghini-logo-small.jpg"},{"id":22,"name":"Mitsubishi","logo":"https:\/\/www.cars-data.com\/design\/images\/cars-logo\/mitsubishi-logo-small.jpg"},{"id":23,"name":"Renault","logo":"https:\/\/www.cars-data.com\/design\/images\/cars-logo\/renault-logo-small.jpg"},{"id":24,"name":"Peugeot","logo":"https:\/\/www.cars-data.com\/design\/images\/cars-logo\/peugeot-logo-small.jpg"},{"id":25,"name":"Citro\u00ebn","logo":"https:\/\/www.cars-data.com\/design\/images\/cars-logo\/citroen-logo-small.jpg"},{"id":26,"name":"Fiat","logo":"https:\/\/www.cars-data.com\/design\/images\/cars-logo\/fiat-logo-small.jpg"},{"id":27,"name":"Seat","logo":"https:\/\/www.cars-data.com\/design\/images\/cars-logo\/seat-logo-small.jpg"},{"id":28,"name":"Skoda","logo":"https:\/\/www.cars-data.com\/design\/images\/cars-logo\/skoda-logo-small.jpg"},{"id":29,"name":"Suzuki","logo":"https:\/\/www.cars-data.com\/design\/images\/cars-logo\/suzuki-logo-small.jpg"},{"id":30,"name":"Dodge","logo":"https:\/\/www.cars-data.com\/design\/images\/cars-logo\/dodge-logo-small.jpg"},{"id":31,"name":"Jeep","logo":"https:\/\/www.cars-data.com\/design\/images\/cars-logo\/jeep-logo-small.jpg"},{"id":32,"name":"Cadillac","logo":"https:\/\/www.cars-data.com\/design\/images\/cars-logo\/cadillac-logo-small.jpg"},{"id":33,"name":"Buick","logo":"https:\/\/www.cars-data.com\/design\/images\/cars-logo\/buick-logo-small.jpg"},{"id":34,"name":"Chrysler","logo":"https:\/\/www.cars-data.com\/design\/images\/cars-logo\/chrysler-logo-small.jpg"},{"id":35,"name":"Acura","logo":"https:\/\/www.cars-data.com\/design\/images\/cars-logo\/acura-logo-small.jpg"},{"id":36,"name":"Infiniti","logo":"https:\/\/www.cars-data.com\/design\/images\/cars-logo\/infiniti-logo-small.jpg"},{"id":37,"name":"Genesis","logo":"https:\/\/www.cars-data.com\/design\/images\/cars-logo\/genesis-logo-small.jpg"},{"id":38,"name":"Lincoln","logo":"https:\/\/www.cars-data.com\/design\/images\/cars-logo\/lincoln-logo-small.jpg"},{"id":39,"name":"Mini","logo":"https:\/\/www.cars-data.com\/design\/images\/cars-logo\/mini-logo-small.jpg"},{"id":40,"name":"Smart","logo":"https:\/\/www.cars-data.com\/design\/images\/cars-logo\/smart-logo-small.jpg"},{"id":41,"name":"Maserati","logo":"https:\/\/www.cars-data.com\/design\/images\/cars-logo\/maserati-logo-small.jpg"},{"id":42,"name":"Bentley","logo":"https:\/\/www.cars-data.com\/design\/images\/cars-logo\/bentley-logo-small.jpg"},{"id":43,"name":"Aston Martin","logo":"https:\/\/www.cars-data.com\/design\/images\/cars-logo\/aston-martin-logo-small.jpg"},{"id":44,"name":"Rolls-Royce","logo":"https:\/\/www.cars-data.com\/design\/images\/cars-logo\/rolls-royce-logo-small.jpg"},{"id":45,"name":"Bugatti","logo":"https:\/\/www.cars-data.com\/design\/images\/cars-logo\/bugatti-logo-small.jpg"},{"id":46,"name":"Pagani","logo":"https:\/\/www.cars-data.com\/design\/images\/cars-logo\/pagani-logo-small.jpg"},{"id":47,"name":"Koenigsegg","logo":"https:\/\/www.cars-data.com\/design\/images\/cars-logo\/koenigsegg-logo-small.jpg"},{"id":48,"name":"Lotus","logo":"https:\/\/www.cars-data.com\/design\/images\/cars-logo\/lotus-logo-small.jpg"},{"id":49,"name":"McLaren","logo":"https:\/\/www.cars-data.com\/design\/images\/cars-logo\/mclaren-logo-small.jpg"}])" class="relative" @click.away="closeDropdown()">
<label for="oe_similar_brand" class="block text-sm font-medium text-gray-700">
Marques OE <span class="text-red-500">*</span>
</label>
<div class="mt-1 relative">
<!-- Conteneur des tags sélectionnés et du champ de recherche -->
<div class="flex flex-wrap items-center gap-1 border border-gray-300 bg-white rounded-md p-2 shadow-sm focus-within:border-primary transition-colors">
<!-- Affichage des marques sélectionnées -->
<template x-for="(brand, index) in selectedBrands" :key="brand.id">
<span class="flex items-center bg-gray-100 text-gray-800 px-2 py-1 rounded-full text-xs">
<img :src="brand.logo" alt="" class="w-3 h-3 mr-1">
<span x-text="brand.name"></span>
<button type="button" @click="removeBrand(index)" class="ml-1 text-gray-500 hover:text-gray-700 focus:outline-none">
<svg xmlns="http://www.w3.org/2000/svg" class="h-3 w-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
</svg>
</button>
</span>
</template>
<!-- Champ de recherche -->
<input type="text" id="oe_similar_brand" name="oe_similar_brand" x-model="search" @input="filterBrands" @focus="openDropdown" @keydown.escape="closeDropdown" @keydown.arrow-down.prevent="highlightNext" @keydown.arrow-up.prevent="highlightPrevious" @keydown.enter.prevent="selectHighlighted" placeholder="Ajouter une marque OE" class="flex-grow border-none focus:ring-0 focus:outline-none text-sm text-gray-700 placeholder-gray-400" autocomplete="off">
</div>
<!-- Icône de voiture -->
<div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
<i class="fas fa-car text-gray-400"></i>
</div>
<!-- Dropdown des suggestions -->
<ul x-show="isOpen && filteredBrands.length > 0" x-transition:enter="transition ease-out duration-200" x-transition:enter-start="opacity-0 translate-y-1" x-transition:enter-end="opacity-100 translate-y-0" x-transition:leave="transition ease-in duration-150" x-transition:leave-start="opacity-100 translate-y-0" x-transition:leave-end="opacity-0 translate-y-1" class="absolute z-10 w-full bg-white border border-gray-300 rounded-md mt-1 max-h-60 overflow-auto shadow-lg transition ease-out duration-200 opacity-100 translate-y-0" style="">
<template x-for="(brand, index) in filteredBrands" :key="brand.id">
<li @click="toggleBrand(brand)" @mouseover="highlightedIndex = index" :class="{'bg-primary-100': highlightedIndex === index}" class="cursor-pointer flex items-center px-4 py-2 hover:bg-primary-100 transition-colors">
<img :src="brand.logo" alt="" class="w-4 h-4 mr-2 rounded-sm">
<span class="text-sm text-gray-700" x-text="brand.name"></span>
<!-- Indicateur de sélection -->
<span x-show="isSelected(brand)" class="ml-auto text-primary-600">
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
</svg>
</span>
</li>
</template><li @click="toggleBrand(brand)" @mouseover="highlightedIndex = index" :class="{'bg-primary-100': highlightedIndex === index}" class="cursor-pointer flex items-center px-4 py-2 hover:bg-primary-100 transition-colors bg-primary-100">
<img :src="brand.logo" alt="" class="w-4 h-4 mr-2 rounded-sm" src="https://www.cars-data.com/design/images/cars-logo/alpine-logo-small.jpg">
<span class="text-sm text-gray-700" x-text="brand.name">Alpine</span>
<!-- Indicateur de sélection -->
<span x-show="isSelected(brand)" class="ml-auto text-primary-600" style="display: none;">
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
</svg>
</span>
</li><li @click="toggleBrand(brand)" @mouseover="highlightedIndex = index" :class="{'bg-primary-100': highlightedIndex === index}" class="cursor-pointer flex items-center px-4 py-2 hover:bg-primary-100 transition-colors">
<img :src="brand.logo" alt="" class="w-4 h-4 mr-2 rounded-sm" src="https://www.cars-data.com/design/images/cars-logo/toyota-logo-small.jpg">
<span class="text-sm text-gray-700" x-text="brand.name">Toyota</span>
<!-- Indicateur de sélection -->
<span x-show="isSelected(brand)" class="ml-auto text-primary-600" style="display: none;">
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
</svg>
</span>
</li><li @click="toggleBrand(brand)" @mouseover="highlightedIndex = index" :class="{'bg-primary-100': highlightedIndex === index}" class="cursor-pointer flex items-center px-4 py-2 hover:bg-primary-100 transition-colors">
<img :src="brand.logo" alt="" class="w-4 h-4 mr-2 rounded-sm" src="https://www.cars-data.com/design/images/cars-logo/volkswagen-logo-small.jpg">
<span class="text-sm text-gray-700" x-text="brand.name">Volkswagen</span>
<!-- Indicateur de sélection -->
<span x-show="isSelected(brand)" class="ml-auto text-primary-600" style="display: none;">
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
</svg>
</span>
</li><li @click="toggleBrand(brand)" @mouseover="highlightedIndex = index" :class="{'bg-primary-100': highlightedIndex === index}" class="cursor-pointer flex items-center px-4 py-2 hover:bg-primary-100 transition-colors">
<img :src="brand.logo" alt="" class="w-4 h-4 mr-2 rounded-sm" src="https://www.cars-data.com/design/images/cars-logo/ford-logo-small.jpg">
<span class="text-sm text-gray-700" x-text="brand.name">Ford</span>
<!-- Indicateur de sélection -->
<span x-show="isSelected(brand)" class="ml-auto text-primary-600" style="display: none;">
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
</svg>
</span>
</li><li @click="toggleBrand(brand)" @mouseover="highlightedIndex = index" :class="{'bg-primary-100': highlightedIndex === index}" class="cursor-pointer flex items-center px-4 py-2 hover:bg-primary-100 transition-colors">
<img :src="brand.logo" alt="" class="w-4 h-4 mr-2 rounded-sm" src="https://www.cars-data.com/design/images/cars-logo/honda-logo-small.jpg">
<span class="text-sm text-gray-700" x-text="brand.name">Honda</span>
<!-- Indicateur de sélection -->
<span x-show="isSelected(brand)" class="ml-auto text-primary-600" style="display: none;">
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
</svg>
</span>
</li><li @click="toggleBrand(brand)" @mouseover="highlightedIndex = index" :class="{'bg-primary-100': highlightedIndex === index}" class="cursor-pointer flex items-center px-4 py-2 hover:bg-primary-100 transition-colors">
<img :src="brand.logo" alt="" class="w-4 h-4 mr-2 rounded-sm" src="https://www.cars-data.com/design/images/cars-logo/chevrolet-logo-small.jpg">
<span class="text-sm text-gray-700" x-text="brand.name">Chevrolet</span>
<!-- Indicateur de sélection -->
<span x-show="isSelected(brand)" class="ml-auto text-primary-600" style="display: none;">
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
</svg>
</span>
</li><li @click="toggleBrand(brand)" @mouseover="highlightedIndex = index" :class="{'bg-primary-100': highlightedIndex === index}" class="cursor-pointer flex items-center px-4 py-2 hover:bg-primary-100 transition-colors">
<img :src="brand.logo" alt="" class="w-4 h-4 mr-2 rounded-sm" src="https://www.cars-data.com/design/images/cars-logo/mercedes-benz-logo-small.jpg">
<span class="text-sm text-gray-700" x-text="brand.name">Mercedes-Benz</span>
<!-- Indicateur de sélection -->
<span x-show="isSelected(brand)" class="ml-auto text-primary-600" style="display: none;">
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
</svg>
</span>
</li><li @click="toggleBrand(brand)" @mouseover="highlightedIndex = index" :class="{'bg-primary-100': highlightedIndex === index}" class="cursor-pointer flex items-center px-4 py-2 hover:bg-primary-100 transition-colors">
<img :src="brand.logo" alt="" class="w-4 h-4 mr-2 rounded-sm" src="https://www.cars-data.com/design/images/cars-logo/bmw-logo-small.jpg">
<span class="text-sm text-gray-700" x-text="brand.name">BMW</span>
<!-- Indicateur de sélection -->
<span x-show="isSelected(brand)" class="ml-auto text-primary-600" style="display: none;">
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
</svg>
</span>
</li><li @click="toggleBrand(brand)" @mouseover="highlightedIndex = index" :class="{'bg-primary-100': highlightedIndex === index}" class="cursor-pointer flex items-center px-4 py-2 hover:bg-primary-100 transition-colors">
<img :src="brand.logo" alt="" class="w-4 h-4 mr-2 rounded-sm" src="https://www.cars-data.com/design/images/cars-logo/audi-logo-small.jpg">
<span class="text-sm text-gray-700" x-text="brand.name">Audi</span>
<!-- Indicateur de sélection -->
<span x-show="isSelected(brand)" class="ml-auto text-primary-600" style="display: none;">
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
</svg>
</span>
</li><li @click="toggleBrand(brand)" @mouseover="highlightedIndex = index" :class="{'bg-primary-100': highlightedIndex === index}" class="cursor-pointer flex items-center px-4 py-2 hover:bg-primary-100 transition-colors">
<img :src="brand.logo" alt="" class="w-4 h-4 mr-2 rounded-sm" src="https://www.cars-data.com/design/images/cars-logo/nissan-logo-small.jpg">
<span class="text-sm text-gray-700" x-text="brand.name">Nissan</span>
<!-- Indicateur de sélection -->
<span x-show="isSelected(brand)" class="ml-auto text-primary-600" style="display: none;">
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
</svg>
</span>
</li><li @click="toggleBrand(brand)" @mouseover="highlightedIndex = index" :class="{'bg-primary-100': highlightedIndex === index}" class="cursor-pointer flex items-center px-4 py-2 hover:bg-primary-100 transition-colors">
<img :src="brand.logo" alt="" class="w-4 h-4 mr-2 rounded-sm" src="https://www.cars-data.com/design/images/cars-logo/hyundai-logo-small.jpg">
<span class="text-sm text-gray-700" x-text="brand.name">Hyundai</span>
<!-- Indicateur de sélection -->
<span x-show="isSelected(brand)" class="ml-auto text-primary-600" style="display: none;">
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
</svg>
</span>
</li><li @click="toggleBrand(brand)" @mouseover="highlightedIndex = index" :class="{'bg-primary-100': highlightedIndex === index}" class="cursor-pointer flex items-center px-4 py-2 hover:bg-primary-100 transition-colors">
<img :src="brand.logo" alt="" class="w-4 h-4 mr-2 rounded-sm" src="https://www.cars-data.com/design/images/cars-logo/kia-logo-small.jpg">
<span class="text-sm text-gray-700" x-text="brand.name">Kia</span>
<!-- Indicateur de sélection -->
<span x-show="isSelected(brand)" class="ml-auto text-primary-600" style="display: none;">
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
</svg>
</span>
</li><li @click="toggleBrand(brand)" @mouseover="highlightedIndex = index" :class="{'bg-primary-100': highlightedIndex === index}" class="cursor-pointer flex items-center px-4 py-2 hover:bg-primary-100 transition-colors">
<img :src="brand.logo" alt="" class="w-4 h-4 mr-2 rounded-sm" src="https://www.cars-data.com/design/images/cars-logo/subaru-logo-small.jpg">
<span class="text-sm text-gray-700" x-text="brand.name">Subaru</span>
<!-- Indicateur de sélection -->
<span x-show="isSelected(brand)" class="ml-auto text-primary-600" style="display: none;">
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
</svg>
</span>
</li><li @click="toggleBrand(brand)" @mouseover="highlightedIndex = index" :class="{'bg-primary-100': highlightedIndex === index}" class="cursor-pointer flex items-center px-4 py-2 hover:bg-primary-100 transition-colors">
<img :src="brand.logo" alt="" class="w-4 h-4 mr-2 rounded-sm" src="https://www.cars-data.com/design/images/cars-logo/mazda-logo-small.jpg">
<span class="text-sm text-gray-700" x-text="brand.name">Mazda</span>
<!-- Indicateur de sélection -->
<span x-show="isSelected(brand)" class="ml-auto text-primary-600" style="display: none;">
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
</svg>
</span>
</li><li @click="toggleBrand(brand)" @mouseover="highlightedIndex = index" :class="{'bg-primary-100': highlightedIndex === index}" class="cursor-pointer flex items-center px-4 py-2 hover:bg-primary-100 transition-colors">
<img :src="brand.logo" alt="" class="w-4 h-4 mr-2 rounded-sm" src="https://www.cars-data.com/design/images/cars-logo/lexus-logo-small.jpg">
<span class="text-sm text-gray-700" x-text="brand.name">Lexus</span>
<!-- Indicateur de sélection -->
<span x-show="isSelected(brand)" class="ml-auto text-primary-600" style="display: none;">
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
</svg>
</span>
</li><li @click="toggleBrand(brand)" @mouseover="highlightedIndex = index" :class="{'bg-primary-100': highlightedIndex === index}" class="cursor-pointer flex items-center px-4 py-2 hover:bg-primary-100 transition-colors">
<img :src="brand.logo" alt="" class="w-4 h-4 mr-2 rounded-sm" src="https://www.cars-data.com/design/images/cars-logo/tesla-logo-small.jpg">
<span class="text-sm text-gray-700" x-text="brand.name">Tesla</span>
<!-- Indicateur de sélection -->
<span x-show="isSelected(brand)" class="ml-auto text-primary-600" style="display: none;">
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
</svg>
</span>
</li><li @click="toggleBrand(brand)" @mouseover="highlightedIndex = index" :class="{'bg-primary-100': highlightedIndex === index}" class="cursor-pointer flex items-center px-4 py-2 hover:bg-primary-100 transition-colors">
<img :src="brand.logo" alt="" class="w-4 h-4 mr-2 rounded-sm" src="https://www.cars-data.com/design/images/cars-logo/volvo-logo-small.jpg">
<span class="text-sm text-gray-700" x-text="brand.name">Volvo</span>
<!-- Indicateur de sélection -->
<span x-show="isSelected(brand)" class="ml-auto text-primary-600" style="display: none;">
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
</svg>
</span>
</li><li @click="toggleBrand(brand)" @mouseover="highlightedIndex = index" :class="{'bg-primary-100': highlightedIndex === index}" class="cursor-pointer flex items-center px-4 py-2 hover:bg-primary-100 transition-colors">
<img :src="brand.logo" alt="" class="w-4 h-4 mr-2 rounded-sm" src="https://www.cars-data.com/design/images/cars-logo/jaguar-logo-small.jpg">
<span class="text-sm text-gray-700" x-text="brand.name">Jaguar</span>
<!-- Indicateur de sélection -->
<span x-show="isSelected(brand)" class="ml-auto text-primary-600" style="display: none;">
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
</svg>
</span>
</li><li @click="toggleBrand(brand)" @mouseover="highlightedIndex = index" :class="{'bg-primary-100': highlightedIndex === index}" class="cursor-pointer flex items-center px-4 py-2 hover:bg-primary-100 transition-colors">
<img :src="brand.logo" alt="" class="w-4 h-4 mr-2 rounded-sm" src="https://www.cars-data.com/design/images/cars-logo/porsche-logo-small.jpg">
<span class="text-sm text-gray-700" x-text="brand.name">Porsche</span>
<!-- Indicateur de sélection -->
<span x-show="isSelected(brand)" class="ml-auto text-primary-600" style="display: none;">
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
</svg>
</span>
</li><li @click="toggleBrand(brand)" @mouseover="highlightedIndex = index" :class="{'bg-primary-100': highlightedIndex === index}" class="cursor-pointer flex items-center px-4 py-2 hover:bg-primary-100 transition-colors">
<img :src="brand.logo" alt="" class="w-4 h-4 mr-2 rounded-sm" src="https://www.cars-data.com/design/images/cars-logo/ferrari-logo-small.jpg">
<span class="text-sm text-gray-700" x-text="brand.name">Ferrari</span>
<!-- Indicateur de sélection -->
<span x-show="isSelected(brand)" class="ml-auto text-primary-600" style="display: none;">
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
</svg>
</span>
</li><li @click="toggleBrand(brand)" @mouseover="highlightedIndex = index" :class="{'bg-primary-100': highlightedIndex === index}" class="cursor-pointer flex items-center px-4 py-2 hover:bg-primary-100 transition-colors">
<img :src="brand.logo" alt="" class="w-4 h-4 mr-2 rounded-sm" src="https://www.cars-data.com/design/images/cars-logo/lamborghini-logo-small.jpg">
<span class="text-sm text-gray-700" x-text="brand.name">Lamborghini</span>
<!-- Indicateur de sélection -->
<span x-show="isSelected(brand)" class="ml-auto text-primary-600" style="display: none;">
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
</svg>
</span>
</li><li @click="toggleBrand(brand)" @mouseover="highlightedIndex = index" :class="{'bg-primary-100': highlightedIndex === index}" class="cursor-pointer flex items-center px-4 py-2 hover:bg-primary-100 transition-colors">
<img :src="brand.logo" alt="" class="w-4 h-4 mr-2 rounded-sm" src="https://www.cars-data.com/design/images/cars-logo/mitsubishi-logo-small.jpg">
<span class="text-sm text-gray-700" x-text="brand.name">Mitsubishi</span>
<!-- Indicateur de sélection -->
<span x-show="isSelected(brand)" class="ml-auto text-primary-600" style="display: none;">
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
</svg>
</span>
</li><li @click="toggleBrand(brand)" @mouseover="highlightedIndex = index" :class="{'bg-primary-100': highlightedIndex === index}" class="cursor-pointer flex items-center px-4 py-2 hover:bg-primary-100 transition-colors">
<img :src="brand.logo" alt="" class="w-4 h-4 mr-2 rounded-sm" src="https://www.cars-data.com/design/images/cars-logo/renault-logo-small.jpg">
<span class="text-sm text-gray-700" x-text="brand.name">Renault</span>
<!-- Indicateur de sélection -->
<span x-show="isSelected(brand)" class="ml-auto text-primary-600" style="display: none;">
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
</svg>
</span>
</li><li @click="toggleBrand(brand)" @mouseover="highlightedIndex = index" :class="{'bg-primary-100': highlightedIndex === index}" class="cursor-pointer flex items-center px-4 py-2 hover:bg-primary-100 transition-colors">
<img :src="brand.logo" alt="" class="w-4 h-4 mr-2 rounded-sm" src="https://www.cars-data.com/design/images/cars-logo/peugeot-logo-small.jpg">
<span class="text-sm text-gray-700" x-text="brand.name">Peugeot</span>
<!-- Indicateur de sélection -->
<span x-show="isSelected(brand)" class="ml-auto text-primary-600" style="display: none;">
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
</svg>
</span>
</li><li @click="toggleBrand(brand)" @mouseover="highlightedIndex = index" :class="{'bg-primary-100': highlightedIndex === index}" class="cursor-pointer flex items-center px-4 py-2 hover:bg-primary-100 transition-colors">
<img :src="brand.logo" alt="" class="w-4 h-4 mr-2 rounded-sm" src="https://www.cars-data.com/design/images/cars-logo/citroen-logo-small.jpg">
<span class="text-sm text-gray-700" x-text="brand.name">Citroën</span>
<!-- Indicateur de sélection -->
<span x-show="isSelected(brand)" class="ml-auto text-primary-600" style="display: none;">
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
</svg>
</span>
</li><li @click="toggleBrand(brand)" @mouseover="highlightedIndex = index" :class="{'bg-primary-100': highlightedIndex === index}" class="cursor-pointer flex items-center px-4 py-2 hover:bg-primary-100 transition-colors">
<img :src="brand.logo" alt="" class="w-4 h-4 mr-2 rounded-sm" src="https://www.cars-data.com/design/images/cars-logo/fiat-logo-small.jpg">
<span class="text-sm text-gray-700" x-text="brand.name">Fiat</span>
<!-- Indicateur de sélection -->
<span x-show="isSelected(brand)" class="ml-auto text-primary-600" style="display: none;">
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
</svg>
</span>
</li><li @click="toggleBrand(brand)" @mouseover="highlightedIndex = index" :class="{'bg-primary-100': highlightedIndex === index}" class="cursor-pointer flex items-center px-4 py-2 hover:bg-primary-100 transition-colors">
<img :src="brand.logo" alt="" class="w-4 h-4 mr-2 rounded-sm" src="https://www.cars-data.com/design/images/cars-logo/seat-logo-small.jpg">
<span class="text-sm text-gray-700" x-text="brand.name">Seat</span>
<!-- Indicateur de sélection -->
<span x-show="isSelected(brand)" class="ml-auto text-primary-600" style="display: none;">
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
</svg>
</span>
</li><li @click="toggleBrand(brand)" @mouseover="highlightedIndex = index" :class="{'bg-primary-100': highlightedIndex === index}" class="cursor-pointer flex items-center px-4 py-2 hover:bg-primary-100 transition-colors">
<img :src="brand.logo" alt="" class="w-4 h-4 mr-2 rounded-sm" src="https://www.cars-data.com/design/images/cars-logo/skoda-logo-small.jpg">
<span class="text-sm text-gray-700" x-text="brand.name">Skoda</span>
<!-- Indicateur de sélection -->
<span x-show="isSelected(brand)" class="ml-auto text-primary-600" style="display: none;">
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
</svg>
</span>
</li><li @click="toggleBrand(brand)" @mouseover="highlightedIndex = index" :class="{'bg-primary-100': highlightedIndex === index}" class="cursor-pointer flex items-center px-4 py-2 hover:bg-primary-100 transition-colors">
<img :src="brand.logo" alt="" class="w-4 h-4 mr-2 rounded-sm" src="https://www.cars-data.com/design/images/cars-logo/suzuki-logo-small.jpg">
<span class="text-sm text-gray-700" x-text="brand.name">Suzuki</span>
<!-- Indicateur de sélection -->
<span x-show="isSelected(brand)" class="ml-auto text-primary-600" style="display: none;">
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
</svg>
</span>
</li><li @click="toggleBrand(brand)" @mouseover="highlightedIndex = index" :class="{'bg-primary-100': highlightedIndex === index}" class="cursor-pointer flex items-center px-4 py-2 hover:bg-primary-100 transition-colors">
<img :src="brand.logo" alt="" class="w-4 h-4 mr-2 rounded-sm" src="https://www.cars-data.com/design/images/cars-logo/dodge-logo-small.jpg">
<span class="text-sm text-gray-700" x-text="brand.name">Dodge</span>
<!-- Indicateur de sélection -->
<span x-show="isSelected(brand)" class="ml-auto text-primary-600" style="display: none;">
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
</svg>
</span>
</li><li @click="toggleBrand(brand)" @mouseover="highlightedIndex = index" :class="{'bg-primary-100': highlightedIndex === index}" class="cursor-pointer flex items-center px-4 py-2 hover:bg-primary-100 transition-colors">
<img :src="brand.logo" alt="" class="w-4 h-4 mr-2 rounded-sm" src="https://www.cars-data.com/design/images/cars-logo/jeep-logo-small.jpg">
<span class="text-sm text-gray-700" x-text="brand.name">Jeep</span>
<!-- Indicateur de sélection -->
<span x-show="isSelected(brand)" class="ml-auto text-primary-600" style="display: none;">
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
</svg>
</span>
</li><li @click="toggleBrand(brand)" @mouseover="highlightedIndex = index" :class="{'bg-primary-100': highlightedIndex === index}" class="cursor-pointer flex items-center px-4 py-2 hover:bg-primary-100 transition-colors">
<img :src="brand.logo" alt="" class="w-4 h-4 mr-2 rounded-sm" src="https://www.cars-data.com/design/images/cars-logo/cadillac-logo-small.jpg">
<span class="text-sm text-gray-700" x-text="brand.name">Cadillac</span>
<!-- Indicateur de sélection -->
<span x-show="isSelected(brand)" class="ml-auto text-primary-600" style="display: none;">
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
</svg>
</span>
</li><li @click="toggleBrand(brand)" @mouseover="highlightedIndex = index" :class="{'bg-primary-100': highlightedIndex === index}" class="cursor-pointer flex items-center px-4 py-2 hover:bg-primary-100 transition-colors">
<img :src="brand.logo" alt="" class="w-4 h-4 mr-2 rounded-sm" src="https://www.cars-data.com/design/images/cars-logo/buick-logo-small.jpg">
<span class="text-sm text-gray-700" x-text="brand.name">Buick</span>
<!-- Indicateur de sélection -->
<span x-show="isSelected(brand)" class="ml-auto text-primary-600" style="display: none;">
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
</svg>
</span>
</li><li @click="toggleBrand(brand)" @mouseover="highlightedIndex = index" :class="{'bg-primary-100': highlightedIndex === index}" class="cursor-pointer flex items-center px-4 py-2 hover:bg-primary-100 transition-colors">
<img :src="brand.logo" alt="" class="w-4 h-4 mr-2 rounded-sm" src="https://www.cars-data.com/design/images/cars-logo/chrysler-logo-small.jpg">
<span class="text-sm text-gray-700" x-text="brand.name">Chrysler</span>
<!-- Indicateur de sélection -->
<span x-show="isSelected(brand)" class="ml-auto text-primary-600" style="display: none;">
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
</svg>
</span>
</li><li @click="toggleBrand(brand)" @mouseover="highlightedIndex = index" :class="{'bg-primary-100': highlightedIndex === index}" class="cursor-pointer flex items-center px-4 py-2 hover:bg-primary-100 transition-colors">
<img :src="brand.logo" alt="" class="w-4 h-4 mr-2 rounded-sm" src="https://www.cars-data.com/design/images/cars-logo/acura-logo-small.jpg">
<span class="text-sm text-gray-700" x-text="brand.name">Acura</span>
<!-- Indicateur de sélection -->
<span x-show="isSelected(brand)" class="ml-auto text-primary-600" style="display: none;">
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
</svg>
</span>
</li><li @click="toggleBrand(brand)" @mouseover="highlightedIndex = index" :class="{'bg-primary-100': highlightedIndex === index}" class="cursor-pointer flex items-center px-4 py-2 hover:bg-primary-100 transition-colors">
<img :src="brand.logo" alt="" class="w-4 h-4 mr-2 rounded-sm" src="https://www.cars-data.com/design/images/cars-logo/infiniti-logo-small.jpg">
<span class="text-sm text-gray-700" x-text="brand.name">Infiniti</span>
<!-- Indicateur de sélection -->
<span x-show="isSelected(brand)" class="ml-auto text-primary-600" style="display: none;">
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
</svg>
</span>
</li><li @click="toggleBrand(brand)" @mouseover="highlightedIndex = index" :class="{'bg-primary-100': highlightedIndex === index}" class="cursor-pointer flex items-center px-4 py-2 hover:bg-primary-100 transition-colors">
<img :src="brand.logo" alt="" class="w-4 h-4 mr-2 rounded-sm" src="https://www.cars-data.com/design/images/cars-logo/genesis-logo-small.jpg">
<span class="text-sm text-gray-700" x-text="brand.name">Genesis</span>
<!-- Indicateur de sélection -->
<span x-show="isSelected(brand)" class="ml-auto text-primary-600" style="display: none;">
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
</svg>
</span>
</li><li @click="toggleBrand(brand)" @mouseover="highlightedIndex = index" :class="{'bg-primary-100': highlightedIndex === index}" class="cursor-pointer flex items-center px-4 py-2 hover:bg-primary-100 transition-colors">
<img :src="brand.logo" alt="" class="w-4 h-4 mr-2 rounded-sm" src="https://www.cars-data.com/design/images/cars-logo/lincoln-logo-small.jpg">
<span class="text-sm text-gray-700" x-text="brand.name">Lincoln</span>
<!-- Indicateur de sélection -->
<span x-show="isSelected(brand)" class="ml-auto text-primary-600" style="display: none;">
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
</svg>
</span>
</li><li @click="toggleBrand(brand)" @mouseover="highlightedIndex = index" :class="{'bg-primary-100': highlightedIndex === index}" class="cursor-pointer flex items-center px-4 py-2 hover:bg-primary-100 transition-colors">
<img :src="brand.logo" alt="" class="w-4 h-4 mr-2 rounded-sm" src="https://www.cars-data.com/design/images/cars-logo/mini-logo-small.jpg">
<span class="text-sm text-gray-700" x-text="brand.name">Mini</span>
<!-- Indicateur de sélection -->
<span x-show="isSelected(brand)" class="ml-auto text-primary-600" style="display: none;">
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
</svg>
</span>
</li><li @click="toggleBrand(brand)" @mouseover="highlightedIndex = index" :class="{'bg-primary-100': highlightedIndex === index}" class="cursor-pointer flex items-center px-4 py-2 hover:bg-primary-100 transition-colors">
<img :src="brand.logo" alt="" class="w-4 h-4 mr-2 rounded-sm" src="https://www.cars-data.com/design/images/cars-logo/smart-logo-small.jpg">
<span class="text-sm text-gray-700" x-text="brand.name">Smart</span>
<!-- Indicateur de sélection -->
<span x-show="isSelected(brand)" class="ml-auto text-primary-600" style="display: none;">
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
</svg>
</span>
</li><li @click="toggleBrand(brand)" @mouseover="highlightedIndex = index" :class="{'bg-primary-100': highlightedIndex === index}" class="cursor-pointer flex items-center px-4 py-2 hover:bg-primary-100 transition-colors">
<img :src="brand.logo" alt="" class="w-4 h-4 mr-2 rounded-sm" src="https://www.cars-data.com/design/images/cars-logo/maserati-logo-small.jpg">
<span class="text-sm text-gray-700" x-text="brand.name">Maserati</span>
<!-- Indicateur de sélection -->
<span x-show="isSelected(brand)" class="ml-auto text-primary-600" style="display: none;">
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
</svg>
</span>
</li><li @click="toggleBrand(brand)" @mouseover="highlightedIndex = index" :class="{'bg-primary-100': highlightedIndex === index}" class="cursor-pointer flex items-center px-4 py-2 hover:bg-primary-100 transition-colors">
<img :src="brand.logo" alt="" class="w-4 h-4 mr-2 rounded-sm" src="https://www.cars-data.com/design/images/cars-logo/bentley-logo-small.jpg">
<span class="text-sm text-gray-700" x-text="brand.name">Bentley</span>
<!-- Indicateur de sélection -->
<span x-show="isSelected(brand)" class="ml-auto text-primary-600" style="display: none;">
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
</svg>
</span>
</li><li @click="toggleBrand(brand)" @mouseover="highlightedIndex = index" :class="{'bg-primary-100': highlightedIndex === index}" class="cursor-pointer flex items-center px-4 py-2 hover:bg-primary-100 transition-colors">
<img :src="brand.logo" alt="" class="w-4 h-4 mr-2 rounded-sm" src="https://www.cars-data.com/design/images/cars-logo/aston-martin-logo-small.jpg">
<span class="text-sm text-gray-700" x-text="brand.name">Aston Martin</span>
<!-- Indicateur de sélection -->
<span x-show="isSelected(brand)" class="ml-auto text-primary-600" style="display: none;">
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
</svg>
</span>
</li><li @click="toggleBrand(brand)" @mouseover="highlightedIndex = index" :class="{'bg-primary-100': highlightedIndex === index}" class="cursor-pointer flex items-center px-4 py-2 hover:bg-primary-100 transition-colors">
<img :src="brand.logo" alt="" class="w-4 h-4 mr-2 rounded-sm" src="https://www.cars-data.com/design/images/cars-logo/rolls-royce-logo-small.jpg">
<span class="text-sm text-gray-700" x-text="brand.name">Rolls-Royce</span>
<!-- Indicateur de sélection -->
<span x-show="isSelected(brand)" class="ml-auto text-primary-600" style="display: none;">
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
</svg>
</span>
</li><li @click="toggleBrand(brand)" @mouseover="highlightedIndex = index" :class="{'bg-primary-100': highlightedIndex === index}" class="cursor-pointer flex items-center px-4 py-2 hover:bg-primary-100 transition-colors">
<img :src="brand.logo" alt="" class="w-4 h-4 mr-2 rounded-sm" src="https://www.cars-data.com/design/images/cars-logo/bugatti-logo-small.jpg">
<span class="text-sm text-gray-700" x-text="brand.name">Bugatti</span>
<!-- Indicateur de sélection -->
<span x-show="isSelected(brand)" class="ml-auto text-primary-600" style="display: none;">
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
</svg>
</span>
</li><li @click="toggleBrand(brand)" @mouseover="highlightedIndex = index" :class="{'bg-primary-100': highlightedIndex === index}" class="cursor-pointer flex items-center px-4 py-2 hover:bg-primary-100 transition-colors">
<img :src="brand.logo" alt="" class="w-4 h-4 mr-2 rounded-sm" src="https://www.cars-data.com/design/images/cars-logo/pagani-logo-small.jpg">
<span class="text-sm text-gray-700" x-text="brand.name">Pagani</span>
<!-- Indicateur de sélection -->
<span x-show="isSelected(brand)" class="ml-auto text-primary-600" style="display: none;">
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
</svg>
</span>
</li><li @click="toggleBrand(brand)" @mouseover="highlightedIndex = index" :class="{'bg-primary-100': highlightedIndex === index}" class="cursor-pointer flex items-center px-4 py-2 hover:bg-primary-100 transition-colors">
<img :src="brand.logo" alt="" class="w-4 h-4 mr-2 rounded-sm" src="https://www.cars-data.com/design/images/cars-logo/koenigsegg-logo-small.jpg">
<span class="text-sm text-gray-700" x-text="brand.name">Koenigsegg</span>
<!-- Indicateur de sélection -->
<span x-show="isSelected(brand)" class="ml-auto text-primary-600" style="display: none;">
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
</svg>
</span>
</li><li @click="toggleBrand(brand)" @mouseover="highlightedIndex = index" :class="{'bg-primary-100': highlightedIndex === index}" class="cursor-pointer flex items-center px-4 py-2 hover:bg-primary-100 transition-colors">
<img :src="brand.logo" alt="" class="w-4 h-4 mr-2 rounded-sm" src="https://www.cars-data.com/design/images/cars-logo/lotus-logo-small.jpg">
<span class="text-sm text-gray-700" x-text="brand.name">Lotus</span>
<!-- Indicateur de sélection -->
<span x-show="isSelected(brand)" class="ml-auto text-primary-600" style="display: none;">
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
</svg>
</span>
</li><li @click="toggleBrand(brand)" @mouseover="highlightedIndex = index" :class="{'bg-primary-100': highlightedIndex === index}" class="cursor-pointer flex items-center px-4 py-2 hover:bg-primary-100 transition-colors">
<img :src="brand.logo" alt="" class="w-4 h-4 mr-2 rounded-sm" src="https://www.cars-data.com/design/images/cars-logo/mclaren-logo-small.jpg">
<span class="text-sm text-gray-700" x-text="brand.name">McLaren</span>
<!-- Indicateur de sélection -->
<span x-show="isSelected(brand)" class="ml-auto text-primary-600" style="display: none;">
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
</svg>
</span>
</li>
<li x-show="filteredBrands.length === 0" class="px-4 py-2 text-gray-500 text-sm" style="display: none;">
Aucun résultat trouvé.
</li>
</ul>
</div>
<p class="mt-2 text-sm text-gray-500">Sélectionnez les marques OE du véhicule.</p>
<!-- Champs cachés pour stocker les IDs des marques sélectionnées -->
<template x-for="brand in selectedBrands" :key="brand.id">
<input type="hidden" name="oe_similar_brands[]" :value="brand.id">
</template>
</div>
<script>
function vehicleBrandMultiSelector(vehicles) {
return {
search: '',
selectedBrands: [],
isOpen: false,
allBrands: vehicles,
filteredBrands: [],
highlightedIndex: 0,
debounceTimeout: null,
/**
* Ouvre le dropdown et filtre les marques.
*/
openDropdown() {
this.isOpen = true;
this.filterBrands();
},
/**
* Ferme le dropdown.
*/
closeDropdown() {
this.isOpen = false;
},
/**
* Filtre les marques en fonction de la recherche et des marques déjà sélectionnées.
* Utilise un debounce pour optimiser les performances lors de la saisie rapide.
*/
filterBrands() {
// Annuler le debounce précédent
clearTimeout(this.debounceTimeout);
// Appliquer un debounce de 300ms
this.debounceTimeout = setTimeout(() => {
const query = this.search.trim().toLowerCase();
if (query === '') {
this.filteredBrands = this.allBrands.filter(brand =>
!this.isSelected(brand)
);
} else {
this.filteredBrands = this.allBrands.filter(brand =>
brand.name.toLowerCase().includes(query) &&
!this.isSelected(brand)
);
}
this.highlightedIndex = 0;
this.isOpen = this.filteredBrands.length > 0;
}, 300);
},
/**
* Vérifie si une marque est déjà sélectionnée.
* @param {Object} brand - La marque à vérifier.
* @returns {Boolean} - Vrai si la marque est sélectionnée, sinon faux.
*/
isSelected(brand) {
return this.selectedBrands.some(selected => selected.id === brand.id);
},
/**
* Bascule la sélection d'une marque.
* @param {Object} brand - La marque à basculer.
*/
toggleBrand(brand) {
const index = this.selectedBrands.findIndex(b => b.id === brand.id);
if (index !== -1) {
this.removeBrand(index);
} else {
this.selectBrand(brand);
}
},
/**
* Sélectionne une marque.
* @param {Object} brand - La marque à sélectionner.
*/
selectBrand(brand) {
this.selectedBrands.push(brand);
this.search = '';
this.filterBrands();
this.isOpen = false;
},
/**
* Supprime une marque sélectionnée.
* @param {Number} index - L'index de la marque à supprimer.
*/
removeBrand(index) {
this.selectedBrands.splice(index, 1);
this.filterBrands();
},
/**
* Navigue vers la marque suivante dans la liste filtrée.
*/
highlightNext() {
if (this.highlightedIndex < this.filteredBrands.length - 1) {
this.highlightedIndex++;
}
},
/**
* Navigue vers la marque précédente dans la liste filtrée.
*/
highlightPrevious() {
if (this.highlightedIndex > 0) {
this.highlightedIndex--;
}
},
/**
* Sélectionne la marque actuellement mise en surbrillance.
*/
selectHighlighted() {
if (this.filteredBrands.length > 0) {
this.toggleBrand(this.filteredBrands[this.highlightedIndex]);
}
},
/**
* Initialise le composant en filtrant les marques.
*/
init() {
this.filterBrands();
// Fermer le dropdown lorsqu'on clique en dehors
document.addEventListener('click', (event) => {
if (!event.target.closest('.multi-select-container')) {
this.closeDropdown();
}
});
}
};
}
</script>
</div></div>
<!-- Modèles OE -->
<div x-data="vehicleModelMultiSelectorUnique([{"id":1,"name":"A1 MK1","vehicle_id":9,"vehicle_name":"Audi","year_of_construction":"2011-2019","engine":"1.4TFSI122"},{"id":2,"name":"A1 MK1","vehicle_id":9,"vehicle_name":"Audi","year_of_construction":"2011-2019","engine":"1.6TDI105"},{"id":3,"name":"A3 MK2","vehicle_id":9,"vehicle_name":"Audi","year_of_construction":"2004-2013","engine":"1.6TDI105"},{"id":4,"name":"A3 MK2","vehicle_id":9,"vehicle_name":"Audi","year_of_construction":"2004-2013","engine":"2.0TDI140"},{"id":5,"name":"A3 MK3","vehicle_id":9,"vehicle_name":"Audi","year_of_construction":"2013-2020","engine":"1.6TDI105"},{"id":6,"name":"A3 MK3","vehicle_id":9,"vehicle_name":"Audi","year_of_construction":"2013-2020","engine":"1.8TFSI180"},{"id":7,"name":"A3 MK3","vehicle_id":9,"vehicle_name":"Audi","year_of_construction":"2013-2020","engine":"2.0TDI143 04L"},{"id":8,"name":"A3 MK3","vehicle_id":9,"vehicle_name":"Audi","year_of_construction":"2013-2020","engine":"2.0TDI150 04L FAP"},{"id":9,"name":"A3 MK3","vehicle_id":9,"vehicle_name":"Audi","year_of_construction":"2013-2020","engine":"2.0TDI184 04L FAP"},{"id":10,"name":"A3 MK4","vehicle_id":9,"vehicle_name":"Audi","year_of_construction":"2020-","engine":"1.0TFSI90\/110 FAP"},{"id":11,"name":"A3 MK4","vehicle_id":9,"vehicle_name":"Audi","year_of_construction":"2020-","engine":"1.2TFSI120 FAP"},{"id":12,"name":"A3 MK4","vehicle_id":9,"vehicle_name":"Audi","year_of_construction":"2020-","engine":"2.0TDI150 05L FAP"},{"id":13,"name":"A3 MK4","vehicle_id":9,"vehicle_name":"Audi","year_of_construction":"2020-","engine":"2.0TDI200 05L FAP QUATTRO"},{"id":14,"name":"A4 MK3","vehicle_id":9,"vehicle_name":"Audi","year_of_construction":"2008-2012","engine":"2.0FSI150"},{"id":15,"name":"A4 MK3","vehicle_id":9,"vehicle_name":"Audi","year_of_construction":"2008-2012","engine":"2.0TDI140"},{"id":16,"name":"A4 MK3","vehicle_id":9,"vehicle_name":"Audi","year_of_construction":"2008-2012","engine":"2.0TDI140 FAP"},{"id":17,"name":"A4 MK4","vehicle_id":9,"vehicle_name":"Audi","year_of_construction":"2013-2016","engine":"2.0TDI143"},{"id":18,"name":"A4 MK4","vehicle_id":9,"vehicle_name":"Audi","year_of_construction":"2013-2016","engine":"2.0TDI143 FAP"},{"id":19,"name":"A4 MK4","vehicle_id":9,"vehicle_name":"Audi","year_of_construction":"2013-2016","engine":"2.0TDI177"},{"id":20,"name":"A4 MK4","vehicle_id":9,"vehicle_name":"Audi","year_of_construction":"2013-2016","engine":"2.0TDI177 FAP"},{"id":21,"name":"A4 MK5","vehicle_id":9,"vehicle_name":"Audi","year_of_construction":"2017-2020","engine":"2.0TDI150 FAP"},{"id":22,"name":"A4 MK5","vehicle_id":9,"vehicle_name":"Audi","year_of_construction":"2017-2020","engine":"2.0TDI177 FAP"},{"id":23,"name":"A4 MK6","vehicle_id":9,"vehicle_name":"Audi","year_of_construction":"2020-","engine":"2.0TDI136 FAP"},{"id":24,"name":"A4 MK6","vehicle_id":9,"vehicle_name":"Audi","year_of_construction":"2020-","engine":"2.0TDI150 FAP"},{"id":25,"name":"A4 MK6","vehicle_id":9,"vehicle_name":"Audi","year_of_construction":"2020-","engine":"2.0TDI200 FAP QUATTRO"},{"id":26,"name":"Q2 35TDI","vehicle_id":9,"vehicle_name":"Audi","year_of_construction":"2017-","engine":"2.0TDI"},{"id":27,"name":"Q5 40TDI","vehicle_id":9,"vehicle_name":"Audi","year_of_construction":"2021-2024","engine":"2.0TDI 200CV"},{"id":28,"name":"Q6 GTR","vehicle_id":9,"vehicle_name":"Audi","year_of_construction":"2025","engine":"BGFB"},{"id":29,"name":"Q8 25","vehicle_id":9,"vehicle_name":"Audi","year_of_construction":"2026","engine":"203VC"},{"id":30,"name":"S3 MK2","vehicle_id":9,"vehicle_name":"Audi","year_of_construction":"2007-2013","engine":"2.0TFSI265"},{"id":31,"name":"S3 MK3","vehicle_id":9,"vehicle_name":"Audi","year_of_construction":"2013-2020","engine":"2.0TFSI265\/310"},{"id":32,"name":"S3 MK4","vehicle_id":9,"vehicle_name":"Audi","year_of_construction":"2020-","engine":"2.0TFSI310 FAP"},{"id":33,"name":"SUV","vehicle_id":8,"vehicle_name":"BMW","year_of_construction":"2022","engine":"V6"},{"id":34,"name":"test","vehicle_id":8,"vehicle_name":"BMW","year_of_construction":"1999","engine":"test"}], reference.selectedBrands, reference.selectedModels)" class="relative" @click.away="closeDropdown()">
<label for="oe_similar_models_unique" class="block text-sm font-medium text-gray-700">
Modèles OE <span class="text-red-500">*</span>
</label>
<div class="mt-1 relative">
<!-- Conteneur des tags sélectionnés et du champ de recherche -->
<div class="flex flex-wrap items-center gap-1 border border-gray-300 bg-white rounded-md p-2 shadow-sm focus-within:border-primary transition-colors vehicle-model-container-unique">
<!-- Affichage des modèles sélectionnés -->
<template x-for="(model, index) in selectedModels" :key="model.id">
<span class="flex items-center bg-gray-100 text-gray-800 px-2 py-1 rounded-full text-xs vehicle-model-tag-unique">
<span x-text="model.name"></span>
<button type="button" @click="removeModel(index)" class="ml-1 text-gray-500 hover:text-gray-700 focus:outline-none vehicle-model-remove-btn-unique">
<svg xmlns="http://www.w3.org/2000/svg" class="h-3 w-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
</svg>
</button>
</span>
</template>
<!-- Champ de recherche -->
<input type="text" id="oe_similar_models_unique" name="oe_similar_models" x-model="search" @input="filterModels" @focus="openDropdown" @keydown.escape="closeDropdown" @keydown.arrow-down.prevent="highlightNext" @keydown.arrow-up.prevent="highlightPrevious" @keydown.enter.prevent="selectHighlighted" placeholder="Ajouter un modèle OE" class="flex-grow border-none focus:ring-0 focus:outline-none text-sm text-gray-700 placeholder-gray-400 vehicle-model-input-unique" autocomplete="off">
</div>
<!-- Dropdown des suggestions -->
<ul x-show="isOpen && filteredModels.length > 0" x-transition:enter="transition ease-out duration-200" x-transition:enter-start="opacity-0 translate-y-1" x-transition:enter-end="opacity-100 translate-y-0" x-transition:leave="transition ease-in duration-150" x-transition:leave-start="opacity-100 translate-y-0" x-transition:leave-end="opacity-0 translate-y-1" class="absolute z-10 w-full bg-white border border-gray-300 rounded-md mt-1 max-h-60 overflow-auto shadow-lg vehicle-model-dropdown-unique" style="display: none;">
<template x-for="(model, index) in filteredModels" :key="model.id">
<li @click="selectModel(model)" @mouseover="highlightedIndex = index" :class="{'bg-primary-100': highlightedIndex === index}" class="cursor-pointer flex items-center px-4 py-2 hover:bg-primary-100 transition-colors vehicle-model-option-unique">
<span class="text-sm text-gray-700" x-text="model.name"></span>
</li>
</template>
<li x-show="filteredModels.length === 0" class="px-4 py-2 text-gray-500 text-sm vehicle-model-no-result-unique" style="display: none;">
Aucun résultat trouvé.
</li>
</ul>
</div>
<p class="mt-2 text-sm text-gray-500">Sélectionnez les modèles OE du véhicule.</p>
<!-- Champs cachés pour stocker les IDs des modèles sélectionnés -->
<template x-for="model in selectedModels" :key="model.id">
<input type="hidden" name="oe_similar_models[]" :value="model.id">
</template>
</div>
<!-- Script Alpine.js pour le Sélecteur de Modèle de Véhicule -->
<script>
function vehicleModelMultiSelectorUnique(vehicleModels, selectedBrands, selectedModels) {
return {
search: '',
selectedModels: selectedModels || [],
isOpen: false,
allModels: vehicleModels,
filteredModels: [],
highlightedIndex: 0,
openDropdown() {
this.isOpen = true;
this.filterModels();
},
closeDropdown() {
this.isOpen = false;
},
filterModels() {
const query = this.search.trim().toLowerCase();
const selectedBrandIds = selectedBrands.map(brand => brand.id);
let models = this.allModels.filter(model => selectedBrandIds.includes(model.vehicle_id));
if (query !== '') {
models = models.filter(model => model.name.toLowerCase().includes(query));
}
this.filteredModels = models;
this.highlightedIndex = 0;
this.isOpen = this.filteredModels.length > 0;
},
selectModel(model) {
if (!this.selectedModels.some(m => m.id === model.id)) {
this.selectedModels.push(model);
}
this.search = '';
this.filterModels();
},
removeModel(index) {
this.selectedModels.splice(index, 1);
this.filterModels();
},
isSelected(model) {
return this.selectedModels.some(selected => selected.id === model.id);
},
highlightNext() {
if (this.highlightedIndex < this.filteredModels.length - 1) {
this.highlightedIndex++;
}
},
highlightPrevious() {
if (this.highlightedIndex > 0) {
this.highlightedIndex--;
}
},
selectHighlighted() {
if (this.filteredModels.length > 0) {
this.selectModel(this.filteredModels[this.highlightedIndex]);
}
},
init() {
// Initialiser les filtres si nécessaire
this.filterModels();
}
};
}
</script>
<!-- Bouton pour ajouter une nouvelle référence OE -->
<div class="flex justify-end">
<button type="button" @click="addReference" class="inline-flex items-center px-4 py-2 bg-blue-600 text-white text-sm font-medium rounded-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500">
<i class="fas fa-plus mr-2"></i> Ajouter une Référence OE
</button>
</div>
<div class="flex justify-end mt-8">
<button type="submit" class="inline-flex items-center px-6 py-3 bg-green-600 text-white text-sm font-medium rounded-md hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-green-500 transition">
<i class="fas fa-save mr-2"></i> Enregistrer
</button>
</div>
</div>
<!-- Alpine.js Component Script pour Références OE Similaires et Marques OE -->
<!-- Bouton pour ajouter une nouvelle référence OE similaire -->
<!-- Alpine.js Component Script pour Références OE Similaires et Marques OE -->
<script>
function oeSimilarReferences() {
return {
references: [
{ id: Date.now(), oe_similar_reference: '', oe_similar_brand: '' }
],
addReference() {
this.references.push({ id: Date.now() + Math.random(), oe_similar_reference: '', oe_similar_brand: '' });
},
removeReference(index) {
if (this.references.length > 1) {
this.references.splice(index, 1);
} else {
alert('Au moins une référence OE similaire est requise.');
}
}
};
}
</script>
<!-- Styles Optionnels (si nécessaire) -->
<style>
.text-danger {
color: #EF4444; /* Rouge pour les astérisques */
}
/* Styles pour les boutons de suppression */
.relative .fa-times-circle:hover {
color: #DC2626; /* Rouge plus foncé au survol */
}
</style>
<!-- Alpine.js Component Script -->
<script>
function oeReferences() {
return {
references: [
{ id: Date.now(), oe_reference: '', oe_brand: '' }
],
addReference() { this.references.push({ id: Date.now() + Math.random(), oe_reference: '', oe_brand: '' });
},
removeReference(index) {
if (this.references.length > 1) {
this.references.splice(index, 1);
} else {
alert('Au moins une référence OE est requise.');
}
}
};
}
</script>
<!-- Styles Optionnels (si nécessaire) -->
<style>
.text-danger {
color: #EF4444; /* Rouge pour les astérisques */
}
</style>
<!-- Scripts JavaScript avec Alpine.js -->
<!-- Alpine.js Component Script -->
<!-- Alpine.js Component Script -->
<!-- Alpine.js Component Script -->
<!-- Assurez-vous d'inclure la bibliothèque JsBarcode -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/JsBarcode.all.min.js"></script>
<script>
function productReferences() {
return {
references: [
{
id: Date.now(),
product_reference: '',
brand_id: '',
country_id: '',
quantity: 1,
purchase_price: '',
sale_price: '',
stock_location: '',
supplier_id: '',
product_image: null,
internal_code: '' // Ajout du champ internal_code
}
],
addReference() {
this.references.push({
id: Date.now() + Math.random(),
product_reference: '',
brand_id: '',
country_id: '',
quantity: 1,
purchase_price: '',
sale_price: '',
stock_location: '',
supplier_id: '',
product_image: null,
internal_code: ''
});
this.$nextTick(() => {
const index = this.references.length - 1;
this.generateInternalCode(index);
});
},
removeReference(index) {
if (this.references.length > 1) {
this.references.splice(index, 1);
} else {
alert('Au moins une référence de produit doit être ajoutée.');
}
},
generateInternalCode(index) {
const length = 8; // Longueur du code interne
const chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789';
let code = '';
for (let i = 0; i < length; i++) {
code += chars.charAt(Math.floor(Math.random() * chars.length));
}
this.references[index].internal_code = code;
// Générer le code-barres une fois le code interne mis à jour
this.$nextTick(() => {
const barcodeId = `barcode_${index}`;
// Vérifiez que l'élément SVG pour le code-barres existe
const barcodeElement = document.querySelector(`#${barcodeId}`);
if (barcodeElement) {
JsBarcode(`#${barcodeId}`, code, {
format: "CODE128",
lineColor: "#000",
width: 2,
height: 40,
displayValue: false
});
} else {
console.warn(`Élément avec l'ID ${barcodeId} non trouvé pour générer le code-barres.`);
}
});
},
init() {
// Générer le code interne et le code-barres pour les références initiales
this.references.forEach((ref, index) => {
this.generateInternalCode(index);
});
}
}
}
</script>
<!-- Styles Optionnels (si nécessaire) -->
<style>
.text-danger {
color: #EF4444; /* Rouge pour les astérisques */
}
/* Ajoutez des styles personnalisés si nécessaire */
</style>
<!-- Liste des Produits -->
<div class="container mx-auto px-4 py-8">
<div class="card p-6 mt-8 animate-fadeIn shadow-lg rounded-lg">
<h2 class="text-3xl font-bold text-gray-800 mb-6 text-center">Liste des Produits</h2>
<!-- Affichage des messages de succès -->
<!-- Barre de recherche -->
<div class="mb-6">
<div class="relative">
<input type="text" id="search-input" placeholder="Rechercher un produit..." oninput="filterProducts()" class="block w-full p-4 border border-gray-300 rounded-lg pl-12 pr-4 focus:outline-none focus:ring-2 focus:ring-blue-500" aria-label="Rechercher un produit">
<i class="fas fa-search absolute left-4 top-1/2 transform -translate-y-1/2 text-gray-400"></i>
</div>
</div>
<!-- Table des produits -->
<div class="container mx-auto px-4">
<!-- En-tête avec le titre et les boutons -->
<div class="flex justify-between items-center mb-6">
<h1 class="text-2xl font-semibold text-gray-700">Liste des Produits</h1>
<div>
<a href="" class="bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded-md">
Ajouter un Produit
</a>
<a href="https://soft.babi-app.com/products/print-all-qrcodes" class="bg-green-500 hover:bg-green-600 text-white px-4 py-2 rounded-md ml-2">
Imprimer tous les QR Codes
</a>
</div>
</div>
<!-- Filtre de recherche -->
<div class="mb-4">
<input type="text" id="search-input" onkeyup="filterProducts()" placeholder="Rechercher un produit..." class="w-full px-4 py-2 border rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
</div>
<!-- Table des produits -->
<div class="overflow-x-auto">
<table class="min-w-full bg-white border border-gray-200 rounded-lg">
<thead class="bg-gray-100">
<tr>
<!-- Colonne Photo -->
<th class="px-4 py-2 border-b text-left text-sm font-medium text-gray-700 uppercase tracking-wider">Photo</th>
<!-- Colonne QR Code -->
<th class="px-4 py-2 border-b text-left text-sm font-medium text-gray-700 uppercase tracking-wider">QR Code</th>
<!-- Colonne Code-barres -->
<th class="px-4 py-2 border-b text-left text-sm font-medium text-gray-700 uppercase tracking-wider">Code-barres</th>
<!-- Autres colonnes -->
<th class="px-4 py-2 border-b text-left text-sm font-medium text-gray-700 uppercase tracking-wider">Magasin</th>
<th class="px-4 py-2 border-b text-left text-sm font-medium text-gray-700 uppercase tracking-wider">Type</th>
<th class="px-4 py-2 border-b text-left text-sm font-medium text-gray-700 uppercase tracking-wider">Catégorie</th>
<th class="px-4 py-2 border-b text-left text-sm font-medium text-gray-700 uppercase tracking-wider">Sous-catégorie</th>
<th class="px-4 py-2 border-b text-left text-sm font-medium text-gray-700 uppercase tracking-wider">Désignation</th>
<th class="px-4 py-2 border-b text-left text-sm font-medium text-gray-700 uppercase tracking-wider">Position</th>
<th class="px-4 py-2 border-b text-left text-sm font-medium text-gray-700 uppercase tracking-wider">Référence Produit</th>
<th class="px-4 py-2 border-b text-left text-sm font-medium text-gray-700 uppercase tracking-wider">Référence OE</th>
<th class="px-4 py-2 border-b text-right text-sm font-medium text-gray-700 uppercase tracking-wider">Quantité</th>
<th class="px-4 py-2 border-b text-right text-sm font-medium text-gray-700 uppercase tracking-wider">Prix d'Achat</th>
<th class="px-4 py-2 border-b text-right text-sm font-medium text-gray-700 uppercase tracking-wider">Prix de Vente</th>
<th class="px-4 py-2 border-b text-left text-sm font-medium text-gray-700 uppercase tracking-wider">Emplacement</th>
<th class="px-4 py-2 border-b text-left text-sm font-medium text-gray-700 uppercase tracking-wider">Fournisseur</th>
<th class="px-4 py-2 border-b text-left text-sm font-medium text-gray-700 uppercase tracking-wider">Pays</th>
<th class="px-4 py-2 border-b text-left text-sm font-medium text-gray-700 uppercase tracking-wider">Code Interne</th>
<!-- Champs supplémentaires -->
<th class="px-4 py-2 border-b text-left text-sm font-medium text-gray-700 uppercase tracking-wider">Champ 1</th>
<th class="px-4 py-2 border-b text-left text-sm font-medium text-gray-700 uppercase tracking-wider">Champ 2</th>
<th class="px-4 py-2 border-b text-left text-sm font-medium text-gray-700 uppercase tracking-wider">Champ 3</th>
<th class="px-4 py-2 border-b text-left text-sm font-medium text-gray-700 uppercase tracking-wider">Champ 4</th>
<!-- Actions -->
<th class="px-4 py-2 border-b text-center text-sm font-medium text-gray-700 uppercase tracking-wider">Actions</th>
</tr>
</thead>
<tbody id="product-list" class="divide-y divide-gray-200">
<tr class="hover:bg-gray-50">
<!-- Colonne Photo -->
<td class="px-4 py-2 border-b text-sm text-gray-700">
<span class="text-gray-500">N/A</span>
</td>
<!-- Colonne QR Code -->
<td class="px-4 py-2 border-b text-sm text-gray-700">
<!--?xml version="1.0" encoding="UTF-8"?-->
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="60" height="60" viewBox="0 0 60 60"><rect x="0" y="0" width="60" height="60" fill="#ffffff"></rect><g transform="scale(2.857)"><g transform="translate(0,0)"><path fill-rule="evenodd" d="M8 0L8 1L9 1L9 2L8 2L8 5L11 5L11 4L12 4L12 3L13 3L13 0L12 0L12 3L11 3L11 2L10 2L10 0ZM9 2L9 4L11 4L11 3L10 3L10 2ZM8 6L8 7L9 7L9 8L8 8L8 11L7 11L7 10L6 10L6 11L7 11L7 12L6 12L6 13L7 13L7 12L8 12L8 14L9 14L9 17L8 17L8 21L13 21L13 19L14 19L14 20L15 20L15 21L16 21L16 20L17 20L17 21L18 21L18 19L19 19L19 21L20 21L20 20L21 20L21 19L19 19L19 18L20 18L20 17L21 17L21 16L20 16L20 17L19 17L19 18L17 18L17 17L18 17L18 15L21 15L21 13L20 13L20 12L18 12L18 15L17 15L17 14L16 14L16 13L17 13L17 12L16 12L16 13L15 13L15 14L14 14L14 11L18 11L18 10L19 10L19 8L16 8L16 9L15 9L15 10L13 10L13 9L14 9L14 8L13 8L13 9L12 9L12 12L11 12L11 10L10 10L10 9L11 9L11 6L10 6L10 7L9 7L9 6ZM12 6L12 7L13 7L13 6ZM0 8L0 9L2 9L2 10L3 10L3 11L0 11L0 12L3 12L3 13L5 13L5 12L3 12L3 11L5 11L5 10L4 10L4 8ZM6 8L6 9L7 9L7 8ZM9 8L9 9L10 9L10 8ZM20 8L20 9L21 9L21 8ZM16 9L16 10L18 10L18 9ZM10 12L10 13L9 13L9 14L10 14L10 16L11 16L11 15L13 15L13 12L12 12L12 13L11 13L11 12ZM19 13L19 14L20 14L20 13ZM15 14L15 17L14 17L14 16L12 16L12 17L9 17L9 20L10 20L10 19L11 19L11 18L12 18L12 19L13 19L13 17L14 17L14 19L15 19L15 20L16 20L16 17L17 17L17 15L16 15L16 14ZM0 0L0 7L7 7L7 0ZM1 1L1 6L6 6L6 1ZM2 2L2 5L5 5L5 2ZM14 0L14 7L21 7L21 0ZM15 1L15 6L20 6L20 1ZM16 2L16 5L19 5L19 2ZM0 14L0 21L7 21L7 14ZM1 15L1 20L6 20L6 15ZM2 16L2 19L5 19L5 16Z" fill="#000000"></path></g></g></svg>
</td>
<!-- Autres colonnes -->
<td class="px-4 py-2 border-b text-sm text-gray-700">N/A</td>
<td class="px-4 py-2 border-b text-sm text-gray-700">N/A</td>
<td class="px-4 py-2 border-b text-sm text-gray-700">AILE</td>
<td class="px-4 py-2 border-b text-sm text-gray-700">test</td>
<td class="px-4 py-2 border-b text-sm text-gray-700">N/A</td>
<td class="px-4 py-2 border-b text-sm text-gray-700">test</td>
<td class="px-4 py-2 border-b text-sm text-gray-700">test</td>
<td class="px-4 py-2 border-b text-sm text-gray-700">test</td>
<td class="px-4 py-2 border-b text-sm text-gray-700 text-right">0</td>
<td class="px-4 py-2 border-b text-sm text-gray-700 text-right">0,00 DA</td>
<td class="px-4 py-2 border-b text-sm text-gray-700 text-right">0,00 DA</td>
<td class="px-4 py-2 border-b text-sm text-gray-700">test</td>
<td class="px-4 py-2 border-b text-sm text-gray-700">test</td>
<!-- Champs supplémentaires -->
<td class="px-4 py-2 border-b text-sm text-gray-700">N/A</td>
<td class="px-4 py-2 border-b text-sm text-gray-700">N/A</td>
<td class="px-4 py-2 border-b text-sm text-gray-700">N/A</td>
<td class="px-4 py-2 border-b text-sm text-gray-700">N/A</td>
<!-- Actions -->
<td class="px-4 py-2 border-b text-center text-sm font-medium">
<!-- Bouton Modifier -->
<a href="" class="text-blue-500 hover:text-blue-700 ml-2" title="Modifier">
<i class="fas fa-edit"></i>
</a>
<!-- Bouton Supprimer -->
<form action="https://soft.babi-app.com/products/1" method="POST" class="inline-block ml-2" onsubmit="return confirm('Êtes-vous sûr de vouloir supprimer ce produit ?');">
<input type="hidden" name="_token" value="0NNzsxnGE7beJBGvkItN6Dh4W438ipkYrbGtsG5D" autocomplete="off"> <input type="hidden" name="_method" value="DELETE"> <button type="submit" class="text-red-500 hover:text-red-700 focus:outline-none focus:ring-2 focus:ring-red-500" title="Supprimer">
<i class="fas fa-trash-alt"></i>
</button>
</form>
<!-- Bouton Imprimer QR Code individuel -->
<a href="https://soft.babi-app.com/products/1/print-qrcode" class="text-green-500 hover:text-green-700 ml-2" title="Imprimer QR Code">
<i class="fas fa-qrcode"></i>
</a>
</td>
</tr>
<tr class="hover:bg-gray-50">
<!-- Colonne Photo -->
<td class="px-4 py-2 border-b text-sm text-gray-700">
<span class="text-gray-500">N/A</span>
</td>
<!-- Colonne QR Code -->
<td class="px-4 py-2 border-b text-sm text-gray-700">
<!--?xml version="1.0" encoding="UTF-8"?-->
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="60" height="60" viewBox="0 0 60 60"><rect x="0" y="0" width="60" height="60" fill="#ffffff"></rect><g transform="scale(2.857)"><g transform="translate(0,0)"><path fill-rule="evenodd" d="M8 0L8 1L9 1L9 0ZM10 0L10 2L8 2L8 5L9 5L9 6L8 6L8 7L9 7L9 6L10 6L10 7L11 7L11 8L8 8L8 9L7 9L7 8L6 8L6 9L7 9L7 10L6 10L6 11L5 11L5 9L4 9L4 8L0 8L0 9L2 9L2 10L1 10L1 11L0 11L0 13L1 13L1 12L2 12L2 13L4 13L4 11L5 11L5 12L6 12L6 13L8 13L8 14L9 14L9 16L11 16L11 15L13 15L13 14L12 14L12 13L13 13L13 12L12 12L12 10L15 10L15 9L14 9L14 8L13 8L13 5L12 5L12 4L13 4L13 3L12 3L12 1L13 1L13 0ZM10 2L10 4L9 4L9 5L11 5L11 4L12 4L12 3L11 3L11 2ZM11 6L11 7L12 7L12 6ZM16 8L16 9L17 9L17 11L14 11L14 12L15 12L15 13L14 13L14 14L15 14L15 16L12 16L12 17L11 17L11 18L12 18L12 19L13 19L13 21L14 21L14 19L15 19L15 20L16 20L16 21L17 21L17 20L16 20L16 18L20 18L20 17L21 17L21 16L20 16L20 17L17 17L17 15L18 15L18 16L19 16L19 15L18 15L18 13L19 13L19 12L20 12L20 14L21 14L21 12L20 12L20 11L21 11L21 10L20 10L20 11L19 11L19 10L18 10L18 9L19 9L19 8ZM20 8L20 9L21 9L21 8ZM9 9L9 10L7 10L7 11L6 11L6 12L7 12L7 11L8 11L8 12L9 12L9 13L12 13L12 12L10 12L10 10L11 10L11 9ZM3 10L3 11L4 11L4 10ZM16 12L16 13L15 13L15 14L16 14L16 15L17 15L17 13L18 13L18 12ZM8 17L8 21L10 21L10 20L11 20L11 19L10 19L10 18L9 18L9 17ZM12 17L12 18L13 18L13 19L14 19L14 17ZM18 19L18 20L19 20L19 21L20 21L20 20L21 20L21 19ZM0 0L0 7L7 7L7 0ZM1 1L1 6L6 6L6 1ZM2 2L2 5L5 5L5 2ZM14 0L14 7L21 7L21 0ZM15 1L15 6L20 6L20 1ZM16 2L16 5L19 5L19 2ZM0 14L0 21L7 21L7 14ZM1 15L1 20L6 20L6 15ZM2 16L2 19L5 19L5 16Z" fill="#000000"></path></g></g></svg>
</td>
<!-- Autres colonnes -->
<td class="px-4 py-2 border-b text-sm text-gray-700">qsp soumaa</td>
<td class="px-4 py-2 border-b text-sm text-gray-700">N/A</td>
<td class="px-4 py-2 border-b text-sm text-gray-700">FILTRATION</td>
<td class="px-4 py-2 border-b text-sm text-gray-700">FILTRE CARBURANT</td>
<td class="px-4 py-2 border-b text-sm text-gray-700">FILTRE A GASOIL</td>
<td class="px-4 py-2 border-b text-sm text-gray-700">Avant gauche</td>
<td class="px-4 py-2 border-b text-sm text-gray-700">N/A</td>
<td class="px-4 py-2 border-b text-sm text-gray-700">N/A</td>
<td class="px-4 py-2 border-b text-sm text-gray-700 text-right">0</td>
<td class="px-4 py-2 border-b text-sm text-gray-700 text-right">0,00 DA</td>
<td class="px-4 py-2 border-b text-sm text-gray-700 text-right">0,00 DA</td>
<td class="px-4 py-2 border-b text-sm text-gray-700">test</td>
<td class="px-4 py-2 border-b text-sm text-gray-700">N/A</td>
<!-- Champs supplémentaires -->
<td class="px-4 py-2 border-b text-sm text-gray-700">N/A</td>
<td class="px-4 py-2 border-b text-sm text-gray-700">N/A</td>
<td class="px-4 py-2 border-b text-sm text-gray-700">N/A</td>
<td class="px-4 py-2 border-b text-sm text-gray-700">N/A</td>
<!-- Actions -->
<td class="px-4 py-2 border-b text-center text-sm font-medium">
<!-- Bouton Modifier -->
<a href="" class="text-blue-500 hover:text-blue-700 ml-2" title="Modifier">
<i class="fas fa-edit"></i>
</a>
<!-- Bouton Supprimer -->
<form action="https://soft.babi-app.com/products/2" method="POST" class="inline-block ml-2" onsubmit="return confirm('Êtes-vous sûr de vouloir supprimer ce produit ?');">
<input type="hidden" name="_token" value="0NNzsxnGE7beJBGvkItN6Dh4W438ipkYrbGtsG5D" autocomplete="off"> <input type="hidden" name="_method" value="DELETE"> <button type="submit" class="text-red-500 hover:text-red-700 focus:outline-none focus:ring-2 focus:ring-red-500" title="Supprimer">
<i class="fas fa-trash-alt"></i>
</button>
</form>
<!-- Bouton Imprimer QR Code individuel -->
<a href="https://soft.babi-app.com/products/2/print-qrcode" class="text-green-500 hover:text-green-700 ml-2" title="Imprimer QR Code">
<i class="fas fa-qrcode"></i>
</a>
</td>
</tr>
<tr class="hover:bg-gray-50">
<!-- Colonne Photo -->
<td class="px-4 py-2 border-b text-sm text-gray-700">
<span class="text-gray-500">N/A</span>
</td>
<!-- Colonne QR Code -->
<td class="px-4 py-2 border-b text-sm text-gray-700">
<!--?xml version="1.0" encoding="UTF-8"?-->
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="60" height="60" viewBox="0 0 60 60"><rect x="0" y="0" width="60" height="60" fill="#ffffff"></rect><g transform="scale(2.857)"><g transform="translate(0,0)"><path fill-rule="evenodd" d="M9 0L9 2L8 2L8 3L9 3L9 4L10 4L10 5L11 5L11 4L12 4L12 7L11 7L11 6L10 6L10 7L9 7L9 6L8 6L8 8L4 8L4 9L3 9L3 8L0 8L0 10L1 10L1 9L2 9L2 11L0 11L0 13L1 13L1 12L2 12L2 13L4 13L4 12L5 12L5 11L7 11L7 12L6 12L6 13L8 13L8 17L10 17L10 18L11 18L11 17L12 17L12 16L13 16L13 17L14 17L14 18L15 18L15 17L16 17L16 16L17 16L17 17L18 17L18 18L20 18L20 19L21 19L21 18L20 18L20 17L21 17L21 16L20 16L20 15L21 15L21 14L20 14L20 11L21 11L21 10L20 10L20 9L19 9L19 8L18 8L18 10L20 10L20 11L18 11L18 13L17 13L17 12L16 12L16 13L15 13L15 11L14 11L14 13L13 13L13 12L12 12L12 13L11 13L11 12L10 12L10 11L11 11L11 10L10 10L10 9L12 9L12 8L13 8L13 9L14 9L14 10L15 10L15 8L13 8L13 4L12 4L12 3L13 3L13 2L12 2L12 1L13 1L13 0L11 0L11 1L10 1L10 0ZM10 2L10 4L11 4L11 2ZM10 7L10 8L11 8L11 7ZM4 9L4 10L3 10L3 11L2 11L2 12L4 12L4 10L8 10L8 13L10 13L10 15L11 15L11 13L10 13L10 12L9 12L9 10L8 10L8 9ZM12 10L12 11L13 11L13 10ZM16 10L16 11L17 11L17 10ZM12 13L12 15L13 15L13 13ZM14 13L14 14L15 14L15 13ZM16 13L16 15L17 15L17 13ZM18 13L18 14L19 14L19 13ZM14 15L14 16L15 16L15 15ZM18 15L18 16L19 16L19 17L20 17L20 16L19 16L19 15ZM8 18L8 21L9 21L9 20L11 20L11 19L9 19L9 18ZM12 18L12 19L13 19L13 18ZM16 18L16 19L17 19L17 18ZM14 19L14 21L15 21L15 19ZM18 19L18 21L19 21L19 19ZM12 20L12 21L13 21L13 20ZM16 20L16 21L17 21L17 20ZM20 20L20 21L21 21L21 20ZM0 0L0 7L7 7L7 0ZM1 1L1 6L6 6L6 1ZM2 2L2 5L5 5L5 2ZM14 0L14 7L21 7L21 0ZM15 1L15 6L20 6L20 1ZM16 2L16 5L19 5L19 2ZM0 14L0 21L7 21L7 14ZM1 15L1 20L6 20L6 15ZM2 16L2 19L5 19L5 16Z" fill="#000000"></path></g></g></svg>
</td>
<!-- Autres colonnes -->
<td class="px-4 py-2 border-b text-sm text-gray-700">qsp soumaa</td>
<td class="px-4 py-2 border-b text-sm text-gray-700">N/A</td>
<td class="px-4 py-2 border-b text-sm text-gray-700">FILTRATION</td>
<td class="px-4 py-2 border-b text-sm text-gray-700">FILTRE HABITACLE</td>
<td class="px-4 py-2 border-b text-sm text-gray-700">FILTRE HABITACLE</td>
<td class="px-4 py-2 border-b text-sm text-gray-700">Avant gauche</td>
<td class="px-4 py-2 border-b text-sm text-gray-700">N/A</td>
<td class="px-4 py-2 border-b text-sm text-gray-700">N/A</td>
<td class="px-4 py-2 border-b text-sm text-gray-700 text-right">0</td>
<td class="px-4 py-2 border-b text-sm text-gray-700 text-right">0,00 DA</td>
<td class="px-4 py-2 border-b text-sm text-gray-700 text-right">0,00 DA</td>
<td class="px-4 py-2 border-b text-sm text-gray-700">N/A</td>
<td class="px-4 py-2 border-b text-sm text-gray-700">N/A</td>
<!-- Champs supplémentaires -->
<td class="px-4 py-2 border-b text-sm text-gray-700">N/A</td>
<td class="px-4 py-2 border-b text-sm text-gray-700">N/A</td>
<td class="px-4 py-2 border-b text-sm text-gray-700">N/A</td>
<td class="px-4 py-2 border-b text-sm text-gray-700">N/A</td>
<!-- Actions -->
<td class="px-4 py-2 border-b text-center text-sm font-medium">
<!-- Bouton Modifier -->
<a href="" class="text-blue-500 hover:text-blue-700 ml-2" title="Modifier">
<i class="fas fa-edit"></i>
</a>
<!-- Bouton Supprimer -->
<form action="https://soft.babi-app.com/products/3" method="POST" class="inline-block ml-2" onsubmit="return confirm('Êtes-vous sûr de vouloir supprimer ce produit ?');">
<input type="hidden" name="_token" value="0NNzsxnGE7beJBGvkItN6Dh4W438ipkYrbGtsG5D" autocomplete="off"> <input type="hidden" name="_method" value="DELETE"> <button type="submit" class="text-red-500 hover:text-red-700 focus:outline-none focus:ring-2 focus:ring-red-500" title="Supprimer">
<i class="fas fa-trash-alt"></i>
</button>
</form>
<!-- Bouton Imprimer QR Code individuel -->
<a href="https://soft.babi-app.com/products/3/print-qrcode" class="text-green-500 hover:text-green-700 ml-2" title="Imprimer QR Code">
<i class="fas fa-qrcode"></i>
</a>
</td>
</tr>
<tr class="hover:bg-gray-50">
<!-- Colonne Photo -->
<td class="px-4 py-2 border-b text-sm text-gray-700">
<span class="text-gray-500">N/A</span>
</td>
<!-- Colonne QR Code -->
<td class="px-4 py-2 border-b text-sm text-gray-700">
<!--?xml version="1.0" encoding="UTF-8"?-->
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="60" height="60" viewBox="0 0 60 60"><rect x="0" y="0" width="60" height="60" fill="#ffffff"></rect><g transform="scale(2.857)"><g transform="translate(0,0)"><path fill-rule="evenodd" d="M8 0L8 1L9 1L9 0ZM10 0L10 2L8 2L8 5L9 5L9 6L8 6L8 7L9 7L9 6L10 6L10 7L11 7L11 8L8 8L8 10L9 10L9 9L10 9L10 10L11 10L11 11L8 11L8 12L10 12L10 14L9 14L9 13L8 13L8 14L9 14L9 16L11 16L11 15L13 15L13 14L12 14L12 13L13 13L13 12L12 12L12 10L15 10L15 9L14 9L14 8L13 8L13 5L12 5L12 4L13 4L13 3L12 3L12 1L13 1L13 0ZM10 2L10 4L9 4L9 5L11 5L11 4L12 4L12 3L11 3L11 2ZM11 6L11 7L12 7L12 6ZM0 8L0 10L1 10L1 11L0 11L0 13L1 13L1 12L2 12L2 11L3 11L3 12L4 12L4 13L7 13L7 12L6 12L6 11L7 11L7 10L6 10L6 11L5 11L5 10L4 10L4 8ZM6 8L6 9L7 9L7 8ZM16 8L16 9L17 9L17 11L14 11L14 12L15 12L15 13L14 13L14 14L15 14L15 16L12 16L12 17L8 17L8 21L9 21L9 20L10 20L10 19L11 19L11 18L12 18L12 19L13 19L13 21L14 21L14 19L15 19L15 20L16 20L16 21L17 21L17 20L16 20L16 18L20 18L20 17L21 17L21 16L20 16L20 17L17 17L17 15L18 15L18 16L19 16L19 15L18 15L18 13L19 13L19 14L21 14L21 13L19 13L19 12L20 12L20 11L21 11L21 10L20 10L20 11L19 11L19 10L18 10L18 9L19 9L19 8ZM20 8L20 9L21 9L21 8ZM11 12L11 13L12 13L12 12ZM16 12L16 13L15 13L15 14L16 14L16 15L17 15L17 13L18 13L18 12ZM10 14L10 15L11 15L11 14ZM12 17L12 18L13 18L13 19L14 19L14 17ZM18 19L18 20L19 20L19 21L20 21L20 20L21 20L21 19ZM0 0L0 7L7 7L7 0ZM1 1L1 6L6 6L6 1ZM2 2L2 5L5 5L5 2ZM14 0L14 7L21 7L21 0ZM15 1L15 6L20 6L20 1ZM16 2L16 5L19 5L19 2ZM0 14L0 21L7 21L7 14ZM1 15L1 20L6 20L6 15ZM2 16L2 19L5 19L5 16Z" fill="#000000"></path></g></g></svg>
</td>
<!-- Autres colonnes -->
<td class="px-4 py-2 border-b text-sm text-gray-700">qsp soumaa</td>
<td class="px-4 py-2 border-b text-sm text-gray-700">N/A</td>
<td class="px-4 py-2 border-b text-sm text-gray-700">FILTRATION</td>
<td class="px-4 py-2 border-b text-sm text-gray-700">FILTRE CARBURANT</td>
<td class="px-4 py-2 border-b text-sm text-gray-700">FILTRE A GASOIL</td>
<td class="px-4 py-2 border-b text-sm text-gray-700">Avant gauche</td>
<td class="px-4 py-2 border-b text-sm text-gray-700">N/A</td>
<td class="px-4 py-2 border-b text-sm text-gray-700">N/A</td>
<td class="px-4 py-2 border-b text-sm text-gray-700 text-right">0</td>
<td class="px-4 py-2 border-b text-sm text-gray-700 text-right">0,00 DA</td>
<td class="px-4 py-2 border-b text-sm text-gray-700 text-right">0,00 DA</td>
<td class="px-4 py-2 border-b text-sm text-gray-700">test</td>
<td class="px-4 py-2 border-b text-sm text-gray-700">N/A</td>
<!-- Champs supplémentaires -->
<td class="px-4 py-2 border-b text-sm text-gray-700">N/A</td>
<td class="px-4 py-2 border-b text-sm text-gray-700">N/A</td>
<td class="px-4 py-2 border-b text-sm text-gray-700">N/A</td>
<td class="px-4 py-2 border-b text-sm text-gray-700">N/A</td>
<!-- Actions -->
<td class="px-4 py-2 border-b text-center text-sm font-medium">
<!-- Bouton Modifier -->
<a href="" class="text-blue-500 hover:text-blue-700 ml-2" title="Modifier">
<i class="fas fa-edit"></i>
</a>
<!-- Bouton Supprimer -->
<form action="https://soft.babi-app.com/products/4" method="POST" class="inline-block ml-2" onsubmit="return confirm('Êtes-vous sûr de vouloir supprimer ce produit ?');">
<input type="hidden" name="_token" value="0NNzsxnGE7beJBGvkItN6Dh4W438ipkYrbGtsG5D" autocomplete="off"> <input type="hidden" name="_method" value="DELETE"> <button type="submit" class="text-red-500 hover:text-red-700 focus:outline-none focus:ring-2 focus:ring-red-500" title="Supprimer">
<i class="fas fa-trash-alt"></i>
</button>
</form>
<!-- Bouton Imprimer QR Code individuel -->
<a href="https://soft.babi-app.com/products/4/print-qrcode" class="text-green-500 hover:text-green-700 ml-2" title="Imprimer QR Code">
<i class="fas fa-qrcode"></i>
</a>
</td>
</tr>
<tr class="hover:bg-gray-50">
<!-- Colonne Photo -->
<td class="px-4 py-2 border-b text-sm text-gray-700">
<span class="text-gray-500">N/A</span>
</td>
<!-- Colonne QR Code -->
<td class="px-4 py-2 border-b text-sm text-gray-700">
<!--?xml version="1.0" encoding="UTF-8"?-->
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="60" height="60" viewBox="0 0 60 60"><rect x="0" y="0" width="60" height="60" fill="#ffffff"></rect><g transform="scale(2.857)"><g transform="translate(0,0)"><path fill-rule="evenodd" d="M9 0L9 2L8 2L8 3L9 3L9 4L10 4L10 5L11 5L11 4L12 4L12 7L11 7L11 6L10 6L10 7L9 7L9 6L8 6L8 8L4 8L4 9L3 9L3 8L0 8L0 9L1 9L1 10L2 10L2 11L0 11L0 13L1 13L1 12L3 12L3 11L8 11L8 17L9 17L9 18L8 18L8 21L10 21L10 19L11 19L11 18L10 18L10 17L12 17L12 16L13 16L13 17L14 17L14 18L15 18L15 17L16 17L16 16L17 16L17 17L18 17L18 18L20 18L20 19L21 19L21 18L20 18L20 17L21 17L21 16L20 16L20 15L21 15L21 14L18 14L18 13L21 13L21 12L20 12L20 11L21 11L21 10L20 10L20 9L19 9L19 8L18 8L18 10L20 10L20 11L18 11L18 13L17 13L17 12L16 12L16 13L15 13L15 11L14 11L14 13L13 13L13 12L12 12L12 13L11 13L11 14L9 14L9 11L10 11L10 10L11 10L11 9L12 9L12 8L13 8L13 9L14 9L14 10L15 10L15 8L13 8L13 4L12 4L12 3L13 3L13 2L12 2L12 1L13 1L13 0L11 0L11 1L10 1L10 0ZM10 2L10 4L11 4L11 2ZM10 7L10 8L11 8L11 7ZM5 9L5 10L7 10L7 9ZM8 10L8 11L9 11L9 10ZM12 10L12 11L13 11L13 10ZM16 10L16 11L17 11L17 10ZM4 12L4 13L7 13L7 12ZM12 13L12 15L13 15L13 13ZM14 13L14 14L15 14L15 13ZM16 13L16 15L17 15L17 13ZM14 15L14 16L15 16L15 15ZM18 15L18 16L19 16L19 17L20 17L20 16L19 16L19 15ZM9 18L9 19L10 19L10 18ZM12 18L12 19L13 19L13 18ZM16 18L16 19L17 19L17 18ZM14 19L14 21L15 21L15 19ZM18 19L18 21L19 21L19 19ZM12 20L12 21L13 21L13 20ZM16 20L16 21L17 21L17 20ZM20 20L20 21L21 21L21 20ZM0 0L0 7L7 7L7 0ZM1 1L1 6L6 6L6 1ZM2 2L2 5L5 5L5 2ZM14 0L14 7L21 7L21 0ZM15 1L15 6L20 6L20 1ZM16 2L16 5L19 5L19 2ZM0 14L0 21L7 21L7 14ZM1 15L1 20L6 20L6 15ZM2 16L2 19L5 19L5 16Z" fill="#000000"></path></g></g></svg>
</td>
<!-- Autres colonnes -->
<td class="px-4 py-2 border-b text-sm text-gray-700">qsp soumaa</td>
<td class="px-4 py-2 border-b text-sm text-gray-700">N/A</td>
<td class="px-4 py-2 border-b text-sm text-gray-700">FILTRATION</td>
<td class="px-4 py-2 border-b text-sm text-gray-700">FILTRE HABITACLE</td>
<td class="px-4 py-2 border-b text-sm text-gray-700">FILTRE HABITACLE</td>
<td class="px-4 py-2 border-b text-sm text-gray-700">Arrière droit</td>
<td class="px-4 py-2 border-b text-sm text-gray-700">N/A</td>
<td class="px-4 py-2 border-b text-sm text-gray-700">N/A</td>
<td class="px-4 py-2 border-b text-sm text-gray-700 text-right">0</td>
<td class="px-4 py-2 border-b text-sm text-gray-700 text-right">0,00 DA</td>
<td class="px-4 py-2 border-b text-sm text-gray-700 text-right">0,00 DA</td>
<td class="px-4 py-2 border-b text-sm text-gray-700">test</td>
<td class="px-4 py-2 border-b text-sm text-gray-700">N/A</td>
<!-- Champs supplémentaires -->
<td class="px-4 py-2 border-b text-sm text-gray-700">N/A</td>
<td class="px-4 py-2 border-b text-sm text-gray-700">N/A</td>
<td class="px-4 py-2 border-b text-sm text-gray-700">N/A</td>
<td class="px-4 py-2 border-b text-sm text-gray-700">N/A</td>
<!-- Actions -->
<td class="px-4 py-2 border-b text-center text-sm font-medium">
<!-- Bouton Modifier -->
<a href="" class="text-blue-500 hover:text-blue-700 ml-2" title="Modifier">
<i class="fas fa-edit"></i>
</a>
<!-- Bouton Supprimer -->
<form action="https://soft.babi-app.com/products/5" method="POST" class="inline-block ml-2" onsubmit="return confirm('Êtes-vous sûr de vouloir supprimer ce produit ?');">
<input type="hidden" name="_token" value="0NNzsxnGE7beJBGvkItN6Dh4W438ipkYrbGtsG5D" autocomplete="off"> <input type="hidden" name="_method" value="DELETE"> <button type="submit" class="text-red-500 hover:text-red-700 focus:outline-none focus:ring-2 focus:ring-red-500" title="Supprimer">
<i class="fas fa-trash-alt"></i>
</button>
</form>
<!-- Bouton Imprimer QR Code individuel -->
<a href="https://soft.babi-app.com/products/5/print-qrcode" class="text-green-500 hover:text-green-700 ml-2" title="Imprimer QR Code">
<i class="fas fa-qrcode"></i>
</a>
</td>
</tr>
<tr class="hover:bg-gray-50">
<!-- Colonne Photo -->
<td class="px-4 py-2 border-b text-sm text-gray-700">
<span class="text-gray-500">N/A</span>
</td>
<!-- Colonne QR Code -->
<td class="px-4 py-2 border-b text-sm text-gray-700">
<!--?xml version="1.0" encoding="UTF-8"?-->
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="60" height="60" viewBox="0 0 60 60"><rect x="0" y="0" width="60" height="60" fill="#ffffff"></rect><g transform="scale(2.857)"><g transform="translate(0,0)"><path fill-rule="evenodd" d="M9 0L9 2L8 2L8 3L9 3L9 4L10 4L10 5L11 5L11 4L12 4L12 7L11 7L11 6L10 6L10 7L9 7L9 6L8 6L8 8L4 8L4 9L3 9L3 8L0 8L0 10L1 10L1 9L3 9L3 10L4 10L4 11L2 11L2 13L3 13L3 12L4 12L4 13L5 13L5 12L6 12L6 13L7 13L7 12L6 12L6 11L7 11L7 10L8 10L8 17L9 17L9 18L8 18L8 21L9 21L9 18L11 18L11 17L12 17L12 16L13 16L13 17L14 17L14 18L15 18L15 17L16 17L16 16L17 16L17 17L18 17L18 18L20 18L20 19L21 19L21 18L20 18L20 17L21 17L21 16L20 16L20 15L21 15L21 14L18 14L18 13L19 13L19 12L20 12L20 11L21 11L21 10L20 10L20 9L19 9L19 8L18 8L18 10L20 10L20 11L18 11L18 13L17 13L17 12L16 12L16 13L15 13L15 11L14 11L14 13L13 13L13 12L12 12L12 13L11 13L11 12L9 12L9 10L10 10L10 9L12 9L12 8L13 8L13 9L14 9L14 10L15 10L15 8L13 8L13 4L12 4L12 3L13 3L13 2L12 2L12 1L13 1L13 0L11 0L11 1L10 1L10 0ZM10 2L10 4L11 4L11 2ZM10 7L10 8L11 8L11 7ZM4 9L4 10L5 10L5 11L6 11L6 10L7 10L7 9ZM12 10L12 11L13 11L13 10ZM16 10L16 11L17 11L17 10ZM9 13L9 16L10 16L10 17L11 17L11 13ZM12 13L12 15L13 15L13 13ZM14 13L14 14L15 14L15 13ZM16 13L16 15L17 15L17 13ZM14 15L14 16L15 16L15 15ZM18 15L18 16L19 16L19 17L20 17L20 16L19 16L19 15ZM12 18L12 19L13 19L13 18ZM16 18L16 19L17 19L17 18ZM10 19L10 21L11 21L11 19ZM14 19L14 21L15 21L15 19ZM18 19L18 21L19 21L19 19ZM12 20L12 21L13 21L13 20ZM16 20L16 21L17 21L17 20ZM20 20L20 21L21 21L21 20ZM0 0L0 7L7 7L7 0ZM1 1L1 6L6 6L6 1ZM2 2L2 5L5 5L5 2ZM14 0L14 7L21 7L21 0ZM15 1L15 6L20 6L20 1ZM16 2L16 5L19 5L19 2ZM0 14L0 21L7 21L7 14ZM1 15L1 20L6 20L6 15ZM2 16L2 19L5 19L5 16Z" fill="#000000"></path></g></g></svg>
</td>
<!-- Autres colonnes -->
<td class="px-4 py-2 border-b text-sm text-gray-700">qsp soumaa</td>
<td class="px-4 py-2 border-b text-sm text-gray-700">N/A</td>
<td class="px-4 py-2 border-b text-sm text-gray-700">FILTRATION</td>
<td class="px-4 py-2 border-b text-sm text-gray-700">FILTRE HABITACLE</td>
<td class="px-4 py-2 border-b text-sm text-gray-700">FILTRE HABITACLE</td>
<td class="px-4 py-2 border-b text-sm text-gray-700">Avant droit</td>
<td class="px-4 py-2 border-b text-sm text-gray-700">N/A</td>
<td class="px-4 py-2 border-b text-sm text-gray-700">N/A</td>
<td class="px-4 py-2 border-b text-sm text-gray-700 text-right">0</td>
<td class="px-4 py-2 border-b text-sm text-gray-700 text-right">0,00 DA</td>
<td class="px-4 py-2 border-b text-sm text-gray-700 text-right">0,00 DA</td>
<td class="px-4 py-2 border-b text-sm text-gray-700">N/A</td>
<td class="px-4 py-2 border-b text-sm text-gray-700">N/A</td>
<!-- Champs supplémentaires -->
<td class="px-4 py-2 border-b text-sm text-gray-700">N/A</td>
<td class="px-4 py-2 border-b text-sm text-gray-700">N/A</td>
<td class="px-4 py-2 border-b text-sm text-gray-700">N/A</td>
<td class="px-4 py-2 border-b text-sm text-gray-700">N/A</td>
<!-- Actions -->
<td class="px-4 py-2 border-b text-center text-sm font-medium">
<!-- Bouton Modifier -->
<a href="" class="text-blue-500 hover:text-blue-700 ml-2" title="Modifier">
<i class="fas fa-edit"></i>
</a>
<!-- Bouton Supprimer -->
<form action="https://soft.babi-app.com/products/6" method="POST" class="inline-block ml-2" onsubmit="return confirm('Êtes-vous sûr de vouloir supprimer ce produit ?');">
<input type="hidden" name="_token" value="0NNzsxnGE7beJBGvkItN6Dh4W438ipkYrbGtsG5D" autocomplete="off"> <input type="hidden" name="_method" value="DELETE"> <button type="submit" class="text-red-500 hover:text-red-700 focus:outline-none focus:ring-2 focus:ring-red-500" title="Supprimer">
<i class="fas fa-trash-alt"></i>
</button>
</form>
<!-- Bouton Imprimer QR Code individuel -->
<a href="https://soft.babi-app.com/products/6/print-qrcode" class="text-green-500 hover:text-green-700 ml-2" title="Imprimer QR Code">
<i class="fas fa-qrcode"></i>
</a>
</td>
</tr>
<tr class="hover:bg-gray-50">
<!-- Colonne Photo -->
<td class="px-4 py-2 border-b text-sm text-gray-700">
<span class="text-gray-500">N/A</span>
</td>
<!-- Colonne QR Code -->
<td class="px-4 py-2 border-b text-sm text-gray-700">
<!--?xml version="1.0" encoding="UTF-8"?-->
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="60" height="60" viewBox="0 0 60 60"><rect x="0" y="0" width="60" height="60" fill="#ffffff"></rect><g transform="scale(2.857)"><g transform="translate(0,0)"><path fill-rule="evenodd" d="M8 0L8 1L9 1L9 0ZM10 0L10 2L8 2L8 5L9 5L9 6L8 6L8 7L9 7L9 6L10 6L10 7L11 7L11 8L8 8L8 10L5 10L5 9L4 9L4 8L0 8L0 9L3 9L3 10L4 10L4 11L8 11L8 12L9 12L9 13L8 13L8 14L9 14L9 13L10 13L10 15L13 15L13 14L12 14L12 13L13 13L13 12L12 12L12 10L15 10L15 9L14 9L14 8L13 8L13 5L12 5L12 4L13 4L13 3L12 3L12 1L13 1L13 0ZM10 2L10 4L9 4L9 5L11 5L11 4L12 4L12 3L11 3L11 2ZM11 6L11 7L12 7L12 6ZM6 8L6 9L7 9L7 8ZM16 8L16 9L17 9L17 11L14 11L14 12L15 12L15 13L14 13L14 14L15 14L15 16L12 16L12 17L11 17L11 16L10 16L10 17L8 17L8 21L11 21L11 19L10 19L10 17L11 17L11 18L12 18L12 19L13 19L13 21L14 21L14 19L15 19L15 20L16 20L16 21L17 21L17 20L16 20L16 18L20 18L20 17L21 17L21 16L20 16L20 17L17 17L17 15L18 15L18 16L19 16L19 15L18 15L18 13L19 13L19 14L21 14L21 12L20 12L20 11L21 11L21 10L20 10L20 11L19 11L19 10L18 10L18 9L19 9L19 8ZM20 8L20 9L21 9L21 8ZM9 9L9 10L10 10L10 11L11 11L11 9ZM1 10L1 11L2 11L2 10ZM2 12L2 13L3 13L3 12ZM4 12L4 13L5 13L5 12ZM6 12L6 13L7 13L7 12ZM10 12L10 13L12 13L12 12ZM16 12L16 13L15 13L15 14L16 14L16 15L17 15L17 13L18 13L18 12ZM12 17L12 18L13 18L13 19L14 19L14 17ZM9 19L9 20L10 20L10 19ZM18 19L18 20L19 20L19 21L20 21L20 20L21 20L21 19ZM0 0L0 7L7 7L7 0ZM1 1L1 6L6 6L6 1ZM2 2L2 5L5 5L5 2ZM14 0L14 7L21 7L21 0ZM15 1L15 6L20 6L20 1ZM16 2L16 5L19 5L19 2ZM0 14L0 21L7 21L7 14ZM1 15L1 20L6 20L6 15ZM2 16L2 19L5 19L5 16Z" fill="#000000"></path></g></g></svg>
</td>
<!-- Autres colonnes -->
<td class="px-4 py-2 border-b text-sm text-gray-700">qsp soumaa</td>
<td class="px-4 py-2 border-b text-sm text-gray-700">N/A</td>
<td class="px-4 py-2 border-b text-sm text-gray-700">FILTRATION</td>
<td class="px-4 py-2 border-b text-sm text-gray-700">FILTRE HABITACLE</td>
<td class="px-4 py-2 border-b text-sm text-gray-700">FILTRE HABITACLE</td>
<td class="px-4 py-2 border-b text-sm text-gray-700">Avant droit</td>
<td class="px-4 py-2 border-b text-sm text-gray-700">N/A</td>
<td class="px-4 py-2 border-b text-sm text-gray-700">N/A</td>
<td class="px-4 py-2 border-b text-sm text-gray-700 text-right">0</td>
<td class="px-4 py-2 border-b text-sm text-gray-700 text-right">0,00 DA</td>
<td class="px-4 py-2 border-b text-sm text-gray-700 text-right">0,00 DA</td>
<td class="px-4 py-2 border-b text-sm text-gray-700">N/A</td>
<td class="px-4 py-2 border-b text-sm text-gray-700">N/A</td>
<!-- Champs supplémentaires -->
<td class="px-4 py-2 border-b text-sm text-gray-700">N/A</td>
<td class="px-4 py-2 border-b text-sm text-gray-700">N/A</td>
<td class="px-4 py-2 border-b text-sm text-gray-700">N/A</td>
<td class="px-4 py-2 border-b text-sm text-gray-700">N/A</td>
<!-- Actions -->
<td class="px-4 py-2 border-b text-center text-sm font-medium">
<!-- Bouton Modifier -->
<a href="" class="text-blue-500 hover:text-blue-700 ml-2" title="Modifier">
<i class="fas fa-edit"></i>
</a>
<!-- Bouton Supprimer -->
<form action="https://soft.babi-app.com/products/7" method="POST" class="inline-block ml-2" onsubmit="return confirm('Êtes-vous sûr de vouloir supprimer ce produit ?');">
<input type="hidden" name="_token" value="0NNzsxnGE7beJBGvkItN6Dh4W438ipkYrbGtsG5D" autocomplete="off"> <input type="hidden" name="_method" value="DELETE"> <button type="submit" class="text-red-500 hover:text-red-700 focus:outline-none focus:ring-2 focus:ring-red-500" title="Supprimer">
<i class="fas fa-trash-alt"></i>
</button>
</form>
<!-- Bouton Imprimer QR Code individuel -->
<a href="https://soft.babi-app.com/products/7/print-qrcode" class="text-green-500 hover:text-green-700 ml-2" title="Imprimer QR Code">
<i class="fas fa-qrcode"></i>
</a>
</td>
</tr>
<tr class="hover:bg-gray-50">
<!-- Colonne Photo -->
<td class="px-4 py-2 border-b text-sm text-gray-700">
<span class="text-gray-500">N/A</span>
</td>
<!-- Colonne QR Code -->
<td class="px-4 py-2 border-b text-sm text-gray-700">
<!--?xml version="1.0" encoding="UTF-8"?-->
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="60" height="60" viewBox="0 0 60 60"><rect x="0" y="0" width="60" height="60" fill="#ffffff"></rect><g transform="scale(2.857)"><g transform="translate(0,0)"><path fill-rule="evenodd" d="M9 0L9 2L8 2L8 3L9 3L9 4L10 4L10 5L11 5L11 4L12 4L12 7L11 7L11 6L10 6L10 7L9 7L9 6L8 6L8 8L4 8L4 9L5 9L5 10L4 10L4 11L3 11L3 12L1 12L1 11L2 11L2 9L3 9L3 8L0 8L0 10L1 10L1 11L0 11L0 13L3 13L3 12L4 12L4 13L7 13L7 12L8 12L8 17L9 17L9 18L8 18L8 21L10 21L10 19L11 19L11 18L10 18L10 17L12 17L12 16L13 16L13 17L14 17L14 18L15 18L15 17L16 17L16 16L17 16L17 17L18 17L18 18L20 18L20 19L21 19L21 18L20 18L20 17L21 17L21 16L20 16L20 15L21 15L21 12L20 12L20 11L21 11L21 10L20 10L20 9L19 9L19 8L18 8L18 10L20 10L20 11L18 11L18 13L17 13L17 12L16 12L16 13L15 13L15 11L14 11L14 13L13 13L13 12L12 12L12 13L11 13L11 16L10 16L10 17L9 17L9 13L10 13L10 12L11 12L11 10L10 10L10 9L12 9L12 8L13 8L13 9L14 9L14 10L15 10L15 8L13 8L13 4L12 4L12 3L13 3L13 2L12 2L12 1L13 1L13 0L11 0L11 1L10 1L10 0ZM10 2L10 4L11 4L11 2ZM10 7L10 8L11 8L11 7ZM6 9L6 10L7 10L7 9ZM8 9L8 11L10 11L10 10L9 10L9 9ZM12 10L12 11L13 11L13 10ZM16 10L16 11L17 11L17 10ZM5 11L5 12L7 12L7 11ZM19 12L19 13L18 13L18 14L19 14L19 13L20 13L20 12ZM12 13L12 15L13 15L13 13ZM14 13L14 14L15 14L15 13ZM16 13L16 15L17 15L17 13ZM14 15L14 16L15 16L15 15ZM18 15L18 16L19 16L19 17L20 17L20 16L19 16L19 15ZM9 18L9 19L10 19L10 18ZM12 18L12 19L13 19L13 18ZM16 18L16 19L17 19L17 18ZM14 19L14 21L15 21L15 19ZM18 19L18 21L19 21L19 19ZM12 20L12 21L13 21L13 20ZM16 20L16 21L17 21L17 20ZM20 20L20 21L21 21L21 20ZM0 0L0 7L7 7L7 0ZM1 1L1 6L6 6L6 1ZM2 2L2 5L5 5L5 2ZM14 0L14 7L21 7L21 0ZM15 1L15 6L20 6L20 1ZM16 2L16 5L19 5L19 2ZM0 14L0 21L7 21L7 14ZM1 15L1 20L6 20L6 15ZM2 16L2 19L5 19L5 16Z" fill="#000000"></path></g></g></svg>
</td>
<!-- Autres colonnes -->
<td class="px-4 py-2 border-b text-sm text-gray-700">qsp soumaa</td>
<td class="px-4 py-2 border-b text-sm text-gray-700">N/A</td>
<td class="px-4 py-2 border-b text-sm text-gray-700">FILTRATION</td>
<td class="px-4 py-2 border-b text-sm text-gray-700">FILTRE HABITACLE</td>
<td class="px-4 py-2 border-b text-sm text-gray-700">FILTRE HABITACLE</td>
<td class="px-4 py-2 border-b text-sm text-gray-700">Avant droit</td>
<td class="px-4 py-2 border-b text-sm text-gray-700">N/A</td>
<td class="px-4 py-2 border-b text-sm text-gray-700">N/A</td>
<td class="px-4 py-2 border-b text-sm text-gray-700 text-right">0</td>
<td class="px-4 py-2 border-b text-sm text-gray-700 text-right">0,00 DA</td>
<td class="px-4 py-2 border-b text-sm text-gray-700 text-right">0,00 DA</td>
<td class="px-4 py-2 border-b text-sm text-gray-700">N/A</td>
<td class="px-4 py-2 border-b text-sm text-gray-700">N/A</td>
<!-- Champs supplémentaires -->
<td class="px-4 py-2 border-b text-sm text-gray-700">N/A</td>
<td class="px-4 py-2 border-b text-sm text-gray-700">N/A</td>
<td class="px-4 py-2 border-b text-sm text-gray-700">N/A</td>
<td class="px-4 py-2 border-b text-sm text-gray-700">N/A</td>
<!-- Actions -->
<td class="px-4 py-2 border-b text-center text-sm font-medium">
<!-- Bouton Modifier -->
<a href="" class="text-blue-500 hover:text-blue-700 ml-2" title="Modifier">
<i class="fas fa-edit"></i>
</a>
<!-- Bouton Supprimer -->
<form action="https://soft.babi-app.com/products/8" method="POST" class="inline-block ml-2" onsubmit="return confirm('Êtes-vous sûr de vouloir supprimer ce produit ?');">
<input type="hidden" name="_token" value="0NNzsxnGE7beJBGvkItN6Dh4W438ipkYrbGtsG5D" autocomplete="off"> <input type="hidden" name="_method" value="DELETE"> <button type="submit" class="text-red-500 hover:text-red-700 focus:outline-none focus:ring-2 focus:ring-red-500" title="Supprimer">
<i class="fas fa-trash-alt"></i>
</button>
</form>
<!-- Bouton Imprimer QR Code individuel -->
<a href="https://soft.babi-app.com/products/8/print-qrcode" class="text-green-500 hover:text-green-700 ml-2" title="Imprimer QR Code">
<i class="fas fa-qrcode"></i>
</a>
</td>
</tr>
<tr class="hover:bg-gray-50">
<!-- Colonne Photo -->
<td class="px-4 py-2 border-b text-sm text-gray-700">
<span class="text-gray-500">N/A</span>
</td>
<!-- Colonne QR Code -->
<td class="px-4 py-2 border-b text-sm text-gray-700">
<!--?xml version="1.0" encoding="UTF-8"?-->
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="60" height="60" viewBox="0 0 60 60"><rect x="0" y="0" width="60" height="60" fill="#ffffff"></rect><g transform="scale(2.857)"><g transform="translate(0,0)"><path fill-rule="evenodd" d="M8 0L8 4L12 4L12 5L11 5L11 6L10 6L10 5L8 5L8 7L9 7L9 9L7 9L7 8L4 8L4 9L2 9L2 8L0 8L0 9L2 9L2 11L0 11L0 13L1 13L1 12L3 12L3 13L8 13L8 14L9 14L9 15L8 15L8 17L9 17L9 19L8 19L8 21L9 21L9 19L10 19L10 21L11 21L11 19L12 19L12 18L13 18L13 17L12 17L12 16L13 16L13 15L14 15L14 14L15 14L15 11L16 11L16 12L17 12L17 11L18 11L18 14L19 14L19 15L20 15L20 13L21 13L21 12L20 12L20 13L19 13L19 10L21 10L21 8L17 8L17 10L16 10L16 8L15 8L15 10L14 10L14 11L13 11L13 12L12 12L12 15L11 15L11 12L10 12L10 11L9 11L9 10L10 10L10 8L11 8L11 11L12 11L12 10L13 10L13 9L12 9L12 8L13 8L13 6L12 6L12 5L13 5L13 4L12 4L12 3L9 3L9 1L10 1L10 2L11 2L11 1L12 1L12 2L13 2L13 0ZM9 6L9 7L10 7L10 6ZM11 6L11 7L12 7L12 6ZM6 9L6 10L4 10L4 12L8 12L8 10L7 10L7 9ZM18 9L18 10L19 10L19 9ZM6 10L6 11L7 11L7 10ZM9 12L9 14L10 14L10 12ZM9 15L9 16L10 16L10 19L11 19L11 16L10 16L10 15ZM15 15L15 16L14 16L14 17L15 17L15 18L14 18L14 19L13 19L13 20L12 20L12 21L15 21L15 19L16 19L16 20L17 20L17 19L18 19L18 21L21 21L21 20L20 20L20 19L19 19L19 18L21 18L21 16L18 16L18 15L17 15L17 16L16 16L16 15ZM16 17L16 18L17 18L17 17ZM18 17L18 18L19 18L19 17ZM0 0L0 7L7 7L7 0ZM1 1L1 6L6 6L6 1ZM2 2L2 5L5 5L5 2ZM14 0L14 7L21 7L21 0ZM15 1L15 6L20 6L20 1ZM16 2L16 5L19 5L19 2ZM0 14L0 21L7 21L7 14ZM1 15L1 20L6 20L6 15ZM2 16L2 19L5 19L5 16Z" fill="#000000"></path></g></g></svg>
</td>
<!-- Autres colonnes -->
<td class="px-4 py-2 border-b text-sm text-gray-700">qsp soumaa</td>
<td class="px-4 py-2 border-b text-sm text-gray-700">N/A</td>
<td class="px-4 py-2 border-b text-sm text-gray-700">AXE</td>
<td class="px-4 py-2 border-b text-sm text-gray-700">piston</td>
<td class="px-4 py-2 border-b text-sm text-gray-700">segment</td>
<td class="px-4 py-2 border-b text-sm text-gray-700">Avant droit</td>
<td class="px-4 py-2 border-b text-sm text-gray-700">N/A</td>
<td class="px-4 py-2 border-b text-sm text-gray-700">N/A</td>
<td class="px-4 py-2 border-b text-sm text-gray-700 text-right">0</td>
<td class="px-4 py-2 border-b text-sm text-gray-700 text-right">0,00 DA</td>
<td class="px-4 py-2 border-b text-sm text-gray-700 text-right">0,00 DA</td>
<td class="px-4 py-2 border-b text-sm text-gray-700">N/A</td>
<td class="px-4 py-2 border-b text-sm text-gray-700">N/A</td>
<!-- Champs supplémentaires -->
<td class="px-4 py-2 border-b text-sm text-gray-700">N/A</td>
<td class="px-4 py-2 border-b text-sm text-gray-700">N/A</td>
<td class="px-4 py-2 border-b text-sm text-gray-700">N/A</td>
<td class="px-4 py-2 border-b text-sm text-gray-700">N/A</td>
<!-- Actions -->
<td class="px-4 py-2 border-b text-center text-sm font-medium">
<!-- Bouton Modifier -->
<a href="" class="text-blue-500 hover:text-blue-700 ml-2" title="Modifier">
<i class="fas fa-edit"></i>
</a>
<!-- Bouton Supprimer -->
<form action="https://soft.babi-app.com/products/9" method="POST" class="inline-block ml-2" onsubmit="return confirm('Êtes-vous sûr de vouloir supprimer ce produit ?');">
<input type="hidden" name="_token" value="0NNzsxnGE7beJBGvkItN6Dh4W438ipkYrbGtsG5D" autocomplete="off"> <input type="hidden" name="_method" value="DELETE"> <button type="submit" class="text-red-500 hover:text-red-700 focus:outline-none focus:ring-2 focus:ring-red-500" title="Supprimer">
<i class="fas fa-trash-alt"></i>
</button>
</form>
<!-- Bouton Imprimer QR Code individuel -->
<a href="https://soft.babi-app.com/products/9/print-qrcode" class="text-green-500 hover:text-green-700 ml-2" title="Imprimer QR Code">
<i class="fas fa-qrcode"></i>
</a>
</td>
</tr>
<tr class="hover:bg-gray-50">
<!-- Colonne Photo -->
<td class="px-4 py-2 border-b text-sm text-gray-700">
<span class="text-gray-500">N/A</span>
</td>
<!-- Colonne QR Code -->
<td class="px-4 py-2 border-b text-sm text-gray-700">
<!--?xml version="1.0" encoding="UTF-8"?-->
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="60" height="60" viewBox="0 0 60 60"><rect x="0" y="0" width="60" height="60" fill="#ffffff"></rect><g transform="scale(2.857)"><g transform="translate(0,0)"><path fill-rule="evenodd" d="M8 0L8 2L9 2L9 4L8 4L8 9L10 9L10 11L8 11L8 12L6 12L6 13L8 13L8 14L9 14L9 15L8 15L8 16L9 16L9 17L10 17L10 18L11 18L11 17L21 17L21 16L19 16L19 15L20 15L20 14L19 14L19 12L20 12L20 13L21 13L21 12L20 12L20 11L21 11L21 10L17 10L17 11L16 11L16 12L17 12L17 14L16 14L16 13L15 13L15 12L14 12L14 13L13 13L13 14L12 14L12 13L10 13L10 14L9 14L9 12L10 12L10 11L11 11L11 9L17 9L17 8L12 8L12 7L13 7L13 6L12 6L12 7L11 7L11 5L10 5L10 7L9 7L9 4L10 4L10 3L11 3L11 4L12 4L12 5L13 5L13 3L12 3L12 2L13 2L13 0ZM10 1L10 2L11 2L11 1ZM0 8L0 10L1 10L1 11L2 11L2 10L3 10L3 11L7 11L7 10L6 10L6 9L7 9L7 8L5 8L5 10L4 10L4 9L3 9L3 8ZM19 8L19 9L21 9L21 8ZM1 9L1 10L2 10L2 9ZM14 10L14 11L15 11L15 10ZM12 11L12 12L13 12L13 11ZM17 11L17 12L19 12L19 11ZM2 12L2 13L5 13L5 12ZM14 14L14 15L15 15L15 14ZM18 14L18 15L19 15L19 14ZM9 15L9 16L10 16L10 17L11 17L11 15ZM12 15L12 16L13 16L13 15ZM16 15L16 16L17 16L17 15ZM8 18L8 21L10 21L10 19L9 19L9 18ZM14 18L14 19L15 19L15 18ZM18 18L18 19L19 19L19 20L18 20L18 21L21 21L21 20L20 20L20 19L21 19L21 18ZM12 19L12 20L13 20L13 19ZM16 19L16 20L17 20L17 19ZM14 20L14 21L15 21L15 20ZM0 0L0 7L7 7L7 0ZM1 1L1 6L6 6L6 1ZM2 2L2 5L5 5L5 2ZM14 0L14 7L21 7L21 0ZM15 1L15 6L20 6L20 1ZM16 2L16 5L19 5L19 2ZM0 14L0 21L7 21L7 14ZM1 15L1 20L6 20L6 15ZM2 16L2 19L5 19L5 16Z" fill="#000000"></path></g></g></svg>
</td>
<!-- Autres colonnes -->
<td class="px-4 py-2 border-b text-sm text-gray-700">qsp soumaa</td>
<td class="px-4 py-2 border-b text-sm text-gray-700">N/A</td>
<td class="px-4 py-2 border-b text-sm text-gray-700">FILTRATION</td>
<td class="px-4 py-2 border-b text-sm text-gray-700">FILTRE CARBURANT</td>
<td class="px-4 py-2 border-b text-sm text-gray-700">FILTRE A GASOIL</td>
<td class="px-4 py-2 border-b text-sm text-gray-700">Avant droit</td>
<td class="px-4 py-2 border-b text-sm text-gray-700">N/A</td>
<td class="px-4 py-2 border-b text-sm text-gray-700">N/A</td>
<td class="px-4 py-2 border-b text-sm text-gray-700 text-right">0</td>
<td class="px-4 py-2 border-b text-sm text-gray-700 text-right">0,00 DA</td>
<td class="px-4 py-2 border-b text-sm text-gray-700 text-right">0,00 DA</td>
<td class="px-4 py-2 border-b text-sm text-gray-700">N/A</td>
<td class="px-4 py-2 border-b text-sm text-gray-700">N/A</td>
<!-- Champs supplémentaires -->
<td class="px-4 py-2 border-b text-sm text-gray-700">N/A</td>
<td class="px-4 py-2 border-b text-sm text-gray-700">N/A</td>
<td class="px-4 py-2 border-b text-sm text-gray-700">N/A</td>
<td class="px-4 py-2 border-b text-sm text-gray-700">N/A</td>
<!-- Actions -->
<td class="px-4 py-2 border-b text-center text-sm font-medium">
<!-- Bouton Modifier -->
<a href="" class="text-blue-500 hover:text-blue-700 ml-2" title="Modifier">
<i class="fas fa-edit"></i>
</a>
<!-- Bouton Supprimer -->
<form action="https://soft.babi-app.com/products/10" method="POST" class="inline-block ml-2" onsubmit="return confirm('Êtes-vous sûr de vouloir supprimer ce produit ?');">
<input type="hidden" name="_token" value="0NNzsxnGE7beJBGvkItN6Dh4W438ipkYrbGtsG5D" autocomplete="off"> <input type="hidden" name="_method" value="DELETE"> <button type="submit" class="text-red-500 hover:text-red-700 focus:outline-none focus:ring-2 focus:ring-red-500" title="Supprimer">
<i class="fas fa-trash-alt"></i>
</button>
</form>
<!-- Bouton Imprimer QR Code individuel -->
<a href="https://soft.babi-app.com/products/10/print-qrcode" class="text-green-500 hover:text-green-700 ml-2" title="Imprimer QR Code">
<i class="fas fa-qrcode"></i>
</a>
</td>
</tr>
<tr class="hover:bg-gray-50">
<!-- Colonne Photo -->
<td class="px-4 py-2 border-b text-sm text-gray-700">
<span class="text-gray-500">N/A</span>
</td>
<!-- Colonne QR Code -->
<td class="px-4 py-2 border-b text-sm text-gray-700">
<!--?xml version="1.0" encoding="UTF-8"?-->
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="60" height="60" viewBox="0 0 60 60"><rect x="0" y="0" width="60" height="60" fill="#ffffff"></rect><g transform="scale(2.857)"><g transform="translate(0,0)"><path fill-rule="evenodd" d="M8 0L8 1L9 1L9 2L8 2L8 5L11 5L11 4L12 4L12 3L13 3L13 0L12 0L12 3L11 3L11 2L10 2L10 0ZM9 2L9 4L11 4L11 3L10 3L10 2ZM8 6L8 7L9 7L9 8L8 8L8 11L7 11L7 10L6 10L6 11L7 11L7 12L6 12L6 13L7 13L7 12L8 12L8 14L9 14L9 17L8 17L8 21L13 21L13 19L14 19L14 20L15 20L15 21L16 21L16 20L17 20L17 21L18 21L18 19L19 19L19 21L20 21L20 20L21 20L21 19L19 19L19 18L20 18L20 17L21 17L21 16L20 16L20 17L19 17L19 18L17 18L17 17L18 17L18 15L21 15L21 13L20 13L20 12L18 12L18 15L17 15L17 14L16 14L16 13L17 13L17 12L16 12L16 13L15 13L15 14L14 14L14 11L18 11L18 10L19 10L19 8L16 8L16 9L15 9L15 10L13 10L13 9L14 9L14 8L13 8L13 9L12 9L12 12L11 12L11 10L10 10L10 9L11 9L11 6L10 6L10 7L9 7L9 6ZM12 6L12 7L13 7L13 6ZM0 8L0 9L2 9L2 10L3 10L3 11L0 11L0 12L3 12L3 13L5 13L5 12L3 12L3 11L5 11L5 10L4 10L4 8ZM6 8L6 9L7 9L7 8ZM9 8L9 9L10 9L10 8ZM20 8L20 9L21 9L21 8ZM16 9L16 10L18 10L18 9ZM10 12L10 13L9 13L9 14L10 14L10 16L11 16L11 15L13 15L13 12L12 12L12 13L11 13L11 12ZM19 13L19 14L20 14L20 13ZM15 14L15 17L14 17L14 16L12 16L12 17L9 17L9 20L10 20L10 19L11 19L11 18L12 18L12 19L13 19L13 17L14 17L14 19L15 19L15 20L16 20L16 17L17 17L17 15L16 15L16 14ZM0 0L0 7L7 7L7 0ZM1 1L1 6L6 6L6 1ZM2 2L2 5L5 5L5 2ZM14 0L14 7L21 7L21 0ZM15 1L15 6L20 6L20 1ZM16 2L16 5L19 5L19 2ZM0 14L0 21L7 21L7 14ZM1 15L1 20L6 20L6 15ZM2 16L2 19L5 19L5 16Z" fill="#000000"></path></g></g></svg>
</td>
<!-- Autres colonnes -->
<td class="px-4 py-2 border-b text-sm text-gray-700">qsp soumaa</td>
<td class="px-4 py-2 border-b text-sm text-gray-700">N/A</td>
<td class="px-4 py-2 border-b text-sm text-gray-700">FILTRATION</td>
<td class="px-4 py-2 border-b text-sm text-gray-700">FILTRE HABITACLE</td>
<td class="px-4 py-2 border-b text-sm text-gray-700">FILTRE HABITACLE</td>
<td class="px-4 py-2 border-b text-sm text-gray-700">Avant gauche</td>
<td class="px-4 py-2 border-b text-sm text-gray-700">N/A</td>
<td class="px-4 py-2 border-b text-sm text-gray-700">N/A</td>
<td class="px-4 py-2 border-b text-sm text-gray-700 text-right">0</td>
<td class="px-4 py-2 border-b text-sm text-gray-700 text-right">0,00 DA</td>
<td class="px-4 py-2 border-b text-sm text-gray-700 text-right">0,00 DA</td>
<td class="px-4 py-2 border-b text-sm text-gray-700">N/A</td>
<td class="px-4 py-2 border-b text-sm text-gray-700">N/A</td>
<!-- Champs supplémentaires -->
<td class="px-4 py-2 border-b text-sm text-gray-700">N/A</td>
<td class="px-4 py-2 border-b text-sm text-gray-700">N/A</td>
<td class="px-4 py-2 border-b text-sm text-gray-700">N/A</td>
<td class="px-4 py-2 border-b text-sm text-gray-700">N/A</td>
<!-- Actions -->
<td class="px-4 py-2 border-b text-center text-sm font-medium">
<!-- Bouton Modifier -->
<a href="" class="text-blue-500 hover:text-blue-700 ml-2" title="Modifier">
<i class="fas fa-edit"></i>
</a>
<!-- Bouton Supprimer -->
<form action="https://soft.babi-app.com/products/11" method="POST" class="inline-block ml-2" onsubmit="return confirm('Êtes-vous sûr de vouloir supprimer ce produit ?');">
<input type="hidden" name="_token" value="0NNzsxnGE7beJBGvkItN6Dh4W438ipkYrbGtsG5D" autocomplete="off"> <input type="hidden" name="_method" value="DELETE"> <button type="submit" class="text-red-500 hover:text-red-700 focus:outline-none focus:ring-2 focus:ring-red-500" title="Supprimer">
<i class="fas fa-trash-alt"></i>
</button>
</form>
<!-- Bouton Imprimer QR Code individuel -->
<a href="https://soft.babi-app.com/products/11/print-qrcode" class="text-green-500 hover:text-green-700 ml-2" title="Imprimer QR Code">
<i class="fas fa-qrcode"></i>
</a>
</td>
</tr>
<tr class="hover:bg-gray-50">
<!-- Colonne Photo -->
<td class="px-4 py-2 border-b text-sm text-gray-700">
<span class="text-gray-500">N/A</span>
</td>
<!-- Colonne QR Code -->
<td class="px-4 py-2 border-b text-sm text-gray-700">
<!--?xml version="1.0" encoding="UTF-8"?-->
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="60" height="60" viewBox="0 0 60 60"><rect x="0" y="0" width="60" height="60" fill="#ffffff"></rect><g transform="scale(2.857)"><g transform="translate(0,0)"><path fill-rule="evenodd" d="M10 0L10 3L12 3L12 4L8 4L8 8L6 8L6 9L5 9L5 10L3 10L3 9L4 9L4 8L3 8L3 9L2 9L2 8L0 8L0 9L1 9L1 10L0 10L0 12L1 12L1 13L2 13L2 11L3 11L3 12L5 12L5 13L7 13L7 12L8 12L8 15L9 15L9 17L8 17L8 18L9 18L9 19L8 19L8 21L9 21L9 19L10 19L10 21L11 21L11 20L13 20L13 21L14 21L14 20L13 20L13 19L15 19L15 21L16 21L16 17L15 17L15 13L16 13L16 15L18 15L18 17L19 17L19 18L17 18L17 20L18 20L18 21L19 21L19 20L20 20L20 19L21 19L21 16L20 16L20 15L21 15L21 14L20 14L20 15L18 15L18 14L19 14L19 13L21 13L21 12L20 12L20 11L21 11L21 10L20 10L20 8L18 8L18 9L17 9L17 8L14 8L14 9L13 9L13 8L10 8L10 9L11 9L11 10L9 10L9 9L8 9L8 8L9 8L9 6L10 6L10 7L11 7L11 5L13 5L13 3L12 3L12 2L13 2L13 0L12 0L12 2L11 2L11 0ZM8 1L8 3L9 3L9 1ZM12 6L12 7L13 7L13 6ZM6 9L6 10L5 10L5 12L7 12L7 11L8 11L8 12L9 12L9 13L11 13L11 14L13 14L13 15L10 15L10 14L9 14L9 15L10 15L10 16L11 16L11 17L9 17L9 18L12 18L12 19L13 19L13 17L12 17L12 16L14 16L14 14L13 14L13 12L12 12L12 11L14 11L14 10L15 10L15 9L14 9L14 10L13 10L13 9L12 9L12 11L11 11L11 12L9 12L9 10L8 10L8 9ZM16 9L16 10L17 10L17 12L16 12L16 13L17 13L17 14L18 14L18 12L19 12L19 11L18 11L18 10L19 10L19 9L18 9L18 10L17 10L17 9ZM1 10L1 11L2 11L2 10ZM6 10L6 11L7 11L7 10ZM11 12L11 13L12 13L12 12ZM19 18L19 19L18 19L18 20L19 20L19 19L20 19L20 18ZM0 0L0 7L7 7L7 0ZM1 1L1 6L6 6L6 1ZM2 2L2 5L5 5L5 2ZM14 0L14 7L21 7L21 0ZM15 1L15 6L20 6L20 1ZM16 2L16 5L19 5L19 2ZM0 14L0 21L7 21L7 14ZM1 15L1 20L6 20L6 15ZM2 16L2 19L5 19L5 16Z" fill="#000000"></path></g></g></svg>
</td>
<!-- Autres colonnes -->
<td class="px-4 py-2 border-b text-sm text-gray-700">qsp soumaa</td>
<td class="px-4 py-2 border-b text-sm text-gray-700">N/A</td>
<td class="px-4 py-2 border-b text-sm text-gray-700">FILTRATION</td>
<td class="px-4 py-2 border-b text-sm text-gray-700">FILTRE CARBURANT</td>
<td class="px-4 py-2 border-b text-sm text-gray-700">FILTRE A GASOIL</td>
<td class="px-4 py-2 border-b text-sm text-gray-700">Avant gauche</td>
<td class="px-4 py-2 border-b text-sm text-gray-700">N/A</td>
<td class="px-4 py-2 border-b text-sm text-gray-700">N/A</td>
<td class="px-4 py-2 border-b text-sm text-gray-700 text-right">0</td>
<td class="px-4 py-2 border-b text-sm text-gray-700 text-right">0,00 DA</td>
<td class="px-4 py-2 border-b text-sm text-gray-700 text-right">0,00 DA</td>
<td class="px-4 py-2 border-b text-sm text-gray-700">N/A</td>
<td class="px-4 py-2 border-b text-sm text-gray-700">N/A</td>
<!-- Champs supplémentaires -->
<td class="px-4 py-2 border-b text-sm text-gray-700">N/A</td>
<td class="px-4 py-2 border-b text-sm text-gray-700">N/A</td>
<td class="px-4 py-2 border-b text-sm text-gray-700">N/A</td>
<td class="px-4 py-2 border-b text-sm text-gray-700">N/A</td>
<!-- Actions -->
<td class="px-4 py-2 border-b text-center text-sm font-medium">
<!-- Bouton Modifier -->
<a href="" class="text-blue-500 hover:text-blue-700 ml-2" title="Modifier">
<i class="fas fa-edit"></i>
</a>
<!-- Bouton Supprimer -->
<form action="https://soft.babi-app.com/products/12" method="POST" class="inline-block ml-2" onsubmit="return confirm('Êtes-vous sûr de vouloir supprimer ce produit ?');">
<input type="hidden" name="_token" value="0NNzsxnGE7beJBGvkItN6Dh4W438ipkYrbGtsG5D" autocomplete="off"> <input type="hidden" name="_method" value="DELETE"> <button type="submit" class="text-red-500 hover:text-red-700 focus:outline-none focus:ring-2 focus:ring-red-500" title="Supprimer">
<i class="fas fa-trash-alt"></i>
</button>
</form>
<!-- Bouton Imprimer QR Code individuel -->
<a href="https://soft.babi-app.com/products/12/print-qrcode" class="text-green-500 hover:text-green-700 ml-2" title="Imprimer QR Code">
<i class="fas fa-qrcode"></i>
</a>
</td>
</tr>
<tr class="hover:bg-gray-50">
<!-- Colonne Photo -->
<td class="px-4 py-2 border-b text-sm text-gray-700">
<span class="text-gray-500">N/A</span>
</td>
<!-- Colonne QR Code -->
<td class="px-4 py-2 border-b text-sm text-gray-700">
<!--?xml version="1.0" encoding="UTF-8"?-->
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="60" height="60" viewBox="0 0 60 60"><rect x="0" y="0" width="60" height="60" fill="#ffffff"></rect><g transform="scale(2.857)"><g transform="translate(0,0)"><path fill-rule="evenodd" d="M8 0L8 1L9 1L9 2L8 2L8 5L11 5L11 4L12 4L12 3L13 3L13 0L12 0L12 3L11 3L11 2L10 2L10 0ZM9 2L9 4L11 4L11 3L10 3L10 2ZM8 6L8 7L9 7L9 8L8 8L8 9L7 9L7 8L6 8L6 9L5 9L5 10L6 10L6 11L7 11L7 12L6 12L6 13L7 13L7 12L8 12L8 14L9 14L9 16L10 16L10 17L8 17L8 21L10 21L10 20L11 20L11 21L13 21L13 19L14 19L14 20L15 20L15 21L16 21L16 20L17 20L17 21L18 21L18 19L19 19L19 21L20 21L20 20L21 20L21 19L19 19L19 18L20 18L20 17L21 17L21 16L20 16L20 17L19 17L19 18L17 18L17 17L18 17L18 15L21 15L21 13L20 13L20 12L21 12L21 11L19 11L19 12L18 12L18 15L17 15L17 14L16 14L16 13L17 13L17 12L16 12L16 13L15 13L15 14L14 14L14 11L18 11L18 10L19 10L19 8L16 8L16 9L15 9L15 10L13 10L13 9L14 9L14 8L13 8L13 9L12 9L12 12L11 12L11 13L10 13L10 14L9 14L9 11L10 11L10 10L11 10L11 6L10 6L10 7L9 7L9 6ZM12 6L12 7L13 7L13 6ZM0 8L0 11L1 11L1 12L2 12L2 13L4 13L4 12L5 12L5 11L4 11L4 12L2 12L2 11L3 11L3 10L4 10L4 8ZM9 8L9 9L8 9L8 10L7 10L7 9L6 9L6 10L7 10L7 11L8 11L8 10L10 10L10 8ZM20 8L20 9L21 9L21 8ZM1 9L1 10L2 10L2 9ZM16 9L16 10L18 10L18 9ZM12 12L12 13L11 13L11 14L10 14L10 16L11 16L11 15L13 15L13 12ZM19 13L19 14L20 14L20 13ZM15 14L15 17L14 17L14 16L12 16L12 17L11 17L11 18L12 18L12 19L13 19L13 17L14 17L14 19L15 19L15 20L16 20L16 17L17 17L17 15L16 15L16 14ZM9 18L9 20L10 20L10 18ZM0 0L0 7L7 7L7 0ZM1 1L1 6L6 6L6 1ZM2 2L2 5L5 5L5 2ZM14 0L14 7L21 7L21 0ZM15 1L15 6L20 6L20 1ZM16 2L16 5L19 5L19 2ZM0 14L0 21L7 21L7 14ZM1 15L1 20L6 20L6 15ZM2 16L2 19L5 19L5 16Z" fill="#000000"></path></g></g></svg>
</td>
<!-- Autres colonnes -->
<td class="px-4 py-2 border-b text-sm text-gray-700">qsp soumaa</td>
<td class="px-4 py-2 border-b text-sm text-gray-700">N/A</td>
<td class="px-4 py-2 border-b text-sm text-gray-700">FILTRATION</td>
<td class="px-4 py-2 border-b text-sm text-gray-700">FILTRE CARBURANT</td>
<td class="px-4 py-2 border-b text-sm text-gray-700">FILTRE A GASOIL</td>
<td class="px-4 py-2 border-b text-sm text-gray-700">Avant gauche</td>
<td class="px-4 py-2 border-b text-sm text-gray-700">N/A</td>
<td class="px-4 py-2 border-b text-sm text-gray-700">N/A</td>
<td class="px-4 py-2 border-b text-sm text-gray-700 text-right">0</td>
<td class="px-4 py-2 border-b text-sm text-gray-700 text-right">0,00 DA</td>
<td class="px-4 py-2 border-b text-sm text-gray-700 text-right">0,00 DA</td>
<td class="px-4 py-2 border-b text-sm text-gray-700">N/A</td>
<td class="px-4 py-2 border-b text-sm text-gray-700">N/A</td>
<!-- Champs supplémentaires -->
<td class="px-4 py-2 border-b text-sm text-gray-700">N/A</td>
<td class="px-4 py-2 border-b text-sm text-gray-700">N/A</td>
<td class="px-4 py-2 border-b text-sm text-gray-700">N/A</td>
<td class="px-4 py-2 border-b text-sm text-gray-700">N/A</td>
<!-- Actions -->
<td class="px-4 py-2 border-b text-center text-sm font-medium">
<!-- Bouton Modifier -->
<a href="" class="text-blue-500 hover:text-blue-700 ml-2" title="Modifier">
<i class="fas fa-edit"></i>
</a>
<!-- Bouton Supprimer -->
<form action="https://soft.babi-app.com/products/13" method="POST" class="inline-block ml-2" onsubmit="return confirm('Êtes-vous sûr de vouloir supprimer ce produit ?');">
<input type="hidden" name="_token" value="0NNzsxnGE7beJBGvkItN6Dh4W438ipkYrbGtsG5D" autocomplete="off"> <input type="hidden" name="_method" value="DELETE"> <button type="submit" class="text-red-500 hover:text-red-700 focus:outline-none focus:ring-2 focus:ring-red-500" title="Supprimer">
<i class="fas fa-trash-alt"></i>
</button>
</form>
<!-- Bouton Imprimer QR Code individuel -->
<a href="https://soft.babi-app.com/products/13/print-qrcode" class="text-green-500 hover:text-green-700 ml-2" title="Imprimer QR Code">
<i class="fas fa-qrcode"></i>
</a>
</td>
</tr>
<tr class="hover:bg-gray-50">
<!-- Colonne Photo -->
<td class="px-4 py-2 border-b text-sm text-gray-700">
<span class="text-gray-500">N/A</span>
</td>
<!-- Colonne QR Code -->
<td class="px-4 py-2 border-b text-sm text-gray-700">
<!--?xml version="1.0" encoding="UTF-8"?-->
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="60" height="60" viewBox="0 0 60 60"><rect x="0" y="0" width="60" height="60" fill="#ffffff"></rect><g transform="scale(2.857)"><g transform="translate(0,0)"><path fill-rule="evenodd" d="M9 0L9 1L8 1L8 2L9 2L9 3L8 3L8 4L9 4L9 3L10 3L10 2L9 2L9 1L10 1L10 0ZM12 0L12 1L11 1L11 2L12 2L12 1L13 1L13 0ZM11 3L11 4L10 4L10 5L8 5L8 7L9 7L9 6L10 6L10 8L6 8L6 9L8 9L8 10L5 10L5 8L0 8L0 12L1 12L1 13L4 13L4 12L5 12L5 11L8 11L8 12L10 12L10 11L12 11L12 10L13 10L13 11L14 11L14 10L13 10L13 9L14 9L14 8L13 8L13 4L12 4L12 3ZM11 5L11 7L12 7L12 5ZM10 8L10 10L12 10L12 8ZM15 8L15 10L16 10L16 11L15 11L15 12L16 12L16 13L17 13L17 14L18 14L18 13L20 13L20 12L21 12L21 11L19 11L19 9L20 9L20 8L19 8L19 9L18 9L18 8L17 8L17 9L18 9L18 13L17 13L17 10L16 10L16 8ZM1 9L1 11L2 11L2 12L4 12L4 11L5 11L5 10L4 10L4 9L3 9L3 11L2 11L2 9ZM6 12L6 13L7 13L7 12ZM11 12L11 14L10 14L10 16L8 16L8 21L12 21L12 20L11 20L11 19L12 19L12 18L13 18L13 19L14 19L14 18L13 18L13 16L15 16L15 18L16 18L16 19L15 19L15 20L16 20L16 21L19 21L19 20L20 20L20 19L19 19L19 16L18 16L18 15L17 15L17 16L18 16L18 18L16 18L16 16L15 16L15 15L16 15L16 14L15 14L15 13L14 13L14 12L13 12L13 13L12 13L12 12ZM8 13L8 15L9 15L9 13ZM11 14L11 15L12 15L12 14ZM13 14L13 15L14 15L14 14ZM20 14L20 15L21 15L21 14ZM10 16L10 19L11 19L11 18L12 18L12 16ZM17 19L17 20L18 20L18 19ZM13 20L13 21L14 21L14 20ZM0 0L0 7L7 7L7 0ZM1 1L1 6L6 6L6 1ZM2 2L2 5L5 5L5 2ZM14 0L14 7L21 7L21 0ZM15 1L15 6L20 6L20 1ZM16 2L16 5L19 5L19 2ZM0 14L0 21L7 21L7 14ZM1 15L1 20L6 20L6 15ZM2 16L2 19L5 19L5 16Z" fill="#000000"></path></g></g></svg>
</td>
<!-- Autres colonnes -->
<td class="px-4 py-2 border-b text-sm text-gray-700">qsp soumaa</td>
<td class="px-4 py-2 border-b text-sm text-gray-700">N/A</td>
<td class="px-4 py-2 border-b text-sm text-gray-700">FILTRATION</td>
<td class="px-4 py-2 border-b text-sm text-gray-700">FILTRE CARBURANT</td>
<td class="px-4 py-2 border-b text-sm text-gray-700">FILTRE A GASOIL</td>
<td class="px-4 py-2 border-b text-sm text-gray-700">Avant gauche</td>
<td class="px-4 py-2 border-b text-sm text-gray-700">N/A</td>
<td class="px-4 py-2 border-b text-sm text-gray-700">N/A</td>
<td class="px-4 py-2 border-b text-sm text-gray-700 text-right">0</td>
<td class="px-4 py-2 border-b text-sm text-gray-700 text-right">0,00 DA</td>
<td class="px-4 py-2 border-b text-sm text-gray-700 text-right">0,00 DA</td>
<td class="px-4 py-2 border-b text-sm text-gray-700">N/A</td>
<td class="px-4 py-2 border-b text-sm text-gray-700">N/A</td>
<!-- Champs supplémentaires -->
<td class="px-4 py-2 border-b text-sm text-gray-700">N/A</td>
<td class="px-4 py-2 border-b text-sm text-gray-700">N/A</td>
<td class="px-4 py-2 border-b text-sm text-gray-700">N/A</td>
<td class="px-4 py-2 border-b text-sm text-gray-700">N/A</td>
<!-- Actions -->
<td class="px-4 py-2 border-b text-center text-sm font-medium">
<!-- Bouton Modifier -->
<a href="" class="text-blue-500 hover:text-blue-700 ml-2" title="Modifier">
<i class="fas fa-edit"></i>
</a>
<!-- Bouton Supprimer -->
<form action="https://soft.babi-app.com/products/14" method="POST" class="inline-block ml-2" onsubmit="return confirm('Êtes-vous sûr de vouloir supprimer ce produit ?');">
<input type="hidden" name="_token" value="0NNzsxnGE7beJBGvkItN6Dh4W438ipkYrbGtsG5D" autocomplete="off"> <input type="hidden" name="_method" value="DELETE"> <button type="submit" class="text-red-500 hover:text-red-700 focus:outline-none focus:ring-2 focus:ring-red-500" title="Supprimer">
<i class="fas fa-trash-alt"></i>
</button>
</form>
<!-- Bouton Imprimer QR Code individuel -->
<a href="https://soft.babi-app.com/products/14/print-qrcode" class="text-green-500 hover:text-green-700 ml-2" title="Imprimer QR Code">
<i class="fas fa-qrcode"></i>
</a>
</td>
</tr>
</tbody>
</table>
</div>
<!-- Pagination -->
</div>
<!-- Script pour filtrer les produits -->
<script>
function filterProducts() {
const searchInput = document.getElementById('search-input').value.toLowerCase();
const productRows = document.querySelectorAll('#product-list tr');
productRows.forEach(function (row) {
const rowText = row.textContent.toLowerCase();
row.style.display = rowText.includes(searchInput) ? '' : 'none';
});
}
</script>
<!-- Scripts -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/qrious/4.0.2/qrious.min.js"></script>
<script>
/**
* Fonction de filtrage des produits en temps réel.
*/
function filterProducts() {
const searchInput = document.getElementById('search-input').value.toLowerCase();
const productRows = document.querySelectorAll('#product-list tr');
productRows.forEach(function (row) {
const rowText = row.textContent.toLowerCase();
row.style.display = rowText.includes(searchInput) ? '' : 'none';
});
}
/**
* Fonction pour imprimer un seul QR Code.
* @param {number} productId - L'ID du produit à imprimer.
*/
function printSingleQRCode(productId) {
// Récupérer les informations du produit
const productRow = document.querySelector(`#printable-qr-${productId}`);
if (!productRow) return;
const productName = productRow.querySelector('strong:nth-child(1)').nextSibling.textContent.trim();
const productRef = productRow.querySelector('strong:nth-child(2)').nextSibling.textContent.trim();
const productPrice = productRow.querySelector('strong:nth-child(3)').nextSibling.textContent.trim();
const qrCodeValue = `https://example.com/product/${productRow.dataset.qr_code_id}`;
// Générer le QR code dans le canvas du ticket
const ticketQRCanvas = document.getElementById('ticket-qr');
const qr = new QRious({
element: ticketQRCanvas,
value: qrCodeValue,
size: 150,
background: 'white',
foreground: 'black'
});
// Mettre à jour les informations du ticket
document.getElementById('ticket-product-name').textContent = productName;
document.getElementById('ticket-product-ref').textContent = productRef;
document.getElementById('ticket-product-price').textContent = productPrice;
// Ouvrir une nouvelle fenêtre pour l'impression
const printContent = document.getElementById('ticket-print-section').innerHTML;
const printWindow = window.open('', '_blank', 'width=400,height=600');
printWindow.document.write(`
<html>
<head>
<title>Impression QR Code</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/tailwind.min.css" rel="stylesheet">
<style>
@media print {
body {
margin: 0;
font-family: 'Arial', sans-serif;
-webkit-print-color-adjust: exact;
}
.ticket-container {
width: 100%;
padding: 20px;
border: none;
text-align: center;
}
}
.ticket-container {
text-align: center;
font-family: Arial, sans-serif;
}
.ticket-container canvas {
margin: 10px 0;
}
</style>
</head>
<body class="p-6">
${printContent}
</body>
</html>
`);
printWindow.document.close();
printWindow.focus();
printWindow.print();
printWindow.close();
}
/**
* Fonction pour imprimer tous les QR Codes.
*/
function printAllQRCodes() {
const printContent = document.getElementById('print-section').innerHTML;
const printWindow = window.open('', '_blank', 'width=800,height=1200');
printWindow.document.write(`
<html>
<head>
<title>Impression Tous les QR Codes</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/tailwind.min.css" rel="stylesheet">
<style>
@media print {
.page {
page-break-after: always;
}
body {
-webkit-print-color-adjust: exact;
}
}
.page {
text-align: center;
font-family: Arial, sans-serif;
margin-bottom: 20px;
}
.page canvas {
margin: 10px 0;
}
.page strong {
display: block;
margin-top: 5px;
}
</style>
</head>
<body class="p-6">
${printContent}
</body>
</html>
`);
printWindow.document.close();
printWindow.focus();
printWindow.print();
printWindow.close();
}
/**
* Générer les QR codes pour chaque produit lors du chargement de la page.
*/
window.onload = function() {
const products = [{"id":1,"qr_code":"11","store_id":5,"type_id":1,"category_id":1,"sub_category_id":1,"designation_id":1,"position":"test","product_reference":"test","oe_reference":"test","quantity":0,"purchase_price":"0.00","sale_price":"0.00","stock_location":"test","supplier_id":1,"country_id":1,"champs1":null,"champs2":null,"champs3":null,"champs4":null,"code_intern":"test","created_at":null,"updated_at":null,"unite":null,"designation":null,"category":{"id":1,"name":"AILE","created_at":"2024-10-03T02:08:01.000000Z","updated_at":"2024-10-03T02:11:35.000000Z"},"store":null,"sub_category":{"id":1,"name":"test","category_id":2,"created_at":"2024-10-03T10:53:58.000000Z","updated_at":"2024-10-03T12:42:50.000000Z"}},{"id":2,"qr_code":null,"store_id":1,"type_id":1,"category_id":67,"sub_category_id":186,"designation_id":29,"position":"Avant gauche","product_reference":null,"oe_reference":null,"quantity":0,"purchase_price":"0.00","sale_price":"0.00","stock_location":"test","supplier_id":1,"country_id":1,"champs1":null,"champs2":null,"champs3":null,"champs4":null,"code_intern":null,"created_at":"2024-10-12T20:55:11.000000Z","updated_at":"2024-10-12T20:55:11.000000Z","unite":null,"designation":{"id":29,"name":"FILTRE A GASOIL","sub_category_id":186,"created_at":"2024-10-10T17:20:25.000000Z","updated_at":"2024-10-10T17:20:25.000000Z"},"category":{"id":67,"name":"FILTRATION","created_at":"2024-10-10T17:18:59.000000Z","updated_at":"2024-10-10T17:18:59.000000Z"},"store":{"id":1,"name":"qsp soumaa","location":"soumaa","description":"magasin fiat","created_at":"2024-10-03T09:13:24.000000Z","updated_at":"2024-10-03T09:13:24.000000Z"},"sub_category":{"id":186,"name":"FILTRE CARBURANT","category_id":67,"created_at":"2024-10-10T17:19:41.000000Z","updated_at":"2024-10-10T17:19:41.000000Z"}},{"id":3,"qr_code":null,"store_id":1,"type_id":1,"category_id":67,"sub_category_id":187,"designation_id":30,"position":"Avant gauche","product_reference":null,"oe_reference":null,"quantity":0,"purchase_price":"0.00","sale_price":"0.00","stock_location":null,"supplier_id":1,"country_id":1,"champs1":null,"champs2":null,"champs3":null,"champs4":null,"code_intern":null,"created_at":"2024-10-12T20:56:34.000000Z","updated_at":"2024-10-12T20:56:34.000000Z","unite":null,"designation":{"id":30,"name":"FILTRE HABITACLE","sub_category_id":187,"created_at":"2024-10-10T17:21:19.000000Z","updated_at":"2024-10-10T17:21:19.000000Z"},"category":{"id":67,"name":"FILTRATION","created_at":"2024-10-10T17:18:59.000000Z","updated_at":"2024-10-10T17:18:59.000000Z"},"store":{"id":1,"name":"qsp soumaa","location":"soumaa","description":"magasin fiat","created_at":"2024-10-03T09:13:24.000000Z","updated_at":"2024-10-03T09:13:24.000000Z"},"sub_category":{"id":187,"name":"FILTRE HABITACLE","category_id":67,"created_at":"2024-10-10T17:21:01.000000Z","updated_at":"2024-10-10T17:21:01.000000Z"}},{"id":4,"qr_code":null,"store_id":1,"type_id":1,"category_id":67,"sub_category_id":186,"designation_id":29,"position":"Avant gauche","product_reference":null,"oe_reference":null,"quantity":0,"purchase_price":"0.00","sale_price":"0.00","stock_location":"test","supplier_id":1,"country_id":1,"champs1":null,"champs2":null,"champs3":null,"champs4":null,"code_intern":null,"created_at":"2024-10-12T20:57:21.000000Z","updated_at":"2024-10-12T20:57:21.000000Z","unite":null,"designation":{"id":29,"name":"FILTRE A GASOIL","sub_category_id":186,"created_at":"2024-10-10T17:20:25.000000Z","updated_at":"2024-10-10T17:20:25.000000Z"},"category":{"id":67,"name":"FILTRATION","created_at":"2024-10-10T17:18:59.000000Z","updated_at":"2024-10-10T17:18:59.000000Z"},"store":{"id":1,"name":"qsp soumaa","location":"soumaa","description":"magasin fiat","created_at":"2024-10-03T09:13:24.000000Z","updated_at":"2024-10-03T09:13:24.000000Z"},"sub_category":{"id":186,"name":"FILTRE CARBURANT","category_id":67,"created_at":"2024-10-10T17:19:41.000000Z","updated_at":"2024-10-10T17:19:41.000000Z"}},{"id":5,"qr_code":null,"store_id":1,"type_id":1,"category_id":67,"sub_category_id":187,"designation_id":30,"position":"Arri\u00e8re droit","product_reference":null,"oe_reference":null,"quantity":0,"purchase_price":"0.00","sale_price":"0.00","stock_location":"test","supplier_id":1,"country_id":1,"champs1":null,"champs2":null,"champs3":null,"champs4":null,"code_intern":null,"created_at":"2024-10-12T21:01:24.000000Z","updated_at":"2024-10-12T21:01:24.000000Z","unite":null,"designation":{"id":30,"name":"FILTRE HABITACLE","sub_category_id":187,"created_at":"2024-10-10T17:21:19.000000Z","updated_at":"2024-10-10T17:21:19.000000Z"},"category":{"id":67,"name":"FILTRATION","created_at":"2024-10-10T17:18:59.000000Z","updated_at":"2024-10-10T17:18:59.000000Z"},"store":{"id":1,"name":"qsp soumaa","location":"soumaa","description":"magasin fiat","created_at":"2024-10-03T09:13:24.000000Z","updated_at":"2024-10-03T09:13:24.000000Z"},"sub_category":{"id":187,"name":"FILTRE HABITACLE","category_id":67,"created_at":"2024-10-10T17:21:01.000000Z","updated_at":"2024-10-10T17:21:01.000000Z"}},{"id":6,"qr_code":null,"store_id":1,"type_id":1,"category_id":67,"sub_category_id":187,"designation_id":30,"position":"Avant droit","product_reference":null,"oe_reference":null,"quantity":0,"purchase_price":"0.00","sale_price":"0.00","stock_location":null,"supplier_id":1,"country_id":1,"champs1":null,"champs2":null,"champs3":null,"champs4":null,"code_intern":null,"created_at":"2024-10-12T21:04:30.000000Z","updated_at":"2024-10-12T21:04:30.000000Z","unite":null,"designation":{"id":30,"name":"FILTRE HABITACLE","sub_category_id":187,"created_at":"2024-10-10T17:21:19.000000Z","updated_at":"2024-10-10T17:21:19.000000Z"},"category":{"id":67,"name":"FILTRATION","created_at":"2024-10-10T17:18:59.000000Z","updated_at":"2024-10-10T17:18:59.000000Z"},"store":{"id":1,"name":"qsp soumaa","location":"soumaa","description":"magasin fiat","created_at":"2024-10-03T09:13:24.000000Z","updated_at":"2024-10-03T09:13:24.000000Z"},"sub_category":{"id":187,"name":"FILTRE HABITACLE","category_id":67,"created_at":"2024-10-10T17:21:01.000000Z","updated_at":"2024-10-10T17:21:01.000000Z"}},{"id":7,"qr_code":null,"store_id":1,"type_id":1,"category_id":67,"sub_category_id":187,"designation_id":30,"position":"Avant droit","product_reference":null,"oe_reference":null,"quantity":0,"purchase_price":"0.00","sale_price":"0.00","stock_location":null,"supplier_id":1,"country_id":1,"champs1":null,"champs2":null,"champs3":null,"champs4":null,"code_intern":null,"created_at":"2024-10-12T21:10:17.000000Z","updated_at":"2024-10-12T21:10:17.000000Z","unite":null,"designation":{"id":30,"name":"FILTRE HABITACLE","sub_category_id":187,"created_at":"2024-10-10T17:21:19.000000Z","updated_at":"2024-10-10T17:21:19.000000Z"},"category":{"id":67,"name":"FILTRATION","created_at":"2024-10-10T17:18:59.000000Z","updated_at":"2024-10-10T17:18:59.000000Z"},"store":{"id":1,"name":"qsp soumaa","location":"soumaa","description":"magasin fiat","created_at":"2024-10-03T09:13:24.000000Z","updated_at":"2024-10-03T09:13:24.000000Z"},"sub_category":{"id":187,"name":"FILTRE HABITACLE","category_id":67,"created_at":"2024-10-10T17:21:01.000000Z","updated_at":"2024-10-10T17:21:01.000000Z"}},{"id":8,"qr_code":null,"store_id":1,"type_id":1,"category_id":67,"sub_category_id":187,"designation_id":30,"position":"Avant droit","product_reference":null,"oe_reference":null,"quantity":0,"purchase_price":"0.00","sale_price":"0.00","stock_location":null,"supplier_id":1,"country_id":1,"champs1":null,"champs2":null,"champs3":null,"champs4":null,"code_intern":null,"created_at":"2024-10-12T21:11:10.000000Z","updated_at":"2024-10-12T21:11:10.000000Z","unite":null,"designation":{"id":30,"name":"FILTRE HABITACLE","sub_category_id":187,"created_at":"2024-10-10T17:21:19.000000Z","updated_at":"2024-10-10T17:21:19.000000Z"},"category":{"id":67,"name":"FILTRATION","created_at":"2024-10-10T17:18:59.000000Z","updated_at":"2024-10-10T17:18:59.000000Z"},"store":{"id":1,"name":"qsp soumaa","location":"soumaa","description":"magasin fiat","created_at":"2024-10-03T09:13:24.000000Z","updated_at":"2024-10-03T09:13:24.000000Z"},"sub_category":{"id":187,"name":"FILTRE HABITACLE","category_id":67,"created_at":"2024-10-10T17:21:01.000000Z","updated_at":"2024-10-10T17:21:01.000000Z"}},{"id":9,"qr_code":null,"store_id":1,"type_id":1,"category_id":11,"sub_category_id":185,"designation_id":28,"position":"Avant droit","product_reference":null,"oe_reference":null,"quantity":0,"purchase_price":"0.00","sale_price":"0.00","stock_location":null,"supplier_id":1,"country_id":1,"champs1":null,"champs2":null,"champs3":null,"champs4":null,"code_intern":null,"created_at":"2024-10-12T21:12:40.000000Z","updated_at":"2024-10-12T21:12:40.000000Z","unite":null,"designation":{"id":28,"name":"segment","sub_category_id":185,"created_at":"2024-10-10T17:11:54.000000Z","updated_at":"2024-10-10T17:11:54.000000Z"},"category":{"id":11,"name":"AXE","created_at":"2024-10-03T02:08:01.000000Z","updated_at":"2024-10-03T02:11:35.000000Z"},"store":{"id":1,"name":"qsp soumaa","location":"soumaa","description":"magasin fiat","created_at":"2024-10-03T09:13:24.000000Z","updated_at":"2024-10-03T09:13:24.000000Z"},"sub_category":{"id":185,"name":"piston","category_id":11,"created_at":"2024-10-10T17:11:24.000000Z","updated_at":"2024-10-10T17:11:24.000000Z"}},{"id":10,"qr_code":null,"store_id":1,"type_id":1,"category_id":67,"sub_category_id":186,"designation_id":29,"position":"Avant droit","product_reference":null,"oe_reference":null,"quantity":0,"purchase_price":"0.00","sale_price":"0.00","stock_location":null,"supplier_id":1,"country_id":1,"champs1":null,"champs2":null,"champs3":null,"champs4":null,"code_intern":null,"created_at":"2024-10-12T21:14:06.000000Z","updated_at":"2024-10-12T21:14:06.000000Z","unite":null,"designation":{"id":29,"name":"FILTRE A GASOIL","sub_category_id":186,"created_at":"2024-10-10T17:20:25.000000Z","updated_at":"2024-10-10T17:20:25.000000Z"},"category":{"id":67,"name":"FILTRATION","created_at":"2024-10-10T17:18:59.000000Z","updated_at":"2024-10-10T17:18:59.000000Z"},"store":{"id":1,"name":"qsp soumaa","location":"soumaa","description":"magasin fiat","created_at":"2024-10-03T09:13:24.000000Z","updated_at":"2024-10-03T09:13:24.000000Z"},"sub_category":{"id":186,"name":"FILTRE CARBURANT","category_id":67,"created_at":"2024-10-10T17:19:41.000000Z","updated_at":"2024-10-10T17:19:41.000000Z"}},{"id":11,"qr_code":null,"store_id":1,"type_id":1,"category_id":67,"sub_category_id":187,"designation_id":30,"position":"Avant gauche","product_reference":null,"oe_reference":null,"quantity":0,"purchase_price":"0.00","sale_price":"0.00","stock_location":null,"supplier_id":1,"country_id":1,"champs1":null,"champs2":null,"champs3":null,"champs4":null,"code_intern":null,"created_at":"2024-10-12T21:18:20.000000Z","updated_at":"2024-10-12T21:18:20.000000Z","unite":null,"designation":{"id":30,"name":"FILTRE HABITACLE","sub_category_id":187,"created_at":"2024-10-10T17:21:19.000000Z","updated_at":"2024-10-10T17:21:19.000000Z"},"category":{"id":67,"name":"FILTRATION","created_at":"2024-10-10T17:18:59.000000Z","updated_at":"2024-10-10T17:18:59.000000Z"},"store":{"id":1,"name":"qsp soumaa","location":"soumaa","description":"magasin fiat","created_at":"2024-10-03T09:13:24.000000Z","updated_at":"2024-10-03T09:13:24.000000Z"},"sub_category":{"id":187,"name":"FILTRE HABITACLE","category_id":67,"created_at":"2024-10-10T17:21:01.000000Z","updated_at":"2024-10-10T17:21:01.000000Z"}},{"id":12,"qr_code":null,"store_id":1,"type_id":1,"category_id":67,"sub_category_id":186,"designation_id":29,"position":"Avant gauche","product_reference":null,"oe_reference":null,"quantity":0,"purchase_price":"0.00","sale_price":"0.00","stock_location":null,"supplier_id":1,"country_id":1,"champs1":null,"champs2":null,"champs3":null,"champs4":null,"code_intern":null,"created_at":"2024-10-12T21:20:30.000000Z","updated_at":"2024-10-12T21:20:30.000000Z","unite":null,"designation":{"id":29,"name":"FILTRE A GASOIL","sub_category_id":186,"created_at":"2024-10-10T17:20:25.000000Z","updated_at":"2024-10-10T17:20:25.000000Z"},"category":{"id":67,"name":"FILTRATION","created_at":"2024-10-10T17:18:59.000000Z","updated_at":"2024-10-10T17:18:59.000000Z"},"store":{"id":1,"name":"qsp soumaa","location":"soumaa","description":"magasin fiat","created_at":"2024-10-03T09:13:24.000000Z","updated_at":"2024-10-03T09:13:24.000000Z"},"sub_category":{"id":186,"name":"FILTRE CARBURANT","category_id":67,"created_at":"2024-10-10T17:19:41.000000Z","updated_at":"2024-10-10T17:19:41.000000Z"}},{"id":13,"qr_code":null,"store_id":1,"type_id":1,"category_id":67,"sub_category_id":186,"designation_id":29,"position":"Avant gauche","product_reference":null,"oe_reference":null,"quantity":0,"purchase_price":"0.00","sale_price":"0.00","stock_location":null,"supplier_id":1,"country_id":1,"champs1":null,"champs2":null,"champs3":null,"champs4":null,"code_intern":null,"created_at":"2024-10-12T21:22:40.000000Z","updated_at":"2024-10-12T21:22:40.000000Z","unite":null,"designation":{"id":29,"name":"FILTRE A GASOIL","sub_category_id":186,"created_at":"2024-10-10T17:20:25.000000Z","updated_at":"2024-10-10T17:20:25.000000Z"},"category":{"id":67,"name":"FILTRATION","created_at":"2024-10-10T17:18:59.000000Z","updated_at":"2024-10-10T17:18:59.000000Z"},"store":{"id":1,"name":"qsp soumaa","location":"soumaa","description":"magasin fiat","created_at":"2024-10-03T09:13:24.000000Z","updated_at":"2024-10-03T09:13:24.000000Z"},"sub_category":{"id":186,"name":"FILTRE CARBURANT","category_id":67,"created_at":"2024-10-10T17:19:41.000000Z","updated_at":"2024-10-10T17:19:41.000000Z"}},{"id":14,"qr_code":null,"store_id":1,"type_id":1,"category_id":67,"sub_category_id":186,"designation_id":29,"position":"Avant gauche","product_reference":null,"oe_reference":null,"quantity":0,"purchase_price":"0.00","sale_price":"0.00","stock_location":null,"supplier_id":1,"country_id":1,"champs1":null,"champs2":null,"champs3":null,"champs4":null,"code_intern":null,"created_at":"2024-10-12T21:23:24.000000Z","updated_at":"2024-10-12T21:23:24.000000Z","unite":null,"designation":{"id":29,"name":"FILTRE A GASOIL","sub_category_id":186,"created_at":"2024-10-10T17:20:25.000000Z","updated_at":"2024-10-10T17:20:25.000000Z"},"category":{"id":67,"name":"FILTRATION","created_at":"2024-10-10T17:18:59.000000Z","updated_at":"2024-10-10T17:18:59.000000Z"},"store":{"id":1,"name":"qsp soumaa","location":"soumaa","description":"magasin fiat","created_at":"2024-10-03T09:13:24.000000Z","updated_at":"2024-10-03T09:13:24.000000Z"},"sub_category":{"id":186,"name":"FILTRE CARBURANT","category_id":67,"created_at":"2024-10-10T17:19:41.000000Z","updated_at":"2024-10-10T17:19:41.000000Z"}}];
products.data.forEach(product => {
const qrElement = document.getElementById(`qr-${product.id}`);
if (qrElement && product.qr_code) {
new QRious({
element: qrElement,
value: product.qr_code,
size: 100,
background: 'white',
foreground: 'black'
});
}
});
};
</script>
<!-- Section d'Impression Cachée pour un QR Code Individuel -->
<div id="ticket-print-section" class="hidden">
<div class="ticket-container">
<h2 class="text-lg font-bold mb-2" id="ticket-product-name">Nom du Produit</h2>
<canvas id="ticket-qr"></canvas>
<p><strong>Référence:</strong> <span id="ticket-product-ref">12345-AB</span></p>
<p><strong>Prix:</strong> <span id="ticket-product-price">5000 DA</span></p>
<p class="text-xs text-gray-600">Merci pour votre achat !</p>
</div>
</div>
<!-- Scripts -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/qrious/4.0.2/qrious.min.js"></script>
<script>
/**
* Fonction pour imprimer un seul QR Code.
* @param {number} productId - L'ID du produit à imprimer.
*/
function printSingleQRCode(productId) {
// Récupérer les informations du produit depuis la page actuelle
const productName = document.getElementById('ticket-product-name').textContent;
const productRef = document.getElementById('ticket-product-ref').textContent;
const productPrice = document.getElementById('ticket-product-price').textContent;
// Générer le QR code dans le canvas du ticket
const ticketQRCanvas = document.getElementById('ticket-qr');
const qr = new QRious({
element: ticketQRCanvas,
value: `https://example.com/product/${productId}`, // Remplacez par l'URL réelle
size: 150,
background: 'white',
foreground: 'black'
});
// Ouvrir une nouvelle fenêtre pour l'impression
const printContent = document.getElementById('ticket-print-section').innerHTML;
const printWindow = window.open('', '_blank', 'width=400,height=600');
printWindow.document.write(`
<html>
<head>
<title>Impression QR Code</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/tailwind.min.css" rel="stylesheet">
<style>
@media print {
body {
margin: 0;
font-family: 'Arial', sans-serif;
-webkit-print-color-adjust: exact;
}
.ticket-container {
width: 100%;
padding: 20px;
border: none;
text-align: center;
}
}
.ticket-container {
text-align: center;
font-family: Arial, sans-serif;
}
.ticket-container canvas {
margin: 10px 0;
}
</style>
</head>
<body class="p-6">
${printContent}
</body>
</html>
`);
printWindow.document.close();
printWindow.focus();
printWindow.print();
printWindow.close();
}
/**
* Fonction pour imprimer tous les QR Codes.
*/
function printAllQRCodes() {
const printContent = document.getElementById('print-section').innerHTML;
const printWindow = window.open('', '_blank', 'width=800,height=1200');
printWindow.document.write(`
<html>
<head>
<title>Impression Tous les QR Codes</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/tailwind.min.css" rel="stylesheet">
<style>
@media print {
.page {
page-break-after: always;
}
body {
-webkit-print-color-adjust: exact;
}
}
.page {
text-align: center;
font-family: Arial, sans-serif;
margin-bottom: 20px;
}
.page canvas {
margin: 10px 0;
}
.page strong {
display: block;
margin-top: 5px;
}
</style>
</head>
<body class="p-6">
${printContent}
</body>
</html>
`);
printWindow.document.close();
printWindow.focus();
printWindow.print();
printWindow.close();
}
/**
* Générer les QR codes pour chaque produit lors du chargement de la page.
*/
window.onload = function() {
const products = [{"id":1,"qr_code":"11","store_id":5,"type_id":1,"category_id":1,"sub_category_id":1,"designation_id":1,"position":"test","product_reference":"test","oe_reference":"test","quantity":0,"purchase_price":"0.00","sale_price":"0.00","stock_location":"test","supplier_id":1,"country_id":1,"champs1":null,"champs2":null,"champs3":null,"champs4":null,"code_intern":"test","created_at":null,"updated_at":null,"unite":null,"designation":null,"category":{"id":1,"name":"AILE","created_at":"2024-10-03T02:08:01.000000Z","updated_at":"2024-10-03T02:11:35.000000Z"},"store":null,"sub_category":{"id":1,"name":"test","category_id":2,"created_at":"2024-10-03T10:53:58.000000Z","updated_at":"2024-10-03T12:42:50.000000Z"}},{"id":2,"qr_code":null,"store_id":1,"type_id":1,"category_id":67,"sub_category_id":186,"designation_id":29,"position":"Avant gauche","product_reference":null,"oe_reference":null,"quantity":0,"purchase_price":"0.00","sale_price":"0.00","stock_location":"test","supplier_id":1,"country_id":1,"champs1":null,"champs2":null,"champs3":null,"champs4":null,"code_intern":null,"created_at":"2024-10-12T20:55:11.000000Z","updated_at":"2024-10-12T20:55:11.000000Z","unite":null,"designation":{"id":29,"name":"FILTRE A GASOIL","sub_category_id":186,"created_at":"2024-10-10T17:20:25.000000Z","updated_at":"2024-10-10T17:20:25.000000Z"},"category":{"id":67,"name":"FILTRATION","created_at":"2024-10-10T17:18:59.000000Z","updated_at":"2024-10-10T17:18:59.000000Z"},"store":{"id":1,"name":"qsp soumaa","location":"soumaa","description":"magasin fiat","created_at":"2024-10-03T09:13:24.000000Z","updated_at":"2024-10-03T09:13:24.000000Z"},"sub_category":{"id":186,"name":"FILTRE CARBURANT","category_id":67,"created_at":"2024-10-10T17:19:41.000000Z","updated_at":"2024-10-10T17:19:41.000000Z"}},{"id":3,"qr_code":null,"store_id":1,"type_id":1,"category_id":67,"sub_category_id":187,"designation_id":30,"position":"Avant gauche","product_reference":null,"oe_reference":null,"quantity":0,"purchase_price":"0.00","sale_price":"0.00","stock_location":null,"supplier_id":1,"country_id":1,"champs1":null,"champs2":null,"champs3":null,"champs4":null,"code_intern":null,"created_at":"2024-10-12T20:56:34.000000Z","updated_at":"2024-10-12T20:56:34.000000Z","unite":null,"designation":{"id":30,"name":"FILTRE HABITACLE","sub_category_id":187,"created_at":"2024-10-10T17:21:19.000000Z","updated_at":"2024-10-10T17:21:19.000000Z"},"category":{"id":67,"name":"FILTRATION","created_at":"2024-10-10T17:18:59.000000Z","updated_at":"2024-10-10T17:18:59.000000Z"},"store":{"id":1,"name":"qsp soumaa","location":"soumaa","description":"magasin fiat","created_at":"2024-10-03T09:13:24.000000Z","updated_at":"2024-10-03T09:13:24.000000Z"},"sub_category":{"id":187,"name":"FILTRE HABITACLE","category_id":67,"created_at":"2024-10-10T17:21:01.000000Z","updated_at":"2024-10-10T17:21:01.000000Z"}},{"id":4,"qr_code":null,"store_id":1,"type_id":1,"category_id":67,"sub_category_id":186,"designation_id":29,"position":"Avant gauche","product_reference":null,"oe_reference":null,"quantity":0,"purchase_price":"0.00","sale_price":"0.00","stock_location":"test","supplier_id":1,"country_id":1,"champs1":null,"champs2":null,"champs3":null,"champs4":null,"code_intern":null,"created_at":"2024-10-12T20:57:21.000000Z","updated_at":"2024-10-12T20:57:21.000000Z","unite":null,"designation":{"id":29,"name":"FILTRE A GASOIL","sub_category_id":186,"created_at":"2024-10-10T17:20:25.000000Z","updated_at":"2024-10-10T17:20:25.000000Z"},"category":{"id":67,"name":"FILTRATION","created_at":"2024-10-10T17:18:59.000000Z","updated_at":"2024-10-10T17:18:59.000000Z"},"store":{"id":1,"name":"qsp soumaa","location":"soumaa","description":"magasin fiat","created_at":"2024-10-03T09:13:24.000000Z","updated_at":"2024-10-03T09:13:24.000000Z"},"sub_category":{"id":186,"name":"FILTRE CARBURANT","category_id":67,"created_at":"2024-10-10T17:19:41.000000Z","updated_at":"2024-10-10T17:19:41.000000Z"}},{"id":5,"qr_code":null,"store_id":1,"type_id":1,"category_id":67,"sub_category_id":187,"designation_id":30,"position":"Arri\u00e8re droit","product_reference":null,"oe_reference":null,"quantity":0,"purchase_price":"0.00","sale_price":"0.00","stock_location":"test","supplier_id":1,"country_id":1,"champs1":null,"champs2":null,"champs3":null,"champs4":null,"code_intern":null,"created_at":"2024-10-12T21:01:24.000000Z","updated_at":"2024-10-12T21:01:24.000000Z","unite":null,"designation":{"id":30,"name":"FILTRE HABITACLE","sub_category_id":187,"created_at":"2024-10-10T17:21:19.000000Z","updated_at":"2024-10-10T17:21:19.000000Z"},"category":{"id":67,"name":"FILTRATION","created_at":"2024-10-10T17:18:59.000000Z","updated_at":"2024-10-10T17:18:59.000000Z"},"store":{"id":1,"name":"qsp soumaa","location":"soumaa","description":"magasin fiat","created_at":"2024-10-03T09:13:24.000000Z","updated_at":"2024-10-03T09:13:24.000000Z"},"sub_category":{"id":187,"name":"FILTRE HABITACLE","category_id":67,"created_at":"2024-10-10T17:21:01.000000Z","updated_at":"2024-10-10T17:21:01.000000Z"}},{"id":6,"qr_code":null,"store_id":1,"type_id":1,"category_id":67,"sub_category_id":187,"designation_id":30,"position":"Avant droit","product_reference":null,"oe_reference":null,"quantity":0,"purchase_price":"0.00","sale_price":"0.00","stock_location":null,"supplier_id":1,"country_id":1,"champs1":null,"champs2":null,"champs3":null,"champs4":null,"code_intern":null,"created_at":"2024-10-12T21:04:30.000000Z","updated_at":"2024-10-12T21:04:30.000000Z","unite":null,"designation":{"id":30,"name":"FILTRE HABITACLE","sub_category_id":187,"created_at":"2024-10-10T17:21:19.000000Z","updated_at":"2024-10-10T17:21:19.000000Z"},"category":{"id":67,"name":"FILTRATION","created_at":"2024-10-10T17:18:59.000000Z","updated_at":"2024-10-10T17:18:59.000000Z"},"store":{"id":1,"name":"qsp soumaa","location":"soumaa","description":"magasin fiat","created_at":"2024-10-03T09:13:24.000000Z","updated_at":"2024-10-03T09:13:24.000000Z"},"sub_category":{"id":187,"name":"FILTRE HABITACLE","category_id":67,"created_at":"2024-10-10T17:21:01.000000Z","updated_at":"2024-10-10T17:21:01.000000Z"}},{"id":7,"qr_code":null,"store_id":1,"type_id":1,"category_id":67,"sub_category_id":187,"designation_id":30,"position":"Avant droit","product_reference":null,"oe_reference":null,"quantity":0,"purchase_price":"0.00","sale_price":"0.00","stock_location":null,"supplier_id":1,"country_id":1,"champs1":null,"champs2":null,"champs3":null,"champs4":null,"code_intern":null,"created_at":"2024-10-12T21:10:17.000000Z","updated_at":"2024-10-12T21:10:17.000000Z","unite":null,"designation":{"id":30,"name":"FILTRE HABITACLE","sub_category_id":187,"created_at":"2024-10-10T17:21:19.000000Z","updated_at":"2024-10-10T17:21:19.000000Z"},"category":{"id":67,"name":"FILTRATION","created_at":"2024-10-10T17:18:59.000000Z","updated_at":"2024-10-10T17:18:59.000000Z"},"store":{"id":1,"name":"qsp soumaa","location":"soumaa","description":"magasin fiat","created_at":"2024-10-03T09:13:24.000000Z","updated_at":"2024-10-03T09:13:24.000000Z"},"sub_category":{"id":187,"name":"FILTRE HABITACLE","category_id":67,"created_at":"2024-10-10T17:21:01.000000Z","updated_at":"2024-10-10T17:21:01.000000Z"}},{"id":8,"qr_code":null,"store_id":1,"type_id":1,"category_id":67,"sub_category_id":187,"designation_id":30,"position":"Avant droit","product_reference":null,"oe_reference":null,"quantity":0,"purchase_price":"0.00","sale_price":"0.00","stock_location":null,"supplier_id":1,"country_id":1,"champs1":null,"champs2":null,"champs3":null,"champs4":null,"code_intern":null,"created_at":"2024-10-12T21:11:10.000000Z","updated_at":"2024-10-12T21:11:10.000000Z","unite":null,"designation":{"id":30,"name":"FILTRE HABITACLE","sub_category_id":187,"created_at":"2024-10-10T17:21:19.000000Z","updated_at":"2024-10-10T17:21:19.000000Z"},"category":{"id":67,"name":"FILTRATION","created_at":"2024-10-10T17:18:59.000000Z","updated_at":"2024-10-10T17:18:59.000000Z"},"store":{"id":1,"name":"qsp soumaa","location":"soumaa","description":"magasin fiat","created_at":"2024-10-03T09:13:24.000000Z","updated_at":"2024-10-03T09:13:24.000000Z"},"sub_category":{"id":187,"name":"FILTRE HABITACLE","category_id":67,"created_at":"2024-10-10T17:21:01.000000Z","updated_at":"2024-10-10T17:21:01.000000Z"}},{"id":9,"qr_code":null,"store_id":1,"type_id":1,"category_id":11,"sub_category_id":185,"designation_id":28,"position":"Avant droit","product_reference":null,"oe_reference":null,"quantity":0,"purchase_price":"0.00","sale_price":"0.00","stock_location":null,"supplier_id":1,"country_id":1,"champs1":null,"champs2":null,"champs3":null,"champs4":null,"code_intern":null,"created_at":"2024-10-12T21:12:40.000000Z","updated_at":"2024-10-12T21:12:40.000000Z","unite":null,"designation":{"id":28,"name":"segment","sub_category_id":185,"created_at":"2024-10-10T17:11:54.000000Z","updated_at":"2024-10-10T17:11:54.000000Z"},"category":{"id":11,"name":"AXE","created_at":"2024-10-03T02:08:01.000000Z","updated_at":"2024-10-03T02:11:35.000000Z"},"store":{"id":1,"name":"qsp soumaa","location":"soumaa","description":"magasin fiat","created_at":"2024-10-03T09:13:24.000000Z","updated_at":"2024-10-03T09:13:24.000000Z"},"sub_category":{"id":185,"name":"piston","category_id":11,"created_at":"2024-10-10T17:11:24.000000Z","updated_at":"2024-10-10T17:11:24.000000Z"}},{"id":10,"qr_code":null,"store_id":1,"type_id":1,"category_id":67,"sub_category_id":186,"designation_id":29,"position":"Avant droit","product_reference":null,"oe_reference":null,"quantity":0,"purchase_price":"0.00","sale_price":"0.00","stock_location":null,"supplier_id":1,"country_id":1,"champs1":null,"champs2":null,"champs3":null,"champs4":null,"code_intern":null,"created_at":"2024-10-12T21:14:06.000000Z","updated_at":"2024-10-12T21:14:06.000000Z","unite":null,"designation":{"id":29,"name":"FILTRE A GASOIL","sub_category_id":186,"created_at":"2024-10-10T17:20:25.000000Z","updated_at":"2024-10-10T17:20:25.000000Z"},"category":{"id":67,"name":"FILTRATION","created_at":"2024-10-10T17:18:59.000000Z","updated_at":"2024-10-10T17:18:59.000000Z"},"store":{"id":1,"name":"qsp soumaa","location":"soumaa","description":"magasin fiat","created_at":"2024-10-03T09:13:24.000000Z","updated_at":"2024-10-03T09:13:24.000000Z"},"sub_category":{"id":186,"name":"FILTRE CARBURANT","category_id":67,"created_at":"2024-10-10T17:19:41.000000Z","updated_at":"2024-10-10T17:19:41.000000Z"}},{"id":11,"qr_code":null,"store_id":1,"type_id":1,"category_id":67,"sub_category_id":187,"designation_id":30,"position":"Avant gauche","product_reference":null,"oe_reference":null,"quantity":0,"purchase_price":"0.00","sale_price":"0.00","stock_location":null,"supplier_id":1,"country_id":1,"champs1":null,"champs2":null,"champs3":null,"champs4":null,"code_intern":null,"created_at":"2024-10-12T21:18:20.000000Z","updated_at":"2024-10-12T21:18:20.000000Z","unite":null,"designation":{"id":30,"name":"FILTRE HABITACLE","sub_category_id":187,"created_at":"2024-10-10T17:21:19.000000Z","updated_at":"2024-10-10T17:21:19.000000Z"},"category":{"id":67,"name":"FILTRATION","created_at":"2024-10-10T17:18:59.000000Z","updated_at":"2024-10-10T17:18:59.000000Z"},"store":{"id":1,"name":"qsp soumaa","location":"soumaa","description":"magasin fiat","created_at":"2024-10-03T09:13:24.000000Z","updated_at":"2024-10-03T09:13:24.000000Z"},"sub_category":{"id":187,"name":"FILTRE HABITACLE","category_id":67,"created_at":"2024-10-10T17:21:01.000000Z","updated_at":"2024-10-10T17:21:01.000000Z"}},{"id":12,"qr_code":null,"store_id":1,"type_id":1,"category_id":67,"sub_category_id":186,"designation_id":29,"position":"Avant gauche","product_reference":null,"oe_reference":null,"quantity":0,"purchase_price":"0.00","sale_price":"0.00","stock_location":null,"supplier_id":1,"country_id":1,"champs1":null,"champs2":null,"champs3":null,"champs4":null,"code_intern":null,"created_at":"2024-10-12T21:20:30.000000Z","updated_at":"2024-10-12T21:20:30.000000Z","unite":null,"designation":{"id":29,"name":"FILTRE A GASOIL","sub_category_id":186,"created_at":"2024-10-10T17:20:25.000000Z","updated_at":"2024-10-10T17:20:25.000000Z"},"category":{"id":67,"name":"FILTRATION","created_at":"2024-10-10T17:18:59.000000Z","updated_at":"2024-10-10T17:18:59.000000Z"},"store":{"id":1,"name":"qsp soumaa","location":"soumaa","description":"magasin fiat","created_at":"2024-10-03T09:13:24.000000Z","updated_at":"2024-10-03T09:13:24.000000Z"},"sub_category":{"id":186,"name":"FILTRE CARBURANT","category_id":67,"created_at":"2024-10-10T17:19:41.000000Z","updated_at":"2024-10-10T17:19:41.000000Z"}},{"id":13,"qr_code":null,"store_id":1,"type_id":1,"category_id":67,"sub_category_id":186,"designation_id":29,"position":"Avant gauche","product_reference":null,"oe_reference":null,"quantity":0,"purchase_price":"0.00","sale_price":"0.00","stock_location":null,"supplier_id":1,"country_id":1,"champs1":null,"champs2":null,"champs3":null,"champs4":null,"code_intern":null,"created_at":"2024-10-12T21:22:40.000000Z","updated_at":"2024-10-12T21:22:40.000000Z","unite":null,"designation":{"id":29,"name":"FILTRE A GASOIL","sub_category_id":186,"created_at":"2024-10-10T17:20:25.000000Z","updated_at":"2024-10-10T17:20:25.000000Z"},"category":{"id":67,"name":"FILTRATION","created_at":"2024-10-10T17:18:59.000000Z","updated_at":"2024-10-10T17:18:59.000000Z"},"store":{"id":1,"name":"qsp soumaa","location":"soumaa","description":"magasin fiat","created_at":"2024-10-03T09:13:24.000000Z","updated_at":"2024-10-03T09:13:24.000000Z"},"sub_category":{"id":186,"name":"FILTRE CARBURANT","category_id":67,"created_at":"2024-10-10T17:19:41.000000Z","updated_at":"2024-10-10T17:19:41.000000Z"}},{"id":14,"qr_code":null,"store_id":1,"type_id":1,"category_id":67,"sub_category_id":186,"designation_id":29,"position":"Avant gauche","product_reference":null,"oe_reference":null,"quantity":0,"purchase_price":"0.00","sale_price":"0.00","stock_location":null,"supplier_id":1,"country_id":1,"champs1":null,"champs2":null,"champs3":null,"champs4":null,"code_intern":null,"created_at":"2024-10-12T21:23:24.000000Z","updated_at":"2024-10-12T21:23:24.000000Z","unite":null,"designation":{"id":29,"name":"FILTRE A GASOIL","sub_category_id":186,"created_at":"2024-10-10T17:20:25.000000Z","updated_at":"2024-10-10T17:20:25.000000Z"},"category":{"id":67,"name":"FILTRATION","created_at":"2024-10-10T17:18:59.000000Z","updated_at":"2024-10-10T17:18:59.000000Z"},"store":{"id":1,"name":"qsp soumaa","location":"soumaa","description":"magasin fiat","created_at":"2024-10-03T09:13:24.000000Z","updated_at":"2024-10-03T09:13:24.000000Z"},"sub_category":{"id":186,"name":"FILTRE CARBURANT","category_id":67,"created_at":"2024-10-10T17:19:41.000000Z","updated_at":"2024-10-10T17:19:41.000000Z"}}];
products.data.forEach(product => {
const qrElement = document.getElementById(`qr-${product.id}`);
if (qrElement && product.qr_code) {
new QRious({
element: qrElement,
value: product.qr_code,
size: 100,
background: 'white',
foreground: 'black'
});
}
});
};
</script>
<!-- Font Awesome for icons -->
<!-- Tailwind CSS -->
<!-- Table des produits -->
<div class="overflow-x-auto">
<!-- Si aucune donnée -->
</div>
</div>
<!-- Footer -->
<footer class="bg-white text-textSecondary text-center py-4 mt-12 shadow-inner">
© 2024 QSP Gestion. Tous droits réservé
</footer>
<!-- Scripts JavaScript -->
</div></div></form></main></body></html>