@extends('layouts.admin')

@section('title', $service ? "Modifier - {$service['title']}" : 'Ajouter un service')

@php
    $breadcrumbs = [['label' => 'Services', 'route' => 'admin.services.index'], ['label' => $service ? $service['title'] : 'Ajouter']];
    $focusAreas = $service['focus_areas'] ?? [];
@endphp

@section('content')

    <form method="POST" action="{{ $service ? route('admin.services.update', $service) : route('admin.services.store') }}" data-dirty-form novalidate>
        @csrf
        @if ($service)
            @method('PATCH')
        @endif

        <div class="mb-5 flex flex-col gap-1">
            <h1 class="text-xl font-bold text-brand-ink">{{ $service ? 'Modifier le service' : 'Ajouter un service' }}</h1>
            @if ($service)
                <p class="text-sm text-brand-muted">« {{ $service['title'] }} »</p>
            @endif
        </div>

        <div class="grid grid-cols-1 gap-6 lg:grid-cols-3">
            <div class="flex flex-col gap-4 lg:col-span-2">
                <div class="admin-card flex flex-col gap-4 p-5">
                    <div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
                        <x-admin.field type="text" name="title" label="Titre" required :value="old('title', $service['title'] ?? '')" placeholder="Ex. Douane" :error="$errors->first('title')" />
                        <x-admin.field type="text" name="slug" label="Slug" required :value="old('slug', $service['slug'] ?? '')" placeholder="ex. douane" help="Utilise pour l'ancre publique du service." :error="$errors->first('slug')" />
                    </div>
                    <x-admin.field type="textarea" name="short_description" label="Introduction courte" :rows="2" :value="old('short_description', $service['short_description'] ?? '')" help="Affichee en apercu sur la page d'accueil." :error="$errors->first('short_description')" />
                    <x-admin.field type="textarea" name="description" label="Description detaillee" required :rows="5" :value="old('description', $service['description'] ?? '')" :error="$errors->first('description')" />
                </div>

                <div class="admin-card p-5">
                    <h2 class="mb-3 text-sm font-semibold text-brand-ink">Points d'accompagnement</h2>
                    <div data-repeater>
                        <div data-repeater-items class="flex flex-col gap-2">
                            @foreach (old('focus_areas', $focusAreas) as $i => $area)
                                <x-admin.repeater-item :index="$i">
                                    <x-admin.field type="text" data-repeater-name="focus_areas[__INDEX__]" :name="'focus_areas['.$i.']'" label="Point" :value="$area" />
                                </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</button>
                        <template data-repeater-template>
                            <x-admin.repeater-item>
                                <x-admin.field type="text" data-repeater-name="focus_areas[__INDEX__]" name="focus_areas[__NEW__]" label="Point" />
                            </x-admin.repeater-item>
                        </template>
                    </div>
                </div>

                <div class="admin-card p-5">
                    <h2 class="mb-3 text-sm font-semibold text-brand-ink">Image</h2>
                    <div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
                        <div class="sm:col-span-2">
                            <x-admin.media-picker name="image" label="Image du service" alt-name="image_alt" :value="old('image', $service['media_id'] ?? null)" :preview-url="$service['image'] ?? null" :alt="old('image_alt', $service['image_alt'] ?? '')" />
                        </div>
                        <x-admin.field type="text" name="image_caption" label="Legende" :value="old('image_caption', $service['image_caption'] ?? '')" />
                        <x-admin.field type="select" name="image_position" label="Position de l'image" :options="['left' => 'Gauche', 'right' => 'Droite']" :value="old('image_position', $service['image_position'] ?? 'left')" />
                    </div>
                </div>
            </div>

            <div class="flex flex-col gap-4">
                <div class="admin-card flex flex-col gap-4 p-5">
                    <x-admin.field type="text" name="icon" label="Icone" :value="old('icon', $service['icon'] ?? '')" help="Cle d'icone interne, par exemple customs, route, truck." />
                    <x-admin.field type="number" name="sort_order" label="Ordre d'affichage" :value="old('sort_order', $service['sort_order'] ?? 0)" />
                    <x-admin.field type="select" name="status" label="Statut" :options="['published' => 'Publie', 'draft' => 'Brouillon', 'archived' => 'Archive']" :value="old('status', $service['status'] ?? 'draft')" />
                    <x-admin.field type="switch" name="is_active" label="Actif (visible publiquement)" :checked="old('is_active', $service['is_active'] ?? false)" />
                </div>
            </div>
        </div>

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

@endsection
