@extends('layouts.branch')

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

@section('content')
<div class="space-y-10" 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();
            }
        });
    }
}">
    <div class="flex flex-col md:flex-row md:items-center justify-between gap-8 bg-white p-10 rounded-[3rem] shadow-sm border border-slate-100 italic relative overflow-hidden">
        <div class="absolute top-0 right-0 w-64 h-64 bg-indigo-50/50 rounded-full -mr-32 -mt-32 blur-3xl"></div>
        <div class="relative z-10">
            <h2 class="text-4xl font-black text-slate-800 tracking-tighter uppercase leading-none">Operational Console</h2>
            <p class="text-[11px] text-slate-400 font-bold tracking-widest uppercase mt-3 italic max-w-md">Real-time management of clinical registries and patient flow control systems.</p>
        </div>
        <div class="flex items-center gap-4 relative z-10">
            <a href="{{ route('branch.settings.clinical') }}" class="flex items-center gap-3 px-8 py-4 bg-slate-900 text-white rounded-[2rem] font-black uppercase tracking-widest text-[11px] hover:bg-indigo-600 shadow-2xl shadow-indigo-200 transition-all group">
                <svg class="h-4 w-4 transition-transform group-hover:rotate-180" 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>
                Configure Schedules
            </a>
        </div>
    </div>

    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
        @php
            $registryServices = [
                'registration' => [
                    'label' => 'Patient Registration',
                    'sub' => 'Staff entry for new patients',
                    'color' => 'emerald',
                    'url' => route('branch.patients.create'),
                    'key' => 'registration'
                ],
                'ipd' => [
                    'label' => 'IPD Registration',
                    'sub' => 'In-patient admissions',
                    'color' => 'indigo',
                    'url' => '#',
                    'key' => 'ipd'
                ],
                'opd' => [
                    'label' => 'OPD Registration',
                    'sub' => 'Existing patient lookup',
                    'color' => 'rose',
                    'url' => route('branch.registrations.index'),
                    'key' => 'opd'
                ]
            ];
        @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;
                $bgClass = $isPaused ? 'bg-slate-200 grayscale opacity-60' : 'bg-'.$service['color'].'-500';
                $borderClass = $isPaused ? 'border-slate-300' : 'border-'.$service['color'].'-400 shadow-lg shadow-'.$service['color'].'-600/20';
            @endphp

            <div class="group relative {{ $bgClass }} overflow-hidden rounded-3xl border {{ $borderClass }} p-6 transition-all transform hover:-translate-y-1 w-64">
                <div class="flex items-start justify-between">
                    <div>
                        <h3 class="text-xs font-black {{ $isPaused ? 'text-slate-600' : 'text-white' }} uppercase tracking-widest leading-tight">{{ $service['label'] }}</h3>
                        <p class="mt-2 text-[9px] {{ $isPaused ? 'text-slate-400' : 'text-'.$service['color'].'-50' }} font-bold leading-tight uppercase opacity-80">{{ $service['sub'] }}</p>
                    </div>
                    <button @click="togglePause('{{ $service['key'] }}')" class="p-2 transition-transform hover:scale-125">
                        <svg class="h-4 w-4 {{ $isPaused ? 'text-rose-500' : 'text-white/60 hover: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>

                <div class="mt-6 flex items-center justify-between">
                    <span class="text-[8px] font-black {{ $isPaused ? 'text-slate-500' : 'text-'.$service['color'].'-100' }} uppercase tracking-widest">
                        @if($isManualPaused)
                            Status: MANUALLY PAUSED
                        @elseif($isClosedBySchedule)
                            Status: CLOSED (SCHEDULE)
                        @else
                            Status: ACTIVE
                        @endif
                    </span>
                    @if(!$isPaused)
                        <a href="{{ $service['url'] }}" class="text-white hover:scale-125 transition-transform">
                            <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="M14 5l7 7m0 0l-7 7m7-7H3"/></svg>
                        </a>
                    @endif
                </div>
            </div>
        @endforeach
    </div>
</div>
    </div>
</div>
@endsection