<!DOCTYPE html>
<html lang="en">
<head>
<title>Raw Beauty Aesthetics</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="apple-touch-icon" sizes="180x180" href="https://rawbeautyaesthetics.com/wp-content/uploads/2021/08/site-favicon.png">
<link rel="icon" type="image/png" sizes="32x32" href="https://rawbeautyaesthetics.com/wp-content/uploads/2021/08/site-favicon.png">
<link rel="icon" type="image/png" sizes="16x16" href="https://rawbeautyaesthetics.com/wp-content/uploads/2021/08/site-favicon.png">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Quicksand:wght@300;400;500;600;700&display=swap" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<style>
  body {
    background-color: #f9fbfd;
  }
.rating:hover {
    transform:scale(1.1);
    -ms-transform:scale(1.1); /* IE 9 */
    -moz-transform:scale(1.1); /* Firefox */
    -webkit-transform:scale(1.1); /* Safari and Chrome */
    -o-transform:scale(1.1); /* Opera */
}
.parent {
  position: fixed;
  left: 0;
  top: 0;
  width: 100vw;
  height: 100vh;
  display: flex;
}

.child {
  margin: auto;
  font-family: Quicksand, sans-serif;
}
@media only screen and (max-width: 600px) {
  .rating {
    width: 40px;
    height: 40px;
    padding: 2px;
  }
  #captitletion {
    font-size: 2em;
  }
  #question {
    font-size: 2em;
    font-weight: 900;
    padding-bottom: 25px;
  }
  .form {
    width:80%;
  }
  #caption {
    width: 80%;
  }
  #logo {
    min-width: 50%;
    max-width: 50%;
  }
}
@media only screen and (min-width: 601px) {
  .rating {
    width: 56px;
    height: 56px;
    padding: 2px;
  }
  #title {
    font-size: 1em;
  }
  #question {
    width: 100%;
    font-size: 3em;
    font-weight: bold;
    padding-bottom: 25px;
  }
  #caption {
    width: 80%;
  }
  .form {
    width:35%;
  }
  #logo {
    min-width: 20%;
    max-width: 25%;
  }
}
  .form {
    display: none;
    background-color: #ffffff;
    padding-top: 10px;
    border: 1px solid #edf2f9;
    border-radius: 10px;
    margin-top:20px;
  }
  
  input, textarea {
    width: 90%;
    font-family: Quicksand, sans-serif;
    font-size: 16px;
    border: none;
    
  }
  textarea {
    height: 100px;
  }
  input {
    height: 25px;
  }
  input:focus, textarea:focus, select:focus{
        outline: none;
    }
  .field {
    padding-bottom: 10px;
  }
  #submit {
    font-family: Quicksand, sans-serif;
    font-weight: bold;
    padding: 10px;
    width: 90%;
    background-color: rgb(229, 168, 70);
    border-color: rgb(229, 168, 70);
    border-style: solid;
    border-radius: 10px;
    font-size: 16px;
    color: #ffffff;
  }
  
  .lds-dual-ring.hidden { 
display: none;
}
.lds-dual-ring {
  display: inline-block;
  width: 80px;
  height: 80px;
}
.lds-dual-ring:after {
  content: " ";
  display: block;
  width: 64px;
  height: 64px;
  margin: 25% auto;
  border-radius: 50%;
  border: 6px solid #fff;
  border-color: #fff transparent #fff transparent;
  animation: lds-dual-ring 1.2s linear infinite;
}
@keyframes lds-dual-ring {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}


.overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background: rgba(0,0,0,.8);
    z-index: 999;
    opacity: 1;
    transition: all 0.5s;
}
  
