<style>
.text-danger {
    color: red !important;
}
.parsley-errors-list>li {
    color: red !important;
}
.field-icon {
    float: right;
    margin-left: -35px;
    margin-top: 12px;
    margin-right: 12px;
    position: relative;
    z-index: 3;
}
</style>

    <link rel="stylesheet" href="<?= base_url()."/public/"; ?>assets/member_css/intlTelInput.css">
    <script src="<?= base_url()."/public/"; ?>assets/member_js/intlTelInput.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.inputmask/3.3.4/jquery.inputmask.bundle.min.js"></script> 



                       <!-- start page title -->
                        <div class="row">
                            <div class="col-12">
                                <div class="page-title-box page-title-box-alt">
                                    <h4 class="page-title">  <?php if(isset($Memberdata)){ ?>  Edit <?php } else {  ?> Add  <?php }   ?> Member</h4>
                                    <div class="page-title-right">
                                        <ol class="breadcrumb m-0">
                                            <!-- <li class="breadcrumb-item"><a href="javascript: void(0);">Minton</a></li>
                                            <li class="breadcrumb-item"><a href="javascript: void(0);">Forms</a></li>
                                            <li class="breadcrumb-item active">Advanced</li> -->
                                        </ol>
                                    </div>
                                </div>
                            </div>
                        </div>     
                        <!-- end page title --> 

                 


                        <div class="row">
                            <div class="col-12">
                            <div class="card">
                                    <div class="card-body">
                                      
                                        <form role="form" class="parsley-examples" method="post" 
                                        <?php if(isset($Memberdata)){ ?>
                                            action="<?= base_url()."member_edit"; ?>"
                                        <?php } else {  ?>   action="<?= base_url()."member_add"; ?>" <?php }   ?> 
                                         />
                                        <?php if(isset($Memberdata)){ ?>
                                            <input type="hidden" required   name="id" value="<?= $Memberdata[0]['id']; ?>" >
                                        <?php } ?>

                                        <input type="hidden"  id="country_code_get" value="<?php if(isset($Memberdata)){ echo $Memberdata[0]['country_code']; } ?>"/>
                                        <input type="hidden" name="country_code" id="country_code_post"/>

                                            <div class="form-group row">
                                                <label for="inputEmail3" class="col-4 col-form-label">First Name<span class="text-danger">*</span></label>
                                                <div class="col-7">
                                                    <input type="text" required  class="form-control"  name="name" value="<?php if(isset($Memberdata)){echo $Memberdata[0]['name'];} ?>" placeholder="First Name">
                                                </div>
                                            </div>
											
											<div class="form-group row">
                                                <label for="inputEmail3" class="col-4 col-form-label">Last Name<span class="text-danger">*</span></label>
                                                <div class="col-7">
                                                    <input type="text" required  class="form-control"  name="last_name" value="<?php if(isset($Memberdata)){echo $Memberdata[0]['last_name'];} ?>" placeholder="Last 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" id="email" onkeyup="check_if_exists();" required parsley-type="email" class="form-control" name="email" value="<?php if(isset($Memberdata)){echo $Memberdata[0]['email'];} ?>" placeholder="Email">
                                                    <span id="already_err"></span>
                                                </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 type="tel" class="form-control" name="mobile" onkeyup="get_country_code();" value="<?php if(isset($Memberdata)){echo $Memberdata[0]['mobile'];} ?>"  id="mobile" class="mobile" required/> 
                                                  
                                                </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"   class="form-control"  name="address" value="<?php if(isset($Memberdata)){echo $Memberdata[0]['address'];} ?>" placeholder="Address">
                                            </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"  class="form-control" id="city" name="city" value="<?php if(isset($Memberdata)){echo $Memberdata[0]['city'];} ?>" placeholder="City" >
                                               
                                                </div>
                                            </div>

                                            <div class="form-group row">
                                                <label for="inputEmail3" class="col-4 col-form-label">Province<span class="text-danger"></span></label>
                                                <div class="col-7">
                                                <input type="text"  class="form-control" id="state"  name="state" value="<?php if(isset($Memberdata)){echo $Memberdata[0]['state'];} ?>" placeholder="Province" >
                                                <select name="state_canada" id="state2" class=" form-control" >
                                                </select>
                                                </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 name="country" id="country" class="js-example-basic-single form-control" >
                                                    <?php if(isset($Memberdata)) { ?>
                                                        <?php if ($Memberdata[0]['country'] == "" || $Memberdata[0]['country'] == "Select Country") { ?>
                                                            <option value="Canada"> Canada </option>   
                                                        <?php } 
                                                         else { ?>
                                                            <option value="<?= $Memberdata[0]['country']?>"> <?= $Memberdata[0]['country']?> </option>   
                                                        <?php } ?>               
                                                    <?php } else { ?>
                                                    <option> Select Country </option>  
                                                    <?php }?>
                                                    
                                                    <?php foreach ($country as $key => $value) { ?>
                                                        <option value="<?= $value['name']?>"> <?= $value['name']?> </option>  
                                                    <?php } ?>
                                                </select>
                                                </div>
                                            </div>

                                            <div class="form-group row">
                                                <label for="inputEmail3" class="col-4 col-form-label">Postal code<span class="text-danger"></span></label>
                                                <div class="col-7">
                                                <input type="text"  class="form-control" id="pincode" name="pincode" value="<?php if(isset($Memberdata)){echo $Memberdata[0]['pincode'];} ?>" placeholder="Postal Code" >


                                       
                                                </div>
                                            </div>
                                          
                                           

                                           
                                           
                                            <div class="form-group row">
                                                <div class="col-8 offset-4">
                                                    <button id="save" type="submit" class="btn btn-primary waves-effect waves-light mr-1">
                                                    <?php if(isset($Memberdata)){ ?>  Update <?php } else {  ?> Save  <?php }   ?>
                                                    </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-->



