@extends('layouts.public')

@section('title', 'Set Up Clinic Admin - Meduvo Health')

@section('content')
<main class="mx-auto max-w-3xl px-5 py-10 sm:px-6 lg:px-8">
    <div class="mb-8">
        <p class="text-sm font-semibold text-brand-orange">Practice onboarding</p>
        <h1 class="mt-3 text-3xl font-bold tracking-tight text-accent">Set up your Clinic Admin account.</h1>
        <p class="mt-3 text-sm leading-relaxed text-ink-secondary">Create your password to continue onboarding for the invited practice.</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">
            {{ $errors->first() }}
        </div>
    @endif

    @if ($state !== 'valid')
        <section class="card p-6">
            <h2 class="text-lg font-semibold text-accent">
                @if ($state === 'accepted')
                    Invitation already accepted
                @elseif ($state === 'expired')
                    Invitation expired
                @elseif ($state === 'revoked')
                    Invitation revoked
                @else
                    Invitation unavailable
                @endif
            </h2>
            <p class="mt-2 text-sm leading-relaxed text-ink-secondary">
                @if ($state === 'accepted')
                    This setup link has already been used. Sign in with the Clinic Admin account that was created from this invitation.
                @elseif ($state === 'expired')
                    This invitation is past its expiration date. Ask Meduvo support to send a new Clinic Admin invitation.
                @elseif ($state === 'revoked')
                    This setup link was revoked. Ask Meduvo support to send a fresh invitation if this practice should continue onboarding.
                @else
                    This setup link is invalid or no longer exists. Ask Meduvo support to send a fresh invitation.
                @endif
            </p>
            <div class="mt-5">
                <a href="{{ route('login') }}" class="btn-primary">Go to sign in</a>
            </div>
        </section>
    @else
        <section class="card p-6">
            <div class="grid gap-4 border-b border-border-subtle pb-5 sm:grid-cols-3">
                <div>
                    <p class="text-xs font-medium text-ink-muted">Practice</p>
                    <p class="mt-1 text-sm font-semibold text-accent">{{ $invitation->tenant?->name ?? 'Meduvo Health' }}</p>
                </div>
                <div>
                    <p class="text-xs font-medium text-ink-muted">Role</p>
                    <p class="mt-1 text-sm font-semibold text-accent">Clinic Admin</p>
                </div>
                <div>
                    <p class="text-xs font-medium text-ink-muted">Expires</p>
                    <p class="mt-1 text-sm font-semibold text-accent">{{ \App\Support\UsFormat::date($invitation->expires_at) }}</p>
                </div>
            </div>

            <form method="POST" action="{{ route('practice-invitations.accept.store', ['token' => $token]) }}" class="mt-6 space-y-5">
                @csrf

                <div class="grid gap-5 sm:grid-cols-2">
                    <div>
                        <label for="first_name" class="mb-1.5 block text-sm font-medium text-accent">First name</label>
                        <input id="first_name" name="first_name" value="{{ old('first_name', $invitation->first_name) }}" required class="input-field" autocomplete="given-name">
                    </div>
                    <div>
                        <label for="last_name" class="mb-1.5 block text-sm font-medium text-accent">Last name</label>
                        <input id="last_name" name="last_name" value="{{ old('last_name', $invitation->last_name) }}" required class="input-field" autocomplete="family-name">
                    </div>
                </div>

                <div>
                    <label for="email" class="mb-1.5 block text-sm font-medium text-accent">Email</label>
                    <input id="email" value="{{ $invitation->email }}" readonly class="input-field bg-surface-2 text-ink-secondary">
                </div>

                <div class="grid gap-5 sm:grid-cols-2">
                    <div>
                        <label for="job_title" class="mb-1.5 block text-sm font-medium text-accent">Job title</label>
                        <input id="job_title" name="job_title" value="{{ old('job_title', $invitation->job_title) }}" class="input-field" autocomplete="organization-title">
                    </div>
                    <div>
                        <label for="phone" class="mb-1.5 block text-sm font-medium text-accent">Phone</label>
                        <input id="phone" name="phone" value="{{ old('phone', \App\Support\UsFormat::phone($invitation->phone)) }}" class="input-field" autocomplete="tel" data-us-phone>
                    </div>
                </div>

                <div class="grid gap-5 sm:grid-cols-2">
                    <div>
                        <label for="password" class="mb-1.5 block text-sm font-medium text-accent">Password</label>
                        <input id="password" name="password" type="password" required minlength="8" class="input-field" autocomplete="new-password">
                    </div>
                    <div>
                        <label for="password_confirmation" class="mb-1.5 block text-sm font-medium text-accent">Confirm password</label>
                        <input id="password_confirmation" name="password_confirmation" type="password" required minlength="8" class="input-field" autocomplete="new-password">
                    </div>
                </div>

                <div class="flex justify-end">
                    <button type="submit" class="btn-primary">Activate account</button>
                </div>
            </form>
        </section>
    @endif
</main>
@endsection