@extends('layouts._site.main')
@section('title', 'EcoFeminino - Multimídia')
@section('content')

    <!-- Magnific Popup CSS/JS (mova para layout.main se possível) -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/magnific-popup.min.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/jquery.magnific-popup.min.js"></script>

    <div class="rts-news-details-section section-gap-2" style="background-color: #e9ecef;">
        <div class="container">

            <!-- Seção Galerias -->
            @if ($section === 'imagens')
                <div class="rts-post-heading mb--50" id="galleries">
                    <div class="heading-content banner-submenu">
                        <div class="contents">
                            <h2 class="content-title mb--10"><a href="#">Galeria de Imagens</a></h2>
                        </div>
                    </div>
                </div>

                <div class="rts-gallery-section gallary-page-section pt--40 mb--40">
                    <div class="row">
                        @forelse ($galleries as $gallery)
                            <div class="col-xl-4 col-md-4 col-sm-6">
                                <div class="gallery-item text-center">
                                    <a href="{{ route('site.multimedia.gallery.show', ['slug' => $gallery->slug]) }}">
                                        <img src="{{ asset('storage/galleries/covers/' . basename($gallery->cover_image)) }}"
                                            alt="{{ $gallery->title }}" class="img-fluid rounded shadow-sm mb-3" />
                                    </a>
                                    <div class="contents">
                                        <a href="{{ route('site.multimedia.gallery.show', ['slug' => $gallery->slug]) }}"
                                            class="member-name fw-bold fs-5">
                                            {{ $gallery->title }}
                                        </a>
                                    </div>
                                </div>
                            </div>
                        @empty
                            <p class="text-center text-muted">Nenhuma galeria disponível.</p>
                        @endforelse
                    </div>
                </div>
            @endif
            <!-- FIM Seção Galerias -->

            <!-- Seção Videos e Podcasts -->
            @if ($section === 'videos')
                <div class="rts-post-heading mb--50" id="videos-e-podcasts">
                    <div class="heading-content banner-submenu">
                        <div class="contents">
                            <h2 class="content-title mb--10"><a href="#">Videos e Podcasts</a></h2>
                        </div>
                    </div>
                </div>
                <div class="rts-gallery-section gallary-page-section pt--40 mb--40">
                    <div class="row">
                        @foreach ($videos as $video)
                            <div class="col-xl-4 col-md-4 col-sm-6 video-item">
                                <div class="video-item">
                                    @if (strpos($video->url, 'youtube.com') !== false || strpos($video->url, 'youtu.be') !== false)
                                        @php
                                            // Extrair o ID do vídeo da URL
                                            preg_match(
                                                '/(?:youtube\.com\/(?:[^\/]+\/[^\/]+\/|(?:v|e(?:mbed)?)\/|\S*?[?&]v=)|youtu\.be\/)([a-zA-Z0-9_-]{11})/',
                                                $video->url,
                                                $matches,
                                            );
                                            $video_id = $matches[1] ?? null;
                                        @endphp

                                        @if ($video_id)
                                            <iframe src="https://www.youtube.com/embed/{{ $video_id }}" frameborder="0"
                                                allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
                                                allowfullscreen>
                                            </iframe>

                                            <div class="contents" style="width:25rem !important">
                                                <a href="#" class="member-name">
                                                    {{ preg_replace('/\s+/', ' ', $video->title) }}
                                                </a>
                                            </div>
                                        @else
                                            <p class="text-danger">⚠️ Vídeo não encontrado.</p>
                                        @endif
                                    @else
                                        <video width="150%" height="400px" controls>
                                            <source src="{{ $video->url }}" type="video/mp4">
                                            Seu navegador não suporta o elemento de vídeo.
                                        </video>
                                    @endif
                                </div>
                            </div>
                        @endforeach
                    </div>

                    <div class="row">
                        @foreach ($podcasts as $video)
                            <div class="col-xl-4 col-md-4 col-sm-6 video-item">
                                <div class="video-item">
                                    @php
                                        $video_id = null;
                                        $parts = parse_url($video->url);

                                        if (!empty($parts['host']) && str_contains($parts['host'], 'youtu.be')) {
                                            $video_id = ltrim($parts['path'], '/');
                                        } elseif (!empty($parts['query'])) {
                                            parse_str($parts['query'], $query);
                                            $video_id = $query['v'] ?? null;
                                        } elseif (
                                            !empty($parts['path']) &&
                                            preg_match('/\/embed\/([a-zA-Z0-9_-]{11})/', $parts['path'], $m)
                                        ) {
                                            $video_id = $m[1];
                                        } elseif (
                                            !empty($parts['path']) &&
                                            preg_match('/\/live\/([a-zA-Z0-9_-]{11})/', $parts['path'], $m)
                                        ) {
                                            $video_id = $m[1];
                                        }
                                    @endphp

                                    @if ($video_id)
                                        <iframe src="https://www.youtube.com/embed/{{ $video_id }}" frameborder="0"
                                            allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
                                            allowfullscreen>
                                        </iframe>

                                        <div class="contents" style="width:25rem !important">
                                            <a href="#" class="member-name">
                                                {{ preg_replace('/\s+/', ' ', $video->title) }}
                                            </a>
                                        </div>
                                    @else
                                        <p class="text-warning">
                                            ⚠️ Este vídeo não pode ser incorporado.
                                            <a href="{{ $video->url }}" target="_blank">Abrir no YouTube</a>
                                        </p>
                                    @endif
                                </div>
                            </div>
                        @endforeach
                    </div>
                </div>
            @endif
            <!-- FIM Seção Videos e Podcasts -->

        </div>
    </div>

    <style>
        .news-catagory-tag-3 {
            background: #ff1856 !important;
        }

        .mfp-title {
            font-size: 18px;
            font-weight: bold;
        }

        .mfp-description {
            font-size: 14px;
            color: #666;
        }

        .swiper-slide {
            width: auto !important;
            margin-right: 20px;
        }

        .video-thumbnail {
            position: relative;
        }

        .video-link,
        .podcast-link,
        .image-popup {
            display: block;
        }

        .gallery-item {
            border: 1px solid #ff1856;
            background: #ffffff;
            border-radius: 10px;
        }
    </style>
@endsection