<x-layouts.tenant pageTitle="Nuevo paciente">
    <x-page-header title="Nuevo paciente" subtitle="Completa los datos del paciente. Se creará la historia clínica automáticamente.">
        <x-btn href="{{ route('tenant.patients.index') }}" variant="secondary">Cancelar</x-btn>
    </x-page-header>

    <form method="POST" action="{{ route('tenant.patients.store') }}" class="space-y-6">
        @csrf

        <x-card title="Datos personales">
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
                <label class="block">
                    <span class="text-sm font-medium text-gray-700">Primer nombre <span class="text-red-500">*</span></span>
                    <input name="first_name" value="{{ old('first_name') }}" required
                           class="mt-1 w-full rounded-lg border-gray-300 text-sm focus:border-indigo-500 focus:ring-indigo-500 @error('first_name') border-red-400 @enderror">
                    @error('first_name')<p class="text-xs text-red-500 mt-1">{{ $message }}</p>@enderror
                </label>
                <label class="block">
                    <span class="text-sm font-medium text-gray-700">Segundo nombre</span>
                    <input name="second_name" value="{{ old('second_name') }}"
                           class="mt-1 w-full rounded-lg border-gray-300 text-sm focus:border-indigo-500 focus:ring-indigo-500">
                </label>
                <label class="block">
                    <span class="text-sm font-medium text-gray-700">Primer apellido <span class="text-red-500">*</span></span>
                    <input name="last_name" value="{{ old('last_name') }}" required
                           class="mt-1 w-full rounded-lg border-gray-300 text-sm focus:border-indigo-500 focus:ring-indigo-500 @error('last_name') border-red-400 @enderror">
                    @error('last_name')<p class="text-xs text-red-500 mt-1">{{ $message }}</p>@enderror
                </label>
                <label class="block">
                    <span class="text-sm font-medium text-gray-700">Segundo apellido</span>
                    <input name="second_lastname" value="{{ old('second_lastname') }}"
                           class="mt-1 w-full rounded-lg border-gray-300 text-sm focus:border-indigo-500 focus:ring-indigo-500">
                </label>
            </div>

            <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mt-4">
                <label class="block">
                    <span class="text-sm font-medium text-gray-700">Tipo de documento</span>
                    <select name="document_type" class="mt-1 w-full rounded-lg border-gray-300 text-sm focus:border-indigo-500 focus:ring-indigo-500">
                        <option value="">Seleccionar…</option>
                        @foreach(['CC'=>'Cédula ciudadanía','CE'=>'Cédula extranjería','TI'=>'Tarjeta identidad','PP'=>'Pasaporte','NIT'=>'NIT','RC'=>'Registro civil'] as $val => $label)
                            <option value="{{ $val }}" @selected(old('document_type') === $val)>{{ $label }}</option>
                        @endforeach
                    </select>
                </label>
                <label class="block">
                    <span class="text-sm font-medium text-gray-700">Número de documento</span>
                    <input name="document_number" value="{{ old('document_number') }}"
                           class="mt-1 w-full rounded-lg border-gray-300 text-sm focus:border-indigo-500 focus:ring-indigo-500 @error('document_number') border-red-400 @enderror">
                    @error('document_number')<p class="text-xs text-red-500 mt-1">{{ $message }}</p>@enderror
                </label>
                <label class="block">
                    <span class="text-sm font-medium text-gray-700">Fecha de nacimiento</span>
                    <input type="date" name="birthdate" value="{{ old('birthdate') }}"
                           class="mt-1 w-full rounded-lg border-gray-300 text-sm focus:border-indigo-500 focus:ring-indigo-500">
                </label>
            </div>

            <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mt-4">
                <label class="block">
                    <span class="text-sm font-medium text-gray-700">Sexo</span>
                    <select name="gender" class="mt-1 w-full rounded-lg border-gray-300 text-sm focus:border-indigo-500 focus:ring-indigo-500">
                        <option value="">Seleccionar…</option>
                        <option value="male" @selected(old('gender') === 'male')>Masculino</option>
                        <option value="female" @selected(old('gender') === 'female')>Femenino</option>
                        <option value="other" @selected(old('gender') === 'other')>Otro</option>
                    </select>
                </label>
                <label class="block">
                    <span class="text-sm font-medium text-gray-700">Grupo sanguíneo</span>
                    <select name="blood_type" class="mt-1 w-full rounded-lg border-gray-300 text-sm focus:border-indigo-500 focus:ring-indigo-500">
                        <option value="">—</option>
                        @foreach(['A+','A-','B+','B-','AB+','AB-','O+','O-'] as $bt)
                            <option @selected(old('blood_type') === $bt)>{{ $bt }}</option>
                        @endforeach
                    </select>
                </label>
                <label class="block">
                    <span class="text-sm font-medium text-gray-700">EPS / Aseguradora</span>
                    <input name="insurance_company" value="{{ old('insurance_company') }}"
                           class="mt-1 w-full rounded-lg border-gray-300 text-sm focus:border-indigo-500 focus:ring-indigo-500">
                </label>
            </div>
        </x-card>

        <x-card title="Contacto">
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
                <label class="block">
                    <span class="text-sm font-medium text-gray-700">Teléfono <span class="text-red-500">*</span></span>
                    <input name="phone" value="{{ old('phone') }}" required
                           class="mt-1 w-full rounded-lg border-gray-300 text-sm focus:border-indigo-500 focus:ring-indigo-500 @error('phone') border-red-400 @enderror">
                    @error('phone')<p class="text-xs text-red-500 mt-1">{{ $message }}</p>@enderror
                </label>
                <label class="block">
                    <span class="text-sm font-medium text-gray-700">Email</span>
                    <input type="email" name="email" value="{{ old('email') }}"
                           class="mt-1 w-full rounded-lg border-gray-300 text-sm focus:border-indigo-500 focus:ring-indigo-500">
                </label>
                <label class="block">
                    <span class="text-sm font-medium text-gray-700">Dirección</span>
                    <input name="address" value="{{ old('address') }}"
                           class="mt-1 w-full rounded-lg border-gray-300 text-sm focus:border-indigo-500 focus:ring-indigo-500">
                </label>
                <label class="block">
                    <span class="text-sm font-medium text-gray-700">Ciudad</span>
                    <input name="city" value="{{ old('city') }}"
                           class="mt-1 w-full rounded-lg border-gray-300 text-sm focus:border-indigo-500 focus:ring-indigo-500">
                </label>
                <label class="block">
                    <span class="text-sm font-medium text-gray-700">País</span>
                    <input name="country" value="{{ old('country') }}"
                           class="mt-1 w-full rounded-lg border-gray-300 text-sm focus:border-indigo-500 focus:ring-indigo-500">
                </label>
            </div>
        </x-card>

        <x-card title="Contacto de emergencia">
            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                <label class="block">
                    <span class="text-sm font-medium text-gray-700">Nombre</span>
                    <input name="emergency_contact_name" value="{{ old('emergency_contact_name') }}"
                           class="mt-1 w-full rounded-lg border-gray-300 text-sm focus:border-indigo-500 focus:ring-indigo-500">
                </label>
                <label class="block">
                    <span class="text-sm font-medium text-gray-700">Teléfono</span>
                    <input name="emergency_contact_phone" value="{{ old('emergency_contact_phone') }}"
                           class="mt-1 w-full rounded-lg border-gray-300 text-sm focus:border-indigo-500 focus:ring-indigo-500">
                </label>
            </div>
        </x-card>

        <x-card title="Notas adicionales">
            <textarea name="notes" rows="3" placeholder="Observaciones generales del paciente…"
                      class="w-full rounded-lg border-gray-300 text-sm focus:border-indigo-500 focus:ring-indigo-500">{{ old('notes') }}</textarea>
        </x-card>

        <div class="flex justify-end gap-3">
            <x-btn href="{{ route('tenant.patients.index') }}" variant="secondary">Cancelar</x-btn>
            <x-btn type="submit" variant="primary">Guardar paciente</x-btn>
        </div>
    </form>
</x-layouts.tenant>
