<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Login - Sistem Evaluasi RENJA</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <style>
        body, html {
            height: 100%;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background-color: #f8f9fa;
        }
        
        .login-container {
            min-height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 20px;
        }

        .login-card {
            background: white;
            border-radius: 20px;
            box-shadow: 0 10px 30px rgba(0,0,0,0.1);
            overflow: hidden;
            width: 100%;
            max-width: 1000px;
            display: flex;
            flex-wrap: wrap;
            min-height: 600px;
        }

        .login-image {
            flex: 1;
            position: relative;
            min-height: 300px;
            display: flex;
            flex-direction: column;
            justify-content: flex-end;
            padding: 40px;
            color: white;
        }

        .login-image .bg-img {
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
            z-index: 0;
        }
        
        .login-image::before {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0.6) 100%);
            z-index: 1;
        }

        .image-content {
            position: relative;
            z-index: 2;
        }

        .login-form-section {
            flex: 1;
            padding: 50px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            min-width: 320px;
        }

        .logo-container {
            text-align: center;
            margin-bottom: 30px;
        }

        .logo-img {
            max-width: 80px;
            margin-bottom: 15px;
        }

        .login-title {
            font-weight: 700;
            color: #1a237e; /* Dark blue */
            margin-bottom: 10px;
            text-align: center;
        }

        .login-subtitle {
            color: #6c757d;
            font-size: 0.9rem;
            text-align: center;
            margin-bottom: 40px;
        }

        .form-control {
            padding: 12px 15px;
            border-radius: 8px;
            background-color: #f0f4f8;
            border: 1px solid #e1e5eb;
        }

        .form-control:focus {
            background-color: white;
            border-color: #1a237e;
            box-shadow: 0 0 0 0.2rem rgba(26, 35, 126, 0.15);
        }

        .btn-primary {
            background-color: #1a237e;
            border-color: #1a237e;
            padding: 12px;
            border-radius: 8px;
            font-weight: 600;
            letter-spacing: 0.5px;
            margin-top: 20px;
            width: 100%; /* Full width button */
            text-transform: uppercase;
        }

        .btn-primary:hover {
            background-color: #0d1245;
            border-color: #0d1245;
        }

        .password-group {
            position: relative;
        }

        .toggle-password {
            position: absolute;
            right: 15px;
            top: 50%;
            transform: translateY(-50%);
            cursor: pointer;
            color: #6c757d;
            font-size: 0.9rem;
            background: none;
            border: none;
        }
        
        .footer-text {
            margin-top: auto;
            text-align: center;
            font-size: 0.8rem;
            color: #adb5bd;
            padding-top: 20px;
        }

        @media (max-width: 768px) {
            .login-card {
                flex-direction: column;
            }
            .login-image {
                min-height: 200px;
                flex: none;
            }
            .login-form-section {
                padding: 30px;
            }
        }
    </style>
</head>
<body>

<div class="login-container">
    <div class="login-card">
        <!-- Left Side: Image -->
        <div class="login-image">
            <img class="bg-img" src="<?= base_url("img/PEMDA.jpeg") ?>" alt="Background" loading="lazy">
            <div class="image-content">
                <h5 class="mb-1 text-uppercase ls-1" style="opacity: 0.9; font-size: 0.9rem; font-weight: 600;">Selamat Datang</h5>
                <h2 class="mb-1 fw-bold">Sistem Informasi Evaluasi</h2>
                <h3 class="fw-bold">RENJA Triwulan</h3>
                <p class="mb-0" style="opacity: 0.8;">Pemerintah Daerah</p>
            </div>
        </div>

        <!-- Right Side: Form -->
        <div class="login-form-section">
            <div class="logo-container">
                <img src="<?= base_url('img/LOGO PEMDA.jpg.jpeg') ?>" alt="Logo Pemda" class="logo-img" loading="lazy">
                <h3 class="login-title">Masuk ke Sistem</h3>
                <p class="login-subtitle">Gunakan akun yang diberikan oleh admin Bappeda</p>
            </div>

            <form action="<?= base_url('login/auth') ?>" method="post">
                <?php if(session()->getFlashdata('msg')):?>
                    <div class="alert alert-danger"><?= session()->getFlashdata('msg') ?></div>
                <?php endif;?>
                <div class="mb-3">
                    <label for="username" class="form-label fw-bold small">Email/Username</label>
                    <input type="text" class="form-control" id="username" name="username" placeholder="Masukkan username" required>
                </div>

                <div class="mb-3">
                    <label for="password" class="form-label fw-bold small">Password</label>
                    <div class="password-group">
                        <input type="password" class="form-control" id="password" name="password" placeholder="••••••••" required>
                        <button type="button" class="toggle-password" onclick="togglePassword()">
                            Lihat
                        </button>
                    </div>
                </div>

                <div class="d-grid">
                    <button type="submit" class="btn btn-primary">MASUK</button>
                </div>
            </form>

            <div class="footer-text">
                Sistem Informasi Evaluasi RENJA Triwulan &copy; 2026
            </div>
        </div>
    </div>
</div>

<script>
    function togglePassword() {
        const passwordInput = document.getElementById('password');
        const toggleBtn = document.querySelector('.toggle-password');
        
        if (passwordInput.type === 'password') {
            passwordInput.type = 'text';
            toggleBtn.textContent = 'Sembunyi';
        } else {
            passwordInput.type = 'password';
            toggleBtn.textContent = 'Lihat';
        }
    }
</script>

</body>
</html>
