@csrf
@if ($userRecord->exists)
    @method('PUT')
@endif

@php
    $roleLabels = ['admin' => 'Admin', 'supervisor' => 'Site Manager', 'technician' => 'Technician'];
    $roleDescriptions = [
        'admin' => 'Full system access, team management, compliance, exports, and settings.',
        'supervisor' => 'Review reports, manage assigned sites, and approve operational documents.',
        'technician' => 'Capture site reports, upload assigned documents, and manage own work queue.',
    ];
@endphp

<div class="mb-6">
    <div class="grid grid-cols-3 gap-4">
        @foreach ([1 => 'Basic Info', 2 => 'Role & Permissions', 3 => 'Account Access'] as $step => $label)
            <div class="relative flex flex-col items-center gap-2 text-center">
                @if (! $loop->first)
                    <span class="absolute right-1/2 top-4 -z-0 h-px w-full bg-[var(--construct-border-soft)]"></span>
                @endif
                <span class="z-10 flex h-9 w-9 items-center justify-center rounded-full border-2 border-[var(--construct-bg)] {{ $step === 1 ? 'bg-[var(--construct-primary)] text-white ring-2 ring-[var(--construct-primary)]' : 'bg-[var(--construct-surface-container)] text-[var(--construct-muted)]' }} text-sm font-bold">{{ $step }}</span>
                <span class="text-xs font-bold sm:text-sm {{ $step === 1 ? 'text-[var(--construct-text)]' : 'text-[var(--construct-muted)]' }}">{{ $label }}</span>
            </div>
        @endforeach
    </div>
</div>

<section class="overflow-hidden rounded border border-[var(--construct-border)] bg-white">
    <div class="flex items-center gap-3 border-b border-[var(--construct-border)] bg-[var(--construct-surface-low)] px-5 py-4">
        <span class="material-symbols-outlined text-[var(--construct-primary)]">badge</span>
        <h2 class="text-xl font-bold">Step 1: Basic Information</h2>
    </div>

    <div class="grid gap-5 p-5 md:grid-cols-2">
        <label class="grid gap-2 md:col-span-2">
            <span class="text-sm font-bold">Full Name <span class="text-red-700">*</span></span>
            <span class="relative">
                <span class="material-symbols-outlined absolute left-3 top-1/2 -translate-y-1/2 text-[20px] text-[var(--construct-muted)]">person</span>
                <input name="name" value="{{ old('name', $userRecord->name) }}" required placeholder="e.g. Jane Doe" class="w-full rounded border border-[var(--construct-border)] bg-white py-2.5 pl-10 pr-3 text-sm">
            </span>
            @error('name')<span class="text-sm font-bold text-red-700">{{ $message }}</span>@enderror
        </label>

        <label class="grid gap-2">
            <span class="text-sm font-bold">Work Email <span class="text-red-700">*</span></span>
            <span class="relative">
                <span class="material-symbols-outlined absolute left-3 top-1/2 -translate-y-1/2 text-[20px] text-[var(--construct-muted)]">mail</span>
                <input name="email" type="email" value="{{ old('email', $userRecord->email) }}" required placeholder="jane.doe@stephup.com" class="w-full rounded border border-[var(--construct-border)] bg-white py-2.5 pl-10 pr-3 text-sm">
            </span>
            @error('email')<span class="text-sm font-bold text-red-700">{{ $message }}</span>@enderror
        </label>

        <label class="grid gap-2">
            <span class="text-sm font-bold">Phone Number</span>
            <span class="relative">
                <span class="material-symbols-outlined absolute left-3 top-1/2 -translate-y-1/2 text-[20px] text-[var(--construct-muted)]">call</span>
                <input name="phone" value="{{ old('phone', $userRecord->phone) }}" placeholder="+27 11 000 0000" class="w-full rounded border border-[var(--construct-border)] bg-white py-2.5 pl-10 pr-3 text-sm">
            </span>
            @error('phone')<span class="text-sm font-bold text-red-700">{{ $message }}</span>@enderror
        </label>

        <label class="grid gap-2">
            <span class="text-sm font-bold">Job Title</span>
            <span class="relative">
                <span class="material-symbols-outlined absolute left-3 top-1/2 -translate-y-1/2 text-[20px] text-[var(--construct-muted)]">work</span>
                <input name="job_title" value="{{ old('job_title', $userRecord->job_title) }}" placeholder="Site Manager" class="w-full rounded border border-[var(--construct-border)] bg-white py-2.5 pl-10 pr-3 text-sm">
            </span>
            @error('job_title')<span class="text-sm font-bold text-red-700">{{ $message }}</span>@enderror
        </label>

        <label class="grid gap-2">
            <span class="text-sm font-bold">Company / Organization</span>
            <span class="relative">
                <span class="material-symbols-outlined absolute left-3 top-1/2 -translate-y-1/2 text-[20px] text-[var(--construct-muted)]">domain</span>
                <input value="Stephup Construction" disabled class="w-full rounded border border-[var(--construct-border)] bg-[var(--construct-surface-low)] py-2.5 pl-10 pr-3 text-sm text-[var(--construct-muted)]">
            </span>
        </label>
    </div>
