var $stars;

jQuery(document).ready(function ($) {

// Custom whitelist to allow for using HTML tags in popover content
var myDefaultWhiteList = $.fn.tooltip.Constructor.Default.whiteList
myDefaultWhiteList.textarea = [];
myDefaultWhiteList.button = [];

$stars = $('.rate-popover');

$stars.on('mouseover', function () {
  var index = $(this).attr('data-index');
  markStarsAsActive(index);
});

function markStarsAsActive(index) {
  unmarkActive();
  for (var i = 0; i <= index; i++) {
    $($stars.get(i)).addClass('amber-text');
  }
}

function unmarkActive() {
  $stars.removeClass('amber-text');
}

$stars.on('click', function () {
  $stars.popover('hide');
});

// Submit, you can add some extra custom code here
// ex. to send the information to the server
$('#rateMe').on('click', '#voteSubmitButton', function () {
  $stars.popover('hide');
});

// Cancel, just close the popover
$('#rateMe').on('click', '#closePopoverButton', function () {
  $stars.popover('hide');
});

});

$(function () {

$('.rate-popover').popover({
  // Append popover to #rateMe to allow handling form inside the popover
  container: '#rateMe',
  // Custom content for popover
  content: `<div class="my-0 py-0"> <textarea type="text" style="font-size: 0.78rem" class="md-textarea form-control py-0" placeholder="Write us what can we improve" rows="3"></textarea> <button id="voteSubmitButton" type="submit" class="btn btn-sm btn-primary">Submit!</button> <button id="closePopoverButton" class="btn btn-flat btn-sm">Close</button>  </div>`
});
$('.rate-popover').tooltip();

});