{if $status eq '2'}
<h3 style="text-align:center">Usage Stats for this Billing Period</h3>

{if $remainingQ==0 or $remainingQ<=0}
<p style="text-align: center;font-weight: bold;">
    Total Allocated: {$assignedQuantity} (Incl. Rollover)<br/>
    Total Used: {$total} <br/>
    
</p>
<p style="text-align: center;font-weight: bold;color:red">You have consumed 100% of your total allocated data for this period.</p>
<p style="text-align: center;font-weight: normal;color:grey">To topup your account please select addons and view topup options.</p>

{elseif $remainingQ>=1 }

<p style="text-align: center;font-weight: bold;">
    Total Allocated: {$assignedQuantity} (Incl. Rollover)<br/>
    Total Used: {$total} (<span id="a"></span>%)<br/>
    Total Remaining: {$remaining} (<span id="b"></span>%)<br/>
</p>
{literal}
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load('current', {'packages':['corechart']});
      google.charts.setOnLoadCallback(drawChart);
      var total="{/literal}{$total}{literal}";
      var upload="{/literal}{$totalUp}{literal}";
      var download="{/literal}{$totalDown}{literal}";
      var remaining="{/literal}{$remaining}{literal}";
      var totalQ={/literal}{$totalQ}{literal};
      var uploadQ={/literal}{$totalUpQ}{literal};
      var downloadQ={/literal}{$totalDownQ}{literal};
      var remainingQ={/literal}{$remainingQ}{literal};
      var totalQuantity=totalQ+remainingQ;
      var usedPercentage=((totalQ/totalQuantity)*100).toFixed(1);
      var remainingPercentage=((remainingQ/totalQuantity)*100).toFixed(1);
      $("#a").text(usedPercentage);
      $("#b").text(remainingPercentage);
      function drawChart() {
        var data = google.visualization.arrayToDataTable([
          ['Task', 'Hours per Day'],
          ['Total Used: '+total+'' ,totalQ],
          ['Total Remaining: '+remaining+'' ,remainingQ]
        ]);

        var options = {
          title: '',
          tooltip: {trigger:'none'},
          slices: {0: {color: '#0094FF'}, 1:{color: '#006400'}, 2:{color: '#007F0E'}, 3: {color: 'red'}, 4:{color: 'grey'}}
        };

        var chart = new google.visualization.PieChart(document.getElementById('piechart'));

        chart.draw(data, options);
      }
    </script>
 {/literal}
    <div id="piechart" style="width:auto; height:auto"></div>
	{/if}

{elseif $status eq '1' }
<p style="text-align:left">
    <h3>Usage Stats for this Billing Period</h3>
    <strong>Account start Date:</strong> {$accountStartDate}<br>
    {if $total}
        <strong>Total Usage:</strong> {$total}<br>
    {else}
        <strong>Total Usage:</strong> 0 GB<br>
    {/if}
        
    {if $totalUp}
       <strong>Uploads:</strong> {$totalUp}<br> 
    {else}
        <strong>Uploads:</strong> 0 GB<br>
    {/if}
    
    {if $totalDown}
        <strong>Downloads:</strong> {$totalDown}<br>
    {else}
        <strong>Downloads:</strong> 0 GB<br>
    {/if}
</p>
{/if}

<!-- axxess client login modal -->
<div class="modal fade" id="axxessClientLogin"  role="dialog">
    <div class="modal-dialog">
        <!-- Modal content-->
       
        <div class="modal-content">
            <div class="modal-header" style="background-color: #1a4d80;color: white;">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title">Login into Axxess Control Panel</h4>
            </div>
             
            <div class="modal-body">
                {if $axxess_password and $axxess_username}
                    <center>
                        <p>Authenticating...</p>
                        <img src="../modules/servers/axxessReseller/images/loader.gif" alt="loader">
                    </center>
                    <div id="axxessScript" style="display:none;">
                        <script type="text/javascript">
                            //<![CDATA[
                            (function ()
                            {
                                document.write('<script type="text/javascript" src="' + 'https://www.youradsl.co.za/loginbox.php?' + (new Date().getTime()) + '"></' + 'script>');
                            })
                                    ();
                            //]]>
                        </script>
                    </div>
                    <script>
                    $(document).ready(function ()
                    {
                        if ($("#Usernamefield").length)
                        {
                            $("#Usernamefield").val("{$axxess_username}");
                        }
                        if ($("#Password").length)
                        {
                            $("#Password").val("{$axxess_password}");
                        }

                    });
                    </script>
                {else}
                    <form autocomplete='off' name='axxessClientLogin' action="https://www.youradsl.co.za/login.php" method="post" id="axxe_form" target="_blank">
                        <center>
                            <h3 style="color:red">Username or password is missing.</h3>
                            <div class="form-group">
                                <label for="Usernamefield" style="float:left">Enter Username </label>
                                <input type="text" id='Usernamefield' name='loginName' value="{$axxess_username}" autocomplete="off" placeholder="Enter Username" class="form-control" required>
                            </div>
                            <div class="form-group">
                                <label for="password" style="float:left">Enter Password </label>
                                <input type="password" id='Password' name='password' value="{$axxess_password}" autocomplete="off" placeholder="Enter Password" class="form-control" required>
                                 <input type="hidden" name="clientid" value="{$client_id}">
                            </div>
                             <button type="reset" class="btn btn-sm btn-default" value="reset">Reset</button>
                             <button type="submit" name="submitdetail" id="axxessdetail" value="Login" class="btn btn-sm btn-primary" data-loading-text="<i class='fa fa-spinner fa-spin'></i> Authenticating...">Login</button>
                         </center>
                    </form>
                    <script type="text/javascript" src="modules/addons/Axxess_Account_Manager/assets/js/validator.js"></script>
                    <script type="text/javascript">
                        $("#axxe_form").validator().on("submit", function (e)
                        {
                            if(e.isDefaultPrevented())
                            {
                            }
                            else
                            {
                                $("#axxessdetail").button('loading');
                                $("#axxessdetail").attr("disabled","true");
                                $.ajax(
                                    {
                                        type: "POST",
                                        url: "modules/servers/axxessReseller/calls/updateaxxessdetail.php",
                                        data: $("#axxe_form").serialize(),
                                        success: function(data)
                                        {
                                            $("#axxessClientLogin").modal("hide");

                                        }
                                    });
                                $("#axxessdetail").button('reset');
                                $("#axxessdetail").attr("disabled","false");
                            }
                            
                        });
                    </script>
                {/if}
            </div>
           <div class="modal-footer"></div>
            
        </div>
    </div>
</div>
<!----end modal---->