</style>
</head>
<body>
<center>
<div class="parent">
  <div class="child" style='width:100%;'>
  <img src="https://rawbeautyaesthetics.com/wp-content/uploads/2022/04/RBA-Logo-Clear.png" id='logo'><br><br>
    <span id="title">Raw Beauty Aesthetics</span><br><br>
    <div id="question">How was your experience?</div>
    <img src="https://rawbeautyaesthetics.com/wp-content/uploads/2023/01/1-1.png" class="rating" id="rating-1" onclick="rating1234(1);">
    <img src="https://rawbeautyaesthetics.com/wp-content/uploads/2023/01/2.png" class="rating" id="rating-2" onclick="rating1234(2);">
    <img src="https://rawbeautyaesthetics.com/wp-content/uploads/2023/01/3.png" class="rating" id="rating-3" onclick="rating1234(3);">
    <img src="https://rawbeautyaesthetics.com/wp-content/uploads/2023/01/4.png" class="rating" id="rating-4" onclick="rating1234(4);">
    <img src="https://rawbeautyaesthetics.com/wp-content/uploads/2023/01/5.png" class="rating" id="rating-5" onclick="rating5();">
    
    <div class="form" id="form">
      <span id="caption" style='text-align:left;'></span>
      <hr style='background-color: #edf2f9; border:none; height: 2px;'>
      <form id="theform">
        <input type="hidden" name="rating" id="ratinginput" value="0">
        <div class="field"><textarea name="comments" id="comments" placeholder="Leave your comments here..." required></textarea></div>
        <div class="field"><input type="name" name="name" placeholder="Your name"></div>
        <div class="field"><input type="name" name="email" placeholder="Your email"></div>
        <div class="field"><button name="submit" id="submit" disabled style='opacity: .65;'>Send to Management</button></div>
      </form>
    </div>
  </div>
  
</div>
<div id="loader" class="lds-dual-ring hidden overlay"></div>
  
</center>
</body>

<script>
function rating1234(score) {
  var caption = "";
  document.getElementById("question").style.display = "none";
  if (score == 1) {
    caption = "Oh no! Could you tell us about it?";
    document.getElementById("rating-2").style.display = "none";
    document.getElementById("rating-3").style.display = "none";
    document.getElementById("rating-4").style.display = "none";
    document.getElementById("rating-5").style.display = "none";
  }
  else if (score == 2) {
    caption = "Oh no! Could you tell us about it?";
    document.getElementById("rating-1").style.display = "none";
    document.getElementById("rating-3").style.display = "none";
    document.getElementById("rating-4").style.display = "none";
    document.getElementById("rating-5").style.display = "none";
  }
  else if (score == 3) {
    caption = "What could we do to improve?";
    document.getElementById("rating-1").style.display = "none";
    document.getElementById("rating-2").style.display = "none";
    document.getElementById("rating-4").style.display = "none";
    document.getElementById("rating-5").style.display = "none";
  }
  else if (score == 4) {
    caption = "Thanks! How can we improve?";
    document.getElementById("rating-1").style.display = "none";
    document.getElementById("rating-2").style.display = "none";
    document.getElementById("rating-3").style.display = "none";
    document.getElementById("rating-5").style.display = "none";
  }
  document.getElementById("caption").innerHTML = caption;
  document.getElementById("ratinginput").value = score;
  document.getElementById("form").style.display = "block";
  
}
function rating5() {
  document.getElementById("rating-1").style.display = "none";
  document.getElementById("rating-2").style.display = "none";
  document.getElementById("rating-3").style.display = "none";
  document.getElementById("rating-4").style.display = "none";
  window.location.replace("https://g.page/r/CSTQBF51gwEoEBM/review");
}
  
function submitForm() {
  alert ("This will send the form submission via email.");
  event.preventDefault();
}
  
$(function () {
        $("#comments").keyup(function () {
            //Reference the Button.
            var btnSubmit = $("#submit");
 
            //Verify the TextBox value.
            if ($(this).val().trim() != "") {
                //Enable the TextBox when TextBox has value.
                btnSubmit.removeAttr("disabled");
                jQuery('#submit').css('opacity', '1');


            } else {
                //Disable the TextBox when TextBox is empty.
                btnSubmit.attr("disabled", "disabled");
            }
        });
    });
  
  
$("#theform").submit(function(e) {

    e.preventDefault(); // avoid to execute the actual submit of the form.

    var form = $(this);
    var url = form.attr('action');
    
    $.ajax({
           type: "POST",
           url: "https://rawbeautyaesthetics.com/feedback/ajax_submit_feedback.php",
           data: form.serialize(), // serializes the form's elements.
      beforeSend: function() {
        $('#loader').removeClass('hidden')
    },
           success: function(data)
           {
               document.getElementById("rating-1").style.display = "none";
               document.getElementById("rating-2").style.display = "none";
               document.getElementById("rating-3").style.display = "none";
               document.getElementById("rating-4").style.display = "none";
               document.getElementById("rating-5").style.display = "none";
               document.getElementById("form").style.display = "none";
               document.getElementById("question").innerHTML = "Thank you for your feedback!";
               document.getElementById("question").style.display = "block";
               $('#loader').addClass('hidden');
           }
         });

    
});
</script>
</html>