<?php if(isset($Memberdata)){ ?>
                        <!-- start page title -->
                        <div class="row">
                            <div class="col-12">
                                <div class="page-title-box page-title-box-alt">
                                    <h4 class="page-title"> Reset Password </h4>
                                    <div class="page-title-right">
                                        <ol class="breadcrumb m-0">
                                            <!-- <li class="breadcrumb-item"><a href="javascript: void(0);">Minton</a></li>
                                            <li class="breadcrumb-item"><a href="javascript: void(0);">Forms</a></li>
                                            <li class="breadcrumb-item active">Advanced</li> -->
                                        </ol>
                                    </div>
                                </div>
                            </div>
                        </div>     
                        <!-- end page title --> 

                 


                        <div class="row">
                            <div class="col-12">
                            <div class="card">
                                    <div class="card-body">
                                      
                                        <form role="form" class="parsley-examples" method="post" action="<?= base_url()."member_edit"; ?>"/>
                                        <?php if(isset($Memberdata)){ ?>
                                            <input type="hidden" required   name="id" value="<?= $Memberdata[0]['id']; ?>" >
                                        <?php } ?>
                                       
                                            <div class="form-group row">
                                                <label for="inputEmail3" class="col-4 col-form-label">Password<span class="text-danger">*</span></label>
                                                <div class="col-7">
                                                <span toggle="#pass2" id="toggle-password"  class="fa fa-fw fa-eye field-icon toggle-password"></span>   
                                                <input type="password" id="pass2" class="form-control"  pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?=.*[^a-zA-Z0-9])(?!.*\s).{8,}"  required
                                                           placeholder="Password" name="password"/>
                                                
                                                </div>
                                            </div>

                                            <div class="form-group row">
                                                <label for="inputEmail3" class="col-4 col-form-label">Confirm Password<span class="text-danger">*</span></label>
                                                <div class="col-7">
                                                <input type="password" class="form-control"  pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?=.*[^a-zA-Z0-9])(?!.*\s).{8,}"  required
                                                           data-parsley-equalto="#pass2"
                                                           placeholder="Re-Type Password"/>
                                                </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">
                                                   Update 
                                                    </button>
                                                   
                                                </div>
                                            </div>
                                        </form>
                                    </div>
                                </div> <!-- end card-box -->
                              
                            </div> <!-- end col-->
                        </div> 
                        <!-- end row-->    
<?php } ?>
<script>
function check_if_exists() {

const validateEmail = (email) => {
  return email.match(
    /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/
  );
};
var email = $("#email").val();
if(validateEmail(email)){
    $.ajax({
       type:"post",
       url: "<?php echo base_url(); ?>/check_if_mail_exists",
       data:{ email:email , table : 'member'},
       success:function(response)
       {
           if (response == true) 
           {
            $('#already_err').html("An account with this mail id already exist").css('color' , 'red');

            $("#email").val('');
           }
       }
}); 

}

$(document).ready(function(){
    $('#email').on('keyup', function () {
        if($('#email').val().length != 0)
        $('#already_err').html("");
    });
});


}

$(document).ready(function(){
    $('#pincode').change(function() {
        if ($('#pincode').val() == "") {
            $('#state').val('');
            $('#city').val('');
        }
    });
});

$(document).ready(function() {
    $('.js-example-basic-single').select2();
});

$("#toggle-password").click(function() {
   
    $(this).toggleClass("fa-eye fa-eye-slash");
    var input = $($(this).attr("toggle"));
    if (input.attr("type") == "password") {
        input.attr("type", "text");
    } 
    else {
        input.attr("type", "password");
    }
});

    var country_code = $('#country_code_get').val();
    //alert(country_code);
     var input = document.querySelector("#mobile");
   
     var iti = window.intlTelInput(input, {
        // allowDropdown: false,
         autoInsertDialCode: true,
       // autoPlaceholder: "on",
        dropdownContainer: document.body,
        // excludeCountries: ["us"],
       // formatOnDisplay: true,
        // geoIpLookup: function(callback) {
        //   fetch("https://ipapi.co/json")
        //     .then(function(res) { return res.json(); })
        //     .then(function(data) { callback(data.country_code); })
        //     .catch(function() { callback("us"); });
        // },
        // hiddenInput: "full_number",
        initialCountry: country_code || "ca",
        // localizedCountries: { 'de': 'Deutschland' },
        // nationalMode: false,
        // onlyCountries: ['us', 'gb', 'ch', 'ca', 'do'],
        // placeholderNumberType: "MOBILE",
        // preferredCountries: ['cn', 'jp'],
        //separateDialCode: true,
        showFlags: true,
        utilsScript: "<?= base_url()."/public/"; ?>assets/member_js/utils.js"
      });
    $('#mobile').inputmask('(999)-999-9999'); 



function get_country_code()
{
 var countryCode = iti.getSelectedCountryData().iso2;
 //alert(countryCode);
 $('#country_code_post').val(countryCode);
}
$('#country').change(function() {    
        var country = $("#country").val();       
        if(country != 'Canada')
        {           
            $('#state').val('');   
        } 
});

</script>



                     