{if $modulecustombuttonresult}
    {if $modulecustombuttonresult == "success"}
        {include file="$template/includes/alert.tpl" type="success" msg=$LANG.moduleactionsuccess textcenter=true idname="alertModuleCustomButtonSuccess"}
    {else}
        {include file="$template/includes/alert.tpl" type="error" msg=$LANG.moduleactionfailed|cat:' ':$modulecustombuttonresult textcenter=true idname="alertModuleCustomButtonFailed"}
    {/if}
{/if}

{if $pendingcancellation}
    {include file="$template/includes/alert.tpl" type="error" msg=$LANG.cancellationrequestedexplanation textcenter=true idname="alertPendingCancellation"}
{/if}

<div class="tab-content margin-bottom">
    <div class="tab-pane fade in active" id="tabOverview">

        {if $tplOverviewTabOutput}
            {$tplOverviewTabOutput}
        {else}

            <div class="product-details clearfix">

                <div class="row">
                    <div class="col-md-6">

                        <div class="product-status product-status-{$rawstatus|strtolower}">
                            <div class="product-icon text-center">
                                <span class="fa-stack fa-lg">
                                    <i class="fa fa-circle fa-stack-2x"></i>
                                    <i class="fa fa-{if $type eq "hostingaccount" || $type == "reselleraccount"}hdd-o{elseif $type eq "server"}database{else}archive{/if} fa-stack-1x fa-inverse"></i>
                                </span>
                                <h3>{$product}</h3>
                                <h4>{$groupname}</h4>
                            </div>
                            <div class="product-status-text">
                                {$status}
                            </div>
                        </div>

                        {if $showcancelbutton || $packagesupgrade}
                            <div class="row">
                                {if $packagesupgrade}
                                    <div class="col-xs-{if $showcancelbutton}6{else}12{/if}">
                                        <a href="upgrade.php?type=package&amp;id={$id}" class="btn btn-block btn-success">{$LANG.upgrade}</a>
                                    </div>
                                {/if}
                                {if $showcancelbutton}
                                    <div class="col-xs-{if $packagesupgrade}6{else}12{/if}">
                                        <a href="clientarea.php?action=cancel&amp;id={$id}" class="btn btn-block btn-danger {if $pendingcancellation}disabled{/if}">{if $pendingcancellation}{$LANG.cancellationrequested}{else}{$LANG.clientareacancelrequestbutton}{/if}</a>
                                    </div>
                                {/if}
                            </div>
                        {/if}

                    </div>
                    <div class="col-md-6 text-center">

                        <h4>{$LANG.clientareahostingregdate}</h4>
                        {$regdate}

                        {if $firstpaymentamount neq $recurringamount}
                            <h4>{$LANG.firstpaymentamount}</h4>
                            {$firstpaymentamount}
                        {/if}

                        {if $billingcycle != $LANG.orderpaymenttermonetime && $billingcycle != $LANG.orderfree}
                            <h4>{$LANG.recurringamount}</h4>
                            {$recurringamount}
                        {/if}

                        <h4>{$LANG.orderbillingcycle}</h4>
                        {$billingcycle}

                        <h4>{$LANG.clientareahostingnextduedate}</h4>
                        {$nextduedate}

                        <h4>{$LANG.orderpaymentmethod}</h4>
                        {$paymentmethod}

                        {if $suspendreason}
                            <h4>{$LANG.suspendreason}</h4>
                            {$suspendreason}
                        {/if}

                    </div>
                </div>

            </div>

            {foreach $hookOutput as $output}
                <div>
                    {$output}
                </div>
            {/foreach}

            {if $domain || $moduleclientarea || $configurableoptions || $customfields || $lastupdate}
                <div class="row clearfix">
                    <div class="col-xs-12">
                        <ul class="nav nav-tabs nav-tabs-overflow">
                            {if $domain}
                                <li class="active">
                                    <a href="#domain" data-toggle="tab"><i class="fa fa-globe fa-fw"></i> {if $type eq "server"}{$LANG.sslserverinfo}{elseif ($type eq "hostingaccount" || $type eq "reselleraccount") && $serverdata}{$LANG.hostingInfo}{else}{$LANG.clientareahostingdomain}{/if}</a>
                                </li>
                            {elseif $moduleclientarea}
                                <li class="active">
                                    <a href="#manage" data-toggle="tab"><i class="fa fa-globe fa-fw"></i> {$LANG.manage}</a>
                                </li>
                            {/if}
                            {if $configurableoptions}
                                <li{if !$domain && !$moduleclientarea} class="active"{/if}>
                                    <a href="#configoptions" data-toggle="tab"><i class="fa fa-cubes fa-fw"></i> {$LANG.orderconfigpackage}</a>
                                </li>
                            {/if}
                            {if $customfields}
                                <li{if !$domain && !$moduleclientarea && !$configurableoptions} class="active"{/if}>
                                    <a href="#additionalinfo" data-toggle="tab"><i class="fa fa-info fa-fw"></i> {$LANG.additionalInfo}</a>
                                </li>
                            {/if}
                            {if $lastupdate}
                                <li{if !$domain && !$moduleclientarea && !$configurableoptions && !$customfields} class="active"{/if}>
                                    <a href="#resourceusage" data-toggle="tab"><i class="fa fa-inbox fa-fw"></i> {$LANG.resourceUsage}</a>
                                </li>
                            {/if}
                        </ul>
                    </div>
                </div>
                <div class="tab-content product-details-tab-container">
                    {if $domain}
                        <div class="tab-pane fade in active text-center" id="domain">
                            {if $type eq "server"}
                                <div class="row">
                                    <div class="col-sm-5 text-right">
                                        <strong>{$LANG.serverhostname}</strong>
                                    </div>
                                    <div class="col-sm-7 text-left">
                                        {$domain}
                                    </div>
                                </div>
                                {if $dedicatedip}
                                    <div class="row">
                                        <div class="col-sm-5 text-right">
                                            <strong>{$LANG.primaryIP}</strong>
                                        </div>
                                        <div class="col-sm-7 text-left">
                                            {$dedicatedip}
                                        </div>
                                    </div>
                                {/if}
                                {if $assignedips}
                                    <div class="row">
                                        <div class="col-sm-5 text-right">
                                            <strong>{$LANG.assignedIPs}</strong>
                                        </div>
                                        <div class="col-sm-7 text-left">
                                            {$assignedips|nl2br}
                                        </div>
                                    </div>
                                {/if}
                                {if $ns1 || $ns2}
                                    <div class="row">
                                        <div class="col-sm-5 text-right">
                                            <strong>{$LANG.domainnameservers}</strong>
                                        </div>
                                        <div class="col-sm-7 text-left">
                                            {$ns1}<br />{$ns2}
                                        </div>
                                    </div>
                                {/if}
                            {elseif ($type eq "hostingaccount" || $type eq "reselleraccount") && $serverdata}
                                {if $domain}
                                    <div class="row">
                                        <div class="col-sm-5 text-right">
                                            <strong>{$LANG.orderdomain}</strong>
                                        </div>
                                        <div class="col-sm-7 text-left">
                                            {$domain}&nbsp;<a href="http://{$domain}" target="_blank" class="btn btn-default btn-xs" >{$LANG.visitwebsite}</a>
                                        </div>
                                    </div>
                                {/if}
                                {if $username}
                                    <div class="row">
                                        <div class="col-sm-5 text-right">
                                            <strong>{$LANG.serverusername}</strong>
                                        </div>
                                        <div class="col-sm-7 text-left">
                                            {$username}
                                        </div>
                                    </div>
                                {/if}
                                <div class="row">
                                    <div class="col-sm-5 text-right">
                                        <strong>{$LANG.servername}</strong>
                                    </div>
                                    <div class="col-sm-7 text-left">
                                        {$serverdata.hostname}
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-sm-5 text-right">
                                        <strong>{$LANG.domainregisternsip}</strong>
                                    </div>
                                    <div class="col-sm-7 text-left">
                                        {$serverdata.ipaddress}
                                    </div>
                                </div>
                                {if $serverdata.nameserver1 || $serverdata.nameserver2 || $serverdata.nameserver3 || $serverdata.nameserver4 || $serverdata.nameserver5}
                                    <div class="row">
                                        <div class="col-sm-5 text-right">
                                            <strong>{$LANG.domainnameservers}</strong>
                                        </div>
                                        <div class="col-sm-7 text-left">
                                            {if $serverdata.nameserver1}{$serverdata.nameserver1} ({$serverdata.nameserver1ip})<br />{/if}
                                            {if $serverdata.nameserver2}{$serverdata.nameserver2} ({$serverdata.nameserver2ip})<br />{/if}
                                            {if $serverdata.nameserver3}{$serverdata.nameserver3} ({$serverdata.nameserver3ip})<br />{/if}
                                            {if $serverdata.nameserver4}{$serverdata.nameserver4} ({$serverdata.nameserver4ip})<br />{/if}
                                            {if $serverdata.nameserver5}{$serverdata.nameserver5} ({$serverdata.nameserver5ip})<br />{/if}
                                        </div>
                                    </div>
                                {/if}
                            {else}
                                <p>
                                    {$domain}
                                </p>
                                <p>
                                    <a href="http://{$domain}" class="btn btn-default" target="_blank">{$LANG.visitwebsite}</a>
                                    {if $domainId}
                                        <a href="clientarea.php?action=domaindetails&id={$domainId}" class="btn btn-default" target="_blank">{$LANG.managedomain}</a>
                                    {/if}
                                    <input type="button" onclick="popupWindow('whois.php?domain={$domain}', 'whois', 650, 420);
                                            return false;" value="{$LANG.whoisinfo}" class="btn btn-default" />
                                </p>
                            {/if}
                            {if $moduleclientarea}
                                <div class="text-center module-client-area">
                                    {$moduleclientarea}
                                </div>
                            {/if}
                        </div>
                    {elseif $moduleclientarea}
                        <div class="tab-pane fade{if !$domain} in active{/if} text-center" id="manage">
                            {if $moduleclientarea}
                                <div class="text-center module-client-area">
                                    {$moduleclientarea}
                                </div>
                            {/if}
                        </div>
                    {/if}
                    {if $configurableoptions}
                        <div class="tab-pane fade{if !$domain && !$moduleclientarea} in active{/if} text-center" id="configoptions">
                            {foreach from=$configurableoptions item=configoption}
                                <div class="row">
                                    <div class="col-sm-5">
                                        <strong>{$configoption.optionname}</strong>
                                    </div>
                                    <div class="col-sm-7 text-left">
                        {if $configoption.optiontype eq 3}{if $configoption.selectedqty}{$LANG.yes}{else}{$LANG.no}{/if}{elseif $configoption.optiontype eq 4}{$configoption.selectedqty} x {$configoption.selectedoption}{else}{$configoption.selectedoption}{/if}
                    </div>
                </div>
            {/foreach}
        </div>
    {/if}
    {if $customfields}
        <div class="tab-pane fade{if !$domain && !$moduleclientarea && !$configurableoptions} in active{/if} text-center" id="additionalinfo">
            {foreach from=$customfields item=field}
                <div class="row">
                    <div class="col-sm-5">
                        <strong>{$field.name}</strong>
                    </div>
                    <div class="col-sm-7 text-left">
                        {$field.value}
                    </div>
                </div>
            {/foreach}
        </div>
    {/if}
    {if $lastupdate}
        <div class="tab-pane fade text-center" id="resourceusage">
            <div class="col-sm-10 col-sm-offset-1">
                <div class="col-sm-6">
                    <h4>{$LANG.diskSpace}</h4>
                    <input type="text" value="{$diskpercent|substr:0:-1}" class="dial-usage" data-width="100" data-height="100" data-min="0" data-readOnly="true" />
                    <p>{$diskusage}MB / {$disklimit}MB</p>
                </div>
                <div class="col-sm-6">
                    <h4>{$LANG.bandwidth}</h4>
                    <input type="text" value="{$bwpercent|substr:0:-1}" class="dial-usage" data-width="100" data-height="100" data-min="0" data-readOnly="true" />
                    <p>{$bwusage}MB / {$bwlimit}MB</p>
                </div>
            </div>
            <div class="clearfix">
            </div>
            <p class="text-muted">{$LANG.clientarealastupdated}: {$lastupdate}</p>

            <script src="{$BASE_PATH_JS}/jquery.knob.js"></script>
            <script type="text/javascript">
                                        jQuery(function () {ldelim}
                                                jQuery(".dial-usage").knob({ldelim}'format': function (v) {ldelim}
                                                                alert(v);
                {rdelim}{rdelim});
                {rdelim});</script>
        </div>
    {/if}
