@extends('layouts.admin')

@section('title', $category->name)
@section('header', $category->name)
@section('subheader', 'Detailed analysis of this engagement dimension')

@section('content')
@include('company.partials.survey-selector')

<!-- Low Volume Warning -->
@include('company.partials.low-volume-warning')

<div class="space-y-6">
    <!-- Category Overview -->
    <div class="card">
        <div class="card-body">
            <div class="flex items-center justify-between">
                <div class="flex items-center">
                    <span class="text-4xl mr-4">{{ $category->icon }}</span>
                    <div>
                        <h2 class="text-xl font-bold text-secondary-900">{{ $category->name }}</h2>
                        <p class="text-gray-500">{{ $category->description }}</p>
                    </div>
                </div>
                <div class="text-right">
                    @php $interpretation = \App\Models\Category::getScoreInterpretation($categoryScore); @endphp
                    <div class="text-4xl font-bold" style="color: {{ $interpretation['color'] }}">{{ round($categoryScore) }}%</div>
                    <span class="badge" style="background-color: {{ $interpretation['color'] }}20; color: {{ $interpretation['color'] }}">
                        {{ $interpretation['label'] }}
                    </span>
                </div>
            </div>
        </div>
    </div>
    
    <!-- Questions in this Category -->
    <div class="card">
        <div class="card-header">
            <h3 class="font-semibold text-secondary-900">Questions in this Category</h3>
            <p class="text-sm text-gray-500 mt-1">{{ $questionData->count() }} questions ranked by favorability</p>
        </div>
        <div class="divide-y divide-gray-100">
            @forelse($questionData as $question)
                @php $qInterpretation = \App\Models\Category::getScoreInterpretation($question['favorability'] ?? 0); @endphp
                <div class="p-6">
                    <div class="flex items-start justify-between mb-4">
                        <div class="flex-1 pr-4">
                            <p class="text-gray-900 font-medium">{{ $question['text'] }}</p>
                            <div class="flex items-center mt-2 text-sm text-gray-500">
                                <span class="mr-4">Mean: <strong>{{ number_format($question['mean'] ?? 0, 2) }}</strong></span>
                                <span>Type: {{ ucfirst(str_replace('_', ' ', $question['type'] ?? 'likert_5')) }}</span>
                            </div>
                        </div>
                        <div class="text-right">
                            <div class="text-2xl font-bold" style="color: {{ $qInterpretation['color'] }}">
                                {{ round($question['favorability'] ?? 0) }}%
                            </div>
                            <span class="text-xs text-gray-500">favorable</span>
                        </div>
                    </div>
                    
                    <!-- Distribution Chart -->
                    @if(!empty($question['distribution']))
                        @php
                            $maxScale = ($question['type'] ?? 'likert_5') === 'likert_7' ? 7 : 5;
                        @endphp
                        <div class="grid grid-cols-{{ $maxScale }} gap-2 mb-3">
                            @for($i = 1; $i <= $maxScale; $i++)
                                @php
                                    $dist = $question['distribution'][$i] ?? ['count' => 0, 'percentage' => 0];
                                    $barColor = match(true) {
                                        $maxScale == 7 && $i <= 2 => 'bg-red-400',
                                        $maxScale == 7 && $i == 3 => 'bg-orange-400',
                                        $maxScale == 7 && $i == 4 => 'bg-gray-400',
                                        $maxScale == 7 && $i == 5 => 'bg-lime-400',
                                        $maxScale == 7 && $i >= 6 => 'bg-green-400',
                                        $maxScale == 5 && $i <= 2 => 'bg-red-400',
                                        $maxScale == 5 && $i == 3 => 'bg-gray-400',
                                        $maxScale == 5 && $i >= 4 => 'bg-green-400',
                                        default => 'bg-gray-400',
                                    };
                                @endphp
                                <div class="text-center">
                                    <div class="h-16 flex items-end justify-center mb-1">
                                        <div class="{{ $barColor }} rounded-t w-full" style="height: {{ max(4, $dist['percentage']) }}%"></div>
                                    </div>
                                    <div class="text-xs font-medium text-gray-600">{{ $i }}</div>
                                    <div class="text-xs text-gray-400">{{ $dist['percentage'] ?? 0 }}%</div>
                                </div>
                            @endfor
                        </div>
                        <div class="flex justify-between text-xs text-gray-400">
                            <span>Strongly Disagree</span>
                            <span>Strongly Agree</span>
                        </div>
                    @endif
                </div>
            @empty
                <div class="p-6 text-center text-gray-500">
                    No questions in this category
                </div>
            @endforelse
        </div>
    </div>
    
    <!-- Back Link -->
    <div class="flex justify-start">
        <a href="{{ route('company.analytics.categories') }}" class="btn-ghost">
            <i class="fas fa-arrow-left mr-2"></i> Back to Categories
        </a>
    </div>
</div>
@endsection