@extends('layouts.app')

@section('title', 'Login - Lumbini Province Taekwondo Association')

@section('content')

 Page Hero 
<section style="background: linear-gradient(135deg, var(--blue) 0%, #0d1f45 100%); padding: 120px 0 60px; text-align: center; color: var(--white); position: relative; overflow: hidden;">
    <div style="position: absolute; inset: 0; opacity: 0.05; background-image: repeating-linear-gradient(45deg, #fff 0, #fff 1px, transparent 0, transparent 50%); background-size: 20px 20px;"></div>
    <div class="container" style="position: relative; z-index: 2;">
        <span class="section-label" style="color: var(--gold-light); font-size: 0.8rem; font-weight: 700; letter-spacing: 2px;">SECURE ACCESS</span>
        <h1 style="font-family: 'Oswald', sans-serif; font-size: clamp(2rem, 4vw, 3rem); font-weight: 700; margin-top: 10px;">Portal <span style="color: var(--gold-light);">Login</span></h1>
        <div class="divider" style="margin: 15px auto 0;"></div>
    </div>
</section>

 Login form 
<section class="section-pad" style="background: var(--white);">
    <div class="container" style="max-width: 480px;">
        <div style="background: var(--off-white); border-radius: var(--radius); border: 1px solid var(--gray-200); padding: 40px; box-shadow: var(--shadow-sm);">
            
            @if($errors->any())
            <div style="background: var(--red); color: white; padding: 14px 20px; border-radius: 8px; font-size: 0.82rem; margin-bottom: 24px;">
                <ul style="list-style: none;">
                    @foreach($errors->all() as $error)
                        <li><i class="fas fa-exclamation-circle"></i> {{ $error }}</li>
                    @endforeach
                </ul>
            </div>
            @endif

            <form action="{{ route('login') }}" method="POST" style="display: flex; flex-direction: column; gap: 20px;">
                @csrf
                <div>
                    <label style="display: block; font-size: 0.82rem; font-weight: 600; color: var(--gray-700); margin-bottom: 6px;">Email or Username</label>
                    <input type="text" name="login" value="{{ old('login') }}" required style="width: 100%; padding: 12px; border-radius: 8px; border: 1px solid var(--gray-200); outline: none; transition: var(--transition); font-family: inherit; font-size: 0.9rem;" onfocus="this.style.borderColor='var(--blue)'">
                </div>
                
                <div>
                    <label style="display: block; font-size: 0.82rem; font-weight: 600; color: var(--gray-700); margin-bottom: 6px;">Password</label>
                    <input type="password" name="password" required style="width: 100%; padding: 12px; border-radius: 8px; border: 1px solid var(--gray-200); outline: none; transition: var(--transition); font-family: inherit; font-size: 0.9rem;" onfocus="this.style.borderColor='var(--blue)'">
                </div>
                
                <div style="display: flex; align-items: center; justify-content: space-between; font-size: 0.82rem;">
                    <label style="display: flex; align-items: center; gap: 6px; cursor: pointer; color: var(--gray-700);">
                        <input type="checkbox" name="remember" style="accent-color: var(--blue);"> Remember Me
                    </label>
                    <a href="#" style="color: var(--blue); text-decoration: none; font-weight: 600;">Forgot Password?</a>
                </div>
                
                <button type="submit" class="btn btn-blue" style="justify-content: center; padding: 13px; font-size: 0.9rem; margin-top: 10px;">
                    <i class="fas fa-sign-in-alt"></i> Login
                </button>
            </form>

            <div style="margin-top: 30px; text-align: center; font-size: 0.85rem; color: var(--gray-500); border-top: 1px solid var(--gray-200); padding-top: 20px;">
                Don't have an account yet? <a href="{{ route('register') }}" style="color: var(--red); font-weight: 700; text-decoration: none;">Join as Member</a>
            </div>
        </div>
    </div>
</section>

@endsection