  
<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> 

<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.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($userList)){ ?>  Edit <?php } else {  ?> Add  <?php }   ?> User</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($userList)){ ?>
                                            action="<?= base_url()."user_edit"; ?>"
                                        <?php } else {  ?>   action="<?= base_url()."user_add"; ?>" <?php }   ?> 
                                         />
                                        <?php if(isset($userList)){ ?>
                                            <input type="hidden" required   name="id" value="<?= $userList[0]['id']; ?>" >
                                        <?php } ?>
                                        <?php if(!$check){ ?>
                                            <div class="form-group row">
                                                <label for="inputEmail3" class="col-4 col-form-label">Role<span class="text-danger">*</span></label>
                                                <div class="col-7">
                                                <select id="selectize-select" required  class="form-control" name="role">
                                                <?php if(isset($userList)){ ?> <option value="<?= $userList[0]['role']; ?>"> <?= $userList[0]['role']; ?> </option>   <?php } ?>
                                                        <option value="" >Select Role</option>
                                                        <option value="Admin">Admin</option>
                                                        <option value="Coach">Coach</option>
                                                        <option value="Frontdesk">Frontdesk</option>
                                                    </select>
                                                </div>
                                            </div>
                                            <?php } ?>
                                            <input type="hidden"  name="profile_check" value="<?php if(isset($check)){echo $check;} ?>">
                                            <input type="hidden"  id="country_code_get" value="<?php if(isset($userList)){ echo $userList[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">Name<span class="text-danger">*</span></label>
                                                <div class="col-7">
                                                    <input type="text" required  class="form-control"  name="name" value="<?php if(isset($userList)){echo $userList[0]['name'];} ?>" placeholder="User 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="<?php if($check){ echo 'mail'; } else { echo 'email'; }?>" value="<?php if(isset($userList)){echo $userList[0]['email'];} ?>" placeholder="Email"
                                                    <?php if($check){ echo 'readonly'; }?>>
                                                    <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" onkeyup="get_country_code();" name="mobile" value="<?php if(isset($userList)){echo $userList[0]['mobile'];} ?>"  id="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($userList)){echo $userList[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($userList)){echo $userList[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($userList)){echo $userList[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="form-control">
                                                <?php if(isset($userList)) { ?>
                                                <option value="<?= $userList[0]['country']?>"> <?= $userList[0]['country']?> </option>                     
                                                <?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($userList)){echo $userList[0]['pincode'];} ?>" placeholder="Postal code">


                                                </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">
                                                    <?php if(isset($userList)){ ?>  Update <?php } else {  ?> Save  <?php }   ?>
                                                    </button>
                                                    <button type="reset"
                                                            class="btn btn-secondary waves-effect" onclick="history.back()">
                                                        Cancel
                                                    </button>
                                                </div>
                                            </div>
                                        </form>
                                    </div>
                                </div> <!-- end card-box -->
                              
                            </div> <!-- end col-->
                        </div> 
                        <!-- end row-->


                        <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 : 'users'},
       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('');
        }
    });
});
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>




