{{-- Screen lock with a "Show" button. Only included for users who pass viewPasscode. Needs $job. --}}
@php
    $views = auth()->user()->isAdmin()
        ? $job->passcodeViews()->with('user')->latest('viewed_at')->take(10)->get()
        : collect();
@endphp

<div x-data="passcodeReveal(@js(route('jobs.passcode', $job)))" class="space-y-2">
    <div class="flex flex-wrap items-center gap-2">
        <span>{{ $job->passcode_type->label() }}</span>
        <template x-if="!value">
            <span class="font-mono tracking-widest text-gray-400" aria-hidden="true">••••••</span>
        </template>
        <template x-if="value && type !== 'pattern'">
            <span class="rounded bg-yellow-100 px-2 py-0.5 font-mono text-lg tracking-widest text-gray-900" x-text="value"></span>
        </template>

        <button type="button" x-show="!value" @click="show()" :disabled="loading"
                class="inline-flex min-h-10 items-center gap-1 rounded-lg border border-gray-300 bg-white px-4 text-sm font-semibold text-gray-800 hover:bg-gray-50 disabled:opacity-60">
            <span x-text="loading ? 'Loading…' : 'Show'">Show</span>
        </button>
        <button type="button" x-show="value" x-cloak @click="hide()"
                class="inline-flex min-h-10 items-center rounded-lg border border-gray-300 bg-white px-4 text-sm font-semibold text-gray-800 hover:bg-gray-50">
            Hide
        </button>
    </div>

    {{-- Pattern: dots numbered in the order to draw them. --}}
    <template x-if="value && type === 'pattern'">
        <div class="flex items-center gap-3">
            <svg viewBox="0 0 120 120" class="h-28 w-28 rounded-lg bg-gray-900" role="img" :aria-label="'Pattern ' + value">
                <polyline :points="points" fill="none" stroke="#818cf8" stroke-width="5" stroke-linecap="round" stroke-linejoin="round" />
                @for ($i = 1; $i <= 9; $i++)
                    @php($cx = 20 + (($i - 1) % 3) * 40)
                    @php($cy = 20 + intdiv($i - 1, 3) * 40)
                    <circle cx="{{ $cx }}" cy="{{ $cy }}" r="6" :fill="order({{ $i }}) ? '#ffffff' : '#6b7280'" />
                    <text x="{{ $cx + 8 }}" y="{{ $cy - 7 }}" fill="#fde68a" font-size="11" font-weight="700" x-text="order({{ $i }}) || ''"></text>
                @endfor
            </svg>
            <span class="font-mono text-sm text-gray-700" x-text="value.split('-').join(' → ')"></span>
        </div>
    </template>

    <p x-show="error" x-cloak class="text-sm text-red-700" x-text="error"></p>
    <p class="text-xs text-gray-500">Every time it is shown, your name and the time are saved.</p>

    @if ($views->isNotEmpty())
        <details class="text-xs text-gray-600">
            <summary class="cursor-pointer select-none">Viewed {{ $job->passcodeViews()->count() }} {{ Str::plural('time', $job->passcodeViews()->count()) }}</summary>
            <ul class="mt-1 space-y-0.5">
                @foreach ($views as $view)
                    <li>{{ $view->user?->name }} · {{ $view->viewed_at->format('d M Y, g:i A') }}</li>
                @endforeach
            </ul>
        </details>
    @endif
</div>

@once
    <script>
        function passcodeReveal(url) {
            return {
                value: null, type: null, loading: false, error: '',
                async show() {
                    this.loading = true;
                    this.error = '';
                    try {
                        const res = await fetch(url, {
                            method: 'POST',
                            headers: {
                                'Accept': 'application/json',
                                'X-CSRF-TOKEN': document.querySelector('meta[name=csrf-token]').content,
                            },
                        });
                        if (!res.ok) throw new Error(res.status === 429 ? 'Too many tries. Wait a minute.' : 'Could not load it. Refresh the page and try again.');
                        const data = await res.json();
                        this.type = data.type;
                        this.value = data.value;
                        // Hide again after 60 seconds so it is not left on screen.
                        clearTimeout(this.timer);
                        this.timer = setTimeout(() => this.hide(), 60000);
                    } catch (e) {
                        this.error = e.message;
                    } finally {
                        this.loading = false;
                    }
                },
                hide() { this.value = null; this.type = null; },
                order(i) {
                    const pos = (this.value || '').split('-').map(Number).indexOf(i);
                    return pos === -1 ? 0 : pos + 1;
                },
                get points() {
                    return (this.value || '').split('-').map(Number).map(i => (20 + ((i - 1) % 3) * 40) + ',' + (20 + Math.floor((i - 1) / 3) * 40)).join(' ');
                },
            };
        }
    </script>
@endonce