@extends('layouts.app')

@section('title', 'Employee Import Result')
@section('heading', 'Employee Import Result')

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

    <div class="mb-4 flex flex-wrap items-center justify-between gap-3">
        <div>
            <h2 class="text-2xl font-semibold text-slate-900">Import #{{ $import->id }}</h2>
            <p class="mt-1 text-sm text-slate-500">{{ $import->original_file_name ?? 'N/A' }}</p>
        </div>
        <a href="{{ route('employees.import.index') }}" 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">Back to Imports</a>
    </div>

    <div class="mb-5 grid gap-3 md:grid-cols-4">
        <x-card class="p-4"><p class="text-xs text-slate-500">Status</p><p class="text-lg font-semibold text-slate-900">{{ ucfirst($import->status) }}</p></x-card>
        <x-card class="p-4"><p class="text-xs text-slate-500">Total Rows</p><p class="text-lg font-semibold text-slate-900">{{ $import->total_rows }}</p></x-card>
        <x-card class="p-4"><p class="text-xs text-slate-500">Success</p><p class="text-lg font-semibold text-emerald-600">{{ $import->success_rows }}</p></x-card>
        <x-card class="p-4"><p class="text-xs text-slate-500">Failed</p><p class="text-lg font-semibold text-red-600">{{ $import->failed_rows }}</p></x-card>
    </div>

    <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">Row</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">Message</th>
                </tr>
            </x-slot>
            @forelse($import->rows as $row)
                <tr class="hover:bg-slate-50">
                    <td class="px-4 py-3 text-sm text-slate-600">{{ $row->row_number }}</td>
                    <td class="px-4 py-3 text-sm text-slate-600">{{ ucfirst($row->status) }}</td>
                    <td class="px-4 py-3 text-sm text-slate-600">{{ $row->error_message ?: 'Created successfully.' }}</td>
                </tr>
            @empty
                <tr>
                    <td colspan="3" class="px-4 py-8 text-center text-sm text-slate-500">No row results found yet.</td>
                </tr>
            @endforelse
        </x-table>
    </x-card>
@endsection