@php
    use App\Services\Reports\TimesheetService;
    use App\Support\DisplayTimezone;
    use App\Support\ReportingDay;

    $tz      = DisplayTimezone::current();
    $dayMode = ReportingDay::current();
@endphp

{{-- Timezone and day boundary in ONE control.
     Two stacked dropdowns beside the company switcher put three two-line
     labels in a row and crowded the bar. They are one question anyway — how
     this admin wants the data read — so they share a button that states the
     answer compactly ("IST · Day") and opens onto both choices. --}}
<div class="dropdown foa-tb-view">
    <button class="foa-tb-pill" type="button" data-bs-toggle="dropdown" aria-expanded="false"
            title="Times are shown in {{ DisplayTimezone::label($tz) }}; a day is counted from {{ ReportingDay::label($dayMode) }}">
        <i class="ti ti-adjustments-horizontal"></i>
        <span class="foa-tb-pill-text">
            {{ DisplayTimezone::short($tz) }} <span class="foa-tb-dot">·</span> {{ ReportingDay::short($dayMode) }}
        </span>
        <i class="ti ti-chevron-down foa-tb-pill-caret"></i>
    </button>

    <ul class="dropdown-menu dropdown-menu-end shadow-sm foa-tb-view-menu">
        <li><span class="dropdown-header">Show times in</span></li>
        @foreach (DisplayTimezone::OPTIONS as $value => $label)
            <li>
                <form method="POST" action="{{ route('preferences.timezone') }}">
                    @csrf
                    <input type="hidden" name="tz" value="{{ $value }}">
                    <button type="submit"
                            class="dropdown-item d-flex align-items-center justify-content-between gap-3 {{ $tz === $value ? 'active' : '' }}">
                        <span>{{ $label }}</span>
                        <span class="text-secondary" style="font-size:.75rem;">{{ now()->tz($value)->format('H:i') }}</span>
                    </button>
                </form>
            </li>
        @endforeach

        <li><hr class="dropdown-divider"></li>
        <li><span class="dropdown-header">A day is counted from</span></li>
        @foreach (ReportingDay::options() as $value => $label)
            <li>
                <form method="POST" action="{{ route('preferences.day-mode') }}">
                    @csrf
                    <input type="hidden" name="day" value="{{ $value }}">
                    <button type="submit" class="dropdown-item {{ $dayMode === $value ? 'active' : '' }}">
                        <span class="d-block">{{ $label }}</span>
                        <span class="d-block text-secondary text-wrap" style="font-size:.75rem;line-height:1.25;">
                            {{ $value === TimesheetService::DAY_BY_START
                                ? 'Midnight to midnight, in the timezone above. Splits a night shift.'
                                : 'Six hours after the shift ends, so a night shift and its overtime stay on one day.' }}
                        </span>
                    </button>
                </form>
            </li>
        @endforeach
    </ul>
</div>

@if (DisplayTimezone::needsDetecting())
    {{-- users.timezone was empty for everyone, so the browser is asked once and
         the answer is written to the column — every later session reads it back
         with no script and no reload. Reloads only if the guess differs from
         what this page already rendered. --}}
    <script>
        (function () {
            var zone;
            try { zone = Intl.DateTimeFormat().resolvedOptions().timeZone; } catch (e) { return; }
            if (!zone) return;
            fetch(@json(route('preferences.timezone.detect')), {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content,
                },
                body: JSON.stringify({ tz: zone }),
            })
                .then(function (r) { return r.ok ? r.json() : null; })
                .then(function (d) { if (d && d.changed) window.location.reload(); })
                .catch(function () { /* stay on the default */ });
        })();
    </script>
@endif