/*=========================================================================================

    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);;

      })

    }

  }

});

