@extends('layouts.public')

@section('title', 'Practice Registration - Meduvo Health')

@section('content')
@php
    $stepFields = [
        1 => [
            'practice_name',
            'legal_business_name',
            'practice_type',
            'practice_type_other',
            'organization_npi',
            'operational_timezone',
            'website',
            'estimated_monthly_cocm_patients',
        ],
        2 => [
            'primary_contact_first_name',
            'primary_contact_last_name',
            'primary_contact_role',
            'primary_contact_role_other',
            'primary_contact_email',
            'primary_contact_phone',
            'practice_phone',
            'fax',
            'address_line_1',
            'address_line_2',
            'city',
            'state',
            'zip_code',
        ],
        3 => [
            'current_cocm_status',
            'current_cocm_status_other',
            'current_ehr',
            'current_ehr_other',
            'ehr_integration_needed',
            'number_of_pcps',
            'number_of_bhcms',
            'psychiatric_consultant_status',
            'eligible_patient_population',
            'target_go_live_date',
            'signup_notes',
        ],
        4 => [
            'authorized_representative_name',
            'authorized_representative_title',
            'authority_intake_acknowledged',
            'baa_intake_acknowledged',
            'esign_intake_acknowledged',
        ],
    ];

    $initialStep = 1;
    if ($errors->any()) {
        foreach ($stepFields as $stepNumber => $fields) {
            foreach ($fields as $field) {
                if ($errors->has($field)) {
                    $initialStep = $stepNumber;
                    break 2;
                }
            }
        }
    }

    $oldInput = session()->getOldInput();
    $legalSameChecked = empty($oldInput) ? true : old('legal_same_as_practice') === '1';
    $sameAsPhoneChecked = old('same_as_primary_contact_phone') === '1';
    $targetDateNotSureChecked = old('target_go_live_not_sure') === '1';
    $success = session('registration_success');
@endphp

<script>
    window.practiceRegistrationWizard = function (config) {
        return {
            step: Number(config.initialStep || 1),
            totalSteps: 4,
            isSubmitting: false,
            clientErrors: {},
            practiceName: @js(old('practice_name', '')),
            legalBusinessName: @js(old('legal_business_name', '')),
            legalSame: Boolean(config.legalSame),
            practiceType: @js(old('practice_type', '')),
            contactRole: @js(old('primary_contact_role', '')),
            sameAsPhone: Boolean(config.sameAsPhone),
            cocmStatus: @js(old('current_cocm_status', '')),
            currentEhr: @js(old('current_ehr', '')),
            ehrIntegration: @js(old('ehr_integration_needed', '')),
            psychStatus: @js(old('psychiatric_consultant_status', '')),
            targetDateNotSure: Boolean(config.targetDateNotSure),
            notesCount: String(@js(old('signup_notes', ''))).length,
            authorizedNameTouched: @js(old('authorized_representative_name') !== null),
            authorizedTitleTouched: @js(old('authorized_representative_title') !== null),
            steps: [
                { number: 1, label: 'Practice', fullLabel: 'Practice Information' },
                { number: 2, label: 'Contact', fullLabel: 'Contact & Location' },
                { number: 3, label: 'CoCM Setup', fullLabel: 'CoCM Program Setup' },
                { number: 4, label: 'Review', fullLabel: 'Compliance & Review' },
            ],
            init() {
                this.$nextTick(() => {
                    this.syncLegalName();
                    this.detectTimezone(Boolean(config.hasOldTimezone));
                    this.updateNotesCount();
                });
            },
            detectTimezone(hasOldTimezone) {
                if (hasOldTimezone || !window.Intl) {
                    return;
                }

                const detected = Intl.DateTimeFormat().resolvedOptions().timeZone;
                const select = this.$root.querySelector('[name="operational_timezone"]');

                if (!detected || !select) {
                    return;
                }

                let option = Array.from(select.options).find((item) => item.value === detected);

                if (!option) {
                    option = document.createElement('option');
                    option.value = detected;
                    option.textContent = 'Detected timezone (' + detected.replaceAll('_', ' ') + ')';
                    select.appendChild(option);
                }

                select.value = detected;
            },
            syncLegalName() {
                if (this.legalSame) {
                    this.legalBusinessName = this.practiceName;
                    this.clearError('legal_business_name');
                }
            },
            syncAuthorizedDefaults() {
                const fullName = this.fullContactName();
                const title = this.selectedText('primary_contact_role_other') || this.selectedText('primary_contact_role');
                const nameField = this.field('authorized_representative_name');
                const titleField = this.field('authorized_representative_title');

                if (nameField && !this.authorizedNameTouched && !nameField.value && fullName) {
                    nameField.value = fullName;
                }

                if (titleField && !this.authorizedTitleTouched && !titleField.value && title) {
                    titleField.value = title;
                }
            },
            go(nextStep) {
                if (nextStep > this.step && !this.validateStep(this.step)) {
                    return;
                }

                this.step = Math.max(1, Math.min(this.totalSteps, nextStep));

                if (this.step === 4) {
                    this.syncAuthorizedDefaults();
                }

                this.scrollToWizard();
            },
            goToProgress(nextStep) {
                if (nextStep <= this.step) {
                    this.go(nextStep);
                }
            },
            submitForm(event) {
                for (let nextStep = 1; nextStep <= this.totalSteps; nextStep++) {
                    if (!this.validateStep(nextStep)) {
                        event.preventDefault();
                        this.step = nextStep;
                        this.$nextTick(() => this.focusFirstError());
                        return;
                    }
                }

                this.isSubmitting = true;
            },
            validateStep(stepNumber) {
                const panel = this.$root.querySelector('[data-step-panel="' + stepNumber + '"]');
                const fields = panel ? Array.from(panel.querySelectorAll('input, select, textarea')) : [];
                let firstInvalidName = null;

                fields.forEach((field) => {
                    if (field.disabled || field.type === 'hidden') {
                        this.clearError(field.name);
                        return;
                    }

                    if (field.type === 'radio' && panel.querySelector('input[type="radio"][name="' + field.name + '"]') !== field) {
                        return;
                    }

                    const error = this.fieldError(field, panel);

                    if (error) {
                        this.clientErrors[field.name] = error;
                        firstInvalidName = firstInvalidName || field.name;
                    } else {
                        this.clearError(field.name);
                    }
                });

                if (firstInvalidName && stepNumber === this.step) {
                    this.focusFirstError();
                }

                return firstInvalidName === null;
            },
            fieldError(field, panel) {
                if (field.type === 'radio') {
                    const group = Array.from(panel.querySelectorAll('input[type="radio"][name="' + field.name + '"]'));
                    const isRequired = group.some((item) => item.required);

                    if (isRequired && !group.some((item) => item.checked)) {
                        return field.dataset.requiredMessage || 'Choose an option.';
                    }

                    return '';
                }

                if (field.type === 'checkbox' && field.required && !field.checked) {
                    return field.dataset.requiredMessage || 'This acknowledgement is required.';
                }

                const value = String(field.value || '').trim();

                if (field.required && !value) {
                    return field.dataset.requiredMessage || 'This field is required.';
                }

                if (!value) {
                    return '';
                }

                if (field.type === 'email' && !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value)) {
                    return field.dataset.formatMessage || 'Enter a valid email address.';
                }

                if (field.type === 'url') {
                    try {
                        const parsed = new URL(value);
                        if (!['http:', 'https:'].includes(parsed.protocol)) {
                            return field.dataset.formatMessage || 'Enter a valid URL.';
                        }
                    } catch (error) {
                        return field.dataset.formatMessage || 'Enter a valid URL.';
                    }
                }

                if (field.pattern) {
                    const matcher = new RegExp('^(?:' + field.pattern + ')$');
                    if (!matcher.test(value)) {
                        return field.dataset.formatMessage || 'Check this value.';
                    }
                }

                if (field.type === 'number') {
                    const numberValue = Number(value);
                    if (!Number.isFinite(numberValue)) {
                        return field.dataset.formatMessage || 'Enter a valid number.';
                    }

                    if (field.min !== '' && numberValue < Number(field.min)) {
                        return field.dataset.minMessage || 'Enter a value of ' + field.min + ' or more.';
                    }

                    if (field.max !== '' && numberValue > Number(field.max)) {
                        return field.dataset.maxMessage || 'Enter a smaller value.';
                    }
                }

                if (field.maxLength > 0 && value.length > field.maxLength) {
                    return 'Use ' + field.maxLength + ' characters or fewer.';
                }

                return '';
            },
            clearError(name) {
                if (name && this.clientErrors[name]) {
                    delete this.clientErrors[name];
                }
            },
            focusFirstError() {
                const firstName = Object.keys(this.clientErrors)[0];
                if (!firstName) {
                    return;
                }

                const field = this.field(firstName);
                if (field) {
                    field.scrollIntoView({ block: 'center', behavior: 'smooth' });
                    window.setTimeout(() => field.focus({ preventScroll: true }), 180);
                }
            },
            scrollToWizard() {
                this.$nextTick(() => {
                    this.$root.scrollIntoView({ block: 'start', behavior: 'smooth' });
                });
            },
            field(name) {
                return this.$root.querySelector('[name="' + name.replaceAll('"', '\\"') + '"]');
            },
            value(name) {
                const field = this.field(name);
                if (!field) {
                    return '';
                }

                if (field.type === 'checkbox') {
                    return field.checked ? 'Yes' : '';
                }

                return String(field.value || '').trim();
            },
            selectedText(name) {
                const field = this.field(name);
                if (!field) {
                    return '';
                }

                if (field.tagName === 'SELECT') {
                    return field.selectedIndex >= 0 ? field.options[field.selectedIndex].text : '';
                }

                return this.value(name);
            },
            checkedLabel(name) {
                const checked = this.$root.querySelector('input[type="radio"][name="' + name + '"]:checked');
                return checked ? checked.dataset.label || checked.value : '';
            },
            fullContactName() {
                return [this.value('primary_contact_first_name'), this.value('primary_contact_last_name')]
                    .filter(Boolean)
                    .join(' ');
            },
            addressSummary() {
                const street = [this.value('address_line_1'), this.value('address_line_2')].filter(Boolean).join(', ');
                const cityStateZip = [this.value('city'), this.value('state'), this.value('zip_code')].filter(Boolean).join(' ');
                return [street, cityStateZip].filter(Boolean).join(', ');
            },
            updateNotesCount() {
                this.notesCount = this.value('signup_notes').length;
            },
        };
    };
