@extends('layouts.app')

@section('title', 'Login')

@section('content')
<div class="relative">
    <div class="pointer-events-none absolute inset-0 -z-10">
        <div class="absolute left-1/2 top-[-120px] h-[320px] w-[320px] -translate-x-1/2 rounded-full bg-brand-200/50 blur-3xl"></div>
        <div class="absolute left-[10%] top-[120px] h-[240px] w-[240px] rounded-full bg-ink-200/40 blur-3xl"></div>
        <div class="absolute right-[8%] top-[180px] h-[240px] w-[240px] rounded-full bg-brand-300/30 blur-3xl"></div>
    </div>

    <div class="mx-auto mt-10 max-w-md">
        <x-card class="p-0 overflow-hidden" pad="p-0">
            <div class="bg-gradient-to-br from-ink-900 to-ink-700 px-6 py-6 text-white">
                <div class="flex items-center gap-3">
                    <div class="grid h-11 w-11 place-items-center rounded-xl bg-white/10 ring-1 ring-white/15">
                        <span class="text-sm font-black tracking-tight">HS</span>
                    </div>
                    <div>
                        <div class="text-lg font-bold leading-tight">Sistem Absensi Sekolah</div>
                        <div class="text-sm text-white/70">Login Admin, Guru, atau Siswa</div>
                    </div>
                </div>
            </div>

            <div class="px-6 py-6">
                <form method="POST" action="{{ route('login') }}" class="space-y-4">
                    @csrf

                    <x-input name="login" label="ID Login" placeholder="Admin: username · Guru: NIG · Siswa: NIS" required />

                    <x-input name="password" label="Password" type="password" placeholder="Masukkan password" required />

                    <div class="flex items-center justify-between">
                        <label class="inline-flex items-center gap-2 text-sm text-slate-700">
                            <input type="checkbox" name="remember" class="h-4 w-4 rounded border-slate-300 text-ink-700 focus:ring-4 focus:ring-brand-200">
                            Ingat saya
                        </label>
                        <div class="text-xs text-slate-500">Absensi SMP &amp; SMA</div>
                    </div>

                    <div class="pt-1">
                        <x-button type="submit" variant="primary" class="w-full">Masuk</x-button>
                    </div>
                </form>
            </div>
        </x-card>
    </div>
</div>
@endsection