@csrf

<div class="grid gap-6 md:grid-cols-2">
    <div class="md:col-span-2">
        <x-input-label for="name" :value="__('Nombre completo')" />
        <x-text-input id="name" class="block mt-1 w-full" type="text" name="name" :value="old('name', $client->name ?? '')" required autocomplete="name" />
        <x-input-error :messages="$errors->get('name')" class="mt-2" />
    </div>
    <div class="md:col-span-2">
        <x-input-label for="document_number" :value="__('Cédula')" />
        <x-text-input id="document_number" class="block mt-1 w-full font-mono" type="text" name="document_number" :value="old('document_number', $client->document_number ?? '')"
                      inputmode="numeric" autocomplete="off" placeholder="{{ __('Número de cédula') }}" />
        <p class="mt-1 text-xs text-gray-500 dark:text-gray-400">{{ __('Si indicas cédula, el tipo de documento se guarda como V por defecto.') }}</p>
        <x-input-error :messages="$errors->get('document_number')" class="mt-2" />
    </div>
    <div>
        <x-input-label for="phone" :value="__('Teléfono')" />
        <x-text-input id="phone" class="block mt-1 w-full" type="text" name="phone" :value="old('phone', $client->phone ?? '')" autocomplete="tel" />
        <x-input-error :messages="$errors->get('phone')" class="mt-2" />
    </div>
    <div>
        <x-input-label for="email" :value="__('Correo')" />
        <x-text-input id="email" class="block mt-1 w-full" type="email" name="email" :value="old('email', $client->email ?? '')" autocomplete="email" />
        <x-input-error :messages="$errors->get('email')" class="mt-2" />
    </div>
    <div class="md:col-span-2">
        <x-input-label for="address" :value="__('Dirección')" />
        <textarea id="address" name="address" rows="2"
                  class="block mt-1 w-full rounded-md border-gray-300 dark:border-gray-700 dark:bg-gray-900 dark:text-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500">{{ old('address', $client->address ?? '') }}</textarea>
        <x-input-error :messages="$errors->get('address')" class="mt-2" />
    </div>
    <div class="md:col-span-2">
        <x-input-label for="notes" :value="__('Notas internas (opcional)')" />
        <textarea id="notes" name="notes" rows="3"
                  class="block mt-1 w-full rounded-md border-gray-300 dark:border-gray-700 dark:bg-gray-900 dark:text-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500">{{ old('notes', $client->notes ?? '') }}</textarea>
        <x-input-error :messages="$errors->get('notes')" class="mt-2" />
    </div>
    <div class="md:col-span-2">
        <x-input-label for="photo" :value="__('Foto de perfil (opcional)')" />
        <input id="photo" name="photo" type="file" accept="image/*"
               class="mt-1 block w-full text-sm text-gray-600 dark:text-gray-300 file:mr-4 file:rounded-md file:border-0 file:bg-indigo-50 file:px-4 file:py-2 file:text-sm file:font-medium file:text-indigo-700 dark:file:bg-indigo-900/40 dark:file:text-indigo-200" />
        <x-input-error :messages="$errors->get('photo')" class="mt-2" />
    </div>
    @isset($client)
        @if ($client->photo_path)
            <div class="md:col-span-2 flex items-center gap-3">
                <img src="{{ \Illuminate\Support\Facades\Storage::url($client->photo_path) }}" alt="" class="h-20 w-20 rounded-lg object-cover border border-gray-200 dark:border-gray-600" />
                <label class="inline-flex items-center gap-2 text-sm text-gray-700 dark:text-gray-300">
                    <input type="hidden" name="remove_photo" value="0" />
                    <input type="checkbox" name="remove_photo" value="1" class="rounded border-gray-300 dark:border-gray-700" />
                    {{ __('Quitar foto actual') }}
                </label>
            </div>
        @endif
    @endisset
</div>

<div class="flex items-center justify-end gap-3 mt-8">
    <a href="{{ ($client->exists ?? false) ? route('clients.show', $client) : route('clients.index') }}"
       class="text-sm text-gray-600 dark:text-gray-400 hover:underline">{{ __('Cancelar') }}</a>
    <x-primary-button>{{ $submitLabel }}</x-primary-button>
</div>