@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.index') }}" class="text-sm font-medium text-teal-700 hover:text-teal-900">Retour aux contacts</a>
            <h1 class="mt-3 text-2xl font-semibold">Nouveau contact</h1>
        </div>

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

            <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') }}" 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') }}" 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') }}" 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') }}" 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') }}</textarea>
                </div>
            </div>

            <div class="rounded-lg border border-zinc-200 bg-white p-5">
                <h2 class="text-base font-semibold">Telephone</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', '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') }}" 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">
                    @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, old('group_ids', [])))
                                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" 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" class="h-4 w-4 rounded border-zinc-300 text-teal-700 focus:ring-teal-600">
                        Favori
                    </label>
                </div>
            </div>

            <div class="flex items-center justify-end gap-3">
                <a href="{{ route('contacts.index') }}" 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">
                    Creer le contact
                </button>
            </div>
        </form>
    </section>
@endsection