@extends('layouts.admin')

@section('title', 'CVF Culture Type Report')
@section('header', 'Culture Type Report (CVF)')
@section('subheader', 'Competing Values Framework - Full Culture Profile Report')

@section('header-actions')
    <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">
    <!-- Report Header -->
    <div class="card bg-gradient-to-r from-indigo-800 to-indigo-900 text-white">
        <div class="card-body py-8">
            <div class="flex items-center justify-between">
                <div>
                    <h1 class="text-2xl font-bold mb-2">{{ $survey->title }}</h1>
                    <p class="text-indigo-200">Competing Values Framework - Culture Type Report</p>
                    <p class="text-sm text-indigo-300 mt-2">Generated: {{ now()->format('F j, Y') }}</p>
                </div>
                <div class="text-right">
                    <div class="text-4xl font-bold">{{ $cvfScores['response_count'] }}</div>
                    <div class="text-indigo-200 text-sm">Total Responses</div>
                </div>
            </div>
        </div>
    </div>

    <!-- Culture Profile Visualization -->
    <div class="card">
        <div class="card-header">
            <h3 class="font-semibold text-gray-900">Culture Profile Visualization</h3>
            <p class="text-sm text-gray-500 mt-1">Current culture (solid) vs Desired culture (dashed)</p>
        </div>
        <div class="card-body">
            <div style="max-width: 520px; margin: 0 auto;">
                <canvas id="cvfReportRadar" 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>

    <!-- Current vs Desired Comparison -->
    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
        <!-- Current Profile -->
        <div class="card">
            <div class="card-header bg-blue-50 border-blue-100">
                <h3 class="font-semibold text-blue-900">Current Culture Profile</h3>
            </div>
            <div class="card-body space-y-3">
                @foreach(['A' => 'Clan', 'B' => 'Adhocracy', 'C' => 'Market', 'D' => 'Hierarchy'] as $key => $name)
                    @php
                        $val = $cvfScores['current'][$key];
                        $colors = ['A' => '#3b82f6', 'B' => '#f59e0b', 'C' => '#ef4444', 'D' => '#6366f1'];
                    @endphp
                    <div>
                        <div class="flex justify-between text-sm mb-1">
                            <span class="font-medium text-gray-700">{{ $name }} ({{ $key }})</span>
                            <span class="font-bold" style="color: {{ $colors[$key] }}">{{ $val }} pts</span>
                        </div>
                        <div class="w-full bg-gray-100 rounded-full h-2.5">
                            <div class="h-2.5 rounded-full" style="width: {{ min($val, 50) * 2 }}%; background: {{ $colors[$key] }};"></div>
                        </div>
                    </div>
                @endforeach
                <div class="pt-3 border-t mt-3">
                    <p class="text-sm text-gray-600">
                        <strong>Dominant:</strong> {{ $quadrantData['dominant_current']['name'] }} ({{ $quadrantData['dominant_current']['score'] }} pts)
                    </p>
                </div>
            </div>
        </div>

        <!-- Desired Profile -->
        <div class="card">
            <div class="card-header bg-red-50 border-red-100">
                <h3 class="font-semibold text-red-900">Desired Culture Profile</h3>
            </div>
            <div class="card-body space-y-3">
                @foreach(['A' => 'Clan', 'B' => 'Adhocracy', 'C' => 'Market', 'D' => 'Hierarchy'] as $key => $name)
                    @php
                        $val = $cvfScores['desired'][$key];
                        $colors = ['A' => '#3b82f6', 'B' => '#f59e0b', 'C' => '#ef4444', 'D' => '#6366f1'];
                    @endphp
                    <div>
                        <div class="flex justify-between text-sm mb-1">
                            <span class="font-medium text-gray-700">{{ $name }} ({{ $key }})</span>
                            <span class="font-bold" style="color: {{ $colors[$key] }}">{{ $val }} pts</span>
                        </div>
                        <div class="w-full bg-gray-100 rounded-full h-2.5">
                            <div class="h-2.5 rounded-full" style="width: {{ min($val, 50) * 2 }}%; background: {{ $colors[$key] }};"></div>
                        </div>
                    </div>
                @endforeach
                <div class="pt-3 border-t mt-3">
                    <p class="text-sm text-gray-600">
                        <strong>Dominant:</strong> {{ $quadrantData['dominant_desired']['name'] }} ({{ $quadrantData['dominant_desired']['score'] }} pts)
                    </p>
                </div>
            </div>
        </div>
    </div>

    <!-- Dimension Breakdown -->
    <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">Per-dimension scores across all six OCAI dimensions</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-red-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">Biggest culture shifts needed, sorted by magnitude</p>
        </div>
        <div class="card-body space-y-4">
            @foreach($gapAnalysis as $key => $gap)
                <div class="p-4 rounded-lg border" style="border-left: 4px solid {{ $gap['color'] }};">
                    <div class="flex items-center justify-between mb-2">
                        <div class="flex items-center">
                            <div class="w-8 h-8 rounded-full flex items-center justify-center text-white font-bold text-sm mr-3" style="background: {{ $gap['color'] }};">
                                {{ $gap['key'] }}
                            </div>
                            <h4 class="font-semibold text-gray-900">{{ $gap['name'] }}</h4>
                        </div>
                        <div class="text-right">
                            <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'] }} pts
                                @elseif($gap['direction'] === 'decrease')
                                    <i class="fas fa-arrow-down mr-1"></i>-{{ $gap['magnitude'] }} pts
                                @else
                                    <i class="fas fa-check mr-1"></i>Aligned
                                @endif
                            </span>
                            <div class="text-xs text-gray-500 mt-1">{{ $gap['current'] }} &rarr; {{ $gap['desired'] }}</div>
                        </div>
                    </div>
                    <p class="text-sm text-gray-600">{{ $gap['interpretation'] }}</p>
                </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">Culture Profile Interpretation</h3>
            </div>
        </div>
        <div class="card-body">
            <div class="prose max-w-none text-sm text-gray-700 space-y-4">
                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                    <div class="p-4 bg-blue-50 rounded-lg">
                        <h4 class="font-semibold text-blue-900 mb-2">Current Dominant: {{ $quadrantData['dominant_current']['name'] }}</h4>
                        <p class="text-blue-800 text-sm">{{ $quadrantData['dominant_current']['description'] }}</p>
                    </div>
                    <div class="p-4 bg-red-50 rounded-lg">
                        <h4 class="font-semibold text-red-900 mb-2">Desired Dominant: {{ $quadrantData['dominant_desired']['name'] }}</h4>
                        <p class="text-red-800 text-sm">{{ $quadrantData['dominant_desired']['description'] }}</p>
                    </div>
                </div>

                @if($quadrantData['dominant_current']['key'] !== $quadrantData['dominant_desired']['key'])
                    <div class="p-4 bg-amber-50 border border-amber-200 rounded-lg">
                        <p class="text-amber-800">
                            <i class="fas fa-exchange-alt mr-2"></i>
                            <strong>Culture Transformation Desired:</strong> Employees indicate a desire to shift the organization's dominant culture from
                            <strong>{{ $quadrantData['dominant_current']['name'] }}</strong> to
                            <strong>{{ $quadrantData['dominant_desired']['name'] }}</strong>.
                            This represents a meaningful shift in organizational values and priorities that requires deliberate leadership attention.
                        </p>
                    </div>
                @else
                    <div class="p-4 bg-green-50 border border-green-200 rounded-lg">
                        <p class="text-green-800">
                            <i class="fas fa-check-circle mr-2"></i>
                            <strong>Culture Alignment:</strong> The dominant culture type remains
                            <strong>{{ $quadrantData['dominant_current']['name'] }}</strong> in both current and desired profiles.
                            While the overall type is aligned, attention should be given to the specific gap magnitudes within each type.
                        </p>
                    </div>
                @endif
            </div>
        </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>
            <p class="text-sm text-green-700 mt-1">Based on the gap analysis between current and desired culture</p>
        </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('cvfReportRadar').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(c) { return c.dataset.label + ': ' + c.parsed.r + ' pts'; }
                    }
                }
            }
        }
    });
});
</script>
@endpush