@extends('layouts.app')

@section('title', 'Aperiplus - La plateforme de streaming complètement cube')

@section('content')

    <!-- FEATURED MOVIE -->
    @if ($featuredMovie)
        @php
            $imgMain = $featuredMovie->img_main ? asset('storage/' . $featuredMovie->img_main) : '';
            $castingImg = $featuredMovie->casting_img ? asset('storage/' . $featuredMovie->casting_img) : '';
            $imgDetail = $featuredMovie->img_detail ? asset('storage/' . $featuredMovie->img_detail) : '';

            // produits (titre + url image)
            $productsPayload = $featuredMovie->products->map(function ($p) {
                return [
                    'title' => $p->title,
                    'img' => $p->img ? asset('storage/' . $p->img) : '',
                ];
            });
        @endphp
        <div class="container-fluid hero" style="background-image: url('{{ asset('storage/' . $featuredMovie->img_main) }}')">
            <div class="row">
                <div class="col-12 col-xl-6">
                    <div class="hero-infos">
                        <div class="hero-infos-genres">
                            @foreach ($featuredMovie->genres as $genre)
                                <span class="hero-infos-genre-item">{{ $genre->name }}</span>
                            @endforeach
                        </div>
                        <img src="{{ asset('storage/' . $featuredMovie->img_logo) }}" alt="{{ $featuredMovie->title }}"
                            class="img-fluid ">
                        <p class="hero-infos-text">
                            {{ $featuredMovie->description }}
                        </p>
                        <div class="hero-infos-genres-mobile">
                            @foreach ($featuredMovie->genres as $genre)
                                <span class="hero-infos-genre-item">{{ $genre->name }}</span>
                            @endforeach
                        </div>
                        <div class="hero-infos-btn">
                            <button type="button" class="btn btn-primary" data-bs-toggle="modal"
                                data-bs-target="#playerModal"
                                data-video="{{ asset('storage/movies/video/' . $featuredMovie->video) }}">
                                <img src="{{ asset('images/picto-play.svg') }}" alt=""
                                    class="btn-play">
                                <span>Lecture</span>
                            </button>
                            <button type="button" class="btn btn-secondary" data-bs-toggle="modal"
                                data-bs-target="#movieModal" data-title="{{ $featuredMovie->title }}"
                                data-desc="{{ e($featuredMovie->description) }}" data-img="{{ $imgDetail }}"
                                data-casting-img="{{ $castingImg }}"
                                data-casting-text="{{ e($featuredMovie->casting_text) }}"
                                data-casting-apericube="{{ e($featuredMovie->casting_apericube) }}"
                                data-products='@json($productsPayload)'>
                                <img src="{{ asset('images/picto-plus.svg') }}" alt=""
                                    class="btn-plus">
                                <span>En savoir plus</span>
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    @endif


    <div class="container-fluid categories">
        <!-- LISTING MOVIES -->
        @foreach ($categories as $category)
            <div class="category" style="z-index: {{ count($categories) - $loop->index }}">
                <h2 class="category-title"><img src="{{ asset('storage/' . $category->img_picto) }}">{{ $category->name }}
                </h2>
                <div class="swiper {{ $category->format }} swiper-movies">
                    <div class="swiper-wrapper">
                        @foreach ($category->movies as $movie)
                            @php
                                $image = match ($category->format) {
                                    'cadre' => $movie->img_cadre,
                                    'portrait' => $movie->img_portrait,
                                    'paysage' => $movie->img_paysage,
                                    default => $movie->img_cadre,
                                };

                                // Construire la bonne URL (si c'est une URL http(s), on la garde telle quelle)
                                $src =
                                    is_string($image) && preg_match('#^https?://#i', $image)
                                        ? $image
                                        : ($image
                                            ? asset('storage/' . $image)
                                            : null);

                                $imgMain = $movie->img_main ? asset('storage/' . $movie->img_main) : '';
                                $imgMain = $movie->img_detail ? asset('storage/' . $movie->img_detail) : '';

                                $castingImg = $movie->casting_img ? asset('storage/' . $movie->casting_img) : '';

                                // produits (titre + url image)
                                $productsPayload = $movie->products->map(function ($p) {
                                    return [
                                        'title' => $p->title,
                                        'img' => $p->img ? asset('storage/' . $p->img) : '',
                                                                    ];
                                });
                            @endphp
                            <div class="swiper-slide">

                                <button type="button" class="movie-btn" data-bs-toggle="modal" data-bs-target="#movieModal"
                                    data-title="{{ $movie->title }}" data-desc="{{ e($movie->description) }}"
                                    data-img="{{ $imgMain }}" data-casting-img="{{ $castingImg }}"
                                    data-casting-text="{{ e($movie->casting_text) }}"
                                    data-casting-apericube="{{ e($movie->casting_apericube) }}"
                                    data-products='@json($productsPayload)'
                                    data-video="{{ asset('storage/movies/video/' . $movie->video) }}"
                                >
                                    <img src="{{ $src }}" class="img-fluid" alt="{{ $movie->title }}">
                                    <div class="movie-excerpt">
                                        <p>{{ $movie->description }}</p>
                                    </div>
                                </button>

                                </div>
                        @endforeach

                    </div>
                    <div class="swiper-button-prev swiper-{{ $category->id }}"></div>
                    <div class="swiper-button-next swiper-{{ $category->id }}"></div>
                </div>
            </div>
        @endforeach
    </div>
    </div>



    <!-- POPPIN DETAIL MOVIE -->
    <div class="modal modal-movie-detail fade" id="movieModal" tabindex="-1" aria-labelledby="movieModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg modal-dialog-centered">
            <div class="modal-content">

                <div class="modal-body">
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Fermer"><img src="{{ asset('images/modal-close.svg') }}" /></button>
                    <div class="modal-body">
                        {{-- Image principale --}}
                        <img id="movieModalImg" src="" class="img-fluid mb-3" alt="">

                        <div class="movie-detail">
                            <button type="button" class="btn btn-primary" data-bs-toggle="modal"
                                id="moviePlayBtn"
                                data-bs-target="#playerModal"
                                data-video=""
                                >
                                <img src="{{ asset('images/picto-play.svg') }}" alt=""
                                    class="btn-play">
                                <span>Lecture</span>
                            </button>


                            {{-- Description --}}
                            <p id="movieModalDescription" class="movie-detail-description"></p>

                            <div class="container movie-detail-links">
                                <div class="row gx-5">
                                    <div class="col-12 col-lg-6 border-end col-casting">
                                        <div id="movieCasting" class="movie-detail-bloc">
                                            <h4 class="movie-detail-title">Casting :</h4>
                                            <div class="movie-detail-casting">
                                                <div class="movie-detail-casting-picto">
                                                    <img id="movieCastingImg" src="" class="" alt="">
                                                </div>
                                                <div>
                                                    <div id="movieCastingApericube" class="movie-detail-casting-title"></div>
                                                    <span id="movieCastingText" class="movie-detail-casting-text"></span>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-12 col-lg-6 col-product">
                                        <div id="movieProducts" class="movie-detail-bloc" style="display:none;">
                                            <h4 class="movie-detail-title">Aussi aperçu dans :</h4>

                                            <div class="swiper products-swiper" id="movieProductsSwiper">
                                                <div class="swiper-wrapper" id="movieProductsWrapper"></div>

                                                <div class="products-swiper-btn swiper-button-prev"></div>
                                                <div class="products-swiper-btn swiper-button-next"></div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                {{-- Casting --}}

                                {{-- Produits associés --}}

                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- POPPIN PLAYER VIDEO -->
    <div class="modal fade modal-player" id="playerModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-fullscreen">
            <div class="modal-content player-modal">
                <button type="button" class="btn-close player-close" data-bs-dismiss="modal" aria-label="Fermer"></button>
                <div class="player-wrapper">
                    <div id="playerContainer"></div>
                </div>
            </div>
        </div>
    </div>

    @endsection