@extends('layout.app')

@section('body')
	
	<x-menu-auth><i class="bi bi-folder px-2"></i> Gestion activités</x-menu-auth>

	<div class="flex flex-col mt-20 md:w-4/5 md:ml-auto">

		<div class="flex flex-col md:flex-row w-full">
			<div class="flex grow h-15 md:h-auto md:py-5 md:ps-30 md:pe-30">
				<a href="{{ route('auth.admin.gestion-activite.list') }}"><x-button><i class="bi bi-list-stars"></i> Liste activités</x-button></a>

				<h1 id="title_activity" class="grow text-center text-(--color-orange) text-4xl font-bold">Creation activite</h1>

				{{-- <x-button>Créer activité</x-button> --}}
			</div>
		</div>

		<div class="ps-5 pe-5 md:ps-30 md:pe-30">
			
			

			<form action="" method="post">
			
				<div class="grid grid-cols-2 gap-4">
					<div class="col-span-2">
						<label for="activity_name" class="font-medium">Nom de l'activité</label>
						<input type="text" name="activity_name" required autofocus class="w-full px-3 py-2 text-gray-500 bg-transparent outline-none border focus:border-(--color-orange) shadow-sm rounded-lg"/>
					</div>

					<div class="">
						<label for="activity_date_start" class="font-medium">Date de début de l'activité</label>
						<input type="date" name="activity_date_start" required autofocus class="w-full px-3 py-2 text-gray-500 bg-transparent outline-none border focus:border-(--color-orange) shadow-sm rounded-lg"/>
					</div>
					<div class="">
						<label for="activity_date_end" class="font-medium">Date de fin de l'activité</label>
						<input type="date" name="activity_date_end" required autofocus class="w-full px-3 py-2 text-gray-500 bg-transparent outline-none border focus:border-(--color-orange) shadow-sm rounded-lg"/>
					</div>
	
					<div class="">
						<label for="activity_date_registration_start" class="font-medium">Date de début des inscriptions</label>
						<input type="date" name="activity_date_registration_start" required autofocus class="w-full px-3 py-2 text-gray-500 bg-transparent outline-none border focus:border-(--color-orange) shadow-sm rounded-lg"/>
					</div>
					<div class="">
						<label for="activity_date_registration_end" class="font-medium">Date de de fin des inscriptions</label>
						<input type="date" name="activity_date_registration_end" required autofocus class="w-full px-3 py-2 text-gray-500 bg-transparent outline-none border focus:border-(--color-orange) shadow-sm rounded-lg"/>
					</div>
					
					<div class="">
						<label for="activity_date_start" class="font-medium">Nombre maximum d'inscription</label>
						<input type="number" name="activity_date_start" required autofocus class="w-full px-3 py-2 text-gray-500 bg-transparent outline-none border focus:border-(--color-orange) shadow-sm rounded-lg"/>
					</div>
					

					<div class="col-span-2">
						<label for="activity_description">Description activité</label>
						<textarea name="activity_description" cols="30" rows="10" class="w-full px-3 py-2 text-gray-500 bg-transparent outline-none border focus:border-(--color-orange) shadow-sm rounded-lg"></textarea>
					</div>

					<div class="col-span-2">
						<h2 class="text-(--color-orange) text-3xl font-bold">Options</h2>
						<p>Pour ajouter des options il faut cliquer sur le bouton en-dessous. Vous pouvez ajouter autant d'options que nécessaires.</p>

						<div class="grid grid-cols-3 border-solid mt-5">

							<div>
								<label for="" class="font-medium">Toto</label>
								<input type="text" class="w-full px-3 py-2 text-gray-500 bg-transparent outline-none border focus:border-(--color-orange) shadow-sm rounded-lg">
							</div>
							
							<div class="col-span-3 flex justify-center gap-2">
								<x-button>Ajouter une option</x-button>					
							</div>
						</div>

					</div>
				

					<div class="col-span-2 flex justify-end gap-2">
						<x-button type="submit"><i class="bi bi-folder-plus"></i> Créer activité</x-button>
					</div>

				</div>

			</form>			

		</div>
	</div>
@endsection