{% extends 'admin_layout_two.html' %}
{% load static %}
{% block content %}
{% comment %} <link rel="stylesheet" href="{% static 'build/css/intlTelInput.css' %}"> {% endcomment %}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.8/css/intlTelInput.min.css"
crossorigin="anonymous" />
<div class="content-body">


    <!-- row -->
 <title>Beni | Contact Management</title>
    <div class="container-fluid">
        <div class="row page-titles mx-0">
            <div class="col">
                <h2 class="fs-32 mb-0">Contact Management</h2>
            </div>
            <!-- <div class="col pl-0">
                <ol class="breadcrumb">
                    <li class="breadcrumb-item"><a href="javascript:void(0)">Account Settings</a></li>
                    <li class="breadcrumb-item active"><a href="javascript:void(0)">Contact management</a></li>
                </ol>
            </div> -->
        </div>
        <div class="row mt-4">
            <div class="col-lg-12 col-xl-12">
                <div class="card">
                    <div class="card-body">
                        <form method="POST" action='/contact-management' class="form-profile" id="contact-management" enctype="multipart/form-data">
                            {% csrf_token %} 
                            <div class="form-field-grp">
                                <div class="form-group">
                                    <label>Phone Number</label>
                                    <input id="jquery-intl-phone" name="intel_phone_number" class="form-control" type="tel" value="{% if user_obj.phone_number %}{{ user_obj.phone_number }}{% else %}{% endif %}" >
                                    <input type="hidden" name="phone_number" id="phone_number" value="{% if user_obj.phone_number %}{{ user_obj.phone_number }}{% else %}{% endif %}">

                                </div>
                                <div class="form-group">
                                    <label>Whatsapp Number</label>
                                    <input id="jquery-intl-phone_whatsapp" name="intel_whatsapp_number" class="form-control" type="tel" value="{% if user_obj.whatsapp_number %}{{ user_obj.whatsapp_number }}{% else %}{% endif %}" >
                                    <input type="hidden" name="whatsapp_number" id="whatsapp_number" value="{% if user_obj.whatsapp_number %}{{ user_obj.whatsapp_number }}{% else %}{% endif %}">

                                </div>
                                <div class="form-group">
                                    <label>Email</label>
                                    <input type="text" name="email" placeholder="abc@gmail.com" value="{{user_obj.email}}"/>
                                </div>
                                <div class="form-group">
                                    <label>Instagram</label>
                                    <input type="text" name="instagram_url" placeholder="instagram/welcome" value="{{user_obj.instagram_url}}"/>
                                </div>
                                <div class="form-group">
                                    <label>Twitter</label>
                                    <input type="text" name="twitter_url" placeholder="twitter/welcome" value="{{user_obj.twitter_url}}"/>
                                </div>
                                <div class="form-group">
                                    <label>Youtube</label>
                                    <input type="text" name="youtube_url" placeholder="youtube/welcome" value="{{user_obj.youtube_url}}"/>
                                </div>
                                <div class="form-group">
                                    <label>Facebook</label>
                                    <input type="text" name="facebook_url" placeholder="facebook/welcome" value="{{user_obj.facebook_url}}"/>
                                </div>
                                <div class="form-group">
                                    <label>Contact Description English</label>
                                    <input type="text" name="contact_description" placeholder="test" value="{{user_obj.contact_description}}"/>
                                </div>
                                <div class="form-group">
                                    <label>Contact Description Arabic</label>
                                    <input type="text" name="contact_description_ar" placeholder="test" value="{{user_obj.contact_description_ar}}"/>
                                </div>
                                <div class="form-group">
                                    <label>Address</label>
                                    <input type="text" name="address" placeholder="address" value="{{user_obj.address}}"/>
                                </div>
                            </div>
                            <div class="d-flex align-items-center justify-content-center">
                                <button form="contact-management" class="btn btn-primary">Submit</button>
                            </div>
                        </form>
                    </div>
                </div>


            </div>
        </div>
    </div>
</div>
<!-- #/ container -->
</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,
       autoFormat: false,
       customPlaceholder: function (
           selectedCountryPlaceholder,
           selectedCountryData
       ) {
           return "e.g. " + selectedCountryPlaceholder;
       },
   });
   var inputtwo = document.querySelector("#jquery-intl-phone_whatsapp");
   window.intlTelInput(inputtwo, {
      separateDialCode: true,
      autoFormat: false,
      customPlaceholder: function (
          selectedCountryPlaceholder,
          selectedCountryData
      ) {
          return "e.g. " + selectedCountryPlaceholder;
      },
  });
   
$("form").submit(function() {
   var iti = window.intlTelInputGlobals.getInstance(input);
   var iti2 = window.intlTelInputGlobals.getInstance(inputtwo);
   console.log('iti',iti)
   var full_number = iti.getNumber();
   var whatsapp = iti2.getNumber();
   $('#phone_number').val(full_number)
   $('#whatsapp_number').val(whatsapp)
   });
</script>
{% endblock %}