@extends('layouts.branch')

@section('title', "Registration Details")
@section('header', "OPD Visit Summary")

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

    <!-- Header Stats -->
    <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
        <div class="bg-white p-8 rounded-[40px] shadow-sm border border-slate-100 italic">
            <p class="text-[10px] text-slate-400 font-black uppercase tracking-widest mb-1">OPD Number</p>
            <h3 class="text-3xl font-black text-slate-800 tracking-tighter uppercase leading-none">{{ $opdRegistration->opd_number }}</h3>
        </div>
        <div class="bg-white p-8 rounded-[40px] shadow-sm border border-slate-100 italic">
            <p class="text-[10px] text-slate-400 font-black uppercase tracking-widest mb-1">UHID</p>
            <h3 class="text-3xl font-black text-indigo-600 tracking-tighter uppercase leading-none">{{ $opdRegistration->uhid }}</h3>
        </div>
        <div class="p-8 rounded-[40px] shadow-2xl shadow-indigo-100 italic text-white {{ $opdRegistration->status === 'cancelled' ? 'bg-rose-600' : 'bg-slate-900' }}">
            <p class="text-[10px] {{ $opdRegistration->status === 'cancelled' ? 'text-rose-100' : 'text-indigo-400' }} font-black uppercase tracking-widest mb-1">Visit Status</p>
            <div class="flex items-center gap-2">
                <div class="h-3 w-3 rounded-full {{ $opdRegistration->status === 'cancelled' ? 'bg-white' : 'bg-emerald-500 animate-pulse' }}"></div>
                <h3 class="text-2xl font-black tracking-tighter uppercase leading-none">{{ $opdRegistration->status }}</h3>
            </div>
        </div>
    </div>

    @if($opdRegistration->status === 'cancelled')
        <div class="bg-rose-50 border border-rose-100 p-8 rounded-[40px] italic shadow-lg shadow-rose-100/20 relative overflow-hidden group">
            <div class="relative z-10 flex items-start gap-6">
                <div class="h-16 w-16 bg-rose-600 text-white rounded-3xl flex items-center justify-center shadow-2xl shadow-rose-200 shrink-0">
                    <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="M6 18L18 6M6 6l12 12"/></svg>
                </div>
                <div>
                    <h4 class="text-xl font-black text-rose-900 uppercase tracking-tighter leading-none">Registration Voided</h4>
                    <p class="text-[10px] text-rose-400 font-bold uppercase tracking-widest mt-2">Reason: <span class="text-rose-700 italic">"{{ $opdRegistration->cancel_reason }}"</span></p>
                    <p class="text-[9px] text-rose-300 font-medium uppercase tracking-widest mt-2 italic">Cancelled on {{ $opdRegistration->cancelled_at->format('d M, Y \a\t h:i A') }}</p>
                </div>
            </div>
            <div class="absolute -top-10 -right-10 w-40 h-40 bg-rose-100/50 rounded-full blur-3xl transition-transform group-hover:scale-110"></div>
        </div>
    @endif

    <div class="grid grid-cols-1 lg:grid-cols-12 gap-8">
        <!-- Left: Patient & Clinical Info -->
        <div class="lg:col-span-8 space-y-8">
            <!-- 1. Patient Profile -->
            <div class="bg-white p-10 rounded-[40px] shadow-sm border border-slate-100 italic">
                <div class="flex items-center gap-4 mb-10 pb-10 border-b border-slate-50">
                    <div class="h-20 w-20 rounded-[2.5rem] bg-slate-900 flex items-center justify-center text-white overflow-hidden shadow-2xl shadow-slate-200">
                        @if($opdRegistration->patient?->photo_path)
                            <img src="{{ asset('storage/' . $opdRegistration->patient->photo_path) }}" class="h-full w-full object-cover">
                        @else
                            <span class="text-2xl font-black">{{ substr($opdRegistration->full_name, 0, 1) }}</span>
                        @endif
                    </div>
                    <div>
                        <h4 class="text-3xl font-black text-slate-800 tracking-tighter uppercase leading-none">{{ $opdRegistration->full_name }}</h4>
                        <p class="text-[10px] text-slate-400 font-bold uppercase tracking-widest mt-2">
                            {{ $opdRegistration->gender }} • {{ $opdRegistration->age }} • {{ $opdRegistration->mobile_number }}
                        </p>
                    </div>
                </div>

                <div class="grid grid-cols-1 md:grid-cols-2 gap-10">
                    <div class="space-y-4">
                        <div class="flex items-center gap-3">
                            <div class="h-8 w-8 rounded-xl bg-slate-50 flex items-center justify-center text-slate-400">
                                <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="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>
                                <p class="text-[9px] text-slate-400 font-black uppercase tracking-widest">Guardian Name</p>
                                <p class="text-sm font-bold text-slate-700 leading-none mt-1">{{ $opdRegistration->guardian_name ?: '--' }}</p>
                            </div>
                        </div>
                        <div class="flex items-center gap-3">
                            <div class="h-8 w-8 rounded-xl bg-slate-50 flex items-center justify-center text-slate-400">
                                <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="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"/></svg>
                            </div>
                            <div>
                                <p class="text-[9px] text-slate-400 font-black uppercase tracking-widest">Address</p>
                                <p class="text-sm font-bold text-slate-700 leading-tight mt-1">{{ $opdRegistration->address }} {{ $opdRegistration->city }} {{ $opdRegistration->state }}</p>
                            </div>
                        </div>
                    </div>

                    <div class="space-y-4">
                        <div class="flex items-center gap-3">
                            <div class="h-8 w-8 rounded-xl bg-slate-50 flex items-center justify-center text-slate-400">
                                <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="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>
                                <p class="text-[9px] text-slate-400 font-black uppercase tracking-widest">Emergency Contact</p>
                                <p class="text-sm font-bold text-slate-700 leading-none mt-1">{{ $opdRegistration->emergency_contact_name }} ({{ $opdRegistration->emergency_contact_phone }})</p>
                            </div>
                        </div>
                        <div class="flex items-center gap-3">
                            <div class="h-8 w-8 rounded-xl bg-slate-50 flex items-center justify-center text-slate-400">
                                <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 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
                            </div>
                            <div>
                                <p class="text-[9px] text-slate-400 font-black uppercase tracking-widest">Registered At</p>
                                <p class="text-sm font-bold text-slate-700 leading-none mt-1">{{ $opdRegistration->visit_date->format('d M, Y') }} • {{ $opdRegistration->visit_time }}</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 2. Clinical Vitals -->
            <div class="bg-white p-10 rounded-[40px] shadow-sm border border-slate-100 italic">
                <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">
                        <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>
                        <h4 class="text-xl font-black text-slate-800 uppercase tracking-tighter leading-none">Clinical Vitals</h4>
                        <p class="text-[9px] text-slate-400 font-bold uppercase tracking-widest mt-1">Visit-specific medical snapshots</p>
                    </div>
                </div>

                <div class="grid grid-cols-2 md:grid-cols-4 gap-8">
                    <div class="p-6 bg-slate-50 rounded-[30px] text-center border border-slate-100/50">
                        <p class="text-[8px] text-slate-400 font-black uppercase tracking-[0.2em] mb-2">Weight</p>
                        <p class="text-2xl font-black text-slate-800 tracking-tighter">{{ $opdRegistration->weight ?: '--' }}<span class="text-xs text-slate-400 ml-1">KG</span></p>
                    </div>
                    <div class="p-6 bg-slate-50 rounded-[30px] text-center border border-slate-100/50">
                        <p class="text-[8px] text-slate-400 font-black uppercase tracking-[0.2em] mb-2">Height</p>
                        <p class="text-2xl font-black text-slate-800 tracking-tighter">{{ $opdRegistration->height ?: '--' }}<span class="text-xs text-slate-400 ml-1">CM</span></p>
                    </div>
                    <div class="p-6 bg-slate-50 rounded-[30px] text-center border border-slate-100/50">
                        <p class="text-[8px] text-slate-400 font-black uppercase tracking-[0.2em] mb-2">Blood Pressure</p>
                        <p class="text-2xl font-black text-rose-600 tracking-tighter">{{ $opdRegistration->bp ?: '--' }}</p>
                    </div>
                    <div class="p-6 bg-slate-50 rounded-[30px] text-center border border-slate-100/50">
                        <p class="text-[8px] text-slate-400 font-black uppercase tracking-[0.2em] mb-2">Temp</p>
                        <p class="text-2xl font-black text-slate-800 tracking-tighter">{{ $opdRegistration->temperature ?: '--' }}<span class="text-xs text-slate-400 ml-1">°C</span></p>
                    </div>
                </div>

                <div class="mt-8 p-8 bg-indigo-50/30 rounded-[30px] border border-indigo-50/50">
                    <p class="text-[9px] text-indigo-400 font-black uppercase tracking-widest mb-2">Chief Complaint</p>
                    <p class="text-sm font-bold text-slate-700 leading-relaxed">{{ $opdRegistration->chief_complaint ?: 'No complaint recorded' }}</p>
                </div>
            </div>
        </div>

        <!-- Right: Professional Linkage & Billing -->
        <div class="lg:col-span-4 space-y-8">
            <!-- Professional Assignment -->
            <div class="bg-indigo-600 p-10 rounded-[40px] text-white shadow-2xl shadow-indigo-200 italic">
                <div class="flex items-center gap-3 mb-8">
                    <div class="h-10 w-10 bg-white/20 rounded-2xl flex items-center justify-center">
                        <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>
                    <h4 class="text-sm font-black uppercase tracking-widest leading-none">Consulting Detail</h4>
                </div>

                <div class="space-y-6">
                    <div>
                        <p class="text-[9px] text-indigo-200 font-black uppercase tracking-widest">Doctor</p>
                        <p class="text-lg font-black tracking-tight mt-1">{{ $opdRegistration->doctor->name }}</p>
                    </div>
                    <div>
                        <p class="text-[9px] text-indigo-200 font-black uppercase tracking-widest">Department</p>
                        <p class="text-lg font-black tracking-tight mt-1">{{ $opdRegistration->charge->department->name }}</p>
                    </div>
                    <div>
                        <p class="text-[9px] text-indigo-200 font-black uppercase tracking-widest">Visit Category</p>
                        <p class="text-lg font-black tracking-tight mt-1">{{ $opdRegistration->visit_type }}</p>
                    </div>
                </div>
            </div>

            <!-- Billing Summary -->
            <div class="bg-white p-10 rounded-[40px] shadow-sm border border-slate-100 italic">
                <p class="text-[10px] text-slate-400 font-black uppercase tracking-widest mb-6">Payment Overview</p>
                
                <div class="space-y-6">
                    <div class="flex justify-between items-center border-b border-slate-50 pb-4">
                        <span class="text-xs font-black text-slate-400 uppercase tracking-widest">Category</span>
                        <span class="px-3 py-1 bg-slate-900 text-white text-[9px] font-black uppercase tracking-widest rounded-lg">{{ $opdRegistration->patient_category }}</span>
                    </div>
                    <div class="flex justify-between items-center border-b border-slate-50 pb-4">
                        <span class="text-xs font-black text-slate-400 uppercase tracking-widest">Consult Fee</span>
                        <span class="text-sm font-black text-slate-800 tabular-nums">₹{{ number_format($opdRegistration->charge_amount, 2) }}</span>
                    </div>

                    @if($opdRegistration->is_complimentary)
                        <div class="flex justify-between items-center border-b border-slate-50 pb-4">
                            <span class="text-xs font-black text-emerald-600 uppercase tracking-widest italic">Complimentary</span>
                            <span class="text-sm font-black text-emerald-600 uppercase tabular-nums">-₹{{ number_format($opdRegistration->charge_amount, 2) }}</span>
                        </div>
                    @elseif($opdRegistration->discount_amount > 0)
                        <div class="flex justify-between items-center border-b border-slate-50 pb-4">
                            <span class="text-xs font-black text-rose-500 uppercase tracking-widest italic">Discount</span>
                            <span class="text-sm font-black text-rose-500 tabular-nums">-₹{{ number_format($opdRegistration->discount_amount, 2) }}</span>
                        </div>
                    @endif

                    <div class="flex justify-between items-center border-b border-slate-50 pb-4">
                        <span class="text-xs font-black text-slate-400 uppercase tracking-widest">Payment Mode</span>
                        <span class="text-sm font-black text-slate-800 uppercase tabular-nums">{{ $opdRegistration->payment_mode }}</span>
                    </div>
                    <div class="flex justify-between items-center pt-2">
                        <span class="text-xs font-black text-indigo-600 uppercase tracking-widest">Net Payable</span>
                        <span class="text-3xl font-black text-indigo-600 tabular-nums tracking-tighter">
                            ₹{{ number_format($opdRegistration->is_complimentary ? 0 : ($opdRegistration->charge_amount - $opdRegistration->discount_amount), 2) }}
                        </span>
                    </div>
                </div>

                @if($opdRegistration->is_complimentary)
                    <div class="mt-6 p-6 bg-emerald-50 rounded-[30px] border border-emerald-100">
                        <p class="text-[9px] text-emerald-600 font-black uppercase tracking-widest mb-1">Complimentary Remarks</p>
                        <p class="text-xs font-bold text-slate-700 leading-relaxed italic">"{{ $opdRegistration->complimentary_remarks }}"</p>
                    </div>
                @endif

                @if($opdRegistration->remarks)
                    <div class="mt-6 p-6 bg-indigo-50/30 rounded-[30px] border border-indigo-50/30">
                        <p class="text-[9px] text-indigo-400 font-black uppercase tracking-widest mb-1">General Remarks</p>
                        <p class="text-xs font-bold text-slate-600 leading-relaxed">{{ $opdRegistration->remarks }}</p>
                    </div>
                @endif

                @if($opdRegistration->patient_category !== 'General')
                    <div class="mt-10 p-6 bg-amber-50 rounded-[30px] border border-amber-100/50">
                        <p class="text-[9px] text-amber-600 font-black uppercase tracking-widest mb-2">Coverage Detail</p>
                        <p class="text-[11px] font-bold text-amber-800 leading-tight">
                            Provider: {{ $opdRegistration->insurance_provider }}<br>
                            Policy: {{ $opdRegistration->policy_id }}
                        </p>
                    </div>
                @endif
            </div>

    <div x-data="{ showCancelModal: false, reason: '' }" class="relative z-10">
        <div class="flex flex-col gap-4">
            @if($opdRegistration->status === 'active')
                <a href="{{ route('branch.registrations.print', $opdRegistration->id) }}" target="_blank" class="w-full py-5 bg-emerald-600 text-white rounded-3xl font-black uppercase tracking-widest text-xs flex items-center justify-center gap-2 shadow-2xl shadow-emerald-100 transition-all hover:bg-emerald-700">
                    <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="M17 17h2a2 2 0 002-2v-4a2 2 0 00-2-2H5a2 2 0 00-2 2v4a2 2 0 002 2h2m2 4h6a2 2 0 002-2v-4a2 2 0 00-2-2H9a2 2 0 00-2 2v4a2 2 0 002 2zm8-12V5a2 2 0 00-2-2H9a2 2 0 00-2 2v4h10z"/></svg>
                    Print Receipt
                </a>
                <button type="button" @click="showCancelModal = true" class="w-full py-5 bg-rose-600 text-white rounded-3xl font-black uppercase tracking-widest text-xs flex items-center justify-center gap-2 shadow-2xl shadow-rose-100 transition-all hover:bg-rose-700">
                    <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="M6 18L18 6M6 6l12 12"/></svg>
                    Cancel Visit
                </button>
            @endif
            <button onclick="window.print()" class="w-full py-5 bg-slate-900 text-white rounded-3xl font-black uppercase tracking-widest text-xs flex items-center justify-center gap-2 shadow-2xl shadow-slate-200 transition-all hover:bg-slate-800">
                <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="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"/></svg>
                Print Case Sheet
            </button>
            <a href="{{ route('branch.registrations.index') }}" class="w-full py-5 border border-slate-200 text-slate-500 rounded-3xl font-black uppercase tracking-widest text-xs text-center hover:bg-slate-50 transition-all">Back to Log</a>
        </div>

        <!-- Inline Modal -->
        <div x-show="showCancelModal" x-cloak
             class="fixed inset-0 z-50 flex items-center justify-center p-6 bg-slate-900/60 backdrop-blur-sm italic">
            <div class="bg-white w-full max-w-md rounded-[40px] shadow-2xl overflow-hidden animate-in zoom-in-95 duration-200">
                <div class="p-8 bg-rose-600 text-white relative h-32 flex flex-col justify-center">
                    <div class="absolute top-0 right-0 w-32 h-32 bg-white/10 rounded-full blur-3xl -mr-16 -mt-16"></div>
                    <h4 class="text-2xl font-black uppercase tracking-tighter leading-none relative z-10">Cancel Visit</h4>
                    <p class="text-[10px] font-black uppercase tracking-[0.2em] opacity-80 mt-2 relative z-10">Void this registration record</p>
                </div>
                
                <form action="{{ route('branch.registrations.cancel', $opdRegistration->id) }}" method="POST" class="p-10 space-y-8">
                    @csrf
                    <div class="space-y-3">
                        <label class="text-[10px] font-black text-slate-400 uppercase tracking-widest px-1">Reason for Cancellation <span class="text-rose-600">*</span></label>
                        <textarea name="cancel_reason" x-model="reason" required
                                  class="w-full px-6 py-4 bg-slate-50 border border-slate-100 rounded-2xl text-sm font-bold focus:ring-2 focus:ring-rose-500 transition-all outline-none min-h-[120px]"
                                  placeholder="e.g. Doctor unavailable, patient left, double entry..."></textarea>
                    </div>

                    <div class="flex items-center gap-4">
                        <button type="button" @click="showCancelModal = false" class="flex-1 py-4 bg-slate-100 text-slate-500 rounded-3xl font-black uppercase tracking-widest text-[11px] hover:bg-slate-200 transition-all">
                            Keep Visit
                        </button>
                        <button type="submit" :disabled="!reason.trim()" 
                                :class="!reason.trim() ? 'opacity-50 cursor-not-allowed bg-rose-300' : 'bg-rose-600 hover:bg-rose-700 shadow-xl shadow-rose-100'"
                                class="flex-1 py-4 text-white rounded-3xl font-black uppercase tracking-widest text-[11px] transition-all flex items-center justify-center gap-2">
                            Confirm Cancel
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
@endsection