@extends('layouts.auth')

@section('title', 'Sign In')

@section('content')
<div class="login-layout-wrapper">
  <!-- Left Logo -->
  <div class="login-logo-container login-logo-left">
    <div class="login-logo-circle">
      <img src="{{ asset('images/PWDA_II logo.jpeg') }}" alt="PWDA II Logo" class="login-logo-img" onerror="this.style.display='none'; this.nextElementSibling.style.display='flex';">
      <div class="login-logo-placeholder" style="display: none;">
        <i class="bi bi-building"></i>
      </div>
    </div>
  </div>

  <!-- Center Login Form -->
  <div class="login-form-container">
    <div class="row justify-content-center">
      <div class="col-12 col-md-11 col-lg-10 col-xl-9">
          <!-- Modern Login Card -->
      <div class="card border-0 shadow-lg">
        <div class="card-header bg-gradient-primary text-white text-center py-4">
          <div class="d-flex align-items-center justify-content-center mb-3">
            <i class="bi bi-box-arrow-in-right fs-1 me-3"></i>
            <div>
              <h2 class="mb-0 fw-bold">Welcome Back</h2>
              <p class="mb-0 opacity-75">Sign in to your account</p>
            </div>
          </div>
        </div>
        
        <div class="card-body p-5">
          @if(session('inactive_user'))
            <div class="alert alert-warning alert-dismissible fade show" role="alert">
              <i class="bi bi-exclamation-triangle me-2"></i>
              <strong>Account Deactivated:</strong> {{ session('message') }}
              <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
            </div>
          @endif

          @if(session('success'))
            <div class="alert alert-success alert-dismissible fade show" role="alert">
              <i class="bi bi-check-circle me-2"></i>{{ session('success') }}
              <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
            </div>
          @endif

          <form method="POST" action="{{ route('login') }}" id="loginForm">
            @csrf

            <!-- Email Address -->
            <div class="mb-4">
              <label for="email" class="form-label fw-semibold">
                <i class="bi bi-envelope me-2 text-primary"></i>Email Address
              </label>
              <input id="email" type="email" class="form-control form-control-lg @error('email') is-invalid @enderror" 
                     name="email" value="{{ old('email') }}" required autocomplete="email" autofocus
                     placeholder="Enter your email address">
              @error('email')
                <div class="invalid-feedback">
                  <i class="bi bi-exclamation-triangle me-1"></i>{{ $message }}
                </div>
              @enderror
            </div>

            <!-- Password -->
            <div class="mb-4">
              <label for="password" class="form-label fw-semibold">
                <i class="bi bi-lock me-2 text-primary"></i>Password
              </label>
              <div class="input-group">
                <input id="password" type="password" class="form-control form-control-lg @error('password') is-invalid @enderror" 
                       name="password" required autocomplete="current-password" placeholder="Enter your password">
                <button class="btn btn-outline-secondary" type="button" id="togglePassword">
                  <i class="bi bi-eye" id="toggleIcon"></i>
                </button>
              </div>
              @error('password')
                <div class="invalid-feedback">
                  <i class="bi bi-exclamation-triangle me-1"></i>{{ $message }}
                </div>
              @enderror
            </div>

            <!-- Remember Me -->
            <div class="mb-4">
              <div class="form-check">
                <input class="form-check-input" type="checkbox" name="remember" id="remember" {{ old('remember') ? 'checked' : '' }}>
                <label class="form-check-label" for="remember">
                  <i class="bi bi-check-square me-1"></i>Remember Me
                </label>
              </div>
            </div>

            <!-- Submit Button -->
            <div class="d-grid mb-4">
              <button type="submit" class="btn btn-primary btn-lg rounded-pill">
                <i class="bi bi-box-arrow-in-right me-2"></i>Sign In
              </button>
            </div>

            <!-- Forgot Password Link - Hidden -->
            {{-- @if (Route::has('password.request'))
              <div class="text-center mb-4">
                <a class="text-primary fw-semibold text-decoration-none" href="{{ route('password.request') }}">
                  <i class="bi bi-key me-1"></i>Forgot Your Password?
                </a>
              </div>
            @endif --}}

            <!-- Register Link -->
            <div class="text-center">
              <p class="text-muted mb-0">
                Don't have an account? 
                <a href="{{ route('register') }}" class="text-primary fw-semibold text-decoration-none">
                  <i class="bi bi-person-plus me-1"></i>Create Account
                </a>
              </p>
            </div>
          </form>
        </div>
      </div>

      <!-- Additional Info Card -->
      <div class="card border-0 shadow-sm mt-4">
        <div class="card-body py-4">
          <div class="row g-3">
            <div class="col-md-4">
              <div class="d-flex align-items-start">
                <i class="bi bi-shield-check text-success fs-4 me-3 mt-1"></i>
                <div>
                  <h6 class="fw-semibold mb-1 text-dark">Secure</h6>
                  <p class="text-muted small mb-0">Your data is protected</p>
                </div>
              </div>
            </div>
            <div class="col-md-4">
              <div class="d-flex align-items-start">
                <i class="bi bi-clock text-info fs-4 me-3 mt-1"></i>
                <div>
                  <h6 class="fw-semibold mb-1 text-dark">Fast Access</h6>
                  <p class="text-muted small mb-0">Quick and reliable</p>
                </div>
              </div>
            </div>
            <div class="col-md-4">
              <div class="d-flex align-items-start">
                <i class="bi bi-headset text-warning fs-4 me-3 mt-1"></i>
                <div>
                  <h6 class="fw-semibold mb-1 text-dark">Support</h6>
                  <p class="text-muted small mb-0">24/7 help available</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    </div>
  </div>

  <!-- Right Logo -->
  <div class="login-logo-container login-logo-right">
    <div class="login-logo-circle">
      <img src="{{ asset('images/PWDA Logo.jpeg') }}" alt="PWDA Logo" class="login-logo-img" onerror="this.style.display='none'; this.nextElementSibling.style.display='flex';">
      <div class="login-logo-placeholder" style="display: none;">
        <i class="bi bi-shield-check"></i>
      </div>
    </div>
  </div>
