@extends('layouts.branch')

@section('title', "Modify Visit Record")
@section('header', "Modify Visit Record")

@section('content')
<div class="space-y-6" x-data="opdEditForm()">
    @include('partials.branch._breadcrumbs', [
        'breadcrumbs' => [
            ['name' => 'Registration Directory', 'url' => route('branch.patients.index')],
            ['name' => "OPD Check-in Log", 'url' => route('branch.registrations.index')],
            ['name' => "Edit Record: " . $opdRegistration->opd_number, 'url' => '#']
        ]
    ])

    <!-- Header Summary -->
    <div class="flex flex-col md:flex-row md:items-center justify-between gap-8 bg-white p-10 rounded-[45px] shadow-sm border border-slate-100 italic relative overflow-hidden group">
        <div class="relative z-10 flex items-center gap-6">
            <div class="h-20 w-20 bg-slate-900 text-white rounded-[28px] flex items-center justify-center text-2xl font-black shadow-2xl shadow-slate-200 overflow-hidden">
                 @if($opdRegistration->patient?->photo_path)
                    <img src="{{ asset('storage/' . $opdRegistration->patient->photo_path) }}" class="h-full w-full object-cover">
                @else
                    {{ substr($opdRegistration->full_name, 0, 1) }}
                @endif
            </div>
            <div>
                <h2 class="text-4xl font-black text-slate-800 tracking-tighter uppercase leading-none">{{ $opdRegistration->full_name }}</h2>
                <div class="flex items-center gap-4 mt-3">
                    <span class="text-[10px] font-black px-4 py-1.5 bg-indigo-50 text-indigo-600 rounded-full uppercase tracking-widest">{{ $opdRegistration->opd_number }}</span>
                    <p class="text-[10px] text-slate-400 font-bold tracking-widest uppercase">
                        Master UHID: <span class="text-slate-600">{{ $opdRegistration->uhid }}</span>
                    </p>
                </div>
            </div>
        </div>
        
        <div class="flex items-center gap-4 relative z-10">
            <div class="text-right">
                <p class="text-[10px] text-slate-400 font-black uppercase tracking-widest mb-1">Registration Date</p>
                <p class="text-sm font-black text-slate-800 uppercase tracking-tight">{{ $opdRegistration->visit_date->format('d M, Y') }}</p>
            </div>
        </div>
        <div class="absolute -top-10 -right-10 w-64 h-64 bg-indigo-50/50 rounded-full blur-3xl opacity-50 group-hover:bg-indigo-100/50 transition-colors"></div>
    </div>

    @if($errors->any())
    <div class="bg-rose-50/80 backdrop-blur-xl border border-rose-100 p-8 rounded-[40px] italic shadow-2xl shadow-rose-100/20 mb-10 relative overflow-hidden">
        <div class="relative z-10">
            <div class="flex items-center gap-5 mb-6">
                <div class="h-14 w-14 bg-rose-600 text-white rounded-[20px] flex items-center justify-center shadow-2xl shadow-rose-200 animate-pulse">
                    <svg class="h-7 w-7" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"/></svg>
                </div>
                <div>
                    <h5 class="text-xl font-black text-rose-900 uppercase tracking-tighter leading-none">Correction Required</h5>
                    <p class="text-[10px] text-rose-400 font-bold uppercase tracking-[0.2em] mt-2">The following issues prevented saving the record</p>
                </div>
            </div>
            <ul class="space-y-3 ml-20">
                @foreach($errors->all() as $error)
                    <li class="flex items-center gap-3 text-[13px] font-bold text-rose-700 italic">
                        <span class="h-1.5 w-1.5 bg-rose-400 rounded-full"></span>
                        {{ $error }}
                    </li>
                @endforeach
            </ul>
        </div>
    </div>
    @endif

    <form action="{{ route('branch.registrations.update', $opdRegistration->id) }}" method="POST" id="opdUpdateForm" class="grid grid-cols-1 lg:grid-cols-12 gap-8">
        @csrf
        @method('PUT')
        
        <input type="hidden" name="patient_id" x-model="formData.patient_id">
        <input type="hidden" name="uhid" x-model="formData.uhid">
        <input type="hidden" name="charge_id" x-model="formData.charge_id">
        <input type="hidden" name="charge_amount" x-model="formData.charge_amount">
        <input type="hidden" name="full_name" x-model="formData.full_name">
        <input type="hidden" name="gender" x-model="formData.gender">
        <input type="hidden" name="dob" x-model="formData.dob">
        <input type="hidden" name="age" x-model="formData.age">
        <input type="hidden" name="marital_status" x-model="formData.marital_status">
        <input type="hidden" name="guardian_name" x-model="formData.guardian_name">

        <!-- Left Column: Form Sections -->
        <div class="lg:col-span-8 space-y-8">
            
            <!-- Visit Timing -->
            <div class="bg-white p-10 rounded-[45px] shadow-sm border border-slate-100 italic relative overflow-hidden group/section hover:shadow-xl hover:shadow-indigo-50/50 transition-all duration-500">
                <div class="flex items-center gap-5 mb-10">
                    <div class="h-14 w-14 bg-slate-900 text-white rounded-[22px] flex items-center justify-center shadow-2xl shadow-slate-200 group-hover/section:scale-110 group-hover/section:rotate-3 transition-all duration-500">
                        <svg class="h-7 w-7" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
                    </div>
                    <div>
                        <h3 class="text-2xl font-black text-slate-800 uppercase tracking-tighter leading-none">Visit Schedule</h3>
                        <p class="text-[10px] text-slate-400 font-bold uppercase tracking-[0.2em] mt-2">Correct visit timing if processed retrospectively</p>
                    </div>
                </div>

                <div class="grid grid-cols-1 md:grid-cols-2 gap-10">
                    <div class="space-y-3">
                        <label class="text-[11px] font-black text-slate-500 uppercase tracking-[0.2em] px-2 flex items-center gap-2">
                            <span class="h-1.5 w-1.5 bg-indigo-500 rounded-full"></span>
                            Visit Date <span class="text-rose-500">*</span>
                        </label>
                        <input type="date" name="visit_date" x-model="formData.visit_date" @change="checkAvailability()" required
                               class="w-full px-8 py-5 bg-slate-50 border-2 border-slate-50 rounded-[22px] text-sm font-black uppercase tracking-widest focus:ring-4 focus:ring-indigo-50 focus:border-indigo-600 focus:bg-white transition-all outline-none shadow-inner">
                    </div>
                    <div class="space-y-3">
                        <label class="text-[11px] font-black text-slate-500 uppercase tracking-[0.2em] px-2 flex items-center gap-2">
                            <span class="h-1.5 w-1.5 bg-indigo-500 rounded-full"></span>
                            Visit Time <span class="text-rose-500">*</span>
                        </label>
                        <input type="time" name="visit_time" x-model="formData.visit_time" required
                               class="w-full px-8 py-5 bg-slate-50 border-2 border-slate-50 rounded-[22px] text-sm font-black uppercase tracking-widest focus:ring-4 focus:ring-indigo-50 focus:border-indigo-600 focus:bg-white transition-all outline-none shadow-inner">
                    </div>
                </div>
            </div>

            <!-- 2. Contact Information -->
            <div class="bg-white p-10 rounded-[45px] shadow-sm border border-slate-100 italic relative overflow-hidden group/section hover:shadow-xl hover:shadow-emerald-50/50 transition-all duration-500">
                <div class="flex items-center gap-5 mb-10">
                    <div class="h-14 w-14 bg-emerald-600 text-white rounded-[22px] flex items-center justify-center shadow-2xl shadow-emerald-200 group-hover/section:scale-110 group-hover/section:rotate-3 transition-all duration-500">
                        <svg class="h-7 w-7" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" 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.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z"/></svg>
                    </div>
                    <div>
                        <h3 class="text-2xl font-black text-slate-800 uppercase tracking-tighter leading-none">Contact & Reach</h3>
                        <p class="text-[10px] text-slate-400 font-bold uppercase tracking-[0.2em] mt-2">Verify mobile and emergency linkage</p>
                    </div>
                </div>

                <div class="grid grid-cols-1 md:grid-cols-2 gap-10">
                    <div class="space-y-3">
                        <label class="text-[11px] font-black text-slate-500 uppercase tracking-[0.2em] px-2 flex items-center gap-2">
                            <span class="h-1.5 w-1.5 bg-emerald-500 rounded-full"></span>
                            Mobile Number <span class="text-rose-500">*</span>
                        </label>
                        <input type="text" name="mobile_number" x-model="formData.mobile_number" required
                               class="w-full px-8 py-5 bg-slate-50 border-2 border-slate-50 rounded-[22px] text-sm font-black uppercase tracking-widest focus:ring-4 focus:ring-emerald-50 focus:border-emerald-600 focus:bg-white transition-all outline-none shadow-inner">
                    </div>

                    <div class="space-y-3">
                        <label class="text-[11px] font-black text-slate-500 uppercase tracking-[0.2em] px-2 flex items-center gap-2">
                            <span class="h-1.5 w-1.5 bg-emerald-500 rounded-full"></span>
                            Email Address
                        </label>
                        <input type="email" name="email" x-model="formData.email"
                               class="w-full px-8 py-5 bg-slate-50 border-2 border-slate-50 rounded-[22px] text-sm font-black focus:ring-4 focus:ring-emerald-50 focus:border-emerald-600 focus:bg-white transition-all outline-none shadow-inner">
                    </div>

                    <div class="space-y-3 md:col-span-2">
                        <label class="text-[11px] font-black text-slate-500 uppercase tracking-[0.2em] px-2 flex items-center gap-2">
                            <span class="h-1.5 w-1.5 bg-emerald-500 rounded-full"></span>
                            Permanent Address
                        </label>
                        <textarea name="address" x-model="formData.address" rows="2"
                                  class="w-full px-8 py-5 bg-slate-50 border-2 border-slate-50 rounded-[25px] text-sm font-black focus:ring-4 focus:ring-emerald-50 focus:border-emerald-600 focus:bg-white transition-all outline-none shadow-inner"></textarea>
                    </div>

                    <div class="bg-indigo-50/30 p-8 rounded-[35px] border border-indigo-50 md:col-span-2 grid grid-cols-1 md:grid-cols-2 gap-10 shadow-inner">
                        <div class="space-y-3">
                            <label class="text-[10px] font-black text-indigo-600 uppercase tracking-[0.2em] px-2">Emergency Name</label>
                            <input type="text" name="emergency_contact_name" x-model="formData.emergency_contact_name"
                                   class="w-full px-6 py-4 bg-white border border-indigo-100 rounded-2xl text-sm font-black focus:ring-4 focus:ring-white transition-all outline-none">
                        </div>
                        <div class="space-y-3">
                            <label class="text-[10px] font-black text-indigo-600 uppercase tracking-[0.2em] px-2">Emergency Phone</label>
                            <input type="text" name="emergency_contact_phone" x-model="formData.emergency_contact_phone"
                                   class="w-full px-6 py-4 bg-white border border-indigo-100 rounded-2xl text-sm font-black focus:ring-4 focus:ring-white transition-all outline-none">
                        </div>
                    </div>
                </div>
            </div>

            <!-- 3. Visit & Clinical Details -->
            <div class="bg-white p-10 rounded-[45px] shadow-sm border border-slate-100 italic relative overflow-hidden group/section hover:shadow-xl hover:shadow-rose-50/50 transition-all duration-500">
                <div class="flex items-center gap-5 mb-10">
                    <div class="h-14 w-14 bg-rose-600 text-white rounded-[22px] flex items-center justify-center shadow-2xl shadow-rose-200 group-hover/section:scale-110 group-hover/section:rotate-3 transition-all duration-500">
                        <svg class="h-7 w-7" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-3 7h3m-3 4h3m-6-4h.01M9 16h.01"/></svg>
                    </div>
                    <div>
                        <h3 class="text-2xl font-black text-slate-800 uppercase tracking-tighter leading-none">Clinical Vitals</h3>
                        <p class="text-[10px] text-slate-400 font-bold uppercase tracking-[0.2em] mt-2">Correct medical snapshots or chief complaints</p>
                    </div>
                </div>

                <div class="grid grid-cols-1 md:grid-cols-2 gap-10">
                    <div class="space-y-3">
                        <label class="text-[11px] font-black text-slate-500 uppercase tracking-[0.2em] px-2 flex items-center gap-2">
                            <span class="h-1.5 w-1.5 bg-rose-500 rounded-full"></span>
                            Medical Department <span class="text-rose-500">*</span>
                        </label>
                        <select name="department_id" x-model="formData.department_id" @change="fetchDoctors()" required
                                class="w-full px-8 py-5 bg-slate-50 border-2 border-slate-50 rounded-[22px] text-sm font-black uppercase tracking-widest focus:ring-4 focus:ring-rose-50 focus:border-rose-600 focus:bg-white transition-all outline-none shadow-inner appearance-none">
                            <option value="">Select Department</option>
                            @foreach($departments as $dept)
                                <option value="{{ $dept->id }}">{{ $dept->name }}</option>
                            @endforeach
                        </select>
                    </div>

                    <div class="space-y-3">
                        <label class="text-[11px] font-black text-slate-500 uppercase tracking-[0.2em] px-2 flex items-center gap-2">
                            <span class="h-1.5 w-1.5 bg-rose-500 rounded-full"></span>
                            Consulting Specialist <span class="text-rose-500">*</span>
                        </label>
                        <select name="doctor_id" x-model="formData.doctor_id" @change="fetchCharge(); checkAvailability();" required
                                class="w-full px-8 py-5 bg-slate-50 border-2 border-slate-50 rounded-[22px] text-sm font-black uppercase tracking-widest focus:ring-4 focus:ring-rose-50 focus:border-rose-600 focus:bg-white transition-all outline-none shadow-inner appearance-none"
                                :class="!isAvailable ? 'border-rose-500 ring-4 ring-rose-50 bg-rose-50' : ''">
                            <option value="">Select Doctor</option>
                            <template x-for="dr in filteredDoctors" :key="dr.id">
                                <option :value="dr.id" x-text="dr.name" :selected="dr.id == formData.doctor_id"></option>
                            </template>
                        </select>
                        <!-- Availability Warning -->
                        <div x-show="!isAvailable" x-transition class="mt-4 p-4 bg-rose-600 text-white rounded-[22px] flex items-center gap-4 shadow-xl shadow-rose-200 italic">
                            <svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
                            <p class="text-[10px] font-black uppercase tracking-widest" x-text="availabilityMessage"></p>
                        </div>
                    </div>

                    <div class="space-y-3">
                        <label class="text-[11px] font-black text-slate-500 uppercase tracking-[0.2em] px-2 flex items-center gap-2">
                            <span class="h-1.5 w-1.5 bg-rose-500 rounded-full"></span>
                            Visit Type <span class="text-rose-500">*</span>
                        </label>
                        <select name="visit_type" x-model="formData.visit_type" @change="checkAvailability();" required
                                class="w-full px-8 py-5 bg-slate-50 border-2 border-slate-50 rounded-[22px] text-sm font-black uppercase tracking-widest focus:ring-4 focus:ring-rose-50 focus:border-rose-600 focus:bg-white transition-all outline-none shadow-inner appearance-none">
                            @foreach($visitTypes as $type)
                                <option value="{{ $type }}">{{ $type }}</option>
                            @endforeach
                        </select>
                    </div>

                    <div class="space-y-3">
                        <label class="text-[11px] font-black text-slate-500 uppercase tracking-[0.2em] px-2 flex items-center gap-2">
                            <span class="h-1.5 w-1.5 bg-rose-500 rounded-full"></span>
                            Admission Nature
                        </label>
                        <div class="flex items-center gap-4 bg-slate-50 p-2.5 rounded-[22px] border-2 border-slate-50 shadow-inner">
                            <button type="button" @click="formData.visit_nature = 'first_visit'" 
                                    :class="formData.visit_nature === 'first_visit' ? 'bg-rose-600 text-white shadow-xl shadow-rose-200' : 'text-slate-400 hover:bg-white hover:text-slate-600'"
                                    class="flex-1 py-3.5 rounded-[18px] text-[10px] font-black uppercase tracking-widest transition-all">New Case</button>
                            <button type="button" @click="formData.visit_nature = 'revisit'" 
                                    :class="formData.visit_nature === 'revisit' ? 'bg-rose-600 text-white shadow-xl shadow-rose-200' : 'text-slate-400 hover:bg-white hover:text-slate-600'"
                                    class="flex-1 py-3.5 rounded-[18px] text-[10px] font-black uppercase tracking-widest transition-all">Follow-up</button>
                        </div>
                        <input type="hidden" name="visit_nature" x-model="formData.visit_nature">
                    </div>

                    <div class="space-y-3 md:col-span-2">
                        <label class="text-[11px] font-black text-slate-500 uppercase tracking-[0.2em] px-2 flex items-center gap-2">
                            <span class="h-1.5 w-1.5 bg-rose-500 rounded-full"></span>
                            Chief Complaint
                        </label>
                        <input type="text" name="chief_complaint" x-model="formData.chief_complaint"
                               class="w-full px-8 py-5 bg-slate-50 border-2 border-slate-50 rounded-[22px] text-sm font-black focus:ring-4 focus:ring-rose-50 focus:border-rose-600 focus:bg-white transition-all outline-none shadow-inner" placeholder="Reason for visit">
                    </div>

                    <div class="md:col-span-2 grid grid-cols-2 md:grid-cols-4 gap-8 bg-slate-900 p-8 rounded-[40px] shadow-2xl shadow-slate-200 mt-2 italic border-b-8 border-rose-600">
                        <div class="space-y-2">
                            <label class="text-[9px] font-black text-slate-500 uppercase tracking-[0.2em] px-1">Weight <span class="text-slate-700">(kg)</span></label>
                            <input type="number" step="0.01" name="weight" x-model="formData.weight" class="w-full px-5 py-4 bg-white/5 border-none rounded-2xl text-sm font-black text-white focus:ring-4 focus:ring-rose-600 transition-all outline-none tabular-nums shadow-inner">
                        </div>
                        <div class="space-y-2">
                            <label class="text-[9px] font-black text-slate-500 uppercase tracking-[0.2em] px-1">Height <span class="text-slate-700">(cm)</span></label>
                            <input type="number" step="0.01" name="height" x-model="formData.height" class="w-full px-5 py-4 bg-white/5 border-none rounded-2xl text-sm font-black text-white focus:ring-4 focus:ring-rose-600 transition-all outline-none tabular-nums shadow-inner">
                        </div>
                        <div class="space-y-2">
                            <label class="text-[9px] font-black text-slate-500 uppercase tracking-[0.2em] px-1">BP <span class="text-slate-700">(mmHg)</span></label>
                            <input type="text" name="bp" x-model="formData.bp" class="w-full px-5 py-4 bg-white/5 border-none rounded-2xl text-sm font-black text-white focus:ring-4 focus:ring-rose-600 transition-all outline-none tabular-nums shadow-inner" placeholder="120/80">
                        </div>
                        <div class="space-y-2">
                            <label class="text-[9px] font-black text-slate-500 uppercase tracking-[0.2em] px-1">Temp <span class="text-slate-700">(°C)</span></label>
                            <input type="number" step="0.1" name="temperature" x-model="formData.temperature" class="w-full px-5 py-4 bg-white/5 border-none rounded-2xl text-sm font-black text-white focus:ring-4 focus:ring-rose-600 transition-all outline-none tabular-nums shadow-inner">
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Right Column: Summary & Actions -->
        <div class="lg:col-span-4">
            <div class="sticky top-28 space-y-6">
                <!-- Revenue Card -->
                <div class="bg-slate-900 rounded-[40px] p-8 text-white shadow-2xl shadow-slate-200 overflow-hidden relative italic">
                    <div class="relative z-10">
                        <h4 class="text-xs font-black text-indigo-400 uppercase tracking-[0.3em] mb-8">Financial Overview</h4>
                        
                        <div class="space-y-8">
                            <div class="space-y-3">
                                <label class="text-[11px] font-black text-slate-400 uppercase tracking-[0.2em] px-2">Settlement Mode <span class="text-rose-500">*</span></label>
                                <select name="payment_mode" x-model="formData.payment_mode" required
                                        class="w-full px-6 py-4 bg-white/5 border border-white/10 rounded-2xl text-xs font-black uppercase tracking-widest focus:ring-2 focus:ring-indigo-500 outline-none text-white appearance-none">
                                    <option value="Cash">Cash Currency</option>
                                    <option value="UPI / QR">Digital UPI / QR</option>
                                    <option value="Card">Credit / Debit Card</option>
                                    <option value="Net Banking">Online Net Banking</option>
                                    <option value="Insurance / Credit">Insurance / Credit</option>
                                </select>
                            </div>

                            <div class="space-y-6 pt-6 border-t border-white/5">
                                <label class="flex items-center gap-5 p-5 bg-white/5 border border-white/10 rounded-[25px] cursor-pointer hover:bg-white/10 transition-all group/toggle">
                                    <div class="relative flex items-center justify-center h-8 w-8">
                                        <input type="checkbox" name="is_complimentary" x-model="formData.is_complimentary" value="1"
                                               class="peer h-8 w-8 opacity-0 absolute cursor-pointer">
                                        <div class="h-8 w-8 border-2 border-white/20 rounded-xl peer-checked:bg-emerald-600 peer-checked:border-emerald-600 transition-all shadow-sm"></div>
                                        <svg class="h-5 w-5 text-white absolute scale-0 peer-checked:scale-100 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="4" d="M5 13l4 4L19 7"/></svg>
                                    </div>
                                    <div>
                                        <span class="block text-[11px] font-black text-slate-200 uppercase tracking-[0.2em]">Complementary Visit</span>
                                        <span class="block text-[9px] text-slate-500 font-bold uppercase tracking-widest mt-1">Waive all consultation charges</span>
                                    </div>
                                </label>

                                <div x-show="formData.is_complimentary" x-transition class="space-y-3">
                                    <label class="text-[10px] font-black text-emerald-400 uppercase tracking-widest px-2">Waiver Justification <span class="text-rose-500">*</span></label>
                                    <textarea name="complimentary_remarks" x-model="formData.complimentary_remarks" :required="formData.is_complimentary"
                                              class="w-full px-6 py-4 bg-white/5 border border-white/10 rounded-2xl text-xs font-black focus:ring-2 focus:ring-emerald-500 outline-none text-white min-h-[100px]"></textarea>
                                </div>

                                <div x-show="!formData.is_complimentary" x-transition class="space-y-3">
                                    <label class="text-[10px] font-black text-slate-400 uppercase tracking-widest px-2">Direct Discount (₹)</label>
                                    <div class="relative">
                                        <span class="absolute left-6 top-1/2 -translate-y-1/2 text-slate-500 font-black text-sm italic">₹</span>
                                        <input type="number" step="0.01" name="discount_amount" x-model="formData.discount_amount"
                                               class="w-full pl-12 pr-6 py-4 bg-white/5 border border-white/10 rounded-2xl text-lg font-black tabular-nums focus:ring-2 focus:ring-indigo-500 outline-none text-white appearance-none"
                                               placeholder="0.00">
                                    </div>
                                </div>
                            </div>

                            <div class="space-y-6 pt-6 border-t border-white/5">
                                <div class="space-y-3">
                                    <label class="text-[10px] font-black text-slate-400 uppercase tracking-widest px-2">Patient Class</label>
                                    <select name="patient_category" x-model="formData.patient_category"
                                            class="w-full px-6 py-4 bg-white/5 border border-white/10 rounded-2xl text-xs font-black uppercase tracking-widest focus:ring-2 focus:ring-indigo-500 outline-none text-white appearance-none">
                                        @foreach($categories as $cat)
                                            <option value="{{ $cat }}">{{ $cat }}</option>
                                        @endforeach
                                    </select>
                                </div>

                                <div x-show="formData.patient_category === 'Insurance'" x-transition class="space-y-4">
                                    <div class="space-y-2">
                                        <label class="text-[9px] font-black text-slate-400 uppercase tracking-widest px-2 text-inherit">Insurance Provider</label>
                                        <input type="text" name="insurance_provider" x-model="formData.insurance_provider"
                                               class="w-full px-6 py-3 bg-white/5 border border-white/10 rounded-xl text-xs font-black text-white" placeholder="Provider Name">
                                    </div>
                                    <div class="space-y-2">
                                        <label class="text-[9px] font-black text-slate-400 uppercase tracking-widest px-2 text-inherit">Policy Number</label>
                                        <input type="text" name="policy_id" x-model="formData.policy_id"
                                               class="w-full px-6 py-3 bg-white/5 border border-white/10 rounded-xl text-xs font-black text-white" placeholder="ID / TPA">
                                    </div>
                                </div>

                                <div class="space-y-2">
                                    <label class="text-[9px] font-black text-slate-400 uppercase tracking-widest px-2 text-inherit">National ID / Aadhar</label>
                                    <input type="text" name="national_id" x-model="formData.national_id"
                                           class="w-full px-6 py-4 bg-white/5 border border-white/10 rounded-2xl text-xs font-black text-white" placeholder="12-digit UID">
                                </div>
                            </div>

                            <div class="bg-white/5 rounded-3xl p-6 border border-white/10">
                                <div class="flex justify-between items-center mb-2">
                                    <p class="text-[10px] font-black text-slate-400 uppercase tracking-widest">Base Fee</p>
                                    <p class="text-sm font-bold text-slate-300 tabular-nums" x-text="'₹' + Number(formData.charge_amount).toFixed(2)"></p>
                                </div>
                                <div class="flex justify-between items-center">
                                    <p class="text-[10px] font-black text-indigo-400 uppercase tracking-widest">Final Payable</p>
                                    <p class="text-3xl font-black text-indigo-400 tabular-nums" x-text="'₹' + Number(totalPayable).toFixed(2)"></p>
                                </div>
                            </div>
                        </div>

                        <div class="mt-10 space-y-4">
                            <button type="submit" form="opdUpdateForm"
                                    :disabled="!isAvailable"
                                    :class="!isAvailable ? 'opacity-50 cursor-not-allowed bg-slate-700 shadow-none' : 'bg-indigo-600 hover:bg-white hover:text-indigo-600 shadow-xl shadow-indigo-900/50'"
                                    class="w-full py-5 rounded-3xl font-black uppercase tracking-widest text-xs transition-all flex items-center justify-center gap-2 group">
                                <template x-if="isAvailable">
                                    <svg class="h-4 w-4 transition-transform group-hover:scale-125" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
                                </template>
                                <template x-if="!isAvailable">
                                    <svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
                                </template>
                                <span x-text="isAvailable ? 'Apply Changes' : 'Doctor Unavailable'"></span>
                            </button>
                            <a href="{{ route('branch.registrations.index') }}" class="block w-full text-center py-4 text-[10px] font-black text-slate-500 uppercase tracking-widest hover:text-white transition-colors">Discard Edits</a>
                        </div>
                    </div>
                    <div class="absolute -bottom-12 -right-12 w-48 h-48 bg-indigo-600/20 rounded-full blur-3xl"></div>
                </div>

                <div class="bg-indigo-50/50 border border-indigo-100 rounded-[2.5rem] p-6 italic">
                    <p class="text-[10px] font-black text-indigo-900 uppercase tracking-widest mb-1">Administrative Audit</p>
                    <p class="text-[11px] text-indigo-700 leading-relaxed">
                        Modifying this record will be logged in the system audit trail. Ensure all financial corrections match the physical day-sheet.
                    </p>
                </div>
            </div>
        </div>
    </form>
