<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 animate-in fade-in duration-1000">
            <!-- Phase 15: Unit Mutation Header -->
            <header class="flex flex-col md:flex-row md:items-end justify-between gap-10">
                <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 underline decoration-indigo-500/50 decoration-8 underline-offset-[12px]">Mutasi Data Kendaraan</h2>
                    <p class="text-slate-500 text-[10px] font-black uppercase tracking-[0.4em] italic leading-none mt-6">Secure Record Mutation — Asset Lifecycle Management v2.5</p>
                </div>
                <a href="{{ route('leasing.records.index') }}" class="text-[10px] font-black text-slate-500 hover:text-white uppercase tracking-widest transition-colors italic">← Batalkan Prosedur</a>
            </header>

            <form action="{{ route('leasing.records.update', $record) }}" method="POST" class="space-y-12">
                @csrf
                @method('PUT')
                
                <div class="grid lg:grid-cols-2 gap-12">
                    <!-- Unit Infrastructure -->
                    <div class="bg-white/5 p-10 rounded-[48px] border border-white/5 shadow-3xl space-y-10 group transition-all duration-700 hover:bg-white/[0.07]">
                        <h4 class="text-[10px] font-black text-indigo-500 uppercase tracking-[0.3em] italic border-b border-white/5 pb-6">Arsitektur Unit & Cabang</h4>
                        
                        <div class="grid grid-cols-2 gap-8">
                            <div class="space-y-3">
                                <x-input-label for="tgl_data" :value="__('Timestamp Data')" />
                                <input type="date" name="tgl_data" value="{{ $record->tgl_data->format('Y-m-d') }}" required 
                                    class="h-14 w-full bg-white/5 border border-white/10 rounded-2xl px-6 text-[11px] font-black text-white focus:ring-0 focus:border-indigo-500 transition-all uppercase italic">
                            </div>
                            <div class="space-y-3">
                                <x-input-label for="branch_id" :value="__('Command Center (Cabang)')" />
                                <select name="branch_id" required 
                                    class="h-14 w-full bg-white/5 border border-white/10 rounded-2xl px-6 text-[11px] font-black text-white focus:ring-0 focus:border-indigo-500 transition-all uppercase italic">
                                    @foreach($branches as $branch)
                                        <option value="{{ $branch->id }}" {{ $record->branch_id == $branch->id ? 'selected' : '' }} class="bg-slate-900">{{ $branch->branch_name }}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>

                        <div class="space-y-3">
                            <x-input-label for="nopol" :value="__('Signature Polisi (NOPOL)')" />
                            <x-text-input name="nopol" value="{{ $record->nopol }}" required class="block w-full font-display font-black text-2xl tracking-tighter italic" />
                        </div>

                        <div class="grid grid-cols-2 gap-8">
                            <div class="space-y-3">
                                <x-input-label for="rangka" :value="__('Nomor Rangka (VIN)')" />
                                <x-text-input name="rangka" value="{{ $record->rangka }}" required class="block w-full font-mono text-[11px] tracking-widest uppercase" />
                            </div>
                            <div class="space-y-3">
                                <x-input-label for="mesin" :value="__('Nomor Mesin (ENG)')" />
                                <x-text-input name="mesin" value="{{ $record->mesin }}" required class="block w-full font-mono text-[11px] tracking-widest uppercase" />
                            </div>
                        </div>

                        <div class="grid grid-cols-2 gap-8">
                            <div class="space-y-3">
                                <x-input-label for="kendaraan" :value="__('Merek Kendaraan')" />
                                <x-text-input name="kendaraan" value="{{ $record->kendaraan }}" required class="block w-full" />
                            </div>
                            <div class="space-y-3">
                                <x-input-label for="model" :value="__('Varian / Tahun')" />
                                <x-text-input name="model" value="{{ $record->model }}" class="block w-full" />
                            </div>
                        </div>
                    </div>

                    <!-- Personal Entity (Sensitive) -->
                    <div class="bg-slate-950 p-10 rounded-[48px] border border-white/5 shadow-3xl space-y-10 group transition-all duration-700 hover:bg-slate-900/50">
                        <h4 class="text-[10px] font-black text-rose-500 uppercase tracking-[0.3em] italic border-b border-white/5 pb-6">Personal Identification Archive</h4>
                        
                        <div class="space-y-3">
                            <x-input-label for="customer_name" :value="__('Nama Subjek Nasabah')" />
                            <x-text-input name="customer_name" value="{{ $record->customer_name }}" class="block w-full font-display font-black text-[15px] italic tracking-tight" />
                        </div>

                        <div class="space-y-3">
                            <x-input-label for="customer_phone" :value="__('Koordinat Komunikasi (HP)')" />
                            <x-text-input name="customer_phone" value="{{ $record->customer_phone }}" placeholder="+62 000-0000-0000" class="block w-full font-bold tracking-widest" />
                        </div>

                        <div class="space-y-3">
                            <x-input-label for="customer_address" :value="__('Geospasial Residence')" />
                            <textarea name="customer_address" rows="3" 
                                class="w-full bg-white/5 border border-white/10 rounded-2xl p-6 text-[11px] font-bold text-white shadow-inner focus:ring-0 focus:border-indigo-500 transition-all placeholder:text-white/20 leading-relaxed italic">{{ $record->customer_address }}</textarea>
                        </div>

                        <div class="grid grid-cols-2 gap-8">
                            <div class="space-y-3">
                                <x-input-label for="overdue_days" :value="__('Siklus Overdue (Hari)')" />
                                <x-text-input type="number" name="overdue_days" value="{{ $record->overdue_days }}" class="block w-full text-rose-500 tabular-nums font-black" />
                            </div>
                            <div class="space-y-3">
                                <x-input-label for="sisa_saldo" :value="__('Residual Balance (Rp)')" />
                                <x-text-input type="number" name="sisa_saldo" value="{{ $record->sisa_saldo }}" class="block w-full text-indigo-400 tabular-nums font-black" />
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Status & Countermeasures -->
                <div class="bg-white/5 p-12 rounded-[56px] border border-white/5 shadow-3xl space-y-12 group transition-all duration-700 hover:bg-white/[0.07]">
                        <h4 class="text-[10px] font-black text-indigo-500 uppercase tracking-[0.3em] italic border-b border-white/5 pb-6 text-center">Protocol Status & Instructions</h4>
                        
                        <div class="grid md:grid-cols-2 gap-12 items-end">
                            <div class="space-y-3">
                                <x-input-label for="record_status" :value="__('Akses Status Global')" />
                                <select name="record_status" 
                                    class="h-14 w-full bg-white/5 border border-white/10 rounded-2xl px-6 text-[11px] font-black text-white focus:ring-0 focus:border-indigo-500 transition-all uppercase italic">
                                    <option value="active" {{ $record->record_status == 'active' ? 'selected' : '' }} class="bg-slate-900">OPERATIONAL ACCESS (ACTIVE)</option>
                                    <option value="closed" {{ $record->record_status == 'closed' ? 'selected' : '' }} class="bg-slate-900">TERMINATED (CLOSED)</option>
                                </select>
                            </div>
                            <div class="pb-3 pl-2">
                                <label class="flex items-center gap-4 cursor-pointer group/legal">
                                    <div class="relative">
                                        <input type="checkbox" name="legal_flag" value="1" {{ $record->legal_flag ? 'checked' : '' }} 
                                            class="w-8 h-8 rounded-xl bg-white/5 border-white/10 text-rose-600 focus:ring-0 transition-all cursor-pointer">
                                        <svg class="absolute inset-0 m-auto w-5 h-5 text-white pointer-events-none opacity-0 group-has-[:checked]/legal:opacity-100 transition-opacity" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="4" d="M5 13l4 4L19 7"></path></svg>
                                    </div>
                                    <span class="text-rose-500 font-black text-[10px] uppercase tracking-[0.3em] italic group-hover/legal:text-white transition-colors">Priority: Legal Case / Lapor Polisi</span>
                                </label>
                            </div>
                        </div>

                        <div class="grid md:grid-cols-2 gap-12">
                            <div class="space-y-4">
                                <x-input-label for="member_warning" :value="__('Intelligence Warning (High Priority)')" />
                                <div class="relative">
                                    <textarea name="member_warning" rows="3" 
                                        class="w-full bg-rose-500/5 border border-rose-500/20 rounded-[32px] p-8 text-[11px] font-bold text-rose-400 shadow-inner focus:ring-0 focus:border-rose-500 transition-all placeholder:text-rose-500/30 leading-relaxed italic">{{ $record->member_warning }}</textarea>
                                    <div class="absolute top-4 right-6 w-2 h-2 bg-rose-500 rounded-full animate-pulse"></div>
                                </div>
                            </div>
                            <div class="space-y-4">
                                <x-input-label for="member_instruction" :value="__('Countermeasure Protocol (Medium Priority)')" />
                                <div class="relative">
                                    <textarea name="member_instruction" rows="3" 
                                        class="w-full bg-amber-500/5 border border-amber-500/20 rounded-[32px] p-8 text-[11px] font-bold text-amber-400 shadow-inner focus:ring-0 focus:border-amber-500 transition-all placeholder:text-amber-500/30 leading-relaxed italic">{{ $record->member_instruction }}</textarea>
                                    <div class="absolute top-4 right-6 w-2 h-2 bg-amber-500 rounded-full"></div>
                                </div>
                            </div>
                        </div>

                        <div class="space-y-4">
                            <x-input-label for="internal_note" :value="__('Internal Operational Briefing')" />
                            <textarea name="internal_note" rows="3" 
                                class="w-full bg-white/[0.02] border border-white/5 rounded-[32px] p-8 text-xs font-medium text-slate-400 shadow-inner focus:ring-0 focus:border-indigo-500 transition-all italic leading-relaxed">{{ $record->internal_note }}</textarea>
                        </div>
                    </div>

                <div class="flex flex-col md:flex-row justify-end items-center gap-10 py-12 border-t border-white/5">
                    <p class="text-[9px] font-black text-slate-500 uppercase tracking-[0.4em] italic text-center md:text-right max-w-xs">Pastikan koordinat data telah diverifikasi sebelum finalisasi sistem.</p>
                    <button type="submit" class="h-20 px-16 bg-white text-slate-950 font-display font-black uppercase tracking-[0.3em] rounded-[24px] shadow-3xl hover:bg-indigo-600 hover:text-white transition-all duration-700 transform active:scale-95 italic">
                        Finalize Data Mutation →
                    </button>
                </div>
            </form>
        </div>
    </div>
</x-app-layout>
