<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- meta http-equiv="refresh" content="5" /> -->
    <title>DAFTAR</title>
    <!-- Tell the browser to be responsive to screen width -->
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

    <!-- Bootstrap 3.3.5 -->
    <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
    <!-- Font Awesome -->
    <link rel="stylesheet" href="dist/css/font-awesome.min.css">
    <!-- Ionicons -->
    <link rel="stylesheet" href="dist/css/ionicons.min.css">
    <!-- Theme style -->
    <link rel="stylesheet" href="dist/css/AdminLTE.css">
    <!-- iCheck -->
    <link rel="stylesheet" href="plugins/iCheck/square/blue.css">

    <!-- Custom fonts for this template-->
    <link href="vendor/fontawesome-free/css/all.min.css" rel="stylesheet" type="text/css">
    <link

    href="https://fonts.googleapis.com/css?family=Times:200,200i,300,300i,400,400i,600,600i,700,700i,800,800i,900,900i" rel="stylesheet">

    <!-- Custom styles for this template-->
	<link href="css/sb-admin-2.min.css" rel="stylesheet">

    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
        <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
        <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  
  <body class="bg-gradient-primary" background="lokasi gambar">
  
    <div class="container">

        <div class="card o-hidden border-0 shadow-lg my-5">
            <div class="card-body p-0">
                <!-- Nested Row within Card Body -->
                <div class="row">
                    <div class="col-lg-5 d-none d-lg-block"/>
						<img src="img/astro.gif" alt="Image" style="width:100%;height:100%;">
					</div>
                    <div class="col-lg-7">
                        <div class="p-5">
                            <div class="text-center">
                                <h1 class="h4 text-gray-900 mb-4">Create an Account!</h1>
                            </div>
		<br>
		<form action="btn_registuser.php" method="POST" class="user">
<?php
	// Cari NIK Akhir
	include 'reg.code.php';
