@extends('layouts.app')

@section('body-class', 'login-page')

@section('title', 'Login')

@section('content')
<div class="d-flex align-items-center justify-content-center py-5" style="min-height: 80vh;">
    <div class="w-100" style="max-width: 900px;">
        <div class="card shadow-lg border-0 overflow-hidden">
            <div class="row g-0">
                <!-- Left: Gradient Panel -->
                <div class="col-lg-6 p-5 text-white d-flex align-items-center" style="background: linear-gradient(90deg, #4f46e5, #14b8a6, #06b6d4); min-height: 450px; position: relative;">
                    <!-- Decorative circles -->
                    <div style="position: absolute; top: -60px; left: -60px; width: 200px; height: 200px; background: rgba(255,255,255,0.1); border-radius: 50%; filter: blur(50px);"></div>
                    <div style="position: absolute; bottom: -80px; right: 40px; width: 280px; height: 280px; background: rgba(255,255,255,0.08); border-radius: 50%; filter: blur(40px);"></div>

                    <div style="max-width: 400px; position: relative; z-index: 10;">
                        <h1 class="display-5 fw-bold mb-2" style="text-shadow: 2px 2px 4px rgba(0,0,0,0.2);">Selamat Datang</h1>
                        <h2 class="h2 fw-semibold mb-4" style="text-shadow: 1px 1px 3px rgba(0,0,0,0.2);">SDN Bareng 3 Malang</h2>
                        <p class="lead" style="opacity: 0.95;">Untuk mendaftarkan peserta didik baru, silakan login terlebih dahulu menggunakan akun Anda.</p>
                    </div>
                </div>

                <!-- Right: Form Card -->
                <div class="col-lg-6 p-5 d-flex align-items-center justify-content-center">
                    <div class="w-100">
                        <div class="text-center mb-5">
                            <img src="{{ asset('images/logo/images.png') }}" alt="Logo" class="rounded-circle d-block mx-auto mb-3" style="width: 96px; height: 96px; object-fit: cover;">
                            <h4 class="fw-semibold">Masuk ke Akun</h4>
                        </div>

                        <form method="POST" action="{{ route('login.post') }}" class="needs-validation" novalidate>
                            @csrf
                            <div class="mb-4">
                                <label for="username" class="form-label">
                                    <i class="bi bi-person-fill me-2"></i>
                                    <span>Username</span>
                                </label>
                                <input id="username" name="username" type="text" required autocomplete="username" value="{{ old('username') }}" class="form-control @error('username') is-invalid @enderror" placeholder="Username">
                                @error('username')
                                    <div class="invalid-feedback d-block">{{ $message }}</div>
                                @enderror
                            </div>

                            <div class="mb-5">
                                <label for="password" class="form-label">
                                    <i class="bi bi-lock-fill me-2"></i>
                                    <span>Password</span>
                                </label>
                                <input id="password" name="password" type="password" required autocomplete="current-password" class="form-control @error('password') is-invalid @enderror" placeholder="Password">
                                @error('password')
                                    <div class="invalid-feedback d-block">{{ $message }}</div>
                                @enderror
                            </div>

                            <button id="login-submit" type="submit" class="btn w-100 mb-3" style="background-color: #0d9488; color: white; font-weight: 500; padding: 0.75rem;" onmouseover="this.style.backgroundColor='#0f766e'" onmouseout="this.style.backgroundColor='#0d9488'">
                                <i class="bi bi-box-arrow-in-right me-2"></i>Masuk
                            </button>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection