<?php 

if(isset($_SESSION['loggedin_id']))
{
   header("location:dashboard.php");
} 

include 'config.php'; 
?>
<!doctype html>
<html lang="en">

<head>
    <title>Feedback Form</title>
    <!--== META TAGS ==-->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <!--== FAV ICON ==-->
    <link rel="shortcut icon" href="images/fav.ico">

    <!-- GOOGLE FONTS -->
    <link href="https://fonts.googleapis.com/css?family=Nunito+Sans:400,600,700" rel="stylesheet">

    <!-- FONT-AWESOME ICON CSS -->
    <link rel="stylesheet" href="css/font-awesome.min.css">

    <!--== ALL CSS FILES ==-->
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="css/mob.css">
    <link rel="stylesheet" href="css/bootstrap.css">
    <link rel="stylesheet" href="css/materialize.css" />

    <!-- HTML5 Shim and Respond.js 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="js/html5shiv.js"></script>
    <script src="js/respond.min.js"></script>
    <![endif]-->
    
    <style type="text/css">

      /* MODAL STYLING */
      #errorMsgModal, #successrMsgModal {
         display: none; /* Hidden by default */
         position: fixed; /* Stay in place */
         z-index: 1; /* Sit on top */
        padding-bottom: 100px;
        padding-top: 100px;
         left: 0;
         top: 0;
         width: 100%; /* Full width */
         height: 100%; /* Full height */
         overflow: auto; /* Enable scroll if needed */
         background-color: rgb(0,0,0); /* Fallback color */
         background-color: #00000000; /* Black w/ opacity */
         text-align: center;
         z-index: 9999;
       }
       
      #errorMsgModal .modal-content {
         background-color: #f443367a;
         padding: 30px;
         border: 1px solid #888;
         color: white;
         width: auto;
         font-size: 20px;
         font-weight: 600;
         height: auto;
         top: 10px;
         position: absolute;
         right: 10px;
       }
       #successrMsgModal .modal-content {
         background-color: #aab555d4;
         padding: 30px;
         border: 1px solid #888;
         color: white;
         width: auto;
         font-size: 20px;
         font-weight: 600;
         height: auto;
         top: 10px;
         position: absolute;
         right: 10px;
      }


       /* The Close Button */
       .close {
         color: #aaaaaa;
         float: right;
         font-size: 28px;
         font-weight: bold;
       }

       .close:hover,
       .close:focus {
         color: #000;
         text-decoration: none;
         cursor: pointer;
       }
      /* MODAL STYLING */

   </style>
   <script type="text/javascript">
      function promptMsg(type = 0, msg=""){
            if(type == 1)
            {
               $("#successrMsgModal").show();
               $("#successrMsgModal").find('span').html(msg);
            }
            else if(type == 0)
            {
               $("#errorMsgModal").show();
               $("#errorMsgModal").find('span').html(msg);
            }
         setTimeout(function() { 
               $("#errorMsgModal").hide();
               $("#successrMsgModal").hide();
         }, 1500);

      }
   </script>
   
</head>

<body>
    <!-- ERROR MSG MODAL -->
      <div id="errorMsgModal">
          <div class="modal-content">
              <span></span>
          </div>
      </div>
      <!-- SUCCESS MSG MODAL -->
      <div id="successrMsgModal">
          <div class="modal-content">
              <span></span>
          </div>
      </div>
    <div class="blog-login2">
        <div class="blog-login-in2">
            <form method="POST" action="ajax-request.php" id="feedbackForm">
                <img src="images/logo.png" alt="" />
                <div class="row">
                    <div class="input-field col s6">
                        <input name="name" id="name" type="text" class="validate">
                        <label for="name">Guest Name</label>
                    </div>
                    <div class="input-field col s6">
                        <input name="number" id="number" type="text" class="validate">
                        <label for="number">Mobile Number</label>
                    </div>
                </div>
                <div class="row">
                    <div class="input-field col s6">
                        <input id="email" name="email" type="email" class="validate">
                        <label for="email">Email Address</label>
                    </div>
                    <div class="input-field col s6">
                        <input id="room" name="room" type="text" class="validate">
                        <label for="room">Room No</label>
                    </div>
                </div>
                <div class="row">
                    <div class="input-field col s6">
                        <p>Food Quality </p>
                        <div class="FoodQualitymain_star_custom">
                            <i class="fa FoodQualitycustomstar fa-star FoodQuality_star_custom" FoodQualitydata-id="1"></i>
                            <i class="fa FoodQualitycustomstar fa-star-o FoodQuality_star_custom" FoodQualitydata-id="2"></i>
                            <i class="fa FoodQualitycustomstar fa-star-o FoodQuality_star_custom" FoodQualitydata-id="3"></i>
                            <i class="fa FoodQualitycustomstar fa-star-o FoodQuality_star_custom" FoodQualitydata-id="4"></i>
                            <i class="fa fa-star-o FoodQuality_star_custom" FoodQualitydata-id="5"></i>
                            <span>(<b>1</b> Out of <b>5</b>) <b>Average</b></span>
                        </div>
                    </div>
                    <div class="input-field col s6">
                        <p>Food Presentation </p>
                        <div class="FoodPresentationmain_star_custom">
                            <i class="fa FoodPresentationcustomstar fa-star FoodPresentation_star_custom" FoodPresentationdata-id="1"></i>
                            <i class="fa FoodPresentationcustomstar fa-star-o FoodPresentation_star_custom" FoodPresentationdata-id="2"></i>
                            <i class="fa FoodPresentationcustomstar fa-star-o FoodPresentation_star_custom" FoodPresentationdata-id="3"></i>
                            <i class="fa fa-star-o FoodPresentation_star_custom" FoodPresentationdata-id="4"></i>
                            <i class="fa fa-star-o FoodPresentation_star_custom" FoodPresentationdata-id="5"></i>
                            <span>(<b>1</b> Out of <b>5</b>) <b>Average</b></span>
                        </div>
                    </div>
                </div>
                <hr>
                <div class="row">
                    <div class="input-field col s6">
                        <p>Atmosphere </p>
                        <div class="Atmospheremain_star_custom">
                            <i class="fa Atmospherecustomstar fa-star Atmosphere_star_custom" Atmospheredata-id="1"></i>
                            <i class="fa Atmospherecustomstar fa-star-o Atmosphere_star_custom" Atmospheredata-id="2"></i>
                            <i class="fa Atmospherecustomstar fa-star-o Atmosphere_star_custom" Atmospheredata-id="3"></i>
                            <i class="fa fa-star-o Atmosphere_star_custom" Atmospheredata-id="4"></i>
                            <i class="fa fa-star-o Atmosphere_star_custom" Atmospheredata-id="5"></i>
                            <span>(<b>1</b> Out of <b>5</b>) <b>Average</b></span>
                        </div>
                    </div>
                    <div class="input-field col s6">
                        <p>Ambiance </p>
                        <div class="Ambiancemain_star_custom">
                            <i class="fa Ambiancecustomstar fa-star Ambiance_star_custom" Ambiancedata-id="1"></i>
                            <i class="fa Ambiancecustomstar fa-star-o Ambiance_star_custom" Ambiancedata-id="2"></i>
                            <i class="fa Ambiancecustomstar fa-star-o Ambiance_star_custom" Ambiancedata-id="3"></i>
                            <i class="fa fa-star-o Ambiance_star_custom" Ambiancedata-id="4"></i>
                            <i class="fa fa-star-o Ambiance_star_custom" Ambiancedata-id="5"></i>
                            <span>(<b>1</b> Out of <b>5</b>) <b>Average</b></span>
                        </div>
                    </div>
                </div>
                <hr>
                <div class="row">
                    <div class="input-field col s6">
                        <p>Service </p>
                        <div class="Servicemain_star_custom">
                            <i class="fa Servicecustomstar fa-star Service_star_custom" Servicedata-id="1"></i>
                            <i class="fa Servicecustomstar fa-star-o Service_star_custom" Servicedata-id="2"></i>
                            <i class="fa Servicecustomstar fa-star-o Service_star_custom" Servicedata-id="3"></i>
                            <i class="fa fa-star-o Service_star_custom" Servicedata-id="4"></i>
                            <i class="fa fa-star-o Service_star_custom" Servicedata-id="5"></i>
                            <span>(<b>1</b> Out of <b>5</b>) <b>Average</b></span>
                        </div>
                    </div>
                </div>
                <hr>
                <div class="row">
                    <div class="input-field col s12">
                        <p>Message</p>
                        <textarea  class="form-control" rows="5" name="message" id="message"></textarea>
                    </div>
                </div>
                <hr>
                <div class="row">
                    <div class="input-field col s12">
                        <button class="waves-effect waves-light btn-large btn-log-in" type="submit">Submit Feedback</button>
                    </div>
                </div>
                <input type="hidden" name="feedbackform-request" value="1">
                <input type="hidden" name="FoodQualityrating" id="FoodQualityrating" value="3">
                <input type="hidden" name="FoodPresentationrating" id="FoodPresentationrating" value="1">
                <input type="hidden" name="Atmosphererating" id="Atmosphererating" value="1">
                <input type="hidden" name="Ambiancerating" id="Ambiancerating" value="1">
                <input type="hidden" name="Servicerating" id="Servicerating" value="1">
            </form>
        </div>
    </div>

    <!--======== SCRIPT FILES =========-->
    <script src="js/jquery.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/materialize.min.js"></script>
    <script src="js/custom.js"></script>
     <script type="text/javascript">
          function promptMsg(type = 0, msg=""){
                if(type == 1)
                {
                   $("#successrMsgModal").show();
                   $("#successrMsgModal").find('span').html(msg);
                }
                else if(type == 0)
                {
                   $("#errorMsgModal").show();
                   $("#errorMsgModal").find('span').html(msg);
                }
             setTimeout(function() { 
                   $("#errorMsgModal").fadeOut();
                }, 1500);
    
          }
    
          $(document).ready(function() {
    
             $("#feedbackForm").on('submit', (function(e) {
                e.preventDefault();
    
                //console.log("form Submitted");
    
                $.ajax({
                   url: $(this).attr('action'),
                   type: "POST",
                   data: new FormData(this),
                   dataType: "json",
                   contentType: false,
                   cache: false,
                   processData: false,
                   success: function(data) {
                   if(data.success == 1){
                      $("#feedbackForm").trigger("reset"); // to reset form input fields  
                      promptMsg(1,data.msg);
                      setTimeout(function() { 
                         location.reload();
                      }, 1000);
                      
                   }
                   else{
                      promptMsg(0,data.msg);
                   }
                         
                   },
                   error: function(e) {
                      console.log(e);
                   }
                });
    
          }));
          
           // STARS WORK
           FoodQualitycurrentElement = 0;
           FoodPresentationcurrentElement = 0;
           AtmospherecurrentElement = 0;
           AmbiancecurrentElement = 0;
           ServicecurrentElement = 0;
           // Food Quality
           $(".FoodQuality_star_custom").click(function(){
                var FoodQualitycurrentElement = $(this).attr('FoodQualitydata-id');

                $("#FoodQualityrating").val(FoodQualitycurrentElement);
                refreshStars(1);
                setStars(FoodQualitycurrentElement, 1);
           });
        //     $(".FoodQuality_star_custom").mouseover(function(){
        //         var FoodQualitycurrentElement = $(this).attr('FoodQualitydata-id');
                
        //         refreshStars(1);
        //         setStars(FoodQualitycurrentElement, 1);
        //   });
        //     $(".FoodQuality_star_custom").mouseout(function(){
        //         var FoodQualitycurrentElement = $("#FoodQualityrating").val();
        //         refreshStars(1);
        //         setStars(FoodQualitycurrentElement, 1);
        //   });
           
          // FoodPresentation
          $(".FoodPresentation_star_custom").click(function(){
                var FoodPresentationcurrentElement = $(this).attr('FoodPresentationdata-id');
                $("#FoodPresentationrating").val(FoodPresentationcurrentElement);
                refreshStars(2);
                setStars(FoodPresentationcurrentElement, 2);
          });
        //     $(".FoodPresentation_star_custom").mouseover(function(){
        //         var FoodPresentationcurrentElement = $(this).attr('FoodPresentationdata-id');
        //         refreshStars(2);
        //         setStars(FoodPresentationcurrentElement, 2);
        //   });
        //     $(".FoodPresentation_star_custom").mouseout(function(){
        //         var FoodPresentationcurrentElement = $("#FoodPresentationrating").val();
        //         refreshStars(2);
        //         setStars(FoodPresentationcurrentElement, 2);
        //   });
           
           
            // Atmosphere
          $(".Atmosphere_star_custom").click(function(){
                var AtmospherecurrentElement = $(this).attr('Atmospheredata-id');
                $("#Atmosphererating").val(AtmospherecurrentElement);
                refreshStars(3);
                setStars(AtmospherecurrentElement, 3);
          });
        //     $(".Atmosphere_star_custom").mouseover(function(){
        //         var AtmospherecurrentElement = $(this).attr('Atmospheredata-id');
        //         refreshStars(3);
        //         setStars(AtmospherecurrentElement, 3);
        //   });
        //     $(".Atmosphere_star_custom").mouseout(function(){
        //         var AtmospherecurrentElement = $("#Atmosphererating").val();
        //         refreshStars(3);
        //         setStars(AtmospherecurrentElement, 3);
        //   });
           
           
            // Ambiance
          $(".Ambiance_star_custom").click(function(){
                var AmbiancecurrentElement = $(this).attr('Ambiancedata-id');
                $("#Ambiancerating").val(AmbiancecurrentElement);
                refreshStars(4);
                setStars(AmbiancecurrentElement,4);
          });
        //     $(".Ambiance_star_custom").mouseover(function(){
        //         var AmbiancecurrentElement = $(this).attr('Ambiancedata-id');
        //         refreshStars(4);
        //         setStars(AmbiancecurrentElement, 4);
        //   });
        //     $(".Ambiance_star_custom").mouseout(function(){
        //         var AmbiancecurrentElement = $("#Ambiancerating").val();
        //         refreshStars(4);
        //         setStars(AmbiancecurrentElement, 4);
        //   });
           
            // Service
          $(".Service_star_custom").click(function(){
                var ServicecurrentElement = $(this).attr('Servicedata-id');
                $("#Servicerating").val(ServicecurrentElement);
                refreshStars(5);
                setStars(ServicecurrentElement,5);
          });
        //     $(".Service_star_custom").mouseover(function(){
        //         var ServicecurrentElement = $(this).attr('Servicedata-id');
        //         refreshStars(5);
        //         setStars(ServicecurrentElement, 5);
        //   });
        //     $(".Service_star_custom").mouseout(function(){
        //         var ServicecurrentElement = $("#Servicerating").val();
        //         refreshStars(5);
        //         setStars(ServicecurrentElement, 5);
        //   });
        
        function setStars(total = 0,type=0 ){
                if(type == 1){
                    var FoodQualityratingText=['Poor','Sufficient','Average','Well','Very good'];
                    $(".FoodQualitymain_star_custom").find("span").html(' (<b>'+total+'</b> Out of <b>5</b>) <b>'+FoodQualityratingText[total-1]+'</b>' );
                    for (var i = 1; i <= total; i++) {
                        $("[FoodQualitydata-id="+i+"]").removeClass("fa-star-o").addClass("fa-star FoodQualitycustomstar");
                    }
                }
                
                if(type == 2){
                    var FoodPresentationratingText=['Poor','Sufficient','Average','Well','Very good'];  
                    $(".FoodPresentationmain_star_custom").find("span").html(' (<b>'+total+'</b> Out of <b>5</b>) <b>'+FoodPresentationratingText[total-1]+'</b>' );
                    for (var i = 1; i <= total; i++) {
                        $("[FoodPresentationdata-id="+i+"]").removeClass("fa-star-o").addClass("fa-star FoodPresentationcustomstar");
                    }
                }
                
                if(type == 3){
                    var AtmosphereratingText=['Poor','Sufficient','Average','Well','Very good'];
                    $(".Atmospheremain_star_custom").find("span").html(' (<b>'+total+'</b> Out of <b>5</b>) <b>'+AtmosphereratingText[total-1]+'</b>' );
                    for (var i = 1; i <= total; i++) {
                        $("[Atmospheredata-id="+i+"]").removeClass("fa-star-o").addClass("fa-star Atmospherecustomstar");
                    }
                }
                
                if(type == 4){
                    var AmbianceratingText=['Poor','Sufficient','Average','Well','Very good'];
                    $(".Ambiancemain_star_custom").find("span").html(' (<b>'+total+'</b> Out of <b>5</b>) <b>'+AmbianceratingText[total-1]+'</b>' );
                    for (var i = 1; i <= total; i++) {
                        $("[Ambiancedata-id="+i+"]").removeClass("fa-star-o").addClass("fa-star Ambiancecustomstar");
                    }
                }
                
                if(type == 5){
                    var ServiceratingText=['Poor','Sufficient','Average','Well','Very good'];
                    $(".Servicemain_star_custom").find("span").html(' (<b>'+total+'</b> Out of <b>5</b>) <b>'+ServiceratingText[total-1]+'</b>' );
                    for (var i = 1; i <= total; i++) {
                        $("[Servicedata-id="+i+"]").removeClass("fa-star-o").addClass("fa-star Servicecustomstar");
                    }
                }
           }
           
           function refreshStars(type = 0){
                if(type == 1){
                    $(".FoodQualitymain_star_custom").find("span").html('(<b>3</b> Out of <b>5</b>) <b>Average</b>' );
                    $(".FoodQuality_star_custom").removeClass("fa-star FoodQualitycustomstar").addClass("fa-star-o");
                }
               
                if(type == 2){
                    $(".FoodPresentationmain_star_custom").find("span").html('(<b>3</b> Out of <b>5</b>) <b>Average</b>' );
                    $(".FoodPresentation_star_custom").removeClass("fa-star FoodPresentationcustomstar").addClass("fa-star-o");
                }
               
                if(type == 3){
                    $(".Atmospheremain_star_custom").find("span").html('(<b>3</b> Out of <b>5</b>) <b>Average</b>' );
                    $(".Atmosphere_star_custom").removeClass("fa-star Atmospherecustomstar").addClass("fa-star-o");
                }
               
                if(type == 4){
                    $(".Ambiancemain_star_custom").find("span").html('(<b>3</b> Out of <b>5</b>) <b>Average</b>' );
                    $(".Ambiance_star_custom").removeClass("fa-star Ambiancecustomstar").addClass("fa-star-o");
                }
               
                if(type == 5){
                    $(".Servicemain_star_custom").find("span").html('(<b>3</b> Out of <b>5</b>) <b>Average</b>' );
                    $(".Service_star_custom").removeClass("fa-star Servicecustomstar").addClass("fa-star-o");
                }       
           }
          
          
       });

   </script>
</body>

</html>