@extends('layouts.admin')

@section('title', 'Admin Dashboard')
@section('header', 'Dashboard')
@section('subheader', 'Manage surveys, questions, and system settings')

@section('header-actions')
    <a href="{{ route('admin.surveys.create') }}" class="btn-primary">
        <i class="fas fa-plus mr-2"></i>
        Create Survey
    </a>
@endsection

@section('content')
<div class="space-y-6">
    <!-- Stats Cards -->
    <div class="grid grid-cols-1 md:grid-cols-4 gap-6">
        <div class="stat-card">
            <div class="flex items-center justify-center w-12 h-12 bg-blue-100 rounded-lg mx-auto mb-3">
                <i class="fas fa-clipboard-list text-blue-500 text-xl"></i>
            </div>
            <div class="stat-value">{{ $totalSurveys }}</div>
            <div class="stat-label">Total Surveys</div>
        </div>
        
        <div class="stat-card">
            <div class="flex items-center justify-center w-12 h-12 bg-green-100 rounded-lg mx-auto mb-3">
                <i class="fas fa-play-circle text-green-500 text-xl"></i>
            </div>
            <div class="stat-value">{{ $activeSurveys }}</div>
            <div class="stat-label">Active Surveys</div>
        </div>
        
        <div class="stat-card">
            <div class="flex items-center justify-center w-12 h-12 bg-purple-100 rounded-lg mx-auto mb-3">
                <i class="fas fa-check-circle text-purple-500 text-xl"></i>
            </div>
            <div class="stat-value">{{ $totalResponses }}</div>
            <div class="stat-label">Total Responses</div>
        </div>
        
        <div class="stat-card">
            <div class="flex items-center justify-center w-12 h-12 bg-orange-100 rounded-lg mx-auto mb-3">
                <i class="fas fa-question-circle text-orange-500 text-xl"></i>
            </div>
            <div class="stat-value">{{ $questionBankCount }}</div>
            <div class="stat-label">Questions in Bank</div>
        </div>
    </div>
    
    <!-- Quick Actions -->
    <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
        <a href="{{ route('admin.surveys.create') }}" class="card p-6 hover:shadow-card-hover transition-shadow group">
            <div class="flex items-center">
                <div class="flex items-center justify-center w-12 h-12 bg-primary-100 rounded-lg mr-4 group-hover:bg-primary-200 transition-colors">
                    <i class="fas fa-plus text-primary-500 text-xl"></i>
                </div>
                <div>
                    <h3 class="font-semibold text-secondary-900">Create New Survey</h3>
                    <p class="text-sm text-gray-500">Build a new engagement survey</p>
                </div>
            </div>
        </a>
        
        <a href="{{ route('admin.questions.index') }}" class="card p-6 hover:shadow-card-hover transition-shadow group">
            <div class="flex items-center">
                <div class="flex items-center justify-center w-12 h-12 bg-blue-100 rounded-lg mr-4 group-hover:bg-blue-200 transition-colors">
                    <i class="fas fa-database text-blue-500 text-xl"></i>
                </div>
                <div>
                    <h3 class="font-semibold text-secondary-900">Manage Questions</h3>
                    <p class="text-sm text-gray-500">Edit the question bank</p>
                </div>
            </div>
        </a>
        
        <a href="{{ route('admin.categories.index') }}" class="card p-6 hover:shadow-card-hover transition-shadow group">
            <div class="flex items-center">
                <div class="flex items-center justify-center w-12 h-12 bg-purple-100 rounded-lg mr-4 group-hover:bg-purple-200 transition-colors">
                    <i class="fas fa-folder text-purple-500 text-xl"></i>
                </div>
                <div>
                    <h3 class="font-semibold text-secondary-900">Manage Categories</h3>
                    <p class="text-sm text-gray-500">Configure engagement dimensions</p>
                </div>
            </div>
        </a>
    </div>
    
    <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
        <!-- Recent Surveys -->
        <div class="card">
            <div class="card-header flex items-center justify-between">
                <h3 class="font-semibold text-secondary-900">Recent Surveys</h3>
                <a href="{{ route('admin.surveys.index') }}" class="text-sm text-primary-500 hover:text-primary-600">
                    View All
                </a>
            </div>
            <div class="divide-y divide-gray-100">
                @forelse($recentSurveys as $survey)
                    <div class="px-6 py-4 flex items-center justify-between">
                        <div>
                            <h4 class="font-medium text-gray-900">{{ $survey->title }}</h4>
                            <p class="text-sm text-gray-500">
                                Created {{ $survey->created_at->diffForHumans() }}
                                · {{ $survey->responses()->where('is_complete', true)->count() }} responses
                            </p>
                        </div>
                        <div class="flex items-center space-x-2">
                            @switch($survey->status)
                                @case('draft')
                                    <span class="badge badge-secondary">Draft</span>
                                    @break
                                @case('active')
                                    <span class="badge badge-success">Active</span>
                                    @break
                                @case('closed')
                                    <span class="badge badge-danger">Closed</span>
                                    @break
                            @endswitch
                            <a href="{{ route('admin.surveys.show', $survey) }}" class="btn-ghost btn-sm">
                                <i class="fas fa-eye"></i>
                            </a>
                        </div>
                    </div>
                @empty
                    <div class="px-6 py-8 text-center text-gray-500">
                        <i class="fas fa-clipboard-list text-3xl text-gray-300 mb-2"></i>
                        <p>No surveys created yet</p>
                    </div>
                @endforelse
            </div>
        </div>
        
        <!-- Engagement Categories -->
        <div class="card">
            <div class="card-header flex items-center justify-between">
                <h3 class="font-semibold text-secondary-900">Engagement Categories</h3>
                <a href="{{ route('admin.categories.index') }}" class="text-sm text-primary-500 hover:text-primary-600">
                    Manage
                </a>
            </div>
            <div class="card-body">
                <div class="grid grid-cols-2 gap-3">
                    @foreach($categories as $category)
                        <div class="flex items-center p-3 bg-gray-50 rounded-lg">
                            <span class="text-2xl mr-3">{{ $category->icon }}</span>
                            <div>
                                <h4 class="text-sm font-medium text-gray-900">{{ $category->name }}</h4>
                                <p class="text-xs text-gray-500">
                                    {{ $category->questionBankItems()->count() }} questions
                                </p>
                            </div>
                        </div>
                    @endforeach
                </div>
            </div>
        </div>
    </div>
</div>
@endsection