{{ template "headersMenu.html" . }}

<div class="min-h-screen">

	<main class="container py-20">

		<div class="p-6 mb-8 bg-white rounded-lg shadow dark:bg-gray-800">
			<h2 class="mb-4 text-xl font-semibold">{{ "L'années en chiffres" | t }}</h2>
			<canvas id="revenueChart" width="400" height="100"></canvas>
			<div class="flex flex-wrap justify-center mt-4">
				<label class="inline-flex items-center m-2">
					<input
					type="checkbox"
					class="form-checkbox"
					style="color:rgb(0, 0, 0)"
					checked
					onchange="toggleDataset(this, 0)"
					/>
					<span class="ml-2 font-bold">2026</span>
				</label>
				<label class="inline-flex items-center m-2">
					<input
					type="checkbox"
					class="form-checkbox"
					style="color:rgb(255, 0, 0)"
					checked
					onchange="toggleDataset(this, 1)"
					/>
					<span class="ml-2 font-bold">2025</span>
				</label>
			
				<label class="inline-flex items-center m-2">
					<input
					type="checkbox"
					class="form-checkbox"
					style="color:#ff8b32"
					checked
					onchange="toggleDataset(this, 2)"
					/>
					<span class="ml-2">2024</span>
				</label>
			
				<label class="inline-flex items-center m-2">
					<input
					type="checkbox"
					class="form-checkbox"
					style="color:#FFD447"
					checked
					onchange="toggleDataset(this, 3)"
					/>
					<span class="ml-2">2023</span>
				</label>
			
				<label class="inline-flex items-center m-2">
					<input
					type="checkbox"
					class="form-checkbox"
					style="color:#2de278"
					checked
					onchange="toggleDataset(this, 4)"
					/>
					<span class="ml-2">2022</span>
				</label>
			
				<label class="inline-flex items-center m-2">
					<input
					type="checkbox"
					class="form-checkbox"
					style="color:rgb(94, 139, 255)"
					checked
					onchange="toggleDataset(this, 5)"
					/>
					<span class="ml-2">2021</span>
				</label>
			
				<label class="inline-flex items-center m-2">
					<input
					type="checkbox"
					class="form-checkbox"
					style="color:rgb(164, 0, 252)"
					checked
					onchange="toggleDataset(this, 6)"
					/>
					<span class="ml-2">2020</span>
				</label>
			</div>
		</div>

		<div class="grid grid-cols-1 gap-6 mb-8 md:grid-cols-3">
			<div class="p-6 bg-white rounded-lg shadow dark:bg-gray-800">
				<h2 class="mb-4 text-xl font-semibold">{{ "Télécharger la facturation" | t }}</h2>
				<form method="GET" action="/bin/datamix/sales.xlsx" class="px-4 mx-auto space-y-4 max-w-md">
				  
					<div class="flex flex-col gap-4 sm:flex-row">
					  <div class="flex-1">
						<label for="begin" class="block mb-1 text-sm font-medium">Date début</label>
						<input
						  type="date"
						  id="begin"
						  name="begin"
						  required
						  class="w-full rounded-md border-gray-300 shadow-sm focus:ring-blue-500 focus:border-blue-500"
						>
					  </div>
				  
					  <div class="flex-1">
						<label for="end" class="block mb-1 text-sm font-medium">Date fin</label>
						<input
						  type="date"
						  id="end"
						  name="end"
						  required
						  class="w-full rounded-md border-gray-300 shadow-sm focus:ring-blue-500 focus:border-blue-500"
						>
					  </div>
					</div>
				  
					<button
					  type="submit"
					  class="px-4 py-2 w-full font-bold rounded-md shadow-sm transition btn"
					>
					  Télécharger Excel
					</button>
				  </form>
				  
			</div>

			<div class="p-6 bg-white rounded-lg shadow dark:bg-gray-800">
				<h2 class="mb-4 text-xl font-semibold">Recherche globale</h2>
				<form>
					<div class="mb-4">
						<label for="search" class="block mb-2 text-sm font-medium">Mot-clé</label>
						<input type="text" id="search" name="search" placeholder="Ex: facture, client, projet..." class="px-3 py-2 w-full rounded-md border border-gray-300 shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500">
					</div>
					<div class="mb-4">
						<label for="date-range" class="block mb-2 text-sm font-medium">Période</label>
						<select id="date-range" name="date-range" class="px-3 py-2 w-full rounded-md border border-gray-300 shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500">
							<option value="this-month">Ce mois-ci</option>
							<option value="last-month">Le mois dernier</option>
							<option value="this-year">Cette année</option>
							<option value="last-year">L'année dernière</option>
							<option value="custom">Personnalisé</option>
						</select>
					</div>
					<button type="submit" class="px-4 py-2 w-full text-white bg-indigo-600 rounded-md transition duration-150 ease-in-out hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
						Rechercher
					</button>
				</form>
			</div>

			<div class="p-6 bg-white rounded-lg shadow dark:bg-gray-800">
				<h2 class="mb-4 text-xl font-semibold">Rapport financier Stripe</h2>
				<form>
					<div class="mb-4">
						<label for="stripe-month" class="block mb-2 text-sm font-medium">Mois</label>
						<select id="stripe-month" name="stripe-month" class="px-3 py-2 w-full rounded-md border border-gray-300 shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500">
							<option value="1">Janvier</option>
							<option value="2">Février</option>
							<option value="3">Mars</option>
							<option value="4">Avril</option>
							<option value="5">Mai</option>
							<option value="6">Juin</option>
							<option value="7">Juillet</option>
							<option value="8">Août</option>
							<option value="9">Septembre</option>
							<option value="10">Octobre</option>
							<option value="11">Novembre</option>
							<option value="12">Décembre</option>
						</select>
					</div>
					<div class="mb-4">
						<label for="stripe-year" class="block mb-2 text-sm font-medium">Année</label>
						<input type="number" id="stripe-year" name="stripe-year" min="2000" max="2099" step="1" value="2023" class="px-3 py-2 w-full rounded-md border border-gray-300 shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500">
					</div>
					<button type="submit" class="px-4 py-2 w-full text-white bg-indigo-600 rounded-md transition duration-150 ease-in-out hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
						Télécharger le rapport Stripe
					</button>
				</form>
			</div>
		</div>

		<div class="hidden overflow-hidden bg-white rounded-lg shadow dark:bg-gray-800">
			<h2 class="p-6 text-xl font-semibold bg-gray-50 border-b">Derniers documents</h2>
			<ul class="divide-y divide-gray-200">
				<li class="flex justify-between items-center p-6 hover:bg-gray-50">
					<div class="flex items-center">
						<svg class="mr-3 w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
							<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path>
						</svg>
						<div>
							<h3 class="text-lg font-medium">Bilan financier - Mai 2023</h3>
							<p class="text-sm">Ajouté le 1 juin 2023</p>
						</div>
					</div>
					<a href="#" class="text-indigo-600 hover:text-indigo-900">Télécharger</a>
				</li>
				<li class="flex justify-between items-center p-6 hover:bg-gray-50">
					<div class="flex items-center">
						<svg class="mr-3 w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
							<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path>
						</svg>
						<div>
							<h3 class="text-lg font-medium">Rapport de trésorerie - Avril 2023</h3>
							<p class="text-sm">Ajouté le 15 mai 2023</p>
						</div>
					</div>
					<a href="#" class="text-indigo-600 hover:text-indigo-900">Télécharger</a>
				</li>
				<li class="flex justify-between items-center p-6 hover:bg-gray-50">
					<div class="flex items-center">
						<svg class="mr-3 w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
							<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path>
						</svg>
						<div>
							<h3 class="text-lg font-medium">Déclaration TVA - T1 2023</h3>
							<p class="text-sm">Ajouté le 20 avril 2023</p>
						</div>
					</div>
					<a href="#" class="text-indigo-600 hover:text-indigo-900">Télécharger</a>
				</li>
			</ul>
		</div>
	</main>

	<footer class="fixed right-0 bottom-0 left-0 py-1 text-white bg-black shadow-lg dark:bg-white dark:text-black">
		<div class="container px-6 mx-auto font-bold text-center uppercase">
			<span class="hidden md:inline-block">&copy; <a href="/about/team" up-follow class="underline">DATAMIX.IO SAS</a> - </span>
			{{ "Données confidentielles" | t }}
		</div>
	</footer>
</div>

{{ template "footer.html" . }}