@section('header-menu')
  @include('layouts.partials.home.navbar')
@endsection

@section('footer')
  @include('layouts.partials.home.footer')
@endsection

<div>
	<div class="container mt-4">
		<p class="mb-4 text-center" style="font-size: 26px;">Pilih Lapangan</p>

		<div class="border-top border-dark mb-4"></div>

		<div class="row justify-content-center">
			@foreach ($fields as $field)
			<div class="col-md-4 mb-5">
				<div style="box-shadow: 0 0 2px 2px #9b9a9a;" class="px-2 py-2">
					<a href="{{ route('paket.lapangan', ['branch' => $cabang, 'jenisLapangan' => $field->kategori, 'noLapangan' => $field->nomor_lapangan, 'kodeLapangan' => $field->kode_lapangan]) }}" class="text-dark" style="text-decoration: none;">
						<center>
							<span class="text-uppercase">{{ $field->nama_lapangan }} - {{ $field->nomor_lapangan }}</span>
						
							<div class="border-top border-dark my-2 mt-2"></div>

							<span class="text-uppercase">Ukuran : {{ $field->ukuran_lapangan }}</span>
						</center>
						
						<div style="box-shadow: 0 0 2px 2px #9b9a9a;" class="rounded lapangan-list mt-2">
							<div style="height: 250px; width: 100%;">
							<img src="{{ $field->thumbnail ? asset('storage/galleries/'. $field->thumbnail) : asset('images/empty.jpg') }}" class="w-100 h-100" style="object-fit: cover;">
							</div>
						</div>
					</a>
				</div>
			</div>
			@endforeach
		</div>
	</div>

</div>