@extends('layouts.admin')

@section('title', "Éditer — Accueil")

@php
    $breadcrumbs = [['label' => 'Tous les contenus', 'route' => 'admin.content.index'], ['label' => 'Accueil']];
@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 Accueil</h1>
            <p class="text-sm text-brand-muted">Modifiez le contenu de la page d'accueil du site public.</p>
        </div>

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

        {{-- Onglet Contenu --}}
        <div data-tab-panel="contenu" class="flex flex-col gap-4 py-5">

            <x-admin.collapsible title="Hero principal" :open="true">
                <div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
                    <x-admin.field type="text" name="hero[eyebrow]" label="Surtitre" value="Prestation de services" />
                    <x-admin.field type="switch" name="hero[is_active]" label="Section active" :checked="true" />
                    <div class="sm:col-span-2">
                        <x-admin.field type="text" name="hero[title]" label="Titre" required value="Votre partenaire de confiance pour vos opérations de transit et de transport" />
                    </div>
                    <div class="sm:col-span-2">
                        <x-admin.field type="textarea" name="hero[subtitle]" label="Sous-titre" :rows="2" value="NH TRANS simplifie vos opérations de Douane, Transit, Transport et Import-Export au Cameroun et à l'international." />
                    </div>
                    <x-admin.field type="text" name="hero[primary_button_label]" label="Bouton principal — libellé" value="Découvrir nos services" />
                    <x-admin.field type="url" name="hero[primary_button_url]" label="Bouton principal — lien" value="/services" />
                    <x-admin.field type="text" name="hero[secondary_button_label]" label="Bouton secondaire — libellé" value="Nous contacter" />
                    <x-admin.field type="url" name="hero[secondary_button_url]" label="Bouton secondaire — lien" value="/contact" />
                </div>
            </x-admin.collapsible>

            <x-admin.collapsible title="Points de confiance" badge="4 éléments">
                <div data-repeater>
                    <div data-repeater-items class="flex flex-col gap-3">
                        @foreach (config('nh_trans.value_props') as $i => $point)
                            <x-admin.repeater-item :index="$i">
                                <div class="grid grid-cols-1 gap-3 sm:grid-cols-2">
                                    <x-admin.field type="text" data-repeater-name="trust_points[__INDEX__][title]" :name="'trust_points['.$i.'][title]'" label="Titre" :value="$point['title']" />
                                    <x-admin.field type="text" data-repeater-name="trust_points[__INDEX__][icon]" :name="'trust_points['.$i.'][icon]'" label="Icône" :value="$point['icon']" />
                                    <div class="sm:col-span-2">
                                        <x-admin.field type="textarea" data-repeater-name="trust_points[__INDEX__][text]" :name="'trust_points['.$i.'][text]'" label="Texte" :rows="2" :value="$point['description']" />
                                    </div>
                                </div>
                            </x-admin.repeater-item>
                        @endforeach
                    </div>
                    <button type="button" data-repeater-add class="btn btn-secondary btn-sm mt-3">
                        <x-icon name="plus" class="h-4 w-4" /> Ajouter un point de confiance
                    </button>
                    <template data-repeater-template>
                        <x-admin.repeater-item>
                            <div class="grid grid-cols-1 gap-3 sm:grid-cols-2">
                                <x-admin.field type="text" data-repeater-name="trust_points[__INDEX__][title]" name="trust_points[__NEW__][title]" label="Titre" />
                                <x-admin.field type="text" data-repeater-name="trust_points[__INDEX__][icon]" name="trust_points[__NEW__][icon]" label="Icône" />
                                <div class="sm:col-span-2">
                                    <x-admin.field type="textarea" data-repeater-name="trust_points[__INDEX__][text]" name="trust_points[__NEW__][text]" label="Texte" :rows="2" />
                                </div>
                            </div>
                        </x-admin.repeater-item>
                    </template>
                </div>
            </x-admin.collapsible>

            <x-admin.collapsible title="Aperçu des services">
                <div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
                    <x-admin.field type="text" name="services_preview[title]" label="Titre de section" value="Des solutions complètes pour la circulation de vos marchandises" />
                    <x-admin.field type="number" name="services_preview[count]" label="Nombre de services affichés" value="7" />
                    <div class="sm:col-span-2">
                        <x-admin.field type="textarea" name="services_preview[subtitle]" label="Sous-titre" :rows="2" value="De la douane à l'accompagnement logistique, NH TRANS vous accompagne à chaque étape." />
                    </div>
                    <x-admin.field type="switch" name="services_preview[is_active]" label="Section active" :checked="true" />
                </div>
            </x-admin.collapsible>

            <x-admin.collapsible title="Présentation de l'entreprise">
                <div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
                    <x-admin.field type="text" name="company[title]" label="Titre" value="Un accompagnement pensé pour la circulation de vos marchandises" />
                    <x-admin.field type="select" name="company[image_position]" label="Position de l'image" :options="['left' => 'Gauche', 'right' => 'Droite']" value="left" />
                    <div class="sm:col-span-2">
                        <x-admin.field type="textarea" name="company[text]" label="Texte" :rows="4" value="NH TRANS accompagne les particuliers et les entreprises dans la gestion et la circulation de leurs marchandises, au Cameroun comme à l'international." />
                    </div>
                    <x-admin.field type="text" name="company[button_label]" label="Bouton — libellé" value="En savoir plus sur NH TRANS" />
                    <x-admin.field type="url" name="company[button_url]" label="Bouton — lien" value="/a-propos" />
                    <x-admin.field type="switch" name="company[is_active]" label="Section active" :checked="true" />
                </div>
            </x-admin.collapsible>

            <x-admin.collapsible title="Méthode d'accompagnement" badge="4 étapes">
                <div data-repeater>
                    <div data-repeater-items class="flex flex-col gap-3">
                        @foreach (config('nh_trans.process_steps') as $i => $step)
                            <x-admin.repeater-item :index="$i">
                                <div class="grid grid-cols-1 gap-3 sm:grid-cols-2">
                                    <x-admin.field type="text" data-repeater-name="process[__INDEX__][title]" :name="'process['.$i.'][title]'" label="Titre de l'étape" :value="$step['title']" />
                                    <x-admin.field type="switch" data-repeater-name="process[__INDEX__][is_active]" :name="'process['.$i.'][is_active]'" label="Étape active" :checked="true" />
                                    <div class="sm:col-span-2">
                                        <x-admin.field type="textarea" data-repeater-name="process[__INDEX__][description]" :name="'process['.$i.'][description]'" label="Description" :rows="2" :value="$step['description']" />
                                    </div>
                                </div>
                            </x-admin.repeater-item>
                        @endforeach
                    </div>
                    <button type="button" data-repeater-add class="btn btn-secondary btn-sm mt-3">
                        <x-icon name="plus" class="h-4 w-4" /> Ajouter une étape
                    </button>
                    <template data-repeater-template>
                        <x-admin.repeater-item>
                            <div class="grid grid-cols-1 gap-3 sm:grid-cols-2">
                                <x-admin.field type="text" data-repeater-name="process[__INDEX__][title]" name="process[__NEW__][title]" label="Titre de l'étape" />
                                <x-admin.field type="switch" data-repeater-name="process[__INDEX__][is_active]" name="process[__NEW__][is_active]" label="Étape active" :checked="true" />
                                <div class="sm:col-span-2">
                                    <x-admin.field type="textarea" data-repeater-name="process[__INDEX__][description]" name="process[__NEW__][description]" label="Description" :rows="2" />
                                </div>
                            </div>
                        </x-admin.repeater-item>
                    </template>
                </div>
            </x-admin.collapsible>

            <x-admin.collapsible title="Mosaïque opérationnelle" badge="Images d'illustration">
                <p class="mb-3 text-xs text-brand-muted">Collection d'images libres (conteneurs, opérations, entrepôt…) affichées en mosaïque. Actuellement vide — aucune photographie fournie.</p>
                <div data-repeater>
                    <div data-repeater-items class="grid grid-cols-1 gap-3 sm:grid-cols-2"></div>
                    <button type="button" data-repeater-add class="btn btn-secondary btn-sm mt-3">
                        <x-icon name="plus" class="h-4 w-4" /> Ajouter une image
                    </button>
                    <template data-repeater-template>
                        <x-admin.repeater-item>
                            <div class="flex flex-col gap-3">
                                <x-admin.media-picker name="mosaic[__NEW__][image]" label="Image" alt-name="mosaic[__NEW__][image_alt]" />
                                <x-admin.field type="text" data-repeater-name="mosaic[__INDEX__][title]" name="mosaic[__NEW__][title]" label="Titre (facultatif)" />
                            </div>
                        </x-admin.repeater-item>
                    </template>
                </div>
            </x-admin.collapsible>

            <x-admin.collapsible title="Section Partenaires">
                <div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
                    <x-admin.field type="text" name="partners_section[title]" label="Titre" value="Nos partenaires" />
                    <x-admin.field type="text" name="partners_section[subtitle]" label="Sous-titre (facultatif)" />
                    <x-admin.field type="select" name="partners_section[scroll_mode]" label="Mode de défilement" :options="['auto' => 'Automatique', 'manual' => 'Manuel (statique)']" value="auto" />
                    <x-admin.field type="select" name="partners_section[speed]" label="Vitesse" :options="['slow' => 'Lente', 'normal' => 'Normale', 'fast' => 'Rapide']" value="normal" />
                    <x-admin.field type="select" name="partners_section[direction]" label="Direction" :options="['left' => 'Vers la gauche', 'right' => 'Vers la droite']" value="left" />
                    <x-admin.field type="switch" name="partners_section[pause_on_hover]" label="Pause au survol" :checked="true" />
                    <x-admin.field type="switch" name="partners_section[is_active]" label="Section active" :checked="true" />
                </div>
                <p class="mt-3 text-xs text-brand-muted">
                    Les partenaires eux-mêmes sont gérés dans le module
                    <a href="{{ route('admin.partners.index') }}" class="font-semibold text-brand-primary">Partenaires</a>.
                </p>
            </x-admin.collapsible>

            <x-admin.collapsible title="Section Clients">
                <div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
                    <x-admin.field type="text" name="clients_section[title]" label="Titre" value="Ils nous font confiance" />
                    <x-admin.field type="text" name="clients_section[subtitle]" label="Sous-titre (facultatif)" />
                    <x-admin.field type="select" name="clients_section[scroll_mode]" label="Mode de défilement" :options="['auto' => 'Automatique', 'manual' => 'Manuel (statique)']" value="auto" />
                    <x-admin.field type="select" name="clients_section[speed]" label="Vitesse" :options="['slow' => 'Lente', 'normal' => 'Normale', 'fast' => 'Rapide']" value="normal" />
                    <x-admin.field type="select" name="clients_section[direction]" label="Direction" :options="['left' => 'Vers la gauche', 'right' => 'Vers la droite']" value="right" />
                    <x-admin.field type="switch" name="clients_section[pause_on_hover]" label="Pause au survol" :checked="true" />
                    <x-admin.field type="switch" name="clients_section[is_active]" label="Section active" :checked="true" />
                </div>
                <p class="mt-3 text-xs text-brand-muted">
                    Les clients eux-mêmes sont gérés dans le module
                    <a href="{{ route('admin.clients.index') }}" class="font-semibold text-brand-primary">Clients</a>.
                </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="Discutons de votre prochaine opération" />
                    <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 vos besoins en douane, transit, transport ou import-export." />
                    </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>

        {{-- Onglet Images --}}
        <div data-tab-panel="images" hidden class="flex flex-col gap-4 py-5">
            <div class="admin-card p-5">
                <x-admin.media-picker name="hero[image]" label="Image du hero" alt-name="hero[image_alt]" help="Composition illustrant conteneurs/transport maritime. Actuellement : illustration SVG intégrée au code, aucune photo requise." />
            </div>
            <div class="admin-card p-5">
                <x-admin.media-picker name="company[image]" label="Image — Présentation de l'entreprise" alt-name="company[image_alt]" />
            </div>
        </div>

        {{-- Onglet SEO --}}
        <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.home.title')"
                    :meta-description="config('nh_trans.meta.home.description')"
                    :indexable="true"
                />
            </div>
        </div>

        {{-- Onglet Organisation --}}
        <div data-tab-panel="organisation" hidden class="py-5">
            <div class="admin-card p-5">
                <p class="mb-4 text-sm text-brand-muted">Activez, désactivez et réordonnez les sections de la page.</p>
                <div data-repeater>
                    <div data-repeater-items class="flex flex-col gap-2">
                        @foreach (['Hero principal', 'Points de confiance', 'Aperçu des services', 'Présentation de l\'entreprise', 'Méthode d\'accompagnement', 'Mosaïque opérationnelle', 'Partenaires', 'Clients', '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" class="flex-row-reverse items-center" />
                                </div>
                            </x-admin.repeater-item>
                        @endforeach
                    </div>
                </div>
            </div>
        </div>

        {{-- Onglet Aperçu --}}
        <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('home') }}" target="_blank" rel="noopener" class="btn btn-secondary btn-sm">Ouvrir dans un nouvel onglet</a>
                </div>
                <iframe src="{{ route('home') }}" title="Aperçu de la page Accueil" class="h-[70vh] w-full" loading="lazy"></iframe>
            </div>
        </div>

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

@endsection
