<x-layouts.tenant pageTitle="Módulo Clínico">
    <x-page-header
        title="Módulo de Historia Clínica"
        subtitle="Activa o desactiva las funcionalidades clínicas disponibles en tu plan."
    />

    <form method="POST" action="{{ route('tenant.clinical-settings.update') }}" class="space-y-6">
        @csrf
        @method('PUT')

        <x-card title="Submódulos clínicos">
            <p class="text-sm text-ink-500 mb-6">
                Solo puedes activar los submódulos incluidos en tu plan. Desactivarlos los ocultará
                del panel pero no eliminará los datos existentes.
            </p>

            <div class="space-y-4">

                {{-- Historia clínica principal --}}
                <div class="flex items-start gap-4 rounded-2xl border border-ink-100 p-5 transition hover:border-indigo-200 hover:bg-indigo-50/30">
                    <div class="mt-0.5 flex h-10 w-10 flex-shrink-0 items-center justify-center rounded-xl bg-indigo-100 text-indigo-600">
                        <svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round"
                                d="M9 12h3.75M9 15h3.75M9 18h3.75m3 .75H18a2.25 2.25 0 002.25-2.25V6.108c0-1.135-.845-2.098-1.976-2.192a48.424 48.424 0 00-1.123-.08m-5.801 0c-.065.21-.1.433-.1.664 0 .414.336.75.75.75h4.5a.75.75 0 00.75-.75 2.25 2.25 0 00-.1-.664m-5.8 0A2.251 2.251 0 0113.5 2.25H15c1.012 0 1.867.668 2.15 1.586m-5.8 0c-.376.023-.75.05-1.124.08C9.095 4.01 8.25 4.973 8.25 6.108V8.25m0 0H4.875c-.621 0-1.125.504-1.125 1.125v11.25c0 .621.504 1.125 1.125 1.125h9.75c.621 0 1.125-.504 1.125-1.125V9.375c0-.621-.504-1.125-1.125-1.125H8.25zM6.75 12h.008v.008H6.75V12zm0 3h.008v.008H6.75V15zm0 3h.008v.008H6.75V18z" />
                        </svg>
                    </div>
                    <div class="flex-1 min-w-0">
                        <p class="font-semibold text-ink-800">Historia clínica</p>
                        <p class="mt-0.5 text-sm text-ink-500">
                            Gestión de pacientes, evoluciones, antecedentes y notas médicas.
                        </p>
                    </div>
                    <label class="relative inline-flex flex-shrink-0 cursor-pointer items-center mt-0.5">
                        <input type="checkbox" name="clinical_history" value="1"
                            @checked($moduleStates['clinical_history'] ?? false)
                            class="peer sr-only">
                        <div class="peer h-6 w-11 rounded-full bg-ink-200 transition after:absolute after:left-[2px] after:top-[2px] after:h-5 after:w-5 after:rounded-full after:bg-white after:shadow after:transition-all after:content-[''] peer-checked:bg-indigo-600 peer-checked:after:translate-x-full peer-focus:ring-2 peer-focus:ring-indigo-500/40"></div>
                    </label>
                </div>

                {{-- Consentimientos informados --}}
                <div class="flex items-start gap-4 rounded-2xl border border-ink-100 p-5 transition hover:border-violet-200 hover:bg-violet-50/30">
                    <div class="mt-0.5 flex h-10 w-10 flex-shrink-0 items-center justify-center rounded-xl bg-violet-100 text-violet-600">
                        <svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round"
                                d="M16.862 4.487l1.687-1.688a1.875 1.875 0 112.652 2.652L10.582 16.07a4.5 4.5 0 01-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 011.13-1.897l8.932-8.931zm0 0L19.5 7.125M18 14v4.75A2.25 2.25 0 0115.75 21H5.25A2.25 2.25 0 013 18.75V8.25A2.25 2.25 0 015.25 6H10" />
                        </svg>
                    </div>
                    <div class="flex-1 min-w-0">
                        <p class="font-semibold text-ink-800">Consentimientos informados</p>
                        <p class="mt-0.5 text-sm text-ink-500">
                            Plantillas digitales de consentimiento con firma del paciente.
                        </p>
                    </div>
                    <label class="relative inline-flex flex-shrink-0 cursor-pointer items-center mt-0.5">
                        <input type="checkbox" name="consent_forms" value="1"
                            @checked($moduleStates['consent_forms'] ?? false)
                            class="peer sr-only">
                        <div class="peer h-6 w-11 rounded-full bg-ink-200 transition after:absolute after:left-[2px] after:top-[2px] after:h-5 after:w-5 after:rounded-full after:bg-white after:shadow after:transition-all after:content-[''] peer-checked:bg-violet-600 peer-checked:after:translate-x-full peer-focus:ring-2 peer-focus:ring-violet-500/40"></div>
                    </label>
                </div>

                {{-- Archivos del paciente --}}
                <div class="flex items-start gap-4 rounded-2xl border border-ink-100 p-5 transition hover:border-emerald-200 hover:bg-emerald-50/30">
                    <div class="mt-0.5 flex h-10 w-10 flex-shrink-0 items-center justify-center rounded-xl bg-emerald-100 text-emerald-600">
                        <svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round"
                                d="M3 16.5v2.25A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75V16.5m-13.5-9L12 3m0 0l4.5 4.5M12 3v13.5" />
                        </svg>
                    </div>
                    <div class="flex-1 min-w-0">
                        <p class="font-semibold text-ink-800">Archivos del paciente</p>
                        <p class="mt-0.5 text-sm text-ink-500">
                            Adjuntos de imágenes, exámenes y documentos a la historia clínica.
                        </p>
                    </div>
                    <label class="relative inline-flex flex-shrink-0 cursor-pointer items-center mt-0.5">
                        <input type="checkbox" name="client_files" value="1"
                            @checked($moduleStates['client_files'] ?? false)
                            class="peer sr-only">
                        <div class="peer h-6 w-11 rounded-full bg-ink-200 transition after:absolute after:left-[2px] after:top-[2px] after:h-5 after:w-5 after:rounded-full after:bg-white after:shadow after:transition-all after:content-[''] peer-checked:bg-emerald-600 peer-checked:after:translate-x-full peer-focus:ring-2 peer-focus:ring-emerald-500/40"></div>
                    </label>
                </div>
            </div>

            <div class="mt-6 flex items-center justify-between border-t border-ink-100 pt-5">
                <p class="text-xs text-ink-400">
                    Los cambios surten efecto de inmediato para todos los usuarios de la empresa.
                </p>
                <button type="submit"
                    class="inline-flex items-center gap-2 rounded-xl bg-indigo-600 px-5 py-2.5 text-sm font-semibold text-white shadow-sm hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 transition">
                    <svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5" />
                    </svg>
                    Guardar cambios
                </button>
            </div>
        </x-card>
    </form>
</x-layouts.tenant>
