<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Login - Pustaka Nawasena</title>
    <link rel="icon" href="{{ asset('images/kartu.png') }}" type="image/png">

    <!-- Bootstrap 5 & Icons -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">

    <style>
        /* Mengunci scrollbar sistem */
        html, body {
            height: 100vh;
            margin: 0;
            padding: 0;
            overflow: hidden; 
        }

        body {
            font-family: 'Inter', sans-serif;
            display: flex;
            justify-content: center;
            align-items: center;
            background: url('{{ asset("images/utama.jpg") }}') no-repeat center center / cover;
            position: relative;
        }

        /* Overlay Background */
        body::before {
            content: '';
            position: absolute;
            inset: 0;
            background: rgba(0, 0, 0, 0.45);
            backdrop-filter: blur(5px);
            z-index: 0;
        }

        .auth-card {
            position: relative;
            z-index: 1;
            background: #fff;
            border-radius: 16px;
            padding: 25px 30px; /* Diperkecil agar lebih compact */
            width: 90%;
            max-width: 380px; /* Lebar diperkecil agar proporsional */
            box-shadow: 0 15px 35px rgba(0,0,0,0.3);
            opacity: 0;
            transform: translateY(20px);
            animation: fadeInCard 0.6s ease-out forwards;
        }

        @keyframes fadeInCard {
            to { opacity: 1; transform: translateY(0); }
        }

        .logo-wrapper {
            display: flex;
            justify-content: center;
            margin-bottom: 12px;
        }
        .logo-wrapper img {
            width: 65px; /* Diperkecil dari 80px */
            height: 65px;
            object-fit: contain;
            border-radius: 50%;
            background: #fff;
            padding: 5px;
            box-shadow: 0 4px 10px rgba(249, 115, 22, 0.2);
        }

        .header-bar {
            text-align: center;
            margin-bottom: 15px;
        }
        .header-bar h5 {
            color: #1e3a8a;
            font-weight: 800;
            font-size: 1.2rem;
            margin-bottom: 0;
        }
        .header-bar small {
            color: #6b7280;
            font-size: 0.8rem;
        }

        /* Mengecilkan jarak form */
        .mb-3 { margin-bottom: 0.8rem !important; }
        .mb-2 { margin-bottom: 0.5rem !important; }
        .mb-4 { margin-bottom: 1rem !important; }

        .form-label {
            font-size: 0.85rem;
            margin-bottom: 4px;
        }

        input.form-control {
            border-radius: 10px;
            padding: 10px 12px;
            font-size: 0.9rem;
            border: 1.5px solid #eee;
        }

        .password-container {
            position: relative;
        }
        .password-container i {
            position: absolute;
            right: 12px;
            top: 50%;
            transform: translateY(-50%);
            cursor: pointer;
            font-size: 0.9rem;
            color: #888;
            z-index: 10;
        }

        button.btn-primary {
            background: #f97316;
            border: none;
            border-radius: 10px;
            padding: 10px;
            font-weight: 700;
            font-size: 0.95rem;
        }

        .divider {
            text-align: center;
            margin: 15px 0;
            position: relative;
            color: #ccc;
            font-size: 0.75rem;
            font-weight: 700;
        }
        .divider::before, .divider::after {
            content: "";
            position: absolute;
            top: 50%;
            width: 30%;
            height: 1px;
            background: #eee;
        }
        .divider::before { left: 0; }
        .divider::after { right: 0; }

        .btn-google {
            border-radius: 10px;
            padding: 8px;
            font-size: 0.85rem;
            border: 1.5px solid #eee;
            font-weight: 600;
        }

        .forgot-password {
            text-align: right;
            font-size: 0.75rem;
        }
        .forgot-password a {
            color: #1e3a8a;
            text-decoration: none;
            font-weight: 700;
        }

        .text-small-footer {
            font-size: 0.8rem;
            margin-top: 15px;
        }

        /* Penyesuaian khusus untuk layar sangat pendek */
        @media (max-height: 650px) {
            .auth-card { padding: 15px 25px; }
            .logo-wrapper img { width: 50px; height: 50px; }
            .header-bar { margin-bottom: 10px; }
            .divider { margin: 10px 0; }
        }
    </style>
</head>
<body>

<div class="auth-card">
    <div class="logo-wrapper">
        <img src="{{ asset('images/kartu.png') }}" alt="Logo Pustaka Nawasena">
    </div>

    <div class="header-bar">
        <h5>Pustaka Nawasena</h5>
        <small>Silakan masuk ke akun Anda</small>
    </div>

    @if(session('success'))
        <div class="alert alert-success text-center py-1 small mb-2">{{ session('success') }}</div>
    @endif
    @if($errors->any())
        <div class="alert alert-danger text-center py-1 small mb-2">{{ $errors->first() }}</div>
    @endif

    <form method="POST" action="{{ route('login.submit') }}">
        @csrf
        <div class="mb-3">
            <label class="form-label fw-semibold">Email</label>
            <input type="email" name="email" class="form-control" placeholder="nama@email.com" required autofocus>
        </div>

        <div class="mb-2">
    <label class="form-label fw-semibold">Kata Sandi</label>
    <div class="password-container">
        <input type="password" id="password" name="password" class="form-control" placeholder="••••••••" required>
        <i class="bi bi-eye-slash" id="togglePassword"></i>
    </div>
    <!-- Keterangan tambahan di bawah input sandi -->
    <small class="form-text text-muted d-block mt-1" style="font-size: 0.75rem; line-height: 1.2;">
        *Minimal 8 karakter, kombinasi huruf kapital, dan tanda baca (.,)
    </small>
</div>

        <div class="forgot-password mb-3">
            <a href="{{ route('forgotPassword') }}">Lupa Kata Sandi?</a>
        </div>

        <button type="submit" class="btn btn-primary w-100">Masuk</button>
    </form>

    <div class="divider">ATAU</div>

    <div class="d-grid mb-2">
        <a href="{{ route('login.google') }}" class="btn btn-google btn-outline-light d-flex align-items-center justify-content-center text-dark">
            <img src="https://developers.google.com/identity/images/g-logo.png" alt="Google" style="width:16px; height:16px; margin-right:8px;">
            Sign In With Google
        </a>
    </div>

    <p class="text-center text-small-footer mb-0 text-muted">
        Belum punya akun? 
        <a href="{{ route('register') }}" class="fw-bold text-decoration-none" style="color:#f97316;">Daftar</a>
    </p>
</div>

<script>
    const togglePassword = document.querySelector('#togglePassword');
    const passwordField = document.querySelector('#password');

    togglePassword.addEventListener('click', function () {
        const type = passwordField.getAttribute('type') === 'password' ? 'text' : 'password';
        passwordField.setAttribute('type', type);
        this.classList.toggle('bi-eye');
        this.classList.toggle('bi-eye-slash');
    });
</script>

</body>
</html>

