/*=========================================================================================
    File Name: ex-component-tour.js
    Description: Tour.
    ----------------------------------------------------------------------------------------
    Item Name: Modern Admin - Clean Bootstrap 4 Dashboard HTML Template
    Author: Pixinvent
    Author URL: hhttp://www.themeforest.net/user/pixinvent
==========================================================================================*/

$(document).ready(function () {
  displayTour();
  $(window).resize(displayTour)
  // tour initialize
  var tour = new Shepherd.Tour({
    defaultStepOptions: {
      classes: 'tour-container shadow-md bg-purple-dark',
      scrollTo: { behavior: 'smooth', block: 'center' }
    }
  });
  //  tour step added here - Step 1
  tour.addStep({
    title: 'Here is your mega menu.',
    attachTo: {
      element: '.mega-dropdown',
      on: 'bottom'
    },
    buttons: [{
      action: function () {
        return this.cancel();
      },
      text: "Skip",
      classes: 'btn',
    },
    {
      action: function () {
        return this.next();
      },
      text: 'Next',
      classes: 'btn',
    }
    ],
    id: 'welcome'
  });
  // step 2
  tour.addStep({
    title: 'Here is page title.',
    attachTo: {
      element: '.breadcrumb-item.active',
      on: 'bottom'
    },
    buttons: [

      {
        action: function () {
          return this.cancel();
        },
        text: "Skip",
        classes: 'btn',
      },

      {
        action: function () {
          return this.back();
        },
        text: "Previous",
        classes: 'btn',
      },
      {
        action: function () {
          return this.next();
        },
        text: 'Next',
        classes: 'btn',
      },
    ]
  });

  // step 3
  tour.addStep({
    title: 'Check your notifications from here.',
    attachTo: {
      element: '.dropdown-notification .nav-link-label',
      on: 'bottom'
    },
    buttons: [

      {
        action: function () {
          return this.cancel();
        },
        text: "Skip",
        classes: 'btn',
      },

      {
        action: function () {
          return this.back();
        },
        text: "Previous",
        classes: 'btn',
      },
      {
        action: function () {
          return this.next();
        },
        text: 'Finish',
        classes: 'btn',
      },
    ]
  });


  // function to remove tour on small screen
  function displayTour() {
    window.resizeEvt;
    if ($(window).width() > 770) {
      $('#tour').on("click", function () {
        clearTimeout(window.resizeEvt);
        tour.start();
      })
    } else {
      $('#tour').on("click", function () {
        clearTimeout(window.resizeEvt);
        tour.cancel()
        window.resizeEvt = setTimeout(function () {
          alert("Tour only works for large screens!");
        }, 250);;
      })
    }
  }
});