@extends('layouts.admin')

@section('title', 'Coordonnées')

@php
    $breadcrumbs = [['label' => 'Coordonnées']];
@endphp

@section('content')

    <form method="POST" action="{{ route('admin.settings.contact.update') }}" 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">Coordonnées</h1>
            <p class="text-sm text-brand-muted">Ces coordonnées alimentent le pied de page et la page Contact du site public.</p>
        </div>

        <div class="flex flex-col gap-5">
            <div class="admin-card flex flex-col gap-4 p-5">
                <x-admin.field type="email" name="contact[email]" label="E-mail public" :value="$contact['email']" placeholder="à renseigner" help="Actuellement non renseigné — affiché comme « à renseigner » sur le site public." />
            </div>

            <div class="admin-card p-5">
                <h2 class="mb-3 text-sm font-semibold text-brand-ink">Téléphones</h2>
                <div data-repeater>
                    <div data-repeater-items class="flex flex-col gap-2">
                        @forelse ($contact['phones'] as $i => $phone)
                            <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="phones[__INDEX__][label]" :name="'phones['.$i.'][label]'" label="Libellé" :value="$phone['label'] ?? ''" />
                                    <x-admin.field type="tel" data-repeater-name="phones[__INDEX__][number]" :name="'phones['.$i.'][number]'" label="Numéro" :value="$phone['number'] ?? ''" />
                                </div>
                            </x-admin.repeater-item>
                        @empty
                            <p class="text-sm text-brand-muted">Aucun numéro renseigné pour le moment.</p>
                        @endforelse
                    </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 numéro</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="phones[__INDEX__][label]" name="phones[__NEW__][label]" label="Libellé" placeholder="ex. Standard" />
                                <x-admin.field type="tel" data-repeater-name="phones[__INDEX__][number]" name="phones[__NEW__][number]" label="Numéro" />
                            </div>
                        </x-admin.repeater-item>
                    </template>
                </div>
            </div>

            <div class="admin-card p-5">
                <h2 class="mb-3 text-sm font-semibold text-brand-ink">Réseaux sociaux (facultatif)</h2>
                <div data-repeater>
                    <div data-repeater-items class="flex flex-col gap-2"></div>
                    <button type="button" data-repeater-add class="btn btn-secondary btn-sm"><x-icon name="plus" class="h-4 w-4" /> Ajouter un réseau social</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="select" data-repeater-name="socials[__INDEX__][platform]" name="socials[__NEW__][platform]" label="Plateforme" :options="['linkedin' => 'LinkedIn', 'facebook' => 'Facebook', 'instagram' => 'Instagram', 'x' => 'X (Twitter)']" />
                                <x-admin.field type="url" data-repeater-name="socials[__INDEX__][url]" name="socials[__NEW__][url]" label="Lien du profil" />
                            </div>
                        </x-admin.repeater-item>
                    </template>
                </div>
            </div>

            <div class="admin-card flex flex-col gap-4 p-5">
                <h2 class="text-sm font-semibold text-brand-ink">Adresse et horaires (à venir)</h2>
                <x-admin.field type="textarea" name="contact[address]" label="Adresse physique" :rows="2" placeholder="à renseigner" help="Aucune adresse n'a été communiquée à ce jour — ne pas afficher sur le site public tant qu'elle n'est pas fournie." />
                <x-admin.field type="text" name="contact[hours]" label="Horaires d'ouverture" placeholder="à renseigner" />
            </div>
        </div>

        <x-admin.action-bar :preview-href="route('contact')" status="published" />
    </form>

@endsection