</div>
{/if}
<script src="{$BASE_PATH_JS}/bootstrap-tabdrop.js"></script>
<script type="text/javascript">
                    jQuery('.nav-tabs-overflow').tabdrop();</script>

{/if}

</div>
<div class="tab-pane fade in" id="tabDownloads">

    <h3>{$LANG.downloadstitle}</h3>

    {include file="$template/includes/alert.tpl" type="info" msg="{lang key="clientAreaProductDownloadsAvailable"}" textcenter=true}

    <div class="row">
        {foreach from=$downloads item=download}
            <div class="col-xs-10 col-xs-offset-1">
                <h4>{$download.title}</h4>
                <p>
                    {$download.description}
                </p>
                <p>
                    <a href="{$download.link}" class="btn btn-default"><i class="fa fa-download"></i> {$LANG.downloadname}</a>
                </p>
            </div>
        {/foreach}
    </div>

</div>
<div class="tab-pane fade in" id="tabAddons">

    <h3>{$LANG.clientareahostingaddons}</h3>

    {if $addonsavailable}
        {include file="$template/includes/alert.tpl" type="info" msg="{lang key="clientAreaProductAddonsAvailable"}" textcenter=true}
    {/if}

    <div class="row">
        {foreach from=$addons item=addon}
            <div class="col-xs-10 col-xs-offset-1">
                <h4>{$addon.name}</h4>
                <p>
                    {$addon.pricing}
                </p>
                <p>
                    {$LANG.registered}: {$addon.regdate}
                </p>
                <p>
                    {$LANG.clientareahostingnextduedate}: {$addon.nextduedate}
                </p>
                <p>
                    <span class="label status-{$addon.rawstatus|strtolower}">{$addon.status}</span>
                </p>
            </div>
        {/foreach}
    </div>

