<x-admin-layout
    active="shifts"
    :title="__('shifts.title')"
    :crumbs="[
        ['label' => __('admin.shell.brand_sub')],
        ['label' => __('sales.title')],
        ['label' => __('shifts.title')],
    ]">

    <div class="page-wide"
         x-data="shiftsIndexPage()">

        <div class="page-header mb-6">
            <div>
                <h1 class="page-title">{{ __('shifts.title') }}</h1>
                <p class="page-sub">{{ __('shifts.sub') }}</p>
            </div>
            <div class="flex items-center gap-2">
                @if ($activeShift)
                    <a href="{{ route('admin.shifts.show', $activeShift) }}" class="pos-btn pos-btn-sm pos-btn-primary">
                        <x-icon name="receipt" class="w-4 h-4" />
                        {{ __('shifts.actions.view_active') }}
                    </a>
                @else
                    @can('create', App\Models\Shift::class)
                        <a href="{{ route('admin.shifts.open.form') }}" class="pos-btn pos-btn-sm pos-btn-primary">
                            <x-icon name="plus" class="w-4 h-4" />
                            {{ __('shifts.actions.open') }}
                        </a>
                    @endcan
                @endif
            </div>
        </div>

        <x-admin.summary-cards :cards="$summaryCards" />

        <div class="card card-pad-0">
            <div class="dt-toolbar">
                <div class="dt-toolbar-title">{{ __('shifts.list.title', ['count' => $shifts->count()]) }}</div>
                <x-admin.dt-search />
                <x-admin.dt-toolbar-actions />
            </div>

            @if ($shifts->isEmpty())
                <div class="dt-empty">
                    <span class="dt-empty-icon"><x-icon name="receipt" class="w-5 h-5" /></span>
                    <div class="dt-empty-title">{{ __('shifts.empty.title') }}</div>
                    <div class="dt-empty-sub">{{ __('shifts.empty.sub') }}</div>
                </div>
            @else
                <div class="dt-scroll">
                <table class="dt-table">
                    <thead>
                        <tr>
                            <th>{{ __('shifts.columns.number') }}</th>
                            <th>{{ __('shifts.columns.cashier') }}</th>
                            <th>{{ __('shifts.columns.opened') }}</th>
                            <th>{{ __('shifts.columns.closed') }}</th>
                            <th class="num">{{ __('shifts.columns.sales_total') }}</th>
                            <th class="num">{{ __('shifts.columns.variance') }}</th>
                            <th>{{ __('shifts.columns.status') }}</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach ($shifts as $shift)
                            <tr class="prod-row" data-dt-row
                                data-dt-name="#{{ $shift->id }} {{ $shift->cashier?->name }}"
                                data-dt-id="{{ $shift->id }}"
                                data-dt-status="{{ $shift->status }}"
                                @click="window.location.href = {{ \Illuminate\Support\Js::from(route('admin.shifts.show', $shift)) }}">
                                <td class="mono">#{{ $shift->id }}</td>
                                <td>{{ $shift->cashier?->name ?: '—' }}</td>
                                <td>{{ format_datetime($shift->opened_at) }}</td>
                                <td>{{ $shift->closed_at ? format_datetime($shift->closed_at) : '—' }}</td>
                                <td class="num tnum">{{ $shift->isClosed() ? format_money($shift->sales_total) : '—' }}</td>
                                <td class="num tnum">
                                    @if ($shift->cash_variance !== null && $shift->isClosed())
                                        @php $vCmp = bccomp((string) $shift->cash_variance, '0', 4); @endphp
                                        <span @class([
                                            'mono',
                                            'text-amber-600 dark:text-amber-400' => $vCmp !== 0,
                                        ])>{{ format_money($shift->cash_variance) }}</span>
                                    @else
                                        —
                                    @endif
                                </td>
                                <td>
                                    @php
                                        $badge = match ($shift->status) {
                                            'open'                  => 'info',
                                            'closed'                => 'positive',
                                            'closed_with_variance'  => 'warning',
                                            default                 => 'muted',
                                        };
                                    @endphp
                                    <span class="prod-badge prod-badge-{{ $badge }}">
                                        {{ __('shifts.statuses.'.$shift->status) }}
                                    </span>
                                    {{-- Stale flag: an open shift older than ~a working
                                         day is likely abandoned (cashier logged out
                                         without closing). Surfaces it for a manager to
                                         force-close. --}}
                                    @if ($shift->isOpen())
                                        @php $hoursOpen = (int) $shift->opened_at->diffInHours(now()); @endphp
                                        @if ($hoursOpen >= 8)
                                            <span class="prod-badge prod-badge-warning ms-1" title="{{ __('shifts.stale.tooltip') }}">
                                                {{ __('shifts.stale.label', ['hours' => $hoursOpen]) }}
                                            </span>
                                        @endif
                                    @endif
                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
                </div>
                <x-admin.dt-pager />
            @endif
        </div>
    </div>
</x-admin-layout>
