@extends('templates.header')

@section('content')
    <section id="page-header-cover" class="section-slider swiper-slider fixed no-image">
        <div class="swiper-container" data-autoplay="0">
            <div class="swiper-wrapper">
                <div class="swiper-slide slide-align-center">
                    <div class="swiper-slide-intro">
                        <div class="swiper-intro-inner" style="padding-top: 2%; padding-bottom: 0%; ">
                            <h1 class="swiper-slide-heading">{{ $mediaType->titre }}</h1>
                        </div>
                    </div>
                    <div class="overlay"></div>
                </div>
            </div>
        </div>
    </section>

    <style>
        @media screen and (min-width: 940px) {
            .right-sidebar .content-area {
                padding-right: 39px;
                width: none;
            }
        }

        .card {
            position: relative;
            display: block;
            margin-bottom: .75rem;
            background-color: #fff;
            border: none;
            border-radius: .25rem;
        }

        /* Add vertical spacing between gallery items */
        .media-gallery .col-md-4 {
            margin-bottom: 30px;
            /* Vertical space between items */
        }

        /* General responsive image styles */
        .media-gallery .card-img-top {
            width: 100%;
            /* Let the image fill its container */
            height: 300px;
            /* Maintain aspect ratio */
            object-fit: fill;
            /* Ensure the image covers the space without distortion */
            border-radius: 8px;
            /* Optional: rounded corners for aesthetic */
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
            /* Optional: subtle shadow */
        }

        /* Ensure video elements are responsive */
        .media-gallery video {
            width: 100%;
            /* Full width of container */
            height: 300px;
            /* Maintain aspect ratio */
            border-radius: 8px;
            /* Optional */
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
            /* Optional */
        }

        /* Adjust card spacing for small devices */
        @media screen and (max-width: 768px) {
            .media-gallery .col-md-4 {
                margin-bottom: 20px;
                /* Reduced spacing for smaller screens */
            }
        }

        /* Layout adjustment for smaller screens */
        @media screen and (max-width: 576px) {
            .media-gallery .row {
                flex-direction: column;
                /* Stack items vertically */
            }

            .media-gallery .card-img-top,
            .media-gallery video {
                width: 100%;
                /* Ensure content fills the screen width */
                height: 350px;
                /* Maintain aspect ratio */
            }
        }

        .media-gallery .row {
            display: flex;
            flex-wrap: wrap;
        }

        .media-gallery .col-md-4 {
            padding-left: 15px;
            padding-right: 15px;
        }
    </style>

    <div id="content" class="site-content">
        <div id="content-inside" class="container">
            <div id="primary" class="content-area">
                <main id="main" class="site-main" role="main">
                    <article id="post-4232" class="post-4232 page type-page status-publish hentry">
                        <div class="entry-content">
                            <nav role="navigation" aria-label="Breadcrumbs" class="breadcrumb-trail breadcrumbs"
                                itemprop="breadcrumb">
                                <h2 class="trail-browse">Browse:</h2>
                                <ul class="trail-items" itemscope="" itemtype="http://schema.org/BreadcrumbList">
                                    <meta name="numberOfItems" content="2">
                                    <meta name="itemListOrder" content="Ascending">
                                    <li itemprop="itemListElement" itemscope="" itemtype="http://schema.org/ListItem"
                                        class="trail-item trail-begin">
                                        <a href="{{ route('accueil') }}" rel="home" itemprop="item">
                                            <span itemprop="name">Accueil</span>
                                        </a>
                                        <meta itemprop="position" content="1">
                                    </li>
                                    <li itemprop="itemListElement" itemscope="" itemtype="http://schema.org/ListItem"
                                        class="trail-item trail-end">
                                        <span itemprop="item"><span itemprop="name">{{ $mediaType->titre }}</span></span>
                                        <meta itemprop="position" content="2">
                                    </li>
                                </ul>
                            </nav>
                        </div>
                    </article>

                    <!-- Media Gallery Section -->
                    <div class="media-gallery">
                        <div class="row">
                            @foreach ($mediaItems as $item)
                                <div class="col-md-4">
                                    @if ($item->titre == 'Photothèques')
                                        <!-- Display Image Gallery -->
                                        <div class="card">
                                            <img src="{{ asset('uploads/medias/' . $item->apercu) }}" alt="Image"
                                                class="card-img-top">
                                        </div>
                                    @elseif($item->titre == 'Vidéothèques')
                                        <!-- Display Video Gallery -->
                                        <div class="card">
                                            <video controls>
                                                <source src="{{ asset('uploads/medias/' . $item->apercu) }}"
                                                    type="video/mp4">
                                                Your browser does not support the video tag.
                                            </video>
                                        </div>
                                    @endif
                                </div>
                            @endforeach
                        </div>
                    </div>

                </main>
            </div>
        </div>
    </div>
@endsection