<!DOCTYPE html>
<html lang="id">
<meta http-equiv="content-type" content="text/html;charset=UTF-8" />
<head>
    <title><?php echo $title; ?> - <?php echo $profil['nama']; ?></title>
    <base href="<?php echo base_url(); ?>"/>
    <link rel="icon" type="image/icon" sizes="16x16" href="assets/admin/img/<?php echo $profil['favicon']; ?>"> 
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="<?php echo $title; ?> - <?php echo $profil['nama']; ?>">
    <meta name="author" content="<?php echo $profil['nama']; ?>">
    <meta property="og:title" content="<?php echo $title; ?> - <?php echo $profil['nama']; ?>" />
    <!-- Bootstrap core CSS -->
    <link href="assets/home/css/bootstrap.min.css" rel="stylesheet">

    
    
    <!-- Font Awesome -->
    <link rel="stylesheet" href="assets/home/fontawesome/css/all.css">
    <link rel="stylesheet" type="text/css" href="assets/home/css/util.css">
    <link rel="stylesheet" type="text/css" href="assets/home/css/main.css">
    <style>
        @font-face {
            font-family: "opensans";
            src: url('assets/home/font-face/OpenSans/OpenSans-Regular.ttf');
        }

        @font-face {
            font-family: "button";
            src: url('assets/home/font-face/OpenSans/OpenSans-SemiBold.ttf');
        }

        @font-face {
            font-family: "robotobold";
            src: url('assets/home/font-face/Roboto/Roboto-Bold.ttf');
        }

        @font-face {
            font-family: "montserrat-regular";
            src: url('assets/home/font-face/Montserrat/MONTSERRAT-REGULAR.OTF');
        }

        @font-face {
            font-family: "montserrat-bold";
            src: url('assets/home/font-face/Montserrat/MONTSERRAT-BOLD.OTF');
        }

        @font-face {
            font-family: "montserrat-semibold";
            src: url('assets/home/font-face/Montserrat/MONTSERRAT-SEMIBOLD.OTF');
        }

        @font-face {
            font-family: "Silka";
            src: url('assets/home/font-face/Silka/SILKA-REGULAR-WEBFONT.TTF');
        }

        @font-face {
            font-family: "Silka-bold";
            src: url('assets/home/font-face/Silka/SILKA%20BLACK.OTF');
        }
        ::-webkit-input-placeholder { /* Chrome/Opera/Safari */
            font-family: 'montserrat-regular';
            font-style: normal; 
            font-weight: 200;
            font-size: 12px;
             color: #BDBDBD;
        }
        ::-moz-placeholder { /* Firefox 19+ */
            font-family: 'montserrat-regular';
            font-style: normal; 
            font-weight: 200;
            font-size: 12px;
             color: #BDBDBD;
        }
        :-ms-input-placeholder { /* IE 10+ */
            font-family: 'montserrat-regular';
            font-style: normal; 
            font-weight: 200;
            font-size: 12px;
             color: #BDBDBD;
        }
        :-moz-placeholder { /* Firefox 18- */
            font-family: 'montserrat-regular';
            font-style: normal; 
            font-weight: 200;
            font-size: 12px;
             color: #BDBDBD;
        }
        .subtitle3 {
            font-family: 'montserrat-regular';
            font-style: normal; 
            font-weight: 400;
            font-size: 12px;
            line-height: 100%%;
            color: #737070;
        }
        .subtitle {
            font-family: 'montserrat-regular';
            font-style: SemiBold; 
            font-weight: 600;
            font-size: 12px;
            line-height: 130%%;
            color: #4F4F4F;
        }
        .subtitle4 {
            font-family: 'montserrat-regular';
            font-size: 13px;
        }
        .subtitle-green {
            font-family: 'montserrat-regular';
            font-style: normal; 
            font-weight: 400;
            font-size: 12px;
            line-height: 130%%;
            color: #85B440;
        }
        .fa, .fas {
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
}
.fa, .fas, .far, .fal, .fad, .fab {
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    display: inline-block;
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    line-height: 1;
}
    </style>
