@extends('layouts.app')
@section('title','Login — Rukay\'s')
@section('content')
<style>
.auth-wrap { min-height:80vh; display:flex; align-items:center; justify-content:center; padding:3rem 1rem; }
.auth-card { background:#fff; border-radius:1rem; border:1px solid #E8D5C4; padding:2.5rem; width:100%; max-width:420px; }
.auth-card h1 { font-size:1.9rem; color:#8B3252; text-align:center; margin-bottom:.5rem; }
.auth-card p { text-align:center; color:#7A6058; font-size:.9rem; margin-bottom:2rem; }
.auth-divider { text-align:center; color:#7A6058; font-size:.85rem; margin:1.25rem 0; }
</style>
<div class="auth-wrap">
    <div class="auth-card">
        <h1>Welcome Back</h1>
        <p>Enter your credentials to access your account</p>
        @if($errors->any())<div class="alert alert-error">{{ $errors->first() }}</div>@endif
        @if(session('error'))<div class="alert alert-error">{{ session('error') }}</div>@endif
        <form method="POST" action="{{ route('login') }}">
            @csrf
            <div class="form-group"><label>Email Address</label><input type="email" name="email" required value="{{ old('email') }}" placeholder="you@example.com" autocomplete="email"></div>
            <div class="form-group"><label>Password</label><input type="password" name="password" required placeholder="••••••••" autocomplete="current-password"></div>
            <div style="display:flex;align-items:center;gap:.5rem;margin-bottom:1.25rem;">
                <input type="checkbox" name="remember" id="remember" style="width:auto;">
                <label for="remember" style="font-size:.875rem;color:#7A6058;margin-bottom:0;">Remember me</label>
            </div>
            <button type="submit" class="btn btn-primary" style="width:100%;padding:.75rem;">Sign In</button>
        </form>
        <div class="auth-divider">Don't have an account? <a href="{{ route('register') }}" style="color:#8B3252;font-weight:500;">Register here</a></div>
        <div style="text-align:center;margin-top:1rem;padding-top:1rem;border-top:1px solid #E8D5C4;">
            <div style="font-size:.78rem;color:#7A6058;margin-bottom:.5rem;font-weight:600;">Demo Credentials</div>
            <div style="font-size:.78rem;color:#7A6058;">Admin: admin@rukayshairdo.com / admin123</div>
            <div style="font-size:.78rem;color:#7A6058;">Client: amina@example.com / client123</div>
        </div>
    </div>
</div>
@endsection