@extends('layouts.branch')

@section('title', "New IPD Admission")
@section('header', "New IPD Admission")

@section('content')
<div class="space-y-6" x-data="ipdForm()">
    
    <!-- Breadcrumbs -->
    <div class="flex items-center gap-2 text-[10px] font-black uppercase tracking-widest text-slate-400 italic">
        <a href="{{ route('branch.dashboard') }}" class="hover:text-indigo-600 transition-colors">Dashboard</a>
        <svg class="h-3 w-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/></svg>
        <a href="{{ route('branch.ipd-registrations.index') }}" class="hover:text-indigo-600 transition-colors">IPD Directory</a>
        <svg class="h-3 w-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/></svg>
        <span class="text-indigo-600">New Admission</span>
    </div>

    <!-- Header: Dynamic Patient Identification -->
    <div class="relative z-10">
        <!-- 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, UHID, or Name to begin the IPD intake 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="searchPatients()"
                           placeholder="Mobile / UHID / Name / PID..." 
                           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>
                    
                    <!-- Search Results Dropdown -->
                    <div x-show="showResults && results.length > 0" 
                         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 results" :key="patient.id">
                            <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">Select Profile</span>
                                </div>
                            </button>
                        </template>
                    </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>
                    <a href="{{ route('branch.patients.create') }}" 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 Record
                    </a>
                </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>

        <!-- Transition: 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-6 rounded-[35px] shadow-sm border border-slate-100 italic relative overflow-hidden flex flex-col md:flex-row md:items-center justify-between gap-6 mb-8 group">
            
            <div class="flex items-center gap-6 relative z-10">
                <div class="h-20 w-20 rounded-2xl bg-indigo-600 border-4 border-white shadow-xl overflow-hidden flex items-center justify-center text-white font-black text-2xl group-hover:scale-105 transition-transform">
                    <template x-if="photoPreview">
                        <img :src="photoPreview" class="h-full w-full object-cover">
                    </template>
                    <template x-if="!photoPreview">
                        <span x-text="formData.full_name ? formData.full_name.charAt(0) : '?'"></span>
                    </template>
                </div>
                <div>
                    <h2 class="text-4xl font-black text-slate-900 tracking-tighter uppercase leading-none mb-3" x-text="formData.full_name"></h2>
                    <div class="flex flex-wrap items-center gap-6 mt-4">
                        <div class="bg-indigo-50 px-5 py-2 rounded-2xl border border-indigo-100 shadow-sm">
                            <span class="text-3xl font-black text-indigo-700 uppercase tracking-widest leading-none" x-text="'UHID: ' + formData.uhid"></span>
                        </div>
                        <span class="text-3xl font-bold text-slate-500 uppercase tracking-widest leading-none" x-text="formData.mobile_number"></span>
                        <div class="h-3 w-3 bg-slate-200 rounded-full"></div>
                        <span class="text-3xl font-black text-emerald-600 uppercase tracking-widest leading-none" x-text="'REG NO: ' + ipdNumberPreview"></span>
                    </div>
                </div>
            </div>

            <div class="flex items-center gap-4 relative z-10 opacity-60 group-hover:opacity-100 transition-all">
                <button @click="resetPatientSelection()" type="button" class="px-6 py-4 bg-slate-100 text-slate-500 rounded-2xl text-[10px] font-black uppercase tracking-widest hover:bg-rose-600 hover:text-white transition-all active:scale-95 flex items-center gap-3">
                    <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="M11 15l-3-3m0 0l3-3m-3 3h8M3 12a9 9 0 1118 0 9 9 0 01-18 0z"/></svg>
                    Change Patient
                </button>
            </div>
            
            <div class="absolute -top-12 -right-12 w-48 h-48 bg-indigo-50 rounded-full blur-3xl opacity-40 group-hover:bg-indigo-100 transition-colors duration-700"></div>
        </div>
    </div>


    <form action="{{ route('branch.ipd-registrations.store') }}" method="POST" class="space-y-8 pb-20" :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">

        <!-- Section 1: Admission & Patient Details -->
        <div class="bg-white p-10 rounded-[40px] shadow-sm border border-slate-100 italic relative overflow-hidden">
            <div class="flex items-center gap-4 mb-10">
                <div class="h-12 w-12 bg-slate-900 text-white rounded-2xl flex items-center justify-center shadow-lg shadow-slate-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-xl font-black text-slate-800 uppercase tracking-tighter leading-none">Admission & Patient Info</h3>
                    <p class="text-[9px] text-slate-400 font-bold uppercase tracking-widest mt-1">Core patient identity and admission timestamps</p>
                </div>
            </div>

            <div class="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-4 gap-x-8 gap-y-6">
                <!-- Row 1: Administrative Information (Priority) -->
                <div class="space-y-2">
                    <label class="text-[11px] font-black text-slate-600 uppercase tracking-wider px-1">Admission Date <span class="text-red-500">*</span></label>
                    <input type="date" name="admission_date" x-model="formData.admission_date" required
                           @change="checkAvailability()"
                           class="w-full px-6 py-4 bg-white border border-slate-200 rounded-2xl text-sm font-bold text-slate-900 focus:ring-4 focus:ring-indigo-500/10 focus:border-indigo-500 transition-all outline-none shadow-sm">
                </div>
                <div class="space-y-2">
                    <label class="text-[11px] font-black text-slate-600 uppercase tracking-wider px-1">Admission Time <span class="text-red-500">*</span></label>
                    <input type="time" name="admission_time" x-model="formData.admission_time" required
                           class="w-full px-6 py-4 bg-white border border-slate-200 rounded-2xl text-sm font-bold text-slate-900 focus:ring-4 focus:ring-indigo-500/10 focus:border-indigo-500 transition-all outline-none shadow-sm">
                </div>
                <div class="space-y-2">
                    <label class="text-[11px] font-black text-indigo-600 uppercase tracking-wider px-1 italic">IPD Reg Number <span class="text-slate-400 font-bold">(Auto)</span></label>
                    <input type="text" readonly :value="ipdNumberPreview"
                           class="w-full px-6 py-4 bg-indigo-50/30 border border-indigo-100 rounded-2xl text-sm font-black text-indigo-600 outline-none cursor-not-allowed tracking-widest shadow-inner">
                </div>
                <div class="space-y-2">
                    <label class="text-[11px] font-black text-slate-600 uppercase tracking-wider px-1">Previous Patient ID</label>
                    <input type="text" name="previous_id" x-model="formData.previous_id"
                           placeholder="Internal ID if any"
                           class="w-full px-6 py-4 bg-white border border-slate-200 rounded-2xl text-sm font-bold text-slate-900 focus:ring-4 focus:ring-indigo-500/10 focus:border-indigo-500 transition-all outline-none shadow-sm">
                </div>

                <!-- Row 2: Patient Identity -->
                <div class="md:col-span-2 lg:col-span-2 space-y-2">
                    <label class="text-[11px] font-black text-slate-600 uppercase tracking-wider px-1">Full Name <span class="text-red-500">*</span></label>
                    <input type="text" name="full_name" x-model="formData.full_name" required
                           placeholder="Enter full legal name"
                           class="w-full px-6 py-4 bg-white border border-slate-200 rounded-2xl text-sm font-bold text-slate-900 focus:ring-4 focus:ring-indigo-500/10 focus:border-indigo-500 transition-all outline-none shadow-sm">
                </div>
                <div class="md:col-span-1 lg:col-span-2 space-y-2">
                    <label class="text-[11px] font-black text-slate-600 uppercase tracking-wider px-1">S/o or Spouse Name</label>
                    <input type="text" name="spouse_name" x-model="formData.spouse_name"
                           placeholder="Father/Husband Name"
                           class="w-full px-6 py-4 bg-white border border-slate-200 rounded-2xl text-sm font-bold text-slate-900 focus:ring-4 focus:ring-indigo-500/10 focus:border-indigo-500 transition-all outline-none shadow-sm">
                </div>

                <!-- Row 3: Demographics -->
                <div class="space-y-2">
                    <label class="text-[11px] font-black text-slate-600 uppercase tracking-wider px-1">Gender <span class="text-red-500">*</span></label>
                    <select name="gender" x-model="formData.gender" required
                            class="w-full px-6 py-4 bg-white border border-slate-200 rounded-2xl text-sm font-bold text-slate-900 focus:ring-4 focus:ring-indigo-500/10 focus:border-indigo-500 transition-all outline-none shadow-sm">
                        <option value="Male">Male</option>
                        <option value="Female">Female</option>
                        <option value="Other">Other</option>
                    </select>
                </div>
                <div class="space-y-2">
                    <label class="text-[11px] font-black text-slate-600 uppercase tracking-wider px-1">Age <span class="text-red-500">*</span></label>
                    <input type="text" name="age" x-model="formData.age" required
                           placeholder="e.g. 25Y"
                           class="w-full px-6 py-4 bg-white border border-slate-200 rounded-2xl text-sm font-bold text-slate-900 focus:ring-4 focus:ring-indigo-500/10 focus:border-indigo-500 transition-all outline-none shadow-sm">
                </div>
                <div class="md:col-span-1 lg:col-span-2 space-y-2">
                    <label class="text-[11px] font-black text-slate-600 uppercase tracking-wider px-1">Mobile Number <span class="text-red-500">*</span></label>
                    <input type="text" name="mobile_number" x-model="formData.mobile_number" required
                           placeholder="10-digit mobile number"
                           class="w-full px-6 py-4 bg-white border border-slate-200 rounded-2xl text-sm font-bold text-slate-900 focus:ring-4 focus:ring-indigo-500/10 focus:border-indigo-500 transition-all outline-none shadow-sm">
                </div>

                <!-- Row 4: Location -->
                <div class="md:col-span-3 lg:col-span-4 space-y-2">
                    <label class="text-[11px] font-black text-slate-600 uppercase tracking-wider px-1">Residential Address</label>
                    <textarea name="address" x-model="formData.address" rows="2"
                              placeholder="House No, Street, City..."
                              class="w-full px-6 py-4 bg-white border border-slate-200 rounded-3xl text-sm font-bold text-slate-900 focus:ring-4 focus:ring-indigo-500/10 focus:border-indigo-500 transition-all outline-none shadow-sm"></textarea>
                </div>
            </div>
        </div>

        <!-- Section 2: Clinical & Facility Assignment -->
        <div class="bg-white p-10 rounded-[40px] shadow-sm border border-slate-100 italic relative overflow-hidden">
            <div class="flex items-center gap-4 mb-10">
                <div class="h-12 w-12 bg-emerald-600 text-white rounded-2xl flex items-center justify-center shadow-lg shadow-emerald-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="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/></svg>
                </div>
                <div>
                    <h3 class="text-xl font-black text-slate-800 uppercase tracking-tighter leading-none">Clinical Assignment</h3>
                    <p class="text-[9px] text-slate-400 font-bold uppercase tracking-widest mt-1">Doctor and bed allocation details</p>
                </div>
            </div>

            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
                <div class="md:col-span-2 lg:col-span-2 space-y-2">
                    <label class="text-[11px] font-black text-slate-600 uppercase tracking-wider px-1">Consulting Doctor <span class="text-red-500">*</span></label>
                    <select name="doctor_id" x-model="formData.doctor_id" required
                            class="w-full px-6 py-4 bg-white border border-slate-200 rounded-2xl text-sm font-bold text-slate-900 focus:ring-4 focus:ring-indigo-500/10 focus:border-indigo-500 transition-all outline-none shadow-sm">
                        <option value="">Select Primary Consultant</option>
                        @foreach($doctors as $dr)
                            <option value="{{ $dr->id }}">{{ $dr->name }} @if($dr->specialities->count()) ({{ $dr->specialities->first()->name }}) @endif</option>
                        @endforeach
                    </select>
                </div>

                <div class="space-y-2">
                    <label class="text-[11px] font-black text-slate-600 uppercase tracking-wider px-1">Room Category Filter</label>
                    <select x-model="room_type_id" 
                            class="w-full px-6 py-4 bg-white border border-slate-200 rounded-2xl text-sm font-bold text-slate-900 focus:ring-4 focus:ring-indigo-500/10 focus:border-indigo-500 transition-all outline-none shadow-sm">
                        <option value="">Show All Room Types</option>
                        @foreach($roomTypes as $type)
                            <option value="{{ $type->id }}">{{ $type->name }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="space-y-2">
                    <label class="text-[11px] font-black text-emerald-600 uppercase tracking-wider px-1">Bed Assignment <span class="text-red-500">*</span></label>
                    <select name="bed_id" x-model="formData.bed_id" required
                            class="w-full px-6 py-4 bg-white border border-emerald-100 rounded-2xl text-sm font-black text-slate-800 focus:ring-4 focus:ring-emerald-500/10 focus:border-emerald-500 transition-all outline-none shadow-sm">
                        <option value="">Select Available Bed</option>
                        @foreach($beds as $bed)
                            <option value="{{ $bed->id }}" 
                                x-show="(!room_type_id || '{{ $bed->room->room_type_id }}' == room_type_id) && (!formData.gender || '{{ strtolower($bed->gender_restriction) }}' === 'any' || '{{ strtolower($bed->gender_restriction) }}' === formData.gender.toLowerCase())">
                                {{ $bed->bed_number }} ({{ $bed->room->roomType?->name }}) 
                                @if($bed->gender_restriction !== 'any') [{{ strtoupper($bed->gender_restriction) }} ONLY] @endif
                            </option>
                        @endforeach
                    </select>
                </div>

                <div class="md:col-span-1 lg:col-span-2 space-y-2">
                    <label class="text-[11px] font-black text-slate-600 uppercase tracking-wider px-1">Referral Source</label>
                    <select name="referral_source_id" x-model="formData.referral_source_id"
                            class="w-full px-6 py-4 bg-white border border-slate-200 rounded-2xl text-sm font-bold text-slate-900 focus:ring-4 focus:ring-indigo-500/10 focus:border-indigo-500 transition-all outline-none shadow-sm">
                        <option value="">Direct / Walk-in</option>
                        @foreach($referralSources as $source)
                            <option value="{{ $source->id }}">{{ $source->full_name }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="md:col-span-1 lg:col-span-2 space-y-2">
                    <label class="text-[11px] font-black text-slate-600 uppercase tracking-wider px-1">Assigned PRO</label>
                    <select name="pro_id" x-model="formData.pro_id"
                            class="w-full px-6 py-4 bg-white border border-slate-200 rounded-2xl text-sm font-bold text-slate-900 focus:ring-4 focus:ring-indigo-500/10 focus:border-indigo-500 transition-all outline-none shadow-sm">
                        <option value="">None / Internal</option>
                        @foreach($pros as $pro)
                            <option value="{{ $pro->id }}">{{ $pro->full_name }}</option>
                        @endforeach
                    </select>
                </div>
            </div>
        </div>

        <!-- Section 3: Clinical Summary -->
        <div class="bg-white p-10 rounded-[40px] shadow-sm border border-slate-100 italic relative overflow-hidden">
            <div class="flex items-center gap-4 mb-10">
                <div class="h-12 w-12 bg-rose-600 text-white rounded-2xl flex items-center justify-center shadow-lg shadow-rose-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="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-xl font-black text-slate-800 uppercase tracking-tighter leading-none">Admission History</h3>
                    <p class="text-[9px] text-slate-400 font-bold uppercase tracking-widest mt-1">Chief complaints and preliminary diagnosis</p>
                </div>
            </div>
            <div class="space-y-2">
                <textarea name="history" x-model="formData.history" rows="4"
                          placeholder="Describe the clinical presentation, chief complaints, and reason for admission in detail..."
                          class="w-full px-6 py-4 bg-white border border-slate-200 rounded-[2.5rem] text-sm font-bold text-slate-900 focus:ring-4 focus:ring-indigo-500/10 focus:border-indigo-500 transition-all outline-none shadow-sm"></textarea>
            </div>
        </div>

        <!-- Section 4: Insurance & Billing -->
        <div class="bg-white p-10 rounded-[40px] shadow-sm border border-slate-100 italic relative overflow-hidden">
            <div class="flex items-center gap-4 mb-10">
                <div class="h-12 w-12 bg-amber-500 text-white rounded-2xl flex items-center justify-center shadow-lg shadow-amber-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="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
                </div>
                <div>
                    <h3 class="text-xl font-black text-slate-800 uppercase tracking-tighter leading-none">Financial Coverage</h3>
                    <p class="text-[9px] text-slate-400 font-bold uppercase tracking-widest mt-1">Insurance details and initial deposits</p>
                </div>
            </div>

            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
                <div class="md:col-span-2 lg:col-span-2">
                    <label class="text-[11px] font-black text-amber-600 uppercase tracking-wider px-1 mb-3 block">Coverage Status</label>
                    <div class="flex items-center gap-8">
                        <label class="flex items-center gap-3 cursor-pointer group">
                            <input type="radio" name="has_insurance" value="0" x-model="formData.has_insurance" class="h-6 w-6 text-indigo-600 border-slate-300 focus:ring-indigo-500 transition-all">
                            <span class="text-sm font-black text-slate-700 group-hover:text-slate-900 uppercase">Self / Cash</span>
                        </label>
                        <label class="flex items-center gap-3 cursor-pointer group">
                            <input type="radio" name="has_insurance" value="1" x-model="formData.has_insurance" class="h-6 w-6 text-indigo-600 border-slate-300 focus:ring-indigo-500 transition-all">
                            <span class="text-sm font-black text-slate-700 group-hover:text-slate-900 uppercase">Corporate / Insurance</span>
                        </label>
                    </div>
                </div>

                <div class="space-y-2" x-show="formData.has_insurance == '1'" x-transition>
                    <label class="text-[11px] font-black text-slate-600 uppercase tracking-wider px-1">Insurance Company</label>
                    <select name="insurance_id" x-model="formData.insurance_id"
                            class="w-full px-6 py-4 bg-white border border-slate-200 rounded-2xl text-sm font-bold text-slate-900 focus:ring-4 focus:ring-indigo-500/10 focus:border-indigo-500 transition-all outline-none shadow-sm">
                        <option value="">Select Partner</option>
                        @foreach($insurances as $ins)
                            <option value="{{ $ins->id }}">{{ $ins->company_name }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="space-y-2" x-show="formData.has_insurance == '1'" x-transition>
                    <label class="text-[11px] font-black text-slate-600 uppercase tracking-wider px-1">TPA Details</label>
                    <input type="text" name="tpa_name" x-model="formData.tpa_name"
                           placeholder="Enter TPA Name"
                           class="w-full px-6 py-4 bg-white border border-slate-200 rounded-2xl text-sm font-bold text-slate-900 focus:ring-4 focus:ring-indigo-500/10 focus:border-indigo-500 transition-all outline-none shadow-sm">
                </div>

                <div class="md:col-span-1 lg:col-span-2 space-y-2">
                    <label class="text-[11px] font-black text-slate-600 uppercase tracking-wider px-1">Account Category</label>
                    <input type="text" name="client_type" x-model="formData.client_type"
                           placeholder="e.g. Corporate, Staff, Private"
                           class="w-full px-6 py-4 bg-white border border-slate-200 rounded-2xl text-sm font-bold text-slate-900 focus:ring-4 focus:ring-indigo-500/10 focus:border-indigo-500 transition-all outline-none shadow-sm">
                </div>
                <div class="md:col-span-1 lg:col-span-2 space-y-2">
                    <label class="text-[11px] font-black text-indigo-600 uppercase tracking-wider px-1">Advance Collected (₹)</label>
                    <input type="number" step="0.01" name="advance_amount" x-model="formData.advance_amount"
                           placeholder="0.00"
                           class="w-full px-6 py-4 bg-white border border-indigo-100 rounded-2xl text-base font-black text-indigo-700 focus:ring-4 focus:ring-indigo-500/10 focus:border-indigo-500 transition-all outline-none shadow-sm">
                </div>
            </div>
        </div>

        <!-- Section 5: Protocols & Submission -->
        <div class="bg-slate-900 rounded-[40px] p-10 text-white shadow-2xl shadow-indigo-100 relative overflow-hidden italic">
            <div class="relative z-10">
                <div class="flex flex-col lg:flex-row items-center justify-between gap-12">
                    <div class="flex-1 w-full space-y-8">
                        <h4 class="text-xs font-black text-indigo-400 uppercase tracking-[0.3em]">Admission Protocols</h4>
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                            <div class="flex items-center justify-between p-6 rounded-3xl bg-white/5 border border-white/5 group hover:bg-white transition-all cursor-pointer" @click="formData.is_operated = !formData.is_operated">
                                <div>
                                    <p class="text-[10px] font-black text-slate-400 uppercase tracking-widest group-hover:text-indigo-600 transition-colors">Surgical Case</p>
                                    <p class="text-sm font-bold text-slate-200 group-hover:text-slate-900 transition-colors">Mark for Surgery?</p>
                                </div>
                                <div class="h-8 w-8 rounded-xl border-2 border-white/20 flex items-center justify-center transition-all" :class="formData.is_operated ? 'bg-indigo-500 border-indigo-500' : ''">
                                    <svg x-show="formData.is_operated" class="h-5 w-5 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M5 13l4 4L19 7"/></svg>
                                </div>
                                <input type="hidden" name="is_operated" :value="formData.is_operated ? 1 : 0">
                            </div>

                            <div class="flex items-center justify-between p-6 rounded-3xl bg-white/5 border border-white/5 group hover:bg-white transition-all cursor-pointer" @click="formData.is_isolated = !formData.is_isolated">
                                <div>
                                    <p class="text-[10px] font-black text-rose-400 uppercase tracking-widest group-hover:text-rose-600 transition-colors">Isolation Case</p>
                                    <p class="text-sm font-bold text-slate-200 group-hover:text-slate-900 transition-colors">Need Isolation Ward?</p>
                                </div>
                                <div class="h-8 w-8 rounded-xl border-2 border-white/20 flex items-center justify-center transition-all" :class="formData.is_isolated ? 'bg-rose-500 border-rose-500' : ''">
                                    <svg x-show="formData.is_isolated" class="h-5 w-5 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M5 13l4 4L19 7"/></svg>
                                </div>
                                <input type="hidden" name="is_isolated" :value="formData.is_isolated ? 1 : 0">
                            </div>
                        </div>
                    </div>

                    <div class="flex-1 w-full lg:max-w-md">
                        <button type="submit" 
                                :disabled="!isAvailable"
                                :class="!isAvailable ? 'opacity-50 grayscale cursor-not-allowed bg-slate-700' : 'bg-indigo-600 hover:bg-white hover:text-indigo-600 shadow-2xl shadow-indigo-950'"
                                class="w-full py-8 rounded-[2.5rem] text-sm font-black uppercase tracking-[0.2em] transition-all flex items-center justify-center gap-4 active:scale-95 group">
                            <svg class="h-5 w-5 transition-transform group-hover:rotate-12" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
                            Complete Admission
                        </button>
                        
                        <!-- Availability Warning -->
                        <div x-show="!isAvailable" x-transition class="mt-6 p-6 bg-rose-50/10 border border-rose-500/20 rounded-3xl italic animate-pulse">
                            <div class="flex gap-4 text-rose-400">
                                <svg class="h-6 w-6 shrink-0" 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>
                                <p class="text-[11px] font-bold uppercase tracking-widest leading-tight" x-text="availabilityMessage"></p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="absolute -top-24 -left-24 w-96 h-96 bg-indigo-600/10 rounded-full blur-[100px]"></div>
        </div>

        <!-- Audit Note (Full Width) -->
        <div class="bg-amber-50 rounded-[40px] p-8 italic border border-amber-100 shadow-sm shadow-amber-50/50">
            <div class="flex items-center gap-6">
                <div class="h-14 w-14 bg-amber-200 text-amber-900 rounded-2xl flex items-center justify-center shrink-0 shadow-lg shadow-amber-100/50">
                    <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="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
                </div>
                <div>
                    <p class="text-xs font-black text-amber-900 uppercase tracking-widest mb-1">Administrative Alert</p>
                    <p class="text-sm text-amber-700/80 leading-relaxed font-bold">Ensure the Advance Payment is physically received and a system receipt is generated before clinical handover.</p>
                </div>
            </div>
        </div>
    </form>
</div>

@push('scripts')
<script>
function ipdForm() {
    return {
        searchQuery: '',
        results: [],
        showResults: false,
        photoPreview: null,
        ipdNumberPreview: '{{ $ipdNumberPreview }}',
        room_type_id: '',
        isAvailable: true,
        availabilityMessage: '',
        
        async init() {
            await this.checkAvailability();
        },
        formData: {
            patient_id: '',
            uhid: '',
            full_name: '',
            spouse_name: '',
            gender: '',
            age: '',
            mobile_number: '',
            address: '',
            admission_date: '{{ old('admission_date', $defaultDate) }}',
            admission_time: '{{ old('admission_time', $defaultTime) }}',
            previous_id: '',
            doctor_id: '',
            referral_source_id: '',
            pro_id: '',
            history: '',
            has_insurance: '0',
            insurance_id: '',
            tpa_name: '',
            client_type: '',
            advance_amount: '0.00',
            is_operated: false,
            is_day_ended: false,
            is_isolated: false,
            bed_id: '',
            room_id: ''
        },

        getSelectedBedRoomId() {
            const bedMap = {
                @foreach($beds as $bed)
                    '{{ $bed->id }}': '{{ $bed->room_id }}',
                @endforeach
            };
            return bedMap[this.formData.bed_id] || '';
        },

        async checkAvailability() {
            try {
                const response = await fetch(`{{ route('branch.ipd-registrations.check-availability') }}?date=${this.formData.admission_date}`);
                const data = await response.json();
                this.isAvailable = data.available;
                this.availabilityMessage = data.message || '';
            } catch (error) {
                console.error('Availability check failed', error);
            }
        },

        async searchPatients() {
            if (this.searchQuery.length < 3) {
                this.results = [];
                this.showResults = false;
                return;
            }
            try {
                const response = await fetch(`{{ route('branch.ipd-registrations.search') }}?q=${encodeURIComponent(this.searchQuery)}`);
                this.results = await response.json();
                this.showResults = true;
            } catch (error) {
                console.error('Search failed', error);
            }
        },

        selectPatient(p) {
            this.formData.patient_id = p.id;
            this.formData.uhid = p.uhid;
            this.formData.full_name = p.full_name;
            this.formData.spouse_name = p.spouse_name;
            this.formData.gender = p.gender;
            this.formData.age = p.age;
            this.formData.mobile_number = p.mobile_number;
            this.formData.address = p.address;
            this.photoPreview = p.photo_url;
            this.showResults = false;
            this.results = [];
            this.searchQuery = p.full_name;
        },

        handlePhotoUpload(e) {
            const file = e.target.files[0];
            if (!file) return;
            
            const reader = new FileReader();
            reader.onload = (f) => {
                this.photoPreview = f.target.result;
            };
            reader.readAsDataURL(file);
        },
        resetPatientSelection() {
            this.formData.patient_id = '';
            this.formData.uhid = '';
            this.formData.full_name = '';
            this.formData.spouse_name = '';
            this.formData.gender = '';
            this.formData.age = '';
            this.formData.mobile_number = '';
            this.formData.address = '';
            this.photoPreview = null;
            this.searchQuery = '';
            this.results = [];
            this.showResults = false;
        }
    }
}
</script>
@endpush
@endsection