@extends('layouts.admin')

@section('title', 'CVF Culture Type Analytics')
@section('header', 'Culture Type Analytics (CVF)')
@section('subheader', 'Competing Values Framework - Current vs Desired Culture Profile')

@section('header-actions')
    <a href="{{ route('company.reports.cvf', ['survey_id' => $survey->id]) }}" class="btn-outline text-sm px-4 py-2 border border-gray-300 rounded-lg hover:bg-gray-50">
        <i class="fas fa-file-alt mr-2"></i>Full Report
    </a>
    <a href="{{ route('company.reports.cvf.download', ['survey_id' => $survey->id]) }}" class="btn-primary text-sm px-4 py-2 rounded-lg text-white" style="background-color: var(--primary-color, #a6cf45);">
        <i class="fas fa-download mr-2"></i>Download PDF
    </a>
@endsection

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

<div class="space-y-6">
    @if($cvfScores['response_count'] < 5)
        <div class="bg-yellow-50 border border-yellow-200 text-yellow-800 px-4 py-3 rounded-lg">
            <i class="fas fa-exclamation-triangle mr-2"></i>
            Low response count ({{ $cvfScores['response_count'] }}). Results may not be representative.
        </div>
    @endif

    <!-- Response Count -->
    <div class="card p-6">
        <div class="flex items-center justify-between">
            <div>
                <h3 class="text-lg font-semibold text-gray-900">{{ $survey->title }}</h3>
                <p class="text-sm text-gray-500">{{ $cvfScores['response_count'] }} completed responses</p>
            </div>
            <div class="text-right">
                <span class="text-sm text-gray-500">Dominant Current Culture</span>
                <div class="flex items-center justify-end mt-1">
                    <span class="inline-block w-3 h-3 rounded-full mr-2" style="background: {{ $quadrantData['dominant_current']['color'] }}"></span>
                    <span class="text-lg font-bold text-gray-900">{{ $quadrantData['dominant_current']['name'] }}</span>
                    <span class="text-gray-500 ml-2">({{ $quadrantData['dominant_current']['score'] }} pts)</span>
                </div>
            </div>
        </div>
    </div>

    <!-- Radar Chart -->
    <div class="card">
        <div class="card-header">
            <h3 class="font-semibold text-gray-900">Culture Profile: Current vs Desired</h3>
            <p class="text-sm text-gray-500 mt-1">Radar chart showing point allocation across the four culture types</p>
        </div>
        <div class="card-body">
            <div style="max-width: 500px; margin: 0 auto;">
                <canvas id="cvfRadarChart" height="400"></canvas>
            </div>
            <div class="flex items-center justify-center mt-4 space-x-6 text-sm">
                <span class="flex items-center"><span class="inline-block w-4 h-1 bg-blue-500 mr-2 rounded" style="height: 3px;"></span> Current Culture</span>
                <span class="flex items-center"><span class="inline-block w-4 mr-2 rounded" style="height: 3px; border-top: 2px dashed #ef4444;"></span> Desired Culture</span>
            </div>
        </div>
    </div>

    <!-- Culture Type Summary Cards -->
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
        @foreach($quadrantData['quadrants'] as $key => $quad)
            <div class="card p-5">
                <div class="flex items-center mb-3">
                    <div class="w-8 h-8 rounded-full flex items-center justify-center text-white font-bold text-sm" style="background: {{ $quad['color'] }};">
                        {{ $key }}
                    </div>
                    <h4 class="ml-3 font-semibold text-gray-900">{{ $quad['name'] }}</h4>
                </div>
                <div class="space-y-2">
                    <div class="flex justify-between text-sm">
                        <span class="text-gray-500">Current</span>
                        <span class="font-semibold text-gray-900">{{ $quad['current'] }} pts</span>
                    </div>
                    <div class="flex justify-between text-sm">
                        <span class="text-gray-500">Desired</span>
                        <span class="font-semibold text-gray-900">{{ $quad['desired'] }} pts</span>
                    </div>
                    <div class="border-t pt-2 mt-2">
                        @php
                            $gapVal = $quad['desired'] - $quad['current'];
                            $gapColor = $gapVal > 0 ? 'text-green-600' : ($gapVal < 0 ? 'text-red-600' : 'text-gray-500');
                            $gapIcon = $gapVal > 0 ? 'fa-arrow-up' : ($gapVal < 0 ? 'fa-arrow-down' : 'fa-minus');
                        @endphp
                        <div class="flex justify-between text-sm">
                            <span class="text-gray-500">Gap</span>
                            <span class="font-semibold {{ $gapColor }}">
                                <i class="fas {{ $gapIcon }} text-xs mr-1"></i>
                                {{ $gapVal > 0 ? '+' : '' }}{{ round($gapVal, 1) }}
                            </span>
                        </div>
                    </div>
                </div>
                <p class="text-xs text-gray-400 mt-3 leading-relaxed">{{ Str::limit($quad['description'], 100) }}</p>
            </div>
        @endforeach
    </div>

    <!-- Dimension Breakdown Table -->
    <div class="card">
        <div class="card-header">
            <h3 class="font-semibold text-gray-900">Dimension Breakdown</h3>
            <p class="text-sm text-gray-500 mt-1">Scores for each OCAI dimension, comparing current and desired culture</p>
        </div>
        <div class="overflow-x-auto">
            <table class="table w-full">
                <thead>
                    <tr>
                        <th class="text-left">Dimension</th>
                        <th colspan="4" class="text-center bg-blue-50">Current Culture</th>
                        <th colspan="4" class="text-center bg-orange-50">Desired Culture</th>
                    </tr>
                    <tr>
                        <th></th>
                        <th class="text-center text-xs" style="color: #3b82f6;">Clan</th>
                        <th class="text-center text-xs" style="color: #f59e0b;">Adhocracy</th>
                        <th class="text-center text-xs" style="color: #ef4444;">Market</th>
                        <th class="text-center text-xs" style="color: #6366f1;">Hierarchy</th>
                        <th class="text-center text-xs" style="color: #3b82f6;">Clan</th>
                        <th class="text-center text-xs" style="color: #f59e0b;">Adhocracy</th>
                        <th class="text-center text-xs" style="color: #ef4444;">Market</th>
                        <th class="text-center text-xs" style="color: #6366f1;">Hierarchy</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach($dimensionBreakdown as $dim)
                        <tr>
                            <td class="font-medium text-gray-700 text-sm">{{ $dim['name'] }}</td>
                            <td class="text-center text-sm">{{ $dim['current']['A'] }}</td>
                            <td class="text-center text-sm">{{ $dim['current']['B'] }}</td>
                            <td class="text-center text-sm">{{ $dim['current']['C'] }}</td>
                            <td class="text-center text-sm">{{ $dim['current']['D'] }}</td>
                            <td class="text-center text-sm font-medium">{{ $dim['desired']['A'] }}</td>
                            <td class="text-center text-sm font-medium">{{ $dim['desired']['B'] }}</td>
                            <td class="text-center text-sm font-medium">{{ $dim['desired']['C'] }}</td>
                            <td class="text-center text-sm font-medium">{{ $dim['desired']['D'] }}</td>
                        </tr>
                    @endforeach
                    <tr class="font-bold bg-gray-50">
                        <td>Overall Average</td>
                        <td class="text-center" style="color: #3b82f6;">{{ $cvfScores['current']['A'] }}</td>
                        <td class="text-center" style="color: #f59e0b;">{{ $cvfScores['current']['B'] }}</td>
                        <td class="text-center" style="color: #ef4444;">{{ $cvfScores['current']['C'] }}</td>
                        <td class="text-center" style="color: #6366f1;">{{ $cvfScores['current']['D'] }}</td>
                        <td class="text-center" style="color: #3b82f6;">{{ $cvfScores['desired']['A'] }}</td>
                        <td class="text-center" style="color: #f59e0b;">{{ $cvfScores['desired']['B'] }}</td>
                        <td class="text-center" style="color: #ef4444;">{{ $cvfScores['desired']['C'] }}</td>
                        <td class="text-center" style="color: #6366f1;">{{ $cvfScores['desired']['D'] }}</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>

    <!-- Gap Analysis -->
    <div class="card">
        <div class="card-header">
            <h3 class="font-semibold text-gray-900">Gap Analysis</h3>
            <p class="text-sm text-gray-500 mt-1">Differences between current and desired culture, sorted by magnitude</p>
        </div>
        <div class="card-body space-y-4">
            @foreach($gapAnalysis as $key => $gap)
                <div class="flex items-start p-4 rounded-lg" style="background: {{ $gap['color'] }}08; border-left: 4px solid {{ $gap['color'] }};">
                    <div class="flex-shrink-0 w-10 h-10 rounded-full flex items-center justify-center text-white font-bold mr-4" style="background: {{ $gap['color'] }};">
                        {{ $gap['key'] }}
                    </div>
                    <div class="flex-1">
                        <div class="flex items-center justify-between mb-1">
                            <h4 class="font-semibold text-gray-900">{{ $gap['name'] }}</h4>
                            <span class="text-sm font-bold {{ $gap['gap'] > 0 ? 'text-green-600' : ($gap['gap'] < 0 ? 'text-red-600' : 'text-gray-500') }}">
                                @if($gap['direction'] === 'increase')
                                    <i class="fas fa-arrow-up mr-1"></i>+{{ $gap['magnitude'] }}
                                @elseif($gap['direction'] === 'decrease')
                                    <i class="fas fa-arrow-down mr-1"></i>-{{ $gap['magnitude'] }}
                                @else
                                    <i class="fas fa-check mr-1"></i>Aligned
                                @endif
                            </span>
                        </div>
                        <p class="text-sm text-gray-600">{{ $gap['interpretation'] }}</p>
                        <div class="flex items-center mt-2 text-xs text-gray-500">
                            <span>Current: {{ $gap['current'] }}</span>
                            <i class="fas fa-arrow-right mx-2"></i>
                            <span>Desired: {{ $gap['desired'] }}</span>
                        </div>
                    </div>
                </div>
            @endforeach
        </div>
    </div>

    <!-- Interpretation -->
    <div class="card">
        <div class="card-header bg-indigo-50 border-indigo-100">
            <div class="flex items-center">
                <i class="fas fa-info-circle text-indigo-500 mr-2"></i>
                <h3 class="font-semibold text-indigo-900">Dominant Culture Interpretation</h3>
            </div>
        </div>
        <div class="card-body">
            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                <div>
                    <h4 class="font-medium text-gray-900 mb-2">Current Dominant: {{ $quadrantData['dominant_current']['name'] }}</h4>
                    <p class="text-sm text-gray-600">{{ $quadrantData['dominant_current']['description'] }}</p>
                </div>
                <div>
                    <h4 class="font-medium text-gray-900 mb-2">Desired Dominant: {{ $quadrantData['dominant_desired']['name'] }}</h4>
                    <p class="text-sm text-gray-600">{{ $quadrantData['dominant_desired']['description'] }}</p>
                </div>
            </div>
            @if($quadrantData['dominant_current']['key'] !== $quadrantData['dominant_desired']['key'])
                <div class="mt-4 p-3 bg-amber-50 border border-amber-200 rounded-lg">
                    <p class="text-sm text-amber-800">
                        <i class="fas fa-exchange-alt mr-2"></i>
                        <strong>Culture Shift Desired:</strong> The organization currently operates primarily as a
                        <strong>{{ $quadrantData['dominant_current']['name'] }}</strong> culture but aspires to become more of a
                        <strong>{{ $quadrantData['dominant_desired']['name'] }}</strong> culture.
                    </p>
                </div>
            @endif
        </div>
    </div>

    <!-- Recommendations -->
    @if(!empty($recommendations))
    <div class="card">
        <div class="card-header bg-green-50 border-green-100">
            <div class="flex items-center">
                <i class="fas fa-lightbulb text-green-600 mr-2"></i>
                <h3 class="font-semibold text-green-900">Recommendations</h3>
            </div>
        </div>
        <div class="card-body">
            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                @foreach($recommendations as $rec)
                    <div class="p-4 bg-gray-50 rounded-lg">
                        <h4 class="font-semibold text-gray-900 mb-3">
                            <i class="fas fa-{{ $rec['icon'] }} mr-2 text-gray-500"></i>
                            {{ $rec['title'] }}
                        </h4>
                        <ul class="space-y-2">
                            @foreach($rec['items'] as $item)
                                <li class="flex items-start text-sm text-gray-600">
                                    <i class="fas fa-check text-green-500 mr-2 mt-0.5 flex-shrink-0"></i>
                                    {{ $item }}
                                </li>
                            @endforeach
                        </ul>
                    </div>
                @endforeach
            </div>
        </div>
    </div>
    @endif
</div>
@endsection

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