@extends('layouts.auth')

@section('content')
<div class="auth-page">
  <div class="wave-decoration"></div>
  <div class="auth-card">
    <h1 class="auth-title">Sign in</h1>
    <div class="auth-title-underline"></div>
    
    @if(session('error'))
      <div class="alert alert-danger">{{ session('error') }}</div>
    @endif

    <form method="POST" action="{{ route('login') }}">
      @csrf
      <div class="form-group">
        <label class="form-label">User ID</label>
        <div class="input-icon-wrapper">
          <i class="bi bi-person-badge input-icon"></i>
          <input type="text" name="user_id" class="form-control" placeholder="Enter your ID" required>
        </div>
      </div>
      
      <div class="form-group">
        <label class="form-label">Password</label>
        <div class="input-icon-wrapper">
          <i class="bi bi-lock input-icon"></i>
          <input type="password" name="password" class="form-control" id="password" placeholder="enter your password" required>
          <span class="password-toggle" onclick="togglePassword('password', this)"><i class="bi bi-eye"></i></span>
        </div>
      </div>
      
      <div class="form-options">
        <label class="remember-me">
          <input type="checkbox" name="remember"><span>Remember Me</span>
        </label>
      </div>
      
      <button type="submit" class="btn-primary-custom">Login</button>
    </form>
    
    <div class="auth-footer">
      Don't have an Account? <a href="{{ route('signup') }}">Sign up</a>
    </div>
  </div>
</div>
@endsection