<x-app-layout title="Modules · Settings">
    <x-settings.page title="Specialty modules" description="Activate specialty practice surfaces for {{ $organization->name }}. Open a module to set service prices. Departments and queues are provisioned per branch; deactivating hides UI without deleting clinical history.">
        <p class="text-sm">
            <a href="{{ route('care.settings') }}" class="font-medium text-indigo-600 hover:text-indigo-800">← Facility settings</a>
            <span class="mx-2 text-slate-300">·</span>
            <a href="{{ route('care.settings.gp-pricing') }}" class="font-medium text-indigo-600 hover:text-indigo-800">GP pricing</a>
        </p>

        @if (session('success'))
            <p class="rounded-lg bg-emerald-50 px-3 py-2 text-sm text-emerald-800">{{ session('success') }}</p>
        @endif
        @if (session('error'))
            <p class="rounded-lg bg-rose-50 px-3 py-2 text-sm text-rose-800">{{ session('error') }}</p>
        @endif

        @if (! $canUseSpecialtyModules)
            <x-settings.card title="Pro feature" description="Specialty modules require Care Pro or Enterprise.">
                <p class="text-sm text-slate-600">Unlock specialty practice pages with matching departments and queue stubs. Emergency and Blood Bank are included by default on Pro and Enterprise.</p>
                <a href="{{ route('care.pro.index') }}" class="btn-primary mt-4 inline-flex text-sm">View plans</a>
            </x-settings.card>
        @else
            <form method="POST" action="{{ route('care.settings.modules.update') }}" class="space-y-6">
                @csrf
                @method('PUT')

                <div class="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
                    @foreach ($catalog as $key => $module)
                        @php $isDefault = ! empty($module['default_on_paid_plans']); @endphp
                        <div class="flex flex-col rounded-2xl border border-slate-200 bg-white p-5 shadow-sm transition {{ ! empty($enabled[$key]) || $isDefault ? 'ring-1 ring-indigo-200' : '' }}">
                            <div class="flex items-start justify-between gap-3">
                                <a href="{{ route('care.settings.modules.show', $key) }}" class="min-w-0 flex-1 hover:opacity-90">
                                    <div class="flex items-start gap-2.5">
                                        <x-care.specialty-icon :module="$key" boxed />
                                        <div class="min-w-0">
                                            <p class="text-sm font-semibold text-slate-900">{{ $module['label'] }}</p>
                                            <p class="mt-1 text-xs text-slate-500">{{ $module['description'] }}</p>
                                            @if ($isDefault)
                                                <p class="mt-2 text-[11px] font-medium uppercase tracking-wide text-indigo-600">Included on Pro / Enterprise</p>
                                            @endif
                                            <p class="mt-3 text-[11px] font-medium text-indigo-600">Settings &amp; pricing →</p>
                                        </div>
                                    </div>
                                </a>
                                <label class="{{ $isDefault ? '' : 'cursor-pointer' }}" title="Activate module" @click.stop>
                                    <input type="checkbox" name="modules[{{ $key }}]" value="1"
                                           @checked(old("modules.{$key}", ! empty($enabled[$key]) || $isDefault))
                                           @disabled(! $canManage || $isDefault)
                                           class="mt-0.5 rounded border-slate-300">
                                    @if ($isDefault)
                                        <input type="hidden" name="modules[{{ $key }}]" value="1">
                                    @endif
                                </label>
                            </div>
                            <p class="mt-3 text-[11px] uppercase tracking-wide text-slate-400">
                                {{ $module['department_name'] ?? $module['label'] }}
                            </p>
                        </div>
                    @endforeach
                </div>

                @if ($canManage)
                    <div class="flex justify-end">
                        <button type="submit" class="btn-primary">Save modules</button>
                    </div>
                @endif
            </form>
        @endif
    </x-settings.page>
</x-app-layout>
