@extends('layout')

@section('page_title', 'Admin Login')

@section('content')
  <div style="display: flex; justify-content: center; align-items: center; min-height: 80vh; padding: 24px;">
    <div class="card" style="width: 100%; max-width: 520px; padding: 40px; border-top: 6px solid var(--accent);">
      <div style="text-align: center; margin-bottom: 30px;">
        @php($setting = optional(App\Models\Setting::first()))
        <div style="margin-bottom: 16px;">
          @if($setting->logo_path)
            <img src="{{ asset('storage/'.$setting->logo_path) }}" alt="Logo" style="max-height: 56px; object-fit: contain;" />
          @else
            <svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="var(--accent)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="padding: 12px; background: #eff6ff; border-radius: 12px;"><path d="M12 2L2 7l10 5 10-5-10-5z"></path><path d="M2 17l10 5 10-5"></path><path d="M2 12l10 5 10-5"></path></svg>
          @endif
        </div>
        <h2 style="margin: 0 0 8px 0;">{{ $setting->company_name ?? 'InstalmentPro' }}</h2>
        <p class="text-muted" style="margin: 0;">Secure Admin Sign In</p>
      </div>
      
      <form method="post" action="{{ route('login.attempt') }}" autocomplete="on">
        @csrf
        <div style="margin-bottom: 16px;">
          <label for="email">Email Address</label>
          <input type="email" id="email" name="email" value="{{ old('email') }}" required placeholder="you@example.com" autocomplete="username">
          @error('email')
            <div style="color: var(--danger); font-size: 0.875rem; margin-top: 6px;">{{ $message }}</div>
          @enderror
        </div>
        
        <div style="margin-bottom: 16px;">
          <label for="password">Password</label>
          <input type="password" id="password" name="password" required placeholder="••••••••" autocomplete="current-password">
          @error('password')
            <div style="color: var(--danger); font-size: 0.875rem; margin-top: 6px;">{{ $message }}</div>
          @enderror
        </div>
        
        <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px;">
          <label style="display: flex; align-items: center; gap:8px; cursor: pointer;">
            <input type="checkbox" name="remember" style="accent-color: var(--accent);">
            <span>Remember me</span>
          </label>
          <a href="#" style="color: var(--accent); text-decoration: none; font-size: 0.875rem;">Forgot password?</a>
        </div>
        
        <button class="btn btn-primary" type="submit" style="width: 100%; padding: 12px; font-size: 1rem;">
          Sign In
        </button>
      </form>
      
      <div style="text-align: center; margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--border);">
        <p class="text-muted" style="font-size: 0.875rem;">
          © {{ date('Y') }} {{ $setting->company_name ?? 'InstalmentPro' }}. All rights reserved.
        </p>
      </div>
    </div>
  </div>
@endsection