@extends('layouts.site', ['title' => 'Admin Login | MuxiYeto'])

@push('styles')
<style>
    .login-wrap {
        min-height: 68vh;
        display: grid;
        place-items: center;
        padding: 64px 0;
        background: var(--soft);
    }
    .login-panel {
        width: min(100%, 440px);
        border: 1px solid var(--line);
        border-radius: 8px;
        background: #fff;
        padding: 32px;
    }
    .login-panel h1 { margin: 0 0 8px; font-size: 34px; }
    .login-panel p { margin: 0 0 24px; color: var(--muted); }
    label { display: block; margin-bottom: 18px; font-weight: 800; color: #314258; }
    input {
        width: 100%;
        min-height: 48px;
        margin-top: 8px;
        padding: 0 14px;
        border: 1px solid #cdd7e5;
        border-radius: 6px;
        font: inherit;
    }
    .error {
        margin-bottom: 16px;
        padding: 12px 14px;
        color: #9a3412;
        background: #fff7ed;
        border: 1px solid #fed7aa;
        border-radius: 6px;
        font-weight: 700;
    }
</style>
@endpush

@section('content')
    <section class="login-wrap">
        <form class="login-panel" method="post" action="{{ route('admin.login.submit') }}">
            @csrf
            <h1>Admin Login</h1>
            <p>Sign in to manage the new MuxiYeto Laravel portal.</p>
            @if ($errors->any())
                <div class="error">{{ $errors->first() }}</div>
            @endif
            <label>
                Username
                <input type="text" name="username" autocomplete="username" value="{{ old('username') }}" required autofocus>
            </label>
            <label>
                Password
                <input type="password" name="password" autocomplete="current-password" required>
            </label>
            <button class="button" type="submit">Enter Admin</button>
        </form>
    </section>
@endsection