<style>
  .form-pass__toggle{
    position:absolute;
    right:10px;
    top:20px;
    border:none;
    background-color: transparent;
    display: flex;
  }
  .showhide-pass{
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .form-label{
    color: #08195F;
  }
</style>
<div class="ak-height-125 ak-height-lg-80"></div>
    <div class="container-fluid px-md-0">
      <div class="contact-form-content justify-content-center">
        <div class="contact-form w-100">
          <div>
            <h5 class="contact-title">Create an Account!</h5>
              <!-- <h5></h5> -->
                <p></p>
            <div class="ak-height-40 ak-height-lg-30"></div>
          </div>
              <?php echo $signup_err; ?>
              <!-- account form -->
              <form action="/register" method="POST" class="">
                  <div class="form-inputs">
                    <div class="type_1">
                      <label for="first-name" class="form-label">First name</label>
                      <input class="csame" type="text" id="first-name" name="customer_fname" placeholder="Ex. John" required>
                    </div>
                  </div>
                  <div class="form-inputs">
                    <div class="type_1">
                      <label for="last-name" class="form-label">Last name</label>
                      <input class="csame" type="text" id="last-name" name="customer_lname" placeholder="Ex. Martins" required>
                    </div>
                  </div>
                  <div class="form-inputs">
                    <div class="type_1">
                      <label for="account-email" class="form-label">Email Address</label>
                      <input type="email" class="csame" id="account-email" name="customer_email" placeholder="Enter your email" required>
                    </div>
                  </div>
                 <?php 
                 $countries = json_decode(file_get_contents('countries.json'), true);
                //  print_r($countries);
                 ?>
                  <div class="form-inputs">
                    <div class="type_1">
                      <label for="account-phone" class="form-label">Phone Number</label>
                      <div class="input-group">
                        <div class="input-group-append">
                      <select id="phoneCodeSelect" class="csame">
                      <?php  foreach($countries as $xcons){ ?>
                      <option value="<?php echo $xcons['callingCode']; ?>"><?php echo $xcons['callingCode']; ?></option>
                      <?php } ?>
                      </select></div>
                      <input type="text" class="csame" style="padding-left: 15px;width:80%" id="account-phone" name="customer_phone" placeholder="Enter your Phone number"
                        required>
                    </div>
                    </div>
                  </div>
                  <div class="form-inputs">
                    <div class="type_1">
                      <label for="account-country" class="form-label">Country</label>
                      <select class="csame" id="countrySelect" name="customer_country" placeholder="Enter your Country"
                        required>
                     <?php  foreach($countries as $xcons){ ?>
                      <option value="<?php echo $xcons['name']; ?>"><?php echo $xcons['name']; ?></option>
                      <?php } ?>
                    </select>
                    </div>
                  </div>
                  <div class="form-inputs">
                    <div class="type_1">
                      <label for="customer_password" class="form-label">Password</label>
                      <input type="password" class="csame showhide-pass" name="customer_password" id="customer_password" placeholder="Password"
                        required>
                    </div>
                  </div>
                  <div class="form-inputs">
                    <div class="type_1">
                      <label for="xcustomer_password" class="form-label">Confirm Password</label>
                      <input type="password" class="csame showhide-pass" name="xcustomer_password" id="xcustomer_password"
                        placeholder="Re-enter password" required>
                    </div>
                </div>
                <div class="row">
                      <small style="font-size: 0.8em;margin-top:-25px;" class="">Pasword should be more than Six(6) characters</small>
                                        <div class="col-lg-12">
                                        <div class="row">
                                            <div class="col-md-12" style="display:none" id="password_valid">
                                            <h6 style="font-size: 0.8em;color:darkred !important;">password should contain</h6>
                                            <ul class="small text-left" style="list-style: disc;">
                                                <li style="font-size: 0.8em;">At least A Capital letter</li>
                                                <li style="font-size: 0.8em;">Small Letters</li>
                                                <li style="font-size: 0.8em;">Minimum length (6)</li>
                                            <li style="font-size: 0.8em;"> Maximum length (20) </li>
                                            </ul>
                                          </div>
                                        </div>
                  </div>
                </div>
                
<div class="form-inputs">
                    <div class="type_1">
                      <label for="referal_code" class="form-label">Referal Code</label>
                      <input type="text" class="csame" name="referal_code" id="referal_code"
                        placeholder="Enter Referal code" value="<?php echo isset($_GET['id'])?$_GET['id']:''; ?>">
                    </div>
                    </div>

                    <div class="ak-height-40 ak-height-lg-40"></div>
            <button type="submit" name="create_acct" id="create_acct" class="common-btn border-0">
              <span>Sign Up</span>
              <span>
                <svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewbox="0 0 15 15" fill="none">
                  <g clip-path="url(#clip0_201_978343789)">
                    <path d="M1.42236 6.99728H13.089M13.089 6.99728L7.48903 1.39728M13.089 6.99728L7.48903 12.5973" stroke="#030917" stroke-linecap="round" stroke-linejoin="round"></path>
                  </g>
                  <defs>
                    <clippath id="clip0_201_978343789">
                      <rect width="14" height="14" fill="white" transform="translate(0.00927734)"></rect>
                    </clippath>
                  </defs>
                </svg>
              </span>
            </button>
              </form>
              </div>
      </div>
    </div>
    <!-- End Contact -->
    <div class="ak-height-125 ak-height-lg-80"></div>

      <link rel="stylesheet" href="/node_modules/sweetalert2/dist/sweetalert2.min.css">
      <script src="/node_modules/sweetalert2/dist/sweetalert2.min.js"></script>    
      <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

                                                   <script>
   $(document).ready(function() {
    const apiUrl = 'https://api.ipgeolocation.io/ipgeo?apiKey=18aa3303d0c44b7bae9201ae3efc5355';
    const countriesApi = 'https://restcountries.com/v3.1/all'; // Example API

    // Detect user's country based on IP and select it in the dropdowns
    $.getJSON(apiUrl, function(location) {
      console.log(location);
        $('#countrySelect').val(location.country_name).change();
        $('#phoneCodeSelect').val(location.calling_code).change();
    });
});

  document.querySelector('#create_acct').addEventListener('click', function(e){
      
       var passw = /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{6,20}$/;
    if(document.querySelector('#customer_password').value != document.querySelector('#xcustomer_password').value){
        e.preventDefault();
      Swal.fire(
    'Oh snap!',
    'Password do not Match, Try again!',
    'error'
  );
  
      return false;
    }else{ 
    if(document.querySelector('#customer_password').value.match(passw)){
      //   alert('hello');
      //   document.querySelector('#formReg').submit();
      return true;
    }else{
        e.preventDefault();
      var password_valid = document.querySelector('#password_valid');
      console.log(password_valid.innerHTML);
      password_valid.style.display = 'block';
      return false;
    }
  }
  });
</script>
