<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title>Member Registration</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta content="A fully featured admin theme which can be used to build CRM, CMS, etc." name="description" />
        <meta content="Coderthemes" name="author" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <!-- App favicon -->
        <link rel="shortcut icon" href="<?= base_url()."/public"; ?>/assets/images/favicon.ico">

		<!-- App css -->
		<link href="<?= base_url()."/public"; ?>/assets/css/bootstrap-corporate.min.css" rel="stylesheet" type="text/css" id="bs-default-stylesheet" />
		<link href="<?= base_url()."/public"; ?>/assets/css/app-corporate.min.css" rel="stylesheet" type="text/css" id="app-default-stylesheet" />

		<link href="<?= base_url()."/public"; ?>/assets/css/bootstrap-corporate-dark.min.css" rel="stylesheet" type="text/css" id="bs-dark-stylesheet" />
		<link href="<?= base_url()."/public"; ?>/assets/css/app-corporate-dark.min.css" rel="stylesheet" type="text/css" id="app-dark-stylesheet" />

		<!-- icons -->
		<link href="<?= base_url()."/public"; ?>/assets/css/icons.min.css" rel="stylesheet" type="text/css" />

                <!-- css -->
                <link href="<?= base_url()."/public"; ?>/assets/css/style.css" rel="stylesheet" type="text/css" />
<style>
.text-danger {
    color: red !important;
}
.parsley-errors-list>li {
    color: red !important;
}


</style>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
 


$(document).ready(function(){
//fetch state and sity values
 $('.country').change(function(){
  var country_id = $('.country').val();
  
  if(country_id != '')
  {
	 
   $.ajax({
    url:"<?= base_url(); ?>/fetch_state",
    method:"POST",
    data:{country_id:country_id},
    success:function(data)
    {
     $('.state').html(data);
    }
   });
  }
  else
  {
   $('.state').html('<option value="">Select State</option>');
  }
 });

 $('.state').change(function(){
  var state_id = $('.state').val();
  if(state_id != '')
  {
   $.ajax({
    url:"<?=  base_url(); ?>/fetch_city",
    method:"POST",
    data:{state_id:state_id},
    success:function(data)
    {
     $('.city').html(data);
    }
   });
  }
  else
  {
   $('.city').html('<option value="">Select City</option>');
  }
 });
});


