<!DOCTYPE html>
<html dir="ltr">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- Tell the browser to be responsive to screen width -->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">
    <!-- Favicon icon -->
    <link rel="icon" type="image/png" href="<?= base_url(); ?>/assets/login/images/icons/dr.ico" />
    <title><?= $title; ?></title>
    <!-- Custom CSS -->
    <link href="<?= base_url(); ?>/assets/regis/dist/css/style.min.css" rel="stylesheet">
    <!--===============================================================================================-->
    <link rel='stylesheet' type="text/css" href='<?= base_url(); ?>/assets/login/alert/css.css'>
    <link rel='stylesheet' type="text/css" href='<?= base_url(); ?>/assets/login/alert/sweetalert2.min.css'>
    <!--===============================================================================================-->
    <style>
        .lds-spinner {
            color: official;
            display: inline-block;
            position: relative;
            width: 80px;
            height: 80px;
            margin-top: 25%;
        }

        .lds-spinner div {
            transform-origin: 40px 40px;
            animation: lds-spinner 1.2s linear infinite;
        }

        .lds-spinner div:after {
            content: " ";
            display: block;
            position: absolute;
            top: 3px;
            left: 37px;
            width: 6px;
            height: 18px;
            border-radius: 20%;
            background: blue;
        }

        .lds-spinner div:nth-child(1) {
            transform: rotate(0deg);
            animation-delay: -1.1s;
        }

        .lds-spinner div:nth-child(2) {
            transform: rotate(30deg);
            animation-delay: -1s;
        }

        .lds-spinner div:nth-child(3) {
            transform: rotate(60deg);
            animation-delay: -0.9s;
        }

        .lds-spinner div:nth-child(4) {
            transform: rotate(90deg);
            animation-delay: -0.8s;
        }

        .lds-spinner div:nth-child(5) {
            transform: rotate(120deg);
            animation-delay: -0.7s;
        }

        .lds-spinner div:nth-child(6) {
            transform: rotate(150deg);
            animation-delay: -0.6s;
        }

        .lds-spinner div:nth-child(7) {
            transform: rotate(180deg);
            animation-delay: -0.5s;
        }

        .lds-spinner div:nth-child(8) {
            transform: rotate(210deg);
            animation-delay: -0.4s;
        }

        .lds-spinner div:nth-child(9) {
            transform: rotate(240deg);
            animation-delay: -0.3s;
        }

        .lds-spinner div:nth-child(10) {
            transform: rotate(270deg);
            animation-delay: -0.2s;
        }

        .lds-spinner div:nth-child(11) {
            transform: rotate(300deg);
            animation-delay: -0.1s;
        }

        .lds-spinner div:nth-child(12) {
            transform: rotate(330deg);
            animation-delay: 0s;
        }

        @keyframes lds-spinner {
            0% {
                opacity: 1;
            }

            100% {
                opacity: 0;
            }
        }


        .overlay {
            z-index: 9999999;
            position: fixed;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            background-color: rgba(255, 255, 255, 0.7);
            text-align: center;
        }
    </style>
</head>

<body onload="hide_loading();">
    <div class="main-wrapper">
        <div class="loading overlay">
            <div class="lds-spinner">
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
            </div>
        </div>
        <div class="auth-wrapper d-flex no-block justify-content-center align-items-center bg-dark">
            <div class="auth-box bg-dark border-top border-secondary">
                <div>

                    <div class="text-center p-t-20 p-b-20">
                        <span class="db"><img src="<?= base_url(); ?>/assets/login/images/d-rapor1.png" width="200px" alt="logo" /></span>
                    </div>

                    <div class="text-center">
                        <h4>Ganti password untuk email :</h4>
                    </div>

                    <div class="text-center">
                        <h5><?= $this->session->userdata('reset_email'); ?></h5>
                    </div>

                    <?= $this->session->flashdata('messageDaftar'); ?>
                    <!-- Form -->
                    <form class="form-horizontal m-t-20" action="<?= base_url('login/ganti_password'); ?>" method="post">
                        <div class="row p-b-30">
                            <div class="col-12">

                                <?= form_error('password1', '<small class="text-white bg-danger"><b>', '</b></small>'); ?>
                                <div class="input-group mb-3">
                                    <div class="input-group-prepend">
                                        <span class="input-group-text bg-success text-white" id="basic-addon1"><i class="ti-key"></i></span>
                                    </div>
                                    <input type="password" class="form-control form-control-lg" placeholder="Password Baru" name="password1" id="password1" aria-describedby="basic-addon1">
                                </div>

                                <?= form_error('password2', '<small class="text-white bg-danger"><b>', '</b></small>'); ?>
                                <div class="input-group mb-3">
                                    <div class="input-group-prepend">
                                        <span class="input-group-text bg-success text-white" id="basic-addon1"><i class="ti-key"></i></span>
                                    </div>
                                    <input type="password" class="form-control form-control-lg" placeholder="Ulangi Password" name="password2" id="password2" aria-describedby="basic-addon1">
                                </div>

                            </div>
                        </div>
                        <div class="row border-top border-secondary">
                            <div class="col-12">
                                <div class="form-group">
                                    <div class="p-t-20">
                                        <button class="btn btn-block btn-lg btn-success" type="submit"> Ganti Password</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
        <!-- ============================================================== -->
        <!-- Login box.scss -->
        <!-- ============================================================== -->
        <!-- ============================================================== -->
        <!-- Page wrapper scss in scafholding.scss -->
        <!-- ============================================================== -->
        <!-- ============================================================== -->
        <!-- Page wrapper scss in scafholding.scss -->
        <!-- ============================================================== -->
        <!-- ============================================================== -->
        <!-- Right Sidebar -->
        <!-- ============================================================== -->
        <!-- ============================================================== -->
        <!-- Right Sidebar -->
        <!-- ============================================================== -->
    </div>
    <!-- ============================================================== -->
    <!-- All Required js -->
    <!-- ============================================================== -->
    <script src="<?= base_url(); ?>/assets/regis/assets/libs/jquery/dist/jquery.min.js"></script>
    <!-- Bootstrap tether Core JavaScript -->
    <script src="<?= base_url(); ?>/assets/regis/assets/libs/popper.js/dist/umd/popper.min.js"></script>
    <script src="<?= base_url(); ?>/assets/regis/assets/libs/bootstrap/dist/js/bootstrap.min.js"></script>
    <!--===============================================================================================-->
    <script src="<?= base_url(); ?>/assets/login/alert/sweetalert2.all.min.js"></script>
    <script src="<?= base_url(); ?>/assets/login/alert/jquery.min.js"></script>
    <!--===============================================================================================-->

    <!-- ============================================================== -->
    <!-- This page plugin js -->
    <!-- ============================================================== -->
    <script>
        let fadeTarget = document.querySelector(".loading")

        function show_loading() {
            fadeTarget.style.display = "block";
            fadeTarget.style.opacity = 1;
        }

        function hide_loading() {
            // fadeTarget.style.display = "none";
            let fadeEffect = setInterval(() => {
                if (!fadeTarget.style.opacity) {
                    fadeTarget.style.opacity = 1;
                }
                if (fadeTarget.style.opacity > 0) {
                    fadeTarget.style.opacity -= 0.1;
                } else {
                    clearInterval(fadeEffect)
                    fadeTarget.style.display = "none"
                }
            }, 150)
        }
    </script>
</body>

</html>