{{ template "headersMenu.html" . }}

<div class="min-h-screen bg-gray-100">

	<main class="container py-20">

		<div class="p-6 mb-8 bg-white rounded-lg shadow">
			<h2 class="mb-4 text-xl font-semibold text-gray-700">{{ "Chiffre d'Affaires - 12 derniers mois" | 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 mr-4 mb-2">
					<input type="checkbox" class="text-indigo-600 form-checkbox" checked onchange="toggleDataset(this, 0)">
					<span class="ml-2">{{ "Cette année" | t }}</span>
				</label>
				<label class="inline-flex items-center mr-4 mb-2">
					<input type="checkbox" class="text-pink-500 form-checkbox" checked onchange="toggleDataset(this, 1)">
					<span class="ml-2">{{ "Année précédente" | t }}</span>
				</label>
				<label class="inline-flex items-center mr-4 mb-2">
					<input type="checkbox" class="text-yellow-500 form-checkbox" checked onchange="toggleDataset(this, 2)">
					<span class="ml-2">{{ "Il y a 2 ans" | t }}</span>
				</label>
				<label class="inline-flex items-center mb-2">
					<input type="checkbox" class="text-green-500 form-checkbox" checked onchange="toggleDataset(this, 3)">
					<span class="ml-2">{{ "Il y a 3 ans" | t }}</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">
				<h2 class="mb-4 text-xl font-semibold text-gray-700">{{ "Télécharger les comptes" | t }}</h2>
				<form>
					<div class="mb-4">
						<label for="month" class="block mb-2 text-sm font-medium text-gray-700">{{ "Mois" | t }}</label>
						<select id="month" name="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" | t }}</option>
							<option value="2">{{ "Février" | t }}</option>
							<option value="3">{{ "Mars" | t }}</option>
							<option value="4">{{ "Avril" | t }}</option>
							<option value="5">{{ "Mai" | t }}</option>
							<option value="6">{{ "Juin" | t }}</option>
							<option value="7">{{ "Juillet" | t }}</option>
							<option value="8">{{ "Août" | t }}</option>
							<option value="9">{{ "Septembre" | t }}</option>
							<option value="10">{{ "Octobre" | t }}</option>
							<option value="11">{{ "Novembre" | t }}</option>
							<option value="12">{{ "Décembre" | t }}</option>
						</select>
					</div>
					<div class="mb-4">
						<label for="year" class="block mb-2 text-sm font-medium text-gray-700">Année</label>
						<input type="number" id="year" name="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
					</button>
				</form>
			</div>

			<div class="p-6 bg-white rounded-lg shadow">
				<h2 class="mb-4 text-xl font-semibold text-gray-700">Recherche globale</h2>
				<form>
					<div class="mb-4">
						<label for="search" class="block mb-2 text-sm font-medium text-gray-700">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 text-gray-700">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">
				<h2 class="mb-4 text-xl font-semibold text-gray-700">Rapport financier Stripe</h2>
				<form>
					<div class="mb-4">
						<label for="stripe-month" class="block mb-2 text-sm font-medium text-gray-700">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 text-gray-700">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="overflow-hidden bg-white rounded-lg shadow">
			<h2 class="p-6 text-xl font-semibold text-gray-700 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 text-gray-400" 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 text-gray-700">Bilan financier - Mai 2023</h3>
							<p class="text-sm text-gray-500">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 text-gray-400" 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 text-gray-700">Rapport de trésorerie - Avril 2023</h3>
							<p class="text-sm text-gray-500">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 text-gray-400" 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 text-gray-700">Déclaration TVA - T1 2023</h3>
							<p class="text-sm text-gray-500">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="py-4 mt-12 text-white bg-gray-800">
		<div class="container px-6 mx-auto text-center">
			<p>&copy; 2024 DATAMIX.IO SAS - {{ "Données confidentielles" | t }}</p>
		</div>
	</footer>
</div>

{{ template "footer.html" . }}