@extends('layouts.admin')

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

@section('content')
  <div class="row justify-content-center">
    <div class="col-lg-8 col-md-10 col-sm-12">
      <!-- Header Section -->
      <div class="modern-card mb-4">
        <div class="card-body text-center">
          <div class="mb-3">
            <i class="fas fa-key fa-4x text-primary"></i>
          </div>
          <h2 class="text-primary mb-2">Change Password</h2>
          <h5 class="text-muted">Update your password to keep your account secure</h5>
        </div>
      </div>

      <!-- Change Password Card -->
      <div class="modern-card">
        <div class="card-header">
          <h5 class="mb-0">
            <i class="fas fa-shield-alt me-2"></i>
            Security Settings
          </h5>
        </div>
        <div class="card-body">
          <!-- 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('admin.change.password.submit') }}" class="password-form">
            @csrf

            <div class="row">
              <div class="col-md-6">
                <!-- Current Password -->
                <div class="form-group mb-4">
                  <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>
              </div>

              <div class="col-md-6">
                <!-- 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>
                    <li class="requirement-item" id="req-different">
                      <i class="fas fa-circle"></i>
                      Different from current
                    </li>
                  </ul>
                </div>
              </div>
            </div>

            <div class="row">
              <div class="col-md-6">
                <!-- New Password -->
                <div class="form-group mb-4">
                  <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>
              </div>

              <div class="col-md-6">
                <!-- Confirm New Password -->
                <div class="form-group mb-4">
                  <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>
              </div>
            </div>

            <!-- Security Tips -->
            <div class="security-tips mb-4">
              <div class="tips-header">
                <i class="fas fa-lightbulb text-warning me-2"></i>
                <strong>Security Tips</strong>
              </div>
              <div class="tips-content">
                <ul class="tips-list">
                  <li>Use a combination of letters, numbers, and special characters</li>
                  <li>Avoid using personal information like your name or birthdate</li>
                  <li>Don't reuse passwords from other accounts</li>
                  <li>Consider using a password manager for better security</li>
                </ul>
              </div>
            </div>

            <!-- Submit Button -->
            <div class="form-group">
              <button type="submit" class="btn btn-primary-modern btn-modern 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('dashboard') }}" class="btn btn-outline-secondary btn-modern">
              <i class="fas fa-arrow-left me-2"></i>
              Back to Dashboard
            </a>
          </div>
        </div>
      </div>
    </div>
  </div>

  <style>
    .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: var(--primary-color);
      box-shadow: 0 0 0 3px rgba(99, 102, 241, 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: var(--primary-color);
    }

    /* 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;
      height: 100%;
    }

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

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

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

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

    /* Security Tips */
    .security-tips {
      background: linear-gradient(135deg, #fef3c7, #fde68a);
      border-radius: 12px;
      padding: 1.5rem;
      border-left: 4px solid #f59e0b;
    }

    .tips-header {
      font-size: 1rem;
      font-weight: 600;
      color: #92400e;
      margin-bottom: 1rem;
    }

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

    .tips-list li {
      color: #92400e;
      font-size: 0.9rem;
      margin-bottom: 0.5rem;
      padding-left: 1.5rem;
      position: relative;
    }

    .tips-list li::before {
      content: '•';
      position: absolute;
      left: 0;
      color: #f59e0b;
      font-weight: bold;
    }

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

    /* Button Styles */
    .btn-modern {
      border-radius: 0.5rem;
      font-weight: 500;
      transition: all 0.2s ease;
      padding: 0.75rem 1.5rem;
    }

    .btn-modern:hover {
      transform: translateY(-1px);
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    }

    /* Responsive */
    @media (max-width: 768px) {
      .password-requirements {
        margin-top: 1rem;
      }
    }
  </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 currentPassword = document.getElementById('current_password').value;
      const strengthFill = document.getElementById('strengthFill');
      const strengthText = document.getElementById('strengthText');
      const reqLength = document.getElementById('req-length');
      const reqDifferent = document.getElementById('req-different');

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

      // Check if different from current password
      if (password !== currentPassword && password.length > 0) {
        reqDifferent.classList.add('valid');
        reqDifferent.classList.remove('invalid');
      } else {
        reqDifferent.classList.remove('valid');
        reqDifferent.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');
      }
    });

    // Check current password change
    document.getElementById('current_password').addEventListener('input', function() {
      const currentPassword = this.value;
      const newPassword = document.getElementById('new_password').value;
      const reqDifferent = document.getElementById('req-different');

      if (newPassword !== currentPassword && newPassword.length > 0) {
        reqDifferent.classList.add('valid');
        reqDifferent.classList.remove('invalid');
      } else {
        reqDifferent.classList.remove('valid');
        reqDifferent.classList.add('invalid');
      }
    });

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