{% extends 'admin_layout_two.html' %}
{% load static %}
{% block content %}
<link rel="stylesheet" href="{% static 'build/css/intlTelInput.css' %}">

<style>
.eye-icn {
    position: absolute;
    right: 15px;
    top: 40px;
}

.form-group .tel-code {
    width: 22%;
}
</style>
<title>Beni | Edit Sub Admin</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">Edit Sub Admin</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-sub-admin/{{user_obj.id}}' class="form-profile" id="edit-sub-admin" 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>Name</label>
                                    <input type="text" name="full_name" value="{{ user_obj.full_name}}" placeholder="Enter name"/>
                                </div>
                                <div class="form-group">
                                    <label>Email address</label>
                                    <input type="text" name="email" value="{{ user_obj.email}}" placeholder="Enter email" />
                                </div>
                                <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 %} +966 {% endif %}" style="padding-left: 75px;width: 116%;">

                                    <input type ="hidden" id="isd" name="isd_code" value="{{ user_obj.isd_code}}">
                                    <input type ="hidden" id="phone_number" name="phone_number" value="{{ user_obj.phone_number}}">    
                                </div>
                                <div class="form-group">
                                    <div class="store-select">
                                        <label class="form-label">Role</label>
                                        <select name="role_id" id="role_id">
                                            <option disabled="" selected="">Choose one role</option> 
                                            {% for index in roles_obj %}
                                            <option value="{{index.id}}" {% if user_obj.role == index.id %}selected{% endif %}>{{ index.role_name}}</option> 
                                            {% endfor %}
                                        </select>
                                    </div>
                                </div>
                            </div>

                            <div class="d-flex align-items-center justify-content-end">
                                <button class="btn btn-primary" id="add-sub-admin">Add</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'));
    })

    $('#add-sub-admin').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 %}