@extends('layouts.app')

@section('title', 'Employee Quiz Portal')
@section('page-title', 'Quiz Portal')

@section('content')
  <!-- Animated Background -->
  <div class="quiz-background">
    <div class="floating-shapes">
      <div class="shape shape-1"></div>
      <div class="shape shape-2"></div>
      <div class="shape shape-3"></div>
      <div class="shape shape-4"></div>
      <div class="shape shape-5"></div>
    </div>
  </div>

  <div class="quiz-container">
    <div class="container">
      <div class="row justify-content-center">
        <div class="col-lg-8 col-md-10 col-sm-12">

          <!-- Hero Section -->
          <div class="hero-section text-center mb-5">
            <div class="hero-icon">
              <i class="fas fa-brain"></i>
            </div>
            <h1 class="hero-title">
              <span class="title-gradient">Employee</span>
              <span class="title-accent">Quiz</span>
              <span class="title-gradient">Portal</span>
            </h1>
            <p class="hero-subtitle">Test your knowledge, challenge your mind, and compete with colleagues!</p>

            <!-- Live Stats -->
            <div class="live-stats">
              <div class="stat-item">
                <i class="fas fa-users"></i>
                <span class="stat-number" id="activeUsers">{{ $stats['activeUsers'] ?? 0 }}</span>
                <span class="stat-label">Active Users</span>
              </div>
              <div class="stat-item">
                <i class="fas fa-trophy"></i>
                <span class="stat-number" id="totalWinners">{{ $stats['winnersToday'] ?? 0 }}</span>
                <span class="stat-label">Winners Today</span>
              </div>
              <div class="stat-item">
                <i class="fas fa-clock"></i>
                <span class="stat-number" id="avgTime">{{ $stats['avgTime'] ?? 0 }}</span>
                <span class="stat-label">Avg Time (min)</span>
              </div>
            </div>
          </div>

          <!-- Main Login Card -->
          <div class="quiz-login-card">
            <div class="card-header-section">
              <div class="quiz-status">
                @if (isset($activeQuiz))
                  <div class="status-indicator active">
                    <i class="fas fa-circle"></i>
                    <span>Quiz Active</span>
                  </div>
                  <h2 class="quiz-name">{{ $activeQuiz->name }}</h2>
                  <div class="quiz-meta">
                    <span class="meta-item">
                      <i class="fas fa-calendar"></i>
                      {{ \Carbon\Carbon::parse($activeQuiz->quiz_date)->format('M d, Y') }}
                    </span>
                    <span class="meta-item">
                      <i class="fas fa-clock"></i>
                      {{ \Carbon\Carbon::parse($activeQuiz->start_time)->format('g:i A') }} -
                      {{ \Carbon\Carbon::parse($activeQuiz->end_time)->format('g:i A') }}
                    </span>
                  </div>
                @else
                  <div class="status-indicator inactive">
                    <i class="fas fa-circle"></i>
                    <span>No Active Quiz</span>
                  </div>
                @endif
              </div>
            </div>

            <div class="card-body-section">
              <!-- Alert Messages -->
              @if (session('error'))
                <div class="alert alert-danger alert-modern">
                  <i class="fas fa-exclamation-triangle me-2"></i>
                  {{ session('error') }}
                </div>
              @endif

              @if (session('success'))
                <div class="alert alert-success alert-modern">
                  <i class="fas fa-check-circle me-2"></i>
                  {{ session('success') }}
                </div>
              @endif

              <!-- Welcome Back Section -->
              @if (session('employee_quiz_user'))
                <div class="welcome-back-section">
                  <div class="user-avatar">
                    <i class="fas fa-user"></i>
                  </div>
                  <div class="user-info">
                    <h3>Welcome back, {{ session('employee_quiz_user')['name'] }}!</h3>
                    <p>Ready for another challenge?</p>
                  </div>
                  <div class="user-actions">
                    <a href="{{ route('employee.quiz.index') }}" class="btn btn-primary-modern">
                      <i class="fas fa-tachometer-alt me-2"></i>Go to Dashboard
                    </a>
                    <a href="{{ route('employee.quiz.logout') }}" class="btn btn-outline-danger-modern">
                      <i class="fas fa-sign-out-alt me-2"></i>Logout
                    </a>
                  </div>
                </div>
              @else
                <!-- Login Form -->
                
                  <div class="login-form-section">
                    <h3 class="form-title">
                      <i class="fas fa-sign-in-alt me-2"></i>
                      Enter Your Credentials
                    </h3>
                    <p class="form-subtitle">Access your quiz portal with your HRIS credentials</p>

                    <form action="{{ route('employee.quiz.dashboard') }}" method="POST" class="login-form">
                      @csrf

                      <div class="form-group">
                        <label for="employee_id" class="form-label">
                          <i class="fas fa-id-card me-2"></i>
                          Employee ID
                        </label>
                        <div class="input-group">
                          <span class="input-icon">
                            <i class="fas fa-user-tie"></i>
                          </span>
                          <input type="text" name="employee_id" id="employee_id"
                            class="form-control @error('employee_id') is-invalid @enderror" maxlength="4"
                            placeholder="Enter your 4-digit Employee ID" required pattern="\d{4}"
                            title="Only 4 digits allowed" oninput="this.value=this.value.replace(/[^0-9]/g,'')" />
                        </div>
                        @error('employee_id')
                          <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                      </div>

                      <div class="form-group">
                        <label for="password" class="form-label">
                          <i class="fas fa-lock me-2"></i>
                          HRIS Password
                        </label>
                        <div class="input-group">
                          <span class="input-icon">
                            <i class="fas fa-key"></i>
                          </span>
                          <input type="password" name="password" id="password"
                            class="form-control @error('password') is-invalid @enderror" placeholder="Enter your password"
                            required />
                          <button type="button" class="password-toggle" onclick="togglePassword()">
                            <i class="fas fa-eye" id="passwordIcon"></i>
                          </button>
                        </div>
                        @error('password')
                          <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                      </div>

                      <button type="submit" class="btn btn-start-quiz w-100">
                        <span class="btn-text">
                          <i class="fas fa-play me-2"></i>
                          Start Quiz Challenge
                        </span>
                        <span class="btn-loading" style="display: none;">
                          <i class="fas fa-spinner fa-spin me-2"></i>
                          Authenticating...
                        </span>
                      </button>
                    </form>
                  </div>
               
              @endif
            </div>
          </div>

          <!-- Features Section -->
          <div class="features-section">
            <h3 class="features-title">Why Participate?</h3>
            <div class="row">
              <div class="col-md-4 mb-3">
                <div class="feature-card">
                  <div class="feature-icon">
                    <i class="fas fa-trophy"></i>
                  </div>
                  <h4>Win Prizes</h4>
                  <p>Compete for top positions and win exciting rewards</p>
                </div>
              </div>
              <div class="col-md-4 mb-3">
                <div class="feature-card">
                  <div class="feature-icon">
                    <i class="fas fa-chart-line"></i>
                  </div>
                  <h4>Track Progress</h4>
                  <p>Monitor your performance and see your improvement over time</p>
                </div>
              </div>
              <div class="col-md-4 mb-3">
                <div class="feature-card">
                  <div class="feature-icon">
                    <i class="fas fa-users"></i>
                  </div>
                  <h4>Team Building</h4>
                  <p>Connect with colleagues and build a competitive spirit</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <style>
    /* Animated Background */
    .quiz-background {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: linear-gradient(135deg, #1e3a8a 0%, #3b82f6 25%, #8b5cf6 50%, #ec4899 75%, #f59e0b 100%);
      z-index: -1;
      overflow: hidden;
    }

    .floating-shapes {
      position: absolute;
      width: 100%;
      height: 100%;
    }

    .shape {
      position: absolute;
      background: rgba(255, 255, 255, 0.08);
      border-radius: 50%;
      animation: float 6s ease-in-out infinite;
    }

    .shape-1 {
      width: 80px;
      height: 80px;
      top: 20%;
      left: 10%;
      animation-delay: 0s;
    }

    .shape-2 {
      width: 120px;
      height: 120px;
      top: 60%;
      right: 10%;
      animation-delay: 2s;
    }

    .shape-3 {
      width: 60px;
      height: 60px;
      top: 80%;
      left: 20%;
      animation-delay: 4s;
    }

    .shape-4 {
      width: 100px;
      height: 100px;
      top: 10%;
      right: 30%;
      animation-delay: 1s;
    }

    .shape-5 {
      width: 40px;
      height: 40px;
      top: 40%;
      left: 60%;
      animation-delay: 3s;
    }

    @keyframes float {

      0%,
      100% {
        transform: translateY(0px) rotate(0deg);
      }

      50% {
        transform: translateY(-20px) rotate(180deg);
      }
    }

    /* Main Container */
    .quiz-container {
      min-height: 100vh;
      padding: 2rem 0;
      position: relative;
      z-index: 1;
    }

    /* Hero Section */
    .hero-section {
      margin-bottom: 3rem;
    }

    .hero-icon {
      width: 120px;
      height: 120px;
      background: linear-gradient(135deg, #3b82f6, #8b5cf6);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 0 auto 2rem;
      box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
      animation: pulse 2s ease-in-out infinite;
    }

    @keyframes pulse {

      0%,
      100% {
        transform: scale(1);
      }

      50% {
        transform: scale(1.05);
      }
    }

    .hero-icon i {
      font-size: 3rem;
      color: white;
    }

    .hero-title {
      font-size: 3.5rem;
      font-weight: 800;
      margin-bottom: 1rem;
      line-height: 1.2;
    }

    .title-gradient {
      background: linear-gradient(135deg, #ffffff, #e0e7ff);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    }

    .title-accent {
      color: #fbbf24;
      text-shadow: 0 0 20px rgba(251, 191, 36, 0.6);
    }

    .hero-subtitle {
      font-size: 1.25rem;
      color: #e0e7ff;
      margin-bottom: 2rem;
      font-weight: 400;
      text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
    }

    /* Live Stats */
    .live-stats {
      display: flex;
      justify-content: center;
      gap: 2rem;
      margin-top: 2rem;
    }

    .stat-item {
      text-align: center;
      color: white;
      animation: slideUp 0.6s ease-out;
      background: rgba(255, 255, 255, 0.1);
      backdrop-filter: blur(10px);
      border-radius: 16px;
      padding: 1.5rem;
      border: 1px solid rgba(255, 255, 255, 0.2);
    }

    .stat-item i {
      font-size: 1.5rem;
      margin-bottom: 0.5rem;
      color: #fbbf24;
    }

    .stat-number {
      display: block;
      font-size: 2rem;
      font-weight: 700;
      margin-bottom: 0.25rem;
      color: white;
    }

    .stat-label {
      font-size: 0.9rem;
      color: #e0e7ff;
      font-weight: 500;
    }

    /* Quiz Login Card */
    .quiz-login-card {
      background: rgba(255, 255, 255, 0.98);
      backdrop-filter: blur(20px);
      border-radius: 24px;
      border: 1px solid rgba(255, 255, 255, 0.3);
      box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
      overflow: hidden;
      animation: slideUp 0.8s ease-out;
      margin-bottom: 3rem;
    }

    @keyframes slideUp {
      from {
        opacity: 0;
        transform: translateY(30px);
      }

      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    .card-header-section {
      background: linear-gradient(135deg, #1e40af, #3b82f6);
      padding: 2rem;
      text-align: center;
      color: white;
    }

    .quiz-status {
      margin-bottom: 1rem;
    }

    .status-indicator {
      display: inline-flex;
      align-items: center;
      gap: 0.5rem;
      padding: 0.5rem 1rem;
      border-radius: 20px;
      font-weight: 600;
      font-size: 0.9rem;
      margin-bottom: 1rem;
    }

    .status-indicator.active {
      background: rgba(34, 197, 94, 0.2);
      color: #22c55e;
      border: 1px solid rgba(34, 197, 94, 0.3);
    }

    .status-indicator.inactive {
      background: rgba(239, 68, 68, 0.2);
      color: #ef4444;
      border: 1px solid rgba(239, 68, 68, 0.3);
    }

    .status-indicator i {
      font-size: 0.6rem;
    }

    .quiz-name {
      font-size: 2rem;
      font-weight: 700;
      margin-bottom: 1rem;
      color: white;
    }

    .quiz-meta {
      display: flex;
      justify-content: center;
      gap: 2rem;
      flex-wrap: wrap;
    }

    .meta-item {
      display: flex;
      align-items: center;
      gap: 0.5rem;
      font-size: 0.9rem;
      color: #dbeafe;
      font-weight: 500;
    }

    .card-body-section {
      padding: 2rem;
    }

    /* Welcome Back Section */
    .welcome-back-section {
      text-align: center;
      padding: 2rem;
    }

    .user-avatar {
      width: 80px;
      height: 80px;
      background: linear-gradient(135deg, #3b82f6, #8b5cf6);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 0 auto 1rem;
    }

    .user-avatar i {
      font-size: 2rem;
      color: white;
    }

    .user-info h3 {
      color: #1e293b;
      margin-bottom: 0.5rem;
      font-weight: 600;
    }

    .user-info p {
      color: #64748b;
      margin-bottom: 2rem;
      font-weight: 500;
    }

    .user-actions {
      display: flex;
      justify-content: center;
      gap: 1rem;
      flex-wrap: wrap;
    }

    /* Login Form Section */
    .login-form-section {
      max-width: 500px;
      margin: 0 auto;
    }

    .form-title {
      text-align: center;
      color: #1e293b;
      margin-bottom: 0.5rem;
      font-weight: 600;
    }

    .form-subtitle {
      text-align: center;
      color: #64748b;
      margin-bottom: 2rem;
      font-weight: 500;
    }

    .form-group {
      margin-bottom: 1.5rem;
    }

    .form-label {
      font-weight: 600;
      color: #1e293b;
      margin-bottom: 0.75rem;
      display: block;
    }

    .input-group {
      position: relative;
      display: flex;
      align-items: center;
    }

    .input-icon {
      position: absolute;
      left: 1rem;
      color: #64748b;
      z-index: 2;
    }

    .form-control {
      border: 2px solid #e2e8f0;
      border-radius: 12px;
      padding: 0.875rem 1rem 0.875rem 3rem;
      font-size: 1rem;
      transition: all 0.3s ease;
      background: white;
      width: 100%;
      color: #1e293b;
    }

    .form-control:focus {
      border-color: #3b82f6;
      box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
      background: white;
      outline: none;
    }

    .form-control::placeholder {
      color: #94a3b8;
    }

    .password-toggle {
      position: absolute;
      right: 1rem;
      background: none;
      border: none;
      color: #64748b;
      cursor: pointer;
      z-index: 2;
      transition: color 0.3s ease;
    }

    .password-toggle:hover {
      color: #3b82f6;
    }

    .btn-start-quiz {
      background: linear-gradient(135deg, #3b82f6, #8b5cf6);
      border: none;
      border-radius: 12px;
      padding: 1rem 2rem;
      font-weight: 600;
      font-size: 1.1rem;
      color: white;
      transition: all 0.3s ease;
      box-shadow: 0 4px 15px rgba(59, 130, 246, 0.3);
      position: relative;
      overflow: hidden;
    }

    .btn-start-quiz:hover {
      transform: translateY(-2px);
      box-shadow: 0 8px 25px rgba(59, 130, 246, 0.4);
      background: linear-gradient(135deg, #2563eb, #7c3aed);
    }

    .btn-start-quiz:active {
      transform: translateY(0);
    }

    .btn-start-quiz::before {
      content: '';
      position: absolute;
      top: 0;
      left: -100%;
      width: 100%;
      height: 100%;
      background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
      transition: left 0.5s;
    }

    .btn-start-quiz:hover::before {
      left: 100%;
    }

    /* No Quiz Section */
    .no-quiz-section {
      text-align: center;
      padding: 3rem 2rem;
    }

    .no-quiz-icon {
      width: 100px;
      height: 100px;
      background: linear-gradient(135deg, #f59e0b, #ef4444);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 0 auto 1.5rem;
    }

    .no-quiz-icon i {
      font-size: 2.5rem;
      color: white;
    }

    .no-quiz-section h3 {
      color: #1e293b;
      margin-bottom: 1rem;
      font-weight: 600;
    }

    .no-quiz-section p {
      color: #64748b;
      margin-bottom: 2rem;
      font-weight: 500;
    }

    .quiz-schedule {
      background: #f8fafc;
      border-radius: 12px;
      padding: 1.5rem;
      text-align: left;
      border: 1px solid #e2e8f0;
    }

    .quiz-schedule h4 {
      color: #1e293b;
      margin-bottom: 1rem;
      font-weight: 600;
    }

    .schedule-item {
      display: flex;
      align-items: center;
      gap: 0.75rem;
      color: #64748b;
      font-weight: 500;
    }

    /* Features Section */
    .features-section {
      margin-top: 3rem;
    }

    .features-title {
      text-align: center;
      color: white;
      font-size: 2rem;
      font-weight: 700;
      margin-bottom: 2rem;
      text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    }

    .feature-card {
      background: rgba(255, 255, 255, 0.15);
      backdrop-filter: blur(10px);
      border-radius: 16px;
      padding: 2rem;
      text-align: center;
      color: white;
      border: 1px solid rgba(255, 255, 255, 0.2);
      transition: all 0.3s ease;
    }

    .feature-card:hover {
      transform: translateY(-5px);
      background: rgba(255, 255, 255, 0.2);
      border-color: rgba(255, 255, 255, 0.3);
    }

    .feature-icon {
      width: 60px;
      height: 60px;
      background: rgba(251, 191, 36, 0.2);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 0 auto 1rem;
      border: 1px solid rgba(251, 191, 36, 0.3);
    }

    .feature-icon i {
      font-size: 1.5rem;
      color: #fbbf24;
    }

    .feature-card h4 {
      margin-bottom: 0.75rem;
      font-weight: 600;
      color: white;
    }

    .feature-card p {
      color: #e0e7ff;
      font-size: 0.9rem;
      font-weight: 500;
    }

    /* Alert Styles */
    .alert-modern {
      border-radius: 12px;
      border: none;
      padding: 1rem 1.5rem;
      font-weight: 500;
      margin-bottom: 1.5rem;
      animation: slideIn 0.3s ease-out;
    }

    @keyframes slideIn {
      from {
        opacity: 0;
        transform: translateX(-20px);
      }

      to {
        opacity: 1;
        transform: translateX(0);
      }
    }

    .alert-success {
      background: linear-gradient(135deg, #dcfce7, #bbf7d0);
      color: #166534;
      border: 1px solid #86efac;
    }

    .alert-danger {
      background: linear-gradient(135deg, #fee2e2, #fecaca);
      color: #991b1b;
      border: 1px solid #fca5a5;
    }

    /* Button Styles */
    .btn-primary-modern {
      background: linear-gradient(135deg, #3b82f6, #8b5cf6);
      border: none;
      border-radius: 8px;
      color: white;
      font-weight: 600;
      transition: all 0.3s ease;
      padding: 0.75rem 1.5rem;
    }

    .btn-primary-modern:hover {
      transform: translateY(-2px);
      box-shadow: 0 8px 25px rgba(59, 130, 246, 0.4);
      background: linear-gradient(135deg, #2563eb, #7c3aed);
      color: white;
    }

    .btn-outline-danger-modern {
      border: 2px solid #ef4444;
      color: #ef4444;
      background: transparent;
      border-radius: 8px;
      font-weight: 600;
      transition: all 0.3s ease;
      padding: 0.75rem 1.5rem;
    }

    .btn-outline-danger-modern:hover {
      background: #ef4444;
      color: white;
      transform: translateY(-2px);
      box-shadow: 0 8px 25px rgba(239, 68, 68, 0.4);
    }

    /* Form Validation Styles */
    .form-control.is-invalid {
      border-color: #ef4444;
      box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);
    }

    .invalid-feedback {
      display: block;
      width: 100%;
      margin-top: 0.25rem;
      font-size: 0.875rem;
      color: #ef4444;
      font-weight: 500;
    }

    /* Responsive */
    @media (max-width: 768px) {
      .hero-title {
        font-size: 2.5rem;
      }

      .live-stats {
        flex-direction: column;
        gap: 1rem;
      }

      .quiz-meta {
        flex-direction: column;
        gap: 0.5rem;
      }

      .user-actions {
        flex-direction: column;
      }

      .stat-item {
        padding: 1rem;
      }
    }
  </style>

  <script>
    // Animate stats on load (only if they're 0 to show they're loading)
    function animateStats() {
      const stats = [{
          element: 'activeUsers',
          duration: 2000
        },
        {
          element: 'totalWinners',
          duration: 2000
        },
        {
          element: 'avgTime',
          duration: 2000
        }
      ];

      stats.forEach(stat => {
        const element = document.getElementById(stat.element);
        if (element) {
          const target = parseInt(element.textContent) || 0;
          if (target > 0) {
            // If we have real data, animate from 0 to the actual value
            let current = 0;
            const increment = target / (stat.duration / 16);

            const timer = setInterval(() => {
              current += increment;
              if (current >= target) {
                current = target;
                clearInterval(timer);
              }
              element.textContent = Math.floor(current);
            }, 16);
          }
        }
      });
    }

    // Password toggle
    function togglePassword() {
      const passwordInput = document.getElementById('password');
      const passwordIcon = document.getElementById('passwordIcon');

      if (passwordInput.type === 'password') {
        passwordInput.type = 'text';
        passwordIcon.classList.remove('fa-eye');
        passwordIcon.classList.add('fa-eye-slash');
      } else {
        passwordInput.type = 'password';
        passwordIcon.classList.remove('fa-eye-slash');
        passwordIcon.classList.add('fa-eye');
      }
    }

    // Form submission with loading
    document.querySelector('.btn-start-quiz').addEventListener('click', function() {
      this.classList.add('loading');
    });

    // Auto-hide alerts after 5 seconds
    setTimeout(function() {
      const alerts = document.querySelectorAll('.alert');
      alerts.forEach(alert => {
        alert.style.opacity = '0';
        alert.style.transform = 'translateY(-10px)';
        setTimeout(() => alert.remove(), 300);
      });
    }, 5000);

    // Initialize animations
    document.addEventListener('DOMContentLoaded', function() {
      animateStats();

      // Refresh stats every 30 seconds
      setInterval(refreshStats, 30000);
    });

    // Refresh stats from server
    function refreshStats() {
      fetch('/stats')
        .then(response => response.json())
        .then(data => {
          if (data.success) {
            updateStats(data.stats);
          }
        })
        .catch(error => {
          console.log('Error refreshing stats:', error);
        });
    }

    // Update stats with smooth animation
    function updateStats(stats) {
      Object.keys(stats).forEach(key => {
        const element = document.getElementById(key === 'activeUsers' ? 'activeUsers' :
          key === 'winnersToday' ? 'totalWinners' : 'avgTime');
        if (element) {
          const currentValue = parseInt(element.textContent) || 0;
          const newValue = stats[key] || 0;

          if (currentValue !== newValue) {
            animateValueChange(element, currentValue, newValue);
          }
        }
      });
    }

    // Animate value change
    function animateValueChange(element, from, to) {
      const duration = 1000;
      const start = performance.now();

      function update(currentTime) {
        const elapsed = currentTime - start;
        const progress = Math.min(elapsed / duration, 1);

        const current = Math.floor(from + (to - from) * progress);
        element.textContent = current;

        if (progress < 1) {
          requestAnimationFrame(update);
        }
      }

      requestAnimationFrame(update);
    }
  </script>
@endsection