{% extends 'templates/callluge/site_layout.html' %}
{% block content %}

<div class="widget-box no-minht">
    <div class="widget-content no-padding">
        <div class="col-md-6 col-sm-6">
                <div class="inner-table">
                    <div class="inner-bl-ti">
                        <h3>Top 5 Calls Attribution</h3>
                    </div>
                    <table class="cl-inn-table" width="100%" cellpadding="0" cellspacing="0">
                        <thead> 
                            <tr>
                                <th class="no-sort">Source</th>
                                <th class="no-sort">Total Calls</th>
                                <th class="no-sort">Unique Calls</th>
                                <th class="no-sort">Duration</th>
                                <th class="no-sort">&nbsp;</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td><b>Google Organic &amp; Local</b></td>
                                <td>6,387</td>
                                <td>4,876</td>
                                <td>10,870<span>m</span> 30<span>s</span></td>
                                <td>G</td>
                            </tr> 
                            <tr>
                                <td><b>Google Organic</b></td>
                                <td>6,373</td>
                                <td>4,353</td>
                                <td>9,570<span>m</span> 20<span>s</span></td>
                                <td>G</td>
                            </tr> 
                            <tr>
                                <td><b>Google Paid</b></td>
                                <td>3,387</td>
                                <td>4,831</td>
                                <td>5,870<span>m</span> 10<span>s</span></td>
                                <td>G</td>
                            </tr> 
                            <tr>
                                <td><b>Google Search</b></td>
                                <td>6,387</td>
                                <td>4,876</td>
                                <td>10,870<span>m</span> 30<span>s</span></td>
                                <td>G</td>
                            </tr> 
                            <tr>
                                <td><b>Google.ca</b></td>
                                <td>2,327</td>
                                <td>1,526</td>
                                <td>7,870<span>m</span> 55<span>s</span></td>
                                <td><i class="icon-signal"></i></td>
                            </tr> 
                        </tbody>
                    </table>
                </div>
        </div>
        <div class="col-md-6 col-sm-6">
            <div id="calls-attribution" style="min-width: 310px; max-width: 800px; height: 400px; margin: 0 auto"></div>
        </div>
    </div>
</div>

<div class="widget-box search-pos-pad">
    <div class="widget-content no-padding">
        <table id="data-table" class="cl-table" width="100%" cellpadding="0" cellspacing="0">
            <thead> 
                <tr>
                    <th class="no-sort">#</th>
                    <th class="no-sort">Caller No</th>
                    <th>Status</th>
                    <th>From State</th>
                    <th>To State</th>
                    <th>Called To</th>
                    <th>Date </th>
                    <th>Duration</th>
                    <th class="no-sort">Action</th> 
                </tr>
            </thead>
            <!-- <tbody>
                {% for calls in call %}
                <tr>
                    <td>{{forloop.counter}}</td>
                    <td>{{calls.From}}</td>
                    <td>{{calls.CallStatus}}</td>
                    <td>{{calls.FromState}}</td> 
                    <td>{{calls.ToState}}s</td>
                    <td>{{calls.To}}</td>
                    <td>{{calls.date}}</td>
                    <td>{{calls.RecordingDuration}}</td>
                    <td>
                        <div class="action">
                            <a tooltip="Edit" flow="left" href="/campaigns/editcampaign/{{campaign.pid}}"><i class="icon-edit"></i></a>
                        </div>
                    </td>
                </tr>
                {% endfor %}  
            </tbody> -->
        </table>
    </div>  
</div>

<script type="text/javascript">

$(document).ready(function() {
  $('#data-table').DataTable({
    "bProcessing": true,
    "bServerSide": true,
    "bPaginate": true,
    //"bLengthChange": true,
    "iDisplayLength": 10,
    "sServerMethod": "POST",
    // "sPaginationType": "full_numbers",
    "sAjaxSource": "/calls/client-recent-calls-datatable/",
    "fnServerParams": function ( aoData ) {
      aoData.push( { "name": "csrfmiddlewaretoken", "value": "{{ csrf_token }}" } );
    },
    "aoColumnDefs": [
              { "bSortable": false, "aTargets": [ 0, 8 ] }
            ],
    "aoColumns": [
      { mData: 'Num' } ,
      { mData: 'From' } ,
      { mData: 'CallStatus' },
      { mData: 'FromState' },
      { mData: 'ToState' },
      { mData: 'To' },
      { mData: 'date' },
      { mData: 'RecordingDuration'},
      { mData: null,
                "mRender": function ( data ) {
        return '<div class="action"><a tooltip="Edit" href="/campaigns/editcampaign/{{campaign.pid}}"><i class="icon-edit"></i></a></div>';
      } }
    ],
    language: { 
            search: "",
            searchPlaceholder: "Search by Agency Name",
            "processing": "<img src='../../static_/images/testinggif.gif'/>", 
            "zeroRecords": "No records found!",
            "info": "Showing _START_ to _END_ of total _TOTAL_ record(s)",
            "infoEmpty": "No records available!",
            paginate: {
                next: '&nbsp;', // space or ' '
                previous: '&nbsp;' // space or ' ' 
            }
        },
  });  
});

    var categories = {{categories|safe}}

    Highcharts.chart('calls-attribution', {
        chart: {
            type: 'bar'
        },
        title: {
            text: 'Call Counts By Campaign'
        },
        subtitle: {
            text: 'Source: <a href="https://en.wikipedia.org/wiki/World_population">Wikipedia.org</a>'
        },
        xAxis: {
            categories: categories,
            title: {
                text: null
            }
        },
        yAxis: {
            min: 0,
            title: {
                text: 'Population (millions)',
                align: 'high'
            },
            labels: {
                overflow: 'justify'
            }
        },
        tooltip: {
            valueSuffix: ' millions'
        },
        plotOptions: {
            bar: {
                dataLabels: {
                    enabled: true
                }
            }
        },
        legend: {
            layout: 'vertical',
            align: 'right',
            verticalAlign: 'top',
            x: -40,
            y: 80,
            floating: true,
            borderWidth: 1,
            backgroundColor: ((Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'),
            shadow: true
        },
        credits: {
            enabled: false
        },
        exporting: {        
                enabled: false,
        },
        series: [
        {
            name: 'Calls',
            data: {{call_counts}}
        }]
    });
</script>

{% endblock%}