@extends('layouts.app')
@section('title', 'Masuk')

@section('content')
<div class="max-w-md mx-auto px-4 py-16">
    <div class="bg-white rounded-3xl border border-slate-100 p-8 shadow-soft">
        <h1 class="text-2xl font-extrabold text-center">Masuk ke Akun</h1>
        <p class="text-slate-500 text-sm text-center mt-1">Selamat datang kembali di {{ $brandName }}.</p>

        @if (session('success'))
            <div class="mt-4 rounded-xl border border-emerald-200 bg-emerald-50 text-emerald-800 text-sm px-4 py-3">{{ session('success') }}</div>
        @endif

        <form method="POST" action="{{ route('login.submit') }}" class="mt-6 space-y-4">
            @csrf
            <div>
                <label class="text-sm font-medium text-slate-600">Email</label>
                <input name="email" type="email" value="{{ old('email') }}" required autofocus class="mt-1 w-full rounded-lg border border-slate-200 px-3 py-2.5 text-sm">
            </div>
            <div>
                <label class="text-sm font-medium text-slate-600">Password</label>
                <input name="password" type="password" required class="mt-1 w-full rounded-lg border border-slate-200 px-3 py-2.5 text-sm">
            </div>
            <label class="flex items-center gap-2 text-sm text-slate-600"><input type="checkbox" name="remember" class="accent-brand-600"> Ingat saya</label>
            <button class="w-full bg-brand-600 hover:bg-brand-700 text-white font-bold py-3 rounded-xl">Masuk</button>
        </form>
        <p class="text-center text-sm text-slate-500 mt-5">Belum punya akun? <a href="{{ route('register') }}" class="text-brand-600 font-semibold hover:underline">Daftar gratis</a></p>
        @unless (session('success'))
            <div class="mt-4 text-xs text-center text-slate-400 bg-slate-50 rounded-lg py-2">Demo admin: <b>admin@ciptaloka.test</b> / <b>password</b></div>
        @endunless
    </div>
</div>
@endsection