</section>

<section class="mt-5 overflow-hidden rounded border border-[var(--construct-border)] bg-white">
    <div class="flex items-center gap-3 border-b border-[var(--construct-border)] bg-[var(--construct-surface-low)] px-5 py-4">
        <span class="material-symbols-outlined text-[var(--construct-primary)]">admin_panel_settings</span>
        <h2 class="text-xl font-bold">Step 2: Role & Permissions</h2>
    </div>
    <div class="grid gap-3 p-5 lg:grid-cols-3">
        @foreach ($roleLabels as $value => $label)
            <label class="cursor-pointer rounded border border-[var(--construct-border)] bg-white p-4 hover:bg-[var(--construct-surface-low)]">
                <div class="flex items-start gap-3">
                    <input type="radio" name="role" value="{{ $value }}" @checked(old('role', $userRecord->role) === $value) required class="mt-1 border-[var(--construct-border)] text-[var(--construct-primary)]">
                    <span>
                        <span class="block font-bold">{{ $label }}</span>
                        <span class="mt-1 block text-sm text-[var(--construct-muted)]">{{ $roleDescriptions[$value] }}</span>
                    </span>
                </div>
            </label>
        @endforeach
    </div>
    @error('role')<div class="px-5 pb-5 text-sm font-bold text-red-700">{{ $message }}</div>@enderror
</section>

<section class="mt-5 overflow-hidden rounded border border-[var(--construct-border)] bg-white">
    <div class="flex items-center gap-3 border-b border-[var(--construct-border)] bg-[var(--construct-surface-low)] px-5 py-4">
        <span class="material-symbols-outlined text-[var(--construct-primary)]">key</span>
        <h2 class="text-xl font-bold">Step 3: Account Access</h2>
    </div>
    <div class="grid gap-5 p-5 md:grid-cols-2">
        <label class="grid gap-2">
            <span class="text-sm font-bold">{{ $userRecord->exists ? 'New Password' : 'Password' }} @unless($userRecord->exists)<span class="text-red-700">*</span>@endunless</span>
            <input name="password" type="password" @required(! $userRecord->exists) class="rounded border border-[var(--construct-border)] bg-white px-3 py-2.5 text-sm">
            @error('password')<span class="text-sm font-bold text-red-700">{{ $message }}</span>@enderror
        </label>
        <label class="grid gap-2">
            <span class="text-sm font-bold">Confirm Password @unless($userRecord->exists)<span class="text-red-700">*</span>@endunless</span>
            <input name="password_confirmation" type="password" @required(! $userRecord->exists) class="rounded border border-[var(--construct-border)] bg-white px-3 py-2.5 text-sm">
        </label>
        <label class="flex items-center justify-between gap-4 rounded border border-[var(--construct-border)] bg-[var(--construct-surface-low)] px-4 py-3 md:col-span-2">
            <span>
                <span class="block text-sm font-bold">Active account</span>
                <span class="mt-1 block text-sm text-[var(--construct-muted)]">Inactive accounts cannot sign in or receive new assignments.</span>
            </span>
            <input type="checkbox" name="is_active" value="1" @checked(old('is_active', $userRecord->is_active)) class="h-5 w-5 rounded border-[var(--construct-border)] text-[var(--construct-primary)]">
        </label>
        @error('is_active')<div class="md:col-span-2 text-sm font-bold text-red-700">{{ $message }}</div>@enderror
    </div>

    <div class="flex flex-wrap justify-end gap-3 border-t border-[var(--construct-border)] bg-[var(--construct-surface-low)] px-5 py-4">
        <a href="{{ route('users.index') }}" class="rounded border border-[var(--construct-border)] bg-white px-4 py-2.5 text-sm font-bold text-[var(--construct-text)]">Cancel</a>
        <button class="inline-flex items-center gap-2 rounded bg-[var(--construct-primary)] px-5 py-2.5 text-sm font-bold text-white">
            {{ $userRecord->exists ? 'Save User' : 'Create User' }}
            <span class="material-symbols-outlined text-[18px]">arrow_forward</span>
        </button>
    </div>
</section>