<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<!-- <meta name="viewport" content="width=device-width, initial-scale=1"> -->
  <meta name="viewport" 
      content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
	<title></title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.3.1/dist/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous" />
<style>
  .title
  {
    color: black;
  }
  body
  {
    /*212529*/
    background-color:#fff ;
    color: white;
  }
  .labelcap
{
  color: red;
  font-weight: bold;
  font-size: 28px;
  letter-spacing: 2px;
}
</style>
</head>
<body id="mob">
<div class="container">
  
  <!-- Nav tabs -->
  <ul class="nav nav-tabs" role="tablist" style="display: none;">
    <li class="nav-item">
      <a class="nav-link active" data-toggle="tab" href="#home">Home</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" data-toggle="tab" href="#menu1">Menu 1</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" data-toggle="tab" href="#menu2">Menu 2</a>
    </li>
  </ul>

  <!-- Tab panes -->
  <div class="tab-content">
    <div id="home" class="container tab-pane active">

      	<h1 style="text-align: center;margin-top: 23px !important;">
		<img src="assets2/images/its-vision.png" width="300" height="150">
	</h1>
  <h2 style="text-align: center;" align="center" class="title">Hello Customer</h2><br>
<h3 style="text-align: center;margin-bottom: 14px;" class="title">How Would You Rate Our Facilities?</h3>
<br>
<form method="POST">
  <input type="hidden" name="action" value="SaveFeeback">
  <input type="hidden"  id="BranchCode" name="BranchCode" value="1">
  <input type="hidden"  id="Rank" name="Rank" value="1">
	<div class="form-row">

<div class="form-group col-md-3" style="margin: 0 auto;text-align: center;">
<label for="CustomerName" class="col-md-12 labelcap">Poor</label>		
<span class="rank" title="1" style='font-size:100px;'>&#128577;</span>
</div>
<div class="form-group col-md-3" style="margin: 0 auto;text-align: center;">
	<label for="CustomerName" class="col-md-12 labelcap">Average</label>	
<span class="rank" title="2" style='font-size:100px;'>&#128529;</span>
</div>
<div class="form-group col-md-3" style="margin: 0 auto;text-align: center;">
<label for="CustomerName" class="col-md-12 labelcap pr-0">Good</label>		

<span class="rank" title="3" style='font-size:100px;'>&#128578;</span>
</div>
		<div class="form-group col-md-3" style="margin: 0 auto;text-align: center;">
<label for="CustomerName" class="col-md-12 labelcap" >Excellent</label>			
			<span class="rank" title="4" style='font-size:100px;'>&#128512;</span>
		</div>
</div>


    </div>
    <div id="menu1" class="container tab-pane"><br>
      
        <h1 style="text-align: center;margin-top: 1px !important;">
    <img src="assets2/images/its-vision.png" width="200" height="170">
  </h1>

  <div class="form-row" style="display: none;">
    <div class="form-group col-md-6">
      <label class="labelcap" for="CustomerName">Name</label>
      <input type="text" name="txtCustomerName" class="form-control" id="txtCustomerName" placeholder="Please Enter Name Here">
    </div>
    <div class="form-group col-md-6" style="">
      <label class="labelcap" for="inputEmail4">Email</label>
      <input type="email" class="form-control"  name="txtEmail" id="txtEmail" placeholder="Email">
    </div>
  </div>
  <div class="form-row" style="">
  <div class="form-group col-md-12" style="">
    <label class="labelcap" for="inputAddress">Phone *</label>
    <input type="text" class="form-control" name="txtPhone" id="txtPhone" placeholder="0504128294">
  </div>
  <div class="form-group col-md-12" style="margin: 0px;padding: 0px;">
    <label class="labelcap" for="inputAddress2">Comments</label>
</div>

<div class="form-group col-md-12" >
    <textarea id="txtcomments" name="txtcomments" rows="3"  style="width:100%;"></textarea>
  </div>
