{{-- ============================================================
     resources/views/auth/login.blade.php
     ============================================================ --}}
@extends('layouts.auth')
@section('title', 'Masuk')

@section('content')

<style>
    @import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;600;700&family=DM+Sans:wght@300;400;500;600&display=swap');
    .edu-font-display { font-family: 'Playfair Display', serif; }
    .edu-font-body { font-family: 'DM Sans', sans-serif; }
    :root { --navy:#0f1e38; --gold:#c9a84c; --gold-light:#f5e9cc; --cream:#faf8f4; --text-muted:#6b7280; --border:#e8e4dc; }
    .auth-wrap { min-height:100vh; display:flex; align-items:center; justify-content:center; background:var(--cream); padding:2rem 1rem; }
    .auth-card { background:white; border:1px solid var(--border); border-radius:28px; padding:2.5rem; width:100%; max-width:420px; box-shadow:0 4px 32px rgba(15,30,56,.09); }
    .form-label { display:block; font-size:13px; font-weight:600; margin-bottom:.5rem; color:var(--navy); }
    .form-input { width:100%; border:1.5px solid var(--border); border-radius:14px; padding:.875rem 1rem; font-size:13px; font-family:'DM Sans',sans-serif; color:var(--navy); background:var(--cream); outline:none; transition:border-color .15s,background .15s; box-sizing:border-box; }
    .form-input:focus { border-color:var(--navy); background:white; }
    .form-input.error { border-color:#dc2626; }
    .btn-submit { width:100%; background:var(--navy); color:white; font-size:14px; font-weight:600; padding:.875rem; border-radius:16px; border:none; cursor:pointer; font-family:'DM Sans',sans-serif; transition:opacity .2s; }
    .btn-submit:hover { opacity:.87; }
    .btn-register { width:100%; background:white; color:var(--navy); font-size:14px; font-weight:500; padding:.875rem; border-radius:16px; border:1.5px solid var(--border); cursor:pointer; font-family:'DM Sans',sans-serif; transition:background .15s; }
    .btn-register:hover { background:var(--cream); }
    .logo-circle { width:64px; height:64px; border-radius:20px; background:var(--navy); display:flex; align-items:center; justify-content:center; margin:0 auto 1.25rem; }
    .error-box { background:#fee2e2; border:1px solid #fca5a5; border-radius:14px; padding:.875rem 1rem; font-size:13px; color:#dc2626; margin-bottom:1.25rem; }
    .divider { display:flex; align-items:center; gap:.75rem; margin:.75rem 0; }
    .divider::before, .divider::after { content:''; flex:1; height:1px; background:var(--border); }
    .divider span { font-size:11px; color:var(--text-muted); }
</style>

<div class="auth-wrap edu-font-body">
    <div class="auth-card">

        {{-- Logo --}}
        <div class="text-center mb-7">
            <div class="logo-circle">
                <span class="edu-font-display font-bold text-white" style="font-size:18px; letter-spacing:.05em;">LMS</span>
            </div>
            <h1 class="edu-font-display text-2xl font-bold" style="color:var(--navy);">Selamat Datang</h1>
            <p class="text-sm mt-1" style="color:var(--text-muted);">Courses Bantul</p>
        </div>

        {{-- Error --}}
        @if($errors->any())
        <div class="error-box">
            <i class="fa fa-exclamation-circle mr-1.5"></i>{{ $errors->first() }}
        </div>
        @endif

        {{-- Form --}}
        <form method="POST" action="{{ route('login.post') }}" class="space-y-4">
            @csrf

            <div>
                <label class="form-label">Email</label>
                <input type="email" name="email" value="{{ old('email') }}" required autofocus
                       class="form-input {{ $errors->has('email') ? 'error' : '' }}"
                       placeholder="email@smkmuh1bantul.sch.id">
            </div>

            <div>
                <label class="form-label">Password</label>
                <div style="position:relative;">
                    <input type="password" name="password" id="pwd-input" required
                           class="form-input {{ $errors->has('password') ? 'error' : '' }}"
                           placeholder="••••••••" style="padding-right:3rem;">
                    <button type="button" onclick="togglePwd()"
                            style="position:absolute; right:1rem; top:50%; transform:translateY(-50%); background:none; border:none; cursor:pointer; color:var(--text-muted);">
                        <i class="fa fa-eye" id="pwd-icon" style="font-size:14px;"></i>
                    </button>
                </div>
            </div>

            <div class="flex items-center justify-between text-sm">
                <label class="flex items-center gap-2 cursor-pointer" style="color:var(--text-muted);">
                    <input type="checkbox" name="remember" class="rounded" style="accent-color:var(--navy);">
                    Ingat saya
                </label>
            </div>

            <button type="submit" class="btn-submit">Masuk</button>

            <div class="divider"><span>atau</span></div>

            <button type="button" onclick="window.location='{{ route('register') }}'" class="btn-register">
                Belum punya akun? Daftar
            </button>
        </form>

        <p class="text-center text-xs mt-6" style="color:var(--text-muted);">© {{ date('Y') }} Course Bantul. All rights reserved.</p>
    </div>
</div>

<script>
function togglePwd() {
    const input = document.getElementById('pwd-input');
    const icon = document.getElementById('pwd-icon');
    if (input.type === 'password') {
        input.type = 'text';
        icon.className = 'fa fa-eye-slash';
    } else {
        input.type = 'password';
        icon.className = 'fa fa-eye';
    }
}
</script>
@endsection