</div>
<div class="tab-pane fade in" id="tabChangepw">

    <h3>{$LANG.serverchangepassword}</h3>

    {if $modulechangepwresult}
        {if $modulechangepwresult == "success"}
            {include file="$template/includes/alert.tpl" type="success" msg=$modulechangepasswordmessage textcenter=true}
        {elseif $modulechangepwresult == "error"}
            {include file="$template/includes/alert.tpl" type="error" msg=$modulechangepasswordmessage|strip_tags textcenter=true}
        {/if}
    {/if}

    <form class="form-horizontal using-password-strength" method="post" action="{$smarty.server.PHP_SELF}?action=productdetails#tabChangepw" role="form">
        <input type="hidden" name="id" value="{$id}" />
        <input type="hidden" name="modulechangepassword" value="true" />

        <div id="newPassword1" class="form-group has-feedback">
            <label for="inputNewPassword1" class="col-sm-5 control-label">{$LANG.newpassword}</label>
            <div class="col-sm-6">
                <input type="password" class="form-control" id="inputNewPassword1" name="newpw" autocomplete="off" />
                <span class="form-control-feedback glyphicon"></span>
                {include file="$template/includes/pwstrength.tpl"}
            </div>
        </div>
        <div id="newPassword2" class="form-group has-feedback">
            <label for="inputNewPassword2" class="col-sm-5 control-label">{$LANG.confirmnewpassword}</label>
            <div class="col-sm-6">
                <input type="password" class="form-control" id="inputNewPassword2" name="confirmpw" autocomplete="off" />
                <span class="form-control-feedback glyphicon"></span>
                <div id="inputNewPassword2Msg">
                </div>
            </div>
        </div>
        <div class="form-group">
            <div class="col-sm-offset-6 col-sm-6">
                <input class="btn btn-primary" type="submit" value="{$LANG.clientareasavechanges}" />
                <input class="btn" type="reset" value="{$LANG.cancel}" />
            </div>
        </div>

    </form>

