{% 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">Sales Analytics</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="mb-4">
                            <h2>Welcome {{ request.user.first_name }}!</h2>                            
                            <small>Measure How Fast You’re Growing Monthly Recurring Revenue. </small>
                        </div>                        
                    </div>
                </div>
                <div class="row clearfix row-deck">
                    <div class="col-lg-4 col-md-6">
                        <div class="card">
                            <div class="card-status bg-teal"></div>
                            <div class="card-header">
                                <h3 class="card-title">My Balance</h3>
                                <div class="card-options">
                                    <a href="#" class="card-options-fullscreen" data-toggle="card-fullscreen"><i class="fe fe-maximize"></i></a>
                                    <a href="#" class="card-options-remove" data-toggle="card-remove"><i class="fe fe-x"></i></a>
                                    <div class="item-action dropdown ml-2">
                                        <a href="javascript:void(0)" data-toggle="dropdown"><i class="fe fe-more-vertical"></i></a>
                                        <div class="dropdown-menu dropdown-menu-right">
                                            <a href="javascript:void(0)" class="dropdown-item"><i class="dropdown-icon fa fa-eye"></i> View Details </a>
                                            <a href="javascript:void(0)" class="dropdown-item"><i class="dropdown-icon fa fa-share-alt"></i> Share </a>
                                            <a href="javascript:void(0)" class="dropdown-item"><i class="dropdown-icon fa fa-cloud-download"></i> Download</a>                                            
                                            <div class="dropdown-divider"></div>
                                            <a href="javascript:void(0)" class="dropdown-item"><i class="dropdown-icon fa fa-copy"></i> Copy to</a>
                                            <a href="javascript:void(0)" class="dropdown-item"><i class="dropdown-icon fa fa-folder"></i> Move to</a>
                                            <a href="javascript:void(0)" class="dropdown-item"><i class="dropdown-icon fa fa-edit"></i> Rename</a>
                                            <a href="javascript:void(0)" class="dropdown-item"><i class="dropdown-icon fa fa-trash"></i> Delete</a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="card-body">
                                <span>Balance</span>
                                <h4><span id="display">
                                <div class="spinner-border spinner-border-sm" role="status">
                                  <span class="sr-only">Loading...</span>
                                </div>
                                </span></h4>
                                <div id="apexspark1" class="mb-4"></div>
                                <div class="form-group">
                                    <label class="d-block">Today<span class="float-right" ><span  id="today">
                                    <div class="spinner-border spinner-border-sm" role="status">
                                    <span class="sr-only">Loading...</span>
                                </div>
                                    </span></span></label>
                                    <div class="progress progress-xs">
                                        <div class="progress-bar bg-azure" role="progressbar" aria-valuenow="77" aria-valuemin="0" aria-valuemax="100" style="width: 77%;"></div>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="d-block">Last 7 Days<span class="float-right"><span id="last_7days">
                                    <div class="spinner-border spinner-border-sm" role="status">
                                    <span class="sr-only">Loading...</span>
                                </div>
                                    </span></span></label>
                                    <div class="progress progress-xs">
                                        <div class="progress-bar bg-green" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" style="width: 50%;"></div>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="d-block">This Month<span class="float-right"><span  id="month">
                                    <div class="spinner-border spinner-border-sm" role="status">
                                  <span class="sr-only">Loading...</span>
                                </div>
                                    </span></span></label>
                                    <div class="progress progress-xs">
                                        <div class="progress-bar bg-blue" role="progressbar" aria-valuenow="23" aria-valuemin="0" aria-valuemax="100" style="width: 23%;"></div>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="d-block">Last Month<span class="float-right"><span  id="last_month">
                                    <div class="spinner-border spinner-border-sm" role="status">
                                  <span class="sr-only">Loading...</span>
                                </div>
                                    </span></span></label>
                                    <div class="progress progress-xs">
                                        <div class="progress-bar bg-blue" role="progressbar" aria-valuenow="23" aria-valuemin="0" aria-valuemax="100" style="width: 23%;"></div>
                                    </div>
                                </div>
                            </div>
                            <div class="card-footer">
                                <a href="{% url 'delete_all' %}" class="btn btn-block btn-danger btn-sm">Clear Stale Sessions</a>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-8 col-md-6">
                        <div class="card">
                            <div class="card-header">
                                <h3 class="card-title" id="myselect"></h3>
                                <div class="card-options">
                                    <label class="custom-switch m-0">
                                        <input type="checkbox" value="1" class="custom-switch-input" checked="">
                                        <span class="custom-switch-indicator"></span>
                                    </label>
                                </div>
                            </div>
                            <div class="card-body">
                           <div id="apex-basic-bar" style="height: 100%">
                            </div>
                            </div>
                            <div class="card-footer">
                                <div class="d-flex justify-content-between">
                                    <a href="javascript:void(0)" class="btn btn-info btn-sm w200">Generate Report</a>
                                                                    
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <script type="text/javascript">
            $(document).ready(function(){
            $.ajax({
            type:'GET',
            url : "{% url 'BillingPlans_All_list' %}",
            success: function(response){
                var length = response.data.length;
                var temp="<h3>"+length+" Packages"+"</h3>";
                 $("#myselect").append(temp);
               var data = [];
                var data2 = [];
                for (i = 0; i < length; i++)
                {
                data.push(response.data[i].plancost);
                data2.push(response.data[i].planname);
                ///var data2 = [[""+response.data[key].planname+"",response.data[key].plancost]];
            }
///////////////////////////////////////////////////////////////////

// Basic Bar
$(document).ready(function() {
    var options = {
        chart: {
            height: 350,
            type: 'bar',
            toolbar: {
                show: false,
            },
        },
        colors: ['#6435c9'],
        grid: {
            yaxis: {
                lines: {
                    show: false,
                }
            },
            padding: {
                top: 0,
                right: 0,
                bottom: 0,
                left: 0
            },
        },
        plotOptions: {
            bar: {
                horizontal: false,
            }
        },
        dataLabels: {
            enabled: false
        },
        series: [{
            data: data,
        }],
        xaxis: {
            categories: data2,
        }
    }

   var chart = new ApexCharts(
        document.querySelector("#apex-basic-bar"),
        options
    );
    
    chart.render();
});
////////////////////////////////////////apex-basic-bar////////////////////////////////////
            },

            error: function(response){
                }
        });

    });

        </script>
        <div class="section-body">
            <div class="container-fluid">
                <div class="row clearfix">
                    <div class="col-6 col-md-4 col-xl-2">
                        <div class="card">
                            <div class="card-body ribbon">
                                <div class="ribbon-box green" id='users'>
                                <div class="spinner-border spinner-border-sm" role="status">
                                  <span class="sr-only">Loading...</span>
                                </div>
                                </div>
                                <a href="{% url 'users' %}" class="my_sort_cut text-muted">
                                    <i class="icon-users"></i>
                                    <span>Customers</span>
                                </a>
                            </div>
                        </div>
                    </div>
                    <div class="col-6 col-md-4 col-xl-2">
                        <div class="card">
                            <div class="card-body ribbon">
                                <div class="ribbon-box orange " id="online">
                                <div class="spinner-border spinner-border-sm" role="status">
                                  <span class="sr-only">Loading...</span>
                                </div>

                                </div>
                                <a href="{% url 'online_users' %}" class="my_sort_cut text-muted">
                                    <i class="fa fa-rocket"></i>
                                    <span>Pppoe Active</span>
                                </a>
                            </div>
                        </div>
                    </div>
                    <div class="col-6 col-md-4 col-xl-2">
                        <div class="card">
                            <div class="card-body ribbon">
                                <div class="ribbon-box orange">{{hotspot}}</div>
                                <a href="{% url 'wifi_online' %}" class="my_sort_cut text-muted">
                                    <i class="fa fa-sitemap"></i>
                                    <span>Hotspot Active</span>
                                </a>
                            </div>
                        </div>
                    </div>
                    <div class="col-6 col-md-4 col-xl-2">
                        <div class="card">
                            <div class="card-body ribbon">
                                <div class="ribbon-box cyan ">{{new_users}} </div>
                                <a href="{% url 'users' %}" class="my_sort_cut text-muted">
                                    <i class="fa fa-signal"></i>
                                    <span>Added Today</span>
                                </a>
                            </div>
                        </div>
                    </div>
                    <div class="col-6 col-md-4 col-xl-2">
                        <div class="card">
                            <div class="card-body ribbon">
                                <div class="ribbon-box cyan ">{{paid_invoice}}</div>
                                <a href="{% url 'invoice' %}" class="my_sort_cut text-muted">
                                    <i class="fa fa-file"></i>
                                    <span>Paid Invoice</span>
                                </a>
                            </div>
                        </div>
                    </div>
                    <div class="col-6 col-md-4 col-xl-2">
                        <div class="card">
                            <div class="card-body ribbon">
                                <div class="ribbon-box orange">{{unpaid_invoice}}</div>
                                <a href="app-calendar.html" class="my_sort_cut text-muted">
                                    <i class="fa fa-money"></i>
                                    <span>Unpaid Invoice</span>
                                </a>
                            </div>
                        </div>
                    </div>                    
                </div>
            </div>
        </div>
        <div class="section-body">
            <div class="container-fluid">
                <div class="row clearfix row-deck">
                    <div class="col-lg-8 col-md-12">
                        <div class="card">
                            <div class="card-header">
                                <h3 class="card-title">Data Statistics</h3>
                                <div class="card-options">
                                    <form>
                                        <div class="input-group">
                                            <input type="text" class="form-control form-control-sm" placeholder="Search something..." name="s">
                                            <span class="input-group-btn ml-2"><button class="btn btn-sm btn-default" type="submit"><span class="fe fe-search"></span></button></span>
                                        </div>
                                    </form>
                                    <div class="item-action dropdown ml-2">
                                        <a href="#" class="card-options-fullscreen" data-toggle="card-fullscreen"><i class="fe fe-maximize"></i></a>
                                        <a href="javascript:void(0)" data-toggle="dropdown"><i class="fe fe-more-vertical"></i></a>
                                        <div class="dropdown-menu dropdown-menu-right">
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="card-body">
                                <div class="row clearfix">
                                    <div class="col-lg-4 col-md-6">
                                        <div class="card bg-none b-none">
                                            <div class="card-body p-2">
                                                <div class="card-value float-right">
                                                    <span class="statistics_chart">5,2,3,6,9,8,4,1,2,8</span>
                                                </div>
                                                <h3 class="mb-1">{{packets_up}}</h3>
                                                <div>Avg Download</div>
                                                <div class="mt-2">
                                                    <div class="progress progress-xs">
                                                        <div class="progress-bar bg-primary" style="width: 84%"></div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-lg-4 col-md-6">
                                        <div class="card bg-none b-none">
                                            <div class="card-body p-2">
                                                <div class="card-value float-right">
                                                    <span class="statistics_chart">5,2,3,6,9,8,4,1,2,8</span>
                                                </div>
                                                <h3 class="mb-1">{{packets_down}}</h3>
                                                <div>Avg Upload</div>
                                                <div class="mt-2">
                                                    <div class="progress progress-xs">
                                                        <div class="progress-bar bg-danger" style="width: 20%"></div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-lg-4 col-md-6">
                                        <div class="card bg-none b-none">
                                            <div class="card-body p-2">
                                               
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div id="flotChart" class="flot-chart"></div>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-4 col-md-6">
                        <div class="card">
                            <div class="card-header">
                                <h3 class="card-title">Sales Revenue</h3>
                                <div class="card-options">
                                    <a href="#" class="card-options-fullscreen" data-toggle="card-fullscreen"><i class="fe fe-maximize"></i></a>
                                    <a href="#" class="card-options-remove" data-toggle="card-remove"><i class="fe fe-x"></i></a>
                                    <div class="item-action dropdown ml-2">
                                        <a href="javascript:void(0)" data-toggle="dropdown"><i class="fe fe-more-vertical"></i></a>
                                        <div class="dropdown-menu dropdown-menu-right">
                                            <a href="javascript:void(0)" class="dropdown-item"><i class="dropdown-icon fa fa-eye"></i> View Details </a>
                                            <a href="javascript:void(0)" class="dropdown-item"><i class="dropdown-icon fa fa-share-alt"></i> Share </a>
                                            <a href="javascript:void(0)" class="dropdown-item"><i class="dropdown-icon fa fa-cloud-download"></i> Download</a>                                            
                                            <div class="dropdown-divider"></div>
                                            <a href="javascript:void(0)" class="dropdown-item"><i class="dropdown-icon fa fa-copy"></i> Copy to</a>
                                            <a href="javascript:void(0)" class="dropdown-item"><i class="dropdown-icon fa fa-folder"></i> Move to</a>
                                            <a href="javascript:void(0)" class="dropdown-item"><i class="dropdown-icon fa fa-edit"></i> Rename</a>
                                            <a href="javascript:void(0)" class="dropdown-item"><i class="dropdown-icon fa fa-trash"></i> Delete</a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="card-body text-center">
                                <div class="mt-4">
                                    <input type="text" class="knob" value="34" data-width="147" data-height="147" data-thickness="0.07" data-bgColor="#3f454a" data-fgColor="#395bb6">
                                </div>
                                <h3 class="mb-0 mt-3 font300" id="Revenue">
                                <div class="spinner-border spinner-border-sm" role="status">
                                  <span class="sr-only">Loading...</span>
                                </div>
                                </h3><span class="text-green font-15">+3.7%</span>
                                <small></small>
                                <div class="mt-4">
                                    <span class="chart_3">2,5,8,3,6,9,4,5,6,3</span>
                                </div>
                            </div>
                            <div class="card-footer">
                                <a href="javascript:void(0)" class="btn btn-block btn-success btn-sm">Send Report</a>
                            </div>
                        </div>
                    </div>
                </div>
               
                    
                
        <script>
            $(document).ready(function(){
            $.ajax({
            type:'GET',
            url : "{% url 'last_month' %}",
            success: function(response){
            $("#last_month").empty();
            var temp="<p>"+response.lastmonth+"</p>";
            $("#last_month").append(temp);
            },
            error: function(response){
            }
            });

            });

           $(document).ready(function(){

            $.ajax({
                type:'GET',
                url : "{% url 'sum_list' %}",
                success: function(response){
                    $("#display").empty();
                    var temp="<p>"+response.count_all+"</p>";
                $("#display").append(temp);

                },
                error: function(response){

                    }
        });

    });

       $(document).ready(function(){

            $.ajax({
                type:'GET',
                url : "{% url 'sum_list' %}",
                success: function(response){
                    $("#Revenue").empty();
                    var temp="<p>"+response.count_all+"</p>";
                $("#Revenue").append(temp);

                },
                error: function(response){

                    }
        });

    });    

    $(document).ready(function(){
        
            $.ajax({
                type:'GET',
                url : "{% url 'today_list' %}",
                success: function(response){
                    $("#today").empty();
                    var temp="<p>"+response.count_all+"</p>";
                $("#today").append(temp);

                },
                error: function(response){

                    }
        });

    }); 

     $(document).ready(function(){
        
            $.ajax({
                type:'GET',
                url : "{% url 'last_days' %}",
                success: function(response){
                    $("#last_7days").empty();
                    var temp="<p>"+response.last_7days+"</p>";
                $("#last_7days").append(temp);

                },
                error: function(response){

                    }
        });

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

            $.ajax({
                type:'GET',
                url : "{% url 'month_list' %}",
                success: function(response){
                    $("#month").empty();
                    var temp="<p>"+response.count_all+"</p>";
                $("#month").append(temp);

                },
                error: function(response){

                    }
        });

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

            $.ajax({
                type:'GET',
                url : "{% url 'userbillinfo_list' %}",
                success: function(response){
                    $("#users").empty();
                    var temp="<p>"+response.count_all+"</p>";
                $("#users").append(temp);

                },
                error: function(response){

                    }
        });

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

            $.ajax({
                type:'GET',
                url : "{% url 'json_list' %}",
                success: function(response){
                    $("#online").empty();
                    var temp="<p>"+response.count_all+"</p>";
                $("#online").append(temp);

                },
                error: function(response){

                    }
        });

    });      
</script>

{% include 'footer.html' %}
        {%endblock%}