<x-layouts.tenant pageTitle="Nueva orden — {{ $patient->fullName() }}">
    <x-page-header :title="'Nueva orden: '.$patient->fullName()" subtitle="Crea una orden, remisión o recomendación clínica.">
        <x-btn :href="route('tenant.patients.show', $patient)" variant="secondary">Cancelar</x-btn>
    </x-page-header>

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

        <x-card title="Datos de la orden">
            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                <label class="block">
                    <span class="text-sm font-medium text-gray-700">Tipo de orden <span class="text-red-500">*</span></span>
                    <select name="type" required class="mt-1 w-full rounded-lg border-gray-300 text-sm focus:border-indigo-500 focus:ring-indigo-500 @error('type') border-red-400 @enderror">
                        <option value="">Seleccionar tipo…</option>
                        @foreach($types as $val => $label)
                            <option value="{{ $val }}" @selected(old('type') === $val)>{{ $label }}</option>
                        @endforeach
                    </select>
                    @error('type')<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">Profesional</span>
                    <select name="employee_id" class="mt-1 w-full rounded-lg border-gray-300 text-sm focus:border-indigo-500 focus:ring-indigo-500">
                        <option value="">Sin asignar</option>
                        @foreach($employees as $emp)
                            <option value="{{ $emp->id }}" @selected(old('employee_id') == $emp->id)>{{ $emp->user?->name ?? 'Empleado '.$emp->id }}</option>
                        @endforeach
                    </select>
                </label>
            </div>
            <div class="mt-4">
                <label class="block">
                    <span class="text-sm font-medium text-gray-700">Título <span class="text-red-500">*</span></span>
                    <input type="text" name="title" value="{{ old('title') }}" required
                           class="mt-1 w-full rounded-lg border-gray-300 text-sm focus:border-indigo-500 focus:ring-indigo-500 @error('title') border-red-400 @enderror"
                           placeholder="ej. Hemograma completo, Radiografía de tórax…">
                    @error('title')<p class="text-xs text-red-500 mt-1">{{ $message }}</p>@enderror
                </label>
            </div>
            <div class="mt-4">
                <label class="block">
                    <span class="text-sm font-medium text-gray-700">Descripción / Indicaciones</span>
                    <textarea name="description" rows="5"
                              class="mt-1 w-full rounded-lg border-gray-300 text-sm focus:border-indigo-500 focus:ring-indigo-500"
                              placeholder="Descripción detallada de la orden o recomendación…">{{ old('description') }}</textarea>
                </label>
            </div>
            <div class="mt-4">
                <label class="block">
                    <span class="text-sm font-medium text-gray-700">Notas adicionales</span>
                    <textarea name="notes" rows="2"
                              class="mt-1 w-full rounded-lg border-gray-300 text-sm focus:border-indigo-500 focus:ring-indigo-500">{{ old('notes') }}</textarea>
                </label>
            </div>
        </x-card>

        <div class="flex justify-end gap-3">
            <x-btn :href="route('tenant.patients.show', $patient)" variant="secondary">Cancelar</x-btn>
            <x-btn type="submit" variant="primary">Crear orden</x-btn>
        </div>
    </form>
</x-layouts.tenant>
