{{--
    A refused clock-in — or clock-out — and the way out of it. Mounted once in
    the app layout, opened by either clock button dispatching `offsite-blocked`
    with `action` set to which end of the day was turned away.

    Tone matters here more than in most dialogs: the person reading it is
    standing somewhere with their phone out, trying to start or end work. So it
    states what we observed, says what to do about it, and keeps the door open.
--}}
<div>
    @if ($show)
        @php
            // How the dialog dresses itself for each refusal. Being in the wrong
            // place is an amber "please come in"; a device that would not answer
            // is sky blue, because nobody did anything wrong and it should not
            // read like a telling-off. Full class strings, so Tailwind sees them.
            $look = match ($reason) {
                \App\Exceptions\AttendanceBlockedException::NO_LOCATION,
                \App\Exceptions\AttendanceBlockedException::IMPRECISE => [
                    'icon' => 'map-pin',
                    'chip' => 'from-sky-400 to-sky-600',
                    'halo' => 'bg-sky-200/60',
                ],
                \App\Exceptions\AttendanceBlockedException::OFF_NETWORK => [
                    'icon' => 'building-storefront',
                    'chip' => 'from-amber-400 to-amber-600',
                    'halo' => 'bg-amber-200/60',
                ],
                default => [
                    'icon' => 'map-pin',
                    'chip' => 'from-amber-400 to-amber-600',
                    'halo' => 'bg-amber-200/60',
                ],
            };
        @endphp

        <div class="fixed inset-0 z-50 flex items-end justify-center p-4 sm:items-center"
            x-data role="dialog" aria-modal="true" aria-labelledby="offsiteHeadline"
            @keydown.escape.window="$wire.close()">

            <div class="absolute inset-0 bg-slate-900/50 backdrop-blur-sm" wire:click="close"></div>

            <div class="animate-rise relative z-10 w-full max-w-md overflow-hidden rounded-2xl bg-white shadow-2xl shadow-slate-900/25 ring-1 ring-slate-900/5">
                @if ($submitted)
                    {{-- Sent. Nothing more for them to do but wait. --}}
                    <div class="relative px-5 pb-5 pt-6 sm:px-6">
                        <div class="pointer-events-none absolute -right-12 -top-14 h-36 w-36 rounded-full bg-emerald-200/60 blur-3xl"></div>
                        <div class="relative flex items-start gap-4">
                            <span class="flex h-12 w-12 shrink-0 items-center justify-center rounded-2xl bg-gradient-to-br from-emerald-400 to-emerald-600 text-white shadow-sm ring-1 ring-white/40">
                                <x-icon name="paper-airplane" class="h-5 w-5" />
                            </span>
                            <div class="min-w-0 flex-1">
                                <p class="text-[11px] font-semibold uppercase tracking-wider text-slate-400">{{ __('Request sent') }}</p>
                                <h2 id="offsiteHeadline" class="mt-1 text-base font-semibold leading-snug text-slate-900">
                                    {{ __('Thank you — your request is in.') }}
                                </h2>
                                <p class="mt-1.5 text-sm leading-relaxed text-slate-500">
                                    {{ $action === 'out'
                                        ? __('It has gone through by email and in the app. As soon as it is approved you can clock out from where you are — until then you are still on the clock, so ask a director to close the day if you have finished.')
                                        : __('It has gone through by email and in the app. As soon as it is approved you will be clocked in automatically, from the time you asked, so you are not losing any of today.') }}
                                </p>
                            </div>
                        </div>
                    </div>

                    <div class="flex items-center justify-end border-t border-slate-100 bg-slate-50 px-5 py-3.5 sm:px-6">
                        <x-button variant="primary" wire:click="close" class="w-full sm:w-auto">{{ __('Got it') }}</x-button>
                    </div>
                @else
                    <div class="relative px-5 pt-6 sm:px-6">
                        <div class="pointer-events-none absolute -right-12 -top-14 h-36 w-36 rounded-full {{ $look['halo'] }} blur-3xl"></div>
                        <div class="relative flex items-start gap-4">
                            <span class="flex h-12 w-12 shrink-0 items-center justify-center rounded-2xl bg-gradient-to-br {{ $look['chip'] }} text-white shadow-sm ring-1 ring-white/40">
                                <x-icon :name="$look['icon']" class="h-5 w-5" />
                            </span>
                            <div class="min-w-0 flex-1">
                                <p class="text-[11px] font-semibold uppercase tracking-wider text-slate-400">{{ $action === 'out' ? __('Clock out') : __('Clock in') }}</p>
                                <h2 id="offsiteHeadline" class="mt-1 text-base font-semibold leading-snug text-slate-900">{{ $message }}</h2>
                                @if ($detail)
                                    <p class="mt-1.5 text-sm leading-relaxed text-slate-500">{{ $detail }}</p>
                                @endif
                            </div>
                        </div>
                    </div>

                    <div class="px-5 pb-5 pt-4 sm:px-6">
                        @if ($applying)
                            <x-label for="requestReason" :value="__('Where are you today, and what are you working on?')" />
                            <textarea id="requestReason" rows="3" wire:model="requestReason" autofocus
                                class="mt-1 block w-full rounded-xl border-slate-200 text-sm shadow-xs focus:border-accent-500 focus:ring-accent-500"
                                placeholder="{{ __('e.g. Installing signage at Property.co.zw until midday') }}"></textarea>
                            <x-input-error for="requestReason" class="mt-2" />
                            <p class="mt-2 flex items-start gap-1.5 text-[11px] leading-relaxed text-slate-400">
                                <x-icon name="clock" class="mt-0.5 h-3.5 w-3.5 shrink-0" />
                                <span>{{ $action === 'out'
                                    ? __('This needs approving first. You stay on the clock until then, so it is worth telling a director you have finished.')
                                    : __('This needs approving first. Once it comes through you are clocked in from now, not from whenever it was reviewed.') }}</span>
                            </p>
                        @else
                            <div class="rounded-xl border border-slate-200 bg-slate-50 px-3.5 py-3">
                                <p class="text-sm leading-relaxed text-slate-600">
                                    {{ $action === 'out'
                                        ? __('Were you working away from the office today? Apply below to be cleared for the day and you can close it from here.')
                                        : __('Working away from the office today? Apply below to be cleared for the day.') }}
                                </p>
                            </div>
                        @endif
                    </div>

                    {{-- Stacked on a phone: two actions side by side is wider than a 360px screen. --}}
                    <div class="flex flex-col-reverse gap-2 border-t border-slate-100 bg-slate-50 px-5 py-3.5 sm:flex-row sm:items-center sm:justify-end sm:px-6">
                        <x-secondary-button wire:click="close" class="w-full sm:w-auto">{{ __('Cancel') }}</x-secondary-button>

                        @if ($applying)
                            <x-button variant="primary" wire:click="submit" wire:loading.attr="disabled" wire:target="submit" class="w-full sm:w-auto">
                                <x-icon name="paper-airplane" class="h-4 w-4" />
                                <span wire:loading.remove wire:target="submit">{{ __('Send request') }}</span>
                                <span wire:loading wire:target="submit">{{ __('Sending…') }}</span>
                            </x-button>
                        @else
                            <x-button variant="primary" wire:click="apply" class="w-full sm:w-auto">
                                <x-icon name="map-pin" class="h-4 w-4" /> {{ __('Apply to work off-site') }}
                            </x-button>
                        @endif
                    </div>
                @endif
            </div>
        </div>
    @endif
</div>