@extends('layouts.admin')

@section('title', 'Quiz Results')
@section('page-title', 'Quiz Results')

@section('content')
  <div class="row justify-content-center">
    <div class="col-lg-10 col-md-12">
      <!-- Header Section -->
      <div class="modern-card mb-4">
        <div class="card-body text-center">
          <div class="mb-3">
            <i class="fas fa-trophy fa-4x text-warning"></i>
          </div>
          <h2 class="text-primary mb-2">Quiz Results</h2>
          <h4 class="text-muted">{{ $employeeQuiz->quiz->name }}</h4>
          <p class="text-muted mb-0">
            <i class="fas fa-calendar me-2"></i>
            {{ \Carbon\Carbon::parse($employeeQuiz->completed_at)->format('M d, Y g:i A') }}
          </p>
        </div>
      </div>

      <!-- Main Score Card -->
      <div class="row mb-4">
        <div class="col-lg-8 mb-4">
          <div class="modern-card h-100">
            <div class="card-body text-center">
              <div class="score-circle mb-4">
                <div class="score-percentage">{{ $percentage }}%</div>
                <div class="score-label">Your Score</div>
              </div>

              <div class="score-breakdown">
                <div class="row">
                  <div class="col-4">
                    <div class="score-stat">
                      <div class="stat-number text-success">{{ $correctAnswers }}</div>
                      <div class="stat-text">Correct</div>
                    </div>
                  </div>
                  <div class="col-4">
                    <div class="score-stat">
                      <div class="stat-number text-danger">{{ $totalQuestions - $correctAnswers }}</div>
                      <div class="stat-text">Incorrect</div>
                    </div>
                  </div>
                  <div class="col-4">
                    <div class="score-stat">
                      <div class="stat-number text-primary">{{ $totalQuestions }}</div>
                      <div class="stat-text">Total</div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>

        <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-pie me-2"></i>
                Performance Analysis
              </h5>
            </div>
            <div class="card-body">
              <!-- Performance Rating -->
              <div class="performance-rating mb-4">
                @if ($percentage >= 90)
                  <div class="rating-badge excellent">
                    <i class="fas fa-star"></i>
                    <span>Excellent</span>
                  </div>
                @elseif ($percentage >= 80)
                  <div class="rating-badge great">
                    <i class="fas fa-thumbs-up"></i>
                    <span>Great</span>
                  </div>
                @elseif ($percentage >= 70)
                  <div class="rating-badge good">
                    <i class="fas fa-check-circle"></i>
                    <span>Good</span>
                  </div>
                @elseif ($percentage >= 60)
                  <div class="rating-badge fair">
                    <i class="fas fa-minus-circle"></i>
                    <span>Fair</span>
                  </div>
                @else
                  <div class="rating-badge poor">
                    <i class="fas fa-exclamation-triangle"></i>
                    <span>Needs Improvement</span>
                  </div>
                @endif
              </div>

              <!-- Score Distribution -->
              <div class="score-distribution">
                <h6 class="mb-3">Score Breakdown</h6>
                <div class="progress-item mb-2">
                  <div class="d-flex justify-content-between mb-1">
                    <span>Correct Answers</span>
                    <span>{{ $correctAnswers }}/{{ $totalQuestions }}</span>
                  </div>
                  <div class="progress" style="height: 8px;">
                    <div class="progress-bar bg-success" style="width: {{ ($correctAnswers / $totalQuestions) * 100 }}%">
                    </div>
                  </div>
                </div>
                <div class="progress-item">
                  <div class="d-flex justify-content-between mb-1">
                    <span>Incorrect Answers</span>
                    <span>{{ $totalQuestions - $correctAnswers }}/{{ $totalQuestions }}</span>
                  </div>
                  <div class="progress" style="height: 8px;">
                    <div class="progress-bar bg-danger"
                      style="width: {{ (($totalQuestions - $correctAnswers) / $totalQuestions) * 100 }}%"></div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- Detailed Statistics -->
      <div class="row mb-4">
        <div class="col-md-3 mb-3">
          <div class="modern-card text-center h-100">
            <div class="card-body">
              <div class="stat-icon mb-3">
                <i class="fas fa-clock fa-2x text-info"></i>
              </div>
              <h3 class="text-info mb-2">
                {{ \Carbon\Carbon::parse($employeeQuiz->started_at)->diffForHumans($employeeQuiz->completed_at, true) }}
              </h3>
              <p class="text-muted mb-0">Time Taken</p>
            </div>
          </div>
        </div>
        <div class="col-md-3 mb-3">
          <div class="modern-card text-center h-100">
            <div class="card-body">
              <div class="stat-icon mb-3">
                <i class="fas fa-percentage fa-2x text-success"></i>
              </div>
              <h3 class="text-success mb-2">{{ number_format(($correctAnswers / $totalQuestions) * 100, 1) }}%</h3>
              <p class="text-muted mb-0">Accuracy Rate</p>
            </div>
          </div>
        </div>
        <div class="col-md-3 mb-3">
          <div class="modern-card text-center h-100">
            <div class="card-body">
              <div class="stat-icon mb-3">
                <i class="fas fa-tachometer-alt fa-2x text-warning"></i>
              </div>
              <h3 class="text-warning mb-2">{{ $score }}</h3>
              <p class="text-muted mb-0">Raw Score</p>
            </div>
          </div>
        </div>
        <div class="col-md-3 mb-3">
          <div class="modern-card text-center h-100">
            <div class="card-body">
              <div class="stat-icon mb-3">
                <i class="fas fa-calendar-check fa-2x text-primary"></i>
              </div>
              <h3 class="text-primary mb-2">{{ \Carbon\Carbon::parse($employeeQuiz->completed_at)->format('M d') }}</h3>
              <p class="text-muted mb-0">Completion Date</p>
            </div>
          </div>
        </div>
      </div>

      <!-- Performance Insights -->
      <div class="row mb-4">
        <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-lightbulb me-2"></i>
                Performance Insights
              </h5>
            </div>
            <div class="card-body">
              @if ($percentage >= 90)
                <div class="insight-item positive">
                  <i class="fas fa-star text-warning"></i>
                  <div>
                    <strong>Outstanding Performance!</strong>
                    <p class="mb-0">You've demonstrated exceptional knowledge and understanding of the material.</p>
                  </div>
                </div>
              @elseif ($percentage >= 80)
                <div class="insight-item positive">
                  <i class="fas fa-thumbs-up text-success"></i>
                  <div>
                    <strong>Great Job!</strong>
                    <p class="mb-0">You have a solid understanding of the concepts. Keep up the excellent work!</p>
                  </div>
                </div>
              @elseif ($percentage >= 70)
                <div class="insight-item neutral">
                  <i class="fas fa-check-circle text-info"></i>
                  <div>
                    <strong>Good Performance</strong>
                    <p class="mb-0">You're on the right track. Consider reviewing areas where you struggled.</p>
                  </div>
                </div>
              @elseif ($percentage >= 60)
                <div class="insight-item warning">
                  <i class="fas fa-exclamation-circle text-warning"></i>
                  <div>
                    <strong>Room for Improvement</strong>
                    <p class="mb-0">Focus on understanding the core concepts better. Practice makes perfect!</p>
                  </div>
                </div>
              @else
                <div class="insight-item negative">
                  <i class="fas fa-exclamation-triangle text-danger"></i>
                  <div>
                    <strong>Needs Improvement</strong>
                    <p class="mb-0">Consider reviewing the material thoroughly before attempting again.</p>
                  </div>
                </div>
              @endif
            </div>
          </div>
        </div>

        <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-info-circle me-2"></i>
                Quiz Details
              </h5>
            </div>
            <div class="card-body">
              <div class="detail-item">
                <span class="detail-label">Quiz Name:</span>
                <span class="detail-value">{{ $employeeQuiz->quiz->name }}</span>
              </div>
              <div class="detail-item">
                <span class="detail-label">Started:</span>
                <span
                  class="detail-value">{{ \Carbon\Carbon::parse($employeeQuiz->started_at)->format('M d, Y g:i A') }}</span>
              </div>
              <div class="detail-item">
                <span class="detail-label">Completed:</span>
                <span
                  class="detail-value">{{ \Carbon\Carbon::parse($employeeQuiz->completed_at)->format('M d, Y g:i A') }}</span>
              </div>
              <div class="detail-item">
                <span class="detail-label">Duration:</span>
                <span
                  class="detail-value">{{ \Carbon\Carbon::parse($employeeQuiz->started_at)->diffForHumans($employeeQuiz->completed_at, true) }}</span>
              </div>
              <div class="detail-item">
                <span class="detail-label">Employee ID:</span>
                <span class="detail-value">{{ $employeeQuiz->employee_id }}</span>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- Action Buttons -->
      <div class="modern-card">
        <div class="card-body text-center">
          <div class="d-flex flex-wrap justify-content-center gap-3">
            <a href="{{ route('admin.quiz.index') }}" class="btn btn-primary-modern btn-modern">
              <i class="fas fa-home me-2"></i>
              Back to Dashboard
            </a>
            <a href="{{ route('dashboard') }}" class="btn btn-outline-secondary btn-modern">
              <i class="fas fa-cogs me-2"></i>
              Admin Panel
            </a>
            <button onclick="window.print()" class="btn btn-outline-info btn-modern">
              <i class="fas fa-print me-2"></i>
              Print Results
            </button>
          </div>
        </div>
      </div>
    </div>
  </div>

  <style>
    /* Score Circle */
    .score-circle {
      position: relative;
      width: 200px;
      height: 200px;
      margin: 0 auto;
      border-radius: 50%;
      background: conic-gradient(from 0deg,
          var(--primary-color) 0deg,
          var(--primary-color) {{ $percentage * 3.6 }}deg,
          #e9ecef {{ $percentage * 3.6 }}deg,
          #e9ecef 360deg);
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .score-circle::before {
      content: '';
      position: absolute;
      width: 160px;
      height: 160px;
      background: white;
      border-radius: 50%;
    }

    .score-percentage {
      position: relative;
      z-index: 1;
      font-size: 2.5rem;
      font-weight: 700;
      color: var(--primary-color);
    }

    .score-label {
      position: absolute;
      bottom: -30px;
      left: 50%;
      transform: translateX(-50%);
      font-size: 0.9rem;
      color: var(--text-secondary);
      font-weight: 500;
    }

    /* Score Breakdown */
    .score-breakdown {
      margin-top: 2rem;
    }

    .score-stat {
      text-align: center;
    }

    .stat-number {
      font-size: 1.5rem;
      font-weight: 700;
      display: block;
    }

    .stat-text {
      font-size: 0.9rem;
      color: var(--text-secondary);
      font-weight: 500;
    }

    /* Performance Rating */
    .rating-badge {
      display: inline-flex;
      align-items: center;
      gap: 0.5rem;
      padding: 0.75rem 1.5rem;
      border-radius: 50px;
      font-weight: 600;
      font-size: 1.1rem;
    }

    .rating-badge.excellent {
      background: linear-gradient(135deg, #fbbf24, #f59e0b);
      color: white;
    }

    .rating-badge.great {
      background: linear-gradient(135deg, #10b981, #059669);
      color: white;
    }

    .rating-badge.good {
      background: linear-gradient(135deg, #3b82f6, #2563eb);
      color: white;
    }

    .rating-badge.fair {
      background: linear-gradient(135deg, #f59e0b, #d97706);
      color: white;
    }

    .rating-badge.poor {
      background: linear-gradient(135deg, #ef4444, #dc2626);
      color: white;
    }

    /* Score Distribution */
    .progress-item {
      margin-bottom: 1rem;
    }

    .progress {
      border-radius: 10px;
      background-color: #f1f5f9;
    }

    .progress-bar {
      border-radius: 10px;
      transition: width 0.3s ease;
    }

    /* Statistics */
    .stat-icon {
      width: 60px;
      height: 60px;
      border-radius: 50%;
      background: rgba(99, 102, 241, 0.1);
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 0 auto;
    }

    /* Insights */
    .insight-item {
      display: flex;
      align-items: flex-start;
      gap: 1rem;
      padding: 1rem;
      border-radius: 12px;
      margin-bottom: 1rem;
    }

    .insight-item.positive {
      background: rgba(16, 185, 129, 0.1);
      border-left: 4px solid #10b981;
    }

    .insight-item.neutral {
      background: rgba(59, 130, 246, 0.1);
      border-left: 4px solid #3b82f6;
    }

    .insight-item.warning {
      background: rgba(245, 158, 11, 0.1);
      border-left: 4px solid #f59e0b;
    }

    .insight-item.negative {
      background: rgba(239, 68, 68, 0.1);
      border-left: 4px solid #ef4444;
    }

    .insight-item i {
      font-size: 1.5rem;
      margin-top: 0.25rem;
    }

    .insight-item strong {
      display: block;
      margin-bottom: 0.5rem;
    }

    .insight-item p {
      margin: 0;
      color: var(--text-secondary);
    }

    /* Details */
    .detail-item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0.75rem 0;
      border-bottom: 1px solid #f1f5f9;
    }

    .detail-item:last-child {
      border-bottom: none;
    }

    .detail-label {
      font-weight: 600;
      color: var(--text-secondary);
    }

    .detail-value {
      font-weight: 500;
      color: var(--text-primary);
    }

    /* Buttons */
    .btn-modern {
      border-radius: 0.5rem;
      font-weight: 500;
      transition: all 0.2s ease;
      padding: 0.75rem 1.5rem;
    }

    .btn-modern:hover {
      transform: translateY(-1px);
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    }

    /* Responsive */
    @media (max-width: 768px) {
      .score-circle {
        width: 150px;
        height: 150px;
      }

      .score-circle::before {
        width: 120px;
        height: 120px;
      }

      .score-percentage {
        font-size: 2rem;
      }

      .detail-item {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.25rem;
      }
    }

    /* Print styles */
    @media print {
      .btn-modern {
        display: none;
      }
    }
  </style>
@endsection