<?php
ini_set('display_errors', 1);
error_reporting(E_ALL);
global $defaultHomeLink;
render('_header');
$result = bill_get_customer($_SESSION['comnum'],$_SESSION['account']);

 ?>
<div data-role="page">
<style> body { font-size: 80.5%;}  </style>
    <script language="javascript">
		function toggle() {
			var ele = document.getElementById("selector");
			if (ele.style.display == "block") {
				ele.style.display = "none";
			} else {
				ele.style.display = "block";
			}
		}
        function setType(type)
        {
            var z=0;
            var x=document.forms["accinform"]["bamount"].value;
            if (x==0 || x==null || x=="") {
                alert("An amount is required");
                return false;
            }
            document.accinform.submitType.value = type;
        }
</script>
	<div name="mainx" data-role="header" data-theme="a">
	    <div id="divAuthorizeNetPopup" style="display:none;" class="AuthorizeNetPopupGrayFrameTheme">
	<div class="AuthorizeNetPopupOuter">
		<div class="AuthorizeNetPopupTop">
			<div class="AuthorizeNetPopupClose">
				<a href="javascript:;" onclick="AuthorizeNetPopup.closePopup();" title="Close"> </a>
			</div>
		</div>
		<div class="AuthorizeNetPopupInner">
			<iframe name="iframeAuthorizeNet" id="iframeAuthorizeNet" src="empty.html" frameborder="0" scrolling="no"></iframe>
		</div>
		<div class="AuthorizeNetPopupBottom">
    </div>
	</div>
	    </div>
		<table width="90%">
			<tr>
				<td><a href="<?php echo $defaultHomeLink; ?> " target="_blank" Title="WtrBill.com"><img src="https://wtrbill.com/bill/includes/uploads/<?php echo $_SESSION['comnum']?>.png" alt="WtrBill.com" height="70" width="130"/></a></td>
				<td width="80%"><h1><?php echo $_SESSION['companyname'] ?></h1></td>
				<td>
					<INPUT TYPE="button" onClick="parent.location='logout.php'" value="Logout">
					<INPUT TYPE="button" onClick="parent.location='includes/help/Help.pdf'" value="Help">
				</td>
			</tr>
		</table>
	</div>
	<div id="tabs">
		<ul>
			<li><a title="View or edit your information" href="#tabs-1">Home</a></li>
			<li><a title="Pay my bill!" href="#tabs-2">Make a Payment</a></li>
			<li><a title="Meter Reading History" href="#tabs-3">Usage Graph</a></li>
			<li><a title="Payment History" href="#tabs-4">Account Financial History</a></li>
            <li><a title="Payment History" href="#tabs-5">How to check for:</a></li>
		</ul>
		<div id="tabs-1">
            <h1><?php echo $_SESSION['user'] ?></h1>
        <table border="1" cellpadding="2" cellspacing="0">
        <tr>
            <td>Billing Name</td>
            <td><?php echo $result[0]['name']?></td>
            <td>Owner Name</td>
            <td><?php echo $result[0]['oname']?></td>
            <td>Account Number</td>
            <td><?php echo $result[0]['account']?></td>
        </tr>
        <tr>
            <td>Address</td>
            <td><?php echo $result[0]['addr']?></td>
            <td>Owner Address</td>
            <td><?php echo $result[0]['oaddr']?></td>
            <td>Meter Serial Number</td>
            <td><?php echo $result[0]['meternum']?></td>
        </tr>
        <tr>
            <td>Address 1</td>
            <td><?php echo $result[0]['addr1']?></td>
            <td>Owner Address 1</td>
            <td><?php echo $result[0]['oaddr1']?></td>
            <td>Physical Address</td>
            <td><?php echo $result[0]['maddr']?></td>
        </tr>
        <tr>
            <td>City</td>
            <td><?php echo $result[0]['city']?></td>
            <td>Owner City</td>
            <td><?php echo $result[0]['ocity']?></td>
            <td>Meter Latitude</td>
            <td><?php echo $result[0]['lat']?></td>
        </tr>
        <tr>
            <td>State</td>
            <td><?php echo $result[0]['state']?></td>
            <td>Owner State</td>
            <td><?php echo $result[0]['ostate']?></td>
            <td>Meter Longitude</td>
            <td><?php echo $result[0]['lon']?></td>
        </tr>
        <tr>
            <td>Zip</td>
            <td><?php echo $result[0]['zip']?></td>
            <td>Owner Zip</td>
            <td><?php echo $result[0]['ozip']?></td>
            <td>Customer Type</td>
            <td>
            <?php if ($result[0]['ctype']==6){
                    echo 'Bill to All Addresses';
               } else if ($result[0]['ctype']==2){
                    echo 'Bill to Both mail';
               } else if ($result[0]['ctype']==3){
                    echo 'Bill to Billing email';
               } else if ($result[0]['ctype']==4){
                    echo 'Bill to Both email';
               } else if ($result[0]['ctype']==5){
                    echo 'Bill to Both Billing';
               } else {
                    echo 'Bill to Billing mail';
               } ?>
            </td>
        </tr>
        <tr>
            <td>Billing Email</td>
            <td><?php echo $result[0]['bill_email']?></td>
            <td>Owner Email</td>
            <td><?php echo $result[0]['oemail']?></td>
            <td>Account Active</td>
            <td>
            <?php if ($result[0]['active']==1){
                    echo '<font color="green">Active</font>';
               } else {
                    echo '<font color="red">Not Active</font>';}?>
            </td>
        </tr>
        <tr>
            <td>Billing Phone</td>
            <td><?php echo $result[0]['phone']?></td>
            <td>Owner Phone</td>
            <td><?php echo $result[0]['ophone']?></td>
            <td>Web User Name</td>
            <td><?php echo $result[0]['customer_username']?></td>
        </tr>
        <tr>
            <td>Billing Phone 2</td>
            <td><?php echo $result[0]['phone1']?></td>
            <td></td>
            <td></td>
            <td></td>
            <td><?php echo $result[0]['customer_password']?></td>
        </tr>
        <tr>
            <td>Read Order</td>
            <td><?php echo $result[0]['rorder']?></td>
            <td></td>
            <td></td>
            <td style="background-color:#90ff83;">Last Charge</td>
            <td style="background-color:#90ff83;" align="right"><b>$<?php echo number_format($result1[0]['bamount'] ?? 0,2);?></b></td>
        </tr>
        <tr>
            <td style="background-color:#90ff83;">Last Month Read</td>
            <td style="background-color:#90ff83;"><?php echo $result[0]['lmread'] ?? 0;?></td>
            <td style="background-color:#90ff83;">Last Read</td>
            <td style="background-color:#90ff83;"><?php echo $result[0]['lread'] ?? 0;?></td>
            <td style="background-color:#90ff83;">Last Credit</td>
            <td style="background-color:#90ff83;" align="right"><b>$<?php echo number_format($result2[0]['pamount'] ?? 0,2);?></b></td>

        </tr>
        <tr>
            <td style="background-color:#90ff83;">Last Month Usage</td>
            <td style="background-color:#90ff83;"><?php echo $result[0]['lmuse'] ?? 0;?></td>
            <td style="background-color:#90ff83;">Last Usage</td>
            <td style="background-color:#90ff83;"><?php echo $result[0]['luse'] ?? 0;?></td>
            <td style="background-color:#90ff83;">Account Balance</td>
            <td style="background-color:#90ff83;" align="right"><b>$<?php echo number_format($result[0]['abalance'] ?? 0,2);?></td>
        </tr>
    </table>
        </div>
		<div id="tabs-2">
         <h3>Make an online payment here</h3>
         <div id="accinfo"></div>
         <form name="accinform" action="#" onsubmit="jQuery.ajax({url:'includes/ccpayinfo.php', data: jQuery(this).serialize(), cache: false, success: function(data){jQuery('#accinfo').html(data);}});return false;">
        <table border="1">
            <tr>
                <td><label for="bamount">Amount</label></td>
                <td><input type="text" name="bamount" id="bamount" value="<? echo $result['0']['abalance'];?>"></td>
            </tr>
            <tr><td></td>
                <td><input type="hidden" name="submitType">
                    <input type="hidden" name="cid" value="<?php echo $_SESSION['account']; ?>">
                    <input type="hidden" name="profileid" value="<?php echo @$result['0']['profileid']; ?>">
                    <input type="hidden" name="profileidbase" value="<?php echo $_SESSION['comnum'].$_SESSION['account']; ?>">
                    <input type="submit" onclick="setType('gethosted')" value="Next Step"/>
                </td>
            </tr>
        </table>
        </form>
		</div>
		<div id="tabs-3">
		<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
        <div id="tester" style="width:400px;height:250px;"></div>
        <?php
            $result2 = bill_get_readings($_SESSION['comnum'], $_SESSION['account']);
            if (count($result2)>0) {
        for ($i=0;$i<count($result2);$i++) {
        $x[$i] = $result2[$i]['timestamp'];
        $y[$i+1] = (floatval(@$result2[$i]['meterread']) - @floatval($result2[$i-1]['meterread']));
    }
    echo '<script>
    TESTER = document.getElementById("tester");
    Plotly.newPlot( TESTER, [{ x: ["' . implode('", "',$x) . '"], y: ["' . implode('", "',$y) .
     '" ]}], {
    margin: { t: 20 }},
    {displayModeBar: false} );
    </script>';

} else echo 'NO DATA FOR THIS ACCOUNT';
        ?>
		</div>
		<div id="tabs-4">
		<?php
        $zxy2 = '';
        $resultxyz = $result = bill_get_customer($_SESSION['comnum'], $_SESSION['account']);
        if (count($resultxyz)>0) {
        $resultx = bill_get_ptypes($_SESSION['comnum']);
        $resulty = bill_get_pctypes($_SESSION['comnum']);
        $resultz = bill_get_rates($_SESSION['comnum']);
        $result = bill_get_bill_history($_SESSION['comnum'], $_SESSION['account']);
        echo '<table border=1><tr><th>Date</th><th>Type</th><th>Debit Amount</th><th>Credit Amount'.'</th><th>Usage</th><th>Reference</th><th>Note</th><th>Other</th><th>Balance</th></tr>';
        //extract($result);
        for ($i=0;$i<count($result);$i++) {
            $res1 = $result[$i];
            if ($res1['pamount']>0) {
                for ($ix=0;$ix<count($resultx);$ix++){
                    $res2 = $resultx[$ix];
                    if ($res2['id']==$res1['type']){
                        $zxy1 = $res2['name'];
                    }
                }
                echo '<tr style="background-color:#90ff83;"><td>' . $res1['date'] . '</td><td>' . $zxy1 . '</td><td>$' . number_format($res1['bamount'],2).'</td><td>$' . number_format($res1['pamount'],2).'</td><td>'.@$res1['usage'].'</td><td>'.$res1['ref1'] . '</td><td>'.$res1['note1'].'</td><td>'.$res1['other1']  .'</td><td>'.number_format($res1['balance'],2).'</td></tr>';
            } else if ($res1['bamount']>0) {
                if ($res1['type']<>999) {
                for ($iz=0;$iz<count($resulty);$iz++){
                    $res2 = $resulty[$iz];
                    if ($res2['id']==$res1['type']){
                        $zxy2 = $res2['name'];
                    }
                }
                } else {
                for ($iz1=0;$iz1<count($resultz);$iz1++){
                    $res2 = $resultz[$iz1];
                    if ($res2['id']==$res1['rcode']){
                        $zxy2 = $res2['name'];
                    }
                }
                }
                echo '<tr style="background-color:#fdfec2;"><td>' . $res1['date'] . '</td><td>' . $zxy2 . '</td><td>$' . number_format($res1['bamount'],2) . '</td><td>' . number_format($res1['pamount'],2).'</td><td>'.@$res1['usage'].'</td><td>'.$res1['ref1'].'</td><td>'.$res1['note1'].'</td><td>'.$res1['other1'] .'</td><td>'.number_format($res1['balance'],2).'</td></tr>';
                } else {
                echo '<tr style="background-color:#fdfec2;"><td>' . $res1['date'] . '</td><td>' . $zxy2 . '</td><td>$' . number_format($res1['bamount'],2) . '</td><td>' . number_format($res1['pamount'],2).'</td><td>'.$res1['usage'].'</td><td>'.$res1['ref1']. '</td><td>'.$res1['note1'].'</td><td>'.$res1['other1'] .'</td><td>'.number_format($res1['balance'],2).'</td></tr>';
            }
        }
        }
?>
</table>
        </div>
        <div id="tabs-5">
            <table>
                <tr>
                    <td>
                        <h2>How to check for leaks on my toilet?</h2>
                        <iframe width="560" height="315" src="https://www.youtube.com/embed/X0KXt_TEGIk" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
                    </td>
                </tr>
                <tr>
                    <td>
                        <h2>How to fix a leak on my sink?</h2>
                        <iframe width="560" height="315" src="https://www.youtube.com/embed/Q5le2ZFCQjM" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
                    </td>
                </tr>
            </table>
        </div>
	</div>
    </div>
<script>
(function () {
            if (!window.AuthorizeNetPopup) window.AuthorizeNetPopup = {};
            if (!AuthorizeNetPopup.options) AuthorizeNetPopup.options = {
                onPopupClosed: null
                };

            AuthorizeNetPopup.closePopup = function () {
                //document.getElementById("divAuthorizeNetPopupScreen").style.display = "none";
                document.getElementById("divAuthorizeNetPopup").style.display = "none";
                document.getElementById("iframeAuthorizeNet").src = "includes/empty.html";
                document.getElementById("btnOpenAuthorizeNetPopup").setAttribute("hidden","hidden");
                document.getElementById("btnPostEPayment").click();
                if (AuthorizeNetPopup.options.onPopupClosed) AuthorizeNetPopup.options.onPopupClosed();
                };


            AuthorizeNetPopup.openPopup = function () {
                var popup = document.getElementById("divAuthorizeNetPopup");
                var popupScreen = document.getElementById("divAuthorizeNetPopupScreen");
                var ifrm = document.getElementById("iframeAuthorizeNet");
                var form = document.forms["formAuthorizeNetPopup"];
                $("#popupToken").val($("#inputtoken").val());
                form.action = "https://test.authorize.net/payment/payment";
                ifrm.style.width = "700px";
                ifrm.style.height = "578px";

                form.submit();

                popup.style.display = "";
                //popupScreen.style.display = "";
                centerPopup();
                };

            AuthorizeNetPopup.onReceiveCommunication = function (querystr) {
                    var params = parseQueryString(querystr);
                    switch (params["action"]) {
                        case "successfulSave":
                            AuthorizeNetPopup.closePopup();
                            break;
                        case "cancel":
                            AuthorizeNetPopup.closePopup();
                            break;
                        case "transactResponse":
                            var response = params["response"];
                            document.getElementById("token").value = response;
                            document.cookie = `response=${response}`;
                            //alert(response);
                            AuthorizeNetPopup.closePopup();
                            break;
                        case "resizeWindow":
                            var w = parseInt(params["width"]);
                            var h = parseInt(params["height"]);
                            var ifrm = document.getElementById("iframeAuthorizeNet");
                            ifrm.style.width = w.toString() + "px";
                            ifrm.style.height = h.toString() + "px";
                            centerPopup();
                            break;
                        }
                };


            function centerPopup() {
                var d = document.getElementById("divAuthorizeNetPopup");
                d.style.left = "50%";
                d.style.top = "50%";
                var left = -Math.floor(d.clientWidth / 2);
                var top = -Math.floor(d.clientHeight / 2);
                d.style.marginLeft = left.toString() + "px";
                d.style.marginTop = top.toString() + "px";
                d.style.zIndex = "2";
                if (d.offsetLeft < 16) {
                    d.style.left = "16px";
                    d.style.marginLeft = "0px";
                    }
                if (d.offsetTop < 16) {
                    d.style.top = "16px";
                    d.style.marginTop = "0px";
                    }
                }

            function parseQueryString(str) {
                    var vars = [];
                    var arr = str.split('&');
                    var pair;
                    for (var i = 0; i < arr.length; i++) {
                        pair = arr[i].split('=');
                        vars.push(pair[0]);
                        vars[pair[0]] = unescape(pair[1]);
                    }
                    return vars;
                }
        }());
        </script>
<?php

render('_footer');
?>