?>
			<div class="form-group row">
				<input type="text" id="idreg" name="idreg" class="form-control form-control-user" autocomplete="on" placeholder="No Register" required="required" value="No Register : <?php echo $Regkode ?>" readonly>
			</div>
						
			<div class="form-group has-feedback">
				<input type="text" id="fullname" name="fullname" class="form-control form-control-user" autocomplete="on" placeholder="Nama Lengkap" required="required">
				<span class="glyphicon glyphicon-user form-control-feedback"></span>
			</div>
			
			<div class="form-group row">
				<div class="col-sm-6 mb-3 mb-sm-0">
					<input type="text" id="NOID" name="NO_ID" class="form-control form-control-user" autocomplete="on" placeholder="NO KTP" required="required" onkeypress="return event.charCode >= 48 && event.charCode <=57" maxlength="16"
					required="required">
				</div>
				<div class="col-sm-6">
					<input type="text" id="NOKK" name="NO_KK" class="form-control form-control-user" autocomplete="off" placeholder="NO KARTU KELUARGA" onkeypress="return event.charCode >= 48 && event.charCode <=57" MaxLength="15">
				</div>
			</div>

			<div class="form-group row">
				<div class="col-sm-6 mb-3 mb-sm-0">
					<label class="collapse-item small">TEMPAT LAHIR :</label>
				</div>
				<div class="col-sm-6">
					<label class="collapse-item small">TANGGAL LAHIR :</label>
				</div>
			</div>

			<div class="form-group row">
				<div class="col-sm-6 mb-3 mb-sm-0">
					<input type="text" id="tempatlahir" name="TEMPAT_LAHIR" class="form-control" autocomplete="on" placeholder="TEMPAT LAHIR" required="required">
				</div>
				<div class="col-sm-6">
					<input type="date" id="tgllahir" name="TANGGAL_LAHIR" class="form-control" autocomplete="off" placeholder="Tanggal Lahir" required="required">
				</div>
			</div>

			<div class="form-group row">
				<div class="col-md-6 mb-3 mb-sm-0">
					<input type="radio" name="JENIS_KELAMIN" id="JKL" value="L">
					<label class="form-check-label" for="JKL">Laki-Laki</label>
					<input type="radio" name="JENIS_KELAMIN" id="JKP" value="P">
					<label class="form-check-label" for="JKP">Perempuan</label>
				</div>

				<div class="col-sm-6">
					<select name="GOL_DARAH" class="form-select shadow-none border-0 ps-0 form-control form-control-line" required="required">
						<option value="" disabled selected hidden>Golongan Darah</option>
						<option value="A">A</option>
						<option value="B">B</option>
						<option value="AB">AB</option>
						<option value="O">O</option>
					</select>
				</div>
			</div>

			<div class="form-group">
				<input type="text" id="alamat" name="ALAMAT" class="form-control form-control-user" autocomplete="on" placeholder="ALAMAT" required="required">
			</div>

			<div class="form-group row">
				<div class="col-sm-3 mb-3 mb-sm-0">
					<input type="text" id="rt" name="RT" class="form-control form-control-user" autocomplete="on" placeholder="RT" required="required" onkeypress="return event.charCode >= 48 && event.charCode <=57" MaxLength="3">
				</div>
				<div class="col-sm-3 mb-3 mb-sm-0">
					<input type="text" id="rw" name="RW" class="form-control form-control-user" autocomplete="on" placeholder="RW" required="required" onkeypress="return event.charCode >= 48 && event.charCode <=57" MaxLength="3">
				</div>
				<div class="col-sm-6 mb-3 mb-sm-0">
					<input type="text" id="Kel" name="KEL" class="form-control form-control-user" autocomplete="on" placeholder="KELURAHAN/DESA" required="required">
				</div>
			</div>

			<div class="form-group row">
				<div class="col-sm-6 mb-3 mb-sm-0">
					<input type="text" id="Kec" name="KEC" class="form-control form-control-user" autocomplete="on" placeholder="KECAMATAN" required="required">
				</div>
				<div class="col-sm-6">
					<input type="text" id="kota" name="KOTA" class="form-control form-control-user" autocomplete="on" placeholder="KOTA/KABUPATEN" required="required">
				</div>
			</div>

			<div class="form-group row">
				<div class="col-sm-6 mb-3 mb-sm-0">
				<input type="text" id="Provinsi" name="PROVINSI" class="form-control form-control-user" autocomplete="on" placeholder="PROVINSI" required="required">
				</div>
				<div class="col-sm-6">
				<input type="text" id="kodepos" name="KODEPOS" class="form-control form-control-user" autocomplete="off" placeholder="KODE POS" onkeypress="return event.charCode >= 48 && event.charCode <=57" MaxLength="5">
				</div>
			</div>

			<div class="form-group row">
				<div class="col-sm-6 mb-3 mb-sm-0">
					<select name="STATUS_PERNIKAHAN" class="form-select shadow-none border-0 ps-0 form-control form-control-line" required="required">
						<option value="" disabled selected hidden>Status Pernikahan</option>
						<option value="Lajang">Lajang</option>
						<option value="Menikah">Menikah</option>
						<option value="Duda/Janda">Cerai</option>
					</select>
				</div>
				<div class="col-sm-3">
					<select name="AGAMA" class="form-select shadow-none border-0 ps-0 form-control form-control-line" required="required">
						<option value="" disabled selected hidden>Agama</option>
						<option value="ISLAM">Islam</option>
						<option value="KATOLIK">Katolik</option>
						<option value="BUDHA">Budha</option>
						<option value="KRISTEN">Kristen</option>
						<option value="HINDU">Hindu</option>
					</select>
				</div>
				<div class="col-sm-3">
					<select name="JUMLAH_ANAK" class="form-select shadow-none border-0 ps-0 form-control form-control-line" required="required">
						<option value="0" disabled selected hidden>Jumlah Anak</option>
						<option value="0">0</option>
						<option value="1">1</option>
						<option value="2">2</option>
						<option value="3">3</option>
						<option value="Lebih dari 3">Lebih dari 3</option>
					</select>
				</div>
			</div>

			<div class="form-group row">
				<div class="col-sm-6 mb-3 mb-sm-0">
					<input type="text" id="HP" name="HP" class="form-control form-control-user" autocomplete="on" placeholder="NO HANDPHONE" onkeypress="return event.charCode >= 48 && event.charCode <=57" maxlength="16" required="required">
				</div>
				<div class="col-sm-6">
					<input type="text" id="Norekening" name="NO_REKENING" class="form-control form-control-user" autocomplete="off" placeholder="NO REKENING" onkeypress="return event.charCode >= 48 && event.charCode <=57">
				</div>
			</div>

			<div class="form-group row">
				<div class="col-sm-6 mb-3 mb-sm-0">
					<input type="text" id="NamaRekening" name="NAMA_PEMILIK_REKENING" class="form-control form-control-user" autocomplete="off" placeholder="NAMA LENGKAP PEMILIK REKENING">
				</div>
				<div class="col-sm-6">
					<input type="text" id="bank" name="NAMA_BANK" class="form-control form-control-user" autocomplete="off" placeholder="NAMA BANK">
				</div>
			</div>

			<div class="form-group row">
				<div class="col-sm-6 mb-3 mb-sm-0">
					<input type="text" id="NamaIbu" name="NAMA_IBU_KANDUNG" class="form-control form-control-user" autocomplete="off" placeholder="NAMA LENGKAP IBU KANDUNG" required="required">
				</div>
				<div class="col-sm-6">
					<input type="email" id="email" name="EMAIL" class="form-control form-control-user" autocomplete="off" placeholder="ALAMAT EMAIL" required="required">
				</div>
			</div>
			
			<div class="form-group row">
				<div class="col-xs-12">
				<button type="submit" name="daftar" class="btn btn-primary btn-block btn-user">DAFTAR</button>

				</div><!-- /.col -->
			</div>
		</form>

		<br>
		<div class="text-center">
			<a class="" href="index.html">Sudah Punya Akun.? Masuk disini!</a>
		</div>
							
        <center><h5 class="form-signup"><a href="#" data-toggle="modal" data-target="#contact">Gemilang &copy; 2022</a> </h5></center> 

						</div>
					</div>
				</div>
			</div>
		</div>
	</div>


