@extends('layouts.app')

@section('content')
    <section class="mx-auto max-w-3xl">
        <div class="border-b border-zinc-200 pb-6">
            <a href="{{ route('contacts.show', $contact) }}" class="text-sm font-medium text-teal-700 hover:text-teal-900">Retour au contact</a>
            <h1 class="mt-3 text-2xl font-semibold">Modifier le contact</h1>
        </div>

        <form method="POST" action="{{ route('contacts.update', $contact) }}" class="mt-8 space-y-8">
            @csrf
            @method('PUT')

            <div class="rounded-lg border border-zinc-200 bg-white p-5">
                <h2 class="text-base font-semibold">Identite</h2>

                <div class="mt-5 grid gap-5 sm:grid-cols-2">
                    <div>
                        <label for="first_name" class="block text-sm font-medium text-zinc-700">Prenom</label>
                        <input id="first_name" name="first_name" value="{{ old('first_name', $contact->first_name) }}" class="mt-2 block w-full rounded-md border border-zinc-300 px-3 py-2 text-base shadow-sm outline-none focus:border-teal-600 focus:ring-2 focus:ring-teal-600/20">
                        @error('first_name')
                            <p class="mt-2 text-sm text-red-700">{{ $message }}</p>
                        @enderror
                    </div>

                    <div>
                        <label for="last_name" class="block text-sm font-medium text-zinc-700">Nom</label>
                        <input id="last_name" name="last_name" value="{{ old('last_name', $contact->last_name) }}" required class="mt-2 block w-full rounded-md border border-zinc-300 px-3 py-2 text-base shadow-sm outline-none focus:border-teal-600 focus:ring-2 focus:ring-teal-600/20">
                        @error('last_name')
                            <p class="mt-2 text-sm text-red-700">{{ $message }}</p>
                        @enderror
                    </div>

                    <div>
                        <label for="organization" class="block text-sm font-medium text-zinc-700">Structure</label>
                        <input id="organization" name="organization" value="{{ old('organization', $contact->organization) }}" class="mt-2 block w-full rounded-md border border-zinc-300 px-3 py-2 text-base shadow-sm outline-none focus:border-teal-600 focus:ring-2 focus:ring-teal-600/20">
                    </div>

                    <div>
                        <label for="email" class="block text-sm font-medium text-zinc-700">Email</label>
                        <input id="email" name="email" type="email" value="{{ old('email', $contact->email) }}" class="mt-2 block w-full rounded-md border border-zinc-300 px-3 py-2 text-base shadow-sm outline-none focus:border-teal-600 focus:ring-2 focus:ring-teal-600/20">
                        @error('email')
                            <p class="mt-2 text-sm text-red-700">{{ $message }}</p>
                        @enderror
                    </div>
                </div>

                <div class="mt-5">
                    <label for="notes" class="block text-sm font-medium text-zinc-700">Notes</label>
                    <textarea id="notes" name="notes" rows="4" class="mt-2 block w-full rounded-md border border-zinc-300 px-3 py-2 text-base shadow-sm outline-none focus:border-teal-600 focus:ring-2 focus:ring-teal-600/20">{{ old('notes', $contact->notes) }}</textarea>
                </div>
            </div>

            <div class="rounded-lg border border-zinc-200 bg-white p-5">
                <h2 class="text-base font-semibold">Telephone principal</h2>

                <div class="mt-5 grid gap-5 sm:grid-cols-[12rem_minmax(0,1fr)]">
                    <div>
                        <label for="phone_label" class="block text-sm font-medium text-zinc-700">Libelle</label>
                        <input id="phone_label" name="phone_label" value="{{ old('phone_label', $primaryPhone?->label ?? 'Mobile') }}" class="mt-2 block w-full rounded-md border border-zinc-300 px-3 py-2 text-base shadow-sm outline-none focus:border-teal-600 focus:ring-2 focus:ring-teal-600/20">
                    </div>

                    <div>
                        <label for="raw_phone_number" class="block text-sm font-medium text-zinc-700">Numero</label>
                        <input id="raw_phone_number" name="raw_phone_number" value="{{ old('raw_phone_number', $primaryPhone?->raw_number) }}" class="mt-2 block w-full rounded-md border border-zinc-300 px-3 py-2 text-base shadow-sm outline-none focus:border-teal-600 focus:ring-2 focus:ring-teal-600/20">
                        @error('raw_phone_number')
                            <p class="mt-2 text-sm text-red-700">{{ $message }}</p>
                        @enderror
                    </div>
                </div>
            </div>

            <div class="rounded-lg border border-zinc-200 bg-white p-5">
                <h2 class="text-base font-semibold">Groupes et options</h2>

                <div class="mt-5 grid gap-3 sm:grid-cols-2">
                    @php($selectedGroups = old('group_ids', $contact->groups->pluck('id')->all()))

                    @forelse ($groups as $group)
                        <label class="flex items-center gap-2 rounded-md border border-zinc-200 px-3 py-2 text-sm text-zinc-700">
                            <input
                                name="group_ids[]"
                                type="checkbox"
                                value="{{ $group->id }}"
                                @checked(in_array($group->id, $selectedGroups))
                                class="h-4 w-4 rounded border-zinc-300 text-teal-700 focus:ring-teal-600"
                            >
                            {{ $group->name }}
                        </label>
                    @empty
                        <p class="text-sm text-zinc-600">Aucun groupe disponible.</p>
                    @endforelse
                </div>

                <div class="mt-6 grid gap-3 sm:grid-cols-2">
                    <label class="flex items-center gap-2 text-sm text-zinc-700">
                        <input name="sms_opt_out" type="checkbox" value="1" @checked(old('sms_opt_out', $contact->sms_opt_out)) class="h-4 w-4 rounded border-zinc-300 text-teal-700 focus:ring-teal-600">
                        Refus SMS
                    </label>

                    <label class="flex items-center gap-2 text-sm text-zinc-700">
                        <input name="is_favorite" type="checkbox" value="1" @checked(old('is_favorite', $contact->is_favorite)) class="h-4 w-4 rounded border-zinc-300 text-teal-700 focus:ring-teal-600">
                        Favori
                    </label>
                </div>
            </div>

            <div class="flex flex-wrap items-center justify-between gap-3">
                <button type="submit" form="delete-contact-form" class="rounded-md border border-red-300 px-4 py-2.5 text-sm font-semibold text-red-700 hover:bg-red-50">
                    Supprimer
                </button>

                <div class="flex items-center gap-3">
                    <a href="{{ route('contacts.show', $contact) }}" class="rounded-md border border-zinc-300 px-4 py-2.5 text-sm font-semibold text-zinc-800 hover:bg-zinc-100">Annuler</a>
                    <button type="submit" class="rounded-md bg-teal-700 px-4 py-2.5 text-sm font-semibold text-white hover:bg-teal-800 focus:outline-none focus:ring-2 focus:ring-teal-600 focus:ring-offset-2">
                        Enregistrer
                    </button>
                </div>
            </div>
        </form>

        <form id="delete-contact-form" method="POST" action="{{ route('contacts.destroy', $contact) }}" onsubmit="return confirm('Supprimer ce contact ?')">
            @csrf
            @method('DELETE')
        </form>
    </section>
@endsection