{% extends 'admin_layout_two.html' %}
{% load static %}
{% block content %}
<link rel="stylesheet" href="{% static 'build/css/intlTelInput.css' %}">
<title>Beni | Add 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">Add 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='/add-user' class="form-profile" id="add-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="{% static '/admin/images/place_holder.png' %}" id="profile-image" accept="image/*" >
                                    <div class="camera-icn">
                                        <i class="fa fa-camera"></i>
                                    </div>
                                </div>
                            </div>
                            <div class="form-field-grp">
                                <div class="form-group">
                                    <label>Phone Number</label>
                                    <input id="jquery-intl-phone" name="jquery_intl_phone" type="tel" >

                                    <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">
                                    <label>Email</label>
                                    <input type="text" name="email" placeholder="example@yopmail.com" value="" maxlength="100" />
                                </div>
                                <div class="form-group">
                                    <label>First Name</label>
                                    <input type="text" name="first_name" placeholder="Jane" value="" maxlength="100"/>
                                </div>
                                <div class="form-group">
                                    <label>Last Name</label>
                                    <input type="text" name="last_name" placeholder="Vegas" value="" maxlength="100"/>
                                </div>
                                <div class="form-group">
                                    <label>D.O.B</label>
                                    <input type="date" name="dob" class="dob" placeholder="10-10-2002" value=""/>
                                </div>
                            </div>
                            <div class="d-flex align-items-center justify-content-center">
                                <button class="btn btn-primary" id="user-submit">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="{% static 'build/js/intlTelInput-jquery.min.js'%}"></script>
<script>
    $("#jquery-intl-phone").intlTelInput({
    initialCountry: "sa",
    separateDialCode: true
    });

    $(function(){
        var dtToday = new Date();
        
        var month = dtToday.getMonth() + 1;
        var day = dtToday.getDate();
        var year = dtToday.getFullYear();
        if(month < 10)
            month = '0' + month.toString();
        if(day < 10)
            day = '0' + day.toString();
        
        var maxDate = year + '-' + month + '-' + day;
        $('.dob').attr('max', maxDate);
    });



    $('.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 %}