@php
    use App\Modules\HR\Attendance\Support\AttendanceRecordStatus;

    $breadcrumbs = [
        ['label' => __('common.home'), 'url' => route('dashboard.index')],
        ['label' => __('me.team_attendance.title')],
    ];
@endphp

<x-ui.layout.page
    :title="__('me.team_attendance.title')"
    :subtitle="__('me.team_attendance.subtitle')"
    page-icon="fe fe-users"
    :breadcrumbs="$breadcrumbs"
>
    <x-slot:actions>
        <x-ui.buttons.secondary :href="route('me.attendance.index')" icon="fe fe-clock">
            {{ __('me.attendance_title') }}
        </x-ui.buttons.secondary>
    </x-slot:actions>

    <div class="card border-0 shadow-sm mb-4">
        <div class="card-body">
            <form method="GET" action="{{ route('me.team.attendance.index') }}" class="row g-3 align-items-end">
                <div class="col-md-3">
                    <x-ui.form.input name="from" type="date" :label="__('common.from')" :value="$from" required />
                </div>
                <div class="col-md-3">
                    <x-ui.form.input name="to" type="date" :label="__('common.to')" :value="$to" required />
                </div>
                <div class="col-md-3">
                    <label class="form-label" for="employee_id">{{ __('me.team_attendance.employee') }}</label>
                    <select name="employee_id" id="employee_id" class="form-select">
                        <option value="">{{ __('me.team_attendance.all_team') }}</option>
                        @foreach ($employeeOptions as $id => $name)
                            <option value="{{ $id }}" @selected((int) $selectedEmployeeId === (int) $id)>
                                {{ $name }}
                            </option>
                        @endforeach
                    </select>
                </div>
                <div class="col-md-3">
                    <x-ui.buttons.primary type="submit" icon="fe fe-filter">
                        {{ __('common.filter') }}
                    </x-ui.buttons.primary>
                </div>
            </form>
        </div>
    </div>

    <x-ui.table.table :columns="[
        ['label' => __('employees.fields.full_name')],
        ['label' => __('attendance.fields.date')],
        ['label' => __('attendance.fields.check_in')],
        ['label' => __('attendance.fields.check_out')],
        ['label' => __('attendance.fields.status')],
        ['label' => __('attendance.fields.late')],
        ['label' => __('attendance.fields.overtime')],
        ['label' => __('attendance.fields.missing_checkout')],
    ]">
        @forelse ($paginator as $record)
            @php
                $ot = (int) ($record->overtime_minutes ?? 0);
                $otLabel = $ot > 0 ? sprintf('%d:%02d', intdiv($ot, 60), $ot % 60) : '—';
            @endphp
            <x-ui.table.row>
                <td>{{ $record->employee?->full_name ?? '—' }}</td>
                <td>{{ $record->attendance_date?->format('Y-m-d') }}</td>
                <td>{{ $record->check_in_at?->format('Y-m-d H:i') ?? '—' }}</td>
                <td>{{ $record->check_out_at?->format('Y-m-d H:i') ?? '—' }}</td>
                <td>
                    <span class="badge bg-secondary">{{ __('attendance.status.'.$record->status) }}</span>
                </td>
                <td>
                    @if ($record->status === AttendanceRecordStatus::LATE)
                        <span class="badge bg-warning text-dark">{{ __('common.yes') }}</span>
                    @else
                        <span class="text-muted">—</span>
                    @endif
                </td>
                <td>{{ $otLabel }}</td>
                <td>
                    @if ($record->missing_checkout)
                        <span class="badge bg-danger">{{ __('common.yes') }}</span>
                    @else
                        <span class="text-muted">—</span>
                    @endif
                </td>
            </x-ui.table.row>
        @empty
            <x-ui.table.row>
                <td colspan="8" class="text-center text-muted py-4">
                    {{ __('attendance.empty') }}
                </td>
            </x-ui.table.row>
        @endforelse
    </x-ui.table.table>

    @if ($paginator->hasPages())
        <div class="mt-3 d-flex justify-content-center">
            {{ $paginator->withQueryString()->links() }}
        </div>
    @endif
</x-ui.layout.page>