</head>
<body style="background-color: #f7f7f7;">
<main role="main" class="container with-navbar" style="padding:0px 0px 0px 0px; max-width: 480px !important; background-color: #ffffff">
    <nav class="container navbar fixed-top navbar-default p-0 title benihbaik_solid" style="max-width: 480px;">
        <div style="max-width: 480px !important; margin: 0px 30px;height: 100%;width: 100%; display: flex; align-items: center;">
            <span class="navbar-text title-navbar">
                <a href="javascript:history.go(-1)" class="navbar-text mr-2">
                    <i class="fa fa-arrow-left title " style="color:#828282;     font-size: 15px;"></i>
                </a>
            </span>             
        </div>
    </nav>
        <div class="container-login100">
            <div class="wrap-login100">
            <form action="" method="post" class="login100-form validate-form flex-sb flex-w" style="max-width:500px;margin:auto">
                <input type="hidden" name="<?php echo $this->security->get_csrf_token_name(); ?>" value="<?php echo $this->security->get_csrf_hash(); ?>">
                    <span class="login100-form-title p-b-10 text-center">
                        <h2 class="center" style="font-family: 'montserrat-bold';margin: 0 auto; margin-top:35px;margin-bottom:15px;"><?php echo $profil['nama']; ?></h2>
                        
                    </span>
                    <h1 style="font-size: 20px;margin-bottom: 10px;"><b>Daftar</b></h1>
                    <span class="subtitle p-b-20">
                        Hai #Temanbaik Selamat Bergabung di <?php echo $profil['nama']; ?>, mari tanam kebaikan selagi masih ada kesempatan
                    </span>
                    <?php if($this->session->flashdata('flash')): ?>
                    <div style="width: 100%;" class="alert alert-success">
                        <strong><i class="fa fa-check-circle"></i></strong> <?php echo $this->session->flashdata('flash'); ?>
                    </div>
                    <?php endif; ?>
                    <?php if($this->session->flashdata('error')): ?>
                    <div style="width: 100%;" class="alert alert-danger">
                        <strong><i class="fa fa-times-circle"></i></strong> <?php echo $this->session->flashdata('error'); ?>
                    </div>
                    <?php endif; ?>
                    <div class="wrap-input100 validate-input  m-b-16  " data-validate="Username is required">
                        <input class="input100" type="text" name="nama" value="<?php echo set_value('nama'); ?>" placeholder="Nama Lengkap" />
                        <span class="focus-input100"></span>
                    </div>
                    <div class="text-danger m-b-3 m-l-5" style="font-family: 'montserrat-regular';font-size:12px;">
                        <?php echo form_error('nama'); ?>
                    </div>

                    <div class="wrap-input100 validate-input  m-b-16  " data-validate="Username is required">
                        <input class="input100" type="number" name="telp" value="<?php echo set_value('telp'); ?>" placeholder="No Telepon" />
                        <span class="focus-input100"></span>
                    </div>
                    <div class="text-danger m-b-3 m-l-5" style="font-family: 'montserrat-regular';font-size:12px;">
                        <?php echo form_error('telp'); ?>
                    </div>
                       
                             
                    <div class="wrap-input100 validate-input  m-b-12  " data-validate="Password is required" >
                        <input class="input100" type="text" name="email" value="<?php echo set_value('email'); ?>"  placeholder="Alamat Email Anda" />
                        <span class="focus-input100"></span>
                    </div>
                    <div class="text-danger m-b-3 m-l-5" style="font-family: 'montserrat-regular';font-size:12px;">
                        <?php echo form_error('email'); ?>
                    </div>

                    <div class="wrap-input100 validate-input  m-b-12  " data-validate="Password is required" >
                        <span class="btn-show-pass" id="toggle-password1">
                            <i class="fa fa-eye"></i>
                        </span>
                        <input class="input100" type="password"id="password1" name="password1" placeholder="Password" />
                        <span class="focus-input100"></span>
                    </div>
                    <div class="text-danger m-b-3 m-l-5" style="font-family: 'montserrat-regular';font-size:12px;">
                        <?php echo form_error('password1'); ?>
                    </div>

                    <div class="wrap-input100 validate-input  m-b-12  " data-validate="Password is required" >
                        <span class="btn-show-pass" id="toggle-password2">
                            <i class="fa fa-eye"></i>
                        </span>
                        <input class="input100" type="password"id="password2" name="password2" placeholder="Konfirmasi Password" />
                        <span class="focus-input100"></span>
                    </div>
                    <div class="text-danger m-b-3 m-l-5" style="font-family: 'montserrat-regular';font-size:12px;">
                        <?php echo form_error('password2'); ?>
                    </div>
                       
                    <div class="container-login100-form-btn p-b-5">
                        <button class="login100-form-btn">
                            Daftar Sekarang
                        </button>
                    </div>  
                    </form>
                    <span class="login100-form-title p-b-5 text-center subtitle">
                        Anda sudah memiliki akun? <a href="login"><span class="subtitle-green">Masuk</span></a>
                    </span>
            </div>
        </div>

</main>
<script src="assets/home/colorlib.com/etc/lf/Login_v14/vendor/jquery/jquery-3.2.1.min.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
    // Fungsi untuk toggle visibilitas password
    function togglePasswordVisibility(inputId, toggleId) {
        const passwordInput = document.getElementById(inputId);
        const toggleButton = document.getElementById(toggleId);
        
        toggleButton.addEventListener('click', function() {
            // Cek apakah password sedang terlihat
            if (passwordInput.type === 'password') {
                passwordInput.type = 'text';
                toggleButton.querySelector('i').classList.remove('fa-eye');
                toggleButton.querySelector('i').classList.add('fa-eye-slash');
            } else {
                passwordInput.type = 'password';
                toggleButton.querySelector('i').classList.remove('fa-eye-slash');
                toggleButton.querySelector('i').classList.add('fa-eye');
            }
        });
    }

    // Terapkan fungsi ke masing-masing input password
    togglePasswordVisibility('password1', 'toggle-password1');
    togglePasswordVisibility('password2', 'toggle-password2');
});
</script>


</body>
</html>