{% extends 'templates/callluge/reports_layout.html' %}
{% block content %}
              <div class="col-md-12 col-sm-12">
                        <div class="main-back">
                                <b>{{datagrid}}</b>
                                <div class="sorting-data">
                                    <h2><span>- Reports from</span> <span class="from-to">May 01, 2017 to May 31, 2017</span></h2>
                                </div>
                            <input type="hidden" id="currenturl" value="/{{request.resolver_match.app_name}}/{{request.resolver_match.url_name}}/">
                            {% if backlink.url == '' %}
                            {% else %}
                            <div class="willSlide btn-wrap pull-right" id="back-to-adm">
                                <a href="{{ backlink.url }}" class="button cancel hvr-sweep-to-right ripple pull-left no-margin" ><i class="icon-left"><span>Back to {{ backlink.text }} </span></i></a>
                            </div>
                            {% endif %}
                        </div>
                    </div>
                    <div class="col-md-12 col-sm-12">
<div class="row">
    <div id="graph"></div>
</div>
<div class="widget-box top-margin no-minht">
    <div class="widget-content no-padding">
        <div id="grid"></div>
    </div>
</div>
<div id="call_details"></div>
</div>
<script type="text/javascript">    
    function GetCallDetails(client_id,year,sid)
    {
        console.log(client_id);
        // $("#graph").html("<div class='col-md-12'><div class='cl_loader'><img src='../../static_/images/testinggif.gif'/></div></div>");
        $.post("/calls/get-single-client-data/",
            {
                client_id: client_id,
                year: year,
                sid: sid,
                csrfmiddlewaretoken: '{{ csrf_token }}' 
            },
            function(result){

                // $("#data-table #tr_"+client_id).addClass('active');
                $('#data-table tr#client_details').remove();
                $("#data-table #tr_"+client_id).after(result);
                $("#data-table #tr_"+client_id).find('.tab-acc-hove').addClass('opened');
                $('.ch-td-val').hide();
                $('.client-detail-inner .cl-table .ch-tr .ch-td-clk').addClass('collapsed');

                $("#data-table #tr_"+client_id).click(function(){
                    var elemSel = $(this).next('#client_details');
                    $(this).children('.tab-acc-hove').toggleClass('opened');
                    $(this).next('#client_details').toggle();
                        
                        if(elemSel.is(':visible')){
                           $(this).prev('.tab-acc-hove').removeClass('opened');
                        }
                       
                    });


                  // =============================
                  $('.client-detail-inner .cl-table .ch-tr .ch-td-clk').click(function() {
                        $(this).toggleClass('collapsed');
                      $(this).parent().nextAll('tr').each(function() {
                        if ($(this).is('.ch-tr')) {
                          return false; // next parent reached, stop
                        }
                        $(this).toggle();
                      });
                    });
                  // =============================


        }); 
    }

    function GetAgencyClientGraph(from_date,to_date,client_id)
    {
        $("#graph").html("<div class='col-md-12'><div class='cl_loader'><img src='../../static_/images/testinggif.gif'/></div></div>");
        $.post("/calls/get-agency-graph/",
            {
                csrfmiddlewaretoken: '{{ csrf_token }}',
                from_date: from_date,
                to_date: to_date,
                client_id: client_id 
            },
            function(result){
                $("#graph").html(result);
        }); 
    }
    
    function GetAgencyClientGrid(from_date,to_date,client_id)
    {
       $("#grid").html("<div class='col-md-12'><div class='cl_loader'><img src='../../static_/images/testinggif.gif'/></div></div>");
        $.post("/calls/get-agency-call-grid/",
            {
                csrfmiddlewaretoken: '{{ csrf_token }}',
                from_date: from_date,
                to_date: to_date,
                client_id: client_id  
            },
            function(result){
                $("#grid").html(result);
        }); 
    }
    
    function GetAgencyGraph(from_date,to_date)
    {
        $("#graph").html("<div class='col-md-12'><div class='cl_loader'><img src='../../static_/images/testinggif.gif'/></div></div>");
        $.post("/calls/get-agency-graph/",
            {
                csrfmiddlewaretoken: '{{ csrf_token }}',
                from_date: from_date,
                to_date: to_date 
            },
            function(result){
                $("#graph").html(result);
        }); 
    }
    
    function GetAgencyGrid(from_date,to_date)
    {   
        $("#grid").html("<div class='col-md-12'><div class='cl_loader'><img src='../../static_/images/testinggif.gif'/></div></div>");
        $.post("/calls/get-agency-call-grid/",
            {
                csrfmiddlewaretoken: '{{ csrf_token }}',
                from_date: from_date,
                to_date: to_date  
            },
            function(result){
                $("#grid").html(result);
        }); 
    }

    $(document).ready(function(){       
    
        $('.select-row').click(function(){
            $(".select-row-view").toggleClass("tb-vw");           
        });
    });
</script> 
{% endblock %}