</div>
  <button type="button" onclick="submitdata()" class="btn btn-primary col-md-12" style="height: 70px;font-size: 35px;"  name="submit">Submit</button>
</form>
    </div>
    <div id="menu2" class="container tab-pane">
      <br><br><br>
<center><img src="assets2/images/its-vision.png" width="300" height="140"></center>
      <br>
      <h2 align="center" class="title">Thank You For Your FeedBack</h1>
      <h3 align="center" class="title">We really appreciate your feeedback , and thank you your precious time , we are always open for suggestion and improvement by your kind advice.</h2>
      <br><br><br>
      <button class="home btn btn-primary col-md-12" style="height: 80px;font-size: 35px;">OK</button>
    </div>
  </div>
</div>



</body>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.14.7/dist/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.3.1/dist/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<script src="assets/js/jquery-3.2.1.min.js"></script>
<script type="text/javascript">
addEventListener("click", function() {
    var
          el = document.documentElement
        , rfs =
               el.requestFullScreen
            || el.webkitRequestFullScreen
            || el.mozRequestFullScreen
    ;
    rfs.call(el);
});


$(document).ready(function(){
  $("button.home").click(function(){
    $('#home').addClass("active");
    //$("#")
    $('#menu2').removeClass("active");
  })
  $("span.rank").click(function(){
    //alert('cccc')
    var Rank=$(this).prop('title');
    //alert(Rank);
    $("#Rank").val(Rank);
    $('#home').removeClass("active");
    //$("#")
    $('#menu1').addClass("active");
  })
})  
  function submitdata()
  {
                var Data = new Object();
                Data.Mobile = $("#txtPhone").val();
            Data.CustomerName = $("#txtCustomerName").val();
Data.BranchCode=$("#BranchCode").val();
            Data.Email = $("#txtEmail").val();
            Data.comments=$("#txtcomments").val();
            Data.Rank=$("#Rank").val();
     $.ajax({
                type: 'post',
                url:  './getdata.php?action=SaveFeedBack',
                dataType: 'json',
                timeout: 12000,
                data: 'data='+JSON.stringify(Data),
                beforeSend: function () {
                    //(form).find(":submit").prop("disabled", "disabled");
                },
                success: function (data) {
console.log(data);
                    if (data.status == "ok") {

//alert('done');
$('#menu1').removeClass("active");
    //$("#")
$('#menu2').addClass("active");
     //sucess
//abc();
//await new Promise(r => setTimeout(r, 2000));
demo();
      // sleep(5 * 1000);
                
                    } else {
/*
error
*/
                        }
                    
                }, error: function (jqXHR, textStatus) {
                /*    $.notify({ message: "Error, please check your internet connection status!" }, alertTypeCritical);*/
                }, complete: function () {
                  //  $(form).find(":submit").prop("disabled", null);

                }
            });
  }

  function sleep(ms) {
    return new Promise(resolve => setTimeout(resolve, ms));
}

async function demo() {
    for (let i = 0; i < 3; i++) {
        console.log(`Waiting ${i} seconds...`);
        await sleep(i * 1000);
    }
    abc();  
    console.log('Done');
}
  //setInterval(abc(),16000);
  function abc()
  {
    //alert('call')
    //setTimeout('',5000);
    $("button.home").click();
    $("body").click();
  }
</script>
<script>
var elem = document.getElementById("mob");
function openFullscreen() {
  if (elem.requestFullscreen) {
    elem.requestFullscreen();
  } else if (elem.webkitRequestFullscreen) { /* Safari */
    elem.webkitRequestFullscreen();
  } else if (elem.msRequestFullscreen) { /* IE11 */
    elem.msRequestFullscreen();
  }
}
//openFullscreen()

</script>
<script type='text/javascript' charset='utf-8'>
    // Hides mobile browser's address bar when page is done loading.
      window.addEventListener('load', function(e) {
        setTimeout(function() { window.scrollTo(0, 1); }, 1);
      }, false);
</script>
</html>

