@csrf

<div class="grid gap-6 md:grid-cols-2">
    <div class="md:col-span-2">
        <x-input-label for="name" :value="__('Nombre del paciente')" />
        <x-text-input id="name" class="block mt-1 w-full" type="text" name="name" :value="old('name', $patient->name ?? '')" required />
        <x-input-error :messages="$errors->get('name')" class="mt-2" />
    </div>

    <div class="md:col-span-2 rounded-lg border border-teal-200 bg-teal-50/80 px-4 py-3 dark:border-teal-800 dark:bg-teal-950/30">
        <x-input-label for="clinical_code" :value="__('ID / código único (escáner o manual)')" />
        <x-text-input id="clinical_code" class="mt-1 block w-full font-mono text-lg tracking-wide uppercase" type="text" name="clinical_code"
                      :value="old('clinical_code', $patient->clinical_code ?? '')"
                      maxlength="24" autocomplete="off" spellcheck="false"
                      placeholder="{{ $patient->exists ? '' : __('Ej. PAC-000001 o código de barras') }}" />
        <p class="mt-2 text-xs text-teal-800 dark:text-teal-200">
            {{ __('Enfoca el cursor aquí y escanea con el lector, o escribe el código. Si lo dejas vacío al crear, se asignará uno automático (PAC-…).') }}
        </p>
        <x-input-error :messages="$errors->get('clinical_code')" class="mt-2" />
    </div>

    <div>
        <x-input-label for="current_weight_kg" :value="__('Peso actual (kg)')" />
        <x-text-input id="current_weight_kg" class="block mt-1 w-full" type="number" step="0.001" min="0" name="current_weight_kg"
                      :value="old('current_weight_kg', $patient->current_weight_kg ?? '')" />
        <x-input-error :messages="$errors->get('current_weight_kg')" class="mt-2" />
    </div>
    <div>
        <x-input-label for="color" :value="__('Color')" />
        <x-text-input id="color" class="block mt-1 w-full" type="text" name="color" :value="old('color', $patient->color ?? '')" />
        <x-input-error :messages="$errors->get('color')" class="mt-2" />
    </div>
    <div>
        <x-input-label for="breed" :value="__('Raza')" />
        <x-text-input id="breed" class="block mt-1 w-full" type="text" name="breed" :value="old('breed', $patient->breed ?? '')" />
        <x-input-error :messages="$errors->get('breed')" class="mt-2" />
    </div>
    <div>
        <x-input-label for="species" :value="__('Especie')" />
        <x-text-input id="species" class="block mt-1 w-full" type="text" name="species" :value="old('species', $patient->species ?? '')"
                      placeholder="{{ __('Ej. Canino, Felino') }}" />
        <x-input-error :messages="$errors->get('species')" class="mt-2" />
    </div>
    <div>
        <x-input-label for="sex" :value="__('Sexo')" />
        <select id="sex" name="sex"
                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">
            @php($sx = old('sex', $patient->sex ?? ''))
            <option value="">{{ __('Seleccionar') }}</option>
            <option value="M" @selected($sx === 'M')>{{ __('Macho') }}</option>
            <option value="F" @selected($sx === 'F')>{{ __('Hembra') }}</option>
            <option value="U" @selected($sx === 'U')>{{ __('Desconocido') }}</option>
        </select>
        <x-input-error :messages="$errors->get('sex')" class="mt-2" />
    </div>
    <div>
        <x-input-label for="birth_date" :value="__('Fecha de nacimiento')" />
        <x-text-input id="birth_date" class="block mt-1 w-full" type="date" name="birth_date" :value="old('birth_date', isset($patient) && $patient->birth_date ? $patient->birth_date->format('Y-m-d') : '')" />
        <x-input-error :messages="$errors->get('birth_date')" class="mt-2" />
    </div>
    <div>
        <x-input-label for="microchip" :value="__('Microchip (opcional)')" />
        <x-text-input id="microchip" class="block mt-1 w-full" type="text" name="microchip" :value="old('microchip', $patient->microchip ?? '')" />
        <x-input-error :messages="$errors->get('microchip')" class="mt-2" />
    </div>
    <div class="md:col-span-2">
        <x-input-label for="notes" :value="__('Notas generales (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', $patient->notes ?? '') }}</textarea>
        <x-input-error :messages="$errors->get('notes')" class="mt-2" />
    </div>
    <div class="md:col-span-2">
        <x-input-label for="allergies" :value="__('Alergias / reacciones adversas (opcional)')" />
        <textarea id="allergies" name="allergies" 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"
                  placeholder="{{ __('Medicamentos, alimentos, vacunas…') }}">{{ old('allergies', $patient->allergies ?? '') }}</textarea>
        <x-input-error :messages="$errors->get('allergies')" class="mt-2" />
    </div>
    <div>
        <x-input-label for="sterilized" :value="__('Esterilización / castración')" />
        @php($st = old('sterilized', $patient->exists ? (is_null($patient->sterilized) ? '' : ($patient->sterilized ? '1' : '0')) : ''))
        <select id="sterilized" name="sterilized"
                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">
            <option value="">{{ __('Sin indicar') }}</option>
            <option value="1" @selected($st === '1')>{{ __('Sí') }}</option>
            <option value="0" @selected($st === '0')>{{ __('No') }}</option>
        </select>
        <x-input-error :messages="$errors->get('sterilized')" 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>
    <div class="md:col-span-2">
        <label class="inline-flex items-center gap-2 text-sm text-gray-700 dark:text-gray-300">
            <input type="hidden" name="is_active" value="0" />
            @php($activeDefault = ($patient->exists ?? false) ? ($patient->is_active ? '1' : '0') : '1')
            <input type="checkbox" name="is_active" value="1" class="rounded border-gray-300 dark:border-gray-700"
                   @checked(old('is_active', $activeDefault) === '1') />
            {{ __('Paciente activo') }}
        </label>
    </div>
    @isset($patient)
        @if ($patient->exists && $patient->photo_path)
            <div class="md:col-span-2 flex items-center gap-3">
                <img src="{{ \Illuminate\Support\Facades\Storage::url($patient->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="{{ isset($patient) && $patient->exists ? route('clients.patients.show', [$client, $patient]) : route('clients.show', $client) }}"
       class="text-sm text-gray-600 dark:text-gray-400 hover:underline">{{ __('Cancelar') }}</a>
    <x-primary-button>{{ $submitLabel }}</x-primary-button>
</div>