{% include 'main-nav.html' %}
{% block content %}
{% load static %}
    <div id="page_top" class="section-body">
            <div class="container-fluid">
                <div class="page-header">
                    <div class="left">
                        <h1 class="page-title">Edit Profile
                        </h1>
                    </div>
                    <div class="right">
                        <div class="notification d-flex">
                            <button type="button" class="btn btn-facebook"><i class="fa fa-info-circle mr-2"></i>Need Help</button>
                            <button type="button" class="btn btn-facebook"><i class="fa fa-file-text mr-2"></i>Data export</button>
                            <a href="{% url 'logout' %}"button type="button" class="btn btn-facebook"><i class="fa fa-power-off mr-2"></i>Sign Out</button></a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="section-body">
            <div class="container-fluid">
                <div class="row clearfix">
                    <div class="col-lg-12">
                      <div class="tab-pane fade show active" id="list" role="tabpanel">
                        <div id="success"></div>
                <form id="edit_user1" method='Post'>{% csrf_token %}
                <div class="row">
                <div class="col-12">
                <div class="form-group">
                <div class="controls">
                <label for="account-username">FirstName</label>
                <input type="text" class="form-control" name="firstname" id="firstname" placeholder="Username" value="{{firstname2}}" required data-validation-required-message="This username field is required">
                </div>
                </div>
                </div>
                <div class="col-12">
                <div class="form-group">
                <div class="controls">
                <label for="account-name">LastName</label>
                <input type="text" class="form-control" name="lastname" id="lastname" placeholder="Name" value="{{lastname}}" required data-validation-required-message="This name field is required">
                </div>
                </div>
                </div>
                <div class="col-12">
                <div class="form-group">
                <div class="controls">
                <label for="account-e-mail">E-mail</label>
                <input type="email" class="form-control" name="email" id="email" placeholder="Email" value="{{email}}" required data-validation-required-message="This email field is required">
                </div>
                </div>
                </div>
                <div class="col-12">
                <div class="form-group">
                <label for="account-company">Company</label>
                <input type="text" class="form-control" name="company" id="company" placeholder="Company name" value="{{company}}" >
                </div>
                </div>
                <div class="col-12">
                <div class="form-group">
                <label for="account-company">Payments Info </label>
                <input type="text" class="form-control" name="department" id="department" placeholder="Your payments info" value="{{department}}" >
                </div>
                </div>
                <div class="col-12">
                <div class="form-group">
                <label for="account-company">Ip Address</label>
                <input type="text" class="form-control" name="ip" id="ip" placeholder="Ip address" value="{{address}}" >
                </div>
                </div>
                <div class="col-12">
                <div class="form-group">
                <label for="account-company">Phone Number </label>
                <input type="text" class="form-control" name="phone" id="phone" placeholder="Phone Number" value="{{phone}}" >
                </div>
                </div>
                <div class="col-12 d-flex flex-sm-row flex-column justify-content-end">
                <button id="product_id" type="submit" class="btn btn-primary mr-sm-1 mb-1 mb-sm-0">Edit
               </button>
                <button type="reset" class="btn btn-outline-warning">Cancel</button>
                </div>
                </div>
                </form>
            </div>
        </div>
    </div>    
</div>
<script>
$(document).on('submit', '#edit_user1',function(e){
    e.preventDefault();
    $.ajax({
        type:'POST',
        url:'{% url "edit_user" %}',
        beforeSend: function() { 
          $("#product_id").html('<option> editting...</option>');
          $("#product_id").prop('disabled', true); // disable button
        },
        data:{
            firstname:$('#firstname').val(),
            lastname:$('#lastname').val(),
            department:$('#department').val(),
            company:$('#company').val(),
            phone:$('#phone').val(),
            email:$('#email').val(),
            ip:$('#ip').val(),
            csrfmiddlewaretoken:$('input[name=csrfmiddlewaretoken]').val(),
            action: 'post'
        },
       success: function (data) {
       //swal("Good job!", "user added successfully", "success");
      var temp='<div class="alert alert-success" role="alert"><button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button><strong>Success!</strong> user added successfully! </div>';
      var btn='<i class="fa fa-plus"></i> Edit';
       $("#success").append(temp);
      $("#product_id").html('');
      $("#product_id").append(btn);
      $("#product_id").prop('disabled', false);
        window.location.href = "";
      }
       
    });
});
</script>
{% include 'footer.html' %}
{%endblock%}