@extends('layouts.wali')

@section('title', 'Masuk — ZAXARA Wali')

@section('content')
<div style="min-height:100vh;display:flex;align-items:center;justify-content:center;margin:-24px;padding:24px;
    background:linear-gradient(160deg, var(--navy) 0%, var(--blue) 60%, var(--cyan) 130%);">
    <div style="width:100%;max-width:380px;display:flex;flex-direction:column;align-items:center;gap:20px;">
        <img src="{{ asset('img/logo-icon.png') }}" alt="ZAXARA" style="width:64px;height:64px;border-radius:18px;box-shadow:0 12px 28px -8px rgba(0,0,0,.45);">
        <div style="text-align:center;">
            <div style="font-size:24px;font-weight:900;color:#fff;letter-spacing:1px;">ZAXARA</div>
            <div style="font-size:12px;font-weight:700;color:rgba(255,255,255,.8);letter-spacing:1px;margin-top:2px;">UNTUK ORANG TUA</div>
        </div>

        <div class="card" style="width:100%;display:flex;flex-direction:column;gap:16px;">
            <h1 style="font-size:19px;margin:0;font-weight:800;">Masuk sebagai Wali</h1>

            @if ($errors->any())
                <div class="error">{{ $errors->first() }}</div>
            @endif

            <form method="POST" action="{{ route('wali.login') }}" style="display:flex;flex-direction:column;gap:14px;">
                @csrf
                <div>
                    <div class="label">Email</div>
                    <input class="input" type="email" name="email" value="{{ old('email') }}" required autofocus>
                </div>
                <div>
                    <div class="label">Password</div>
                    <input class="input" type="password" name="password" required>
                </div>
                <button class="btn btn-primary" type="submit" style="width:100%;padding:12px;">Masuk</button>
            </form>

            <div style="font-size:12px;color:var(--ink-faint);text-align:center;">
                Akun wali dibuat oleh guru/admin lembaga Anda. Pantau progres belajar anak Anda di sini.
            </div>
        </div>
    </div>
</div>
@endsection