<x-app-layout>
    <div class="py-12 px-6 lg:px-12 min-h-screen">
        <div class="max-w-7xl mx-auto space-y-12">
            <!-- Phase 15: Regional Network Header -->
            <header class="flex flex-col md:flex-row md:items-end justify-between gap-10 animate-in fade-in slide-in-from-top-4 duration-1000">
                <div class="space-y-4 border-l-4 border-white/20 pl-6">
                    <h2 class="font-display text-4xl font-black text-white tracking-tighter italic uppercase leading-none">Mapping Jaringan Cabang</h2>
                    <p class="text-slate-500 text-[10px] font-black uppercase tracking-[0.4em] italic leading-none">Pengaturan Poin Operasional Terdesentralisasi — {{ auth()->user()->leasing_profile->company_name }}</p>
                </div>
                <a href="{{ route('leasing.branches.create') }}" class="h-14 px-10 bg-white text-slate-950 rounded-2xl font-black text-[10px] uppercase tracking-widest hover:bg-indigo-600 hover:text-white transition-all transform active:scale-95 shadow-2xl italic flex items-center gap-3">
                    <span class="text-lg font-light text-indigo-500 group-hover:text-white transition-colors">+</span> Tambah Cabang Baru
                </a>
            </header>

            <!-- Regional Asset Matrix Grid -->
            <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
                @forelse($branches as $branch)
                    <div class="relative group">
                        <div class="absolute -inset-1 bg-gradient-to-b from-indigo-500/10 to-transparent rounded-[40px] blur-xl opacity-0 group-hover:opacity-100 transition duration-700"></div>
                        <div class="relative bg-white/5 border border-white/5 rounded-[40px] p-10 hover:bg-white/10 transition-all duration-500 shadow-3xl overflow-hidden h-full flex flex-col justify-between">
                            <!-- Matrix Decorative Element -->
                            <div class="absolute top-0 right-0 w-24 h-24 bg-white/5 blur-2xl rounded-full -mr-12 -mt-12 group-hover:bg-indigo-500/10 transition-colors"></div>
                            
                            <div class="relative z-10">
                                <div class="w-14 h-14 bg-white/5 border border-white/10 text-indigo-400 rounded-2xl flex items-center justify-center font-black text-2xl mb-8 group-hover:bg-indigo-600 group-hover:text-white group-hover:scale-110 transition-all duration-500 shadow-2xl">
                                    {{ substr($branch->branch_name, 0, 1) }}
                                </div>
                                <h3 class="font-display font-black text-white text-2xl mb-2 tracking-tighter italic uppercase leading-none group-hover:text-indigo-400 transition-colors">{{ $branch->branch_name }}</h3>
                                <div class="flex items-center gap-3 text-slate-500 text-[10px] font-black uppercase tracking-widest italic mb-6">
                                    <svg class="w-3 h-3 text-slate-700" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.948V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z"></path></svg>
                                    {{ $branch->phone ?: 'Comm-Line Inactive' }}
                                </div>
                                <p class="text-[11px] font-bold text-slate-600 italic leading-relaxed mb-10 group-hover:text-slate-400 transition-colors">{{ $branch->address ?: 'Physical Coordinates Undefined' }}</p>
                            </div>
                            
                            <div class="relative z-10 flex gap-6 pt-8 border-t border-white/5 mt-auto">
                                <a href="{{ route('leasing.branches.edit', $branch) }}" class="text-[10px] font-black uppercase tracking-widest text-indigo-400 hover:text-white transition-colors italic">Modifikasi</a>
                                <form action="{{ route('leasing.branches.destroy', $branch) }}" method="POST" onsubmit="return confirm('Terminasi koordinat cabang?')">
                                    @csrf
                                    @method('DELETE')
                                    <button type="submit" class="text-[10px] font-black uppercase tracking-widest text-rose-500/50 hover:text-rose-500 transition-colors italic">Terminasi</button>
                                </form>
                            </div>
                        </div>
                    </div>
                @empty
                    <div class="col-span-full py-40 text-center">
                        <div class="w-24 h-24 bg-white/5 rounded-[40px] flex items-center justify-center mx-auto mb-10 border border-white/10 shadow-3xl">
                            <svg class="w-12 h-12 text-slate-800" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"></path></svg>
                        </div>
                        <h4 class="text-3xl font-display font-black text-white uppercase italic tracking-tighter mb-4 leading-none">Jaringan Tidak Terdeteksi</h4>
                        <p class="text-slate-700 text-[10px] font-black uppercase tracking-[0.3em] max-w-sm mx-auto leading-relaxed italic">Belum ada titik operasional regional yang terdaftar dalam arsitektur jaringan Anda.</p>
                    </div>
                @endforelse
            </div>
        </div>
    </div>
</x-app-layout>
