@extends('layouts.app')

@section('title', 'Attendance Import')
@section('heading', 'Attendance Import')

@section('content')
    @include('attendance.top-submenu')

    <div class="mb-4 flex flex-row gap-2 lg:items-center justify-between">
        <div>
            <h2 class="text-2xl font-semibold text-slate-900">Import Attendance</h2>
            <p class="mt-1 text-sm text-slate-500">Upload a CSV to preview and import attendance records.</p>
        </div>
        <a href="{{ route('attendance.import.template') }}" class="inline-flex items-center rounded-lg border border-slate-300 bg-white px-4 py-2 text-sm font-medium text-slate-700 hover:bg-slate-50">
            Download CSV Template
        </a>
    </div>

    <x-card class="mb-5 p-4">
        <form action="{{ route('attendance.import.store') }}" method="POST" enctype="multipart/form-data" class="grid gap-3 md:grid-cols-[1fr_auto] md:items-end align-center">
            @csrf
            <div>
                <label class="mb-1 block text-sm font-medium text-slate-700">CSV File</label>
                <input type="file" name="file" accept=".csv,.txt" class="mt-1 block w-full text-sm text-slate-500 file:mr-4 file:rounded-lg file:border-0 file:bg-slate-100 file:px-4 file:py-2 file:text-sm file:font-medium file:text-slate-700 hover:file:bg-slate-200">
                @error('file')
                    <p class="mt-1 text-xs text-red-600">{{ $message }}</p>
                @enderror
                <p class="mt-1 text-xs text-slate-500">Up to 5MB. Required columns: employee_code, attendance_date, check_in_time, check_out_time, attendance_status.</p>
            </div>
            <button type="submit" class="self-center inline-flex items-center rounded-lg bg-teal-700 px-4 py-2 text-sm font-medium text-white hover:bg-teal-600">Upload &amp; Preview</button>
        </form>
    </x-card>

    <x-card class="p-0 overflow-hidden">
        <x-table>
            <x-slot name="head">
                <tr>
                    <th class="px-4 py-3 text-left text-xs font-medium uppercase text-slate-500">Date</th>
                    <th class="px-4 py-3 text-left text-xs font-medium uppercase text-slate-500">File</th>
                    <th class="px-4 py-3 text-left text-xs font-medium uppercase text-slate-500">User</th>
                    <th class="px-4 py-3 text-left text-xs font-medium uppercase text-slate-500">Status</th>
                    <th class="px-4 py-3 text-left text-xs font-medium uppercase text-slate-500">Result</th>
                    <th class="px-4 py-3 text-right text-xs font-medium uppercase text-slate-500">Actions</th>
                </tr>
            </x-slot>
            @forelse($imports as $import)
                <tr class="hover:bg-slate-50">
                    <td class="px-4 py-3 text-sm text-slate-600">{{ $import->created_at?->format('d M Y H:i') }}</td>
                    <td class="px-4 py-3 text-sm text-slate-900">{{ $import->original_file_name ?? 'N/A' }}</td>
                    <td class="px-4 py-3 text-sm text-slate-600">{{ $import->creator?->name ?? 'N/A' }}</td>
                    <td class="px-4 py-3 text-sm text-slate-600">{{ ucfirst($import->status) }}</td>
                    <td class="px-4 py-3 text-sm text-slate-600">
                        {{ $import->success_rows }}/{{ $import->total_rows }}
                        @if($import->duplicate_rows)
                            <span class="text-amber-600">({{ $import->duplicate_rows }} dup)</span>
                        @endif
                    </td>
                    <td class="px-4 py-3 text-right text-sm">
                        @if($import->status === 'preview')
                            <a href="{{ route('attendance.import.preview', $import) }}" class="text-slate-600 hover:text-slate-900">Preview</a>
                        @else
                            <a href="{{ route('attendance.import.show', $import) }}" class="btn-icon-action btn-icon-action--view" title="View" aria-label="View"><i class="bi bi-eye"></i></a>
                        @endif
                    </td>
                </tr>
            @empty
                <tr>
                    <td colspan="6" class="px-4 py-8 text-center text-sm text-slate-500">No imports yet.</td>
                </tr>
            @endforelse
        </x-table>
    </x-card>

    <div class="mt-4">{{ $imports->links() }}</div>
@endsection