<x-layouts.tenant pageTitle="Nueva receta — {{ $patient->fullName() }}">
    <x-page-header :title="'Nueva receta: '.$patient->fullName()" subtitle="Genera una prescripción médica para el paciente.">
        <x-btn :href="route('tenant.patients.show', $patient)" variant="secondary">Cancelar</x-btn>
    </x-page-header>

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

        <x-card title="Información de la receta">
            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                <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">Diagnóstico (resumen)</span>
                    <input type="text" name="diagnosis_summary" value="{{ old('diagnosis_summary') }}"
                           class="mt-1 w-full rounded-lg border-gray-300 text-sm focus:border-indigo-500 focus:ring-indigo-500"
                           placeholder="Diagnóstico principal para el cual se prescribe…">
                </label>
            </div>
        </x-card>

        <x-card title="Medicamentos">
            <div x-data="{
                items: [{ medication: '', dose: '', frequency: '', duration: '', route: '', instructions: '' }],
                addItem() { this.items.push({ medication: '', dose: '', frequency: '', duration: '', route: '', instructions: '' }) },
                removeItem(i) { this.items.splice(i, 1) }
            }">
                <template x-for="(item, i) in items" :key="i">
                    <div class="border border-gray-200 rounded-xl p-4 mb-4 bg-gray-50">
                        <div class="flex items-center justify-between mb-3">
                            <p class="text-xs font-bold text-gray-600 uppercase tracking-wide" x-text="'Medicamento ' + (i+1)"></p>
                            <button type="button" @click="removeItem(i)"
                                    x-show="items.length > 1"
                                    class="text-red-400 hover:text-red-600 text-sm">✕ Eliminar</button>
                        </div>
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-3">
                            <div class="md:col-span-2">
                                <label class="text-xs font-medium text-gray-600">Medicamento / producto <span class="text-red-500">*</span></label>
                                <input type="text" :name="'items['+i+'][medication]'" x-model="item.medication" required
                                       class="mt-1 w-full rounded-lg border-gray-300 text-sm focus:border-indigo-500 focus:ring-indigo-500"
                                       placeholder="Nombre del medicamento">
                            </div>
                            <div>
                                <label class="text-xs font-medium text-gray-600">Dosis</label>
                                <input type="text" :name="'items['+i+'][dose]'" x-model="item.dose"
                                       class="mt-1 w-full rounded-lg border-gray-300 text-sm focus:border-indigo-500 focus:ring-indigo-500"
                                       placeholder="ej. 500mg">
                            </div>
                            <div>
                                <label class="text-xs font-medium text-gray-600">Frecuencia</label>
                                <input type="text" :name="'items['+i+'][frequency]'" x-model="item.frequency"
                                       class="mt-1 w-full rounded-lg border-gray-300 text-sm focus:border-indigo-500 focus:ring-indigo-500"
                                       placeholder="ej. cada 8 horas">
                            </div>
                            <div>
                                <label class="text-xs font-medium text-gray-600">Duración</label>
                                <input type="text" :name="'items['+i+'][duration]'" x-model="item.duration"
                                       class="mt-1 w-full rounded-lg border-gray-300 text-sm focus:border-indigo-500 focus:ring-indigo-500"
                                       placeholder="ej. 7 días">
                            </div>
                            <div>
                                <label class="text-xs font-medium text-gray-600">Vía de administración</label>
                                <input type="text" :name="'items['+i+'][route]'" x-model="item.route"
                                       class="mt-1 w-full rounded-lg border-gray-300 text-sm focus:border-indigo-500 focus:ring-indigo-500"
                                       placeholder="ej. oral, tópica, IM">
                            </div>
                            <div class="md:col-span-2">
                                <label class="text-xs font-medium text-gray-600">Indicaciones adicionales</label>
                                <input type="text" :name="'items['+i+'][instructions]'" x-model="item.instructions"
                                       class="mt-1 w-full rounded-lg border-gray-300 text-sm focus:border-indigo-500 focus:ring-indigo-500"
                                       placeholder="ej. tomar con alimentos">
                            </div>
                        </div>
                    </div>
                </template>
                <button type="button" @click="addItem()"
                        class="text-sm text-indigo-600 hover:text-indigo-800 font-medium">
                    + Agregar otro medicamento
                </button>
            </div>
        </x-card>

        <x-card title="Notas adicionales">
            <textarea name="notes" rows="3"
                      class="w-full rounded-lg border-gray-300 text-sm focus:border-indigo-500 focus:ring-indigo-500"
                      placeholder="Observaciones adicionales para la receta…">{{ old('notes') }}</textarea>
        </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 receta</x-btn>
        </div>
    </form>
</x-layouts.tenant>
