@include('header')

    <script src="https://cdn.tailwindcss.com"></script>
	
	<section class="content">
		<div class="my-4">
			<button class="btn bg-teal" onclick="history.go(-1)"><i class="fas fa-arrow-left"></i> Volver</button>
		</div>
        
		<div class="my-4">
			<div class="flex justify-between items-center flex-wrap gap-4">
				<h1 class="text-3xl font-bold mb-4 text-gray-700 my-1.5">Caja Interna</h1>
				<div>
					Año:
					<select name="anio" id="anio" class="max-w-40">
						<option value="2023">2023</option>
						<option value="2024">2024</option>
						<option value="2025">2025</option>
					</select>
				</div>
			</div>
            @foreach ($viajesAgrupadosPorMes as $mes => $viajes)
				<div class="mb-8">
					<h2 class="text-2xl font-semibold text-blue-600 mb-2 capitalize">{{ $mes }}</h2>

					<div class="overflow-x-auto rounded shadow">
						<table class="min-w-full bg-white">
							<thead>
								<tr class="bg-gray-100 text-gray-700 text-left">
									<th class="px-4 py-2 border w-36">Fecha</th>
									<th class="px-4 py-2 border">Viaje</th>
									<th class="px-4 py-2 border text-nowrap">Aportes / Retiros</th>
									<th class="px-4 py-2 border w-48">Total</th>
								</tr>
							</thead>
							<tbody>
								@foreach ($viajes as $viaje)
									<tr class="border-t text-gray-700 [&>td]:text-nowrap">
										<td class="px-4 py-2 border">{{ date('d/m/Y', strtotime($viaje->fecha_hora_salida)) }}</td>
										<td class="px-4 py-2 border">{{ $viaje->destino->ciudad ?? '-' }}</td>
										<td class="px-4 py-2 border"></td>
										<td class="px-4 py-2 border font-bold"></td>
									</tr>
								@endforeach
							</tbody>
						</table>
					</div>
				</div>
			@endforeach
        </div>
	</section>

@include('footer')