<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <title>Login - IPDC</title>
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
    <style>
        * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Poppins', sans-serif; }
        
        body { 
            height: 100vh; display: flex; align-items: center; justify-content: center; 
            background: url('<?= base_url('template/img/IPDC.jpeg'); ?>') no-repeat center center/cover;
        }

        .login-box {
            width: 400px; padding: 40px; 
            /* Menggunakan gradasi biru cerah mengkilap (glossy blue) sesuai referensi gambar */
            background: linear-gradient(to bottom, #6fa8dc, #1570ef);
            backdrop-filter: blur(15px); border: 2px solid rgba(255, 255, 255, 0.6);
            border-radius: 20px; text-align: center; color: white;
            box-shadow: 0 15px 35px rgba(0, 0, 0, 0.4), inset 0 2px 6px rgba(255, 255, 255, 0.6);
        }

        .login-box h2 { font-size: 2rem; margin-bottom: 30px; font-weight: 600; text-transform: uppercase; text-shadow: 0 2px 4px rgba(0,0,0,0.3); }

        .input-group { text-align: left; margin-bottom: 20px; position: relative; }
        .input-group label { display: block; font-size: 14px; margin-bottom: 8px; text-shadow: 0 1px 2px rgba(0,0,0,0.2); }
        
        /* Input styling */
        .input-group input {
            width: 100%; padding: 12px; border-radius: 8px; border: none;
            background: rgba(255, 255, 255, 0.9);
            color: #333; font-size: 16px; outline: none;
        }

        /* Styling Ikon Mata dengan Background Biru Senada */
        .toggle-password {
            position: absolute; right: 10px; top: 37px; cursor: pointer;
            color: #ffffff; font-size: 16px; z-index: 10;
            background: linear-gradient(135deg, #2b80ff, #0d52bc);
            padding: 9px 11px;
            border-radius: 6px;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
            transition: all 0.3s ease;
        }

        .toggle-password:hover {
            background: linear-gradient(135deg, #0d52bc, #083c90);
            transform: scale(1.05);
        }
        
        .form-footer { display: flex; justify-content: space-between; font-size: 12px; margin-bottom: 20px; color: white; text-shadow: 0 1px 2px rgba(0,0,0,0.2); }
        .form-footer a { color: white; text-decoration: none; }

        .btn-login {
            width: 100%; padding: 12px; border-radius: 25px; border: 2px solid white;
            background: rgba(255, 255, 255, 0.2); color: white; cursor: pointer; font-weight: 600; margin-bottom: 20px;
            transition: background 0.3s ease;
            box-shadow: 0 4px 10px rgba(0,0,0,0.2);
        }
        .btn-login:hover { background: rgba(255, 255, 255, 0.4); }

        .register-link { font-size: 12px; color: white; text-shadow: 0 1px 2px rgba(0,0,0,0.2); }
        .register-link a { color: white; font-weight: 600; text-decoration: none; }
    </style>
</head>
<body>

<div class="login-box">
    <h2>Login</h2>
    <form action="<?= base_url('login/proses'); ?>" method="post">
        <div class="input-group">
            <label>Username</label>
            <input type="text" name="username" required>
        </div>
        
        <div class="input-group">
            <label>Password</label>
            <input type="password" name="password" id="passwordField" required>
            <i class="fas fa-eye toggle-password" id="togglePassword"></i>
        </div>
        
        <div class="form-footer">
            <label><input type="checkbox"> Remember Me</label>
            <a href="#">Forget Password</a>
        </div>
        
        <button type="submit" class="btn-login">Login</button>
        
        <p class="register-link">Don't have an account? <a href="#">Register</a></p>
    </form>
</div>

<script>
    const passwordField = document.getElementById('passwordField');
    const togglePassword = document.getElementById('togglePassword');

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

</body>
</html>