{{ template "headersMenu.html" . }}


<div id="PMscanListOrders" class="container py-36">
	<header class="mb-12 text-center">
	  <h1 class="mb-2 text-4xl font-bold">{{ "Suivi de Commande" | t }}</h1>
	  <p class="text-xl text-gray-600">{{ "Gérez et suivez vos commandes NFC en temps réel" | t }}</p>
	</header>
  
	<div class="overflow-hidden bg-white rounded-2xl shadow-lg dark:bg-gray-800">
	  <div class="p-6 md:p-8">
		
		<!-- Filtres et recherche -->
		<div class="grid grid-cols-1 gap-4 mb-6 md:grid-cols-3">
		  <div>
			<label for="search" class="block mb-1 text-sm font-medium text-gray-700">{{ "Recherche par référence" | t }}</label>
			<input type="text" id="search" placeholder="{{ "Entrez une référence" | t }}" class="px-3 py-2 w-full rounded-md border border-gray-300 shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500">
		  </div>
		  <div>
			<label for="dateStart" class="block mb-1 text-sm font-medium text-gray-700">{{ "Date de début" | t }}</label>
			<input type="text" id="dateStart" placeholder="{{ "Sélectionnez une date" | t }}" class="px-3 py-2 w-full rounded-md border border-gray-300 shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500">
		  </div>
		  <div>
			<label for="dateEnd" class="block mb-1 text-sm font-medium text-gray-700">{{ "Date de fin" | t }}</label>
			<input type="text" id="dateEnd" placeholder="{{ "Sélectionnez une date" | t }}" class="px-3 py-2 w-full rounded-md border border-gray-300 shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500">
		  </div>
		</div>
  
		<!-- Tableau des commandes -->
		<div class="overflow-x-auto">
		  <table class="min-w-full divide-y divide-gray-200">
			<thead class="bg-gray-200 dark:bg-gray-800">
			  <tr></tr>
			</thead>
			<tbody class="divide-y divide-gray-200"></tbody>
		  </table>
		</div>
  
		<!-- Pagination -->
		<div class="flex justify-between items-center mt-4">
		  <div>
			<p class="text-sm text-gray-700" id="paginationInfo"></p>
		  </div>
		  <div>
			<nav class="inline-flex relative z-0 -space-x-px rounded-md shadow-sm" aria-label="Pagination">
			  <button id="prevPage" class="inline-flex relative items-center px-2 py-2 text-sm font-medium text-gray-500 bg-white rounded-l-md border border-gray-300 hover:bg-gray-50">
				{{ "Précédent" | t }}
			  </button>
			  <button id="nextPage" class="inline-flex relative items-center px-2 py-2 text-sm font-medium text-gray-500 bg-white rounded-r-md border border-gray-300 hover:bg-gray-50">
				{{ "Suivant" | t }}
			  </button>
			</nav>
		  </div>
		</div>
	  </div>
	</div>
  </div>
  
{{ template "footer.html" . }}