@extends('layouts.branch')

@section('title', "New OPD Registration")
@section('header', "New OPD Registration")

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

    @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 text-rose-900 focus:outline-none">
            <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">Registration Error</h5>
                    <p class="text-[10px] text-rose-400 font-bold uppercase tracking-[0.2em] mt-2 text-inherit">Please correct the following fields to proceed</p>
                </div>
            </div>
            <ul class="space-y-3 ml-20 list-none p-0">
                @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 class="absolute -top-10 -right-10 w-40 h-40 bg-rose-100/50 rounded-full blur-3xl"></div>
    </div>
    @endif

    <!-- Header: Dynamic Patient Identification -->
    <div class="relative z-40">
        <!-- Transition: No Patient Selected -->
        <div x-show="!formData.patient_id" x-transition:enter="transition ease-out duration-300 transform" x-transition:enter-start="opacity-0 -translate-y-4" x-transition:enter-end="opacity-100 translate-y-0"
             class="bg-white p-12 rounded-[50px] shadow-2xl shadow-indigo-100 border border-slate-100 italic relative text-center max-w-4xl mx-auto mb-10">
            
            <div class="relative z-10 flex flex-col items-center">
                <div class="h-16 w-16 bg-slate-900 text-white rounded-[1.5rem] flex items-center justify-center mb-6 shadow-xl shadow-slate-200">
                    <svg class="h-8 w-8" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/></svg>
                </div>
                <h2 class="text-4xl font-black text-slate-800 tracking-tighter uppercase leading-none mb-4">Identify Patient</h2>
                <p class="text-[11px] text-slate-400 font-bold tracking-widest uppercase mb-10 max-w-sm mx-auto leading-relaxed">Search existing records by Mobile or UHID to begin the OPD check-in process.</p>
                
                <div class="relative w-full max-w-2xl group">
                    <div class="absolute inset-y-0 left-6 flex items-center pointer-events-none">
                        <svg class="h-5 w-5 text-slate-300 group-focus-within:text-indigo-600 transition-colors" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/></svg>
                    </div>
                    <input type="text" 
                           x-model="searchQuery" 
                           @input.debounce.300ms="searchPatient()"
                           placeholder="Mobile / UHID Number..." 
                           class="w-full pl-16 pr-6 py-6 bg-slate-50 border-2 border-slate-100 rounded-[2rem] text-sm font-black uppercase tracking-widest focus:ring-4 focus:ring-indigo-100 focus:border-indigo-600 focus:bg-white transition-all outline-none shadow-inner"
                           autofocus @keydown.enter.prevent="">
                    
                    <!-- Search Results Dropdown -->
                    <div x-show="searchResults.length > 0 || (searchQuery.length >= 3 && searchResults.length === 0 && !isSearching)" 
                         class="absolute top-full left-0 right-0 mt-4 bg-white border border-slate-100 rounded-[2.5rem] shadow-[0_20px_50px_rgba(79,70,229,0.15)] z-50 overflow-hidden"
                         x-transition>
                        
                        <template x-for="patient in searchResults" :key="patient.uhid">
                            <button type="button" @click="selectPatient(patient)" 
                                    class="w-full px-8 py-5 text-left hover:bg-slate-50 transition-colors border-b border-slate-50 last:border-0 flex items-center justify-between group">
                                <div>
                                    <p class="text-base font-black text-slate-800 uppercase" x-text="patient.full_name"></p>
                                    <p class="text-[10px] text-slate-400 font-bold uppercase tracking-widest mt-1" x-text="patient.mobile_number + ' • ' + patient.uhid"></p>
                                </div>
                                <div class="flex items-center gap-3">
                                    <span class="text-[9px] font-black px-4 py-2 bg-slate-100 text-slate-500 rounded-xl uppercase group-hover:bg-indigo-600 group-hover:text-white transition-all" x-text="patient.source"></span>
                                </div>
                            </button>
                        </template>

                        <div x-show="searchQuery.length >= 3 && searchResults.length === 0 && !isSearching" class="p-10 text-center italic">
                            <p class="text-[11px] text-slate-400 font-black uppercase tracking-widest mb-6">No record found in hospital directory</p>
                            <button type="button" @click="showMasterModal = true; patientData.contact_number = searchQuery" class="inline-flex items-center gap-3 px-8 py-4 bg-rose-600 text-white rounded-[1.5rem] text-[10px] font-black uppercase tracking-widest hover:bg-slate-900 transition-all shadow-2xl shadow-rose-200">
                                <svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M12 4v16m8-8H4"/></svg>
                                Register Patient Record
                            </button>
                        </div>
                    </div>
                </div>
                
                <div class="mt-8 flex items-center gap-4">
                    <span class="text-[10px] text-slate-400 font-bold uppercase tracking-widest italic">New patient?</span>
                    <button type="button" @click="showMasterModal = true" class="px-6 py-2 border-2 border-slate-100 text-slate-500 rounded-xl text-[10px] font-black uppercase tracking-widest hover:border-indigo-600 hover:text-indigo-600 transition-all active:scale-95 flex items-center gap-2">
                        <svg class="h-3 w-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M12 4v16m8-8H4"/></svg>
                        Create Master File
                    </button>
                </div>
            </div>
            
            <!-- Abstract background elements -->
            <div class="absolute inset-0 rounded-[50px] overflow-hidden pointer-events-none">
                <div class="absolute -bottom-20 -right-20 w-80 h-80 bg-indigo-50 rounded-full blur-[80px] opacity-60"></div>
                <div class="absolute top-10 left-10 w-4 h-4 rounded-full bg-slate-100"></div>
                <div class="absolute bottom-40 left-20 w-2 h-2 rounded-full bg-indigo-200"></div>
            </div>
        </div>

    </div>

    <div class="grid grid-cols-1 lg:grid-cols-12 gap-8">
        <!-- Left Column: Form Details -->
        <form action="{{ route('branch.registrations.store') }}" method="POST" id="opdRegistrationForm" class="lg:col-span-8 space-y-8" :class="!formData.patient_id ? 'opacity-20 pointer-events-none grayscale' : ''">
            @csrf
            <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">
            
            <!-- 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">Registration Schedule</h3>
                        <p class="text-[10px] text-slate-400 font-bold uppercase tracking-[0.2em] mt-2">Clinical entry timestamp assignment</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>
                            Check-in 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 class="absolute -top-12 -right-12 w-48 h-48 bg-slate-50 rounded-full blur-3xl opacity-50 group-hover/section:bg-indigo-50/50 transition-colors"></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 Network</h3>
                        <p class="text-[10px] text-slate-400 font-bold uppercase tracking-[0.2em] mt-2">Communication and emergency parameters</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>
                            Primary Mobile <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 ID
                        </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>
                            Current Residential 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="grid grid-cols-2 gap-8 md:col-span-2">
                        <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">City</label>
                            <input type="text" name="city" x-model="formData.city"
                                   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">State</label>
                            <input type="text" name="state" x-model="formData.state"
                                   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>

                    <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 mt-2 shadow-inner">
                        <div class="space-y-3">
                            <label class="text-[10px] font-black text-indigo-600 uppercase tracking-[0.2em] px-2 flex items-center gap-2">Emergency Guardian</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 flex items-center gap-2">SOS Contact No.</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 class="absolute -bottom-12 -right-12 w-48 h-48 bg-emerald-50/50 rounded-full blur-3xl opacity-50 group-hover/section:bg-emerald-100/50 transition-colors"></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 Assignment</h3>
                        <p class="text-[10px] text-slate-400 font-bold uppercase tracking-[0.2em] mt-2">Department, doctor and initial vitals</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>
                        <div class="relative">
                            <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"></option>
                                </template>
                            </select>
                        </div>
                        <!-- Consultation Fee Display -->
                        <div x-show="formData.charge_amount > 0" x-transition class="mt-4 p-5 bg-emerald-50 border border-emerald-100 rounded-[25px] flex items-center justify-between italic shadow-sm">
                            <div>
                                <p class="text-[8px] font-black text-emerald-600 uppercase tracking-widest">Consultation Fee</p>
                                <p class="text-[10px] font-bold text-emerald-800 uppercase mt-1" x-text="selectedDoctorName"></p>
                            </div>
                            <span class="text-2xl font-black text-emerald-600 tabular-nums uppercase" x-text="'₹' + Number(formData.charge_amount).toFixed(2)"></span>
                        </div>
                        <!-- 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">
                            <div class="h-8 w-8 bg-white/20 rounded-xl flex items-center justify-center flex-shrink-0">
                                <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>
                            </div>
                            <p class="text-[10px] font-black uppercase tracking-widest leading-relaxed" 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 Classification
                        </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>
                            Clinical 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="Patient's primary health concern...">
                    </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 class="absolute -bottom-12 -right-12 w-48 h-48 bg-rose-50/50 rounded-full blur-3xl opacity-50 group-hover/section:bg-rose-100/50 transition-colors"></div>
            </div>

            <!-- 4. Billing & Insurance -->
            <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-amber-50/50 transition-all duration-500">
                <div class="flex items-center gap-5 mb-10">
                    <div class="h-14 w-14 bg-amber-500 text-white rounded-[22px] flex items-center justify-center shadow-2xl shadow-amber-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="M17 9V7a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2m2 4h10a2 2 0 002-2v-6a2 2 0 00-2-2H9a2 2 0 00-2 2v6a2 2 0 002 2zm7-5a2 2 0 11-4 0 2 2 0 014 0z"/></svg>
                    </div>
                    <div>
                        <h3 class="text-2xl font-black text-slate-800 uppercase tracking-tighter leading-none">Financial Category</h3>
                        <p class="text-[10px] text-slate-400 font-bold uppercase tracking-[0.2em] mt-2">Revenue streams and coverage verification</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-amber-500 rounded-full"></span>
                            Settlement Mode <span class="text-rose-500">*</span>
                        </label>
                        <select name="payment_mode" x-model="formData.payment_mode" 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-amber-50 focus:border-amber-600 focus:bg-white transition-all outline-none shadow-inner 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-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-amber-500 rounded-full"></span>
                            Patient Class <span class="text-rose-500">*</span>
                        </label>
                        <select name="patient_category" x-model="formData.patient_category"
                                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-amber-50 focus:border-amber-600 focus:bg-white transition-all outline-none shadow-inner appearance-none">
                            <option value="General">Standard General</option>
                            @foreach($categories as $cat)
                                @if($cat !== 'General')
                                    <option value="{{ $cat }}">{{ $cat }}</option>
                                @endif
                            @endforeach
                        </select>
                    </div>

                    <div class="md:col-span-2 space-y-8 pt-6 border-t border-slate-50" x-show="formData.patient_category === 'Insurance'" x-transition>
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-10">
                            <div class="space-y-3">
                                <label class="text-[11px] font-black text-amber-600 uppercase tracking-[0.2em] px-2">Insurance Provider</label>
                                <input type="text" name="insurance_provider" x-model="formData.insurance_provider"
                                       class="w-full px-8 py-5 bg-amber-50/30 border-2 border-amber-50 rounded-[22px] text-sm font-black focus:ring-4 focus:ring-white transition-all outline-none shadow-inner" placeholder="e.g. Star Health Insurance">
                            </div>
                            <div class="space-y-3">
                                <label class="text-[11px] font-black text-amber-600 uppercase tracking-[0.2em] px-2">Policy / TPA ID</label>
                                <input type="text" name="policy_id" x-model="formData.policy_id"
                                       class="w-full px-8 py-5 bg-amber-50/30 border-2 border-amber-50 rounded-[22px] text-sm font-black focus:ring-4 focus:ring-white transition-all outline-none shadow-inner" placeholder="Enter Policy Reference">
                            </div>
                        </div>
                    </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">Govt ID / Aadhar Number</label>
                        <input type="text" name="national_id" x-model="formData.national_id"
                               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-amber-50 focus:border-amber-600 focus:bg-white transition-all outline-none shadow-inner" placeholder="12-digit UID or Govt Identifier">
                    </div>

                    <div class="md:col-span-2 grid grid-cols-1 md:grid-cols-2 gap-10 pt-6">
                        <div class="space-y-4">
                            <label class="flex items-center gap-5 p-6 bg-slate-50 border-2 border-slate-50 rounded-[30px] cursor-pointer hover:bg-white hover:border-emerald-500/30 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-slate-200 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-700 uppercase tracking-[0.2em]">Complementary Visit</span>
                                    <span class="block text-[9px] text-slate-400 font-bold uppercase tracking-widest mt-1">Waive all consultation charges</span>
                                </div>
                            </label>

                            <div x-show="formData.is_complimentary" x-transition class="mt-4">
                                <textarea name="complimentary_remarks" x-model="formData.complimentary_remarks" :required="formData.is_complimentary"
                                          placeholder="Justification for waiver (e.g. Staff, Follow-up Exception)..."
                                          class="w-full px-8 py-5 bg-emerald-50/30 border-2 border-emerald-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 min-h-[120px]"></textarea>
                            </div>
                        </div>

                        <div class="space-y-4" x-show="!formData.is_complimentary" x-transition>
                            <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>
                                    Direct Discount (₹)
                                </label>
                                <div class="relative">
                                    <span class="absolute left-8 top-1/2 -translate-y-1/2 text-slate-400 font-black text-lg">₹</span>
                                    <input type="number" step="0.01" name="discount_amount" x-model="formData.discount_amount"
                                           class="w-full pl-16 pr-8 py-5 bg-slate-50 border-2 border-slate-50 rounded-[22px] text-lg font-black tabular-nums focus:ring-4 focus:ring-rose-50 focus:border-rose-600 focus:bg-white transition-all outline-none shadow-inner"
                                           placeholder="0.00">
                                </div>
                            </div>
                        </div>
                    </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">Final Receipt Remarks</label>
                        <textarea name="remarks" x-model="formData.remarks" rows="2"
                                  placeholder="Any additional notes to be printed on the invoice..."
                                  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-indigo-50 focus:border-indigo-600 focus:bg-white transition-all outline-none shadow-inner"></textarea>
                    </div>
                </div>
                <div class="absolute -bottom-12 -right-12 w-48 h-48 bg-amber-50/50 rounded-full blur-3xl opacity-50 group-hover/section:bg-amber-100/50 transition-colors"></div>
            </div>
        </form>

        <!-- Right Column: Summary & Actions -->
        <div class="lg:col-span-4">
            <div class="sticky top-28 space-y-6">
                <!-- Patient Identity Sidebar Card -->
                <div x-show="formData.patient_id" x-transition class="bg-white rounded-[40px] p-8 border border-slate-100 shadow-sm italic relative overflow-hidden group mb-6">
                    <div class="relative z-10">
                        <div class="flex items-center justify-between mb-6">
                            <h4 class="text-[10px] font-black text-indigo-600 uppercase tracking-[0.2em]">Verified Identity</h4>
                            <button type="button" @click="resetForm()" class="text-[9px] font-bold text-rose-400 uppercase tracking-widest hover:text-rose-600 transition-colors">Change</button>
                        </div>
                        
                        <div class="space-y-4">
                            <div class="p-4 bg-slate-50 rounded-2xl border border-slate-100 group-hover:bg-indigo-50/30 transition-colors">
                                <p class="text-[8px] font-black text-slate-400 uppercase tracking-widest mb-1">Full Name</p>
                                <p class="text-sm font-black text-slate-800 uppercase tracking-tight" x-text="formData.full_name"></p>
                            </div>

                            <div class="grid grid-cols-2 gap-4">
                                <div class="p-4 bg-slate-50 rounded-2xl border border-slate-100">
                                    <p class="text-[8px] font-black text-slate-400 uppercase tracking-widest mb-1">UHID</p>
                                    <p class="text-xs font-black text-indigo-600 uppercase tracking-widest" x-text="formData.uhid"></p>
                                </div>
                                <div class="p-4 bg-slate-50 rounded-2xl border border-slate-100">
                                    <p class="text-[8px] font-black text-slate-400 uppercase tracking-widest mb-1">Gender</p>
                                    <p class="text-xs font-black text-slate-800 uppercase tracking-widest" x-text="formData.gender || 'N/A'"></p>
                                </div>
                            </div>

                            <div class="p-4 bg-emerald-50 rounded-2xl border border-emerald-100">
                                <p class="text-[8px] font-black text-emerald-600 uppercase tracking-widest mb-1">Reg No Preview</p>
                                <p class="text-xs font-black text-emerald-700 uppercase tracking-widest" x-text="previewsMap[formData.visit_type] || 'AUTO'"></p>
                            </div>
                        </div>
                    </div>
                    <div class="absolute -bottom-6 -right-6 h-24 w-24 bg-indigo-50/50 rounded-full blur-2xl group-hover:bg-indigo-100/50 transition-all"></div>
                </div>

                <!-- Registration Summary 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-6">Payment Summary</h4>
                        
                        <div class="space-y-6">
                            <div class="flex justify-between items-start border-b border-white/10 pb-4">
                                <div>
                                    <p class="text-[10px] font-black text-slate-400 uppercase tracking-widest">Consultation Fee</p>
                                    <p class="text-xs font-bold text-indigo-400 mt-1" x-text="selectedDoctorName || 'No Doctor Selected'"></p>
                                </div>
                                <div class="text-right">
                                    <p class="text-xl font-black tabular-nums text-white" x-text="'₹' + (Number(formData.charge_amount) || 0).toFixed(2)"></p>
                                    <p class="text-[9px] font-bold text-slate-500 uppercase tracking-widest mt-1">Professional Charge</p>
                                </div>
                            </div>


                            <div class="flex justify-between items-center bg-white/5 rounded-2xl p-5 border border-white/5">
                                <p class="text-[10px] font-black text-slate-400 uppercase tracking-widest">Total Amount Payable</p>
                                <p class="text-2xl font-black text-indigo-400 tabular-nums" x-text="'₹' + Number(totalPayable).toFixed(2)"></p>
                            </div>

                            <div x-show="formData.discount_amount > 0 && !formData.is_complimentary" x-transition class="flex justify-between items-center px-5">
                                <p class="text-[9px] font-bold text-rose-400 uppercase tracking-widest italic">Applied Discount</p>
                                <p class="text-xs font-black text-rose-400 tabular-nums uppercase" x-text="'- ₹' + Number(formData.discount_amount).toFixed(2)"></p>
                            </div>

                            <div x-show="formData.is_complimentary" x-transition class="flex justify-between items-center px-5 bg-emerald-500/10 py-2 rounded-xl border border-emerald-500/20">
                                <p class="text-[9px] font-black text-emerald-400 uppercase tracking-widest">COMPLEMENTARY</p>
                                <p class="text-xs font-black text-emerald-400 uppercase tracking-widest">WAIVED</p>
                            </div>

                            <div class="pt-4 border-t border-white/5">
                                <p class="text-[10px] font-black text-slate-400 uppercase tracking-widest mb-1">Target Registration No.</p>
                                <p class="text-lg font-black text-white uppercase tracking-widest" x-text="previewsMap[formData.visit_type] || 'Pending Assignment'"></p>
                            </div>
                        </div>

                        <div class="mt-10 space-y-4">
                            <button type="submit" form="opdRegistrationForm"
                                    :disabled="!formData.patient_id || !isAvailable"
                                    :class="(!formData.patient_id || !isAvailable) ? 'bg-slate-700 text-slate-500 cursor-not-allowed' : '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="formData.patient_id && 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="!formData.patient_id">
                                    <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 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>
                                </template>
                                <span x-text="!formData.patient_id ? 'Select Patient First' : (isAvailable ? 'Complete Registration' : '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 Draft</a>
                        </div>
                    </div>
                    
                    <!-- Decorative Circle -->
                    <div class="absolute -bottom-12 -right-12 w-48 h-48 bg-indigo-600/20 rounded-full blur-3xl"></div>
                </div>

                <!-- Info Help -->
                <div class="bg-indigo-50/50 border border-indigo-100 rounded-[2.5rem] p-6 italic">
                    <div class="flex items-start gap-3">
                        <div class="h-6 w-6 text-indigo-600 mt-1">
                            <svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
                        </div>
                        <div>
                            <p class="text-[10px] font-black text-indigo-900 uppercase tracking-widest mb-1">Administrator Tip</p>
                            <p class="text-[11px] text-indigo-700 leading-relaxed">
                                Use the search bar for returning patients to save up to 60% of registration time. Always verify the mobile number before submission.
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Quick Patient Registration Modal -->
    <div x-show="showMasterModal" 
         class="fixed inset-0 z-[100] flex items-center justify-center p-6 bg-slate-900/60 backdrop-blur-md"
         style="display: none;"
         x-transition:enter="transition ease-out duration-300"
         x-transition:enter-start="opacity-0"
         x-transition:enter-end="opacity-100"
         x-transition:leave="transition ease-in duration-200"
         x-transition:leave-start="opacity-100"
         x-transition:leave-end="opacity-0">
        
        <div class="bg-white w-full max-w-2xl rounded-[45px] shadow-2xl overflow-hidden border border-slate-100 italic"
             @click.away="showMasterModal = false"
             x-transition:enter="transition ease-out duration-300 transform"
             x-transition:enter-start="opacity-0 scale-95 translate-y-10"
             x-transition:enter-end="opacity-100 scale-100 translate-y-0">
            
            <div class="p-10 border-b border-slate-50 flex items-center justify-between">
                <div class="flex items-center gap-4">
                    <div class="h-12 w-12 bg-indigo-600 text-white rounded-2xl flex items-center justify-center shadow-lg shadow-indigo-100">
                        <svg class="h-6 w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"/></svg>
                    </div>
                    <div>
                        <h3 class="text-2xl font-black text-slate-800 uppercase tracking-tighter leading-none">Quick Intake</h3>
                        <p class="text-[10px] text-slate-400 font-bold uppercase tracking-[0.2em] mt-2">Create master identity record</p>
                    </div>
                </div>
                <button type="button" @click="showMasterModal = false" class="h-10 w-10 flex items-center justify-center text-slate-400 hover:text-rose-600 transition-colors">
                    <svg class="h-6 w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M6 18L18 6M6 6l12 12"/></svg>
                </button>
            </div>

            <div class="p-10 space-y-8 max-h-[70vh] overflow-y-auto">
                <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
                    <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">Full Identity Name <span class="text-rose-500">*</span></label>
                        <input type="text" x-model="patientData.name" placeholder="AS PER GOVT ID"
                               class="w-full px-6 py-4 bg-slate-50 border-2 border-slate-50 rounded-[20px] text-sm font-black 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">Mobile Number <span class="text-rose-500">*</span></label>
                        <input type="text" x-model="patientData.contact_number" placeholder="Enter Contact"
                               class="w-full px-6 py-4 bg-slate-50 border-2 border-slate-50 rounded-[20px] text-sm font-black 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">Gender <span class="text-rose-500">*</span></label>
                        <select x-model="patientData.gender"
                                class="w-full px-6 py-4 bg-slate-50 border-2 border-slate-50 rounded-[20px] text-sm font-black uppercase focus:ring-4 focus:ring-indigo-50 focus:border-indigo-600 focus:bg-white transition-all outline-none shadow-inner appearance-none">
                            <option value="">Select</option>
                            <option value="Male">Male</option>
                            <option value="Female">Female</option>
                            <option value="Other">Other</option>
                        </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">Age</label>
                        <input type="text" x-model="patientData.age" placeholder="e.g. 28"
                               class="w-full px-6 py-4 bg-slate-50 border-2 border-slate-50 rounded-[20px] text-sm font-black focus:ring-4 focus:ring-indigo-50 focus:border-indigo-600 focus:bg-white transition-all outline-none shadow-inner">
                    </div>
                    <div class="md:col-span-2 space-y-3">
                        <label class="text-[11px] font-black text-slate-500 uppercase tracking-[0.2em] px-2 flex items-center gap-2">Residential Address</label>
                        <textarea x-model="patientData.address" rows="2"
                                  class="w-full px-6 py-4 bg-slate-50 border-2 border-slate-50 rounded-[25px] text-sm font-black focus:ring-4 focus:ring-indigo-50 focus:border-indigo-600 focus:bg-white transition-all outline-none shadow-inner"></textarea>
                    </div>
                </div>
            </div>

            <div class="p-10 bg-slate-900 flex items-center justify-between">
                <button type="button" @click="showMasterModal = false" class="text-[10px] font-black text-slate-400 uppercase tracking-widest hover:text-white transition-colors">Cancel Intake</button>
                <button type="button" @click="saveQuickPatient()" 
                        :disabled="isSavingPatient"
                        class="px-10 py-4 bg-indigo-600 text-white rounded-[22px] text-[10px] font-black uppercase tracking-widest hover:bg-white hover:text-slate-900 shadow-2xl shadow-indigo-500/20 transition-all flex items-center gap-3">
                    <span x-show="!isSavingPatient">Commit & Select Record</span>
                    <span x-show="isSavingPatient">Processing...</span>
                </button>
            </div>
        </div>
    </div>
