@extends('layouts.admin')

@section('title', "Éditer — Page Galerie")

@php
    $breadcrumbs = [['label' => 'Tous les contenus', 'route' => 'admin.content.index'], ['label' => 'Page Galerie']];
@endphp

@section('content')

    <form method="POST" action="{{ route('admin.content.update', $pageModel) }}" data-dirty-form novalidate>
        @csrf
        @method('PATCH')
        <div class="mb-5 flex flex-col gap-1">
            <h1 class="text-xl font-bold text-brand-ink">Page Galerie</h1>
            <p class="text-sm text-brand-muted">Contenu général de la page. Les réalisations sont gérées dans le module <a href="{{ route('admin.gallery.index') }}" class="font-semibold text-brand-primary">Galerie</a>.</p>
        </div>

        <x-admin.tabs :tabs="['contenu' => 'Contenu', 'images' => 'Images', 'seo' => 'SEO', 'organisation' => 'Organisation', 'apercu' => 'Aperçu']" active="contenu" />

        <div data-tab-panel="contenu" class="flex flex-col gap-4 py-5">
            <x-admin.collapsible title="Hero intérieur" :open="true">
                <div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
                    <x-admin.field type="text" name="hero[title]" label="Titre" required value="Nos réalisations" />
                    <x-admin.field type="switch" name="hero[is_active]" label="Section active" :checked="true" />
                    <div class="sm:col-span-2">
                        <x-admin.field type="textarea" name="hero[subtitle]" label="Sous-titre" :rows="2" value="Découvrez quelques opérations, interventions et projets accompagnés par NH TRANS." />
                    </div>
                </div>
            </x-admin.collapsible>

            <x-admin.collapsible title="Introduction">
                <x-admin.field type="textarea" name="intro[text]" label="Texte d'introduction" :rows="3" value="Cet espace présente un aperçu des opérations accompagnées par NH TRANS : douane, transit, transport, manutention, entreposage et accompagnement logistique." />
            </x-admin.collapsible>

            <x-admin.collapsible title="Titre de la galerie">
                <x-admin.field type="text" name="grid[title]" label="Titre (facultatif, au-dessus de la grille)" />
            </x-admin.collapsible>

            <x-admin.collapsible title="État vide (aucune réalisation)">
                <div class="grid grid-cols-1 gap-4">
                    <x-admin.field type="text" name="empty_state[title]" label="Titre" value="Réalisations à venir" />
                    <x-admin.field type="textarea" name="empty_state[text]" label="Texte" :rows="2" value="Les réalisations de NH TRANS seront prochainement présentées dans cet espace." />
                </div>
                <p class="mt-3 text-xs text-brand-muted">Affiché automatiquement tant qu'aucune réalisation publiée n'existe dans le module Galerie.</p>
            </x-admin.collapsible>

            <x-admin.collapsible title="Appel à l'action final">
                <div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
                    <x-admin.field type="text" name="cta[title]" label="Titre" value="Un projet similaire à nous confier ?" />
                    <x-admin.field type="text" name="cta[button_label]" label="Bouton — libellé" value="Nous contacter" />
                    <div class="sm:col-span-2">
                        <x-admin.field type="textarea" name="cta[text]" label="Texte" :rows="2" value="Contactez NH TRANS pour échanger sur votre prochaine opération." />
                    </div>
                    <x-admin.field type="url" name="cta[button_url]" label="Bouton — lien" value="/contact" />
                    <x-admin.field type="switch" name="cta[is_active]" label="Section active" :checked="true" />
                </div>
            </x-admin.collapsible>
        </div>

        <div data-tab-panel="images" hidden class="py-5">
            <p class="text-sm text-brand-muted">Les images de réalisations sont gérées individuellement dans le module <a href="{{ route('admin.gallery.index') }}" class="font-semibold text-brand-primary">Galerie</a>.</p>
        </div>

        <div data-tab-panel="seo" hidden class="py-5">
            <div class="admin-card p-5">
                <x-admin.seo-fields :meta-title="config('nh_trans.meta.gallery.title')" :meta-description="config('nh_trans.meta.gallery.description')" :indexable="true" />
            </div>
        </div>

        <div data-tab-panel="organisation" hidden class="py-5">
            <div class="admin-card p-5">
                <div data-repeater>
                    <div data-repeater-items class="flex flex-col gap-2">
                        @foreach (['Hero intérieur', 'Introduction', 'Grille des réalisations', 'Appel à l\'action final'] as $i => $section)
                            <x-admin.repeater-item :index="$i">
                                <div class="flex items-center justify-between gap-3">
                                    <span class="text-sm font-medium text-brand-ink">{{ $section }}</span>
                                    <x-admin.field type="switch" :name="'sections['.$i.'][is_active]'" label="Actif" :checked="true" />
                                </div>
                            </x-admin.repeater-item>
                        @endforeach
                    </div>
                </div>
            </div>
        </div>

        <div data-tab-panel="apercu" hidden class="py-5">
            <div class="admin-card overflow-hidden">
                <div class="flex items-center justify-between border-b border-brand-border p-3">
                    <p class="text-sm font-medium text-brand-ink">Aperçu en direct de la page publique</p>
                    <a href="{{ route('gallery') }}" target="_blank" rel="noopener" class="btn btn-secondary btn-sm">Ouvrir dans un nouvel onglet</a>
                </div>
                <iframe src="{{ route('gallery') }}" title="Aperçu de la page Galerie" class="h-[70vh] w-full" loading="lazy"></iframe>
            </div>
        </div>

        <x-admin.action-bar :preview-href="route('gallery')" :status="$page['status'] ?? 'draft'" />
    </form>

@endsection