</div>

<!-- Inactive User Modal -->
<div class="modal fade" id="inactiveUserModal" tabindex="-1" aria-labelledby="inactiveUserModalLabel" aria-hidden="true" data-bs-backdrop="static" data-bs-keyboard="false">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content border-0 shadow-lg">
      <div class="modal-header bg-warning text-dark border-0">
        <h5 class="modal-title fw-bold" id="inactiveUserModalLabel">
          <i class="bi bi-exclamation-triangle-fill me-2"></i>Account Deactivated
        </h5>
      </div>
      <div class="modal-body text-center py-4">
        <div class="mb-4">
          <i class="bi bi-person-x text-warning" style="font-size: 4rem;"></i>
        </div>
        <h4 class="fw-bold text-dark mb-3">Your Account Has Been Deactivated</h4>
        <p class="text-muted mb-4">
          Your user account is currently inactive. To regain access to the system, 
          please contact your system administrator.
        </p>
        <div class="alert alert-info">
          <i class="bi bi-info-circle me-2"></i>
          <strong>Contact Information:</strong><br>
          Email: admin@example.com<br>
          Phone: (555) 123-4567
        </div>
      </div>
      <div class="modal-footer border-0 justify-content-center">
        <button type="button" class="btn btn-outline-primary" onclick="window.location.href='{{ route('login') }}'">
          <i class="bi bi-arrow-left me-2"></i>Back to Login
        </button>
      </div>
    </div>
  </div>
</div>
@endsection

