{{--
    The clock buttons go through the `clockAction` Alpine component rather than a
    bare wire:click: when the workspace gates clock-in on a geofence, the browser
    has to be asked where it is first and the reading passed to the action.
--}}
<div x-data="clockAction(@js($needsLocation))">
    @if ($canClock)
        @if ($open)
            {{-- On the clock: live ticking elapsed timer + stop --}}
            <div
                class="inline-flex items-center gap-2 rounded-full bg-slate-900 py-1 pl-3 pr-1 text-xs text-white shadow-sm ring-1 ring-white/10"
                x-data="{
                    start: {{ $startTimestamp }},
                    label: '00:00',
                    tick() {
                        let s = Math.max(0, Math.floor(Date.now() / 1000) - this.start);
                        let h = Math.floor(s / 3600);
                        let m = String(Math.floor((s % 3600) / 60)).padStart(2, '0');
                        let sec = String(s % 60).padStart(2, '0');
                        this.label = h > 0 ? `${h}:${m}:${sec}` : `${m}:${sec}`;
                    },
                }"
                x-init="tick(); setInterval(() => tick(), 1000)"
                title="{{ __('You are clocked in') }}"
            >
                <span class="relative flex h-2 w-2">
                    <span class="absolute inline-flex h-full w-full animate-ping rounded-full bg-emerald-400 opacity-75"></span>
                    <span class="relative inline-flex h-2 w-2 rounded-full bg-emerald-500"></span>
                </span>
                {{-- The running time is the label. A pill this small says what it
                     is by ticking, so the words were only taking up room; the
                     numbers carry the link through to the attendance page. --}}
                <a href="{{ route('attendance.index') }}"
                    class="font-mono tabular-nums text-emerald-300 transition hover:text-emerald-200"
                    x-text="label">00:00</a>
                <button
                    type="button"
                    @click="clock('clockOut')"
                    :disabled="busy"
                    :title="locating ? '{{ __('Checking your location…') }}' : '{{ __('Clock out') }}'"
                    class="ml-0.5 inline-flex h-5 w-5 items-center justify-center rounded-full bg-rose-500/90 text-white transition hover:bg-rose-500 focus:outline-none focus:ring-2 focus:ring-rose-400"
                >
                    <x-icon name="stop" class="h-3 w-3" />
                </button>
            </div>
        @else
            {{-- Off the clock: one-tap clock in --}}
            <button
                type="button"
                @click="clock('clockIn')"
                :disabled="busy"
                :title="locating ? '{{ __('Checking your location…') }}' : '{{ __('Clock in') }}'"
                class="inline-flex items-center gap-1.5 rounded-full border border-emerald-200 bg-emerald-50 py-1 pl-2.5 pr-3 text-xs font-semibold text-emerald-700 shadow-xs transition hover:border-emerald-300 hover:bg-emerald-100 focus:outline-none focus:ring-2 focus:ring-emerald-500/40 disabled:opacity-60"
            >
                <span class="inline-flex h-5 w-5 items-center justify-center rounded-full bg-emerald-500 text-white">
                    <x-icon name="play" class="h-3 w-3" x-show="!locating" />
                    <x-icon name="map-pin" class="h-3 w-3 animate-pulse" x-show="locating" x-cloak />
                </span>
                <span class="hidden sm:inline" x-text="locating ? '{{ __('Locating…') }}' : '{{ __('Clock in') }}'">{{ __('Clock in') }}</span>
            </button>
        @endif
    @endif

    {{-- Cash-up reminder: blocks clock-out until the day's cash is declared --}}
    @if ($cashUpPending)
        <div class="fixed inset-0 z-50 flex items-center justify-center p-4">
            <div class="absolute inset-0 bg-slate-900/40" wire:click="dismissCashUpReminder"></div>
            <div class="relative z-10 w-full max-w-sm overflow-hidden rounded-2xl bg-white text-left shadow-xl">
                <div class="flex items-start gap-3 px-5 py-5">
                    <span class="mt-0.5 flex h-10 w-10 shrink-0 items-center justify-center rounded-full bg-amber-100 text-amber-600">
                        <x-icon name="banknotes" class="h-5 w-5" />
                    </span>
                    <div>
                        <p class="text-sm font-semibold text-slate-900">{{ __('Declare the day\'s cash first') }}</p>
                        <p class="mt-1 text-sm text-slate-500">
                            {{ __('You\'re responsible for the end-of-day cash-up. Please count and declare the cash and EcoCash before you clock out.') }}
                        </p>
                    </div>
                </div>
                <div class="flex items-center justify-end gap-2 border-t border-slate-100 bg-slate-50 px-5 py-3">
                    <button type="button" wire:click="dismissCashUpReminder"
                        class="rounded-lg px-3 py-1.5 text-sm font-medium text-slate-600 hover:bg-slate-100">{{ __('Later') }}</button>
                    <a href="{{ route('treasury.cash_up') }}" wire:navigate
                        class="inline-flex items-center gap-1.5 rounded-lg bg-accent-600 px-3.5 py-1.5 text-sm font-semibold text-white hover:bg-accent-700">
                        <x-icon name="shield-check" class="h-4 w-4" /> {{ __('Go to Cash-up') }}
                    </a>
                </div>
            </div>
        </div>
    @endif
</div>