</div>
</div>

{*Custom code for line services*}

<!-- Modal -->
<div id="myModal" class="modal fade" role="dialog">
    <div class="modal-dialog">
        <!-- Modal content-->
        <div class="modal-content" style="background: #f7f7f7;">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <img src="../modules/servers/axxessReseller/images/profile_linefix_update.png" style="float:left;" height="46" width="46">
                <div style="float:left;font-size:28px;margin-left:10px;line-height:18px;" class="bold">Check My Line 
                    <span style="font-size:15px;">({$token_line_no})</span><br>
                    <span style="font-size:13px;font-weight:normal;">Take control of your DSL Line and get optimal speeds by performing a port recreate.</span>
                </div>
                <div style="clear:left;"></div>
            </div>
            <div class="modal-body">
                <div style="text-align:center">
                    <input id="button_checkline" value="Check Line Status" class="btn btn-primary" style="width:220px;margin-top:10px;margin-right:30px;height:auto;font-size:22px;" onclick="checkLineStatus();" type="button"> 
                    <input id="button_fixline" value="Fix My Line" class="btn btn-primary" style="width:220px;margin-top:10px;height:auto;font-size:22px;" onclick="fixLine();" type="button">
                    <!--<input id="button_linefault" value="Report Line Fault" class="btn btn-primary" style="width:220px;margin-top:10px;height:auto;font-size:22px;" onclick="linefault();" type="button">-->
                    <div id="mainstatus" style="margin-top:30px;"></div>
                    <div id="dyk" style="clear:left;margin-left:108px;margin-top:10px;font-size:13px;"></div>
                </div>
                <div id="line_results"></div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
        </div>

    </div>
</div>

