<x-app-layout>
    <div class="flex">
        <!-- Sidebar Navigation (Matching Record Index) -->
        <div class="fixed left-0 top-0 h-full w-64 bg-slate-900 p-6 flex flex-col z-50 shadow-2xl">
            <div class="mb-10 flex items-center gap-3">
                <div class="w-8 h-8 bg-indigo-600 rounded-xl flex items-center justify-center">
                    <x-application-logo class="w-5 h-5 fill-current text-white" />
                </div>
                <span class="text-white font-black tracking-tighter text-lg italic uppercase">LEASING<span class="text-indigo-500">PRO</span></span>
            </div>
            <nav class="flex-1 space-y-2">
                <a href="{{ route('leasing.dashboard') }}" class="flex items-center gap-3 px-4 py-3 text-slate-400 hover:text-white hover:bg-slate-800 rounded-xl text-sm font-bold transition duration-300">
                    {{ __('Dashboard') }}
                </a>
                <a href="{{ route('leasing.profile.edit') }}" class="flex items-center gap-3 px-4 py-3 text-slate-400 hover:text-white hover:bg-slate-800 rounded-xl text-sm font-bold transition duration-300">
                    {{ __('Profil Perusahaan') }}
                </a>
                <a href="{{ route('leasing.branches.index') }}" class="flex items-center gap-3 px-4 py-3 text-slate-400 hover:text-white hover:bg-slate-800 rounded-xl text-sm font-bold transition duration-300">
                   {{ __('Kelola Cabang') }}
                </a>
                <a href="{{ route('leasing.records.index') }}" class="flex items-center gap-3 px-4 py-3 text-slate-400 hover:text-white hover:bg-slate-800 rounded-xl text-sm font-bold transition duration-300">
                    {{ __('Data Kendaraan') }}
                </a>
                <div class="pt-6 border-t border-slate-800 mt-6">
                    <a href="{{ route('leasing.uploads.create') }}" class="flex items-center gap-3 px-4 py-3 text-slate-400 hover:text-white hover:bg-slate-800 rounded-xl text-sm font-bold transition duration-300">
                        {{ __('Impor Data CSV') }}
                    </a>
                    <a href="{{ route('leasing.uploads.index') }}" class="flex items-center gap-3 px-4 py-3 bg-indigo-600 text-white rounded-xl text-sm font-bold transition duration-300 shadow-lg shadow-indigo-900/50">
                        {{ __('Riwayat Upload') }}
                    </a>
                </div>
            </nav>
        </div>
        
        <div class="flex-1 ml-64 p-8 bg-slate-50 min-h-screen">
            <header class="mb-10 flex flex-col md:flex-row md:items-end justify-between gap-6">
                <div>
                    <h2 class="text-3xl font-black text-slate-900 tracking-tight italic uppercase underline decoration-indigo-500 decoration-4 underline-offset-8">Hasil Impor Data</h2>
                    <p class="text-slate-400 text-sm font-bold uppercase tracking-widest mt-4 text-[10px]">Ringkasan pemrosesan file batch: <span class="text-indigo-600">{{ $upload->filename }}</span></p>
                </div>
                <div class="flex gap-4">
                    <a href="{{ route('leasing.uploads.index') }}" class="px-8 py-3 bg-white border border-slate-200 text-slate-900 font-black rounded-2xl text-[10px] uppercase tracking-widest hover:bg-slate-50 transition shadow-sm">
                        Kembali ke Riwayat
                    </a>
                    <a href="{{ route('leasing.records.index', ['search' => $upload->filename]) }}" class="px-8 py-3 bg-indigo-600 text-white font-black rounded-2xl text-[10px] uppercase tracking-widest shadow-xl shadow-indigo-100 hover:bg-slate-900 transition flex items-center justify-center">
                        Lihat Data Terkait
                    </a>
                </div>
            </header>

            <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-10">
                <div class="bg-white p-8 rounded-[40px] shadow-sm border border-slate-100 relative overflow-hidden group">
                    <div class="text-[10px] uppercase font-black tracking-widest text-slate-400 mb-2">Status Pemrosesan</div>
                    <div class="text-3xl font-black {{ $upload->status === 'completed' ? 'text-emerald-600' : 'text-red-500' }} uppercase italic">{{ $upload->status === 'completed' ? 'BERHASIL' : 'GAGAL' }}</div>
                    <div class="absolute -right-4 -bottom-4 opacity-5 group-hover:opacity-10 transition duration-500">
                        <svg class="w-24 h-24" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path></svg>
                    </div>
                </div>
                <div class="bg-white p-8 rounded-[40px] shadow-sm border border-slate-100">
                    <div class="text-[10px] uppercase font-black tracking-widest text-slate-400 mb-2">Total Unit Diproses</div>
                    <div class="text-3xl font-black text-slate-900 tracking-tighter italic">{{ number_format($upload->row_count) }}</div>
                </div>
                <div class="bg-white p-8 rounded-[40px] shadow-sm border border-slate-100">
                    <div class="text-[10px] uppercase font-black tracking-widest text-slate-400 mb-2">Data Baru/Update</div>
                    <div class="text-3xl font-black text-indigo-600 tracking-tighter italic">{{ $records->total() }}</div>
                </div>
            </div>

            <div class="bg-white rounded-[40px] shadow-sm border border-slate-100 overflow-hidden">
                <table class="w-full text-left text-sm">
                    <thead class="bg-slate-900 text-slate-400 text-[10px] font-black uppercase tracking-widest">
                        <tr>
                            <th class="px-8 py-6">Nopol</th>
                            <th class="px-8 py-6">Model & Kendaraan</th>
                            <th class="px-8 py-6">Cabang Sumber</th>
                            <th class="px-8 py-6">Saldo Terakhir</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-slate-50">
                        @forelse($records as $record)
                            <tr class="hover:bg-slate-50 transition duration-300">
                                <td class="px-8 py-8 font-black text-slate-900 text-lg uppercase italic tracking-tight">{{ $record->nopol }}</td>
                                <td class="px-8 py-8">
                                    <div class="text-[10px] font-black text-slate-400 uppercase tracking-widest">{{ $record->kendaraan }}</div>
                                    <div class="font-bold text-slate-700 text-sm">{{ $record->model }}</div>
                                </td>
                                <td class="px-8 py-8">
                                    <span class="px-3 py-1 bg-slate-100 rounded-lg text-[10px] font-black uppercase tracking-widest">{{ $record->branch->name ?? 'N/A' }}</span>
                                </td>
                                <td class="px-8 py-8">
                                    <div class="text-lg font-black text-indigo-600 tracking-tighter italic">Rp {{ number_format($record->sisa_saldo, 0, ',', '.') }}</div>
                                </td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="4" class="px-8 py-32 text-center text-slate-300 italic">Data tidak ditemukan dalam batch ini.</td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
                <div class="p-10 border-t border-slate-50">
                    {{ $records->links() }}
                </div>
            </div>
        </div>
    </div>
</x-app-layout>
