@extends('front.layouts.app')
@section('title', 'Médiathèque du diocèse')

@section('content')
    <!-- Style de la page pour harmoniser l'affichage -->
    <style>
        /* Couleurs principales */
        :root {
            --primary-color: #b40f15;
            --accent-color: #feac05;
        }

        /* Style général de la page */
        .mediateque {
            padding: 30px;
            background-color: #f9f9f9;
            border-radius: 8px;
            background: linear-gradient(to bottom, #ffffff, #f1f1f1);
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        }

        /* Design du titre h1 minimaliste */
        h1 {
            font-size: 2.5rem; /* Taille plus modérée */
            font-family: 'Arial', sans-serif; /* Police simple et moderne */
            font-weight: 600; /* Poids modéré pour une meilleure lisibilité */
            color: var(--primary-color);
            text-align: center;
            text-transform: uppercase;
            margin-bottom: 30px;
            padding-bottom: 10px;
            border-bottom: 3px solid var(--accent-color); /* Ligne sous le titre pour un effet minimaliste */
        }

        /* Texte "Suivez-nous sur Facebook" */
        .facebook-follow-text {
            font-size: 2.2rem;
            font-weight: 500;
            color: var(--primary-color); /* Appliquer la couleur principale */
            text-align: center;
            margin-bottom: 20px;
        }

        .facebook-follow-text a {
            color: var(--accent-color); /* Appliquer la couleur d'accent au lien */
            text-decoration: none;
            font-weight: bold;
        }

        .facebook-follow-text a:hover {
            text-decoration: underline; /* Ajouter un soulignement au survol */
        }

        /* Vidéo vedette */
        .featured-video {
            width: 100%;
            height: 500px;
            margin-bottom: 20px;
            background: #000;
            border-radius: 8px;
        }

        .featured-video iframe {
            width: 100%;
            height: 100%;
            border: none;
            border-radius: 8px;
        }

        /* Galerie de vidéos */
        .video-gallery {
            display: flex;
            flex-wrap: wrap;
            gap: 20px;
            justify-content: space-between;
        }

        .video-item {
            flex: 1 1 calc(33.33% - 20px);
            margin-bottom: 20px;
        }

        .video-item iframe {
            width: 100%;
            height: 200px;
            border: none;
            border-radius: 8px;
        }

        /* Plugin Facebook */
        .facebook-plugin {
            margin: 30px 0;
            text-align: center;
            padding: 20px;
            background-color: #ffffff;
            border-radius: 8px;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        }

        @media (max-width: 768px) {
            .video-item {
                flex: 1 1 calc(50% - 20px);
            }

            .featured-video {
                height: 300px;
            }
        }

        @media (max-width: 480px) {
            .video-item {
                flex: 1 1 100%;
            }
        }
    </style>

    <div class="mediateque">

        <!-- Vidéo vedette avec lecture automatique -->
        @if(isset($videos[0]) && isset($videos[0]['id']['videoId']))
            <div class="featured-video">
                <iframe src="https://www.youtube.com/embed/{{ $videos[0]['id']['videoId'] }}?autoplay=1"
                        allow="autoplay; encrypted-media"
                        allowfullscreen>
                </iframe>
            </div>
        @endif

        <!-- Galerie de vidéos -->
        <div class="video-gallery">
            @foreach($videos as $key => $video)
                @if($key > 0 && isset($video['id']['videoId']))
                    <div class="video-item">
                        <iframe src="https://www.youtube.com/embed/{{ $video['id']['videoId'] }}" allowfullscreen></iframe>
                    </div>
                @endif
            @endforeach
        </div>



        <!-- Intégration du plugin Facebook -->
        <div class="facebook-plugin">
            <!-- Texte "Suivez-nous sur Facebook" -->
            <div class="facebook-follow-text">
                Suivez-nous sur <a href="https://www.facebook.com/EcclesiaTVCI1" target="_blank">Facebook</a>
            </div>
            <div id="fb-root"></div>
            <script async defer crossorigin="anonymous" src="https://connect.facebook.net/fr_FR/sdk.js#xfbml=1&version=v22.0"></script>

            <div class="fb-page"
                 data-href="https://www.facebook.com/EcclesiaTVCI1"
                 data-tabs="timeline"
                 data-width="500"
                 data-height="500"
                 data-small-header="false"
                 data-adapt-container-width="true"
                 data-hide-cover="false"
                 data-show-facepile="true">
                <blockquote cite="https://www.facebook.com/EcclesiaTVCI1" class="fb-xfbml-parse-ignore">
                    <a href="https://www.facebook.com/EcclesiaTVCI1">Ecclesia TV Côte d&#039;Ivoire</a>
                </blockquote>
            </div>
        </div>
    </div>

@endsection