{% 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 | Add 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">Create 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='/add-sub-admin' class="form-profile" id="add-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" placeholder="Enter name" />
                                </div>
                                <div class="form-group">
                                    <label>Email address</label>
                                    <input type="text" name="email" placeholder="Enter email" />
                                </div>
                                <div class="form-group position-relative">
                                    <label>Password</label>
                                    <input type="password" name="password"  id="password" placeholder="Enter password" /> 
                                    <div class="eye-icn">
                                        <i class="fa fa-eye-slash" id="eye-one"></i>
                                    </div>
                                </div>
                                <div class="form-group position-relative">
                                    <label>Confirm password</label>
                                    <input type="password" name="confirm_password"  id="confirmPassword" placeholder="Enter confirm password" /> 
                                    <div class="eye-icn">
                                        <i class="fa fa-eye-slash" id="eye-two"></i>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label>Phone Number</label>
                                    <input id="jquery-intl-phone" name="jquery_intl_phone" type="tel" value="+966" style="padding-left: 75px;width: 116%;">

                                    <input type ="hidden" id="isd" name="isd_code" value="+966">
                                    <input type ="hidden" id="phone_number" name="phone_number" value="">    
                                </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}}">{{ 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: "sa",
        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]);
      };

      $(function(){
        $('#eye-one').click(function(){
              if($(this).hasClass('fa-eye-slash')){
                $(this).removeClass('fa-eye-slash');
                $(this).addClass('fa-eye');
                $('#password').attr('type','text');
              }else{
                $(this).removeClass('fa-eye');
                $(this).addClass('fa-eye-slash');  
                $('#password').attr('type','password');
              }
          });
      });
      $(function(){
        $('#eye-two').click(function(){
              if($(this).hasClass('fa-eye-slash')){
                $(this).removeClass('fa-eye-slash');
                $(this).addClass('fa-eye');
                $('#confirmPassword').attr('type','text');
              }else{
                $(this).removeClass('fa-eye');
                $(this).addClass('fa-eye-slash');  
                $('#confirmPassword').attr('type','password');
              }
          });
      });
</script>
{% endblock %}