@push('styles')
<style>
  .bg-gradient-primary {
    background: linear-gradient(135deg, #0d6efd 0%, #6610f2 100%);
  }
  
  .form-control-lg {
    padding: 0.75rem 1rem;
    font-size: 1rem;
  }
  
  .btn-lg {
    padding: 0.75rem 2rem;
    font-size: 1rem;
  }
  
  .card {
    border-radius: 1rem;
  }

  .card-header.bg-gradient-primary {
    padding: 3rem 4rem;
  }

  .card-header.bg-gradient-primary h2 {
    font-size: 2.25rem;
  }

  .card-header.bg-gradient-primary .fs-1 {
    font-size: 3.5rem !important;
  }

  .form-control-lg {
    padding: 0.875rem 1.25rem;
    font-size: 1.05rem;
  }
  
  .form-control:focus {
    border-color: #0d6efd;
    box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.25);
  }

  /* Login Layout with Logos */
  .login-layout-wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    max-width: 1800px;
    margin: 0 auto;
    padding: 2rem 4rem;
    gap: 4rem;
  }

  .login-logo-container {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .login-logo-circle {
    width: 308px;
    height: 308px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(10px);
    border: 4px solid rgba(255, 255, 255, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
  }

  .login-logo-circle:hover {
    transform: scale(1.05);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.2);
  }

  .login-logo-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
    padding: 15px;
  }

  .login-logo-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.8);
    font-size: 5rem;
  }

  .login-form-container {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 0;
    max-width: 1100px;
  }

  .login-form-container .row {
    width: 100%;
  }

  .login-form-container .card {
    width: 100%;
    max-width: 100%;
  }

  .login-form-container .card-body {
    padding: 3.5rem 5rem;
  }

  /* Info Card Styling */
  .login-form-container .card.mt-4 {
    transition: box-shadow 0.2s ease;
  }

  .login-form-container .card.mt-4:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
  }

  @media (max-width: 1600px) {
    .login-logo-circle {
      width: 264px;
      height: 264px;
    }
    .login-logo-placeholder {
      font-size: 4.5rem;
    }
    .login-form-container {
      max-width: 1000px;
    }
  }

  @media (max-width: 1400px) {
    .login-form-container .card-body {
      padding: 3rem 4rem;
    }
    .card-header.bg-gradient-primary {
      padding: 2rem 2.5rem;
    }
    .login-logo-circle {
      width: 242px;
      height: 242px;
    }
    .login-logo-placeholder {
      font-size: 4rem;
    }
    .login-form-container {
      max-width: 950px;
    }
  }

  /* Responsive Design */
  @media (max-width: 1200px) {
    .login-form-container .card-body {
      padding: 2.5rem 3.5rem;
    }
    .card-header.bg-gradient-primary {
      padding: 1.75rem 2rem;
    }
    .login-logo-circle {
      width: 220px;
      height: 220px;
    }
    
    .login-logo-placeholder {
      font-size: 3.5rem;
    }
    .login-form-container {
      max-width: 850px;
    }
  }

  @media (max-width: 992px) {
    .login-layout-wrapper {
      flex-direction: column;
      gap: 2rem;
    }

    .login-logo-container {
      order: -1;
    }

    .login-logo-left,
    .login-logo-right {
      order: 0;
    }

    .login-logo-circle {
      width: 176px;
      height: 176px;
    }
    
    .login-logo-placeholder {
      font-size: 3rem;
    }

    .login-form-container {
      max-width: 100%;
    }

    .login-form-container .card-body {
      padding: 2rem;
    }


    .card-header.bg-gradient-primary {
      padding: 1.5rem 2rem;
    }
  }

  @media (max-width: 768px) {
    .login-logo-circle {
      width: 154px;
      height: 154px;
    }
    
    .login-logo-placeholder {
      font-size: 2.5rem;
    }

    .login-form-container .card-body {
      padding: 1.5rem;
    }


    .card-header.bg-gradient-primary {
      padding: 1.25rem 1.5rem;
    }

    .card-header.bg-gradient-primary h2 {
      font-size: 1.5rem;
    }
  }
</style>
@endpush

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function() {
  // Password toggle functionality
  const togglePassword = document.getElementById('togglePassword');
  const passwordInput = document.getElementById('password');
  const toggleIcon = document.getElementById('toggleIcon');
  
  if (togglePassword) {
    togglePassword.addEventListener('click', function() {
      const type = passwordInput.getAttribute('type') === 'password' ? 'text' : 'password';
      passwordInput.setAttribute('type', type);
      
      // Toggle icon
      if (type === 'text') {
        toggleIcon.classList.remove('bi-eye');
        toggleIcon.classList.add('bi-eye-slash');
      } else {
        toggleIcon.classList.remove('bi-eye-slash');
        toggleIcon.classList.add('bi-eye');
      }
    });
  }
  
  // Show inactive user modal if needed
  @if(session('inactive_user'))
    const inactiveModal = new bootstrap.Modal(document.getElementById('inactiveUserModal'));
    inactiveModal.show();
  @endif
});
</script>
@endpush