@extends('layouts.admin')

@section('title', 'Documentation')
@section('header', 'Documentation')
@section('subheader', 'Platform guides and methodology documents')

@section('content')
<div class="space-y-6">
    <!-- Document Cards -->
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
        @foreach($docs as $doc)
            <div class="card hover:shadow-lg transition-shadow">
                <div class="card-body">
                    <div class="flex items-start">
                        <div class="w-12 h-12 rounded-lg flex items-center justify-center mr-4" style="background-color: {{ $doc['color'] }}20">
                            <i class="fas fa-{{ $doc['icon'] }} text-xl" style="color: {{ $doc['color'] }}"></i>
                        </div>
                        <div class="flex-1">
                            <h3 class="font-semibold text-gray-900 mb-1">{{ $doc['title'] }}</h3>
                            <p class="text-sm text-gray-500 mb-4">{{ $doc['description'] }}</p>
                            <div class="flex items-center space-x-3">
                                <a href="{{ route('admin.documentation.show', $doc['file']) }}" class="btn-primary btn-sm">
                                    <i class="fas fa-eye mr-1"></i> View
                                </a>
                                <a href="{{ route('admin.documentation.download', $doc['file']) }}" class="btn-ghost btn-sm">
                                    <i class="fas fa-download mr-1"></i> Download
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        @endforeach
    </div>

    <!-- Project Documents -->
    @if(!empty($projectDocs))
    <div class="card">
        <div class="card-header">
            <h3 class="font-semibold text-secondary-900">
                <i class="fas fa-folder-open mr-2 text-green-600"></i>
                Project Documents
            </h3>
            <p class="text-sm text-gray-500 mt-1">Client deliverables and project documentation. Open in browser, then Ctrl+P to save as PDF.</p>
        </div>
        <div class="card-body p-0">
            <table class="table">
                <thead>
                    <tr>
                        <th>#</th>
                        <th>Document</th>
                        <th>Size</th>
                        <th>Actions</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach($projectDocs as $i => $doc)
                        <tr>
                            <td class="text-gray-400">{{ $i + 1 }}</td>
                            <td>
                                <span class="font-medium text-gray-900">{{ $doc['title'] }}</span>
                                <span class="text-xs text-gray-400 ml-2">{{ $doc['filename'] }}</span>
                            </td>
                            <td class="text-sm text-gray-500">{{ $doc['size'] }}</td>
                            <td>
                                <a href="{{ route('admin.documentation.document', $doc['filename']) }}" target="_blank" class="btn-primary btn-sm">
                                    <i class="fas fa-external-link-alt mr-1"></i> Open
                                </a>
                            </td>
                        </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
    </div>
    @endif

    <!-- Quick Reference -->
    <div class="card">
        <div class="card-header">
            <h3 class="font-semibold text-secondary-900">
                <i class="fas fa-bolt mr-2 text-yellow-500"></i>
                Quick Reference
            </h3>
        </div>
        <div class="card-body">
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
                <!-- Likert 5-Point Scale -->
                <div class="bg-gray-50 rounded-lg p-4">
                    <h4 class="font-semibold text-gray-900 mb-3">Likert Scale (5-Point)</h4>
                    <div class="space-y-1 text-sm">
                        <div class="flex justify-between">
                            <span class="text-gray-600">5 - Strongly Agree</span>
                            <span class="text-green-600 font-medium">Favorable ✓</span>
                        </div>
                        <div class="flex justify-between">
                            <span class="text-gray-600">4 - Agree</span>
                            <span class="text-green-600 font-medium">Favorable ✓</span>
                        </div>
                        <div class="flex justify-between">
                            <span class="text-gray-600">3 - Neutral</span>
                            <span class="text-gray-500">Neutral</span>
                        </div>
                        <div class="flex justify-between">
                            <span class="text-gray-600">2 - Disagree</span>
                            <span class="text-red-600">Unfavorable</span>
                        </div>
                        <div class="flex justify-between">
                            <span class="text-gray-600">1 - Strongly Disagree</span>
                            <span class="text-red-600">Unfavorable</span>
                        </div>
                    </div>
                </div>

                <!-- Likert 7-Point Scale -->
                <div class="bg-gray-50 rounded-lg p-4">
                    <h4 class="font-semibold text-gray-900 mb-3">Likert Scale (7-Point)</h4>
                    <div class="space-y-1 text-sm">
                        <div class="flex justify-between">
                            <span class="text-gray-600">7 - Strongly Agree</span>
                            <span class="text-green-600 font-medium">Favorable ✓</span>
                        </div>
                        <div class="flex justify-between">
                            <span class="text-gray-600">6 - Agree</span>
                            <span class="text-green-600 font-medium">Favorable ✓</span>
                        </div>
                        <div class="flex justify-between">
                            <span class="text-gray-600">5 - Somewhat Agree</span>
                            <span class="text-gray-500">Neutral</span>
                        </div>
                        <div class="flex justify-between">
                            <span class="text-gray-600">4 - Neutral</span>
                            <span class="text-gray-500">Neutral</span>
                        </div>
                        <div class="flex justify-between">
                            <span class="text-gray-600">3-1 - Disagree</span>
                            <span class="text-red-600">Unfavorable</span>
                        </div>
                    </div>
                </div>

                <!-- Engagement Classification -->
                <div class="bg-gray-50 rounded-lg p-4">
                    <h4 class="font-semibold text-gray-900 mb-3">Employee Classification</h4>
                    <div class="space-y-2 text-sm">
                        <div class="flex items-center justify-between">
                            <span class="text-green-600 font-medium">😊 Engaged</span>
                            <span class="text-gray-500 text-xs">≥75% favorable, 0% unfavorable</span>
                        </div>
                        <div class="flex items-center justify-between">
                            <span class="text-yellow-600 font-medium">😐 Not Engaged</span>
                            <span class="text-gray-500 text-xs">Neither engaged nor disengaged</span>
                        </div>
                        <div class="flex items-center justify-between">
                            <span class="text-red-600 font-medium">😞 Disengaged</span>
                            <span class="text-gray-500 text-xs">≥33% unfavorable OR avg<2.5</span>
                        </div>
                        <div class="flex items-center justify-between">
                            <span class="text-gray-500 font-medium">❓ Unclassified</span>
                            <span class="text-gray-500 text-xs">Insufficient responses</span>
                        </div>
                    </div>
                </div>

                <!-- Score Interpretation -->
                <div class="bg-gray-50 rounded-lg p-4">
                    <h4 class="font-semibold text-gray-900 mb-3">Score Interpretation</h4>
                    <div class="space-y-1 text-sm">
                        <div class="flex justify-between items-center">
                            <span class="text-gray-600">80%+</span>
                            <span class="px-2 py-0.5 bg-green-600 text-white rounded text-xs">Strong</span>
                        </div>
                        <div class="flex justify-between items-center">
                            <span class="text-gray-600">70-79%</span>
                            <span class="px-2 py-0.5 bg-green-500 text-white rounded text-xs">Healthy</span>
                        </div>
                        <div class="flex justify-between items-center">
                            <span class="text-gray-600">60-69%</span>
                            <span class="px-2 py-0.5 bg-yellow-500 text-white rounded text-xs">Moderate</span>
                        </div>
                        <div class="flex justify-between items-center">
                            <span class="text-gray-600">50-59%</span>
                            <span class="px-2 py-0.5 bg-orange-500 text-white rounded text-xs">Needs Work</span>
                        </div>
                        <div class="flex justify-between items-center">
                            <span class="text-gray-600">&lt;50%</span>
                            <span class="px-2 py-0.5 bg-red-500 text-white rounded text-xs">Critical</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Formulas -->
    <div class="card">
        <div class="card-header">
            <h3 class="font-semibold text-secondary-900">
                <i class="fas fa-calculator mr-2 text-blue-500"></i>
                Key Formulas
            </h3>
        </div>
        <div class="card-body">
            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                <div class="bg-blue-50 rounded-lg p-4">
                    <h4 class="font-semibold text-blue-800 mb-2">Favorability %</h4>
                    <p class="font-mono text-sm bg-white p-3 rounded border">
                        (Favorable Responses ÷ Total Responses) × 100
                    </p>
                    <p class="text-xs text-blue-600 mt-2">
                        <strong>Favorable:</strong> 4-5 (5-point), 6-7 (7-point), 9-10 (10-point)
                    </p>
                </div>
                <div class="bg-green-50 rounded-lg p-4">
                    <h4 class="font-semibold text-green-800 mb-2">Grand Mean</h4>
                    <p class="font-mono text-sm bg-white p-3 rounded border">
                        Sum of All Values ÷ Total Number of Responses
                    </p>
                    <p class="text-xs text-green-600 mt-2">
                        Average score across all Likert questions
                    </p>
                </div>
                <div class="bg-purple-50 rounded-lg p-4">
                    <h4 class="font-semibold text-purple-800 mb-2">Engagement Index</h4>
                    <p class="font-mono text-sm bg-white p-3 rounded border">
                        (Engaged Employees ÷ Total Classified) × 100
                    </p>
                    <p class="text-xs text-purple-600 mt-2">
                        Excludes unclassified employees
                    </p>
                </div>
                <div class="bg-orange-50 rounded-lg p-4">
                    <h4 class="font-semibold text-orange-800 mb-2">Response Rate</h4>
                    <p class="font-mono text-sm bg-white p-3 rounded border">
                        (Completed Invitations ÷ Total Invitations) × 100
                    </p>
                    <p class="text-xs text-orange-600 mt-2">
                        Direct link responses tracked separately
                    </p>
                </div>
            </div>
        </div>
    </div>

    <!-- Anonymity Thresholds -->
    <div class="card">
        <div class="card-header">
            <h3 class="font-semibold text-secondary-900">
                <i class="fas fa-shield-alt mr-2 text-green-500"></i>
                Anonymity Thresholds
            </h3>
        </div>
        <div class="card-body">
            <div class="overflow-x-auto">
                <table class="table">
                    <thead>
                        <tr>
                            <th>Report/Feature</th>
                            <th>Minimum Responses</th>
                            <th>Reason</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td class="font-medium">Show Any Data</td>
                            <td><span class="badge badge-primary">1</span></td>
                            <td class="text-gray-500">Minimum to display results</td>
                        </tr>
                        <tr>
                            <td class="font-medium">Show Percentages</td>
                            <td><span class="badge badge-primary">3</span></td>
                            <td class="text-gray-500">Percentages become meaningful</td>
                        </tr>
                        <tr>
                            <td class="font-medium">Department Breakdown</td>
                            <td><span class="badge badge-warning">5 per dept</span></td>
                            <td class="text-gray-500">Protects individual anonymity</td>
                        </tr>
                        <tr>
                            <td class="font-medium">Heatmap Display</td>
                            <td><span class="badge badge-warning">5 per dept</span></td>
                            <td class="text-gray-500">Same as department breakdown</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>
@endsection