@php
    $breadcrumbs = [
        ['label' => __('common.home'), 'url' => route('dashboard.index')],
        ['label' => __('common.hr')],
        ['label' => __('attendance.title'), 'url' => route('hr.attendance.index')],
        ['label' => __('attendance.monthly.title')],
    ];
@endphp

<x-ui.layout.page
    :title="__('attendance.monthly.title')"
    :subtitle="__('attendance.monthly.subtitle')"
    page-icon="fe fe-bar-chart-2"
    :breadcrumbs="$breadcrumbs"
>
    <x-slot:actions>
        <x-ui.buttons.secondary :href="route('hr.attendance.index')" icon="fe fe-arrow-left">
            {{ __('attendance.title') }}
        </x-ui.buttons.secondary>
    </x-slot:actions>

    <div class="card mb-4">
        <div class="card-body">
            <form method="GET" action="{{ route('hr.attendance.monthly.index') }}" class="row g-3 align-items-end">
                <div class="col-md-4">
                    <x-ui.form.input
                        name="month"
                        type="month"
                        :label="__('attendance.monthly.fields.month')"
                        :value="$month"
                        required
                    />
                </div>
                <div class="col-md-5">
                    <x-ui.form.search-select
                        name="employee_id"
                        :label="__('attendance.fields.employee')"
                        lookup="employees"
                        :value="$employeeId"
                        :placeholder="__('common.search')"
                    />
                </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>

    @if ($summary === null)
        <x-ui.empty-state :title="__('attendance.monthly.select_employee')" />
    @else
        <div class="card">
            <div class="card-body">
                <h5 class="mb-3">{{ $employee?->full_name }} — {{ $month }}</h5>
                <div class="row g-3">
                    @foreach ([
                        'present_days' => __('attendance.monthly.metrics.present'),
                        'absent_days' => __('attendance.monthly.metrics.absent'),
                        'late_days' => __('attendance.monthly.metrics.late'),
                        'leave_days' => __('attendance.monthly.metrics.leave'),
                        'overtime_hours' => __('attendance.monthly.metrics.overtime'),
                        'expected_working_days' => __('attendance.monthly.metrics.expected'),
                        'calendar_non_working_days' => __('attendance.monthly.metrics.non_working'),
                        'missing_checkouts' => __('attendance.monthly.metrics.missing_checkouts'),
                    ] as $key => $label)
                        <div class="col-md-3">
                            <div class="border rounded p-3 h-100">
                                <div class="text-muted small">{{ $label }}</div>
                                <div class="fs-4 fw-semibold">{{ $summary[$key] ?? 0 }}</div>
                            </div>
                        </div>
                    @endforeach
                </div>
            </div>
        </div>
    @endif
</x-ui.layout.page>