<!-- 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---->
<!------javascript--->
<script>
    function checkLineStatus()
    {
        $("#line_results").html('');
        $("#mainstatus").html('<img src="../modules/servers/axxessReseller/images/loader.gif" border="0" alt="" style="float:left;margin-left:120px;margin-right:10px;width:36px;height:36px;" /><div style="font-size:24px;float:left;width:320px;text-align:left;line-height:22px;">Checking your Line Status<br><span style="font-size:14px;">Please be patient. This could take a few minutes.</span></div>');
        buttonDisable('button_checkline');
        buttonDisable('button_fixline');
        buttonDisable('button_linefault');
        var url = "modules/servers/axxessReseller/calls/portfunc.php";
        if (typeof (checkLineAjax) == "object")
        {
            checkLineAjax.abort();
        }

        checkLineAjax = $.ajax({
            type: "POST",
            url: url,
            data: {
                'query': 'checkLineStatus',
                'token_line_no': "{$token_line_no}",
                "product_id": "{$product_id}",
                "guidServiceId": "{$guidServiceId}"
            },
            cache: false,
            dataType: "json",
            timeout: 120000, // 2 minutes
            error: function (request, error, errorThrown)
            {

                /*
                 if (error == "timeout") {
                 //alert('timeout');	
                 } else {
                 //alert(errorThrown);	
                 }
                 */
                buttonEnable('button_checkline');
                buttonEnable('button_fixline');
                buttonEnable('button_linefault');
                $("#mainstatus").html(error);
            },
            success: function (response)
            {
                buttonEnable('button_checkline');
                buttonEnable('button_fixline');
                buttonEnable('button_linefault');
                console.log(response);
                $("#mainstatus").html('');
                var adviseFix = false;
                if (response.data != "")
                {
                    var down_speed, down_att, down_snr, up_speed, up_att, up_snr;
                    var down_speed_advise, down_att_advise, down_snr_advise, up_speed_advise, up_att_advise, up_snr_advise;
                    $.each(response.data, function (i, v)
                    {
                        //console.log(i+": "+v);
                        if (i == "ATUC Current Rate" && v != "")
                        {
                            down_speed = v;
                        }
                        else if (i == "ATUC Attenuation" && v != "")
                        {
                            down_att = v;
                        }
                        else if (i == "ATUC SNR" && v != "")
                        {
                            down_snr = v;
                        }
                        else if (i == "ATUR Current Rate" && v != "")
                        {
                            up_speed = v;
                        }
                        else if (i == "ATUR Attenuation" && v != "")
                        {
                            up_att = v;
                        }
                        else if (i == "ATUR SNR" && v != "")
                        {
                            up_snr = v;
                        }

                        if (i == "errordiv" && v != "")
                        { // error
                            $("#mainstatus").html('<div style="text-align:center;font-size:16px;color:#f00;">Your exchange is currently busy. Please try again later.</div>');
                            console.log(v);
                            return false;
                        }

                        if (i == "ATUC Current Rate" && v == null)
                        {
                            // error
                            //console.log("erreo"+i+": "+v);
                            $("#mainstatus").html('<div style="text-align:center;font-size:16px;color:#f00;">Error: No Line response or your modem is not connected.</div>');
                            return false;
                        }
                    });
                    if (down_att == undefined)
                    {
                        return;
                    }

                    // recommendation	
                    if (parseFloat(down_att.split(" ")[0]) <= 50)
                    {
                        down_att = '<span style="color:#090;">' + down_att + '</span>';
                        down_att_advise = false;
                    }
                    else if (parseFloat(down_att.split(" ")[0]) > 50 && parseFloat(down_att.split(" ")[0]) <= 55)
                    {
                        down_att = '<span style="color:#f60;">' + down_att + '</span>';
                        down_att_advise = true;
                    }
                    else if (parseFloat(down_att.split(" ")[0]) > 55)
                    {
                        down_att = '<span style="color:#f00;">' + down_att + '</span>';
                        down_att_advise = true;
                    }

                    if (parseFloat(down_snr.split(" ")[0]) < 6)
                    {
                        down_snr = '<span style="color:#f00;">' + down_snr + '</span>';
                        down_snr_advise = true;
                    }
                    else if (parseFloat(down_snr.split(" ")[0]) >= 6 && parseFloat(down_snr.split(" ")[0]) <= 8)
                    {
                        down_snr = '<span style="color:#f60;">' + down_snr + '</span>';
                        down_snr_advise = true;
                    }
                    else if (parseFloat(down_snr.split(" ")[0]) > 8)
                    {
                        down_snr = '<span style="color:#090;">' + down_snr + '</span>';
                        down_snr_advise = false;
                    }

                    if (parseFloat(up_att.split(" ")[0]) <= 50)
                    {
                        up_att = '<span style="color:#090;">' + up_att + '</span>';
                        up_att_advise = false;
                    }
                    else if (parseFloat(up_att.split(" ")[0]) > 50 && parseFloat(up_att.split(" ")[0]) <= 55)
                    {
                        up_att = '<span style="color:#f60;">' + up_att + '</span>';
                        up_att_advise = true;
                    }
                    else if (parseFloat(up_att.split(" ")[0]) > 55)
                    {
                        up_att = '<span style="color:#f00;">' + up_att + '</span>';
                        up_att_advise = true;
                    }

                    if (parseFloat(up_snr.split(" ")[0]) < 6)
                    {
                        up_snr = '<span style="color:#f00;">' + up_snr + '</span>';
                        up_snr_advise = true;
                    }
                    else if (parseFloat(up_snr.split(" ")[0]) >= 6 && parseFloat(up_snr.split(" ")[0]) <= 8)
                    {
                        up_snr = '<span style="color:#f60;">' + up_snr + '</span>';
                        up_snr_advise = true;
                    }
                    else if (parseFloat(up_snr.split(" ")[0]) > 8)
                    {
                        up_snr = '<span style="color:#090;">' + up_snr + '</span>';
                        up_snr_advise = false;
                    }

                    // results
                    $("#line_results").html('<fieldset style="float:left;background-color:#fff;padding:10px;padding-top:0px;color:#555;width:280px;margin-right:10px;border: 1px solid #7fb9ec;"><legend style="font-size: 16px;color:#0C5F8C;border-bottom:none;width: auto;margin-bottom: 4px;">Line Status</legend><div style=""><table style="width:100%;"><tbody><tr><td colspan="2" class="bold" style="text-align: left;"><b>Your Download Quality</b></td></tr><tr><td width="170" style="font-size:14px;text-align: left;">Current Speed:</td><td id="d_speed" align="right" style="font-size:14px;text-align: right;">' + down_speed + '</td></tr><tr><td style="font-size:14px;text-align: left;border-bottom:none;width: auto;margin-bottom: 4px;">Signal Interference:</td><td id="d_att" align="right" style="font-size:14px;">' + down_att + '</td></tr><tr><td style="font-size:14px;text-align: left;">Signal to Noise Ratio:</td><td id="d_snr" align="right" style="font-size:14px;">' + down_snr + '</td></tr></tbody></table><table style="margin-top:10px;width:100%;"><tbody><tr><td colspan="2" class="bold" style="font-weight:bold;text-align: left;">Your Upload Quality</td></tr><tr><td width="170" style="font-size:14px;text-align: left;">Current Speed:</td><td id="u_speed" align="right" style="font-size:14px;">' + up_speed + '</td></tr><tr><td style="font-size:14px;text-align: left;">Signal Interference:</td><td id="u_att" align="right" style="font-size:14px;">' + up_att + '</td></tr><tr><td style="font-size:14px;text-align: left;">Signal to Noise Ratio:</td><td id="u_snr" align="right" style="font-size:14px;">' + up_snr + '</td></tr></tbody></table><div style="clear:both;"></div></div></fieldset><fieldset style="float:left;background-color:#fff;padding:10px;padding-top:0px;color:#555;width:275px;height:214px;border: 1px solid #7fb9ec;"><legend style="font-size: 16px;color:#0C5F8C;border-bottom:none; width:auto;margin-bottom:4px;">Recommendation</legend> <div id="rec_status"></div> </fieldset>');
                    // legend
                    $("#line_results").append('<div style="clear:left;"></div><fieldset style="margin-top: 5px;background-color: #fff;border: 1px solid #7fb9ec;padding: 5px 10px 10px;"><legend style="color:#0C5F8C;border-bottom: none; margin-bottom: 4px; width: auto; font-size:15px;">What does this mean?</legend><table class="define"><tr><td width="150" class="bold" style="text-align: left;font-size: 15px;font-weight: 700;">Current Speed:</td><td style="font-size: 15px; text-align: left;">The current speed established between the exchange and your modem.</td></tr><tr><td class="bold" style="text-align: left;font-size: 15px;font-weight: 700;">Signal Interference:</td><td style="font-size: 15px; text-align: left;">If this value is high, then the signal quality is low, and vice versa.</td></tr><tr><td class="bold" style="text-align: left;font-size: 15px;font-weight: 700;">Signal to Noise Ratio:</td><td style="font-size: 15px; text-align: left;">The signal level compared to the noise level. The higher the signal value, the better.</td></tr></table></fieldset>');
                    // recommendation
                    if (!down_att_advise && !down_snr_advise && !up_att_advise && !up_snr_advise)
                    { // no issues
                        $("#rec_status").html('<div style="font-size:14px;text-align:center;margin-top:20px;color:#1ABC9C;">There are no defects on your line.<br>No need to Fix your Line.</div><div style="width:90px;height:90px;overflow:hidden;background:url(\'../modules/servers/axxessReseller/images/success.png\') no-repeat;margin: 0 auto;margin-top:20px;"></div>');
                    }
                    else
                    {
                        $("#rec_status").html('<div style="font-size:14px;text-align:center;margin-top:20px;color:#E74C3C">There are defects on your line.<br>Click on Fix my Line.</div>  <div style="width:90px;height:90px;overflow:hidden;background:url(\'../modules/servers/axxessReseller/images/error.png\') no-repeat;margin: 0 auto;margin-top:20px;"></div>');
                    }

                }
            }
        });
    }

    function fixLine()
    {

        $("#line_results").html('');
        $("#mainstatus").html('<img src="../modules/servers/axxessReseller/images/loader.gif" border="0" alt="" style="float:left;margin-left:120px;margin-right:10px;width:36px;height:36px;" /><div style="font-size:24px;float:left;width:320px;text-align:left;line-height:22px;">Fixing your Line<br><span style="font-size:14px;">Please be patient. This could take a few minutes.</span></div>');
        buttonDisable('button_checkline');
        buttonDisable('button_fixline');
        buttonDisable('button_linefault');
        var url = "modules/servers/axxessReseller/calls/portfunc.php";
        if (typeof (checkLineAjax) == "object")
        {
            checkLineAjax.abort();
        }

        checkLineAjax = $.ajax({
            type: "POST",
            url: url,
            data: {
                'query': 'fixLine',
                'token_line_no': "{$token_line_no}",
                "product_id": "{$product_id}",
                "guidServiceId": "{$guidServiceId}"
            },
            cache: false,
            dataType: "json",
            timeout: 300000, // 5 minutes
            error: function (request, error, errorThrown)
            {

                /*
                 if (error == "timeout") {
                 //alert('timeout');	
                 } else {
                 //alert(errorThrown);	
                 }
                 */
                buttonEnable('button_checkline');
                buttonEnable('button_fixline');
                buttonEnable('button_linefault');
                $("#mainstatus").html('');
            },
            success: function (response)
            {
                buttonEnable('button_checkline');
                buttonEnable('button_fixline');
                buttonEnable('button_linefault');
                $("#mainstatus").html('');
                if (response.data != "")
                {
                    var before_down_speed, before_down_att, before_down_snr, before_up_speed, before_up_att, before_up_snr, after_down_speed, after_down_att, after_down_snr, after_up_speed, after_up_att, after_up_snr;
                    var message;
                    $.each(response.data, function (i, v)
                    {

                        if (i == "message" && v != "")
                        {
                            message = v;
                        }

                        if (i == "error" && v != "")
                        {
                            $("#mainstatus").html('<div style="text-align:center;font-size:16px;color:#f00;">Error:<br>No Line response or your modem is not connected.</div>');
                            console.log(v);
                            return false;
                        }
                        if (i == "success" && v != "")
                        {
                            $("#mainstatus").html('<div style="text-align:center;font-size:16px;color:#1ABC9C;">Success:<br>' + v + '</div>');
                            console.log(v);
                            return false;
                        }
                    });
                    if (data["before.interrogation"] == undefined)
                    {
                        return;
                    }

                    if (message == undefined)
                    {
                        return;
                    }


                    $("#mainstatus").html('<span class="bold" style="font-size:15px;">' + message + '</span>');
                    $.each(data["before.interrogation"], function (i, v) {

                        if (i == "ATUC Current Rate" && v != "") {
                            before_down_speed = v;
                        } else if (i == "ATUC Attenuation" && v != "") {
                            before_down_att = v;
                        } else if (i == "ATUC SNR" && v != "") {
                            before_down_snr = v;
                        } else if (i == "ATUR Current Rate" && v != "") {
                            before_up_speed = v;
                        } else if (i == "ATUR Attenuation" && v != "") {
                            before_up_att = v;
                        } else if (i == "ATUR SNR" && v != "") {
                            before_up_snr = v;
                        }
                    });
                    $.each(data["after.interrogation"], function (i, v) {
                        if (i == "ATUC Current Rate" && v != "") {
                            after_down_speed = v;
                        } else if (i == "ATUC Attenuation" && v != "") {
                            after_down_att = v;
                        } else if (i == "ATUC SNR" && v != "") {
                            after_down_snr = v;
                        } else if (i == "ATUR Current Rate" && v != "") {
                            after_up_speed = v;
                        } else if (i == "ATUR Attenuation" && v != "") {
                            after_up_att = v;
                        } else if (i == "ATUR SNR" && v != "") {
                            after_up_snr = v;
                        }
                    });
                    // recommendation
                    if (parseFloat(before_down_att.split(" ")[0]) <= 50) {
                        before_down_att = '<span style="color:#090;">' + before_down_att + '</span>';
                    } else if (parseFloat(before_down_att.split(" ")[0]) > 50 && parseFloat(before_down_att.split(" ")[0]) <= 55) {
                        before_down_att = '<span style="color:#f60;">' + before_down_att + '</span>';
                    } else if (parseFloat(before_down_att.split(" ")[0]) > 55) {
                        before_down_att = '<span style="color:#f00;">' + before_down_att + '</span>';
                    }


                    if (parseFloat(before_down_snr.split(" ")[0]) < 6) {
                        before_down_snr = '<span style="color:#f00;">' + before_down_snr + '</span>';
                    } else if (parseFloat(before_down_snr.split(" ")[0]) >= 6 && parseFloat(before_down_snr.split(" ")[0]) <= 8) {
                        before_down_snr = '<span style="color:#f60;">' + before_down_snr + '</span>';
                    } else if (parseFloat(before_down_snr.split(" ")[0]) > 8) {
                        before_down_snr = '<span style="color:#090;">' + before_down_snr + '</span>';
                    }

                    if (parseFloat(before_up_att.split(" ")[0]) <= 50) {
                        before_up_att = '<span style="color:#090;">' + before_up_att + '</span>';
                    } else if (parseFloat(before_up_att.split(" ")[0]) > 50 && parseFloat(before_up_att.split(" ")[0]) <= 55) {
                        before_up_att = '<span style="color:#f60;">' + before_up_att + '</span>';
                    } else if (parseFloat(before_up_att.split(" ")[0]) > 55) {
                        before_up_att = '<span style="color:#f00;">' + before_up_att + '</span>';
                    }

                    if (parseFloat(before_up_snr.split(" ")[0]) < 6) {
                        before_up_snr = '<span style="color:#f00;">' + before_up_snr + '</span>';
                    } else if (parseFloat(before_up_snr.split(" ")[0]) >= 6 && parseFloat(before_up_snr.split(" ")[0]) <= 8) {
                        before_up_snr = '<span style="color:#f60;">' + before_up_snr + '</span>';
                    } else if (parseFloat(before_up_snr.split(" ")[0]) > 8) {
                        before_up_snr = '<span style="color:#090;">' + before_up_snr + '</span>';
                    }



                    if (parseFloat(after_down_att.split(" ")[0]) <= 50) {
                        after_down_att = '<span style="color:#090;">' + after_down_att + '</span>';
                    } else if (parseFloat(after_down_att.split(" ")[0]) > 50 && parseFloat(after_down_att.split(" ")[0]) <= 55) {
                        after_down_att = '<span style="color:#f60;">' + after_down_att + '</span>';
                    } else if (parseFloat(after_down_att.split(" ")[0]) > 55) {
                        after_down_att = '<span style="color:#f00;">' + after_down_att + '</span>';
                    }

                    if (parseFloat(after_down_snr.split(" ")[0]) < 6) {
                        after_down_snr = '<span style="color:#f00;">' + after_down_snr + '</span>';
                    } else if (parseFloat(after_down_snr.split(" ")[0]) >= 6 && parseFloat(after_down_snr.split(" ")[0]) <= 8) {
                        after_down_snr = '<span style="color:#f60;">' + after_down_snr + '</span>';
                    } else if (parseFloat(after_down_snr.split(" ")[0]) > 8) {
                        after_down_snr = '<span style="color:#090;">' + after_down_snr + '</span>';
                    }

                    if (parseFloat(after_up_att.split(" ")[0]) <= 50) {
                        after_up_att = '<span style="color:#090;">' + after_up_att + '</span>';
                    } else if (parseFloat(after_up_att.split(" ")[0]) > 50 && parseFloat(after_up_att.split(" ")[0]) <= 55) {
                        after_up_att = '<span style="color:#f60;">' + after_up_att + '</span>';
                    } else if (parseFloat(after_up_att.split(" ")[0]) > 55) {
                        after_up_att = '<span style="color:#f00;">' + after_up_att + '</span>';
                    }

                    if (parseFloat(after_up_snr.split(" ")[0]) < 6) {
                        after_up_snr = '<span style="color:#f00;">' + after_up_snr + '</span>';
                    } else if (parseFloat(after_up_snr.split(" ")[0]) >= 6 && parseFloat(after_up_snr.split(" ")[0]) <= 8) {
                        after_up_snr = '<span style="color:#f60;">' + after_up_snr + '</span>';
                    } else if (parseFloat(after_up_snr.split(" ")[0]) > 8) {
                        after_up_snr = '<span style="color:#090;">' + after_up_snr + '</span>';
                    }


                    // results
                    $("#line_results").html('<fieldset style="float:left;background-color:#fff;padding:10px;padding-top:0px;color:#555;width:260px;margin-right:10px;"><legend style="color:#0C5F8C;">Before Fix my Line</legend><div style=""><table style="width:100%;"><tbody><tr><td colspan="2" class="bold">Your Download Quality</td></tr><tr><td width="180">Current Speed:</td><td align="right">' + before_down_speed + '</td></tr><tr><td>Signal Interference:</td><td align="right">' + before_down_att + '</td></tr><tr><td>Signal to Noise Ratio:</td><td align="right">' + before_down_snr + '</td></tr></tbody></table><table style="margin-top:10px;width:100%;"><tbody><tr><td colspan="2" class="bold">Your Upload Quality</td></tr><tr><td width="180">Current Speed:</td><td align="right">' + before_up_speed + '</td></tr><tr><td>Signal Interference:</td><td align="right">' + before_up_att + '</td></tr><tr><td>Signal to Noise Ratio:</td><td align="right">' + before_up_snr + '</td></tr></tbody></table><div style="clear:both;"></div></div></fieldset><fieldset style="float:left;background-color:#fff;padding:10px;padding-top:0px;color:#555;width:260px;"><legend style="color:#0C5F8C;">After Fix my Line</legend><div style=""><table style="width:100%;"><tbody><tr><td colspan="2" class="bold">Your Download Quality</td></tr><tr><td width="180">Current Speed:</td><td align="right">' + after_down_speed + '</td></tr><tr><td>Signal Interference:</td><td align="right">' + after_down_att + '</td></tr><tr><td>Signal to Noise Ratio:</td><td align="right">' + after_down_snr + '</td></tr></tbody></table><table style="margin-top:10px;width:100%;"><tbody><tr><td colspan="2" class="bold">Your Upload Quality</td></tr><tr><td width="180">Current Speed:</td><td align="right">' + after_up_speed + '</td></tr><tr><td>Signal Interference:</td><td align="right">' + after_up_att + '</td></tr><tr><td>Signal to Noise Ratio:</td><td align="right">' + after_up_snr + '</td></tr></tbody></table><div style="clear:both;"></div></div></fieldset>');
                    // legend					
                    $("#line_results").append('<div style="clear:left;"></div><fieldset style="margin-top:5px;background-color:#fff;"><legend style="color:#0C5F8C;">What does this mean?</legend><table class="define"><tr><td width="150" class="bold" style="text-align: left;font-size: 15px;font-weight: 700;">Current Speed:</td><td style="font-size: 15px; text-align: left;">The current speed established between the exchange and your modem.</td></tr><tr><td class="bold" style="text-align: left;font-size: 15px;font-weight: 700;">Signal Interference:</td><td style="font-size: 15px; text-align: left;">If this value is high, then the signal quality is low, and vice versa.</td></tr><tr><td class="bold" style="text-align: left;font-size: 15px;font-weight: 700;">Signal to Noise Ratio:</td><td style="font-size: 15px; text-align: left;">The signal level compared to the noise level. The higher the signal value, the better.</td></tr></table></fieldset>');
                }

            }
        });
    }



    function linefault()
    {

        $("#line_results").html('');
        $("#mainstatus").html('<img src="../modules/servers/axxessReseller/images/loader.gif" border="0" alt="" style="float:left;margin-left:120px;margin-right:10px;width:36px;height:36px;" /><div style="font-size:24px;float:left;width:320px;text-align:left;line-height:22px;">Fixing your Line<br><span style="font-size:14px;">Please be patient. This could take a few minutes.</span></div>');
        buttonDisable('button_checkline');
        buttonDisable('button_fixline');
        buttonDisable('button_linefault');
        var url = "modules/servers/axxessReseller/calls/portfunc.php";
        if (typeof (checkLineAjax) === "object")
        {
            checkLineAjax.abort();
        }

        checkLineAjax = $.ajax({
            type: "POST",
            url: url,
            data: {
                'query': 'openTicket',
                'client_id': "{$client_id}",
            },
            cache: false,
            dataType: "json",
            timeout: 300000, // 5 minutes
            error: function (request, error, errorThrown)
            {
                buttonEnable('button_checkline');
                buttonEnable('button_fixline');
                buttonEnable('button_linefault');
                $("#mainstatus").html('error');
            },
            success: function (data)
            {
                buttonEnable('button_checkline');
                buttonEnable('button_fixline');
                buttonEnable('button_linefault');
                $("#mainstatus").html('');
                console.log(data);
                if (data != "")
                {

                    if (data.status == 'success')
                    {
                        $("#mainstatus").html('<div style="text-align:center;font-size:16px;color:#3C763D;">Success:<br>Ticket has been Opened.</div>');
                    }

                    if (data.status == 'error')
                    {
                        $("#mainstatus").html('<div style="text-align:center;font-size:16px;color:#f00;">Error:<br>' + data.msg + '</div>');
                        return false;
                    }
                }
            }
        });
    }

    function buttonDisable(id)
    {
        $("#" + id).attr("disabled", "disabled");
        $("#" + id).removeClass("btn-primary").addClass("btn-primary-disabled");
        $("#" + id).css("color", "#999");
    }

    function buttonEnable(id)
    {
        $("#" + id).removeAttr("disabled");
        $("#" + id).removeClass("btn-primary-disabled").addClass("btn-primary");
        $("#" + id).css("color", "#fff");
    }
    
    
</script>

<style>
    .button-disabled {
        background-color: #ccc;
        background-image: -moz-linear-gradient(center top , #f7f7f7, #ccc);
        border: 1px solid #999;
        border-radius: 5px;
        color: #999;
        cursor: default;
        display: block;
        float: left;
        font: bold 13px "Open Sans",Arial,Helvetica,sans-serif;
        height: 28px;
        padding: 0 5px;
        text-shadow: 0 1px rgba(0, 0, 0, 0.1);
        width: auto;
    }
    .btn-primary-disabled {
        color: #fff;
        background-color: #ccc;
        border-color: #ccc;
    }
</style>

