@extends('layouts.admin')

@section('title', 'Dashboard')
@section('page-title', 'Dashboard')

@section('content')
  <div class="row">
    <!-- Statistics Cards -->
    <div class="col-lg-3 col-md-6 mb-4">
      <div class="modern-card h-100">
        <div class="card-body text-center">
          <div class="mb-3">
            <i class="fas fa-clipboard-list fa-3x text-primary"></i>
          </div>
          <h3 class="text-primary mb-2">{{ $totalQuizzes ?? 0 }}</h3>
          <p class="text-muted mb-0">Total Quizzes</p>
        </div>
      </div>
    </div>

    <div class="col-lg-3 col-md-6 mb-4">
      <div class="modern-card h-100">
        <div class="card-body text-center">
          <div class="mb-3">
            <i class="fas fa-question-circle fa-3x text-success"></i>
          </div>
          <h3 class="text-success mb-2">{{ $totalQuestions ?? 0 }}</h3>
          <p class="text-muted mb-0">Total Questions</p>
        </div>
      </div>
    </div>

    <div class="col-lg-3 col-md-6 mb-4">
      <div class="modern-card h-100">
        <div class="card-body text-center">
          <div class="mb-3">
            <i class="fas fa-users fa-3x text-info"></i>
          </div>
          <h3 class="text-info mb-2">{{ $totalParticipants ?? 0 }}</h3>
          <p class="text-muted mb-0">Participants</p>
        </div>
      </div>
    </div>

    <div class="col-lg-3 col-md-6 mb-4">
      <div class="modern-card h-100">
        <div class="card-body text-center">
          <div class="mb-3">
            <i class="fas fa-chart-line fa-3x text-warning"></i>
          </div>
          <h3 class="text-warning mb-2">{{ $activeQuizzes ?? 0 }}</h3>
          <p class="text-muted mb-0">Active Quizzes</p>
        </div>
      </div>
    </div>
  </div>

  <!-- Performance Statistics -->
  <div class="row">
    <div class="col-lg-3 col-md-6 mb-4">
      <div class="modern-card h-100">
        <div class="card-body text-center">
          <div class="mb-3">
            <i class="fas fa-trophy fa-3x text-warning"></i>
          </div>
          <h3 class="text-warning mb-2">{{ number_format($performanceStats['stats']->avg_score ?? 0, 1) }}%</h3>
          <p class="text-muted mb-0">Average Score</p>
        </div>
      </div>
    </div>

    <div class="col-lg-3 col-md-6 mb-4">
      <div class="modern-card h-100">
        <div class="card-body text-center">
          <div class="mb-3">
            <i class="fas fa-star fa-3x text-success"></i>
          </div>
          <h3 class="text-success mb-2">{{ $performanceStats['stats']->max_score ?? 0 }}%</h3>
          <p class="text-muted mb-0">Highest Score</p>
        </div>
      </div>
    </div>

    <div class="col-lg-3 col-md-6 mb-4">
      <div class="modern-card h-100">
        <div class="card-body text-center">
          <div class="mb-3">
            <i class="fas fa-check-circle fa-3x text-info"></i>
          </div>
          <h3 class="text-info mb-2">{{ $completedParticipations ?? 0 }}</h3>
          <p class="text-muted mb-0">Completed Quizzes</p>
        </div>
      </div>
    </div>

    <div class="col-lg-3 col-md-6 mb-4">
      <div class="modern-card h-100">
        <div class="card-body text-center">
          <div class="mb-3">
            <i class="fas fa-percentage fa-3x text-primary"></i>
          </div>
          <h3 class="text-primary mb-2">
            {{ $totalParticipations > 0 ? round(($completedParticipations / $totalParticipations) * 100, 1) : 0 }}%</h3>
          <p class="text-muted mb-0">Completion Rate</p>
        </div>
      </div>
    </div>
  </div>

  <!-- Leaderboards and Performance -->
  <div class="row">
    <!-- All-Time Top Scorers -->
    <div class="col-lg-6 mb-4">
      <div class="modern-card h-100">
        <div class="card-header">
          <h5 class="mb-0">
            <i class="fas fa-crown me-2 text-warning"></i>
            All-Time Top Scorers
          </h5>
        </div>
        <div class="card-body">
          @if (isset($allTimeTopScorers) && $allTimeTopScorers->count() > 0)
            <div class="table-responsive">
              <table class="table table-modern">
                <thead>
                  <tr>
                    <th>Rank</th>
                    <th>Employee</th>
                    <th>Avg Score</th>
                    <th>Quizzes</th>
                  </tr>
                </thead>
                <tbody>
                  @foreach ($allTimeTopScorers as $index => $scorer)
                    <tr>
                      <td>
                        @if ($index === 0)
                          <span class="badge bg-warning">🥇</span>
                        @elseif ($index === 1)
                          <span class="badge bg-secondary">🥈</span>
                        @elseif ($index === 2)
                          <span class="badge bg-warning">🥉</span>
                        @else
                          <span class="badge bg-light text-dark">#{{ $index + 1 }}</span>
                        @endif
                      </td>
                      <td><strong>{{ $scorer->name }}</strong></td>
                      <td><span class="text-success fw-bold">{{ number_format($scorer->average_score, 1) }}%</span></td>
                      <td>{{ $scorer->total_quizzes }}</td>
                    </tr>
                  @endforeach
                </tbody>
              </table>
            </div>
          @else
            <div class="text-center py-4">
              <i class="fas fa-trophy fa-3x text-muted mb-3"></i>
              <h6 class="text-muted">No Top Scorers Yet</h6>
              <p class="text-muted small">Employees need to complete at least 2 quizzes</p>
            </div>
          @endif
        </div>
      </div>
    </div>

    <!-- All-Time Winners -->
    <div class="col-lg-6 mb-4">
      <div class="modern-card h-100">
        <div class="card-header">
          <h5 class="mb-0">
            <i class="fas fa-medal me-2 text-success"></i>
            All-Time Winners
          </h5>
        </div>
        <div class="card-body">
          @if (isset($allTimeWinners) && $allTimeWinners->count() > 0)
            <div class="table-responsive">
              <table class="table table-modern">
                <thead>
                  <tr>
                    <th>Rank</th>
                    <th>Employee</th>
                    <th>Best Score</th>
                    <th>Quizzes</th>
                  </tr>
                </thead>
                <tbody>
                  @foreach ($allTimeWinners as $index => $winner)
                    <tr>
                      <td>
                        @if ($index === 0)
                          <span class="badge bg-warning">🥇</span>
                        @elseif ($index === 1)
                          <span class="badge bg-secondary">🥈</span>
                        @elseif ($index === 2)
                          <span class="badge bg-warning">🥉</span>
                        @else
                          <span class="badge bg-light text-dark">#{{ $index + 1 }}</span>
                        @endif
                      </td>
                      <td><strong>{{ $winner->name }}</strong></td>
                      <td><span class="text-success fw-bold">{{ $winner->highest_score }}%</span></td>
                      <td>{{ $winner->total_quizzes }}</td>
                    </tr>
                  @endforeach
                </tbody>
              </table>
            </div>
          @else
            <div class="text-center py-4">
              <i class="fas fa-medal fa-3x text-muted mb-3"></i>
              <h6 class="text-muted">No Winners Yet</h6>
              <p class="text-muted small">No completed quizzes found</p>
            </div>
          @endif
        </div>
      </div>
    </div>
  </div>

  <!-- Recent Activity & Quick Actions -->
  <div class="row">
    <!-- Recent Top Performers -->
    <div class="col-lg-4 mb-4">
      <div class="modern-card h-100">
        <div class="card-header">
          <h5 class="mb-0">
            <i class="fas fa-fire me-2 text-danger"></i>
            Recent Top Performers (30 days)
          </h5>
        </div>
        <div class="card-body">
          @if (isset($recentTopPerformers) && $recentTopPerformers->count() > 0)
            <div class="list-group list-group-flush">
              @foreach ($recentTopPerformers as $index => $performer)
                <div class="list-group-item d-flex justify-content-between align-items-center border-0 px-0">
                  <div>
                    <div class="d-flex align-items-center">
                      @if ($index === 0)
                        <span class="badge bg-warning me-2">🥇</span>
                      @elseif ($index === 1)
                        <span class="badge bg-secondary me-2">🥈</span>
                      @elseif ($index === 2)
                        <span class="badge bg-warning me-2">🥉</span>
                      @else
                        <span class="badge bg-light text-dark me-2">#{{ $index + 1 }}</span>
                      @endif
                      <strong>{{ $performer->name }}</strong>
                    </div>
                    <small class="text-muted">{{ $performer->quiz->name ?? 'Unknown Quiz' }}</small>
                  </div>
                  <span class="badge bg-success">{{ $performer->score }}%</span>
                </div>
              @endforeach
            </div>
          @else
            <div class="text-center py-4">
              <i class="fas fa-fire fa-3x text-muted mb-3"></i>
              <h6 class="text-muted">No Recent Activity</h6>
              <p class="text-muted small">No quiz completions in the last 30 days</p>
            </div>
          @endif
        </div>
      </div>
    </div>

    <!-- Quiz Winners -->
    <div class="col-lg-4 mb-4">
      <div class="modern-card h-100">
        <div class="card-header">
          <h5 class="mb-0">
            <i class="fas fa-trophy me-2 text-warning"></i>
            Quiz Champions
          </h5>
        </div>
        <div class="card-body">
          @if (isset($quizWinners) && $quizWinners->count() > 0)
            <div class="list-group list-group-flush">
              @foreach ($quizWinners as $index => $winner)
                <div class="list-group-item border-0 px-0">
                  <div class="d-flex justify-content-between align-items-start mb-2">
                    <div>
                      <strong class="d-block">{{ Str::limit($winner['quiz_name'], 20) }}</strong>
                      <small class="text-muted">{{ $winner['winner_name'] }}</small>
                    </div>
                    <span class="badge bg-success">{{ $winner['winner_score'] }}%</span>
                  </div>
                  <small class="text-muted">{{ $winner['total_participants'] }} participants</small>
                </div>
              @endforeach
            </div>
          @else
            <div class="text-center py-4">
              <i class="fas fa-trophy fa-3x text-muted mb-3"></i>
              <h6 class="text-muted">No Quiz Winners</h6>
              <p class="text-muted small">No completed quizzes found</p>
            </div>
          @endif
        </div>
      </div>
    </div>

    <!-- Score Distribution -->
    <div class="col-lg-4 mb-4">
      <div class="modern-card h-100">
        <div class="card-header">
          <h5 class="mb-0">
            <i class="fas fa-chart-bar me-2 text-info"></i>
            Score Distribution
          </h5>
        </div>
        <div class="card-body">
          @if (isset($performanceStats['scoreDistribution']) && $performanceStats['scoreDistribution']->count() > 0)
            @foreach ($performanceStats['scoreDistribution'] as $distribution)
              <div class="mb-3">
                <div class="d-flex justify-content-between align-items-center mb-1">
                  <small class="text-muted">{{ $distribution->score_range }}</small>
                  <small class="text-muted">{{ $distribution->count }}</small>
                </div>
                <div class="progress" style="height: 8px;">
                  @php
                    $percentage =
                        $performanceStats['stats']->total_completed > 0
                            ? ($distribution->count / $performanceStats['stats']->total_completed) * 100
                            : 0;
                  @endphp
                  <div
                    class="progress-bar bg-{{ $distribution->score_range === '90-100' ? 'success' : ($distribution->score_range === '80-89' ? 'info' : ($distribution->score_range === '70-79' ? 'warning' : 'danger')) }}"
                    style="width: {{ $percentage }}%"></div>
                </div>
              </div>
            @endforeach
          @else
            <div class="text-center py-4">
              <i class="fas fa-chart-bar fa-3x text-muted mb-3"></i>
              <h6 class="text-muted">No Data Available</h6>
              <p class="text-muted small">No completed quizzes to analyze</p>
            </div>
          @endif
        </div>
      </div>
    </div>
  </div>

  <!-- Recent Quizzes -->
  <div class="row">
    <div class="col-lg-8 mb-4">
      <div class="modern-card">
        <div class="card-header">
          <h5 class="mb-0">
            <i class="fas fa-clock me-2"></i>
            Recent Quizzes
          </h5>
        </div>
        <div class="card-body">
          @if (isset($recentQuizzes) && $recentQuizzes->count() > 0)
            <div class="table-responsive">
              <table class="table table-modern">
                <thead>
                  <tr>
                    <th>Quiz Name</th>
                    <th>Status</th>
                    <th>Created</th>
                    <th>Actions</th>
                  </tr>
                </thead>
                <tbody>
                  @foreach ($recentQuizzes as $quiz)
                    <tr>
                      <td>
                        <strong>{{ $quiz->name }}</strong>
                        @if ($quiz->is_active)
                          <span class="badge bg-success ms-2">Active</span>
                        @endif
                      </td>
                      <td>
                        @if ($quiz->is_active)
                          <span class="badge bg-success">Active</span>
                        @else
                          <span class="badge bg-secondary">Inactive</span>
                        @endif
                      </td>
                      <td>{{ $quiz->created_at->format('M d, Y') }}</td>
                      <td>
                        <a href="{{ route('quizzes.edit', $quiz) }}" class="btn btn-sm btn-outline-primary">
                          <i class="fas fa-edit me-1"></i>Edit
                        </a>
                        <a href="{{ route('quizzes.showQuestions', $quiz->id) }}" class="btn btn-sm btn-outline-info">
                          <i class="fas fa-eye me-1"></i>View
                        </a>
                      </td>
                    </tr>
                  @endforeach
                </tbody>
              </table>
            </div>
          @else
            <div class="text-center py-4">
              <i class="fas fa-clipboard-list fa-3x text-muted mb-3"></i>
              <h5 class="text-muted">No Quizzes Yet</h5>
              <p class="text-muted">Create your first quiz to get started!</p>
              <a href="{{ route('quizzes.create') }}" class="btn btn-primary">
                <i class="fas fa-plus me-2"></i>Create Quiz
              </a>
            </div>
          @endif
        </div>
      </div>
    </div>

    <!-- Quick Actions -->
    <div class="col-lg-4 mb-4">
      <div class="modern-card">
        <div class="card-header">
          <h5 class="mb-0">
            <i class="fas fa-bolt me-2"></i>
            Quick Actions
          </h5>
        </div>
        <div class="card-body">
          <div class="d-grid gap-3">
            <a href="{{ route('quizzes.create') }}" class="btn btn-primary-modern btn-modern">
              <i class="fas fa-plus me-2"></i>
              Create New Quiz
            </a>

            <a href="{{ route('quizzes.index') }}" class="btn btn-success-modern btn-modern">
              <i class="fas fa-list me-2"></i>
              Manage Quizzes
            </a>

            <a href="{{ asset('excel/sample_question.xlsx') }}" download class="btn btn-info-modern btn-modern">
              <i class="fas fa-download me-2"></i>
              Download Sample Excel
            </a>

            <a href="{{ route('quizzes.index') }}" class="btn btn-warning-modern btn-modern">
              <i class="fas fa-chart-bar me-2"></i>
              View Results
            </a>
          </div>
        </div>
      </div>

      <!-- System Status -->
      <div class="modern-card mt-4">
        <div class="card-header">
          <h5 class="mb-0">
            <i class="fas fa-server me-2"></i>
            System Status
          </h5>
        </div>
        <div class="card-body">
          <div class="d-flex justify-content-between align-items-center mb-3">
            <span>Database</span>
            <span class="badge bg-success">Online</span>
          </div>
          <div class="d-flex justify-content-between align-items-center mb-3">
            <span>HRIS API</span>
            <span class="badge bg-success">Connected</span>
          </div>
          <div class="d-flex justify-content-between align-items-center">
            <span>Last Updated</span>
            <small class="text-muted">{{ now()->format('M d, Y g:i A') }}</small>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- Welcome Message -->
  <div class="row">
    <div class="col-12">
      <div class="modern-card">
        <div class="card-body text-center">
          <div class="mb-4">
            <i class="fas fa-rocket fa-4x text-primary mb-3"></i>
            <h2 class="text-primary">Welcome to Quiz Management System</h2>
            <p class="lead text-muted">Manage your employee quizzes efficiently and track performance with ease.</p>
          </div>

          <div class="row">
            <div class="col-md-4">
              <div class="text-center">
                <i class="fas fa-clipboard-check fa-2x text-success mb-2"></i>
                <h5>Create Quizzes</h5>
                <p class="text-muted">Design engaging quizzes for your employees</p>
              </div>
            </div>
            <div class="col-md-4">
              <div class="text-center">
                <i class="fas fa-chart-pie fa-2x text-info mb-2"></i>
                <h5>Track Results</h5>
                <p class="text-muted">Monitor performance and analyze data</p>
              </div>
            </div>
            <div class="col-md-4">
              <div class="text-center">
                <i class="fas fa-users-cog fa-2x text-warning mb-2"></i>
                <h5>Manage Users</h5>
                <p class="text-muted">Handle employee participation and access</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
@endsection