<x-ui.layout.page :title="__('attendance.import.title')" page-icon="fe fe-upload">
    <x-ui.operational.index-shell>
        <x-slot:toolbar>
            <form method="POST" action="{{ route('hr.attendance.import.preview') }}" enctype="multipart/form-data" class="row g-2">
                @csrf
                <div class="col-md-8">
                    <input class="form-control" type="file" name="file" accept=".csv,text/csv" required>
                    <small class="text-muted">{{ __('attendance.import.help') }}</small>
                </div>
                <div class="col-md-4">
                    <x-ui.buttons.primary type="submit">{{ __('attendance.import.preview') }}</x-ui.buttons.primary>
                </div>
            </form>
        </x-slot:toolbar>

        @isset($import)
            <div class="mb-3">
                {{ __('attendance.import.summary', [
                    'total' => $import->total_rows,
                    'valid' => $import->valid_rows,
                    'errors' => $import->error_rows,
                ]) }}
            </div>
            <x-ui.table.table :columns="[
                ['label' => '#'],
                ['label' => __('employees.fields.employee_code')],
                ['label' => __('attendance.fields.date')],
                ['label' => __('attendance.fields.check_in')],
                ['label' => __('attendance.fields.check_out')],
                ['label' => __('common.status')],
            ]">
                @foreach ($import->rows as $row)
                    <x-ui.table.row>
                        <td>{{ $row->row_number }}</td>
                        <td>{{ $row->employee_code }}</td>
                        <td>{{ $row->attendance_date?->format('Y-m-d') }}</td>
                        <td>{{ $row->check_in }}</td>
                        <td>{{ $row->check_out }}</td>
                        <td>
                            @if ($row->is_valid)
                                {{ __('common.valid') }}
                            @else
                                {{ implode(', ', $row->errors ?? []) }}
                            @endif
                        </td>
                    </x-ui.table.row>
                @endforeach
            </x-ui.table.table>
            @if ($import->status === 'preview' && $import->error_rows === 0)
                <form method="POST" action="{{ route('hr.attendance.import.commit', $import) }}" class="mt-3">
                    @csrf
                    <x-ui.buttons.primary type="submit">{{ __('attendance.import.commit') }}</x-ui.buttons.primary>
                </form>
            @endif
        @endisset
    </x-ui.operational.index-shell>
</x-ui.layout.page>
