@extends($site->themeView('layout'))

{{-- Film / series page: immersive header, synopsis, credits, trailer, where to watch, seasons, reviews, similar titles. --}}
@section('content')
    @php
        $ads = app(\App\Services\AdManager::class);
        $item = ['type' => $type, 'id' => $t['id'], 'title' => $t['title'], 'year' => $t['year'], 'poster' => $t['poster'], 'path' => $t['path'], 'genres' => $t['genre_ids']];
        $hours = $t['runtime'] ? intdiv($t['runtime'], 60) : 0;
        $avg = $reviews->isNotEmpty() ? round($reviews->avg('rating'), 1) : null;
    @endphp
    <article data-title-page data-type="{{ $type }}" data-id="{{ $t['id'] }}" data-item="{{ json_encode($item) }}">
        <header class="relative isolate -mt-16 overflow-hidden pt-16">
            @if ($t['backdrop'])
                <img src="{{ $t['backdrop'] }}" alt="" fetchpriority="high" class="absolute inset-0 -z-10 size-full object-cover opacity-50">
            @endif
            <div class="absolute inset-0 -z-10 bg-gradient-to-t from-[var(--surface)] via-[color-mix(in_oklab,var(--surface)_70%,transparent)] to-[color-mix(in_oklab,var(--surface)_40%,transparent)]"></div>
            <div class="container-site grid max-w-7xl gap-8 py-10 md:grid-cols-[260px_minmax(0,1fr)] md:py-14">
                <div class="mx-auto w-48 md:w-full">
                    @if ($t['poster'])
                        <img src="{{ $t['poster'] }}" alt="{{ __('movies.poster_of', ['title' => $t['title']]) }}" width="500" height="750" class="w-full rounded-2xl shadow-2xl ring-1 ring-white/10">
                    @else
                        <div class="grid aspect-[2/3] place-items-center rounded-2xl bg-white/5 ring-1 ring-white/10"><x-site.icon :name="$type === 'tv' ? 'tv' : 'film'" class="size-12 text-white/30" /></div>
                    @endif
                </div>
                <div class="min-w-0 text-white">
                    @include($site->themeView('partials.breadcrumbs'))
                    <h1 class="mt-3 text-3xl font-black tracking-tight text-balance md:text-5xl">{{ $t['title'] }} @if ($t['year'])<span class="font-light text-white/50">({{ $t['year'] }})</span>@endif</h1>
                    @if ($t['original_title'] && $t['original_title'] !== $t['title'])<p class="mt-1 text-white/60">{{ __('movies.original_title') }} : <span lang="{{ $t['original_language'] }}">{{ $t['original_title'] }}</span></p>@endif
                    <ul class="mt-4 flex flex-wrap items-center gap-x-4 gap-y-2 text-sm text-white/80">
                        @if ($t['certification'])<li class="rounded border border-white/40 px-1.5 text-xs font-bold">{{ $t['certification'] }}</li>@endif
                        @if ($t['date'])<li><time datetime="{{ $t['date'] }}">{{ \Carbon\Carbon::parse($t['date'])->locale(app()->getLocale())->translatedFormat('j F Y') }}</time></li>@elseif ($t['year'])<li>{{ $t['year'] }}</li>@endif
                        @if ($t['runtime'])<li>{{ $hours ? $hours.' h ' : '' }}{{ str_pad($t['runtime'] % 60, 2, '0', STR_PAD_LEFT) }} min</li>@endif
                        @if ($type === 'tv' && $t['seasons_count'])<li>{{ trans_choice('movies.seasons_count', $t['seasons_count'], ['count' => $t['seasons_count']]) }} · {{ __('movies.episodes_count', ['count' => $t['episodes_count'] ?? 0]) }}</li>@endif
                        @foreach ($t['genre_links'] as $g)<li><a href="{{ $g['path'] }}" class="rounded-full bg-white/10 px-2.5 py-0.5 text-xs font-semibold hover:bg-white/20">{{ $g['name'] }}</a></li>@endforeach
                    </ul>
                    <div class="mt-5 flex flex-wrap items-center gap-5">
                        @if ($avg)
                            <p class="flex items-center gap-2"><span class="grid size-14 place-items-center rounded-full bg-black/50 text-lg font-black text-accent ring-4 ring-accent/40">{{ number_format($avg, 1) }}</span><span class="text-xs leading-tight text-white/60">{{ __('movies.members_rating') }}<br>{{ trans_choice('movies.reviews_count', $reviews->count(), ['count' => $reviews->count()]) }}</span></p>
                        @endif
                    </div>
                    <div class="mt-6 flex flex-wrap gap-3">
                        @if ($t['video'])
                            <a href="#player" class="btn bg-accent px-5 py-2.5 font-bold text-black hover:brightness-110"><x-site.icon name="play" class="size-4" /> {{ __('movies.watch_now') }}</a>
                        @elseif ($type === 'tv' && collect($t['seasons'])->sum('videos') > 0)
                            <a href="{{ $t['path'] }}/{{ seg('season') }}/{{ collect($t['seasons'])->firstWhere('videos', '>', 0)['number'] }}" class="btn bg-accent px-5 py-2.5 font-bold text-black hover:brightness-110"><x-site.icon name="play" class="size-4" /> {{ __('movies.watch_episodes') }}</a>
                        @endif
                        @if ($t['trailer'])
                            <button type="button" data-trailer="{{ $t['trailer']['key'] }}" @class(['btn px-5 py-2.5 font-bold', 'bg-accent text-black hover:brightness-110' => ! $t['video'], 'bg-white/10 text-white backdrop-blur hover:bg-white/20' => $t['video']])><x-site.icon name="film" class="size-4" /> {{ __('movies.watch_trailer') }}</button>
                        @elseif ($t['trailer_url'])
                            <a href="{{ $t['trailer_url'] }}" target="_blank" rel="noopener" class="btn bg-white/10 text-white backdrop-blur hover:bg-white/20"><x-site.icon name="film" class="size-4" /> {{ __('movies.watch_trailer') }}</a>
                        @endif
                        <button type="button" data-list-toggle="favorites" data-item="{{ json_encode($item) }}" aria-pressed="false" class="btn bg-white/10 text-white backdrop-blur hover:bg-white/20 aria-pressed:text-rose-300"><x-site.icon name="heart" class="size-4" /> {{ __('movies.favorite') }}</button>
                        <button type="button" data-list-toggle="watchlist" data-item="{{ json_encode($item) }}" aria-pressed="false" class="btn bg-white/10 text-white backdrop-blur hover:bg-white/20 aria-pressed:text-accent"><x-site.icon name="bookmark" class="size-4" /> {{ __('movies.watchlist') }}</button>
                        <button type="button" data-share data-title="{{ $t['title'] }}" class="btn bg-white/10 text-white backdrop-blur hover:bg-white/20"><x-site.icon name="share" class="size-4" /> {{ __('movies.share') }}</button>
                    </div>
                    @if ($t['tagline'])<p class="mt-6 text-lg text-white/70 italic">« {{ $t['tagline'] }} »</p>@endif
                    <h2 class="mt-5 text-lg font-bold">{{ __('movies.synopsis') }}</h2>
                    <p class="mt-2 max-w-3xl leading-relaxed text-white/85">{{ $t['overview'] ?? __('movies.no_synopsis') }}</p>
                    <dl class="mt-5 grid max-w-3xl gap-4 text-sm sm:grid-cols-3">
                        @if ($t['directors'])<div><dt class="text-white/50">{{ $type === 'tv' ? __('movies.creators') : __('movies.director') }}</dt><dd class="font-semibold">@foreach ($t['directors'] as $d)<a href="{{ $d['path'] }}" class="hover:text-accent hover:underline">{{ $d['name'] }}</a>@if (! $loop->last), @endif @endforeach</dd></div>@endif
                        @if ($t['countries'])<div><dt class="text-white/50">{{ __('movies.countries') }}</dt><dd class="font-semibold">{{ implode(', ', array_slice($t['countries'], 0, 3)) }}</dd></div>@endif
                        @if ($t['original_language'])<div><dt class="text-white/50">{{ __('movies.language') }}</dt><dd class="font-semibold">{{ class_exists(\Locale::class) ? \Locale::getDisplayLanguage($t['original_language'], app()->getLocale()) : $t['original_language'] }}</dd></div>@endif
                    </dl>
                </div>
            </div>
        </header>

        <div class="container-site grid max-w-7xl gap-10 pb-10 lg:grid-cols-[minmax(0,1fr)_320px]">
            <div class="min-w-0 space-y-12">
                @if ($t['video'])
                    {{-- Video uploaded in the back-office (no ad around the player). --}}
                    <section id="player" aria-labelledby="h-player" class="scroll-mt-24">
                        <h2 id="h-player" class="sr-only">{{ __('movies.watch_now') }}</h2>
                        <div class="overflow-hidden rounded-2xl bg-black shadow-2xl ring-1 ring-white/10">
                            <video controls playsinline preload="metadata" @if ($t['backdrop']) poster="{{ $t['backdrop'] }}" @endif class="aspect-video w-full bg-black" data-player>
                                <source src="{{ $t['video']['url'] }}" type="{{ $t['video']['mime'] === 'video/quicktime' ? 'video/mp4' : $t['video']['mime'] }}">
                                {{ __('movies.video_unsupported') }}
                            </video>
                        </div>
                        @if ($t['rights'])<p class="mt-2 text-xs text-white/40">{{ $t['rights'] }}</p>@endif
                    </section>
                @endif

                @if ($t['cast'])
                    <section aria-labelledby="h-cast">
                        <h2 id="h-cast" class="text-xl font-bold text-white">{{ __('movies.cast') }}</h2>
                        <ul class="-mx-4 mt-4 flex snap-x gap-4 overflow-x-auto px-4 pb-2 [scrollbar-width:none]">
                            @foreach ($t['cast'] as $c)
                                <li class="w-28 shrink-0 snap-start text-center">
                                    <a href="{{ $c['path'] }}" class="group block">
                                        <span class="mx-auto grid size-20 place-items-center rounded-full bg-gradient-to-br from-brand/50 to-accent/20 text-xl font-black text-white/80 ring-2 ring-white/10 transition group-hover:ring-accent">{{ mb_strtoupper(mb_substr($c['name'], 0, 1)) }}</span>
                                        <span class="mt-2 block text-sm leading-tight font-semibold text-white group-hover:text-accent">{{ $c['name'] }}</span>
                                        @if ($c['role'])<span class="mt-0.5 block text-xs leading-tight text-white/50">{{ $c['role'] }}</span>@endif
                                    </a>
                                </li>
                            @endforeach
                        </ul>
                    </section>
                @endif

                @if ($type === 'tv' && $t['seasons'])
                    <section aria-labelledby="h-seasons">
                        <h2 id="h-seasons" class="text-xl font-bold text-white">{{ __('movies.seasons') }}</h2>
                        <ul class="mt-4 grid gap-3 sm:grid-cols-2">
                            @foreach ($t['seasons'] as $s)
                                <li><a href="{{ $t['path'] }}/{{ seg('season') }}/{{ $s['number'] }}" class="flex gap-4 rounded-xl bg-white/5 p-3 ring-1 ring-white/10 transition hover:ring-accent/60">
                                    <span class="grid size-14 shrink-0 place-items-center rounded-xl bg-accent/15 text-lg font-black text-accent">{{ $s['number'] }}</span>
                                    <span class="min-w-0"><span class="block font-semibold text-white">{{ $s['name'] ?: __('movies.season_n', ['n' => $s['number']]) }}</span>
                                    <span class="text-xs text-white/50">{{ $s['date'] ? substr($s['date'], 0, 4).' · ' : '' }}{{ __('movies.episodes_count', ['count' => $s['episodes']]) }}@if ($s['videos']) · <span class="font-semibold text-accent">{{ __('movies.videos_count', ['count' => $s['videos']]) }}</span>@endif</span>
                                    @if ($s['overview'])<span class="mt-1 line-clamp-2 block text-sm text-white/70">{{ $s['overview'] }}</span>@endif</span>
                                </a></li>
                            @endforeach
                        </ul>
                    </section>
                @endif

                {{-- Members' reviews (moderated) and rating form (signed-in members, loaded by cinema.js). --}}
                <section aria-labelledby="h-reviews" data-reviews data-state="{{ route('member.state', [], false) }}?id={{ $t['id'] }}" data-post="{{ route('member.review', [], false) }}">
                    <h2 id="h-reviews" class="text-xl font-bold text-white">{{ __('movies.reviews') }}</h2>
                    <div data-review-form-slot class="mt-4">
                        <p class="text-sm text-white/60" data-review-guest>{!! __('movies.review_sign_in', ['in' => '<a href="'.route('member.login', [], false).'?redirect='.urlencode($t['path']).'" class="font-semibold text-accent underline">'.e(__('movies.sign_in')).'</a>', 'up' => '<a href="'.route('member.register', [], false).'?redirect='.urlencode($t['path']).'" class="font-semibold text-accent underline">'.e(__('movies.sign_up')).'</a>']) !!}</p>
                        <form data-review-form hidden class="space-y-3 rounded-2xl bg-white/5 p-4 ring-1 ring-white/10">
                            <p class="text-sm text-white/70" data-review-hello></p>
                            <fieldset>
                                <legend class="text-sm font-semibold text-white">{{ __('movies.your_rating') }}</legend>
                                <div class="mt-2 flex flex-wrap gap-1" role="radiogroup">
                                    @for ($i = 1; $i <= 10; $i++)<label class="cursor-pointer"><input type="radio" name="rating" value="{{ $i }}" class="peer sr-only" required><span class="grid size-9 place-items-center rounded-lg bg-white/10 text-sm font-bold text-white/70 peer-checked:bg-accent peer-checked:text-black peer-focus-visible:ring-2 peer-focus-visible:ring-accent">{{ $i }}</span></label>@endfor
                                </div>
                            </fieldset>
                            <label class="block text-sm"><span class="text-white/70">{{ __('movies.your_review') }}</span><textarea name="body" rows="4" maxlength="3000" class="cn-field mt-1 w-full"></textarea></label>
                            <div class="flex flex-wrap items-center gap-3"><button class="btn bg-accent font-bold text-black">{{ __('movies.publish_review') }}</button><p class="text-xs text-white/50">{{ __('movies.moderation_note') }}</p></div>
                            <p data-review-message class="text-sm font-semibold text-emerald-300" role="status"></p>
                        </form>
                    </div>
                    @if ($reviews->isNotEmpty())
                        <ul class="mt-6 space-y-4">
                            @foreach ($reviews as $r)
                                <li class="rounded-2xl bg-white/5 p-4 ring-1 ring-white/10">
                                    <p class="flex items-center justify-between gap-3 text-sm"><span class="font-semibold text-white">{{ $r->member->name }}</span><span class="rounded-md bg-accent/20 px-2 py-0.5 font-bold text-accent">{{ $r->rating }}/10</span></p>
                                    @if ($r->body)<p class="mt-2 text-sm leading-relaxed whitespace-pre-line text-white/80">{{ $r->body }}</p>@endif
                                    <p class="mt-2 text-xs text-white/40"><time datetime="{{ $r->created_at->toDateString() }}">{{ $r->created_at->locale(app()->getLocale())->translatedFormat('j F Y') }}</time></p>
                                </li>
                            @endforeach
                        </ul>
                    @else
                        <p class="mt-4 text-sm text-white/50">{{ __('movies.no_reviews') }}</p>
                    @endif
                </section>

                @include($site->themeView('movies.partials.row'), ['key' => 'similar', 'title' => __('movies.similar'), 'items' => $t['similar']])

                @if ($t['keywords'])
                    <p class="flex flex-wrap gap-2">@foreach ($t['keywords'] as $k)<span class="rounded-full bg-white/5 px-3 py-1 text-xs text-white/60 ring-1 ring-white/10">{{ $k }}</span>@endforeach</p>
                @endif

                @if ($suggestion ?? null)
                    @include($site->themeView('partials.network-suggestion'), ['other' => $suggestion])
                @endif

                {{ $ads->slot('after_content') }}
            </div>

            <aside class="space-y-6">
                @if ($t['watch_links'])
                    <section class="rounded-2xl bg-white/5 p-5 ring-1 ring-white/10" aria-labelledby="h-watch">
                        <h2 id="h-watch" class="font-bold text-white">{{ __('movies.where_to_watch') }}</h2>
                        <ul class="mt-4 space-y-2">
                            @foreach ($t['watch_links'] as $link)
                                <li><a href="{{ $link['url'] }}" target="_blank" rel="noopener nofollow" class="flex items-center justify-between gap-3 rounded-xl bg-white/5 px-3 py-2.5 text-sm font-semibold text-white ring-1 ring-white/10 transition hover:ring-accent/60">
                                    <span>{{ $link['name'] }}@if (! empty($link['kind']))<span class="ms-2 text-xs font-normal text-white/50">{{ __('movies.offer_'.$link['kind']) }}</span>@endif</span>
                                    <x-site.icon name="external" class="size-4 text-white/50" />
                                </a></li>
                            @endforeach
                        </ul>
                    </section>
                @endif
                {{ $ads->slot('sidebar') }}
            </aside>
        </div>

        {{-- Trailer (YouTube privacy-enhanced mode, loaded only on click). --}}
        <dialog data-trailer-dialog class="m-auto w-[min(64rem,94vw)] overflow-hidden rounded-2xl bg-black p-0 backdrop:bg-black/80">
            <div class="aspect-video" data-trailer-frame></div>
            <button type="button" class="absolute end-3 top-3 rounded-full bg-black/70 px-3 py-1 text-sm text-white" data-trailer-close>{{ __('files.kit.close') }}</button>
        </dialog>
    </article>
@endsection