{% extends 'store_layout.html' %}
{% load static %}
{% block content %}
<title>Beni | Forget Password</title>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.8/css/intlTelInput.min.css">

<div class="login-form-bg h-100">
    <div class="login-img-cnt">
       <img src="images/bglogin.png">
   </div>
   <div class="container h-100">
       <div class="row justify-content-center h-100">
           <div class="col-xl-6">
               <div class="form-input-content">
                   <div class="card login-form mb-0">
                       <div class="card-body pt-4">
                           <div class="loginlogo text-center">
                               <a class="text-center" href="/store-login"> 
                                   <img src="{% static 'store/images/beniLogo.png' %}">
                               </a>
                           </div>

                           <form class="mt-5 mb-3 login-input" action='/store-forget-password' id="store_forget_password" method="POST">
                            {% csrf_token %}   
                            <h3 class="text-center">Forgot Your Password?</h3>
                              <p class="text-center">Enter Your Mobile Number to Continue</p>
                               <div class="form-group">
                                   <label>Mobile Number</label>
                                   <input id="jquery-intl-phone" name="intel_phone_number" class="form-control phone_number" type="tel" value="" >
                                   <input type="hidden" name="phone_number" id="phone_number" value="">
                                   <input type="hidden" name="isd_code" id="isd_code" value="">
                              </div>
                               <button  form="store_forget_password" class="btn login-form__btn submit w-100">Get OTP</button>
                           </form>
                           <p class="mt-5 login-form__footer text-center"><a href="/store-login" class="text-primary underline">Back to Login</a></p>
                            
                           </div>
                       </div>
                   </div>
               </div>
           </div>
       </div>
   </div>
</div>

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.8/js/intlTelInput.min.js"
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.8/js/utils.js" crossorigin="anonymous"></script>

<script>
    var input = document.querySelector("#jquery-intl-phone");
    window.intlTelInput(input, {
       separateDialCode: true,
        initialCountry:"sa", 
       customPlaceholder: function (
           selectedCountryPlaceholder,
           selectedCountryData
       ) {
           return "e.g. " + selectedCountryPlaceholder;
       },
   });

$("form").submit(function() {
   var iti = window.intlTelInputGlobals.getInstance(input);
  
  var phone_number_without_plus_and_country_code = iti.getNumber().replace('+'+iti.getSelectedCountryData().dialCode,'')
   var full_number = iti.getNumber();
   var countryData = iti.getSelectedCountryData();

   $('#isd_code').val('+' + countryData['dialCode']) 
   $('#phone_number').val(phone_number_without_plus_and_country_code)
   });

</script>
{% endblock %}