@extends('front.layout.app')

@section('content')

<div class="max-w-7xl mx-auto py-12 px-4 space-y-6">

    <div class="flex justify-end">
        <a href="{{ $backUrl }}"
            class="inline-flex items-center gap-2 rounded-full bg-primary px-5 py-2.5 text-sm font-semibold text-primary-foreground transition hover:bg-secondary">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="size-4">
                <path stroke-linecap="round" stroke-linejoin="round" d="M9 15 3 9m0 0 6-6M3 9h12a6 6 0 0 1 0 12h-3" />
            </svg>
            Retourner à la liste
        </a>
    </div>

    <div class="grid grid-cols-1 lg:grid-cols-4 gap-8 items-start">

        {{-- Informations média --}}
        <aside class="lg:col-span-1">
            <div class="rounded-lg bg-primary/5 border border-primary/30 p-6 space-y-4">

                <div>
                    <h1 class="text-lg font-bold uppercase text-primary">{{ $media?->name }}</h1>
                    <div class="flex flex-wrap gap-2 mt-2">
                        @if($media?->type)
                            <span class="inline-flex items-center rounded-full bg-primary px-2.5 py-0.5 text-xs text-primary-foreground">
                                {{ $media->type->name }}
                            </span>
                        @endif
                        @if($media?->theme)
                            <span class="inline-flex items-center rounded-full bg-primary px-2.5 py-0.5 text-xs text-primary-foreground">
                                {{ $media->theme->name }}
                            </span>
                        @endif
                    </div>
                </div>

                @if($media?->images?->first())
                    <img src="{{ $media->images->first()->url }}" alt="{{ $media->name }}" class="w-full rounded-lg object-cover">
                @elseif($media?->logo_url)
                    <img src="{{ $media->logo_url }}" alt="{{ $media->name }}" class="w-full rounded-lg object-cover">
                @endif

                @if($media?->targets?->isNotEmpty())
                    <div>
                        <h4 class="text-xs font-bold uppercase text-gray-400 mb-2">Cible(s) :</h4>
                        <div class="flex flex-wrap gap-2">
                            @foreach($media->targets as $target)
                                <span class="inline-flex items-center rounded-full bg-primary px-2.5 py-0.5 text-xs text-primary-foreground">
                                    {{ $target->name }}
                                </span>
                            @endforeach
                        </div>
                    </div>
                @endif

                @if($media?->readers?->content)
                    <div>
                        <h4 class="text-xs font-bold uppercase text-gray-400 mb-2">Lecteurs :</h4>
                        <span class="inline-flex items-center rounded-full bg-primary px-2.5 py-0.5 text-xs text-primary-foreground">
                            {{ number_format($media->readers->content, 0, ',', ' ') }}
                        </span>
                    </div>
                @endif

                @if($media?->theme)
                    <div>
                        <h4 class="text-xs font-bold uppercase text-gray-400 mb-2">Thème :</h4>
                        <span class="inline-flex items-center rounded-full bg-primary px-2.5 py-0.5 text-xs text-primary-foreground">
                            {{ $media->theme->name }}
                        </span>
                    </div>
                @endif

            </div>
        </aside>

        {{-- Détail de l'opération --}}
        <div class="lg:col-span-3">
            <div class="rounded-lg border border-gray-200 p-6 space-y-6">

                @if($media?->presentation)
                    <div>
                        <h2 class="text-lg font-bold uppercase text-gray-400 mb-2">Présentation du Média</h2>
                        <div class="wysiwyg text-sm text-gray-700">{!! $media->presentation !!}</div>
                    </div>
                @endif

                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                    @if($operation->visibility)
                        <div class="bg-primary/5 rounded-lg p-4">
                            <h4 class="text-xs font-bold uppercase text-gray-400 mb-2">Visibilité</h4>
                            <div class="wysiwyg text-[13px] text-gray-700">{!! $operation->visibility !!}</div>
                        </div>
                    @endif

                    <div class="bg-primary/5 rounded-lg p-4 space-y-2">
                        <h4 class="text-xs font-bold uppercase text-gray-400 mb-2">Apport du partenaire</h4>
                        @if($operation->amount > 0)
                            <p class="text-sm text-gray-700">
                                Dotation : <span class="font-bold text-primary">{{ number_format($operation->amount, 2, ',', ' ') }} €</span>
                            </p>
                        @endif
                        <div class="wysiwyg text-[13px] text-gray-700">{!! $operation->description !!}</div>
                        <hr class="mt-2 mb-3">
                        <p class="text-sm text-gray-700 mb-2">
                            Frais Techniques : <span class="font-bold text-primary">{{ number_format($operation->technical_cost, 2, ',', ' ') }} €</span>
                        </p>
                    </div>
                </div>

                @if($media?->images?->isNotEmpty())
                    <hr class="border-gray-200">

                    <div x-data="{ lightboxOpen: false, currentIndex: 0, images: {{ $media->images->pluck('url')->toJson() }} }"
                        @keydown.escape.window="lightboxOpen = false"
                        @keydown.arrow-left.window="if (lightboxOpen) currentIndex = (currentIndex - 1 + images.length) % images.length"
                        @keydown.arrow-right.window="if (lightboxOpen) currentIndex = (currentIndex + 1) % images.length">

                        <div class="flex flex-wrap gap-4">
                            @foreach($media->images as $image)
                                <button type="button" @click="lightboxOpen = true; currentIndex = {{ $loop->index }}"
                                    class="group relative block w-32 h-32 shrink-0 cursor-pointer p-0">
                                    <img src="{{ $image->thumb_url }}" alt="{{ $media->name }}" class="w-32 h-32 rounded-lg border border-gray-200 object-cover">
                                    <div class="absolute inset-0 flex items-center justify-center rounded-lg bg-black/0 transition group-hover:bg-black/40">
                                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
                                            class="size-6 text-white opacity-0 transition group-hover:opacity-100">
                                            <path stroke-linecap="round" stroke-linejoin="round" d="m21 21-5.197-5.197m0 0A7.5 7.5 0 1 0 5.196 5.196a7.5 7.5 0 0 0 10.607 10.607ZM10.5 7.5v6m3-3h-6" />
                                        </svg>
                                    </div>
                                </button>
                            @endforeach
                        </div>

                        {{-- Lightbox --}}
                        <div x-show="lightboxOpen" x-cloak class="fixed inset-0 z-50 flex items-center justify-center p-4">
                            <div class="absolute inset-0 bg-black/80" @click="lightboxOpen = false"></div>

                            <button type="button" @click="lightboxOpen = false"
                                class="absolute top-4 right-4 text-white hover:text-gray-300">
                                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="size-8">
                                    <path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12" />
                                </svg>
                            </button>

                            @if($media->images->count() > 1)
                                <button type="button" @click="currentIndex = (currentIndex - 1 + images.length) % images.length"
                                    class="absolute left-4 top-1/2 -translate-y-1/2 text-white hover:text-gray-300">
                                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="size-10">
                                        <path stroke-linecap="round" stroke-linejoin="round" d="m15 19-7-7 7-7" />
                                    </svg>
                                </button>
                                <button type="button" @click="currentIndex = (currentIndex + 1) % images.length"
                                    class="absolute right-4 top-1/2 -translate-y-1/2 text-white hover:text-gray-300">
                                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="size-10">
                                        <path stroke-linecap="round" stroke-linejoin="round" d="m9 5 7 7-7 7" />
                                    </svg>
                                </button>
                            @endif

                            <img :src="images[currentIndex]" alt="{{ $media->name }}" class="relative max-h-[90vh] max-w-[90vw] rounded-lg object-contain" @click.stop>
                        </div>
                    </div>
                @endif

            </div>
        </div>

    </div>

</div>

@endsection