(function($) {
    'use strict';
    var tour = new Tour({
        steps: [
          {
            element: "#tourHeadingElement",
            title: "Heading Element",
            content: "This is an example of card heading",
            placement: 'left'
          },
          {
            element: "#tourParagraphElement",
            title: "Paragraph",
            content: "This is an example of paragraph",
            placement: 'left'
          },
          {
            element: "#tourButtonElement",
            title: "Button",
            content: "We provide you with a bunch of buttons in different colors",
            placement: 'right'
          },
          {
            element: "#tourRoundedButtonElement",
            title: "Rounded Button",
            content: "And there are rounded buttons too!",
            placement: 'left'
          },
          {
            element: "#tourTableElement",
            title: "Table",
            content: "This is an example of a bordered table",
            placement: 'left'
          },
          {
            element: "#tourTextStylesElement",
            title: "Text styles",
            content: "Checkout the different text styles provided in our template",
            placement: 'left'
          }
        ],
        template: "<div class='popover tour'><div class='arrow'></div><h3 class='popover-title'></h3><div class='popover-content'></div><div class='p-2'><button class='btn btn-secondary btn-sm mr-1' data-role='prev'>Prev</button><button class='btn btn-secondary btn-sm mr-3' data-role='next'>Next</button><button class='btn btn-danger btn-sm' data-role='end'>End tour</button></div></div>",
        autoscroll: 'true',
        backdrop: 'true',
        onShown: function(tour) {
          var step = tour._options.steps[tour.getCurrentStep()];
          var element=$(step.element);
          $('.container-scroller').animate({ scrollTop: element.offset().top - $('.content-wrapper').offset().top - 70}, 10);
          $('.container-scroller').perfectScrollbar('update');
        }
    });
    if (tour.ended()) {
        tour.init();
        tour.restart();
    } else {
        tour.init();
        tour.restart();
    }
})(jQuery);
