@extends('layouts.app')

@section('title', 'Inspection Glossary & Taxonomy - Healthcare Directory')

@section('content')
<!-- Hero Section -->
<div class="relative overflow-hidden rounded-2xl bg-white border border-[#D8DDE0] border-l-8 border-[#005EB8] px-6 py-8 sm:px-10 sm:py-10 shadow-sm mb-8">
    <div class="relative max-w-4xl flex flex-col md:flex-row md:items-center justify-between gap-6">
        <div>
            <h1 class="text-3xl font-extrabold tracking-tight sm:text-4xl text-[#002F6C]">
                Inspection Areas Glossary
            </h1>
            <p class="mt-3 text-base text-[#212B32] leading-relaxed">
                Explore the structural terminology, classification categories, and audit domains used by the Care Quality Commission (CQC) to assess, inspect, and rate healthcare providers and clinics in England.
            </p>
        </div>
        <!-- Medical theme decoration -->
        <div class="hidden lg:block shrink-0 bg-[#F0F4F5] p-4 rounded-full border border-[#D8DDE0]">
            <svg class="w-12 h-12 text-[#005EB8]" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" d="M12 6.042A8.967 8.967 0 006 3.75c-1.052 0-2.062.18-3 .512v14.25A8.987 8.987 0 016 18c2.305 0 4.408.867 6 2.292m0-14.25a8.966 8.966 0 016-2.292c1.052 0 2.062.18 3 .512v14.25A8.987 8.987 0 0018 18a8.967 8.967 0 00-6 2.292m0-14.25v14.25" />
            </svg>
        </div>
    </div>
</div>

<!-- Errors or Warnings -->
@if($error)
    <div class="rounded-2xl border border-rose-500/25 bg-rose-50 p-5 mb-8 text-[#DA291C] flex items-start gap-4 shadow-sm">
        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="w-6 h-6 text-[#DA291C] shrink-0">
            <path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3.75m9-.75a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9 3.75h.008v.008H12v-.008Z" />
        </svg>
        <div class="flex flex-col gap-1.5">
            <h3 class="font-bold text-[#DA291C] text-base">Taxonomy System Status</h3>
            <p class="text-sm leading-relaxed text-[#212B32]">{{ $error }}</p>
        </div>
    </div>
@endif

@if(!empty($groupedAreas))
    <div class="space-y-12">
        @php
            // Order statuses logically
            $statusOrder = ['Active' => 'Active Assessment Standards', 'Superseded' => 'Superseded Taxonomy', 'Retired' => 'Retired Terms'];
        @endphp

        @foreach($statusOrder as $statusKey => $displayHeader)
            @if(isset($groupedAreas[$statusKey]))
                @php
                    $areas = $groupedAreas[$statusKey];
                    
                    $headerClass = match($statusKey) {
                        'Active' => 'text-[#00825F] border-[#00825F]/20 bg-[#00825F]/5',
                        'Superseded' => 'text-[#D47A00] border-[#D47A00]/20 bg-[#D47A00]/5',
                        default => 'text-[#DA291C] border-[#DA291C]/20 bg-[#DA291C]/5'
                    };
                @endphp
                <div class="space-y-6">
                    <h2 class="text-base font-bold px-4 py-2 border rounded-xl inline-flex items-center gap-2 {{ $headerClass }}">
                        <span class="h-2 w-2 rounded-full bg-current"></span>
                        {{ $displayHeader }} ({{ count($areas) }})
                    </h2>

                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                        @foreach($areas as $area)
                            <div class="bg-white border border-[#D8DDE0] rounded-2xl p-6 flex flex-col justify-between hover:border-[#a1b5be] transition shadow-sm">
                                <div>
                                    <div class="flex items-center justify-between gap-2 mb-3">
                                        <span class="inline-flex items-center rounded bg-[#F0F4F5] px-2 py-0.5 text-[10px] font-mono text-[#212B32] border border-[#D8DDE0]">
                                            ID: {{ $area['inspectionAreaId'] }}
                                        </span>
                                        @if(!empty($area['inspectionAreaType']))
                                            <span class="text-xs text-[#4c6272] font-bold">{{ $area['inspectionAreaType'] }}</span>
                                        @endif
                                    </div>

                                    <h3 class="text-base font-bold text-[#002F6C] mb-2 leading-tight">
                                        {{ $area['inspectionAreaName'] }}
                                    </h3>

                                    @if($statusKey === 'Superseded' && !empty($area['supersededBy']))
                                        <div class="mt-4 pt-3 border-t border-[#E8EDEE]">
                                            <span class="text-xs text-[#4c6272] font-bold uppercase tracking-wider block mb-1.5">Superseded By:</span>
                                            <div class="flex flex-wrap gap-1.5">
                                                @foreach($area['supersededBy'] as $sub)
                                                    <span class="inline-flex rounded-lg bg-[#D47A00]/10 text-[#D47A00] px-2.5 py-1 text-xs font-bold border border-[#D47A00]/20">
                                                        {{ $sub }}
                                                    </span>
                                                @endforeach
                                            </div>
                                        </div>
                                    @endif

                                    @if($statusKey === 'Retired' && !empty($area['endDate']))
                                        <p class="text-xs text-[#DA291C] font-bold mt-3">Retired on: {{ date('d M Y', strtotime($area['endDate'])) }}</p>
                                    @endif

                                    @if(!empty($area['inspectionCategories']))
                                        <div class="mt-4 pt-3 border-t border-[#E8EDEE]">
                                            <span class="text-xs text-[#4c6272] font-bold uppercase tracking-wider block mb-2">Scope of Services:</span>
                                            <div class="space-y-2 max-h-[150px] overflow-y-auto pr-1">
                                                @foreach($area['inspectionCategories'] as $cat)
                                                    <div class="flex items-start gap-2 bg-[#F0F4F5] border border-[#E8EDEE] p-2.5 rounded-lg text-xs leading-relaxed shadow-sm">
                                                        <span class="font-mono text-[#005EB8] font-bold shrink-0 bg-white border border-[#D8DDE0] px-1.5 py-0.5 rounded">
                                                            {{ $cat['code'] }}
                                                        </span>
                                                        <span class="text-[#212B32] font-semibold">{{ $cat['inspectionCategoryName'] }}</span>
                                                        @if(($cat['coreFlag'] ?? 'N') === 'Y')
                                                            <span class="ml-auto text-[9px] bg-[#00825F]/10 text-[#00825F] font-bold px-1.5 rounded uppercase border border-[#00825F]/20 shrink-0">Core</span>
                                                        @endif
                                                    </div>
                                                @endforeach
                                            </div>
                                        </div>
                                    @endif
                                </div>
                            </div>
                        @endforeach
                    </div>
                </div>
            @endif
        @endforeach
    </div>
@endif
@endsection