@php
	$galleryImages = [
		'COOK_170424031.jpg',
		'COOK_170424008.jpg',
		'COOK_170424024.jpg',
		'COOK_170424025.jpg',
		'COOK_170424017.jpg',
		'COOK_170424020.jpg',
		'COOK_170424037.png',
	];
@endphp

<div class="row align-items-start mt-5" id="table-experience">
	<div class="col-lg-6 p-4 d-none d-lg-flex justify-content-center align-items-center">
		<div class="w-100 text-center">
			<div class="pswp-gallery pswp-gallery--single-column" id="gallery--table-experience">
				<div class="row g-2 g-xl-3">
					@foreach ($galleryImages as $img)
						<div class="col-{{ $loop->first ? '12' : '6' }} mb-1">
							<a class="d-block overflow-hidden border-round-sm"
								href="{{ asset('img/15/' . $img) }}" data-pswp-width="2500"
								data-pswp-height="1667" target="_blank">
								<span class="ratio ratio-16x9 d-block overflow-hidden">
									<img src="{{ asset('img/15/' . $img) }}"
										alt="Table d’hôte"
										class="w-100 h-100 border-round-sm"
										style="object-fit:cover;object-position:center;">
								</span>
							</a>
						</div>
					@endforeach
				</div>
			</div>
		</div>
	</div>
	<div class="col-lg-6 d-flex flex-column justify-content-start mt-5">
		<div class="text-center">
			<div class="mb-4">
				<p class="fw-semibold mb-1">Accords mets et vins :</p>
				<ul class="list-unstyled small">
					<li>Invitation : à partir de 25€ TTC / personne (3 verres)</li>
					<li>Voyage : à partir de 35€ TTC / personne (5 verres)</li>
				</ul>
			</div>
			<div class="mb-4">
				<p class="fw-semibold mb-1">Accords mets et boissons cuisinées sans alcool :</p>
				<ul class="list-unstyled small">
					<li>Invitation : 25€ TTC / personne (3 verres)</li>
					<li>Voyage : 35€ TTC / personne (5 verres)</li>
				</ul>
			</div>
			<p class="small mb-1">Eaux minérales et boissons chaudes à discrétion</p>
			<p class="small mb-4">À noter que la privatisation de la table le temps d’un repas fait l’objet d’un forfait à partir de 800€ TTC.</p>
			<div class="text-center">
				<a href="{{ route('reservation', ['type' => 'diner']) }}#collapse-diner" class="btn btn-green"
					aria-label="Demander une réservation Table d’hôte gastronomique">
					Demander une réservation
				</a>
			</div>
		</div>

	<div class="d-lg-none mt-4">
			<div class="container-fluid px-0">
				<div id="slider-table-experience" class="my-slider">
					<div class="slider-wrapper">
						@foreach ($galleryImages as $img)
							<div>
								<img src="{{ asset('img/15/' . $img) }}" alt="Table d’hôte mobile {{ $loop->iteration }}"
									class="img-fluid border-round-sm w-100">
							</div>
						@endforeach
					</div>
				</div>
				<div id="custom-controls-table-experience" class="custom-controls text-center mt-2">
					<button type="button" class="btn btn-green prev mx-2"><i class="bi bi-arrow-left"></i></button>
					<button type="button" class="btn btn-green next mx-2"><i class="bi bi-arrow-right"></i></button>
				</div>
			</div>
		</div>
	</div>
</div>

<script>
	document.addEventListener('DOMContentLoaded', function () {
		const expSlider = document.querySelector('#slider-table-experience .slider-wrapper');
		if (expSlider) {
			tns({
				container: '#slider-table-experience .slider-wrapper',
				items: 1,
				loop: false,
				mouseDrag: true,
				swipeAngle: false,
				speed: 400,
				responsive: {
					400: { items: 1 },
					750: { items: 2 }
				},
				controls: true,
				nav: false,
				controlsContainer: '#custom-controls-table-experience'
			});
		}
	});
</script>