{% extends 'store_layout.html' %}
{% load static %}
{% block content %}
<title>Beni | Store Login</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="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-5">
                            
                            <div class="loginlogo text-center">
                                <a class="text-center" href="/store-login"> 
                                    <img src="{% static 'store/images/beniLogo.png' %}">
                                </a>
                            </div>

                            <form class="mt-3 mb-3 login-input" action='/store-login' method="POST" id="store_login" enctype="multipart/form-data">
                                {% csrf_token %}
                                <h3 class="text-center">Store Login!</h3>
                                <div class="form-group">
                                    <label>Phone 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>
                                <div class="form-group">
                                    <label>Password</label>
                                    <input type="password" name="password" id="password" class="form-control password" placeholder="Password">
                                </div>
                                <button class="btn login-form__btn submit w-100"  form="store_login">Login</button>
                            </form>
                            <p class="mt-5 login-form__footer text-center"><a href="/store-forget-password" class="text-primary underline">Forgot Password?</a></p>
                        </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 %}