<!DOCTYPE html>
<html>
<head>
  <title>Gps  Map Location</title>

  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <style>
.number { text-align:center; }
::-webkit-input-placeholder {
   text-align:left;
}

:-moz-placeholder { /* Firefox 18- */
   text-align:left;
}

::-moz-placeholder {  /* Firefox 19+ */
   text-align:left; 
}

:-ms-input-placeholder {  
   text-align:left;
} 
    input{
      padding:0px;
      border-radius: 12px;
    }
    body{
      background-image:url(image/train4.jpg);
       width:98%;
      height:100%;
      background-size: cover;
      /*background-color:pink;*/
    }
    .fan{
      width:115px;
    }
    .light{
      width:115px;
    }
    .btn-success{
      margin-right: 30px;
    }
    .btn-danger{
      margin-right: 30px;

    } 
    section{
      border: 2px solid black;
      border-radius: 12px;
      margin-top: 99px;
      background-color:#ffffff73;
      width:510%;
      margin-left:-214px;
      height:300px;
      
    }.split {
  height: 100%;
  width: 50%;
  position: fixed;
  z-index: 1;
  top: 0;
  overflow-x: hidden;
  padding-top: 20px;
}

.left {
  left: 0;
  /*background-color: #111;*/
  background-image: url('image/gps.jpg');
}

.right {
  right: 0;
  background-color: red;
}

.centered {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}

.centered img {
  width: 150px;
  border-radius: 50%;
}
 

  </style>
</head>

<body>
      <?php 
    include "connection.php";
      $sql = "SELECT * FROM gps_table ORDER BY id DESC LIMIT 1";

      $result = mysqli_query($conn,$sql); 
      $row=mysqli_fetch_array($result);
        $latitude=$row['value1'];
        $longtitude=$row['value2'];
        // $condition=$row['value3'];
        $reading_time=$row['reading_time'];
        
       

    ?>
 
    
    <div class="split left">
  <div class="centered">
      <div class="container-fluid col-10">
      <center>
<section>
    <div class="col-lg-12 col-md-12 col-12 text-center center-block d-block mx-auto">
      <h2 class="pt-3">GPS Map </h2>
    </div>

    <div class="container-fluid col-10 form mt-5">
      <!-- <form> -->
    <div class="row">
      <div class="col-lg-6 col-md-6 col-6 text-center center-block d-block mx-auto mt-3">
        <p><b>Latitude</b></p>
      </div>
      <div class="col-lg-4 col-md-4 col-4 mt-3">
        <input type="text" class="number" value="<?php echo $latitude; ?>" readonly>
      </div>
    </div>

    <div class="row">
      <div class="col-lg-6 col-md-6 col-6 text-center center-block d-block mx-auto">
        <p><b>Longitute</b></p>
      </div>
      <div class="col-lg-4 col-md-4 col-4">
        <input type="text" class="number"value="<?php echo $longtitude; ?>" readonly oninput="check()" onmouseout="out()">
       <p id="span"></p>
      </div>
    </div>
      <div class="row">
      <div class="col-lg-6 col-md-6 col-6 text-center center-block d-block mx-auto">
        <p><b>Date And Time</b></p>
      </div>
      <div class="col-lg-4 col-md-4 col-4">
        <input type="text" class="number"value="<?php echo $reading_time; ?>" readonly oninput="check()" onmouseout="out()">
       <p id="span"></p>
      </div>
    </div>

<center>
    <button type="button" class="btn btn-success"><a href="sensor_fetchdata.php" style="text-decoration:none;color:white">History</a></button>
    </center>

</div>

</section>
<!-- </form> -->
</div>



<div class="row">
   <div class="col-lg-4 col-md-4 col-4 text-center center-block d-block mx-auto p-3">
<!--    <button type="button"  class="btn btn-success auto" style='margin-left: 25px;background-color:chocolate-->
<!--' onclick="stop()">Stop</button>-->

 
    <!-- <button type="button" class="btn btn-primary">Manual Mode</button> -->
   </div>
</div>

   <!-- <div class="col-lg-12 col-md-12 col-12 text-center center-block d-block mx-auto p-3">-->
   <!-- <button type="button" class="btn btn-success light" onclick="start()">Start</button>-->
   <!--   <button type="button" class="btn btn-primary light" onclick="stop()">Stop</button>-->
   <!--</div>-->


</div>

  </div>
</div>

<div class="split right">
  <div class="centered">
    <iframe style="height: 650px;width: 680px" src="https://maps.google.com/maps?q=<?php echo $latitude; ?>,<?php echo $longtitude; ?>&output=embed"></iframe>
  </div>
</div>
    
      
 




<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.10.2/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.min.js"></script>

<script>

    x=document.getElementsByTagName('input');

    function check(){
       length=x[1].value.length;
   
        if(length="0"){
            document.getElementById('span').innerHTML="ON";

        } else (length!=""){
            document.getElementById('span').innerHTML="OFF";

        }
     
    }
</script>
</center>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
 <script>
function voice_recognition() {  
    document.getElementById('image').src='images/gif.gif'
  if (window.hasOwnProperty('webkitSpeechRecognition')) {
     var recognition = new webkitSpeechRecognition();  
     recognition.continuous = false;
     recognition.interimResults = false;
     recognition.lang = "en-US"; //language
     recognition.start();
     recognition.onresult = function(e) {
     document.getElementById('search_box').value = e.results[0][0].transcript;
     recognition.stop();
     document.getElementById('form_id').submit(); //form submit
   };
   recognition.onerror = function(e) {
     recognition.stop(); // error msg
    } 
  }
}
</script>
<script type="text/javascript">
  function Up(){
      $.ajax({
           'type' : 'GET',
           'url' : 'set_mode.php',
           'data' : {id : "https://iotcloud22.in/blind/?light=up"},
           'success' : function(data){
            // <!--alert(data);-->
                    
           }
       });
  }
  function down(){

    $.ajax({

           'type' : 'GET',
           'url' : 'set_mode.php',
           'data' : {id : "https://iotcloud22.in/blind/?light=down"},
           'success' : function(data){  
        //   alert('Charging Is Stoped');
           // window.setTimeout(function(){location.reload()},1000)

           }
       });

    
  }


    function stop(){

    $.ajax({

           'type' : 'GET',
           'url' : 'set_mode.php',
           'data' : {id : "https://iotcloud22.in/blind/?light=stop"},
           'success' : function(data){  
        //   alert('Charging Is Stoped');
           // window.setTimeout(function(){location.reload()},1000)

           }
       });

    
  }
      function start(){

    $.ajax({

           'type' : 'GET',
           'url' : 'set_mode.php',
           'data' : {id : "https://iotcloud22.in/blind/?light=start"},
           'success' : function(data){  
        //   alert('Charging Is Stoped');
           // window.setTimeout(function(){location.reload()},1000)

           }
       });

    
  }

</script>
  </body>