function check_if_exists() {

 var email = $("#email").val();
$.ajax({
        type:"post",
        url: "<?php echo base_url(); ?>/check_if_mail_exists",
        data:{ email:email , table : 'member'},
        success:function(response)
        {
            if (response == true) 
            {
				alert("This mail id already exists");
				$("#email").val('');
            }
        }
 }); 
}
</script>
    </head>

    <body class="loading">

        <div class="account-pages mt-5 mb-5">
            <div class="container">
                <div class="row justify-content-center">

                    <div class="col-lg-6">
                        <div class="card">
                            <div class="card-body">
                                <h3 class="header-title" style="text-align: center;">Member Registration</h3>
                                <p class="sub-header">
                                </p>

                                <form method="post" action="<?= base_url()."register"; ?>" role="form" class="parsley-examples">
                                    <div class="form-group row">
                                        <label for="inputEmail3" class="col-4 col-form-label">Name<span class="text-danger">*</span></label>
                                        <div class="col-7">
                                            <input type="text" required parsley-type="text" class="form-control"
                                                id="name" placeholder="Username" name="name">
                                        </div>
                                    </div>
                                    <div class="form-group row">
                                        <label for="inputEmail3" class="col-4 col-form-label">Email<span class="text-danger">*</span></label>
                                        <div class="col-7">
                                            <input type="email" required parsley-type="email" class="form-control"
                                                id="email" placeholder="Email" onchange="check_if_exists();" name="email">
                                        </div>
                                    </div>
                                    <div class="form-group row">
                                        <label for="inputEmail3" class="col-4 col-form-label">Mobile<span class="text-danger">*</span></label>
                                        <div class="col-7">
                                            <input data-parsley-type="number" type="text" pattern="[6-9]{1}[0-9]{9}" 
                                                           class="form-control" required
                                                           placeholder="Enter only numbers" name="mobile"/>
                                        </div>
                                    </div>
                                    <!-- <div class="form-group row">
                                        <label for="hori-pass1" class="col-4 col-form-label">Password<span class="text-danger">*</span></label>
                                        <div class="col-7">
                                            <input id="hori-pass1" type="password" placeholder="Password" required
                                                class="form-control" name="password">
                                        </div>
                                    </div>
                                    <div class="form-group row">
                                        <label for="hori-pass2" class="col-4 col-form-label">Confirm Password
                                            <span class="text-danger">*</span></label>
                                        <div class="col-7">
                                            <input data-parsley-equalto="#hori-pass1" type="password" required
                                                placeholder="Password" class="form-control" id="hori-pass2">
                                        </div>
                                    </div> -->
                                    <div class="form-group row">
                                        <label for="inputEmail3" class="col-4 col-form-label">Address<span class="text-danger"></span></label>
                                        <div class="col-7">
                                            <input type="text"  parsley-type="text" class="form-control"
                                                id="address" placeholder="Address" name="address">
                                        </div>
                                    </div>
                                    <div class="form-group row">
                                        <label for="inputEmail3" class="col-4 col-form-label">Country<span class="text-danger"></span></label>
                                        <div class="col-7">
                                        <select id="selectize-select"   class="form-control country" name="country" id="country">
                                                <?=  $country; ?>  
                                                </select>
                                        </div>
                                    </div>
                                    
                                    <div class="form-group row">
                                        <label for="inputEmail3" class="col-4 col-form-label">State<span class="text-danger"></span></label>
                                        <div class="col-7">
                                        <input type="text"  parsley-type="text" class="form-control"
                                                id="state" placeholder="State" name="state">
                                        <!-- <select id="selectize-select"   class="form-control state" name="state" id="state"> 
                                               
                                               </select> -->
                                        </div>
                                    </div>
                                    <div class="form-group row">
                                        <label for="inputEmail3" class="col-4 col-form-label">City<span class="text-danger"></span></label>
                                        <div class="col-7">
                                        <input type="text"  parsley-type="text" class="form-control"
                                                id="city" placeholder="City" name="city">
                                        <!-- <select id="selectize-select"   class="form-control city" name="city" id="city">
                                              
                                              </select> -->
                                        </div>
                                    </div>
                                   
                                    <div class="form-group row">
                                        <label for="inputEmail3" class="col-4 col-form-label">Zipcode<span class="text-danger"></span></label>
                                        <div class="col-7">
                                            <input type="text"  parsley-type="text" class="form-control"
                                                id="pincode" placeholder="pincode" name="pincode">
                                        </div>
                                    </div>
                                  

                                    
                                    <div class="form-group row">
                                        <div class="col-8 offset-4">
                                            <button type="submit" class="btn btn-primary waves-effect waves-light mr-1">
                                                Register
                                            </button>
                                            <button type="reset" onclick="history.back()"
                                                    class="btn btn-secondary waves-effect">
                                                Cancel
                                            </button>
                                        </div>
                                    </div>
                                </form>
                            </div>
                        </div> <!-- end card-box -->

                    </div> <!-- end col -->
                </div>
                <!-- end row -->
            </div>
            <!-- end container -->
        </div>
        <!-- end page -->

 <!-- Right bar overlay-->
 <div class="rightbar-overlay"></div>

 <!-- Vendor js -->
 <script src="<?= base_url()."/public"; ?>/assets/js/vendor.min.js"></script>

 <!-- Plugin js-->
 <script src="<?= base_url()."/public"; ?>/assets/libs/parsleyjs/parsley.min.js"></script>

 <!-- Validation init js-->
 <script src="<?= base_url()."/public"; ?>/assets/js/pages/form-validation.init.js"></script>

 <!-- App js -->
 <script src="<?= base_url()."/public"; ?>/assets/js/app.min.js"></script>
        
    </body>
</html>