{% extends 'templates/callluge/site_layout_call-detail.html' %}
{% block content %}
{% load staticfiles %}
<div class="widget-box bgf1f1f1 leadcenter-main no-minht">
        <div id="leadcentre-tab">
        <ul class="resp-tabs-list" id="recent_calls"></ul>
            <div class="resp-tabs-container cf" id="call_history"></div>    
            </div>

    

<!--     {% for calls in data %}
	<div style="border: 1px solid #ccc; border-radius: 4px;min-height: 25px" id="calls_{{forloop.counter}}" class="recent_calls" data-number="{{calls.From}}">
			{{calls.From}}
			{{calls.LatestCall}}	
		</div>
	{% endfor %} -->
<div class="overlay" style=" position: absolute;
    width: 100%;
    height: 100%;
    display:none;
    text-align:center;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0,0,0,.5);
    z-index: 2;
    cursor: pointer;" id="loader">
	<img style="top:35%;position:absolute;" src="{% static 'images/testinggif.gif' %}">
</div>	
<div id="call_details"></div>	
</div> 


<script type="text/javascript">

$( document ).ready(function() {
GetRecentCalls();
});

function GetCallHistory(number='') { 
  $(".overlay").show();
  $.ajax({
      type: "POST",
      url: "/calls/get-call-history/",
      data: {'csrfmiddlewaretoken': '{{ csrf_token }}','number':number},
      success: function(data) {
      	 $("#call_history").html(data);
      	 $(".overlay").hide();
      }
  });   

}

function GetRecentCalls() { 

  $.ajax({
      type: "POST",
      url: "/calls/get-recent-calls/",
      data: {'csrfmiddlewaretoken': '{{ csrf_token }}'},
      success: function(data) {
      	 $("#recent_calls").html(data);
      }
  });   

}	

</script>

{% endblock %}