@extends('layouts.app')

@section('content')
<div class="max-w-7xl mx-auto px-4 py-8">
    <div class="mb-6 flex items-center space-x-3">
        <a href="{{ route('admin.employees.import') }}" class="text-slate-400 hover:text-blue-600 transition-colors">
            <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18"></path></svg>
        </a>
        <h2 class="text-2xl font-bold text-slate-800 tracking-tight">Pratinjau Data Import</h2>
    </div>

    <div class="bg-amber-50 border-l-4 border-amber-500 p-4 mb-6 rounded-r-lg">
        <div class="flex">
            <div class="flex-shrink-0">
                <svg class="h-5 w-5 text-amber-400" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z" clip-rule="evenodd" /></svg>
            </div>
            <div class="ml-3">
                <p class="text-sm text-amber-800 font-semibold">Tinjau data Anda!</p>
                <p class="text-sm text-amber-700 mt-1">Data di bawah ini belum tersimpan. Pastikan nama kolom dan isi data sudah sesuai. Baris yang NIK, Nama Depan, atau Email-nya kosong akan dilewati (diabaikan).</p>
            </div>
        </div>
    </div>

    <div class="bg-white rounded-2xl shadow-sm border border-slate-200 overflow-hidden mb-6">
        <div class="overflow-x-auto">
            <table class="w-full text-left text-sm whitespace-nowrap">
                <thead class="bg-slate-50 text-slate-500 text-xs uppercase tracking-wider border-b border-slate-200">
                    <tr>
                        <th class="px-6 py-4 font-semibold">NIK</th>
                        <th class="px-6 py-4 font-semibold">Nama Depan</th>
                        <th class="px-6 py-4 font-semibold">Nama Belakang</th>
                        <th class="px-6 py-4 font-semibold">Email</th>
                        <th class="px-6 py-4 font-semibold">Telepon</th>
                        <th class="px-6 py-4 font-semibold">ID Dept</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-slate-100 text-slate-700">
                    @foreach($rows as $index => $row)
                        @if($index < 20) <!-- Batasi preview 20 baris saja agar browser tidak berat -->
                        <tr class="hover:bg-slate-50">
                            <td class="px-6 py-3 font-mono font-bold">{{ $row['nik'] ?? '-' }}</td>
                            <td class="px-6 py-3">{{ $row['nama_depan'] ?? '-' }}</td>
                            <td class="px-6 py-3">{{ $row['nama_belakang'] ?? '-' }}</td>
                            <td class="px-6 py-3 text-blue-600">{{ $row['email'] ?? '-' }}</td>
                            <td class="px-6 py-3">{{ $row['telepon'] ?? '-' }}</td>
                            <td class="px-6 py-3">{{ $row['department_id'] ?? '-' }}</td>
                        </tr>
                        @endif
                    @endforeach
                </tbody>
            </table>
        </div>
        @if(count($rows) > 20)
            <div class="p-4 text-center text-sm text-slate-500 border-t border-slate-100 bg-slate-50">
                ... Menampilkan 20 baris pertama dari total <b>{{ count($rows) }}</b> baris data.
            </div>
        @endif
    </div>

    <!-- Tombol Aksi -->
    <div class="flex items-center justify-end space-x-4">
        <a href="{{ route('admin.employees.import') }}" class="px-6 py-2.5 text-sm font-semibold text-slate-600 hover:bg-slate-100 rounded-xl transition-colors">Batal & Kembali</a>
        <form action="{{ route('admin.employees.import.process') }}" method="POST">
            @csrf
            <button type="submit" class="px-6 py-2.5 text-sm font-semibold text-white bg-emerald-600 hover:bg-emerald-700 rounded-xl shadow-md transition-all flex items-center">
                <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
                Konfirmasi & Simpan Permanen
            </button>
        </form>
    </div>
</div>
@endsection