<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <title>Login — SPP App</title>

    <!-- Google Font: Inter -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
    <!-- Font Awesome 6 -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
    <!-- AdminLTE 3.2 -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/admin-lte@3.2/dist/css/adminlte.min.css">

    <style>
        body {
            font-family: 'Inter', sans-serif;
        }
        .login-page {
            background: linear-gradient(135deg, #0c1445 0%, #1a237e 30%, #283593 50%, #1565c0 80%, #0d47a1 100%);
            min-height: 100vh;
        }
        .login-box {
            width: 420px;
        }
        .card {
            border-radius: 16px;
            box-shadow: 0 20px 60px rgba(0,0,0,0.3);
            border: 1px solid rgba(255,255,255,0.1);
            backdrop-filter: blur(10px);
            overflow: hidden;
        }
        .card-header {
            background: linear-gradient(135deg, #1565c0, #0d47a1);
            padding: 2rem 1.5rem;
            text-align: center;
            border-bottom: none;
        }
        .card-header .login-logo {
            font-size: 1.8rem;
            font-weight: 700;
            color: #fff;
            margin-bottom: 0.3rem;
        }
        .card-header .login-subtitle {
            color: rgba(255,255,255,0.7);
            font-size: 0.85rem;
            font-weight: 400;
        }
        .card-body {
            padding: 2rem 2rem 1.5rem;
        }
        .input-group {
            margin-bottom: 1.2rem;
        }
        .input-group .form-control {
            border-radius: 10px 0 0 10px;
            border: 1px solid #e0e0e0;
            padding: 0.75rem 1rem;
            font-size: 0.95rem;
            transition: all 0.3s;
        }
        .input-group .form-control:focus {
            border-color: #1565c0;
            box-shadow: 0 0 0 3px rgba(21,101,192,0.15);
        }
        .input-group-text {
            border-radius: 0 10px 10px 0;
            border: 1px solid #e0e0e0;
            border-left: none;
            background: #f8f9fa;
            color: #666;
        }
        .btn-primary {
            background: linear-gradient(135deg, #1565c0, #0d47a1);
            border: none;
            border-radius: 10px;
            padding: 0.75rem;
            font-weight: 600;
            font-size: 1rem;
            letter-spacing: 0.3px;
            transition: all 0.3s;
        }
        .btn-primary:hover {
            background: linear-gradient(135deg, #1976d2, #1565c0);
            transform: translateY(-1px);
            box-shadow: 0 6px 20px rgba(21,101,192,0.4);
        }
        .login-icon {
            width: 70px;
            height: 70px;
            background: rgba(255,255,255,0.15);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto 1rem;
            backdrop-filter: blur(5px);
        }
        .login-icon i {
            font-size: 2rem;
            color: #fff;
        }
        .alert {
            border-radius: 10px;
            font-size: 0.9rem;
            border: none;
        }
        .alert-danger {
            background: #fef2f2;
            color: #dc2626;
        }
        .alert-success {
            background: #f0fdf4;
            color: #16a34a;
        }
        .icheck-primary label {
            font-size: 0.9rem;
            color: #666;
        }
        .footer-text {
            text-align: center;
            color: rgba(255,255,255,0.4);
            font-size: 0.8rem;
            margin-top: 1.5rem;
        }
    </style>
</head>
<body class="hold-transition login-page">
    <div class="login-box">
        <div class="card">
            <div class="card-header">
                <div class="login-icon">
                    <i class="fas fa-graduation-cap"></i>
                </div>
                <div class="login-logo">SPP App</div>
                <div class="login-subtitle">Sistem Informasi Pembayaran Sekolah</div>
            </div>
            <div class="card-body">
                @if(session('error'))
                    <div class="alert alert-danger d-flex align-items-center" role="alert">
                        <i class="fas fa-exclamation-circle me-2"></i>
                        <span>{{ session('error') }}</span>
                    </div>
                @endif

                @if(session('success'))
                    <div class="alert alert-success d-flex align-items-center" role="alert">
                        <i class="fas fa-check-circle me-2"></i>
                        <span>{{ session('success') }}</span>
                    </div>
                @endif

                <form action="{{ route('login.post') }}" method="POST">
                    @csrf
                    <div class="input-group">
                        <input type="text"
                               name="email"
                               id="email"
                               class="form-control @error('email') is-invalid @enderror"
                               placeholder="Email"
                               value="{{ old('email') }}"
                               autofocus
                               required>
                        <span class="input-group-text">
                            <i class="fas fa-user"></i>
                        </span>
                        @error('username')
                            <span class="invalid-feedback d-block">{{ $message }}</span>
                        @enderror
                    </div>

                    <div class="input-group">
                        <input type="password"
                               name="password"
                               id="password"
                               class="form-control @error('password') is-invalid @enderror"
                               placeholder="Password"
                               required>
                        <span class="input-group-text">
                            <i class="fas fa-lock"></i>
                        </span>
                        @error('password')
                            <span class="invalid-feedback d-block">{{ $message }}</span>
                        @enderror
                    </div>

                    <div class="row mb-3">
                        <div class="col-7">
                            <div class="icheck-primary">
                                <input type="checkbox" id="remember" name="remember" {{ old('remember') ? 'checked' : '' }}>
                                <label for="remember">Ingat Saya</label>
                            </div>
                        </div>
                    </div>

                    <button type="submit" id="btn-login" class="btn btn-primary btn-block">
                        <i class="fas fa-sign-in-alt mr-2"></i> Masuk
                    </button>
                </form>
            </div>
        </div>
        <div class="footer-text">
            &copy; {{ date('Y') }} SPP App — Sistem Informasi Pembayaran Sekolah
        </div>
    </div>

    <!-- jQuery -->
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.7.1/dist/jquery.min.js"></script>
    <!-- Bootstrap 4 (required by AdminLTE 3) -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js"></script>
    <!-- AdminLTE -->
    <script src="https://cdn.jsdelivr.net/npm/admin-lte@3.2/dist/js/adminlte.min.js"></script>
</body>
</html>
