<x-app-layout>
    <div class="py-12 px-6 lg:px-12 min-h-screen bg-slate-950">
        <div class="max-w-4xl mx-auto space-y-12 animate-in fade-in duration-1000">
            <!-- Phase 15: Strategic Plan Modification 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]">Modifikasi Plan</h2>
                    <p class="text-slate-500 text-[10px] font-black uppercase tracking-[0.4em] italic leading-none mt-6">Intelligence Monetization Logic — SKU Update v2.5</p>
                </div>
                <a href="{{ route('admin.plans.index') }}" class="text-[10px] font-black text-slate-500 hover:text-white uppercase tracking-widest transition-colors italic">← Batalkan Perubahan</a>
            </header>

            <form action="{{ route('admin.plans.update', $plan) }}" method="POST" class="space-y-12">
                @csrf
                @method('PUT')
                
                <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] overflow-hidden">
                    <div class="grid lg:grid-cols-2 gap-12">
                        <!-- Primary Identity -->
                        <div class="space-y-8">
                            <div class="space-y-3">
                                <x-input-label for="name" :value="__('Nomenklatur Plan')" />
                                <x-text-input name="name" :value="$plan->name" required placeholder="Contoh: PAKET BRONZE (30 HARI)" class="block w-full font-display font-black text-xl italic tracking-tight" />
                            </div>

                            <div class="grid grid-cols-2 gap-8">
                                <div class="space-y-3 opacity-50 pointer-events-none">
                                    <x-input-label :value="__('Akses Role Tier (Locked)')" />
                                    <div class="h-14 w-full bg-white/5 border border-white/10 rounded-2xl px-6 flex items-center text-[11px] font-black text-slate-500 uppercase italic">
                                        {{ $plan->role_type }} ACCESS
                                    </div>
                                    <input type="hidden" name="role_type" value="{{ $plan->role_type }}">
                                </div>
                                <div class="space-y-3">
                                    <x-input-label for="duration_days" :value="__('Siklus Validitas (Hari)')" />
                                    <x-text-input type="number" name="duration_days" :value="$plan->duration_days" required class="block w-full font-black text-indigo-400 tabular-nums" />
                                </div>
                            </div>

                            <div class="space-y-3">
                                <x-input-label for="price" :value="__('Valuasi Komersial (Rp)')" />
                                <div class="relative group/price">
                                    <div class="absolute left-6 inset-y-0 flex items-center pointer-events-none">
                                        <span class="text-indigo-500 font-display font-black text-xl italic">Rp</span>
                                    </div>
                                    <input type="number" name="price" :value="floor($plan->price)" required placeholder="0" 
                                        class="h-20 w-full bg-white/5 border border-white/10 rounded-[30px] pl-20 pr-8 text-4xl font-display font-black text-white focus:ring-4 focus:ring-indigo-500/20 focus:border-indigo-500 transition-all tabular-nums tracking-tighter italic">
                                </div>
                            </div>
                        </div>

                        <!-- Features & Status -->
                        <div class="space-y-8">
                            <div class="space-y-3">
                                <x-input-label for="features" :value="__('Intelligence Features (Comma Separated)')" />
                                <textarea name="features" rows="6" required placeholder="Akses Data Nasional, Impor Excel, Export PDF, Prioritas Support"
                                    class="w-full bg-white/5 border border-white/10 rounded-[32px] p-8 text-[11px] font-bold text-white shadow-inner focus:ring-0 focus:border-indigo-500 transition-all placeholder:text-white/20 leading-relaxed italic">{{ implode(', ', $plan->features_json ?? []) }}</textarea>
                            </div>

                            <div class="p-8 bg-slate-950/50 rounded-[32px] border border-white/5 flex items-center justify-between group/status">
                                <div class="space-y-1">
                                    <h4 class="text-[10px] font-black text-white uppercase tracking-widest italic leading-none">Status Operasional</h4>
                                    <p class="text-[8px] font-black text-slate-500 uppercase tracking-widest italic leading-none">Aktifkan atau nonaktifkan modul SKU ini</p>
                                </div>
                                <label class="relative inline-flex items-center cursor-pointer group/toggle">
                                    <input type="checkbox" name="is_active" value="1" {{ $plan->is_active ? 'checked' : '' }} class="sr-only peer">
                                    <div class="w-14 h-8 bg-white/10 peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full after:content-[''] after:absolute after:top-[4px] after:left-[4px] after:bg-white after:border-white after:border after:rounded-full after:h-6 after:w-6 after:transition-all peer-checked:bg-indigo-600 shadow-2xl"></div>
                                </label>
                            </div>
                        </div>
                    </div>

                    <div class="pt-12 border-t border-white/5 flex flex-col md:flex-row justify-end items-center gap-10">
                        <p class="text-[9px] font-black text-slate-500 uppercase tracking-[0.4em] italic text-center md:text-right max-w-xs">Pembaruan parameter plan akan segera berdampak pada sistem komersial global.</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">
                            Update Subscription Plan →
                        </button>
                    </div>
                </div>
            </form>
        </div>
    </div>
</x-app-layout>
