{{-- CVF Culture Type Summary Card --}}
@if(isset($cvfData) && $cvfData)
<div class="card">
    <div class="card-header flex items-center justify-between">
        <div>
            <h3 class="font-semibold text-secondary-900">
                <i class="fas fa-chart-pie text-indigo-500 mr-2"></i>
                Culture Type Profile (CVF)
            </h3>
            <p class="text-sm text-gray-500 mt-1">Competing Values Framework - Current vs Desired</p>
        </div>
        <a href="{{ route('company.analytics.cvf') }}" class="btn-ghost text-sm">
            View Details <i class="fas fa-arrow-right ml-1"></i>
        </a>
    </div>
    <div class="card-body">
        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
            <!-- Compact quadrant visualization -->
            <div>
                <canvas id="cvfDashboardRadar" height="220"></canvas>
                <div class="flex items-center justify-center mt-2 space-x-4 text-xs text-gray-500">
                    <span class="flex items-center"><span class="inline-block w-3 h-0.5 bg-blue-500 mr-1"></span> Current</span>
                    <span class="flex items-center"><span class="inline-block w-3 mr-1" style="border-top: 1px dashed #ef4444;"></span> Desired</span>
                </div>
            </div>

            <!-- Culture type scores -->
            <div class="space-y-3">
                <div class="mb-3">
                    <span class="text-xs text-gray-500 uppercase tracking-wider">Dominant Culture</span>
                    <div class="flex items-center mt-1">
                        <span class="w-3 h-3 rounded-full mr-2" style="background: {{ $cvfData['dominant_current']['color'] }}"></span>
                        <span class="font-semibold text-gray-900">{{ $cvfData['dominant_current']['name'] }}</span>
                        <span class="text-gray-400 text-sm ml-1">({{ $cvfData['dominant_current']['score'] }} pts)</span>
                    </div>
                </div>

                @foreach($cvfData['quadrants'] as $key => $quad)
                    <div class="flex items-center justify-between">
                        <div class="flex items-center">
                            <div class="w-6 h-6 rounded-full flex items-center justify-center text-white text-xs font-bold" style="background: {{ $quad['color'] }}">
                                {{ $key }}
                            </div>
                            <span class="ml-2 text-sm text-gray-700">{{ $quad['name'] }}</span>
                        </div>
                        <div class="flex items-center space-x-3 text-sm">
                            <span class="text-gray-600">{{ $quad['current'] }}</span>
                            <i class="fas fa-arrow-right text-gray-300 text-xs"></i>
                            <span class="font-medium text-gray-900">{{ $quad['desired'] }}</span>
                            @php $g = round($quad['desired'] - $quad['current'], 1); @endphp
                            <span class="text-xs {{ $g > 0 ? 'text-green-600' : ($g < 0 ? 'text-red-600' : 'text-gray-400') }}">
                                {{ $g > 0 ? '+' : '' }}{{ $g }}
                            </span>
                        </div>
                    </div>
                @endforeach

                <div class="pt-2 mt-2 border-t">
                    <p class="text-xs text-gray-500">{{ $cvfData['response_count'] }} responses | {{ $cvfData['survey']->title ?? '' }}</p>
                </div>
            </div>
        </div>
    </div>
</div>

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function() {
    var el = document.getElementById('cvfDashboardRadar');
    if (!el) return;
    var ctx = el.getContext('2d');
    new Chart(ctx, {
        type: 'radar',
        data: {
            labels: ['Clan', 'Adhocracy', 'Market', 'Hierarchy'],
            datasets: [
                {
                    label: 'Current',
                    data: [{{ $cvfData['current_profile']['A'] }}, {{ $cvfData['current_profile']['B'] }}, {{ $cvfData['current_profile']['C'] }}, {{ $cvfData['current_profile']['D'] }}],
                    borderColor: '#3b82f6',
                    backgroundColor: 'rgba(59,130,246,0.1)',
                    borderWidth: 2,
                    pointRadius: 3,
                    pointBackgroundColor: '#3b82f6',
                },
                {
                    label: 'Desired',
                    data: [{{ $cvfData['desired_profile']['A'] }}, {{ $cvfData['desired_profile']['B'] }}, {{ $cvfData['desired_profile']['C'] }}, {{ $cvfData['desired_profile']['D'] }}],
                    borderColor: '#ef4444',
                    backgroundColor: 'rgba(239,68,68,0.05)',
                    borderWidth: 2,
                    borderDash: [5,3],
                    pointRadius: 3,
                    pointBackgroundColor: '#ef4444',
                }
            ]
        },
        options: {
            responsive: true,
            maintainAspectRatio: true,
            scales: {
                r: {
                    beginAtZero: true,
                    max: 50,
                    ticks: { stepSize: 10, font: { size: 10 } },
                    pointLabels: { font: { size: 11, weight: 'bold' } }
                }
            },
            plugins: {
                legend: { display: false },
                tooltip: {
                    callbacks: {
                        label: function(c) { return c.dataset.label + ': ' + c.parsed.r + ' pts'; }
                    }
                }
            }
        }
    });
});
</script>
@endpush
@endif