@extends('layouts.branch')

@section('title', 'Dashboard')
@section('header', 'Branch Dashboard')

@section('content')
<div class="space-y-6">
@push('header_extra')
<div class="flex items-center bg-slate-50 border border-slate-100 px-4 py-2 rounded-2xl">
    <div class="mr-3">
        <p class="text-[10px] font-black text-slate-400 uppercase tracking-widest leading-none">Branch Unit</p>
        <p class="text-xs font-black text-slate-700 uppercase tracking-tight mt-1">{{ auth()->guard('branch')->user()->name }}</p>
    </div>
    <div class="h-8 w-px bg-slate-200"></div>
    <div class="ml-3">
        <p class="text-[10px] font-black text-slate-400 uppercase tracking-widest leading-none">Code</p>
        <p class="text-xs font-black text-indigo-600 uppercase mt-1">{{ auth()->guard('branch')->user()->outlet_code }}</p>
    </div>
</div>
@endpush

    <!-- Today's Stats -->
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 mb-8">
        <div class="bg-white border border-slate-100 rounded-[2rem] p-6 shadow-sm shadow-slate-200 flex items-center justify-between">
            <div>
                <p class="text-[10px] font-black text-slate-400 uppercase tracking-[0.2em] mb-1">OPD {{ $selectedDate === today()->format('Y-m-d') ? 'Today' : 'Count' }}</p>
                <p class="text-3xl font-black text-slate-800 tracking-tighter">{{ number_format($todayOpdCount) }}</p>
            </div>
            <div class="h-12 w-12 rounded-2xl bg-indigo-50 flex items-center justify-center text-indigo-500">
                <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>
        <div class="bg-white border border-slate-100 rounded-[2rem] p-6 shadow-sm shadow-slate-200 flex items-center justify-between">
            <div>
                <p class="text-[10px] font-black text-slate-400 uppercase tracking-[0.2em] mb-1">Called</p>
                <p class="text-3xl font-black text-blue-600 tracking-tighter">{{ number_format($todayCalledCount) }}</p>
            </div>
            <div class="h-12 w-12 rounded-2xl bg-blue-50 flex items-center justify-center text-blue-500">
                <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="M15.536 8.464a5 5 0 010 7.072m2.828-9.9a9 9 0 010 12.728M5.586 15H4a1 1 0 01-1-1v-4a1 1 0 011-1h1.586l4.707-4.707C10.923 3.663 12 4.109 12 5v14c0 .891-1.077 1.337-1.707.707L5.586 15z"/></svg>
            </div>
        </div>
        <div class="bg-white border border-slate-100 rounded-[2rem] p-6 shadow-sm shadow-slate-200 flex items-center justify-between">
            <div>
                <p class="text-[10px] font-black text-slate-400 uppercase tracking-[0.2em] mb-1">In Queue</p>
                <p class="text-3xl font-black text-orange-600 tracking-tighter">{{ number_format($todayRemainingCount) }}</p>
            </div>
            <div class="h-12 w-12 rounded-2xl bg-orange-50 flex items-center justify-center text-orange-500">
                <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 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
            </div>
        </div>
        <div class="bg-white border border-slate-100 rounded-[2rem] p-6 shadow-sm shadow-slate-200 flex items-center justify-between">
            <div>
                <p class="text-[10px] font-black text-slate-400 uppercase tracking-[0.2em] mb-1">IPD {{ $selectedDate === today()->format('Y-m-d') ? 'Today' : 'Count' }}</p>
                <p class="text-3xl font-black text-slate-800 tracking-tighter">{{ number_format($todayIpdCount) }}</p>
            </div>
            <div class="h-12 w-12 rounded-2xl bg-rose-50 flex items-center justify-center text-rose-500">
                <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>
    </div>

    <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-6" x-data="{
        togglePause(serviceKey) {
            fetch('{{ route('branch.operational.toggle-pause') }}', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': '{{ csrf_token() }}',
                    'X-Requested-With': 'XMLHttpRequest'
                },
                body: JSON.stringify({ service_key: serviceKey })
            })
            .then(response => response.json())
            .then(data => {
                if (data.status === 'success') {
                    window.location.reload();
                }
            });
        }
    }">
        @php
            $registryServices = [
                'registration' => [
                    'label' => 'New Patient',
                    'color' => 'emerald',
                    'url' => route('branch.patients.create'),
                    'key' => 'registration'
                ],
                'opd' => [
                    'label' => 'OPD Check-in',
                    'color' => 'maroon',
                    'url' => route('branch.registrations.index'),
                    'key' => 'opd'
                ],
                'ipd' => [
                    'label' => 'IPD',
                    'color' => 'indigo',
                    'url' => route('branch.ipd-registrations.index'),
                    'key' => 'ipd'
                ],
                'ipd_charges' => [
                    'label' => 'IPD Charges',
                    'color' => 'amber',
                    'url' => route('branch.ipd-patient-charges.index'),
                    'key' => 'ipd_charges'
                ],
                'doctors' => [
                    'label' => 'Doctors',
                    'color' => 'violet',
                    'url' => route('branch.doctors.index'),
                    'key' => 'doctors'
                ],
                'employees' => [
                    'label' => 'Workforce',
                    'color' => 'sky',
                    'url' => route('branch.employees.index'),
                    'key' => 'employees'
                ],
                'tokens' => [
                    'label' => 'Live Dashboard',
                    'color' => 'indigo',
                    'url' => route('public.token.dashboard', auth()->guard('branch')->id()),
                    'key' => 'tokens',
                    'external' => true
                ],
                'revenue' => [
                    'label' => 'Revenue Hub',
                    'color' => 'rose',
                    'url' => route('branch.revenue.index'),
                    'key' => 'revenue'
                ],
                'reports' => [
                    'label' => 'Reports Hub',
                    'color' => 'violet',
                    'url' => route('branch.reports.index'),
                    'key' => 'reports'
                ]
            ];
        @endphp

        @foreach($registryServices as $key => $service)
            @php
                $sched = $schedules->get($service['key']);
                $isManualPaused = $sched?->manual_pause ?? false;
                $isClosedBySchedule = false;
                
                if ($sched) {
                    if ($sched->is_closed) {
                        $isClosedBySchedule = true;
                    } elseif (!$sched->is_24_7) {
                        $now = now();
                        $open = $sched->open_time;
                        $close = $sched->close_time;
                        if ($open && $close) {
                            $isClosedBySchedule = !($now->between($open, $close));
                        }
                    }
                }
                
                $isPaused = $isManualPaused || $isClosedBySchedule;
                
                $colorMap = [
                    'emerald' => [
                        'bg' => 'bg-emerald-500',
                        'border' => 'border-emerald-400 shadow-emerald-600/10',
                        'text' => 'text-emerald-100',
                        'sub' => 'text-emerald-50'
                    ],
                    'indigo' => [
                        'bg' => 'bg-indigo-600',
                        'border' => 'border-indigo-500 shadow-indigo-600/10',
                        'text' => 'text-indigo-100',
                        'sub' => 'text-indigo-50'
                    ],
                    'maroon' => [
                        'bg' => 'bg-[#800000]',
                        'border' => 'border-[#660000] shadow-[#800000]/20',
                        'text' => 'text-red-100',
                        'sub' => 'text-red-50'
                    ],
                    'violet' => [
                        'bg' => 'bg-violet-600',
                        'border' => 'border-violet-500 shadow-violet-600/10',
                        'text' => 'text-violet-100',
                        'sub' => 'text-violet-50'
                    ],
                    'sky' => [
                        'bg' => 'bg-sky-500',
                        'border' => 'border-sky-400 shadow-sky-600/10',
                        'text' => 'text-sky-100',
                        'sub' => 'text-sky-50'
                    ],
                    'amber' => [
                        'bg' => 'bg-amber-500',
                        'border' => 'border-amber-400 shadow-amber-600/10',
                        'text' => 'text-amber-100',
                        'sub' => 'text-amber-50'
                    ],
                    'rose' => [
                        'bg' => 'bg-rose-600',
                        'border' => 'border-rose-500 shadow-rose-600/10',
                        'text' => 'text-rose-100',
                        'sub' => 'text-rose-50'
                    ],
                    'paused' => [
                        'bg' => 'bg-slate-200 grayscale opacity-60',
                        'border' => 'border-slate-300',
                        'text' => 'text-slate-500',
                        'sub' => 'text-slate-400'
                    ]
                ];

                $styles = $isPaused ? $colorMap['paused'] : $colorMap[$service['color']];
                $bgClass = $styles['bg'];
                $borderClass = $styles['border'] . ' shadow-lg';
            @endphp

            <div class="group relative {{ $bgClass }} overflow-hidden rounded-[2rem] border {{ $borderClass }} p-5 transition-all transform hover:-translate-y-1.5 aspect-square flex items-center justify-center shadow-xl shadow-[inset_2px_2px_8px_rgba(255,255,255,0.25),inset_-2px_-2px_8px_rgba(0,0,0,0.15)]">
                @if(!$isPaused)
                    <a href="{{ $service['url'] }}" @if(isset($service['external']) && $service['external']) target="_blank" @endif class="absolute inset-0 z-0">
                        <span class="sr-only">Go to {{ $service['label'] }}</span>
                    </a>
                @endif

                <!-- Pause Button (Top Right) -->
                <div class="absolute top-4 right-4 z-20 pointer-events-auto">
                    <button @click.prevent.stop="togglePause('{{ $service['key'] }}')" class="p-2 transition-transform hover:scale-125 bg-black/5 hover:bg-black/10 rounded-xl">
                        <svg class="h-4 w-4 {{ $isPaused ? 'text-rose-500' : 'text-white' }}" fill="currentColor" viewBox="0 0 24 24">
                            @if($isManualPaused)
                                <path d="M8 5v14l11-7z"/>
                            @else
                                <path d="M6 19h4V5H6v14zm8-14v14h4V5h-4z"/>
                            @endif
                        </svg>
                    </button>
                </div>

                <!-- Main Label (Centered) -->
                <div class="relative z-10 pointer-events-none text-center">
                    <h3 class="text-xl font-black {{ $isPaused ? 'text-slate-600' : 'text-white' }} uppercase tracking-tighter leading-none whitespace-nowrap">{{ $service['label'] }}</h3>
                </div>

                <!-- Footer Info (Bottom) -->
                <div class="absolute bottom-4 left-4 right-4 flex items-center justify-between z-10 pointer-events-none">
                    <span class="text-[9px] font-black {{ $styles['text'] }} uppercase tracking-widest italic opacity-80">
                        @if($isManualPaused) PAUSED @elseif($isClosedBySchedule) CLOSED @else ACTIVE @endif
                    </span>
                    @if(!$isPaused)
                        <div class="text-white transform group-hover:translate-x-1 transition-transform">
                            <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="M14 5l7 7m0 0l-7 7m7-7H3"/></svg>
                        </div>
                    @endif
                </div>
            </div>
        @endforeach
    </div>

    <!-- Consultant OPD Activity -->
    <div class="mt-12 space-y-6">
        <div class="flex items-center justify-between px-2">
            <div>
                <h2 class="text-xl font-black text-slate-800 uppercase tracking-tight">Consultant Activity</h2>
                <p class="text-[10px] text-slate-400 font-bold uppercase tracking-widest mt-1">Patient counts per doctor for {{ $selectedDate === today()->format('Y-m-d') ? 'today' : \Carbon\Carbon::parse($selectedDate)->format('d M, Y') }}</p>
            </div>
            <div class="flex items-center bg-white border border-slate-100 px-4 py-2 rounded-2xl shadow-sm">
                <div class="mr-3">
                    <p class="text-[10px] font-black text-slate-400 uppercase tracking-widest leading-none">Select Date</p>
                    <form action="{{ url()->current() }}" method="GET" x-data x-ref="filterForm">
                        <input type="date" name="date" value="{{ $selectedDate }}" @change="$refs.filterForm.submit()" class="text-xs font-black text-indigo-600 uppercase mt-1 bg-transparent border-none p-0 focus:ring-0 cursor-pointer">
                    </form>
                </div>
                <div class="h-8 w-px bg-slate-100"></div>
                <div class="ml-3">
                    <svg class="h-4 w-4 text-slate-300" 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>
                </div>
            </div>
        </div>

        <div class="bg-white border border-slate-100 rounded-[2.5rem] shadow-xl shadow-slate-200/50 overflow-hidden">
            <div class="overflow-x-auto">
                <table class="w-full text-left border-collapse">
                    <thead>
                        <tr class="bg-slate-50/50">
                            <th class="px-8 py-5 text-[10px] font-black text-slate-500 uppercase tracking-widest border-b border-slate-100">Consulting Doctor</th>
                            <th class="px-8 py-5 text-[10px] font-black text-slate-500 uppercase tracking-widest border-b border-slate-100 text-center">Called</th>
                            <th class="px-8 py-5 text-[10px] font-black text-slate-500 uppercase tracking-widest border-b border-slate-100 text-center">Unattended</th>
                            <th class="px-8 py-5 text-[10px] font-black text-slate-500 uppercase tracking-widest border-b border-slate-100 text-center">Total</th>
                            <th class="px-8 py-5 text-[10px] font-black text-slate-500 uppercase tracking-widest border-b border-slate-100 text-right">Activity Status</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-slate-50 font-medium">
                        @forelse($doctorOpdCounts as $stats)
                            <tr class="group hover:bg-slate-50/50 transition-colors italic">
                                <td class="px-8 py-6">
                                    <div class="flex items-center gap-4">
                                        <div class="h-12 w-12 rounded-2xl bg-slate-900 flex items-center justify-center text-white font-black text-lg uppercase shadow-lg shadow-slate-200 group-hover:scale-110 group-hover:rotate-3 transition-transform duration-500">
                                            {{ substr($stats['name'], 0, 1) }}
                                        </div>
                                        <div>
                                            <h4 class="text-sm font-black text-slate-800 uppercase tracking-tight">{{ $stats['name'] }}</h4>
                                            <p class="text-[10px] text-slate-400 font-bold uppercase tracking-widest mt-1">{{ $stats['code'] }}</p>
                                        </div>
                                    </div>
                                </td>
                                <td class="px-8 py-6 text-center">
                                    <div class="inline-flex flex-col items-center">
                                        <span class="text-2xl font-black text-blue-600 tracking-tighter">{{ number_format($stats['called']) }}</span>
                                        <span class="text-[8px] font-black text-slate-400 uppercase tracking-[0.2em]">Consulted</span>
                                    </div>
                                </td>
                                <td class="px-8 py-6 text-center">
                                    <div class="inline-flex flex-col items-center">
                                        <span class="text-2xl font-black text-orange-600 tracking-tighter">{{ number_format($stats['remaining']) }}</span>
                                        <span class="text-[8px] font-black text-slate-400 uppercase tracking-[0.2em]">Waiting</span>
                                    </div>
                                </td>
                                <td class="px-8 py-6 text-center">
                                    <div class="inline-flex flex-col items-center">
                                        <span class="text-2xl font-black text-slate-800 tracking-tighter">{{ number_format($stats['count']) }}</span>
                                        <span class="text-[8px] font-black text-slate-400 uppercase tracking-[0.2em]">Total</span>
                                    </div>
                                </td>
                                <td class="px-8 py-6 text-right">
                                    <span class="inline-flex items-center px-4 py-1.5 rounded-xl bg-emerald-50 text-emerald-600 text-[9px] font-black uppercase tracking-widest border border-emerald-100 shadow-sm shadow-emerald-50">
                                        Active Now
                                    </span>
                                </td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="5" class="px-8 py-20 text-center">
                                    <div class="flex flex-col items-center justify-center">
                                        <div class="h-16 w-16 bg-slate-50 text-slate-200 rounded-[2rem] flex items-center justify-center mb-6 shadow-inner">
                                            <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="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-[10px] font-black text-slate-400 uppercase tracking-[0.3em] inline-block border-b border-slate-100 pb-2 italic">Quiet Day Ahead</h4>
                                        <p class="text-[9px] text-slate-300 font-bold uppercase tracking-widest mt-3 italic">Consultants will appear here as registrations are processed.</p>
                                    </div>
                                </td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>
    </div>

    <!-- Bed Occupancy Monitoring -->
    <div class="mt-12 space-y-6" x-data="{ 
        loading: false, 
        container: null,
        init() {
            this.container = this.$refs.tableContainer;
        },
        async fetchTable(url) {
            this.loading = true;
            try {
                const response = await fetch(url, {
                    headers: {
                        'X-Requested-With': 'XMLHttpRequest'
                    }
                });
                const html = await response.text();
                this.container.innerHTML = html;
                
                // Scroll to table if needed
                this.container.scrollIntoView({ behavior: 'smooth', block: 'start' });
            } catch (error) {
                console.error('Failed to fetch occupancy table:', error);
            } finally {
                this.loading = false;
            }
        },
        handleLink(e) {
            const link = e.target.closest('a');
            if (link && this.container.contains(link)) {
                e.preventDefault();
                this.fetchTable(link.href);
            }
        }
    }">
        <div class="flex items-center justify-between px-2">
            <div>
                <h2 class="text-xl font-black text-slate-800 uppercase tracking-tight">Bed Occupancy Status</h2>
                <p class="text-[10px] text-slate-400 font-bold uppercase tracking-widest mt-1">Real-time room availability across all types</p>
            </div>
            <div class="flex gap-4">
                <div class="flex items-center gap-2">
                    <div class="h-2 w-2 rounded-full bg-rose-500 shadow-[0_0_8px_rgba(244,63,94,0.4)]"></div>
                    <span class="text-[9px] font-black text-slate-500 uppercase tracking-widest">Occupied</span>
                </div>
                <div class="flex items-center gap-2">
                    <div class="h-2 w-2 rounded-full bg-emerald-500 shadow-[0_0_8px_rgba(16,185,129,0.4)]"></div>
                    <span class="text-[9px] font-black text-slate-500 uppercase tracking-widest">Available</span>
                </div>
            </div>
        </div>

        <div class="relative min-h-[400px]" 
             x-ref="tableContainer" 
             @click="handleLink($event)"
             :class="{ 'opacity-50 blur-[2px] pointer-events-none transition-all duration-300': loading }">
            @include('branch.dashboard._occupancy_table', ['occupancyStats' => $occupancyStats])
        </div>
        
        <!-- Loading Overlay -->
        <template x-if="loading">
            <div class="absolute inset-0 flex items-center justify-center z-30">
                <div class="flex flex-col items-center gap-3 bg-white/50 backdrop-blur-sm p-8 rounded-[3rem] shadow-2xl border border-white/20">
                    <svg class="animate-spin h-8 w-8 text-indigo-600" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
                        <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
                        <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
                    </svg>
                    <span class="text-[10px] font-black text-slate-600 uppercase tracking-widest">Updating Stats...</span>
                </div>
            </div>
        </template>
    </div>
</div>
@endsection