</div>

@push('scripts')
<script>
function opdForm() {
    return {
        searchQuery: '',
        searchResults: [],
        filteredDoctors: [],
        selectedDoctorName: '',
        previewsMap: @json($previews),
        isAvailable: true,
        availabilityMessage: '',
        isSearching: false,
        showMasterModal: false,
        isSavingPatient: false,
        patientData: {
            name: '',
            contact_number: '',
            gender: '',
            age: '',
            address: '',
            registration_at: '{{ date('Y-m-d H:i') }}'
        },
        
        formData: {
            patient_id: @json(old('patient_id')) || null,
            uhid: @json(old('uhid')) || '',
            full_name: @json(old('full_name')) || '',
            gender: @json(old('gender')) || '',
            dob: @json(old('dob')) || '',
            age: @json(old('age')) || '',
            marital_status: @json(old('marital_status')) || '',
            guardian_name: @json(old('guardian_name')) || '',
            mobile_number: @json(old('mobile_number')) || '',
            email: @json(old('email')) || '',
            address: @json(old('address')) || '',
            city: @json(old('city')) || '',
            state: @json(old('state')) || '',
            zip_code: @json(old('zip_code')) || '',
            emergency_contact_name: @json(old('emergency_contact_name')) || '',
            emergency_contact_phone: @json(old('emergency_contact_phone')) || '',
            department_id: @json(old('department_id')) || '',
            doctor_id: @json(old('doctor_id')) || '',
            charge_id: @json(old('charge_id')) || '',
            visit_type: @json(old('visit_type')) || 'OPD',
            chief_complaint: @json(old('chief_complaint')) || '',
            weight: @json(old('weight')) || '',
            height: @json(old('height')) || '',
            bp: @json(old('bp')) || '',
            temperature: @json(old('temperature')) || '',
            patient_category: @json(old('patient_category')) || 'General',
            insurance_provider: @json(old('insurance_provider')) || '',
            policy_id: @json(old('policy_id')) || '',
            national_id: @json(old('national_id')) || '',
            visit_date: @json(old('visit_date')) || '{{ date('Y-m-d') }}',
            visit_time: @json(old('visit_time')) || new Date().toLocaleTimeString('en-GB', { hour: '2-digit', minute: '2-digit', hour12: false }),
            charge_amount: @json(old('charge_amount')) || '0.00',
            visit_nature: @json(old('visit_nature')) || 'first_visit',
            payment_mode: @json(old('payment_mode')) || 'Cash',
            is_complimentary: {{ old('is_complimentary') ? 'true' : 'false' }},
            complimentary_remarks: @json(old('complimentary_remarks')) || '',
            discount_amount: @json(old('discount_amount')) || 0,
            remarks: @json(old('remarks')) || ''
        },

        init() {
            this.checkAvailability();
            if (this.formData.department_id) {
                this.fetchDoctors().then(() => {
                    if (this.formData.doctor_id) {
                        this.fetchCharge();
                    }
                });
            }
        },

        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);
        },

        async searchPatient() {
            if (this.searchQuery.length < 3) {
                this.searchResults = [];
                return;
            }
            this.isSearching = true;
            try {
                const response = await fetch(`{{ route('branch.registrations.search') }}?q=${encodeURIComponent(this.searchQuery)}`);
                if (!response.ok) throw new Error('Network response was not ok');
                this.searchResults = await response.json();
            } catch (error) {
                console.error('Search failed', error);
                this.searchResults = [];
            } finally {
                this.isSearching = false;
            }
        },

        resetForm() {
            this.formData.patient_id = null;
            this.formData.uhid = '';
            this.formData.full_name = '';
            this.formData.mobile_number = '';
            this.formData.email = '';
            this.formData.gender = '';
            this.formData.dob = '';
            this.formData.age = '';
            this.formData.address = '';
            this.formData.city = '';
            this.formData.state = '';
            this.formData.zip_code = '';
            this.formData.marital_status = '';
            this.formData.guardian_name = '';
            
            this.searchQuery = '';
            this.searchResults = [];
        },

        selectPatient(patient) {
            this.formData.patient_id = patient.id;
            this.formData.uhid = patient.uhid;
            this.formData.full_name = patient.full_name || '';
            this.formData.mobile_number = patient.mobile_number || '';
            this.formData.email = patient.email || '';
            this.formData.gender = patient.gender || '';
            this.formData.dob = patient.dob || '';
            
            // New auto-fill fields
            this.formData.age = patient.age || '';
            this.formData.address = patient.address || '';
            this.formData.city = patient.city || '';
            this.formData.state = patient.state || '';
            this.formData.zip_code = patient.zip_code || '';
            this.formData.marital_status = patient.marital_status || '';
            this.formData.guardian_name = patient.guardian_name || '';
            
            this.formData.visit_nature = patient.source === 'past_visit' ? 'revisit' : 'first_visit';
            
            this.searchResults = [];
            this.searchQuery = '';
            this.isSearching = false;
        },

        async fetchDoctors() {
            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();
                this.formData.doctor_id = '';
                this.formData.charge_amount = '0.00';
            } catch (error) {
                console.error('Failed to fetch doctors', error);
            }
        },

        async fetchCharge() {
            const selectedDr = this.filteredDoctors.find(d => d.id == this.formData.doctor_id);
            this.selectedDoctorName = selectedDr ? selectedDr.name : '';

            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 = '';
            }
        },

        async saveQuickPatient() {
            if (!this.patientData.name || !this.patientData.contact_number || !this.patientData.gender) {
                alert('Please fill mandatory fields: Name, Contact, and Gender.');
                return;
            }
            
            this.isSavingPatient = true;
            try {
                const response = await fetch(`{{ route('branch.patients.store') }}`, {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'X-CSRF-TOKEN': '{{ csrf_token() }}',
                        'Accept': 'application/json'
                    },
                    body: JSON.stringify(this.patientData)
                });
                
                const result = await response.json();
                
                if (response.ok) {
                    this.selectPatient({
                        id: result.id,
                        uhid: result.uhid,
                        full_name: result.name,
                        mobile_number: result.contact_number,
                        gender: result.gender,
                        age: result.age,
                        address: result.address,
                        source: 'master'
                    });
                    this.showMasterModal = false;
                    // Reset modal data
                    this.patientData = { name: '', contact_number: '', gender: '', age: '', address: '', registration_at: '{{ date('Y-m-d H:i') }}' };
                } else {
                    alert(result.message || 'Failed to save patient. Please check all fields.');
                }
            } catch (error) {
                console.error('Failed to save patient', error);
                alert('An error occurred while saving the patient record.');
            } finally {
                this.isSavingPatient = false;
            }
        }
    }
}
</script>
@endpush
@endsection