<x-layouts.tenant pageTitle="Historial clínico">
    <x-page-header :title="$customer->fullName()" subtitle="Ficha clínica y notas de atención">
        <x-btn :href="route('tenant.clinical-histories.index')" variant="secondary">Volver</x-btn>
    </x-page-header>

    <div class="grid grid-cols-1 xl:grid-cols-3 gap-6">
        <form method="POST" action="{{ route('tenant.clinical-histories.update', $customer) }}" class="xl:col-span-2 space-y-6">
            @csrf
            @method('PUT')

            <x-card title="Antecedentes">
                <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                    @foreach ([
                        'allergies' => 'Alergias',
                        'diseases' => 'Enfermedades',
                        'current_medications' => 'Medicamentos actuales',
                        'previous_procedures' => 'Procedimientos previos',
                        'contraindications' => 'Contraindicaciones',
                        'skin_sensitivity' => 'Sensibilidad',
                    ] as $field => $label)
                        <label class="block">
                            <span class="text-sm font-medium text-gray-700">{{ $label }}</span>
                            <textarea name="{{ $field }}" rows="3" class="mt-1 w-full rounded-lg border-gray-300 text-sm focus:border-indigo-500 focus:ring-indigo-500">{{ old($field, $history->{$field}) }}</textarea>
                        </label>
                    @endforeach
                </div>
                <label class="block mt-4">
                    <span class="text-sm font-medium text-gray-700">Notas médicas</span>
                    <textarea name="medical_notes" rows="3" class="mt-1 w-full rounded-lg border-gray-300 text-sm focus:border-indigo-500 focus:ring-indigo-500">{{ old('medical_notes', $history->medical_notes) }}</textarea>
                </label>
            </x-card>

            <x-card title="Ficha técnica">
                <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
                    <label class="block">
                        <span class="text-sm font-medium text-gray-700">Tipo de piel</span>
                        <input name="skin_type" value="{{ old('skin_type', $history->skin_type) }}" 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">Tipo de cabello</span>
                        <input name="hair_type" value="{{ old('hair_type', $history->hair_type) }}" 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">Color actual</span>
                        <input name="current_color" value="{{ old('current_color', $history->current_color) }}" 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-2 gap-4 mt-4">
                    @foreach ([
                        'formulas_used' => 'Fórmulas usadas',
                        'treatments_done' => 'Tratamientos realizados',
                        'initial_diagnosis' => 'Diagnóstico inicial',
                        'treatment_evolution' => 'Evolución',
                    ] as $field => $label)
                        <label class="block">
                            <span class="text-sm font-medium text-gray-700">{{ $label }}</span>
                            <textarea name="{{ $field }}" rows="4" class="mt-1 w-full rounded-lg border-gray-300 text-sm focus:border-indigo-500 focus:ring-indigo-500">{{ old($field, $history->{$field}) }}</textarea>
                        </label>
                    @endforeach
                </div>
                <label class="block mt-4">
                    <span class="text-sm font-medium text-gray-700">Notas internas</span>
                    <textarea name="internal_notes" rows="3" class="mt-1 w-full rounded-lg border-gray-300 text-sm focus:border-indigo-500 focus:ring-indigo-500">{{ old('internal_notes', $history->internal_notes) }}</textarea>
                </label>
                <div class="mt-4 flex justify-end">
                    <x-btn type="submit">Guardar historial</x-btn>
                </div>
            </x-card>
        </form>

        <div class="space-y-6">
            <x-card title="Nuevo consentimiento">
                <form method="POST" action="{{ route('tenant.clinical-histories.consents.store', $customer) }}" enctype="multipart/form-data" class="space-y-4">
                    @csrf
                    <input name="title" placeholder="Título del consentimiento" class="w-full rounded-lg border-gray-300 text-sm focus:border-indigo-500 focus:ring-indigo-500" required>
                    <textarea name="content" rows="4" placeholder="Contenido del consentimiento" class="w-full rounded-lg border-gray-300 text-sm focus:border-indigo-500 focus:ring-indigo-500" required></textarea>
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-3">
                        <input name="signer_name" placeholder="Nombre firmante" class="w-full rounded-lg border-gray-300 text-sm focus:border-indigo-500 focus:ring-indigo-500">
                        <input name="signer_document" placeholder="Documento" class="w-full rounded-lg border-gray-300 text-sm focus:border-indigo-500 focus:ring-indigo-500">
                    </div>
                    <select name="status" class="w-full rounded-lg border-gray-300 text-sm focus:border-indigo-500 focus:ring-indigo-500">
                        <option value="pending">Pendiente</option>
                        <option value="signed">Firmado</option>
                        <option value="rejected">Rechazado</option>
                        <option value="expired">Vencido</option>
                    </select>
                    <input type="file" name="document" accept=".pdf,image/*" class="input">
                    <x-btn type="submit" class="w-full">Guardar consentimiento</x-btn>
                </form>
            </x-card>

            <x-card title="Adjuntar archivo">
                <form method="POST" action="{{ route('tenant.clinical-histories.files.store', $customer) }}" enctype="multipart/form-data" class="space-y-4">
                    @csrf
                    <input type="file" name="file" required class="input">
                    <select name="type" class="w-full rounded-lg border-gray-300 text-sm focus:border-indigo-500 focus:ring-indigo-500">
                        <option value="photo">Foto</option>
                        <option value="document">Documento</option>
                        <option value="prescription">Prescripción</option>
                        <option value="authorization">Autorización</option>
                        <option value="evidence">Evidencia</option>
                        <option value="other">Otro</option>
                    </select>
                    <input name="title" placeholder="Título" class="w-full rounded-lg border-gray-300 text-sm focus:border-indigo-500 focus:ring-indigo-500">
                    <textarea name="description" rows="3" placeholder="Descripción" class="w-full rounded-lg border-gray-300 text-sm focus:border-indigo-500 focus:ring-indigo-500"></textarea>
                    <input name="tags" placeholder="Etiquetas separadas por coma" class="w-full rounded-lg border-gray-300 text-sm focus:border-indigo-500 focus:ring-indigo-500">
                    <label class="flex items-center gap-2 text-sm text-gray-700">
                        <input type="checkbox" name="is_private" value="1" checked class="rounded border-gray-300 text-indigo-600 focus:ring-indigo-500">
                        Privado
                    </label>
                    <x-btn type="submit" class="w-full">Adjuntar archivo</x-btn>
                </form>
            </x-card>

            <x-card title="Nueva nota">
                <form method="POST" action="{{ route('tenant.clinical-histories.notes.store', $customer) }}" class="space-y-4">
                    @csrf
                    <input name="title" placeholder="Título" class="w-full rounded-lg border-gray-300 text-sm focus:border-indigo-500 focus:ring-indigo-500">
                    <textarea name="content" rows="5" placeholder="Detalle de la atención" class="w-full rounded-lg border-gray-300 text-sm focus:border-indigo-500 focus:ring-indigo-500" required></textarea>
                    <input name="tags" placeholder="Etiquetas separadas por coma" class="w-full rounded-lg border-gray-300 text-sm focus:border-indigo-500 focus:ring-indigo-500">
                    <label class="flex items-center gap-2 text-sm text-gray-700">
                        <input type="checkbox" name="is_private" value="1" class="rounded border-gray-300 text-indigo-600 focus:ring-indigo-500">
                        Nota privada
                    </label>
                    <x-btn type="submit" class="w-full">Agregar nota</x-btn>
                </form>
            </x-card>

            <x-card title="Notas recientes">
                <div class="space-y-4">
                    @forelse ($history->notes as $note)
                        <article class="rounded-lg border border-gray-100 p-3">
                            <div class="flex items-start justify-between gap-3">
                                <h3 class="text-sm font-semibold text-gray-900">{{ $note->title ?? 'Nota clínica' }}</h3>
                                <span class="text-xs text-gray-500">{{ $note->created_at->format('d/m/Y') }}</span>
                            </div>
                            <p class="mt-2 text-sm text-gray-600 whitespace-pre-line">{{ $note->content }}</p>
                        </article>
                    @empty
                        <x-empty-state title="Sin notas" message="Las notas de atención aparecerán aquí." />
                    @endforelse
                </div>
            </x-card>

            <x-card title="Consentimientos">
                <div class="space-y-3">
                    @forelse ($history->consents as $consent)
                        <article class="rounded-lg border border-gray-100 p-3">
                            <div class="flex items-start justify-between gap-3">
                                <div>
                                    <h3 class="text-sm font-semibold text-gray-900">{{ $consent->title }}</h3>
                                    <p class="text-xs text-gray-500">{{ $consent->signer_name ?: 'Sin firmante' }}</p>
                                </div>
                                <x-badge :color="$consent->isSigned() ? 'emerald' : 'amber'">{{ ucfirst($consent->status) }}</x-badge>
                            </div>
                            <p class="mt-2 text-sm text-gray-600 line-clamp-3">{{ $consent->content }}</p>
                            @if ($consent->document_path)
                                <a href="{{ asset('storage/'.$consent->document_path) }}" target="_blank" class="mt-2 inline-flex text-sm font-semibold text-brand-600">Ver documento →</a>
                            @endif
                        </article>
                    @empty
                        <x-empty-state title="Sin consentimientos" />
                    @endforelse
                </div>
            </x-card>

            <x-card title="Archivos del cliente">
                <div class="space-y-3">
                    @forelse ($history->files as $file)
                        <article class="rounded-lg border border-gray-100 p-3">
                            <div class="flex items-start justify-between gap-3">
                                <div>
                                    <h3 class="text-sm font-semibold text-gray-900">{{ $file->title ?: $file->original_name }}</h3>
                                    <p class="text-xs text-gray-500">{{ $file->type }} · {{ $file->humanSize() }}</p>
                                </div>
                                <x-badge :color="$file->is_private ? 'gray' : 'emerald'">{{ $file->is_private ? 'Privado' : 'Público' }}</x-badge>
                            </div>
                            @if ($file->description)
                                <p class="mt-2 text-sm text-gray-600">{{ $file->description }}</p>
                            @endif
                            <div class="mt-3 flex gap-2">
                                <a href="{{ route('tenant.clinical-histories.files.download', [$customer, $file]) }}" class="btn btn-sm btn-secondary">Descargar</a>
                                <form method="POST" action="{{ route('tenant.clinical-histories.files.destroy', [$customer, $file]) }}">
                                    @csrf
                                    @method('DELETE')
                                    <x-btn type="submit" size="sm" variant="danger">Eliminar</x-btn>
                                </form>
                            </div>
                        </article>
                    @empty
                        <x-empty-state title="Sin archivos" />
                    @endforelse
                </div>
            </x-card>
        </div>
    </div>
</x-layouts.tenant>
