<x-app-layout>
    <div class="py-12 px-6 lg:px-12 min-h-screen">
        <div class="max-w-3xl mx-auto space-y-12">
            <!-- Phase 15: Structural Header -->
            <header class="space-y-4 border-l-4 border-white/20 pl-6 animate-in fade-in slide-in-from-top-4 duration-1000">
                <h2 class="font-display text-4xl font-black text-white tracking-tighter italic uppercase leading-none text-indigo-400">Modifikasi Jaringan</h2>
                <p class="text-slate-500 text-[10px] font-black uppercase tracking-[0.4em] italic leading-none">Pembaruan Parameter Operasional Cabang: {{ $branch->branch_name }}</p>
            </header>

            <!-- Deployment Interface Card -->
            <div class="relative group animate-in fade-in zoom-in duration-700">
                <div class="absolute -inset-1 bg-gradient-to-b from-indigo-500/20 to-transparent rounded-[40px] blur-2xl opacity-50"></div>
                <div class="relative bg-white/5 border border-white/5 rounded-[40px] p-12 shadow-3xl backdrop-blur-3xl overflow-hidden">
                    <!-- Matrix Decorative Element -->
                    <div class="absolute top-0 right-0 w-64 h-64 bg-indigo-500/5 blur-3xl rounded-full -mr-32 -mt-32"></div>
                    
                    <form action="{{ route('leasing.branches.update', $branch) }}" method="POST" class="space-y-10 relative z-10">
                        @csrf
                        @method('PUT')
                        
                        <div class="grid gap-10">
                            <div class="space-y-4">
                                <label class="text-[10px] font-black uppercase tracking-[0.3em] text-slate-500 italic ml-2">Nomenklatur Cabang</label>
                                <x-text-input name="branch_name" required placeholder="NAMA CABANG" value="{{ old('branch_name', $branch->branch_name) }}" autocomplete="off" />
                            </div>

                            <div class="space-y-4">
                                <label class="text-[10px] font-black uppercase tracking-[0.3em] text-slate-500 italic ml-2">Saluran Komunikasi</label>
                                <x-text-input name="phone" placeholder="NOMOR TELEPON AKTIF" value="{{ old('phone', $branch->phone) }}" autocomplete="off" />
                            </div>

                            <div class="space-y-4">
                                <label class="text-[10px] font-black uppercase tracking-[0.3em] text-slate-500 italic ml-2">Koordinat Fisik / Alamat</label>
                                <textarea name="address" rows="4" required placeholder="ALAMAT LENGKAP OPERASIONAL CABANG..." 
                                    class="w-full bg-white/5 border-white/10 focus:border-indigo-500 focus:ring-0 rounded-3xl shadow-2xl text-white font-bold placeholder:text-slate-700 transition-all duration-500 px-8 py-6 italic text-sm">{{ old('address', $branch->address) }}</textarea>
                            </div>
                        </div>

                        <div class="flex flex-col sm:flex-row gap-6 pt-10 border-t border-white/5">
                            <a href="{{ route('leasing.branches.index') }}" 
                                class="flex-1 h-16 flex items-center justify-center text-[10px] font-black uppercase tracking-widest text-slate-500 hover:text-white transition-all italic underline decoration-slate-800 underline-offset-8">
                                Batalkan Prosedur
                            </a>
                            <button type="submit" 
                                class="flex-[2] h-16 bg-white text-slate-950 rounded-2xl font-black text-[11px] uppercase tracking-widest hover:bg-indigo-600 hover:text-white transition-all transform active:scale-95 shadow-3xl italic">
                                Simpan Perubahan Parameter
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</x-app-layout>
