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


    <!-- row -->

    <div class="container-fluid">
     
        <div class="row page-titles profile mx-0">
            <div class="col">
                <h2 class="fs-32 mb-0">Profile</h2>
            </div>
            
        </div>
        <div class="row admin-prof-rw">
            <div class="col-lg-12 col-xl-12">
                <div class="card">
                    <div class="card-body pt-0">
                        <form method="POST" action='/admin-profile' class="form-profile" id="admin-profile" 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>
                            <div class="form-field-grp">
                                <div class="form-group">
                                    <label>Full Name</label>
                                    <input type="text" name="full_name" placeholder="Jane" value="{% if user_obj.full_name %}{{user_obj.full_name}}{% else %}{% endif %}" />
                                </div>
                                <div class="form-group">
                                    <label>Email</label>
                                    <input type="text" name="email" placeholder="Andrick" value="{{user_obj.email}}" />
                                </div>
                                <div class="form-group">
                                    <label>Country Code</label>
                                    <input id="jquery-intl-phone" class="form-control" type="tel" value="{% if user_obj.isd_code %}{{ user_obj.isd_code }}{% else %}{% endif %}" >
                                    <input type="hidden" name="isd_code" id="isd_code" value="{% if user_obj.isd_code %}{{ user_obj.isd_code }}{% else %} +966 {% endif %}">
                                </div>
                                <div class="form-group">
                                    <label>Mobile Number</label>
                                    <input type="text" name="phone_number" placeholder="566777446" value="{{user_obj.phone_number}}"/>
                                </div>

                            </div>

                            <div class="d-flex align-items-center justify-content-center">
                                <button class="btn btn-primary">Save</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({
      separateDialCode: true,
      initialCountry: "sa",
    });
    $('.iti__country-list li').click(function(){
        $("#isd_code").val('+'+$(this).data('dial-code'));
      })
    function loadfile(event){
        var image = document.getElementById('profile-image');
        image.src = URL.createObjectURL(event.target.files[0]);
      };
</script>
{% endblock %}