@extends('layouts.branch')

@section('title', 'Generate Discharge Summary')
@section('header', 'Clinical Summary')

@section('content')
<div class="space-y-6 italic" x-data="{ tabs: 'clinical' }">
    @include('partials.branch._breadcrumbs', [
        'breadcrumbs' => [
            ['name' => 'IPD History', 'url' => route('branch.ipd-registrations.history')],
            ['name' => 'Discharge Summary', 'url' => '#']
        ]
    ])

    <form action="{{ route('branch.ipd-discharge-summaries.store', $registration->id) }}" method="POST">
        @csrf
        
        <!-- Header: Patient Context -->
        <div class="bg-white rounded-[2rem] shadow-sm border border-slate-100 overflow-hidden mb-6">
            <div class="bg-slate-900 p-8 text-white flex flex-col md:flex-row justify-between items-center gap-6">
                <div class="flex items-center gap-6">
                    <div class="h-16 w-16 bg-indigo-600 rounded-2xl flex items-center justify-center font-black text-2xl">
                        {{ substr($registration->full_name, 0, 1) }}
                    </div>
                    <div>
                        <h2 class="text-2xl font-black tracking-tight uppercase">{{ $registration->full_name }}</h2>
                        <div class="flex flex-wrap gap-3 mt-1">
                            <span class="text-[9px] font-black text-slate-400 uppercase tracking-widest">UHID: {{ $registration->uhid }}</span>
                            <span class="text-[9px] font-black text-slate-400 uppercase tracking-widest">IPD No: {{ $registration->ipd_number }}</span>
                            <span class="text-[9px] font-black text-slate-400 uppercase tracking-widest">{{ $registration->gender }} / {{ $registration->age }} Yrs</span>
                        </div>
                    </div>
                </div>
                <div class="text-right">
                    <p class="text-[10px] font-black uppercase tracking-widest text-slate-400">Admission Date</p>
                    <p class="text-lg font-black mt-1">{{ $registration->admission_date->format('d M, Y') }} • {{ $registration->admission_time }}</p>
                </div>
            </div>

            <div class="p-8 grid grid-cols-1 md:grid-cols-4 gap-6 bg-slate-50/50">
                <div class="bg-white p-4 rounded-2xl border border-slate-100 shadow-sm">
                    <p class="text-[8px] font-black text-slate-400 uppercase tracking-widest mb-1">Room/Bed</p>
                    <p class="text-xs font-black text-slate-700 uppercase">{{ $registration->room?->room_number }} / {{ $registration->bed?->bed_number }}</p>
                </div>
                <div class="bg-white p-4 rounded-2xl border border-slate-100 shadow-sm">
                    <p class="text-[8px] font-black text-slate-400 uppercase tracking-widest mb-1">Consultant</p>
                    <p class="text-xs font-black text-slate-700 uppercase">{{ $registration->doctor?->name }}</p>
                </div>
                <div class="bg-white p-4 rounded-2xl border border-slate-100 shadow-sm">
                    <p class="text-[8px] font-black text-slate-400 uppercase tracking-widest mb-1">Discharge Date</p>
                    <p class="text-xs font-black text-indigo-600 uppercase">{{ $registration->discharge?->discharge_date->format('d M, Y') ?? 'NOT SET' }}</p>
                </div>
                <div class="bg-white p-4 rounded-2xl border border-slate-100 shadow-sm">
                    <p class="text-[8px] font-black text-slate-400 uppercase tracking-widest mb-1 italic">Summary Status</p>
                    <span class="px-2 py-0.5 rounded-lg text-[8px] font-black uppercase {{ $summary ? 'bg-emerald-100 text-emerald-700' : 'bg-amber-100 text-amber-700' }}">
                        {{ $summary ? 'Completed' : 'Pending' }}
                    </span>
                </div>
            </div>
        </div>

        <!-- 12-Fields Grid (Clinical Summary) -->
        <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
            <!-- Left Column -->
            <div class="space-y-6">
                <!-- 1. Final Diagnosis -->
                <div class="bg-white p-6 rounded-[2rem] shadow-sm border border-slate-100 group">
                    <label class="flex items-center gap-3 text-[10px] font-black text-slate-400 uppercase tracking-widest mb-4 group-focus-within:text-indigo-600 transition-colors">
                        <span class="flex items-center justify-center w-5 h-5 bg-slate-100 rounded text-slate-500 text-[8px] font-black">1</span>
                        Final Diagnosis
                    </label>
                    <textarea name="final_diagnosis" rows="3" class="w-full bg-slate-50 border border-slate-100 rounded-2xl p-4 text-xs font-bold text-slate-700 focus:ring-4 focus:ring-indigo-500/10 focus:border-indigo-500 outline-none transition-all placeholder:text-slate-200" placeholder="Enter findings...">{{ old('final_diagnosis', $summary?->final_diagnosis) }}</textarea>
                </div>

                <!-- 2. Presenting Complaints -->
                <div class="bg-white p-6 rounded-[2rem] shadow-sm border border-slate-100 group">
                    <label class="flex items-center gap-3 text-[10px] font-black text-slate-400 uppercase tracking-widest mb-4 group-focus-within:text-indigo-600 transition-colors">
                        <span class="flex items-center justify-center w-5 h-5 bg-slate-100 rounded text-slate-500 text-[8px] font-black">2</span>
                        Presenting Complaints
                    </label>
                    <textarea name="present_complaints" rows="3" class="w-full bg-slate-50 border border-slate-100 rounded-2xl p-4 text-xs font-bold text-slate-700 focus:ring-4 focus:ring-indigo-500/10 focus:border-indigo-500 outline-none transition-all placeholder:text-slate-200" placeholder="History at admission...">{{ old('present_complaints', $summary?->present_complaints ?? $registration->history) }}</textarea>
                </div>

                <!-- 3. Past Medical History -->
                <div class="bg-white p-6 rounded-[2rem] shadow-sm border border-slate-100 group">
                    <label class="flex items-center gap-3 text-[10px] font-black text-slate-400 uppercase tracking-widest mb-4 group-focus-within:text-indigo-600 transition-colors">
                        <span class="flex items-center justify-center w-5 h-5 bg-slate-100 rounded text-slate-500 text-[8px] font-black">3</span>
                        Past Medical History
                    </label>
                    <textarea name="past_medical_history" rows="2" class="w-full bg-slate-50 border border-slate-100 rounded-2xl p-4 text-xs font-bold text-slate-700 focus:ring-4 focus:ring-indigo-500/10 focus:border-indigo-500 outline-none transition-all placeholder:text-slate-200">{{ old('past_medical_history', $summary?->past_medical_history) }}</textarea>
                </div>

                <!-- 4. Past Surgical History -->
                <div class="bg-white p-6 rounded-[2rem] shadow-sm border border-slate-100 group">
                    <label class="flex items-center gap-3 text-[10px] font-black text-slate-400 uppercase tracking-widest mb-4 group-focus-within:text-indigo-600 transition-colors">
                        <span class="flex items-center justify-center w-5 h-5 bg-slate-100 rounded text-slate-500 text-[8px] font-black">4</span>
                        Past Surgical History
                    </label>
                    <textarea name="past_surgical_history" rows="2" class="w-full bg-slate-50 border border-slate-100 rounded-2xl p-4 text-xs font-bold text-slate-700 focus:ring-4 focus:ring-indigo-500/10 focus:border-indigo-500 outline-none transition-all placeholder:text-slate-200">{{ old('past_surgical_history', $summary?->past_surgical_history) }}</textarea>
                </div>

                <!-- 5. Examination Findings -->
                <div class="bg-white p-6 rounded-[2rem] shadow-sm border border-slate-100 group">
                    <label class="flex items-center gap-3 text-[10px] font-black text-slate-400 uppercase tracking-widest mb-4 group-focus-within:text-indigo-600 transition-colors">
                        <span class="flex items-center justify-center w-5 h-5 bg-slate-100 rounded text-slate-500 text-[8px] font-black">5</span>
                        Examinations Findings on Admission
                    </label>
                    <textarea name="examination_findings" rows="3" class="w-full bg-slate-50 border border-slate-100 rounded-2xl p-4 text-xs font-bold text-slate-700 focus:ring-4 focus:ring-indigo-500/10 focus:border-indigo-500 outline-none transition-all placeholder:text-slate-200">{{ old('examination_findings', $summary?->examination_findings) }}</textarea>
                </div>

                <!-- 6. Hospitalization Summary -->
                <div class="bg-white p-6 rounded-[2rem] shadow-sm border border-slate-100 group">
                    <label class="flex items-center gap-3 text-[10px] font-black text-slate-400 uppercase tracking-widest mb-4 group-focus-within:text-indigo-600 transition-colors">
                        <span class="flex items-center justify-center w-5 h-5 bg-slate-100 rounded text-slate-500 text-[8px] font-black">6</span>
                        Hospitalization Summary
                    </label>
                    <textarea name="hospitalization_summary" rows="4" class="w-full bg-slate-50 border border-slate-100 rounded-2xl p-4 text-xs font-bold text-slate-700 focus:ring-4 focus:ring-indigo-500/10 focus:border-indigo-500 outline-none transition-all placeholder:text-slate-200" placeholder="Summarize course in hospital...">{{ old('hospitalization_summary', $summary?->hospitalization_summary) }}</textarea>
                </div>
            </div>

            <!-- Right Column -->
            <div class="space-y-6">
                <!-- 7. Treatment at Discharge -->
                <div class="bg-white p-6 rounded-[2rem] shadow-sm border border-slate-100 group">
                    <label class="flex items-center gap-3 text-[10px] font-black text-slate-400 uppercase tracking-widest mb-4 group-focus-within:text-rose-600 transition-colors">
                        <span class="flex items-center justify-center w-5 h-5 bg-slate-100 rounded text-slate-500 text-[8px] font-black">7</span>
                        Treatment at Discharge
                    </label>
                    <textarea name="treatment_at_discharge" rows="4" class="w-full bg-rose-50/20 border border-rose-100 rounded-2xl p-4 text-xs font-bold text-slate-700 focus:ring-4 focus:ring-rose-500/10 focus:border-rose-500 outline-none transition-all placeholder:text-slate-200" placeholder="Medicines prescribed...">{{ old('treatment_at_discharge', $summary?->treatment_at_discharge) }}</textarea>
                </div>

                <!-- 8. Condition on Discharge -->
                <div class="bg-white p-6 rounded-[2rem] shadow-sm border border-slate-100 group">
                    <label class="flex items-center gap-3 text-[10px] font-black text-slate-400 uppercase tracking-widest mb-4 group-focus-within:text-indigo-600 transition-colors">
                        <span class="flex items-center justify-center w-5 h-5 bg-slate-100 rounded text-slate-500 text-[8px] font-black">8</span>
                        Condition on Discharge
                    </label>
                    <textarea name="condition_at_discharge" rows="2" class="w-full bg-slate-50 border border-slate-100 rounded-2xl p-4 text-xs font-bold text-slate-700 focus:ring-4 focus:ring-indigo-500/10 focus:border-indigo-500 outline-none transition-all placeholder:text-slate-200">{{ old('condition_at_discharge', $summary?->condition_at_discharge) }}</textarea>
                </div>

                <!-- 9. Follow Up -->
                <div class="bg-white p-6 rounded-[2rem] shadow-sm border border-slate-100 group">
                    <label class="flex items-center gap-3 text-[10px] font-black text-slate-400 uppercase tracking-widest mb-4 group-focus-within:text-indigo-600 transition-colors">
                        <span class="flex items-center justify-center w-5 h-5 bg-slate-100 rounded text-slate-500 text-[8px] font-black">9</span>
                        Follow Up Advice
                    </label>
                    <textarea name="follow_up_advice" rows="2" class="w-full bg-slate-50 border border-slate-100 rounded-2xl p-4 text-xs font-bold text-slate-700 focus:ring-4 focus:ring-indigo-500/10 focus:border-indigo-500 outline-none transition-all placeholder:text-slate-200">{{ old('follow_up_advice', $summary?->follow_up_advice) }}</textarea>
                </div>

                <!-- 10. Advised -->
                <div class="bg-white p-6 rounded-[2rem] shadow-sm border border-slate-100 group">
                    <label class="flex items-center gap-3 text-[10px] font-black text-slate-400 uppercase tracking-widest mb-4 group-focus-within:text-indigo-600 transition-colors">
                        <span class="flex items-center justify-center w-5 h-5 bg-slate-100 rounded text-slate-500 text-[8px] font-black">10</span>
                        Further Advised / Precautions
                    </label>
                    <textarea name="other_advice" rows="2" class="w-full bg-slate-50 border border-slate-100 rounded-2xl p-4 text-xs font-bold text-slate-700 focus:ring-4 focus:ring-indigo-500/10 focus:border-indigo-500 outline-none transition-all placeholder:text-slate-200">{{ old('other_advice', $summary?->other_advice) }}</textarea>
                </div>

                <!-- 11. Investigation Report -->
                <div class="bg-white p-6 rounded-[2rem] shadow-sm border border-slate-100 group">
                    <label class="flex items-center gap-3 text-[10px] font-black text-slate-400 uppercase tracking-widest mb-4 group-focus-within:text-indigo-600 transition-colors">
                        <span class="flex items-center justify-center w-5 h-5 bg-slate-100 rounded text-slate-500 text-[8px] font-black">11</span>
                        Investigation Report Highlights
                    </label>
                    <textarea name="investigation_reports" rows="3" class="w-full bg-slate-50 border border-slate-100 rounded-2xl p-4 text-xs font-bold text-slate-700 focus:ring-4 focus:ring-indigo-500/10 focus:border-indigo-500 outline-none transition-all placeholder:text-slate-200" placeholder="Major findings (Labs, Imaging)...">{{ old('investigation_reports', $summary?->investigation_reports) }}</textarea>
                </div>

                <!-- 12. Urgent Care -->
                <div class="bg-white p-6 rounded-[2rem] shadow-sm border border-slate-100 group">
                    <label class="flex items-center gap-3 text-[10px] font-black text-slate-400 uppercase tracking-widest mb-4 group-focus-within:text-indigo-600 transition-colors">
                        <span class="flex items-center justify-center w-5 h-5 bg-slate-100 rounded text-slate-500 text-[8px] font-black">12</span>
                        When & How to Return for Urgent Care
                    </label>
                    <textarea name="urgent_care_instructions" rows="3" class="w-full bg-slate-50 border border-slate-100 rounded-2xl p-4 text-xs font-bold text-slate-700 focus:ring-4 focus:ring-indigo-500/10 focus:border-indigo-500 outline-none transition-all placeholder:text-slate-200" placeholder="Emergency symptoms to watch for...">{{ old('urgent_care_instructions', $summary?->urgent_care_instructions) }}</textarea>
                </div>
            </div>
        </div>

        <!-- Follow-up Details -->
        <div class="mt-8 bg-white p-8 rounded-[2rem] shadow-sm border border-slate-100">
            <div class="space-y-4">
                <p class="text-[10px] font-black text-slate-400 uppercase tracking-widest flex items-center gap-2">
                    <svg class="h-4 w-4 text-indigo-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/></svg>
                    Scheduled Follow-up Date
                </p>
                <div class="flex flex-col md:flex-row gap-8 items-end">
                    <input type="date" name="follow_up_date" value="{{ old('follow_up_date', $summary?->follow_up_date?->format('Y-m-d')) }}" 
                           class="flex-1 bg-slate-50 border border-slate-100 rounded-2xl px-6 py-4 text-xs font-black uppercase tracking-widest text-slate-700 focus:ring-4 focus:ring-indigo-500/10 focus:border-indigo-500 transition-all">
                    
                    <button type="submit" class="px-12 py-4 bg-slate-900 text-white rounded-2xl text-[10px] font-black uppercase tracking-widest hover:bg-indigo-600 shadow-xl shadow-slate-200 transition-all">
                        Save Summary
                    </button>
                </div>
            </div>
        </div>
    </form>
</div>
@endsection