@extends('layouts.app')

@section('title', 'Change Password')
@section('page-title', 'Change Password')

@section('content')
  <div class="change-password-container">
    <div class="container">
      <div class="row justify-content-center">
        <div class="col-lg-6 col-md-8 col-sm-12">
          <!-- Header -->
          <div class="text-center mb-4">
            <div class="password-icon mb-3">
              <i class="fas fa-key"></i>
            </div>
            <h2 class="page-title">Change Password</h2>
            <p class="text-muted">Update your password to keep your account secure</p>
          </div>

          <!-- Change Password Card -->
          <div class="change-password-card">
            <div class="card-header-section">
              <h3 class="card-title">
                <i class="fas fa-shield-alt me-2"></i>
                Security Settings
              </h3>
              <p class="card-subtitle">Enter your current password and choose a new one</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

              <!-- Change Password Form -->
              <form method="POST" action="{{ route('employee.change.password.submit') }}" class="password-form">
                @csrf

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

                <!-- New Password -->
                <div class="form-group">
                  <label for="new_password" class="form-label">
                    <i class="fas fa-lock me-2"></i>
                    New Password
                  </label>
                  <div class="input-group">
                    <span class="input-icon">
                      <i class="fas fa-plus-circle"></i>
                    </span>
                    <input id="new_password" type="password"
                      class="form-control @error('new_password') is-invalid @enderror" name="new_password"
                      placeholder="Enter your new password" required>
                    <button type="button" class="password-toggle"
                      onclick="togglePassword('new_password', 'newPasswordIcon')">
                      <i class="fas fa-eye" id="newPasswordIcon"></i>
                    </button>
                  </div>
                  @error('new_password')
                    <div class="invalid-feedback">
                      <i class="fas fa-exclamation-circle me-1"></i>
                      {{ $message }}
                    </div>
                  @enderror

                  <!-- Password Strength Indicator -->
                  <div class="password-strength mt-2">
                    <div class="strength-bar">
                      <div class="strength-fill" id="strengthFill"></div>
                    </div>
                    <small class="strength-text" id="strengthText">Password strength</small>
                  </div>
                </div>

                <!-- Confirm New Password -->
                <div class="form-group">
                  <label for="new_password_confirmation" class="form-label">
                    <i class="fas fa-lock me-2"></i>
                    Confirm New Password
                  </label>
                  <div class="input-group">
                    <span class="input-icon">
                      <i class="fas fa-check-circle"></i>
                    </span>
                    <input id="new_password_confirmation" type="password"
                      class="form-control @error('new_password_confirmation') is-invalid @enderror"
                      name="new_password_confirmation" placeholder="Confirm your new password" required>
                    <button type="button" class="password-toggle"
                      onclick="togglePassword('new_password_confirmation', 'confirmPasswordIcon')">
                      <i class="fas fa-eye" id="confirmPasswordIcon"></i>
                    </button>
                  </div>
                  @error('new_password_confirmation')
                    <div class="invalid-feedback">
                      <i class="fas fa-exclamation-circle me-1"></i>
                      {{ $message }}
                    </div>
                  @enderror
                </div>

                <!-- Password Requirements -->
                <div class="password-requirements">
                  <h6 class="requirements-title">
                    <i class="fas fa-info-circle me-2"></i>
                    Password Requirements
                  </h6>
                  <ul class="requirements-list">
                    <li class="requirement-item" id="req-length">
                      <i class="fas fa-circle"></i>
                      At least 6 characters
                    </li>
                    <li class="requirement-item" id="req-match">
                      <i class="fas fa-circle"></i>
                      Passwords match
                    </li>
                  </ul>
                </div>

                <!-- Submit Button -->
                <div class="form-group">
                  <button type="submit" class="btn btn-change-password w-100">
                    <span class="btn-text">
                      <i class="fas fa-save me-2"></i>
                      Update Password
                    </span>
                    <span class="btn-loading" style="display: none;">
                      <i class="fas fa-spinner fa-spin me-2"></i>
                      Updating...
                    </span>
                  </button>
                </div>
              </form>

              <!-- Back Link -->
              <div class="text-center mt-4">
                <a href="{{ route('employee.quiz.index') }}" class="btn btn-outline-secondary">
                  <i class="fas fa-arrow-left me-2"></i>
                  Back to Dashboard
                </a>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <style>
    .change-password-container {
      min-height: 100vh;
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      padding: 2rem 0;
    }

    .password-icon {
      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);
    }

    .password-icon i {
      font-size: 2rem;
      color: white;
    }

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

    .change-password-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;
    }

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

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

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

    .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;
    }

    .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;
    }

    .btn-change-password {
      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-change-password:hover {
      transform: translateY(-2px);
      box-shadow: 0 8px 25px rgba(102, 126, 234, 0.4);
      background: linear-gradient(135deg, #5a67d8, #6b46c1);
    }

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

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

    /* Password Strength */
    .password-strength {
      margin-top: 0.5rem;
    }

    .strength-bar {
      height: 4px;
      background: #e2e8f0;
      border-radius: 2px;
      overflow: hidden;
      margin-bottom: 0.25rem;
    }

    .strength-fill {
      height: 100%;
      width: 0%;
      transition: all 0.3s ease;
      border-radius: 2px;
    }

    .strength-fill.weak {
      width: 33.33%;
      background: #ef4444;
    }

    .strength-fill.medium {
      width: 66.66%;
      background: #f59e0b;
    }

    .strength-fill.strong {
      width: 100%;
      background: #10b981;
    }

    .strength-text {
      font-size: 0.8rem;
      color: var(--text-secondary);
    }

    /* Password Requirements */
    .password-requirements {
      background: #f8fafc;
      border-radius: 12px;
      padding: 1rem;
      margin-bottom: 1.5rem;
    }

    .requirements-title {
      font-size: 0.9rem;
      font-weight: 600;
      color: var(--text-primary);
      margin-bottom: 0.75rem;
    }

    .requirements-list {
      list-style: none;
      padding: 0;
      margin: 0;
    }

    .requirement-item {
      display: flex;
      align-items: center;
      gap: 0.5rem;
      font-size: 0.85rem;
      color: var(--text-secondary);
      margin-bottom: 0.25rem;
    }

    .requirement-item i {
      font-size: 0.6rem;
      transition: color 0.3s ease;
    }

    .requirement-item.valid i {
      color: #10b981;
    }

    .requirement-item.invalid i {
      color: #ef4444;
    }

    /* 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;
    }

    /* Responsive */
    @media (max-width: 768px) {

      .card-header-section,
      .card-body-section {
        padding: 1.5rem;
      }
    }
  </style>

  <script>
    function togglePassword(inputId, iconId) {
      const passwordInput = document.getElementById(inputId);
      const passwordIcon = document.getElementById(iconId);

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

    // Password strength checker
    document.getElementById('new_password').addEventListener('input', function() {
      const password = this.value;
      const strengthFill = document.getElementById('strengthFill');
      const strengthText = document.getElementById('strengthText');
      const reqLength = document.getElementById('req-length');

      // Check length requirement
      if (password.length >= 6) {
        reqLength.classList.add('valid');
        reqLength.classList.remove('invalid');
      } else {
        reqLength.classList.remove('valid');
        reqLength.classList.add('invalid');
      }

      // Calculate strength
      let strength = 0;
      if (password.length >= 6) strength++;
      if (password.match(/[a-z]/)) strength++;
      if (password.match(/[A-Z]/)) strength++;
      if (password.match(/[0-9]/)) strength++;
      if (password.match(/[^a-zA-Z0-9]/)) strength++;

      // Update strength indicator
      strengthFill.className = 'strength-fill';
      if (strength <= 2) {
        strengthFill.classList.add('weak');
        strengthText.textContent = 'Weak password';
      } else if (strength <= 3) {
        strengthFill.classList.add('medium');
        strengthText.textContent = 'Medium strength';
      } else {
        strengthFill.classList.add('strong');
        strengthText.textContent = 'Strong password';
      }
    });

    // Check password confirmation
    document.getElementById('new_password_confirmation').addEventListener('input', function() {
      const password = document.getElementById('new_password').value;
      const confirmation = this.value;
      const reqMatch = document.getElementById('req-match');

      if (confirmation === password && password.length > 0) {
        reqMatch.classList.add('valid');
        reqMatch.classList.remove('invalid');
      } else {
        reqMatch.classList.remove('valid');
        reqMatch.classList.add('invalid');
      }
    });

    // Add loading state to button
    document.querySelector('.btn-change-password').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