{% extends 'admin_layout_two.html' %}
{% load static %}
{% block content %}
<link rel="stylesheet" href="{% static 'build/css/intlTelInput.css' %}">
<title>Beni | Edit User</title>
<div class="content-body">


    <!-- row -->

    <div class="container-fluid">
        <div class="top-btn-back">
            <a href="/user-lisiting" class="btn btn-primary"> < Back </a>
        </div>
        <div class="row page-titles profile mx-0">
            <div class="col">
                <h2 class="fs-32 mb-0">Edit User</h2>
            </div>
          
        </div>
        <div class="row">
            <div class="col-lg-12 col-xl-12">
                <div class="card">
                    <div class="card-body pt-0">
                        <form method="POST" action='/edit-user/{{ user_obj.id }}' class="form-profile" id="edit-user" enctype="multipart/form-data">
                            {% csrf_token %} 
                            <div class="form-group pr-img">
                                <input type="file" class="form-control" name="avatar" onchange="loadfile(event)"/>
                                <div class="profile-icn">
                                    <img src="{% if user_obj.avatar %}{{ user_obj.avatar}}{% else %}{% static '/admin/images/place_holder.png' %}{% endif %}" id="profile-image">
                                    <div class="camera-icn">
                                        <i class="fa fa-camera"></i>
                                    </div>
                                </div>
                            </div>
                            <input type="hidden" name="user_id" id="user_id" value="{{user_obj.id}}" >
                            <div class="form-field-grp">
                                <div class="form-group">
                                    <label>Phone Number</label>
                                    <input id="jquery-intl-phone" name="jquery_intl_phone" type="tel" value="{% if user_obj.isd_code %}{{ user_obj.isd_code}} {{ user_obj.phone_number}}{% else %} +1 {% endif %}" style="padding-left: 75px;width: 116%;">

                                    <input type ="hidden" id="isd" name="isd_code" value="{% if user_obj.isd_code %}{{ user_obj.isd_code}}{% else %}+1{% endif %}">
                                    <input type ="hidden" id="phone_number" name="phone_number" value="{% if user_obj.phone_number %}{{ user_obj.phone_number }}{% else %}{% endif %}">    
                                </div>
                                <div class="form-group">
                                    <label>Email</label>
                                    <input type="text" name="email" placeholder="Andrick" value="{{ user_obj.email }}" maxlength="100"/>
                                </div>
                                <div class="form-group">
                                    <label>First Name</label>
                                    <input type="text" name="first_name" placeholder="Jane" value="{{ buyer_obj.first_name }}" maxlength="100"/>
                                </div>
                                <div class="form-group">
                                    <label>Last Name</label>
                                    <input type="text" name="last_name" placeholder="Vegas" value="{{ buyer_obj.last_name }}" maxlength="100"/>
                                </div>
                                <div class="form-group">
                                    <label>D.O.B</label>
                                    <input type="date" name="dob" placeholder="10-10-2002" value="{{ buyer_obj.dob }}"/>
                                </div>
                            </div>
                            <div class="d-flex align-items-center justify-content-center">
                                <button class="btn btn-primary" id="user-submit">Update</button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- #/ container -->
</div>
<script src="https://code.jquery.com/jquery-latest.min.js"></script>
<script src="{% static 'build/js/intlTelInput-jquery.min.js'%}"></script>
<script>
    $("#jquery-intl-phone").intlTelInput({
        initialCountry: "auto",
        separateDialCode:true,

    });

    $('.iti__country-list li').click(function(){
    $("#isd").val('+'+$(this).data('dial-code'));
    })

    $('#user-submit').click(function() {
        phone = $('#jquery-intl-phone').val();
        console.log(phone)
        $('#phone_number').val(phone)
    });
    function loadfile(event){
        var image = document.getElementById('profile-image');
        image.src = URL.createObjectURL(event.target.files[0]);
      };

</script>
{% endblock %}