{{--
    "Full-fledged" dashboard clock: bigger digital display than the topbar's
    (see filament.partials.clock), plus the timezone's UTC offset and full
    IANA name — everything the topbar's compact version has no room for.
    Same tenant-timezone resolution (App\Services\CurrentContext::timezone()),
    so the two never disagree.
--}}
@php
    $context = app(\App\Services\CurrentContext::class);
    $timezone = $context->timezone();
    $localeTag = $context->localeTag();
@endphp
<x-filament-widgets::widget>
    <x-filament::section>
        <div
            x-data="{
                tz: @js($timezone),
                locale: @js($localeTag),
                now: new Date(),
                fmt(options) {
                    try {
                        return new Intl.DateTimeFormat(this.locale, { timeZone: this.tz, ...options }).format(this.now);
                    } catch (e) {
                        return new Intl.DateTimeFormat(undefined, options).format(this.now);
                    }
                },
                offset() {
                    try {
                        const parts = new Intl.DateTimeFormat('en-US', { timeZone: this.tz, timeZoneName: 'shortOffset' }).formatToParts(this.now);
                        return parts.find((p) => p.type === 'timeZoneName')?.value ?? '';
                    } catch (e) {
                        return '';
                    }
                },
            }"
            x-init="setInterval(() => (now = new Date()), 1000)"
            class="flex flex-wrap items-center justify-between gap-4"
        >
            <div>
                <p class="text-sm font-medium text-gray-500 dark:text-gray-400" x-text="fmt({ weekday: 'long', day: 'numeric', month: 'long', year: 'numeric' })"></p>
                <p class="mt-1 font-mono text-4xl font-bold tabular-nums text-gray-950 dark:text-white" x-text="fmt({ hour: '2-digit', minute: '2-digit', second: '2-digit' })"></p>
            </div>

            <div class="text-right">
                <p class="text-sm font-semibold text-gray-700 dark:text-gray-200" x-text="tz"></p>
                <p class="text-xs text-gray-400 dark:text-gray-500" x-text="offset()"></p>
            </div>
        </div>
    </x-filament::section>
</x-filament-widgets::widget>
