@extends('layouts.app')

@section('content')
  <div class="login-container">
    <div class="login-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>
    </div>

    <div class="container">
      <div class="row justify-content-center align-items-center min-vh-100">
        <div class="col-lg-5 col-md-7 col-sm-10">
          <!-- Logo/Brand Section -->
          <div class="text-center mb-4">
            <div class="brand-logo mb-3">
              <i class="fas fa-graduation-cap"></i>
            </div>
            <h1 class="brand-title">Employee Quiz System</h1>
            <p class="brand-subtitle">Sign in to access your dashboard</p>
          </div>

          <!-- Login Card -->
          <div class="login-card">
            <div class="card-header-section">
              <h2 class="login-title">
                <i class="fas fa-sign-in-alt me-2"></i>
                Welcome Back
              </h2>
              <p class="login-subtitle">Enter your credentials to continue</p>
            </div>

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

              <!-- Login Form -->
              <form method="POST" action="{{ route('login') }}" class="login-form">
                @csrf

                <!-- Employee ID Field -->
                <div class="form-group">
                  <label for="emp_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"></i>
                    </span>
                    <input id="emp_id" type="text" class="form-control @error('emp_id') is-invalid @enderror"
                      name="emp_id" value="{{ old('emp_id') }}" placeholder="Enter your employee ID" required autofocus>
                  </div>
                  @error('emp_id')
                    <div class="invalid-feedback">
                      <i class="fas fa-exclamation-circle me-1"></i>
                      {{ $message }}
                    </div>
                  @enderror
                </div>

                <!-- Password Field -->
                <div class="form-group">
                  <label for="password" class="form-label">
                    <i class="fas fa-lock me-2"></i>
                    Password
                  </label>
                  <div class="input-group">
                    <span class="input-icon">
                      <i class="fas fa-key"></i>
                    </span>
                    <input id="password" type="password" class="form-control @error('password') is-invalid @enderror"
                      name="password" 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">
                      <i class="fas fa-exclamation-circle me-1"></i>
                      {{ $message }}
                    </div>
                  @enderror
                </div>

                <!-- Submit Button -->
                <div class="form-group">
                  <button type="submit" class="btn btn-login w-100"
                    onclick="showLoading('Signing In...', 'Please wait while we verify your credentials')">
                    <span class="btn-text">
                      <i class="fas fa-sign-in-alt me-2"></i>
                      Sign In
                    </span>
                    <span class="btn-loading" style="display: none;">
                      <i class="fas fa-spinner fa-spin me-2"></i>
                      Signing In...
                    </span>
                  </button>
                </div>
              </form>

              <!-- Additional Info -->
              <div class="login-footer">
                <div class="divider">
                  <span>System Information</span>
                </div>
                <div class="system-info">
                  <div class="info-item">
                    <i class="fas fa-shield-alt text-success"></i>
                    <span>Secure Authentication</span>
                  </div>
                  <div class="info-item">
                    <i class="fas fa-clock text-info"></i>
                    <span>24/7 Access</span>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <!-- Footer -->
          <div class="login-page-footer">
            <p>&copy; {{ date('Y') }} Employee Quiz System. All rights reserved.</p>
          </div>
        </div>
      </div>
    </div>
  </div>

  <style>
    /* Login Container */
    .login-container {
      position: relative;
      min-height: 100vh;
      overflow: hidden;
    }

    /* Background with floating shapes */
    .login-background {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      z-index: -1;
    }

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

    .shape {
      position: absolute;
      background: rgba(255, 255, 255, 0.1);
      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;
    }

    @keyframes float {

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

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

    /* Brand Section */
    .brand-logo {
      width: 80px;
      height: 80px;
      background: linear-gradient(135deg, #667eea, #764ba2);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 0 auto;
      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    }

    .brand-logo i {
      font-size: 2.5rem;
      color: white;
    }

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

    .brand-subtitle {
      color: rgba(255, 255, 255, 0.8);
      font-size: 1.1rem;
      margin-bottom: 2rem;
    }

    /* Login Card */
    .login-card {
      background: rgba(255, 255, 255, 0.95);
      backdrop-filter: blur(20px);
      border-radius: 24px;
      border: 1px solid rgba(255, 255, 255, 0.2);
      box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
      overflow: hidden;
      animation: slideUp 0.6s ease-out;
    }

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

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

    .card-header-section {
      background: linear-gradient(135deg, #667eea, #764ba2);
      padding: 2rem;
      text-align: center;
      color: white;
    }

    .login-title {
      font-size: 1.5rem;
      font-weight: 600;
      margin-bottom: 0.5rem;
    }

    .login-subtitle {
      opacity: 0.9;
      margin: 0;
    }

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

    /* Form Styles */
    .form-group {
      margin-bottom: 1.5rem;
    }

    .form-label {
      font-weight: 600;
      color: var(--text-primary);
      margin-bottom: 0.75rem;
      display: block;
    }

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

    .input-icon {
      position: absolute;
      left: 1rem;
      color: var(--text-secondary);
      z-index: 2;
    }

    .form-control {
      border: 2px solid var(--border-color);
      border-radius: 12px;
      padding: 0.875rem 1rem 0.875rem 3rem;
      font-size: 1rem;
      transition: all 0.3s ease;
      background: rgba(255, 255, 255, 0.9);
      width: 100%;
    }

    .form-control:focus {
      border-color: #667eea;
      box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
      background: white;
      outline: none;
    }

    .form-control::placeholder {
      color: var(--text-secondary);
      opacity: 0.7;
    }

    .password-toggle {
      position: absolute;
      right: 1rem;
      background: none;
      border: none;
      color: var(--text-secondary);
      cursor: pointer;
      z-index: 2;
      transition: color 0.3s ease;
    }

    .password-toggle:hover {
      color: #667eea;
    }

    /* Button Styles */
    .btn-login {
      background: linear-gradient(135deg, #667eea, #764ba2);
      border: none;
      border-radius: 12px;
      padding: 1rem 2rem;
      font-weight: 600;
      font-size: 1rem;
      color: white;
      transition: all 0.3s ease;
      box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
      position: relative;
      overflow: hidden;
    }

    .btn-login:hover {
      transform: translateY(-2px);
      box-shadow: 0 8px 25px rgba(102, 126, 234, 0.4);
      background: linear-gradient(135deg, #5a67d8, #6b46c1);
    }

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

    .btn-login::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-login:hover::before {
      left: 100%;
    }

    /* 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, #d1fae5, #a7f3d0);
      color: #065f46;
    }

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

    /* Footer Section */
    .login-footer {
      margin-top: 2rem;
    }

    .divider {
      text-align: center;
      margin: 1.5rem 0;
      position: relative;
    }

    .divider::before {
      content: '';
      position: absolute;
      top: 50%;
      left: 0;
      right: 0;
      height: 1px;
      background: var(--border-color);
    }

    .divider span {
      background: rgba(255, 255, 255, 0.95);
      padding: 0 1rem;
      color: var(--text-secondary);
      font-size: 0.9rem;
      font-weight: 500;
    }

    .system-info {
      display: flex;
      justify-content: space-around;
      gap: 1rem;
    }

    .info-item {
      display: flex;
      align-items: center;
      gap: 0.5rem;
      font-size: 0.9rem;
      color: var(--text-secondary);
    }

    .info-item i {
      font-size: 1rem;
    }

    /* Page Footer */
    .login-page-footer {
      text-align: center;
      margin-top: 2rem;
      color: rgba(255, 255, 255, 0.7);
      font-size: 0.9rem;
    }

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

      .brand-subtitle {
        font-size: 1rem;
      }

      .card-header-section,
      .card-body-section {
        padding: 1.5rem;
      }

      .system-info {
        flex-direction: column;
        align-items: center;
        gap: 0.5rem;
      }
    }

    /* Loading State */
    .btn-loading {
      display: none;
    }

    .btn-login.loading .btn-text {
      display: none;
    }

    .btn-login.loading .btn-loading {
      display: inline;
    }
  </style>

  <script>
    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');
      }
    }

    // Add loading state to button
    document.querySelector('.btn-login').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);
  </script>
@endsection