@extends('layouts.admin')

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

@section('content')
  <div class="row">
    <!-- Welcome Card -->
    <div class="col-12 mb-4">
      <div class="modern-card">
        <div class="card-body">
          <div class="d-flex align-items-center">
            <div class="me-3">
              <i class="fas fa-user-graduate fa-3x text-primary"></i>
            </div>
            <div>
              <h4 class="mb-1">Welcome, Admin {{ $user->emp_id }}!</h4>
              <p class="text-muted mb-0">Employee ID: {{ $user->emp_id }} | Ready to test your knowledge?</p>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- Statistics Cards -->
    <div class="col-lg-3 col-md-6 mb-4">
      <div class="modern-card text-center">
        <div class="card-body">
          <i class="fas fa-clipboard-list fa-2x text-primary mb-3"></i>
          <h3 class="text-primary">{{ $totalQuizzes }}</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 text-center">
        <div class="card-body">
          <i class="fas fa-check-circle fa-2x text-success mb-3"></i>
          <h3 class="text-success">{{ $completedQuizzes }}</h3>
          <p class="text-muted mb-0">Completed</p>
        </div>
      </div>
    </div>

    <div class="col-lg-3 col-md-6 mb-4">
      <div class="modern-card text-center">
        <div class="card-body">
          <i class="fas fa-star fa-2x text-warning mb-3"></i>
          <h3 class="text-warning">{{ $totalScore }}</h3>
          <p class="text-muted mb-0">Total Score</p>
        </div>
      </div>
    </div>

    <div class="col-lg-3 col-md-6 mb-4">
      <div class="modern-card text-center">
        <div class="card-body">
          <i class="fas fa-percentage fa-2x text-info mb-3"></i>
          <h3 class="text-info">{{ $averageScore }}%</h3>
          <p class="text-muted mb-0">Average Score</p>
        </div>
      </div>
    </div>

    <!-- Active Quiz Section -->
    @if ($activeQuiz)
      <div class="col-12 mb-4">
        <div class="modern-card">
          <div class="card-header">
            <h5 class="mb-0">
              <i class="fas fa-play-circle me-2"></i>
              Active Quiz
            </h5>
          </div>
          <div class="card-body">
            <div class="row align-items-center">
              <div class="col-md-8">
                <h6 class="mb-2">{{ $activeQuiz->name }}</h6>
                <p class="text-muted mb-2">
                  <i class="fas fa-calendar me-2"></i>
                  {{ \Carbon\Carbon::parse($activeQuiz->quiz_date)->format('M d, Y') }}
                </p>
                <p class="text-muted mb-0">
                  <i class="fas fa-clock me-2"></i>
                  {{ \Carbon\Carbon::parse($activeQuiz->start_time)->format('g:i A') }} -
                  {{ \Carbon\Carbon::parse($activeQuiz->end_time)->format('g:i A') }}
                </p>
              </div>
              <div class="col-md-4 text-end">
                @if ($hasParticipatedInActive)
                  <div class="alert alert-info mb-0">
                    <i class="fas fa-info-circle me-2"></i>
                    You have already participated in this quiz.
                  </div>
                @else
                  <form action="{{ route('admin.quiz.start') }}" method="POST" class="d-inline">
                    @csrf
                    <button type="submit" class="btn btn-primary-modern btn-modern"
                      onclick="showLoading('Starting Quiz...', 'Please wait while we prepare your quiz')">
                      <i class="fas fa-play me-2"></i>
                      Start Quiz
                    </button>
                  </form>
                @endif
              </div>
            </div>
          </div>
        </div>
      </div>
    @else
      <div class="col-12 mb-4">
        <div class="modern-card">
          <div class="card-body text-center py-5">
            <i class="fas fa-calendar-times fa-3x text-muted mb-3"></i>
            <h5 class="text-muted">No Active Quiz</h5>
            <p class="text-muted mb-0">There are no active quizzes available at the moment.</p>
          </div>
        </div>
      </div>
    @endif

    <!-- Quiz History -->
    @if ($userParticipations->count() > 0)
      <div class="col-12">
        <div class="modern-card">
          <div class="card-header">
            <h5 class="mb-0">
              <i class="fas fa-history me-2"></i>
              Quiz History
            </h5>
          </div>
          <div class="card-body">
            <div class="table-responsive">
              <table class="table table-hover">
                <thead>
                  <tr>
                    <th>Quiz Name</th>
                    <th>Date</th>
                    <th>Score</th>
                    <th>Status</th>
                    <th>Actions</th>
                  </tr>
                </thead>
                <tbody>
                  @foreach ($userParticipations as $participation)
                    <tr>
                      <td>
                        <strong>{{ $participation->quiz->name }}</strong>
                      </td>
                      <td>
                        {{ \Carbon\Carbon::parse($participation->started_at)->format('M d, Y g:i A') }}
                      </td>
                      <td>
                        @if ($participation->completed)
                          <span class="badge bg-success">{{ $participation->score }}</span>
                        @else
                          <span class="text-muted">-</span>
                        @endif
                      </td>
                      <td>
                        @if ($participation->completed)
                          <span class="badge bg-success">Completed</span>
                        @else
                          <span class="badge bg-warning">In Progress</span>
                        @endif
                      </td>
                      <td>
                        @if ($participation->completed)
                          <a href="{{ route('admin.quiz.results', $participation->id) }}"
                            class="btn btn-sm btn-outline-primary">
                            <i class="fas fa-eye me-1"></i>
                            View Results
                          </a>
                        @else
                          <a href="{{ route('admin.quiz.play', ['quizId' => $participation->quiz_id, 'employeeQuiz' => $participation->id]) }}"
                            class="btn btn-sm btn-outline-success">
                            <i class="fas fa-play me-1"></i>
                            Continue
                          </a>
                        @endif
                      </td>
                    </tr>
                  @endforeach
                </tbody>
              </table>
            </div>
          </div>
        </div>
      </div>
    @else
      <div class="col-12">
        <div class="modern-card">
          <div class="card-body text-center py-5">
            <i class="fas fa-clipboard-list fa-3x text-muted mb-3"></i>
            <h5 class="text-muted">No Quiz History</h5>
            <p class="text-muted mb-0">You haven't participated in any quizzes yet.</p>
          </div>
        </div>
      </div>
    @endif
  </div>

  <style>
    .modern-card {
      background: white;
      border-radius: 0.75rem;
      box-shadow: var(--shadow-sm);
      border: 1px solid var(--border-color);
      transition: all 0.2s ease;
    }

    .modern-card:hover {
      box-shadow: var(--shadow-md);
      transform: translateY(-2px);
    }

    .card-header {
      background: var(--light-bg);
      border-bottom: 1px solid var(--border-color);
      padding: 1rem 1.5rem;
      border-radius: 0.75rem 0.75rem 0 0;
    }

    .table {
      margin-bottom: 0;
    }

    .table th {
      border-top: none;
      font-weight: 600;
      color: var(--text-primary);
    }

    .table td {
      vertical-align: middle;
    }

    .badge {
      font-weight: 500;
      padding: 0.5rem 0.75rem;
    }
  </style>
@endsection