<?php
$dbhost = "localhost";
	    		$dbuser = "perthdes_fam_app";
$dbpass = "TW#7CCqKReDn";
$dbname = "perthdes_famcab_api";
	    		$conn = new mysqli($dbhost, $dbuser, $dbpass, $dbname) or die($conn->connect_error);	    		
	    		$result = mysqli_query($conn, "SELECT flag FROM flag_val WHERE id='1'");
			$row = mysqli_fetch_assoc($result);
        			$flag = $row['flag'];
	    		$result = mysqli_query($conn, "SELECT lead_time FROM lead_time_poly WHERE zone='1'");
			$row = mysqli_fetch_assoc($result);
        			$lead1 = $row['lead_time'];
        		$result = mysqli_query($conn, "SELECT lead_time FROM lead_time_poly WHERE zone='2'");
			$row = mysqli_fetch_assoc($result);
        			$lead2 = $row['lead_time'];
        		$result = mysqli_query($conn, "SELECT lead_time FROM lead_time_poly WHERE zone='3'");
			$row = mysqli_fetch_assoc($result);
        			$lead3 = $row['lead_time'];
        			?>

<!DOCTYPE html>

<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <title>Turn App On/Off</title>

    <!-- Bootstrap -->
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">

   

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
    <style>
        
        body{
            background-color: #d9d9d9;
        }

    </style>
</head>
<body>
<div class="container">
    <div class="row">
        <div class="col-lg-12 text-center">
        1=ON 0=OFF
        <input type="text" required data-validation="required"  class="form-control" placeholder="Flag Val" name="name" id="name" value="<?=$flag?>" >
    </div>
    </div>
    <div class="row">
        <div class="col-lg-12 text-center">
        
        <input type="text" required data-validation="required"  class="form-control" placeholder="time1" name="time1" id="time1" value="<?=$lead1?>" >
    </div>
    </div>
    <div class="row">
        <div class="col-lg-12 text-center">
        
        <input type="text" required data-validation="required"  class="form-control" placeholder="time2" name="time2" id="time2" value="<?=$lead2?>" >
    </div>
    </div>
    <div class="row">
        <div class="col-lg-12 text-center">
        
        <input type="text" required data-validation="required"  class="form-control" placeholder="time3" name="time3" id="time3" value="<?=$lead3?>" >
    </div>
    </div>
    <div class="row">
            <div class="col-xs-12 col-md-6 no-padding">
                
                    <input type="button" name="button" style="background: rgb(2, 117, 216) none repeat scroll 0% 0%;padding-top:10px;color:#FFFFFF;" class="btn-block col-xs-12 col-md-6" id="button" value="Submit">
            </div>
            </div>
            <div class="col-xs-12 col-md-6 no-padding" style="text-align:center">
            </br>
On Click  <span style="color:#FF0000;font-size: 150%;text-align: center;" id="test"></span><br>
</div>

</div>

<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>


<script src="//cdnjs.cloudflare.com/ajax/libs/jquery-form-validator/2.3.23/jquery.form-validator.min.js"></script>
<script type="text/javascript">

$(document).ready(function(){

})

$("#button").click(function(){

var name = $("#name").val();
var zone1 = $("#time1").val();
var zone2 = $("#time2").val();
var zone3 = $("#time3").val();


$.post("off.php", {name: name, zone1: zone1, zone2: zone2, zone3: zone3}, function (data) {
                console.log(data);
                if(data == "OK"){
                $("#test").text("Processed");
                $("#test").attr('style', 'color:#00FF00;font-size: 150%;text-align: center;background-color: #ffffff;');
                }
                if(data == "BAD"){
                $("#test").text("Error");
                $("#test").attr('style', 'color:#FF0000;font-size: 150%;text-align: center;background-color: #ffffff;');
                }
               
                
                
})
})
</script>

</body>
</html>