@extends('layouts.app')

@section('content')
  <div class="row justify-content-center">
    <div class="col-lg-10 col-md-12">
      <!-- Welcome Header -->
      <div class="modern-card fade-in mb-4">
        <div class="d-flex justify-content-between align-items-center">
          <div>
            <h1 class="quiz-title mb-2">
              <i class="fas fa-user-circle me-3"></i>
              Welcome back, {{ $user['name'] }}!
            </h1>
            <p class="text-muted fs-5">Employee ID: {{ $user['employee_id'] }}</p>
          </div>
          <div class="d-flex gap-2">
            <a href="{{ route('employee.change.password') }}" class="btn btn-outline-primary">
              <i class="fas fa-key me-2"></i>Change Password
            </a>
            <a href="{{ route('employee.quiz.rules') }}" class="btn btn-outline-info">
              <i class="fas fa-book me-2"></i>Quiz Rule Book
            </a>
            <a href="{{ route('employee.quiz.logout') }}" class="btn btn-outline-danger">
              <i class="fas fa-sign-out-alt me-2"></i>Logout
            </a>
          </div>
        </div>
      </div>

      <!-- Statistics Cards -->
      <div class="row mb-4">
        <div class="col-lg-3 col-md-6 mb-3">
          <div class="modern-card text-center">
            <div class="stat-value text-primary">{{ $totalQuizzes }}</div>
            <div class="stat-label">Total Quizzes</div>
            <i class="fas fa-clipboard-list fa-2x text-primary mt-2"></i>
          </div>
        </div>
        <div class="col-lg-3 col-md-6 mb-3">
          <div class="modern-card text-center">
            <div class="stat-value text-success">{{ $completedQuizzes }}</div>
            <div class="stat-label">Completed</div>
            <i class="fas fa-check-circle fa-2x text-success mt-2"></i>
          </div>
        </div>
        <div class="col-lg-3 col-md-6 mb-3">
          <div class="modern-card text-center">
            <div class="stat-value text-info">{{ $totalScore }}</div>
            <div class="stat-label">Total Score</div>
            <i class="fas fa-star fa-2x text-info mt-2"></i>
          </div>
        </div>
        <div class="col-lg-3 col-md-6 mb-3">
          <div class="modern-card text-center">
            <div class="stat-value text-warning">{{ $averageScore }}%</div>
            <div class="stat-label">Average Score</div>
            <i class="fas fa-chart-line fa-2x text-warning mt-2"></i>
          </div>
        </div>
      </div>

      <!-- Active Quiz Section -->
      @if ($activeQuiz)
        <div class="modern-card mb-4">
          <div class="row align-items-center">
            <div class="col-md-8">
              <h3 class="mb-2">
                <i class="fas fa-play-circle me-2 text-primary"></i>
                Active Quiz: {{ $activeQuiz->name }}
              </h3>
              <p class="text-muted mb-2">
                <i class="fas fa-calendar me-1"></i>
                Available until: {{ \Carbon\Carbon::parse($activeQuiz->quiz_date)->format('M d, Y') }}
              </p>
              <p class="text-muted mb-0">
                <i class="fas fa-clock me-1"></i>
                Time: {{ \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-success mb-0">
                  <i class="fas fa-check me-2"></i>
                  You have completed this quiz
                </div>
              @else
                <form action="{{ route('employee.quiz.start') }}" method="POST" class="d-inline">
                  @csrf
                  <input type="hidden" name="employee_id" value="{{ $user['employee_id'] }}">
                  <input type="hidden" name="password" value="session_user">
                  <button type="submit" class="btn btn-primary btn-lg">
                    <i class="fas fa-play me-2"></i>Start Quiz
                  </button>
                </form>
              @endif
            </div>
          </div>
        </div>
      @else
        <div class="modern-card mb-4">
          <div class="text-center">
            <i class="fas fa-info-circle fa-3x text-muted mb-3"></i>
            <h3 class="text-muted">No Active Quiz</h3>
            <p class="text-muted">There are currently no active quizzes available.</p>
          </div>
        </div>
      @endif

      <!-- Quiz History -->
      @if ($userParticipations->count() > 0)
        <div class="modern-card">
          <h3 class="mb-4">
            <i class="fas fa-history me-2"></i>
            Quiz History
          </h3>

          <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>Action</th>
                </tr>
              </thead>
              <tbody>
                @foreach ($userParticipations as $participation)
                  <tr>
                    <td>
                      <strong>{{ $participation->quiz->name }}</strong>
                    </td>
                    <td>
                      {{ $participation->created_at->format('M d, Y g:i A') }}
                    </td>
                    <td>
                      @if ($participation->completed)
                        <span class="badge bg-success fs-6">
                          {{ $participation->score }}/{{ $participation->employeeQuizParticipations->count() }}
                        </span>
                      @else
                        <span class="text-muted">-</span>
                      @endif
                    </td>
                    <td>
                      @if ($participation->completed)
                        <span class="badge bg-success">
                          <i class="fas fa-check me-1"></i>Completed
                        </span>
                      @else
                        <span class="badge bg-warning">
                          <i class="fas fa-clock me-1"></i>In Progress
                        </span>
                      @endif
                    </td>
                    <td>
                      @if ($participation->completed)
                        <a href="{{ route('employee.quiz.results', ['employeeQuizId' => $participation->id]) }}"
                          class="btn btn-sm btn-outline-primary">
                          <i class="fas fa-eye me-1"></i>View Results
                        </a>
                      @else
                        <span class="text-muted">No action available</span>
                      @endif
                    </td>
                  </tr>
                @endforeach
              </tbody>
            </table>
          </div>
        </div>
      @else
        <div class="modern-card">
          <div class="text-center">
            <i class="fas fa-clipboard-list fa-3x text-muted mb-3"></i>
            <h3 class="text-muted">No Quiz History</h3>
            <p class="text-muted">You haven't participated in any quizzes yet.</p>
            @if ($activeQuiz && !$hasParticipatedInActive)
              <form action="{{ route('employee.quiz.start') }}" method="POST" class="d-inline">
                @csrf
                <input type="hidden" name="employee_id" value="{{ $user['employee_id'] }}">
                <input type="hidden" name="password" value="session_user">
                <button type="submit" class="btn btn-primary">
                  <i class="fas fa-play me-2"></i>Start Your First Quiz
                </button>
              </form>
            @endif
          </div>
        </div>
      @endif
    </div>
  </div>
@endsection