@extends('layouts.app')

@section('content')
    <div>
        <div
            class="relative h-[60vh] w-full bg-cover bg-center text-white"
            style="background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('{{ asset('img/salle/hero.png') }}');"
        >
            <div class="flex items-center justify-center h-full text-center p-4">
                <div>
                    <h1 class="text-4xl font-semibold mb-2">Notre salle spécialisée</h1>
                </div>
            </div>
        </div>

        <section class="py-12 bg-gray-100">
            <div class="container mx-auto px-4">
                <video id="video" class="video-js w-full rounded-lg shadow-lg" controls preload="auto" poster="{{ asset('img/salle/hero.png') }}">
                    <source src="{{ asset('img/salle/video.MOV') }}" type="video/mp4" />
                    <p class="vjs-no-js">
                        Pour voir cette vidéo, veuillez activer JavaScript, ou utilisez un navigateur qui
                        <a href="https://videojs.com/html5-video-support/" target="_blank" class="underline">supporte les vidéos HTML5</a>.
                    </p>
                </video>
            </div>
        </section>

        <section class="py-12 bg-white">
            <div class="container mx-auto px-4">
                <div class="gallery">
                    @for ($i = 1; $i <= 11; $i++)
                        <div>
                            <img src="{{ asset("img/salle/$i.jpg") }}" alt="Photo de la salle {{ $i }}" class="gallery-image w-full h-auto object-cover rounded-lg shadow">
                        </div>
                    @endfor
                </div>
            </div>
        </section>
    </div>
@endsection

@push('scripts')
    {{-- Slick + jQuery --}}
    <script src="{{ asset('src/jquery.min.js') }}" defer></script>
    <script src="{{ asset('src/slick.min.js') }}" defer></script>

    <script src="https://vjs.zencdn.net/8.3.0/video.min.js" defer></script>

    <script>
        document.addEventListener("DOMContentLoaded", function () {
            $(".gallery").slick({
                dots: false,
                slidesToShow: 4,
                slidesToScroll: 1,
                autoplay: true,
                autoplaySpeed: 2000,
                arrows: false,
                infinite: true,
                responsive: [
                    { breakpoint: 1024, settings: { slidesToShow: 3 } },
                    { breakpoint: 768, settings: { slidesToShow: 2 } },
                    { breakpoint: 480, settings: { slidesToShow: 1 } },
                ]
            });

            let player = videojs('video');
            player.responsive(true);
            player.fluid(true);
        });
    </script>
@endpush