@extends('layouts.app')

@section('content')
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="https://unpkg.com/aos@2.3.4/dist/aos.css" rel="stylesheet">

<style>
  html, body {
      height: 100%;
      margin: 0;
      font-family: 'Segoe UI', sans-serif;
      background: #484f63;
      overflow: hidden;
  }

  .login-wrapper {
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 1rem;
  }

  .login-container {
      max-width: 960px;
      width: 100%;
      background: #ffffff;
      border-radius: 1rem;
      overflow: hidden;
      display: flex;
      box-shadow: 0 15px 40px rgba(0, 0, 0, 0.2);
  }

  .left-panel, .right-panel {
      flex: 1;
      padding: 2.5rem;
      display: flex;
      flex-direction: column;
      justify-content: center;
  }

  .form-wrapper {
      max-width: 400px;
      width: 100%;
      margin: 0 auto;
  }

  .form-wrapper h4 {
      font-weight: 600;
      margin-bottom: 1.5rem;
  }

  .form-control {
      border-radius: 0.75rem;
      border: 1px solid #ccc;
      padding: 0.75rem;
      font-size: 0.95rem;
  }

  .btn-dark {
      border-radius: 0.75rem;
      padding: 0.75rem;
      font-weight: 600;
      font-size: 0.95rem;
  }

  .right-panel {
      background: #0f0f11;
      color: #fff;
      align-items: center;
      text-align: center;
  }

  .right-panel img {
      max-width: 75%;
      border-radius: 1.5rem;
      transition: transform 0.6s ease;
  }

  .right-panel img:hover {
      transform: scale(1.03);
  }

  .right-panel h4 {
      margin-top: 2rem;
      font-weight: 600;
  }

  .right-panel p {
      font-size: 0.9rem;
      color: #bbb;
  }

  @media (max-width: 768px) {
      .login-container {
          flex-direction: column;
          border-radius: 0.75rem;
      }

      .right-panel {
          display: none !important;
      }

      .left-panel {
          flex: 1 1 100%;
          padding: 2rem 1.5rem;
          animation: fadeInLeft 1s ease-in-out;
      }

      @keyframes fadeInLeft {
        from {
            opacity: 0;
            transform: translateX(-40px);
        }
        to {
            opacity: 1;
            transform: translateX(0);
        }
    }
  }

</style>

<div class="login-wrapper">
    <div class="login-container" data-aos="zoom-in">
        <!-- LEFT PANEL -->
        <div class="left-panel">
            <div class="form-wrapper">
                <div class="text-center mb-4">
                    <img src="{{ asset('images/ahkhanankhan3.jpg') }}" alt="Logo" style="height: 120px; border-radius: 8px;" class="">
                </div>

                <h4>Welcome Back</h4>

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

                    <div class="mb-3">
                        <label for="email" class="form-label">Email</label>
                        <input id="email" type="email"
                            class="form-control @error('email') is-invalid @enderror"
                            name="email" value="{{ old('email') }}" required autofocus placeholder="you@example.com">
                        @error('email')
                            <div class="invalid-feedback d-block">{{ $message }}</div>
                        @enderror
                    </div>

                    <div class="mb-3">
                        <label for="password" class="form-label">Password</label>
                        <input id="password" type="password"
                            class="form-control @error('password') is-invalid @enderror"
                            name="password" required placeholder="••••••••">
                        @error('password')
                            <div class="invalid-feedback d-block">{{ $message }}</div>
                        @enderror
                    </div>

                    <div class="d-grid">
                        <button type="submit" class="btn btn-dark">Sign In</button>
                    </div>

                    {{-- ✅ Forgot Password link --}}
                    {{-- <div class="mt-2 mb-3 text-center">
                        <a href="{{ route('password.request') }}"
                        class="text-decoration-none fw-semibold"
                        style="
                            color: #6c757d;
                            font-size: 0.9rem;
                            transition: color 0.25s ease, text-decoration 0.25s ease;
                        "
                        onmouseover="this.style.color='#0d6efd'; this.style.textDecoration='underline';"
                        onmouseout="this.style.color='#6c757d'; this.style.textDecoration='none';"
                        >
                            Forgot your password?
                        </a>
                    </div> --}}


                </form>
            </div>
        </div>

        <!-- RIGHT PANEL -->
        <div class="right-panel" data-aos="fade-left" data-aos-delay="100">
            <img src="{{ asset('images/login4.png') }}" alt="Illustration" style="height: 200px;">
            <h4>Architect Project Hub Login</h4>
            <p>Login to manage your architectural projects, teams, and timelines.</p>
        </div>
    </div>
</div>

<script src="https://unpkg.com/aos@2.3.4/dist/aos.js"></script>
<script>AOS.init({ duration: 800, once: true });</script>
@endsection