<style>
    .teks {
        font-style: italic;
        font-size: 30px;
        color: black;
        font-weight: bold;
    }

    .teks.visible {
        opacity: 1;
    }

    .overlay {
        position: absolute;
        justify-content: center;
        align-items: center;
        background-color: white;
        justify-items: center;
        z-index: 3;
        color: transparent;
        height: 100%;
        width: 100%;
        opacity: 20%;
    }

    @keyframes fadeIn {
        from {
            opacity: 0;
            transform: translateY(40px);
        }

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

    @keyframes fadeOut {
        from {
            opacity: 1;
            transform: translateY(0);
        }

        to {
            opacity: 0;
            transform: translateY(40px);
        }
    }

    .fadeIn {
        animation: fadeIn 3s forwards;
    }

    .fadeOut {
        animation: fadeOut 1s forwards;
    }
</style>
</head>

<body>
    <center>
        <div class="overlay" id="overlay">
            <img class="gambar" id="gambar"
                src="https://media3.giphy.com/media/v1.Y2lkPTc5MGI3NjExbzNudXk2Z2s4eW51MTRrdmhvdHp6YWZhMDdoYXlmb2g0ZHJ5cDcyMSZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9cw/Lew6ElbGiIVuIaiwNa/giphy.webp"
                alt="">
            <p class="teks" id="teks">Bayar Gaji Pegawai Lebih Mudah Menggunakan Aplikasi Dana</p>
        </div>
    </center>

    <script>
        document.addEventListener('DOMContentLoaded', () => {
            const overlayElement = document.getElementById('overlay');
            overlayElement.classList.add('fadeIn');

            setTimeout(() => {
                overlayElement.classList.remove('fadeIn');
                overlayElement.classList.add('fadeOut');
            }, 6000);

            overlayElement.addEventListener('animationend', () => {
                if (overlayElement.classList.contains('fadeOut')) {
                    overlayElement.style.display = 'none';
                }
            });
        });
    </script>
</body>

<p class='sidebar-title text-danger produk-title'> Login Users</p>

<div class='alert alert-info'>Masukkan username dan password pada form berikut untuk login,...</div>
<br>
<?php
echo $this->session->flashdata('message');
$this->session->unset_userdata('message');
?>

<?php if ($this->session->flashdata('error21')): ?>
    <center>
        <div class="alert alert-danger">
            <?php echo $this->session->flashdata('error21'); ?>
        </div>
    </center>
<?php endif; ?>



<div class="logincontainer">
    <form method="post" action="<?php echo base_url(); ?>auth/login" role="form" id='formku'>
        <div class="form-group">
            <label for="inputEmail">Username</label>
            <input type="text" name="a" class="required form-control" placeholder="Masukkan Username" autofocus=""
                minlength='5' onkeyup="nospaces(this)" required>
        </div>

        <div class="form-group">
            <label for="inputPassword">Password</label>
            <input type="password" name="b" class="form-control required" placeholder="Masukkan Password"
                autocomplete="off" required>
        </div>

        <div align="center">
            <input name='login' type="submit" class="btn btn-primary" value="Login"> <a href="#" class="btn btn-default"
                data-toggle='modal' data-target='#lupass'>Lupa Password?</a> <br><br> Anda Belum Punya akun? <a
                href="<?php echo base_url(); ?>auth/register" title="Mari gabung bersama Kami" class="link">Daftar
                Disini.</a>
        </div>
        <!--<center><a href='<?php echo base_url(); ?>reseller'>Login Reseller</a><center>-->
    </form>
</div>

<div class="modal fade" id="lupass" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h5 class="modal-title" id="myModalLabel">Lupa Password Login?</h5>
            </div>
            <center>
                <div class="modal-body">
                    <?php
                    $attributes = array('class' => 'form-horizontal');
                    // echo form_open('auth/lupass',$attributes); 
                    ?>
                    <form method="post" action="<?php echo base_url(); ?>auth/login21">
                        <div class="form-group">
                            <center style='color:red'>Masukkan Email yang terkait dengan akun!</center><br>
                            <label for="inputEmail3" class="col-sm-2 control-label">Email</label>
                            <div style='background:#fff;' class="input-group col-sm-8">
                                <span class="input-group-addon"><i class='fa fa-envelope fa-fw'></i></span>
                                <input style='text-transform:lowercase;' type="email" class="required form-control"
                                    name="n">

                            </div>
                            <label for="inputEmail3" class="col-sm-2 control-label">No.Telp</label>
                            <div style='background:#fff;' class="input-group col-sm-8">
                                <span class="input-group-addon"><i class='fa fa-envelope fa-fw'></i></span>
                                <input style='text-transform:lowercase;' type="number" class="required form-control"
                                    name="m" min=0>
                            </div>

                        </div>

                        <div class="form-group">
                            <div class="col-sm-offset-3">
                                <button type="submit" name='login21' class="btn btn-primary btn-sm"
                                    value="Login21">Cek</button>
                                &nbsp; &nbsp; &nbsp;<a data-dismiss="modal" aria-hidden="true" data-toggle='modal'
                                    href='#login' data-target='#login' title="Lupa Password Members">Kembali Login?</a>
                            </div>
                        </div>
                    </form>
                    </form>
                    <div style='clear:both'></div>
                </div>
            </center>
        </div>
    </div>
</div>