</div>

@push('scripts')
<script>
function opdEditForm() {
    return {
        filteredDoctors: @json($doctors->where('department_id', $opdRegistration->doctor?->department_id)->values()),
        selectedDoctorName: '{{ $opdRegistration->doctor?->name }}',
        isAvailable: true,
        availabilityMessage: '',
        
        formData: {
            patient_id: @json(old('patient_id')) || '{{ $opdRegistration->patient_id }}',
            uhid: @json(old('uhid')) || '{{ $opdRegistration->uhid }}',
            full_name: @json(old('full_name')) || '{{ $opdRegistration->full_name }}',
            gender: @json(old('gender')) || '{{ $opdRegistration->gender }}',
            dob: @json(old('dob')) || '{{ $opdRegistration->dob?->format('Y-m-d') }}',
            age: @json(old('age')) || '{{ $opdRegistration->age }}',
            marital_status: @json(old('marital_status')) || '{{ $opdRegistration->marital_status }}',
            guardian_name: @json(old('guardian_name')) || '{{ $opdRegistration->guardian_name }}',
            mobile_number: @json(old('mobile_number')) || '{{ $opdRegistration->mobile_number }}',
            email: @json(old('email')) || '{{ $opdRegistration->email }}',
            address: @json(old('address')) || '{{ $opdRegistration->address }}',
            emergency_contact_name: @json(old('emergency_contact_name')) || '{{ $opdRegistration->emergency_contact_name }}',
            emergency_contact_phone: @json(old('emergency_contact_phone')) || '{{ $opdRegistration->emergency_contact_phone }}',
            department_id: @json(old('department_id')) || '{{ $opdRegistration->doctor?->department_id }}',
            doctor_id: @json(old('doctor_id')) || '{{ $opdRegistration->doctor_id }}',
            charge_id: @json(old('charge_id')) || '{{ $opdRegistration->charge_id }}',
            visit_nature: @json(old('visit_nature')) || '{{ $opdRegistration->visit_nature }}',
            visit_type: @json(old('visit_type')) || '{{ $opdRegistration->visit_type }}',
            chief_complaint: @json(old('chief_complaint')) || `{!! addslashes($opdRegistration->chief_complaint) !!}`,
            weight: @json(old('weight')) || '{{ $opdRegistration->weight }}',
            height: @json(old('height')) || '{{ $opdRegistration->height }}',
            bp: @json(old('bp')) || '{{ $opdRegistration->bp }}',
            temperature: @json(old('temperature')) || '{{ $opdRegistration->temperature }}',
            patient_category: @json(old('patient_category')) || '{{ $opdRegistration->patient_category }}',
            insurance_provider: @json(old('insurance_provider')) || '{{ $opdRegistration->insurance_provider }}',
            policy_id: @json(old('policy_id')) || '{{ $opdRegistration->policy_id }}',
            national_id: @json(old('national_id')) || '{{ $opdRegistration->national_id }}',
            visit_date: @json(old('visit_date')) || '{{ $opdRegistration->visit_date->format('Y-m-d') }}',
            visit_time: @json(old('visit_time')) || '{{ $opdRegistration->visit_time }}',
            charge_amount: @json(old('charge_amount')) || '{{ $opdRegistration->charge_amount }}',
            payment_mode: @json(old('payment_mode')) || '{{ $opdRegistration->payment_mode }}',
            is_complimentary: {{ old('is_complimentary') !== null ? (old('is_complimentary') ? 'true' : 'false') : ($opdRegistration->is_complimentary ? 'true' : 'false') }},
            complimentary_remarks: @json(old('complimentary_remarks')) || `{!! addslashes($opdRegistration->complimentary_remarks) !!}`,
            discount_amount: @json(old('discount_amount')) || '{{ $opdRegistration->discount_amount }}',
            remarks: @json(old('remarks')) || '{{ $opdRegistration->remarks }}'
        },

        get totalPayable() {
            if (this.formData.is_complimentary) return 0;
            const base = Number(this.formData.charge_amount) || 0;
            const discount = Number(this.formData.discount_amount) || 0;
            return Math.max(0, base - discount);
        },

        init() {
            this.checkAvailability();
        },

        async fetchDoctors(isInitial = false) {
            if (!this.formData.department_id) {
                this.filteredDoctors = [];
                return;
            }
            try {
                const response = await fetch(`{{ route('branch.opd-charges.get-doctors') }}?department_id=${this.formData.department_id}`);
                this.filteredDoctors = await response.json();
                
                if (!isInitial) {
                    this.formData.doctor_id = '';
                    this.formData.charge_amount = '0.00';
                }
            } catch (error) {
                console.error('Failed to fetch doctors', error);
            }
        },

        async fetchCharge() {
            if (!this.formData.doctor_id) {
                this.formData.charge_amount = '0.00';
                return;
            }
            
            try {
                const response = await fetch(`{{ route('branch.opd-charges.get-charge') }}?doctor_id=${this.formData.doctor_id}&department_id=${this.formData.department_id}`);
                const charge = await response.json();
                if (charge) {
                    this.formData.charge_id = charge.id;
                    this.formData.charge_amount = charge.charge_amount;
                } else {
                    this.formData.charge_id = '';
                    this.formData.charge_amount = '0.00';
                }
            } catch (error) {
                console.error('Failed to fetch charge', error);
            }
        },

        async checkAvailability() {
            if (!this.formData.visit_date) {
                this.isAvailable = true;
                this.availabilityMessage = '';
                return;
            }

            try {
                const response = await fetch(`{{ route('branch.registrations.check-availability') }}?doctor_id=${this.formData.doctor_id}&date=${this.formData.visit_date}&visit_type=${this.formData.visit_type}`);
                const data = await response.json();
                this.isAvailable = data.available;
                this.availabilityMessage = data.message || '';
            } catch (error) {
                console.error('Failed to check availability', error);
                this.isAvailable = true;
                this.availabilityMessage = '';
            }
        }
    }
}
</script>
@endpush
@endsection