<x-app-layout>
    <div class="flex">
        <!-- Sidebar Navigation (Consistent) -->
        <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 bg-indigo-600 text-white rounded-xl text-sm font-bold transition duration-300 shadow-lg shadow-indigo-900/50">
                        {{ __('Impor Data CSV') }}
                    </a>
                    <a href="{{ route('leasing.uploads.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">
                        {{ __('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">Impor Data Massal</h2>
                    <p class="text-slate-400 text-sm font-bold uppercase tracking-widest mt-4 text-[10px]">Unggah ribuan data kendaraan secara instan menggunakan file CSV.</p>
                </div>
                <a href="{{ route('leasing.uploads.template') }}" class="px-8 py-3 bg-slate-900 text-white font-black rounded-2xl text-[10px] uppercase tracking-widest shadow-xl shadow-slate-200 hover:bg-slate-800 transition flex items-center justify-center gap-2">
                    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a2 2 0 002 2h12a2 2 0 002-2v-1m-4-4l-4 4m0 0l-4-4m4 4V4"></path></svg>
                    Unduh Template CSV
                </a>
            </header>

            <div class="max-w-3xl bg-white p-16 rounded-[48px] shadow-sm border border-slate-100 text-center mx-auto mt-10">
                <div class="w-24 h-24 bg-indigo-50 text-indigo-600 rounded-full flex items-center justify-center mx-auto mb-10 shadow-inner">
                    <svg class="w-12 h-12" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12"></path></svg>
                </div>
                <h3 class="text-2xl font-black text-slate-900 mb-3 italic uppercase italic">Pilih File Sumber</h3>
                <p class="text-slate-400 text-sm mb-12 font-medium">Harap pastikan file Anda mengikuti format kolom yang benar agar dapat diproses sistem.</p>

                <form action="{{ route('leasing.uploads.store') }}" method="POST" enctype="multipart/form-data" class="space-y-8">
                    @csrf
                    <div class="group border-2 border-dashed border-slate-200 p-12 rounded-[32px] bg-slate-50 hover:border-indigo-400 hover:bg-indigo-50/30 transition-all duration-300 cursor-pointer relative shadow-inner">
                        <input type="file" name="file" id="csv_file" required class="absolute inset-0 opacity-0 cursor-pointer" accept=".csv" onchange="document.getElementById('file_name_display').innerText = this.files[0].name">
                        <div class="flex flex-col items-center gap-2">
                            <div id="file_name_display" class="text-slate-900 font-black text-lg uppercase italic tracking-tight">Klik untuk browse file...</div>
                            <div class="text-[10px] font-black text-slate-400 uppercase tracking-widest italic group-hover:text-indigo-600 transition">Hanya mendukung format .CSV</div>
                        </div>
                    </div>
                    
                    @error('file')
                        <p class="text-red-500 text-[10px] font-black uppercase tracking-widest italic">{{ $message }}</p>
                    @enderror

                    <div class="pt-6">
                        <button type="submit" class="w-full py-5 bg-indigo-600 text-white font-black uppercase tracking-widest rounded-3xl shadow-2xl shadow-indigo-200 hover:bg-slate-900 transition-all duration-500 transform hover:scale-[1.02]">
                            Mulai Sinkronisasi Data
                        </button>
                    </div>
                </form>

                <div class="mt-12 p-8 bg-orange-50 rounded-[32px] border border-orange-100 text-left">
                    <h4 class="text-orange-800 font-black text-xs uppercase tracking-widest mb-3 flex items-center gap-2">
                        <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clip-rule="evenodd"></path></svg>
                        Instruksi Penting:
                    </h4>
                    <ul class="text-[10px] text-orange-700/80 space-y-2 font-bold uppercase tracking-tight">
                        <li>• Kolom 'CAB' (Cabang) akan otomatis dibuat jika belum ada di sistem.</li>
                        <li>• NOPOL duplikat akan memperbarui (update) data lama yang sudah ada.</li>
                        <li>• Pastikan format tanggal menggunakan YYYY-MM-DD (contoh: 2024-01-25).</li>
                        <li>• SISA_SALDO harus berupa angka tanpa simbol mata uang (contoh: 15000000).</li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</x-app-layout>
