<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Login | SIM Sari Rasa</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/admin-lte@3.2/dist/css/adminlte.min.css">
    <style>
        body {
            /* Memanggil background gambar dari folder public */
            background: url('<?= base_url('uploads/back_sari.png') ?>') no-repeat center center fixed !important;
            background-size: cover !important;
            position: relative;
        }

        /* Overlay halus agar box login dan teks logo tetap kontras dan mudah dibaca */
        body::before {
            content: "";
            position: absolute;
            top: 0; left: 0; right: 0; bottom: 0;
            background: rgba(240, 253, 244, 0.4); /* Sentuhan warna mint transparan */
            z-index: -1;
        }

        .card-emerald.card-outline {
            border-top: 3px solid #10b981;
        }

        .btn-emerald {
            background-color: #10b981;
            color: white;
            border: none;
        }

        .btn-emerald:hover {
            background-color: #059669;
            color: white;
        }

        .login-logo a {
            color: #065f46;
            font-weight: bold;
            text-shadow: 1px 1px 3px rgba(255, 255, 255, 0.8);
        }

        /* Style khusus untuk logo agar proporsional */
        .login-logo img {
            max-width: 110px;
            height: auto;
            margin-bottom: 8px;
            filter: drop-shadow(0px 4px 6px rgba(0,0,0,0.15));
        }

        .cursor-pointer {
            cursor: pointer;
        }
    </style>
</head>

<body class="hold-transition login-page">
    <div class="login-box">
        <div class="login-logo text-center">
            <img src="<?= base_url('uploads/logo_sari.png') ?>" alt="Logo Kelompok Tani Sari Rasa"><br>
            <a href="#"><b>Sistem Informasi Manajemen Kelompok Tani </b> SARI RASA</a>
        </div>
        <div class="card card-emerald card-outline shadow">
            <div class="card-body login-card-body rounded">
                <p class="login-box-msg text-muted">Sistem Manajemen Pupuk Subsidi</p>

                <?php if (session()->getFlashdata('error')): ?>
                    <div class="alert alert-danger text-center text-sm py-2">
                        <i class="fas fa-exclamation-triangle"></i> <?= session()->getFlashdata('error') ?>
                    </div>
                <?php endif; ?>

                <form action="<?= base_url('auth/proses_login') ?>" method="post">
                    <div class="input-group mb-3">
                        <input type="text" name="username" class="form-control" placeholder="Username" required autofocus>
                        <div class="input-group-append">
                            <div class="input-group-text"><span class="fas fa-user"></span></div>
                        </div>
                    </div>
                    
                    <div class="input-group mb-3">
                        <input type="password" name="password" id="password_field" class="form-control" placeholder="Password" required>
                        <div class="input-group-append cursor-pointer" id="btn_toggle_password" title="Lihat Password">
                            <div class="input-group-text">
                                <span class="fas fa-eye" id="eye_icon"></span>
                            </div>
                        </div>
                    </div>
                    
                    <div class="row mt-4">
                        <div class="col-12">
                            <button type="submit" class="btn btn-emerald btn-block"><i class="fas fa-sign-in-alt mr-1"></i> Masuk Sistem</button>
                        </div>
                    </div>
                </form>
                <div class="text-center mt-3">
                    <a href="<?= base_url('auth/lupa_password') ?>" class="text-sm text-emerald">Lupa Password Anda?</a>
                </div>
            </div>
        </div>
    </div>

    <script>
        document.addEventListener("DOMContentLoaded", function() {
            const passwordField = document.getElementById('password_field');
            const btnTogglePassword = document.getElementById('btn_toggle_password');
            const eyeIcon = document.getElementById('eye_icon');

            btnTogglePassword.addEventListener('click', function() {
                // Skema pengalihan tipe input antara password dan text
                if (passwordField.type === 'password') {
                    passwordField.type = 'text';
                    // Mengubah ikon menjadi mata dicoret (eye-slash)
                    eyeIcon.classList.remove('fa-eye');
                    eyeIcon.classList.add('fa-eye-slash');
                    btnTogglePassword.setAttribute('title', 'Sembunyikan Password');
                } else {
                    passwordField.type = 'password';
                    // Mengembalikan ikon menjadi mata normal (eye)
                    eyeIcon.classList.remove('fa-eye-slash');
                    eyeIcon.classList.add('fa-eye');
                    btnTogglePassword.setAttribute('title', 'Lihat Password');
                }
            });
        });
    </script>
</body>

</html>