<?php   
	require("lib/config.php");
    	$sql = "SELECT * FROM `booking` where id = '".$_GET['ref']."'";
	$result = $conn->query($sql);
	
	if ($result->num_rows > 0) {
	while($row_details = $result->fetch_assoc()) {
		$booking_detail[] = $row_details;
	}
	$sql = "SELECT * FROM `customers` where id = '".$booking_detail[0]['cid']."'";
	$result = $conn->query($sql);
	if ($result->num_rows > 0) 
	{
		while($row_detail = $result->fetch_assoc()) 
		{
			$booking_details[] = $row_detail;
		}
		
	}
	
	$name = $booking_details[0]['name'];
	$date = $booking_detail[0]['booking_date'];
	$time = $booking_detail[0]['booking_time'];
	$time = date("g:i A", strtotime($time));
	$datetime = "$date $time";
	$pickup = $booking_detail[0]['pickup_addr'];
	$dropoff = $booking_detail[0]['pickoff_addr'];
	$spatulaid = $booking_detail[0]['spatula_id'];
	}
	
?>
<!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>SMS Sender</title>

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

    <link rel="stylesheet" href="assets/picker/default.css"  crossorigin="anonymous">
    <link rel="stylesheet" href="assets/picker/date.theme.css"  crossorigin="anonymous">

    <link rel="stylesheet" href="assets/picker/default.time.css"  crossorigin="anonymous">

    <!-- 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>
        #map {
            height:300px;
        }
        body{
            background-color: #ffffff;
        }
        *
{
    padding: 0;
    margin: 0;
}
#over
{
    //position:absolute;
    width:100%;
    height:100%;
    text-align: center; /*handles the horizontal centering*/
}
/*handles the vertical centering*/
.Centerer
{
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}
.Centered
{
    display: inline-block;
    vertical-align: middle;
}

    </style>
</head>
<body>

<div class="container">
    <div id="over">
    <span class="Centerer"></span>
    <img class="Centered" src="https://bookings.perthdesignateddrivers.com.au/family/family-cab_small.jpg" style="max-height:60px;">
    </div>
            <div class="row">
                <div class="col-xs-12 col-md-6 no-padding">
                    <input type="text" required data-validation="required"  class="form-control" placeholder="Reference" value="<?=$name?>" name="name id="reference" readonly>
                    <input type="text" required data-validation="required"  class="form-control" placeholder="Phone" value="<?=$datetime?>" name="datetime" id="phone" readonly>
                    <input type="text" required data-validation="required"  class="form-control" placeholder="Type" value="<?=$pickup?>" name="pickup" id="type" readonly>
                    <input type="text" required data-validation="required"  class="form-control" placeholder="Type" value="<?=$dropoff?>" name="dropoff" id="type" readonly>
                    
                </div>
                
            </div>
            
            <div class="row">
            <div class="col-xs-12 col-md-6 no-padding">
                
                    <input type="button" name="myButton" 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  name="button id="button" value="Submit">
            </div>
</div>
<div class="row">
            <div class="col-xs-12 col-md-6 no-padding">
                
                    <input type="button" name="checkButton" 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  name="button id="checkButton" value="Check if Sent">
            </div>
</div>
<div class="col-xs-12 col-md-6 no-padding" style="text-align:center">
 Current Status <span style="" id="test2"></span><br>
 On Click  <span style="color:#FF0000;font-size: 150%;text-align: center;" id="test"></span><br>
  </div>
<br><br>
<div class="row">
        <div class="col-lg-12 text-center">
        <br><br>


<?php $result = $conn->query("SELECT id, driver FROM drivers");
            
            echo "Dispatch to: &nbsp <select id='driver_id' name='id'>";

    while ($row = $result->fetch_assoc()) {

                  unset($id, $name);
                  $id = $row['id'];
                  $name = $row['driver']; 
                  echo '<option value="'.$id.'">'.$name.'</option>';

}

    echo "</select>"; ?>
    <br><br>
    
    
        
        <input type="button" name="dispatch" 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="dispatch" value="Dispatch">
        
            Status  <span style="color:#FF0000;font-size: 150%;text-align: center;" id="dispatchtxt"></span><br>
        <br>
    </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="assets/picker/picker.js"></script>
<script src="assets/picker/picker.date.js"></script>
<script src="assets/picker/picker.time.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">


function checkSent() {
var reference = <?=$_GET['ref']?>;
	

$.post("confirmsend.php", {ref: reference, check: "check"}, function (data) {
                console.log(data);
                if(data != "no"){
                $("#test2").text(data);
                $("#test2").attr('style', 'color:#f26f18;font-size: 150%;text-align: center;');
                }
                if(data == "no"){
                $("#test2").text("NOT CONFIRMED");
                $("#test2").attr('style', 'color:#FF0000;font-size: 150%;text-align: center;');
                }
                })
                
}

$(document).ready(function(){
checkSent();
})
$("#checkButton").click(function(){
checkSent();
})

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

var reference = <?=$_GET['ref']?>;


console.log(reference);

$.post("confirmsend.php", {ref: reference, check: "send"}, function (data) {
                console.log(data);
                if(data == "yes"){
                $("#test").text("Processed");
                $("#test").attr('style', 'color:#00FF00;font-size: 150%;text-align: center;background-color: #ffffff;');
                }
                if(data != "yes"){
                $("#test").text("Error");
                $("#test").attr('style', 'color:#FF0000;font-size: 150%;text-align: center;background-color: #ffffff;');
                }
               
                
                
})
})
$("#dispatch").click(function(){

var driver_id = $("#driver_id").val();
var spat_ref = <?php echo $spatulaid ?>;

$.post("dispatch.php", {driver_id: driver_id, spat_ref: spat_ref}, function (data) {
                console.log(data);
                if(data == "OK"){
                $("#dispatchtxt").text("Success");
                $("#dispatchtxt").attr('style', 'color:#00FF00;font-size: 150%;text-align: center;background-color: #ffffff;');
                } else {
                $("#dispatchtxt").text("Error");
                $("#dispatchtxt").attr('style', 'color:#FF0000;font-size: 150%;text-align: center;background-color: #ffffff;');
                }
               
                
                
})
})



</script>


</body>
</html>