</script>

<main class="mx-auto max-w-5xl px-5 py-8 sm:px-6 lg:px-8 lg:py-10">
    @if ($success)
        <section class="mx-auto max-w-3xl rounded-lg border border-border-subtle bg-white p-6 shadow-[0_1px_2px_rgba(11,39,84,0.04),0_14px_34px_-24px_rgba(11,39,84,0.22)] sm:p-8">
            <div class="flex items-start gap-4">
                <div class="flex h-10 w-10 shrink-0 items-center justify-center rounded-lg bg-status-good/10 text-status-good" aria-hidden="true">
                    <svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5" />
                    </svg>
                </div>
                <div>
                    <p class="text-sm font-semibold text-brand-orange">Practice intake</p>
                    <h1 class="mt-2 text-2xl font-bold tracking-tight text-accent sm:text-3xl">Practice registration submitted</h1>
                    <p class="mt-3 text-sm leading-relaxed text-ink-secondary">
                        Your practice registration has been received. We'll guide you through the remaining verification and onboarding steps before activation.
                    </p>
                    <p class="mt-3 text-sm font-medium text-accent">
                        {{ $success['practice_name'] }} is queued for Meduvo review. PHI access is not active until compliance is verified and the practice is approved.
                    </p>
                </div>
            </div>

            <div class="mt-8 rounded-lg border border-border-subtle bg-surface-2 p-5">
                <h2 class="text-sm font-semibold text-accent">Onboarding status</h2>
                <ul class="mt-4 space-y-3 text-sm">
                    <li class="flex items-center gap-3 text-ink-primary">
                        <span class="flex h-6 w-6 items-center justify-center rounded-full bg-status-good text-white" aria-hidden="true">
                            <svg class="h-3.5 w-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.4">
                                <path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5" />
                            </svg>
                        </span>
                        <span><strong>Practice Registration</strong> - Submitted</span>
                    </li>
                    @foreach ([
                        'Practice Verification',
                        'Business Associate Agreement',
                        'Compliance / eSign Documents',
                        'Clinical & CoCM Setup',
                        'Staff Setup',
                    ] as $item)
                        <li class="flex items-center gap-3 text-ink-secondary">
                            <span class="h-6 w-6 rounded-full border border-border-default bg-white" aria-hidden="true"></span>
                            <span><strong class="font-medium text-ink-primary">{{ $item }}</strong> - Pending</span>
                        </li>
                    @endforeach
                    @if ($success['psychiatric_consultant_onboarding_required'])
                        <li class="flex items-center gap-3 text-ink-secondary">
                            <span class="h-6 w-6 rounded-full border border-border-default bg-white" aria-hidden="true"></span>
                            <span>
                                <strong class="font-medium text-ink-primary">Psychiatric Consultant Setup</strong>
                                - {{ $success['psychiatric_consultant_assistance_needed'] ? 'Assistance needed' : 'Pending' }}
                            </span>
                        </li>
                    @endif
                    @if ($success['integration_onboarding_required'])
                        <li class="flex items-center gap-3 text-ink-secondary">
                            <span class="h-6 w-6 rounded-full border border-border-default bg-white" aria-hidden="true"></span>
                            <span><strong class="font-medium text-ink-primary">Integration Setup</strong> - Pending</span>
                        </li>
                    @endif
                    <li class="flex items-center gap-3 text-ink-secondary">
                        <span class="h-6 w-6 rounded-full border border-border-default bg-white" aria-hidden="true"></span>
                        <span><strong class="font-medium text-ink-primary">Activation</strong> - Pending</span>
                    </li>
                </ul>
            </div>

            <div class="mt-6 flex flex-col gap-3 border-t border-border-subtle pt-5 sm:flex-row sm:items-center sm:justify-between">
                <p class="text-xs leading-relaxed text-ink-muted">A Meduvo team member will contact the primary onboarding contact with next steps.</p>
                <a href="{{ route('public.home') }}" class="btn-secondary">Return home</a>
            </div>
        </section>
    @else
        <div class="mb-8">
            <p class="text-sm font-semibold text-brand-orange">Practice intake</p>
            <h1 class="mt-3 text-3xl font-bold tracking-tight text-accent">Register a practice</h1>
            <p class="mt-3 max-w-2xl text-sm leading-relaxed text-ink-secondary">
                Complete the onboarding intake for your organization. A Meduvo SuperAdmin must verify the BAA and eSign compliance requirements before any PHI access is opened.
            </p>
        </div>

        @if ($errors->any())
            <div class="mb-6 rounded-lg border border-status-critical/30 bg-status-critical/10 px-4 py-3 text-sm text-status-critical" role="alert">
                <p class="font-semibold">We need a little more information.</p>
                <ul class="mt-2 list-disc space-y-1 pl-5">
                    @foreach ($errors->all() as $error)
                        <li>{{ $error }}</li>
                    @endforeach
                </ul>
            </div>
        @endif

        <div
            x-data="practiceRegistrationWizard({
                initialStep: {{ $initialStep }},
                legalSame: @js($legalSameChecked),
                sameAsPhone: @js($sameAsPhoneChecked),
                targetDateNotSure: @js($targetDateNotSureChecked),
                hasOldTimezone: @js(old('operational_timezone') !== null)
            })"
            x-init="init()"
            class="space-y-6"
        >
            <nav class="rounded-lg border border-border-subtle bg-white p-3 shadow-[0_1px_2px_rgba(11,39,84,0.04)]" aria-label="Registration progress">
                <ol class="grid gap-2 text-sm sm:grid-cols-4">
                    <template x-for="item in steps" :key="item.number">
                        <li>
                            <button
                                type="button"
                                @click="goToProgress(item.number)"
                                :disabled="item.number > step"
                                class="flex min-h-12 w-full items-center gap-2 rounded-lg px-3 text-left transition-colors focus:outline-none focus:ring-2 focus:ring-accent/30 disabled:cursor-not-allowed"
                                :class="step === item.number ? 'bg-accent text-white' : (item.number < step ? 'bg-accent-muted text-accent hover:bg-accent-muted/70' : 'bg-surface-2 text-ink-muted')"
                                :aria-current="step === item.number ? 'step' : false"
                            >
                                <span class="flex h-6 w-6 shrink-0 items-center justify-center rounded-full border text-xs font-semibold"
                                    :class="step === item.number ? 'border-white/50 bg-white/15' : 'border-border-default bg-white'"
                                    x-text="item.number"></span>
                                <span class="font-semibold" x-text="item.label"></span>
                            </button>
                        </li>
                    </template>
                </ol>
                <p class="mt-3 text-center text-xs font-medium text-ink-muted">1 Practice &rarr; 2 Contact &rarr; 3 CoCM Setup &rarr; 4 Review</p>
            </nav>

            <form method="POST" action="{{ route('public.register-practice.store') }}" @submit="submitForm($event)" novalidate class="space-y-6">
                @csrf

                <section x-show="step === 1" x-cloak data-step-panel="1" class="rounded-lg border border-border-subtle bg-white p-5 shadow-[0_1px_2px_rgba(11,39,84,0.04),0_14px_34px_-24px_rgba(11,39,84,0.22)] sm:p-6">
                    <div class="border-b border-border-subtle pb-5">
                        <h2 class="text-xl font-bold text-accent">Tell us about your practice</h2>
                        <p class="mt-2 text-sm leading-relaxed text-ink-secondary">Provide the basic information we'll use to set up your organization.</p>
                    </div>

                    <div class="mt-6 grid gap-5 md:grid-cols-2">
                        <div>
                            <label for="practice_name" class="block text-sm font-medium text-accent">Practice Name <span class="text-status-critical">*</span></label>
                            <input id="practice_name" name="practice_name" value="{{ old('practice_name') }}" x-model="practiceName" @input="syncLegalName(); clearError('practice_name')" required data-required-message="Enter the practice name." class="input-field mt-1.5" autocomplete="organization">
                            <p x-show="clientErrors.practice_name" x-text="clientErrors.practice_name" class="mt-1.5 text-xs font-medium text-status-critical" aria-live="polite"></p>
                            @error('practice_name')<p class="mt-1.5 text-xs font-medium text-status-critical">{{ $message }}</p>@enderror
                        </div>

                        <div>
                            <div class="flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between">
                                <label for="legal_business_name" class="text-sm font-medium text-accent">Legal Business Name <span class="text-status-critical">*</span></label>
                                <label class="flex items-center gap-2 text-xs font-medium text-ink-secondary">
                                    <input type="checkbox" name="legal_same_as_practice" value="1" x-model="legalSame" @change="syncLegalName()" @checked($legalSameChecked) class="rounded border-border-default text-accent focus:ring-accent/30">
                                    Same as practice name
                                </label>
                            </div>
                            <input id="legal_business_name" name="legal_business_name" value="{{ old('legal_business_name') }}" x-model="legalBusinessName" :disabled="legalSame" :required="!legalSame" @input="clearError('legal_business_name')" data-required-message="Enter the legal business name or choose same as practice name." placeholder="Legal name, if different" class="input-field mt-1.5 disabled:bg-surface-2 disabled:text-ink-muted">
                            <p x-show="clientErrors.legal_business_name" x-text="clientErrors.legal_business_name" class="mt-1.5 text-xs font-medium text-status-critical" aria-live="polite"></p>
                            @error('legal_business_name')<p class="mt-1.5 text-xs font-medium text-status-critical">{{ $message }}</p>@enderror
                        </div>

                        <div>
                            <label for="practice_type" class="block text-sm font-medium text-accent">Practice Type <span class="text-status-critical">*</span></label>
                            <select id="practice_type" name="practice_type" x-model="practiceType" @change="clearError('practice_type')" required data-required-message="Select a practice type." class="input-field mt-1.5">
                                <option value="">Select practice type</option>
                                @foreach ($practiceTypes as $value => $label)
                                    <option value="{{ $value }}" @selected(old('practice_type') === $value)>{{ $label }}</option>
                                @endforeach
                            </select>
                            <p x-show="clientErrors.practice_type" x-text="clientErrors.practice_type" class="mt-1.5 text-xs font-medium text-status-critical" aria-live="polite"></p>
                            @error('practice_type')<p class="mt-1.5 text-xs font-medium text-status-critical">{{ $message }}</p>@enderror
                        </div>

                        <div x-show="practiceType === 'other'" x-cloak>
                            <label for="practice_type_other" class="block text-sm font-medium text-accent">Specify Practice Type <span class="text-status-critical">*</span></label>
                            <input id="practice_type_other" name="practice_type_other" value="{{ old('practice_type_other') }}" :disabled="practiceType !== 'other'" :required="practiceType === 'other'" @input="clearError('practice_type_other')" data-required-message="Specify the practice type." class="input-field mt-1.5">
                            <p x-show="clientErrors.practice_type_other" x-text="clientErrors.practice_type_other" class="mt-1.5 text-xs font-medium text-status-critical" aria-live="polite"></p>
                            @error('practice_type_other')<p class="mt-1.5 text-xs font-medium text-status-critical">{{ $message }}</p>@enderror
                        </div>

                        <div>
                            <label for="organization_npi" class="block text-sm font-medium text-accent">Organization NPI <span class="text-ink-muted">(optional)</span></label>
                            <input id="organization_npi" name="organization_npi" value="{{ old('organization_npi') }}" inputmode="numeric" pattern="\d{10}" maxlength="10" @input="clearError('organization_npi')" data-format-message="Enter a 10-digit organization NPI." class="input-field mt-1.5">
                            <p x-show="clientErrors.organization_npi" x-text="clientErrors.organization_npi" class="mt-1.5 text-xs font-medium text-status-critical" aria-live="polite"></p>
                            @error('organization_npi')<p class="mt-1.5 text-xs font-medium text-status-critical">{{ $message }}</p>@enderror
                        </div>

                        <div>
                            <label for="operational_timezone" class="block text-sm font-medium text-accent">Operational Timezone <span class="text-status-critical">*</span></label>
                            <select id="operational_timezone" name="operational_timezone" required data-required-message="Select an operational timezone." class="input-field mt-1.5">
                                @foreach ($timezones as $value => $label)
                                    <option value="{{ $value }}" @selected(old('operational_timezone', 'America/New_York') === $value)>{{ $label }}</option>
                                @endforeach
                            </select>
                            <p x-show="clientErrors.operational_timezone" x-text="clientErrors.operational_timezone" class="mt-1.5 text-xs font-medium text-status-critical" aria-live="polite"></p>
                            @error('operational_timezone')<p class="mt-1.5 text-xs font-medium text-status-critical">{{ $message }}</p>@enderror
                        </div>

                        <div>
                            <label for="website" class="block text-sm font-medium text-accent">Website <span class="text-ink-muted">(optional)</span></label>
                            <input id="website" name="website" type="url" value="{{ old('website') }}" placeholder="https://example.com" @input="clearError('website')" data-format-message="Enter a full website URL, such as https://example.com." class="input-field mt-1.5" autocomplete="url">
                            <p x-show="clientErrors.website" x-text="clientErrors.website" class="mt-1.5 text-xs font-medium text-status-critical" aria-live="polite"></p>
                            @error('website')<p class="mt-1.5 text-xs font-medium text-status-critical">{{ $message }}</p>@enderror
                        </div>

                        <div>
                            <label for="estimated_monthly_cocm_patients" class="block text-sm font-medium text-accent">Estimated Monthly CoCM Patients <span class="text-status-critical">*</span></label>
                            <input id="estimated_monthly_cocm_patients" name="estimated_monthly_cocm_patients" type="number" min="0" max="100000" value="{{ old('estimated_monthly_cocm_patients') }}" required data-required-message="Enter an estimated monthly CoCM patient count." data-min-message="Estimated monthly CoCM patients cannot be negative." class="input-field mt-1.5">
                            <p class="mt-1 text-xs text-ink-secondary">An estimate is fine. This helps us plan your implementation.</p>
                            <p x-show="clientErrors.estimated_monthly_cocm_patients" x-text="clientErrors.estimated_monthly_cocm_patients" class="mt-1.5 text-xs font-medium text-status-critical" aria-live="polite"></p>
                            @error('estimated_monthly_cocm_patients')<p class="mt-1.5 text-xs font-medium text-status-critical">{{ $message }}</p>@enderror
                        </div>
                    </div>
                </section>

                <section x-show="step === 2" x-cloak data-step-panel="2" class="rounded-lg border border-border-subtle bg-white p-5 shadow-[0_1px_2px_rgba(11,39,84,0.04),0_14px_34px_-24px_rgba(11,39,84,0.22)] sm:p-6">
                    <div class="border-b border-border-subtle pb-5">
                        <h2 class="text-xl font-bold text-accent">Contact and location</h2>
                        <p class="mt-2 text-sm leading-relaxed text-ink-secondary">Tell us who should coordinate onboarding and where the practice operates.</p>
                    </div>

                    <div class="mt-6 space-y-8">
                        <div>
                            <h3 class="text-sm font-semibold text-accent">Primary Contact</h3>
                            <div class="mt-4 grid gap-5 md:grid-cols-2">
                                <div>
                                    <label for="primary_contact_first_name" class="block text-sm font-medium text-accent">First Name <span class="text-status-critical">*</span></label>
                                    <input id="primary_contact_first_name" name="primary_contact_first_name" value="{{ old('primary_contact_first_name') }}" @input="clearError('primary_contact_first_name')" required data-required-message="Enter the primary contact first name." class="input-field mt-1.5" autocomplete="given-name">
                                    <p x-show="clientErrors.primary_contact_first_name" x-text="clientErrors.primary_contact_first_name" class="mt-1.5 text-xs font-medium text-status-critical" aria-live="polite"></p>
                                    @error('primary_contact_first_name')<p class="mt-1.5 text-xs font-medium text-status-critical">{{ $message }}</p>@enderror
                                </div>
                                <div>
                                    <label for="primary_contact_last_name" class="block text-sm font-medium text-accent">Last Name <span class="text-status-critical">*</span></label>
                                    <input id="primary_contact_last_name" name="primary_contact_last_name" value="{{ old('primary_contact_last_name') }}" @input="clearError('primary_contact_last_name')" required data-required-message="Enter the primary contact last name." class="input-field mt-1.5" autocomplete="family-name">
                                    <p x-show="clientErrors.primary_contact_last_name" x-text="clientErrors.primary_contact_last_name" class="mt-1.5 text-xs font-medium text-status-critical" aria-live="polite"></p>
                                    @error('primary_contact_last_name')<p class="mt-1.5 text-xs font-medium text-status-critical">{{ $message }}</p>@enderror
                                </div>
                                <div>
                                    <label for="primary_contact_role" class="block text-sm font-medium text-accent">Job Title / Role <span class="text-status-critical">*</span></label>
                                    <select id="primary_contact_role" name="primary_contact_role" x-model="contactRole" @change="clearError('primary_contact_role')" required data-required-message="Select the primary contact role." class="input-field mt-1.5">
                                        <option value="">Select role</option>
                                        @foreach ($contactRoles as $value => $label)
                                            <option value="{{ $value }}" @selected(old('primary_contact_role') === $value)>{{ $label }}</option>
                                        @endforeach
                                    </select>
                                    <p x-show="clientErrors.primary_contact_role" x-text="clientErrors.primary_contact_role" class="mt-1.5 text-xs font-medium text-status-critical" aria-live="polite"></p>
                                    @error('primary_contact_role')<p class="mt-1.5 text-xs font-medium text-status-critical">{{ $message }}</p>@enderror
                                </div>
                                <div x-show="contactRole === 'other'" x-cloak>
                                    <label for="primary_contact_role_other" class="block text-sm font-medium text-accent">Specify Role <span class="text-status-critical">*</span></label>
                                    <input id="primary_contact_role_other" name="primary_contact_role_other" value="{{ old('primary_contact_role_other') }}" :disabled="contactRole !== 'other'" :required="contactRole === 'other'" @input="clearError('primary_contact_role_other')" data-required-message="Specify the primary contact role." class="input-field mt-1.5">
                                    <p x-show="clientErrors.primary_contact_role_other" x-text="clientErrors.primary_contact_role_other" class="mt-1.5 text-xs font-medium text-status-critical" aria-live="polite"></p>
                                    @error('primary_contact_role_other')<p class="mt-1.5 text-xs font-medium text-status-critical">{{ $message }}</p>@enderror
                                </div>
                                <div>
                                    <label for="primary_contact_email" class="block text-sm font-medium text-accent">Contact Email <span class="text-status-critical">*</span></label>
                                    <input id="primary_contact_email" name="primary_contact_email" type="email" value="{{ old('primary_contact_email') }}" required @input="clearError('primary_contact_email')" data-required-message="Enter the primary contact email address." data-format-message="Enter a valid email address." class="input-field mt-1.5" autocomplete="email">
                                    <p class="mt-1 text-xs text-ink-secondary">This should be the primary onboarding and implementation contact.</p>
                                    <p x-show="clientErrors.primary_contact_email" x-text="clientErrors.primary_contact_email" class="mt-1.5 text-xs font-medium text-status-critical" aria-live="polite"></p>
                                    @error('primary_contact_email')<p class="mt-1.5 text-xs font-medium text-status-critical">{{ $message }}</p>@enderror
                                </div>
                                <div>
                                    <label for="primary_contact_phone" class="block text-sm font-medium text-accent">Direct Phone <span class="text-status-critical">*</span></label>
                                    <input id="primary_contact_phone" name="primary_contact_phone" type="tel" value="{{ old('primary_contact_phone') }}" pattern="[+0-9().\-\s]{7,30}" required @input="clearError('primary_contact_phone')" data-required-message="Enter the primary contact direct phone." data-format-message="Enter a valid direct phone number." class="input-field mt-1.5" autocomplete="tel" data-us-phone>
                                    <p x-show="clientErrors.primary_contact_phone" x-text="clientErrors.primary_contact_phone" class="mt-1.5 text-xs font-medium text-status-critical" aria-live="polite"></p>
                                    @error('primary_contact_phone')<p class="mt-1.5 text-xs font-medium text-status-critical">{{ $message }}</p>@enderror
                                </div>
                            </div>
                        </div>

                        <div>
                            <h3 class="text-sm font-semibold text-accent">Primary Practice Location</h3>
                            <div class="mt-4 grid gap-5 md:grid-cols-2">
                                <div>
                                    <div class="flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between">
                                        <label for="practice_phone" class="text-sm font-medium text-accent">Practice Phone <span class="text-status-critical">*</span></label>
                                        <label class="flex items-center gap-2 text-xs font-medium text-ink-secondary">
                                            <input type="checkbox" name="same_as_primary_contact_phone" value="1" x-model="sameAsPhone" @checked($sameAsPhoneChecked) class="rounded border-border-default text-accent focus:ring-accent/30">
                                            Same as primary contact phone
                                        </label>
                                    </div>
                                    <input id="practice_phone" name="practice_phone" type="tel" value="{{ old('practice_phone') }}" pattern="[+0-9().\-\s]{7,30}" :disabled="sameAsPhone" :required="!sameAsPhone" @input="clearError('practice_phone')" data-required-message="Enter the practice phone or choose same as primary contact phone." data-format-message="Enter a valid practice phone number." class="input-field mt-2 disabled:bg-surface-2 disabled:text-ink-muted" autocomplete="tel" data-us-phone>
                                    <p x-show="clientErrors.practice_phone" x-text="clientErrors.practice_phone" class="mt-1.5 text-xs font-medium text-status-critical" aria-live="polite"></p>
                                    @error('practice_phone')<p class="mt-1.5 text-xs font-medium text-status-critical">{{ $message }}</p>@enderror
                                </div>
                                <div>
                                    <label for="fax" class="block text-sm font-medium text-accent">Fax <span class="text-ink-muted">(optional)</span></label>
                                    <input id="fax" name="fax" type="tel" value="{{ old('fax') }}" pattern="[+0-9().\-\s]{7,30}" @input="clearError('fax')" data-format-message="Enter a valid fax number." class="input-field mt-1.5" data-us-phone>
                                    <p x-show="clientErrors.fax" x-text="clientErrors.fax" class="mt-1.5 text-xs font-medium text-status-critical" aria-live="polite"></p>
                                    @error('fax')<p class="mt-1.5 text-xs font-medium text-status-critical">{{ $message }}</p>@enderror
                                </div>
                                <div class="md:col-span-2">
                                    <label for="address_line_1" class="block text-sm font-medium text-accent">Address Line 1 <span class="text-status-critical">*</span></label>
                                    <input id="address_line_1" name="address_line_1" value="{{ old('address_line_1') }}" required @input="clearError('address_line_1')" data-required-message="Enter the practice street address." class="input-field mt-1.5" autocomplete="address-line1">
                                    <p x-show="clientErrors.address_line_1" x-text="clientErrors.address_line_1" class="mt-1.5 text-xs font-medium text-status-critical" aria-live="polite"></p>
                                    @error('address_line_1')<p class="mt-1.5 text-xs font-medium text-status-critical">{{ $message }}</p>@enderror
                                </div>
                                <div class="md:col-span-2">
                                    <label for="address_line_2" class="block text-sm font-medium text-accent">Address Line 2 <span class="text-ink-muted">(optional)</span></label>
                                    <input id="address_line_2" name="address_line_2" value="{{ old('address_line_2') }}" class="input-field mt-1.5" autocomplete="address-line2">
                                    @error('address_line_2')<p class="mt-1.5 text-xs font-medium text-status-critical">{{ $message }}</p>@enderror
                                </div>
                                <div>
                                    <label for="city" class="block text-sm font-medium text-accent">City <span class="text-status-critical">*</span></label>
                                    <input id="city" name="city" value="{{ old('city') }}" required @input="clearError('city')" data-required-message="Enter the practice city." class="input-field mt-1.5" autocomplete="address-level2">
                                    <p x-show="clientErrors.city" x-text="clientErrors.city" class="mt-1.5 text-xs font-medium text-status-critical" aria-live="polite"></p>
                                    @error('city')<p class="mt-1.5 text-xs font-medium text-status-critical">{{ $message }}</p>@enderror
                                </div>
                                <div>
                                    <label for="state" class="block text-sm font-medium text-accent">State <span class="text-status-critical">*</span></label>
                                    <select id="state" name="state" required @change="clearError('state')" data-required-message="Select the practice state." class="input-field mt-1.5" autocomplete="address-level1">
                                        <option value="">Select state</option>
                                        @foreach ($states as $value => $label)
                                            <option value="{{ $value }}" @selected(old('state') === $value)>{{ $label }}</option>
                                        @endforeach
                                    </select>
                                    <p x-show="clientErrors.state" x-text="clientErrors.state" class="mt-1.5 text-xs font-medium text-status-critical" aria-live="polite"></p>
                                    @error('state')<p class="mt-1.5 text-xs font-medium text-status-critical">{{ $message }}</p>@enderror
                                </div>
                                <div>
                                    <label for="zip_code" class="block text-sm font-medium text-accent">ZIP Code <span class="text-status-critical">*</span></label>
                                    <input id="zip_code" name="zip_code" value="{{ old('zip_code') }}" pattern="\d{5}(-\d{4})?" required @input="clearError('zip_code')" data-required-message="Enter the ZIP code." data-format-message="Enter a valid ZIP code, such as 12345 or 12345-6789." class="input-field mt-1.5" autocomplete="postal-code">
                                    <p x-show="clientErrors.zip_code" x-text="clientErrors.zip_code" class="mt-1.5 text-xs font-medium text-status-critical" aria-live="polite"></p>
                                    @error('zip_code')<p class="mt-1.5 text-xs font-medium text-status-critical">{{ $message }}</p>@enderror
                                </div>
                            </div>
                        </div>
                    </div>
                </section>

                <section x-show="step === 3" x-cloak data-step-panel="3" class="rounded-lg border border-border-subtle bg-white p-5 shadow-[0_1px_2px_rgba(11,39,84,0.04),0_14px_34px_-24px_rgba(11,39,84,0.22)] sm:p-6">
                    <div class="border-b border-border-subtle pb-5">
                        <h2 class="text-xl font-bold text-accent">Tell us about your CoCM program</h2>
                        <p class="mt-2 text-sm leading-relaxed text-ink-secondary">This information helps us configure your onboarding experience.</p>
                    </div>

                    <div class="mt-6 grid gap-5 md:grid-cols-2">
                        <div>
                            <label for="current_cocm_status" class="block text-sm font-medium text-accent">Current CoCM Status <span class="text-status-critical">*</span></label>
                            <select id="current_cocm_status" name="current_cocm_status" x-model="cocmStatus" required @change="clearError('current_cocm_status')" data-required-message="Select the current CoCM status." class="input-field mt-1.5">
                                <option value="">Select status</option>
                                @foreach ($cocmStatuses as $value => $label)
                                    <option value="{{ $value }}" @selected(old('current_cocm_status') === $value)>{{ $label }}</option>
                                @endforeach
                            </select>
                            <p x-show="clientErrors.current_cocm_status" x-text="clientErrors.current_cocm_status" class="mt-1.5 text-xs font-medium text-status-critical" aria-live="polite"></p>
                            @error('current_cocm_status')<p class="mt-1.5 text-xs font-medium text-status-critical">{{ $message }}</p>@enderror
                        </div>

                        <div x-show="cocmStatus === 'other'" x-cloak>
                            <label for="current_cocm_status_other" class="block text-sm font-medium text-accent">Specify CoCM Status <span class="text-status-critical">*</span></label>
                            <input id="current_cocm_status_other" name="current_cocm_status_other" value="{{ old('current_cocm_status_other') }}" :disabled="cocmStatus !== 'other'" :required="cocmStatus === 'other'" @input="clearError('current_cocm_status_other')" data-required-message="Specify the current CoCM status." class="input-field mt-1.5">
                            <p x-show="clientErrors.current_cocm_status_other" x-text="clientErrors.current_cocm_status_other" class="mt-1.5 text-xs font-medium text-status-critical" aria-live="polite"></p>
                            @error('current_cocm_status_other')<p class="mt-1.5 text-xs font-medium text-status-critical">{{ $message }}</p>@enderror
                        </div>

                        <div>
                            <label for="current_ehr" class="block text-sm font-medium text-accent">Current EHR / EMR <span class="text-status-critical">*</span></label>
                            <select id="current_ehr" name="current_ehr" x-model="currentEhr" required @change="clearError('current_ehr')" data-required-message="Select the current EHR / EMR." class="input-field mt-1.5">
                                <option value="">Select EHR / EMR</option>
                                @foreach ($ehrSystems as $value => $label)
                                    <option value="{{ $value }}" @selected(old('current_ehr') === $value)>{{ $label }}</option>
                                @endforeach
                            </select>
                            <p x-show="clientErrors.current_ehr" x-text="clientErrors.current_ehr" class="mt-1.5 text-xs font-medium text-status-critical" aria-live="polite"></p>
                            @error('current_ehr')<p class="mt-1.5 text-xs font-medium text-status-critical">{{ $message }}</p>@enderror
                        </div>

                        <div x-show="currentEhr === 'other'" x-cloak>
                            <label for="current_ehr_other" class="block text-sm font-medium text-accent">EHR / EMR Name <span class="text-status-critical">*</span></label>
                            <input id="current_ehr_other" name="current_ehr_other" value="{{ old('current_ehr_other') }}" :disabled="currentEhr !== 'other'" :required="currentEhr === 'other'" @input="clearError('current_ehr_other')" data-required-message="Enter the EHR / EMR name." class="input-field mt-1.5">
                            <p x-show="clientErrors.current_ehr_other" x-text="clientErrors.current_ehr_other" class="mt-1.5 text-xs font-medium text-status-critical" aria-live="polite"></p>
                            @error('current_ehr_other')<p class="mt-1.5 text-xs font-medium text-status-critical">{{ $message }}</p>@enderror
                        </div>

                        <div class="md:col-span-2">
                            <fieldset>
                                <legend class="text-sm font-medium text-accent">EHR Integration Needed? <span class="text-status-critical">*</span></legend>
                                <div class="mt-2 grid gap-3 sm:grid-cols-3">
                                    @foreach ($ehrIntegrationOptions as $value => $label)
                                        <label class="relative flex min-h-12 cursor-pointer items-center justify-center rounded-lg border border-border-default bg-white px-3 text-sm font-semibold text-ink-secondary transition-colors has-[:checked]:border-accent has-[:checked]:bg-accent-muted has-[:checked]:text-accent">
                                            <input type="radio" name="ehr_integration_needed" value="{{ $value }}" x-model="ehrIntegration" required data-label="{{ $label }}" data-required-message="Select whether EHR integration is needed." @checked(old('ehr_integration_needed') === $value) class="sr-only">
                                            {{ $label }}
                                        </label>
                                    @endforeach
                                </div>
                                <p class="mt-1.5 text-xs text-ink-secondary">If yes or not sure, implementation will handle technical details securely later.</p>
                                <p x-show="clientErrors.ehr_integration_needed" x-text="clientErrors.ehr_integration_needed" class="mt-1.5 text-xs font-medium text-status-critical" aria-live="polite"></p>
                                @error('ehr_integration_needed')<p class="mt-1.5 text-xs font-medium text-status-critical">{{ $message }}</p>@enderror
                            </fieldset>
                        </div>

                        <div>
                            <label for="number_of_pcps" class="block text-sm font-medium text-accent">Number of PCPs <span class="text-status-critical">*</span></label>
                            <input id="number_of_pcps" name="number_of_pcps" type="number" min="0" max="10000" value="{{ old('number_of_pcps') }}" required @input="clearError('number_of_pcps')" data-required-message="Enter the number of PCPs." data-min-message="Number of PCPs cannot be negative." class="input-field mt-1.5">
                            <p x-show="clientErrors.number_of_pcps" x-text="clientErrors.number_of_pcps" class="mt-1.5 text-xs font-medium text-status-critical" aria-live="polite"></p>
                            @error('number_of_pcps')<p class="mt-1.5 text-xs font-medium text-status-critical">{{ $message }}</p>@enderror
                        </div>

                        <div>
                            <label for="number_of_bhcms" class="block text-sm font-medium text-accent">Number of Behavioral Health Care Managers <span class="text-status-critical">*</span></label>
                            <input id="number_of_bhcms" name="number_of_bhcms" type="number" min="0" max="10000" value="{{ old('number_of_bhcms') }}" required @input="clearError('number_of_bhcms')" data-required-message="Enter the number of behavioral health care managers." data-min-message="Number of behavioral health care managers cannot be negative." class="input-field mt-1.5">
                            <p x-show="clientErrors.number_of_bhcms" x-text="clientErrors.number_of_bhcms" class="mt-1.5 text-xs font-medium text-status-critical" aria-live="polite"></p>
                            @error('number_of_bhcms')<p class="mt-1.5 text-xs font-medium text-status-critical">{{ $message }}</p>@enderror
                        </div>

                        <div class="md:col-span-2">
                            <fieldset>
                                <legend class="text-sm font-medium text-accent">Psychiatric Consultant Status <span class="text-status-critical">*</span></legend>
                                <div class="mt-2 grid gap-3 md:grid-cols-3">
                                    @foreach ($psychiatricConsultantStatuses as $value => $label)
                                        <label class="relative flex min-h-16 cursor-pointer items-center rounded-lg border border-border-default bg-white px-3 py-3 text-sm font-semibold text-ink-secondary transition-colors has-[:checked]:border-accent has-[:checked]:bg-accent-muted has-[:checked]:text-accent">
                                            <input type="radio" name="psychiatric_consultant_status" value="{{ $value }}" x-model="psychStatus" required data-label="{{ $label }}" data-required-message="Select the psychiatric consultant status." @checked(old('psychiatric_consultant_status') === $value) class="sr-only">
                                            {{ $label }}
                                        </label>
                                    @endforeach
                                </div>
                                <p x-show="clientErrors.psychiatric_consultant_status" x-text="clientErrors.psychiatric_consultant_status" class="mt-1.5 text-xs font-medium text-status-critical" aria-live="polite"></p>
                                @error('psychiatric_consultant_status')<p class="mt-1.5 text-xs font-medium text-status-critical">{{ $message }}</p>@enderror
                            </fieldset>
                        </div>

                        <div>
                            <label for="eligible_patient_population" class="block text-sm font-medium text-accent">Approximate Eligible Patient Population <span class="text-ink-muted">(optional)</span></label>
                            <input id="eligible_patient_population" name="eligible_patient_population" type="number" min="0" max="1000000" value="{{ old('eligible_patient_population') }}" @input="clearError('eligible_patient_population')" data-min-message="Eligible patient population cannot be negative." class="input-field mt-1.5">
                            <p class="mt-1 text-xs text-ink-secondary">An estimate is acceptable.</p>
                            <p x-show="clientErrors.eligible_patient_population" x-text="clientErrors.eligible_patient_population" class="mt-1.5 text-xs font-medium text-status-critical" aria-live="polite"></p>
                            @error('eligible_patient_population')<p class="mt-1.5 text-xs font-medium text-status-critical">{{ $message }}</p>@enderror
                        </div>

                        <div>
                            <label for="target_go_live_date" class="block text-sm font-medium text-accent">Target Go-Live Date <span class="text-ink-muted">(optional)</span></label>
                            <label class="mt-1.5 flex items-center gap-2 text-xs font-medium text-ink-secondary">
                                <input type="checkbox" name="target_go_live_not_sure" value="1" x-model="targetDateNotSure" @checked($targetDateNotSureChecked) class="rounded border-border-default text-accent focus:ring-accent/30">
                                Not sure yet
                            </label>
                            <input id="target_go_live_date" name="target_go_live_date" type="date" value="{{ old('target_go_live_date') }}" :disabled="targetDateNotSure" @input="clearError('target_go_live_date')" class="input-field mt-2 disabled:bg-surface-2 disabled:text-ink-muted">
                            <p x-show="clientErrors.target_go_live_date" x-text="clientErrors.target_go_live_date" class="mt-1.5 text-xs font-medium text-status-critical" aria-live="polite"></p>
                            @error('target_go_live_date')<p class="mt-1.5 text-xs font-medium text-status-critical">{{ $message }}</p>@enderror
                        </div>

                        <div class="md:col-span-2">
                            <label for="signup_notes" class="block text-sm font-medium text-accent">Implementation Notes <span class="text-ink-muted">(optional)</span></label>
                            <textarea id="signup_notes" name="signup_notes" rows="5" maxlength="2000" @input="updateNotesCount(); clearError('signup_notes')" class="input-field mt-1.5">{{ old('signup_notes') }}</textarea>
                            <div class="mt-1 flex flex-col gap-1 text-xs text-ink-secondary sm:flex-row sm:items-center sm:justify-between">
                                <p>Tell us about goals, workflow, integration requirements, timeline, or anything our implementation team should know. Please do not include patient names or other protected health information.</p>
                                <p class="shrink-0"><span x-text="notesCount"></span>/2000</p>
                            </div>
                            <p x-show="clientErrors.signup_notes" x-text="clientErrors.signup_notes" class="mt-1.5 text-xs font-medium text-status-critical" aria-live="polite"></p>
                            @error('signup_notes')<p class="mt-1.5 text-xs font-medium text-status-critical">{{ $message }}</p>@enderror
                        </div>
                    </div>
                </section>

                <section x-show="step === 4" x-cloak data-step-panel="4" class="rounded-lg border border-border-subtle bg-white p-5 shadow-[0_1px_2px_rgba(11,39,84,0.04),0_14px_34px_-24px_rgba(11,39,84,0.22)] sm:p-6">
                    <div class="border-b border-border-subtle pb-5">
                        <h2 class="text-xl font-bold text-accent">Review and submit</h2>
                        <p class="mt-2 text-sm leading-relaxed text-ink-secondary">Review your practice information and complete the required acknowledgements.</p>
                    </div>

                    <div class="mt-6 space-y-6">
                        <div>
                            <h3 class="text-sm font-semibold text-accent">Registration Summary</h3>
                            <div class="mt-4 grid gap-4 lg:grid-cols-2">
                                <article class="rounded-lg border border-border-subtle bg-surface-2 p-4">
                                    <div class="flex items-center justify-between gap-3">
                                        <h4 class="text-sm font-semibold text-accent">Practice</h4>
                                        <button type="button" @click="go(1)" class="text-xs font-semibold text-accent hover:text-accent-hover">Edit</button>
                                    </div>
                                    <dl class="mt-3 space-y-2 text-sm">
                                        <div><dt class="text-xs font-semibold uppercase tracking-wide text-ink-muted">Practice name</dt><dd class="mt-0.5 text-ink-primary" x-text="value('practice_name') || 'Not provided'"></dd></div>
                                        <div><dt class="text-xs font-semibold uppercase tracking-wide text-ink-muted">Legal name</dt><dd class="mt-0.5 text-ink-primary" x-text="legalSame ? value('practice_name') : (value('legal_business_name') || 'Not provided')"></dd></div>
                                        <div><dt class="text-xs font-semibold uppercase tracking-wide text-ink-muted">Type</dt><dd class="mt-0.5 text-ink-primary" x-text="practiceType === 'other' ? value('practice_type_other') : selectedText('practice_type')"></dd></div>
                                        <div x-show="value('organization_npi')"><dt class="text-xs font-semibold uppercase tracking-wide text-ink-muted">Organization NPI</dt><dd class="mt-0.5 text-ink-primary" x-text="value('organization_npi')"></dd></div>
                                        <div><dt class="text-xs font-semibold uppercase tracking-wide text-ink-muted">Timezone</dt><dd class="mt-0.5 text-ink-primary" x-text="selectedText('operational_timezone')"></dd></div>
                                        <div x-show="value('website')"><dt class="text-xs font-semibold uppercase tracking-wide text-ink-muted">Website</dt><dd class="mt-0.5 text-ink-primary" x-text="value('website')"></dd></div>
                                        <div><dt class="text-xs font-semibold uppercase tracking-wide text-ink-muted">Monthly CoCM estimate</dt><dd class="mt-0.5 text-ink-primary" x-text="value('estimated_monthly_cocm_patients')"></dd></div>
                                    </dl>
                                </article>

                                <article class="rounded-lg border border-border-subtle bg-surface-2 p-4">
                                    <div class="flex items-center justify-between gap-3">
                                        <h4 class="text-sm font-semibold text-accent">Primary Contact</h4>
                                        <button type="button" @click="go(2)" class="text-xs font-semibold text-accent hover:text-accent-hover">Edit</button>
                                    </div>
                                    <dl class="mt-3 space-y-2 text-sm">
                                        <div><dt class="text-xs font-semibold uppercase tracking-wide text-ink-muted">Name</dt><dd class="mt-0.5 text-ink-primary" x-text="fullContactName() || 'Not provided'"></dd></div>
                                        <div><dt class="text-xs font-semibold uppercase tracking-wide text-ink-muted">Role</dt><dd class="mt-0.5 text-ink-primary" x-text="contactRole === 'other' ? value('primary_contact_role_other') : selectedText('primary_contact_role')"></dd></div>
                                        <div><dt class="text-xs font-semibold uppercase tracking-wide text-ink-muted">Email</dt><dd class="mt-0.5 text-ink-primary" x-text="value('primary_contact_email')"></dd></div>
                                        <div><dt class="text-xs font-semibold uppercase tracking-wide text-ink-muted">Direct phone</dt><dd class="mt-0.5 text-ink-primary" x-text="value('primary_contact_phone')"></dd></div>
                                    </dl>
                                </article>

                                <article class="rounded-lg border border-border-subtle bg-surface-2 p-4">
                                    <div class="flex items-center justify-between gap-3">
                                        <h4 class="text-sm font-semibold text-accent">Location</h4>
                                        <button type="button" @click="go(2)" class="text-xs font-semibold text-accent hover:text-accent-hover">Edit</button>
                                    </div>
                                    <dl class="mt-3 space-y-2 text-sm">
                                        <div><dt class="text-xs font-semibold uppercase tracking-wide text-ink-muted">Practice phone</dt><dd class="mt-0.5 text-ink-primary" x-text="sameAsPhone ? value('primary_contact_phone') : value('practice_phone')"></dd></div>
                                        <div x-show="value('fax')"><dt class="text-xs font-semibold uppercase tracking-wide text-ink-muted">Fax</dt><dd class="mt-0.5 text-ink-primary" x-text="value('fax')"></dd></div>
                                        <div><dt class="text-xs font-semibold uppercase tracking-wide text-ink-muted">Address</dt><dd class="mt-0.5 text-ink-primary" x-text="addressSummary()"></dd></div>
                                    </dl>
                                </article>

                                <article class="rounded-lg border border-border-subtle bg-surface-2 p-4">
                                    <div class="flex items-center justify-between gap-3">
                                        <h4 class="text-sm font-semibold text-accent">CoCM Program</h4>
                                        <button type="button" @click="go(3)" class="text-xs font-semibold text-accent hover:text-accent-hover">Edit</button>
                                    </div>
                                    <dl class="mt-3 space-y-2 text-sm">
                                        <div><dt class="text-xs font-semibold uppercase tracking-wide text-ink-muted">CoCM status</dt><dd class="mt-0.5 text-ink-primary" x-text="cocmStatus === 'other' ? value('current_cocm_status_other') : selectedText('current_cocm_status')"></dd></div>
                                        <div><dt class="text-xs font-semibold uppercase tracking-wide text-ink-muted">EHR / EMR</dt><dd class="mt-0.5 text-ink-primary" x-text="currentEhr === 'other' ? value('current_ehr_other') : selectedText('current_ehr')"></dd></div>
                                        <div><dt class="text-xs font-semibold uppercase tracking-wide text-ink-muted">EHR integration</dt><dd class="mt-0.5 text-ink-primary" x-text="checkedLabel('ehr_integration_needed')"></dd></div>
                                        <div><dt class="text-xs font-semibold uppercase tracking-wide text-ink-muted">Team</dt><dd class="mt-0.5 text-ink-primary" x-text="value('number_of_pcps') + ' PCPs, ' + value('number_of_bhcms') + ' BHCMs'"></dd></div>
                                        <div><dt class="text-xs font-semibold uppercase tracking-wide text-ink-muted">Psychiatric consultant</dt><dd class="mt-0.5 text-ink-primary" x-text="checkedLabel('psychiatric_consultant_status')"></dd></div>
                                        <div x-show="value('eligible_patient_population')"><dt class="text-xs font-semibold uppercase tracking-wide text-ink-muted">Eligible population</dt><dd class="mt-0.5 text-ink-primary" x-text="value('eligible_patient_population')"></dd></div>
                                        <div x-show="targetDateNotSure || value('target_go_live_date')"><dt class="text-xs font-semibold uppercase tracking-wide text-ink-muted">Target go-live</dt><dd class="mt-0.5 text-ink-primary" x-text="targetDateNotSure ? 'Not sure yet' : value('target_go_live_date')"></dd></div>
                                    </dl>
                                </article>
                            </div>
                        </div>

                        <div class="rounded-lg border border-border-subtle bg-surface-2 p-4">
                            <h3 class="text-sm font-semibold text-accent">Authorized Representative</h3>
                            <div class="mt-4 grid gap-5 md:grid-cols-2">
                                <div>
                                    <label for="authorized_representative_name" class="block text-sm font-medium text-accent">Authorized Representative Name <span class="text-status-critical">*</span></label>
                                    <input id="authorized_representative_name" name="authorized_representative_name" value="{{ old('authorized_representative_name') }}" required @input="authorizedNameTouched = true; clearError('authorized_representative_name')" data-required-message="Enter the authorized representative name." class="input-field mt-1.5">
                                    <p x-show="clientErrors.authorized_representative_name" x-text="clientErrors.authorized_representative_name" class="mt-1.5 text-xs font-medium text-status-critical" aria-live="polite"></p>
                                    @error('authorized_representative_name')<p class="mt-1.5 text-xs font-medium text-status-critical">{{ $message }}</p>@enderror
                                </div>
                                <div>
                                    <label for="authorized_representative_title" class="block text-sm font-medium text-accent">Title / Role <span class="text-status-critical">*</span></label>
                                    <input id="authorized_representative_title" name="authorized_representative_title" value="{{ old('authorized_representative_title') }}" required @input="authorizedTitleTouched = true; clearError('authorized_representative_title')" data-required-message="Enter the authorized representative title or role." class="input-field mt-1.5">
                                    <p x-show="clientErrors.authorized_representative_title" x-text="clientErrors.authorized_representative_title" class="mt-1.5 text-xs font-medium text-status-critical" aria-live="polite"></p>
                                    @error('authorized_representative_title')<p class="mt-1.5 text-xs font-medium text-status-critical">{{ $message }}</p>@enderror
                                </div>
                            </div>
                            <label class="mt-4 flex gap-3 text-sm text-ink-secondary">
                                <input type="checkbox" name="authority_intake_acknowledged" value="1" required @checked(old('authority_intake_acknowledged')) data-required-message="Confirm you are authorized to register this practice." class="mt-0.5 rounded border-border-default text-accent focus:ring-accent/30">
                                <span>I confirm that I am authorized to register this practice and submit this information on its behalf. <span class="text-status-critical">*</span></span>
                            </label>
                            <p x-show="clientErrors.authority_intake_acknowledged" x-text="clientErrors.authority_intake_acknowledged" class="mt-1.5 text-xs font-medium text-status-critical" aria-live="polite"></p>
                            @error('authority_intake_acknowledged')<p class="mt-1.5 text-xs font-medium text-status-critical">{{ $message }}</p>@enderror
                        </div>

                        <div class="rounded-lg border border-border-subtle bg-surface-2 p-4">
                            <h3 class="text-sm font-semibold text-accent">Compliance Requirements</h3>
                            <div class="mt-4 space-y-4">
                                <label class="flex gap-3 text-sm text-ink-secondary">
                                    <input type="checkbox" name="baa_intake_acknowledged" value="1" required @checked(old('baa_intake_acknowledged')) data-required-message="Acknowledge that a BAA must be executed and verified before activation." class="mt-0.5 rounded border-border-default text-accent focus:ring-accent/30">
                                    <span><strong class="font-semibold text-accent">Business Associate Agreement</strong><br>We understand that a Business Associate Agreement (BAA) must be executed and verified before the practice can be activated. <span class="text-status-critical">*</span></span>
                                </label>
                                <p x-show="clientErrors.baa_intake_acknowledged" x-text="clientErrors.baa_intake_acknowledged" class="text-xs font-medium text-status-critical" aria-live="polite"></p>
                                @error('baa_intake_acknowledged')<p class="text-xs font-medium text-status-critical">{{ $message }}</p>@enderror

                                <label class="flex gap-3 text-sm text-ink-secondary">
                                    <input type="checkbox" name="esign_intake_acknowledged" value="1" required @checked(old('esign_intake_acknowledged')) data-required-message="Acknowledge that eSign and compliance documents must be verified before PHI access." class="mt-0.5 rounded border-border-default text-accent focus:ring-accent/30">
                                    <span><strong class="font-semibold text-accent">eSign & Compliance Documentation</strong><br>We understand that required eSign and compliance documents must be completed and verified before staff members can access protected health information (PHI). <span class="text-status-critical">*</span></span>
                                </label>
                                <p x-show="clientErrors.esign_intake_acknowledged" x-text="clientErrors.esign_intake_acknowledged" class="text-xs font-medium text-status-critical" aria-live="polite"></p>
                                @error('esign_intake_acknowledged')<p class="text-xs font-medium text-status-critical">{{ $message }}</p>@enderror
                            </div>
                            <p class="mt-4 text-xs leading-relaxed text-ink-muted">
                                By submitting this registration, you confirm that the information provided is accurate and agree to the applicable
                                <a href="{{ route('public.terms') }}" class="font-semibold text-accent hover:text-accent-hover">Terms of Service</a>
                                and
                                <a href="{{ route('public.privacy') }}" class="font-semibold text-accent hover:text-accent-hover">Privacy Policy</a>.
                                These acknowledgements do not establish HIPAA compliance or activate PHI access.
                            </p>
                        </div>
                    </div>
                </section>

                <div class="flex flex-col-reverse gap-3 border-t border-border-subtle pt-4 sm:flex-row sm:items-center sm:justify-between">
                    <button type="button" @click="go(step - 1)" x-show="step > 1" :disabled="isSubmitting" class="btn-secondary min-h-11">
                        <svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" aria-hidden="true">
                            <path stroke-linecap="round" stroke-linejoin="round" d="M10.5 19.5 3 12m0 0 7.5-7.5M3 12h18" />
                        </svg>
                        Back
                    </button>
                    <span x-show="step === 1" class="hidden sm:block"></span>

                    <button type="button" @click="go(step + 1)" x-show="step < totalSteps" :disabled="isSubmitting" class="btn-primary min-h-11">
                        Continue
                        <svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" aria-hidden="true">
                            <path stroke-linecap="round" stroke-linejoin="round" d="M13.5 4.5 21 12m0 0-7.5 7.5M21 12H3" />
                        </svg>
                    </button>

                    <button type="submit" x-show="step === totalSteps" :disabled="isSubmitting" class="btn-primary min-h-11 disabled:cursor-not-allowed disabled:opacity-60">
                        <svg x-show="!isSubmitting" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" aria-hidden="true">
                            <path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" />
                        </svg>
                        <svg x-show="isSubmitting" class="h-4 w-4 animate-spin" fill="none" viewBox="0 0 24 24" aria-hidden="true">
                            <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
                            <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 0 1 8-8v4a4 4 0 0 0-4 4H4Z"></path>
                        </svg>
                        <span x-text="isSubmitting ? 'Submitting registration...' : 'Submit Practice Registration'"></span>
                    </button>
                </div>
            </form>
        </div>
    @endif
</main>
@endsection