<!-- Modal Dialog Contact -->
	<div class="modal fade" id="contact" tabindex="-5" 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>
					<h4 class="modal-title" id="myModalLabel">Contact Us</h4>
				</div>
					<div class="modal-body">
						Apabila mengalami kendala, kontak yang dapat dihubungi di :
						<table>
							<tr>
								<td>No Telepon / WA</td> <td> : </td> <td>+62 812 9037 9105</td>
							</tr>
							<tr>
								<td>NIK </td> 						<td> : </td>
							</tr>
							<tr>
								<td>NAMA LENGKAP </td> 				<td> : </td>
							</tr>
							<tr>
								<td>Email </td> 					<td> : </td>
							</tr>
							<br />
<!-- 						<tr>
								<td>E-mail</td><td>:</td> <td><a href="mailto:heruarfians@gmail.com">heruarfians@gmail.com</a> | </td>
							</tr>
							<br />
							<tr>
								<td>Blog</td>       <td>:</td> <td><a href="http://www.gapunyablog.com" target="_blank">www.gapunyablog.com</a></td>
							</tr>
							<br />
							<tr>
								<td>Website</td>    <td>:</td> <td><a href="http://www.jagaraya.id" target="_blank">www.jagaraya.id</a></td>
							</tr>
-->						</table>
					</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
				</div>
			</div>
		</div>
	</div>
<!-- end dialog modal -->

    <!-- Bootstrap core JavaScript-->
<!--    <script src="vendor/jquery/jquery.min.js"></script> -->
<!--    <script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script> -->

    <!-- Core plugin JavaScript-->
<!--    <script src="vendor/jquery-easing/jquery.easing.min.js"></script> -->

    <!-- Custom scripts for all pages-->
<!--    <script src="js/sb-admin-2.min.js"></script> -->



    <!-- jQuery 2.1.4 -->
    <script src="plugins/jQuery/jQuery-2.1.4.min.js"></script> 
    <!-- Bootstrap 3.3.5 -->
    <script src="bootstrap/js/bootstrap.min.js"></script> 
    <!-- iCheck -->
    <script src="plugins/iCheck/icheck.min.js"></script> 
    <script>
      $(function () {
        $('input').iCheck({
          checkboxClass: 'icheckbox_square-blue',
          radioClass: 'iradio_square-blue',
          increaseArea: '20%' // optional
        });
      });
    </script>
  </body>
</html>