@extends('layouts.admin')

@section('title', 'Demographics')
@section('header', 'Demographics Analysis')
@section('subheader', 'Engagement breakdown by department')

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

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

<div class="space-y-6">
    @if($lowVolumeWarnings['show_demographics'] && count($departmentScores) > 0)
        <!-- Department Scores -->
        <div class="card">
            <div class="card-header">
                <h3 class="font-semibold text-secondary-900">Department Engagement Scores</h3>
                <p class="text-sm text-gray-500 mt-1">Only departments with 5+ responses are shown (anonymity protection)</p>
            </div>
            <div class="card-body">
                <div class="space-y-4">
                    @foreach(collect($departmentScores)->sortByDesc(fn($score) => $score) as $department => $score)
                        @php $interpretation = \App\Models\Category::getScoreInterpretation($score); @endphp
                        <div class="flex items-center">
                            <div class="w-48">
                                <span class="font-medium text-gray-900">{{ $department }}</span>
                            </div>
                            <div class="flex-1 mx-4">
                                <div class="overflow-hidden h-6 bg-gray-100 rounded-full">
                                    <div class="h-full rounded-full flex items-center justify-end px-2" style="width: {{ $score }}%; background-color: {{ $interpretation['color'] }}">
                                        @if($score > 20)
                                            <span class="text-white text-xs font-medium">{{ round($score) }}%</span>
                                        @endif
                                    </div>
                                </div>
                            </div>
                            <div class="w-24 text-right">
                                <span class="badge text-xs" style="background-color: {{ $interpretation['color'] }}20; color: {{ $interpretation['color'] }}">
                                    {{ $interpretation['label'] }}
                                </span>
                            </div>
                        </div>
                    @endforeach
                </div>
            </div>
        </div>
        
        <!-- Department Comparison Chart -->
        <div class="card">
            <div class="card-header">
                <h3 class="font-semibold text-secondary-900">Visual Comparison</h3>
            </div>
            <div class="card-body">
                <div class="h-64">
                    <canvas id="deptChart"></canvas>
                </div>
            </div>
        </div>
        
        @push('scripts')
        <script>
            const ctx = document.getElementById('deptChart').getContext('2d');
            const scores = @json($departmentScores);
            const labels = Object.keys(scores);
            const data = Object.values(scores);
            const colors = data.map(score => {
                if (score >= 80) return '#27ae60';
                if (score >= 70) return '#a6cf45';
                if (score >= 60) return '#f1c40f';
                if (score >= 50) return '#e67e22';
                return '#e74c3c';
            });
            
            new Chart(ctx, {
                type: 'bar',
                data: {
                    labels: labels,
                    datasets: [{
                        label: 'Favorability %',
                        data: data,
                        backgroundColor: colors.map(c => c + '80'),
                        borderColor: colors,
                        borderWidth: 1,
                        borderRadius: 4,
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    scales: {
                        y: {
                            beginAtZero: true,
                            max: 100,
                            ticks: {
                                callback: function(value) {
                                    return value + '%';
                                }
                            }
                        }
                    },
                    plugins: {
                        legend: { display: false }
                    }
                }
            });
        </script>
        @endpush
    @else
        <!-- No Data Available -->
        <div class="card">
            <div class="card-body text-center py-12">
                <div class="w-16 h-16 bg-gray-100 rounded-full flex items-center justify-center mx-auto mb-4">
                    <i class="fas fa-users text-gray-400 text-2xl"></i>
                </div>
                <h3 class="text-gray-700 font-medium mb-2">Demographics Not Available</h3>
                <p class="text-gray-500 max-w-md mx-auto">
                    @if(($analytics->total_responses ?? 0) < 5)
                        Demographics analysis requires at least 5 total responses.
                    @else
                        No departments have enough responses (minimum 5) to display while protecting anonymity.
                    @endif
                </p>
            </div>
        </div>
    @endif
</div>
@endsection