/*=========================================================================================
    File Name: block-ui.js
    Description: Block UI jQuery Plugin Intialization
    --------------------------------------------------------------------------------------
    Item Name: Modern Admin - Clean Bootstrap 4 Dashboard HTML Template
    Author: PIXINVENT
    Author URL: http://www.themeforest.net/user/pixinvent
==========================================================================================*/

$(document).ready(function() {
  /************************************
   *			Block Examples			*
   ************************************/
  $(".block-element").on("click", function() {
    var block_ele = $(this).closest(".card");
    $(block_ele).block({
      message: '<div class="ft-refresh-cw icon-spin font-medium-2"></div>',
      timeout: 2000, //unblock after 2 seconds
      overlayCSS: {
        backgroundColor: "#fff",
        opacity: 0.8,
        cursor: "wait"
      },
      css: {
        border: 0,
        padding: 0,
        backgroundColor: "transparent"
      }
    });
  });

  // Block sidebar
  $(".block-sidebar").on("click", function() {
    var block_ele = $(".main-menu");
    $(block_ele).block({
      message: '<div class="ft-refresh-cw icon-spin font-medium-2"></div>',
      timeout: 2000, //unblock after 2 seconds
      overlayCSS: {
        backgroundColor: "#FFF",
        opacity: 0.8,
        cursor: "wait"
      },
      css: {
        border: 0,
        padding: 0,
        backgroundColor: "transparent"
      }
    });
  });

  // Block page
  $(".block-page").on("click", function() {
    $.blockUI({
      message: '<div class="ft-refresh-cw icon-spin font-medium-2"></div>',
      timeout: 2000, //unblock after 2 seconds
      overlayCSS: {
        backgroundColor: "#FFF",
        opacity: 0.8,
        cursor: "wait"
      },
      css: {
        border: 0,
        padding: 0,
        backgroundColor: "transparent"
      }
    });
  });

  /************************************
   *			Message Options			*
   ************************************/

  // Spinner only
  $(".block-spinner-only").on("click", function() {
    var block_ele = $(this).closest(".card");
    $(block_ele).block({
      message: '<div class="ft-refresh-cw icon-spin font-medium-2"></div>',
      timeout: 2000, //unblock after 2 seconds
      overlayCSS: {
        backgroundColor: "#fff",
        opacity: 0.8,
        cursor: "wait"
      },
      css: {
        border: 0,
        padding: 0,
        backgroundColor: "transparent"
      }
    });
  });

  // Defult Message
  $(".block-default-message").on("click", function() {
    var block_ele = $(this).closest(".card");
    $(block_ele).block({
      message: '<span class="semibold"> Loading...</span>',
      timeout: 2000, //unblock after 2 seconds
      overlayCSS: {
        backgroundColor: "#fff",
        opacity: 0.8,
        cursor: "wait"
      },
      css: {
        border: 0,
        padding: 0,
        backgroundColor: "transparent"
      }
    });
  });

  // Custom Message
  $(".block-custom-message").on("click", function() {
    var block_ele = $(this).closest(".card");
    $(block_ele).block({
      message: '<span class="semibold"> Custom Message...</span>',
      timeout: 2000, //unblock after 2 seconds
      overlayCSS: {
        backgroundColor: "#fff",
        opacity: 0.8,
        cursor: "wait"
      },
      css: {
        border: 0,
        padding: 0,
        backgroundColor: "transparent"
      }
    });
  });

  // Message Animation
  $(".block-msg-animation").on("click", function() {
    var block_ele = $(this).closest(".card");
    $(block_ele).block({
      message:
        '<div class="semibold"><span class="ft-refresh-cw icon-spin text-left"></span>&nbsp; Loading ...</div>',
      fadeIn: 1000,
      fadeOut: 1000,
      timeout: 2000, //unblock after 2 seconds
      overlayCSS: {
        backgroundColor: "#fff",
        opacity: 0.8,
        cursor: "wait"
      },
      css: {
        border: 0,
        padding: "10px 15px",
        color: "#fff",
        width: "auto",
        backgroundColor: "#333"
      }
    });
  });

  // Multiple messages
  $(".block-multiple-msgs").on("click", function() {
    var message = $(".multiple-msgs");
    var block_ele = $(this).closest(".card");
    $(block_ele).block({
      message: message,
      overlayCSS: {
        backgroundColor: "#fff",
        opacity: 0.8,
        cursor: "wait"
      },
      css: {
        // width: 200,
        border: 0,
        padding: 0,
        backgroundColor: "transparent"
      },
      onBlock: function() {
        clearTimeout();
      }
    });

    window.setTimeout(function() {
      message.html(
        '<div class="semibold"><span class="ft-refresh-cw icon-spin text-left"></span>&nbsp; Loading ...</div>'
      );
    }, 0);

    window.setTimeout(function() {
      message.html('<div class="semibold">Just a minute...</div>');
    }, 2000);

    window.setTimeout(function() {
      message
        .addClass("bg-success")
        .html(
          '<div class="semibold"><span class="icon-thumbs-o-up text-left"></span>&nbsp; Success</div>'
        );
    }, 4000);

    window.setTimeout(function() {
      $(block_ele).unblock({
        onUnblock: function() {
          message.removeClass("bg-success");
        }
      });
    }, 6000);
  });
  //multiple message and glow notification display none when document ready
  $(".growl-notification-example").css("display", " none");
  $(".multiple-msgs").css({ display: "none", padding: "15px 0" });

  // Non centered message
  $(".block-non-centered-msg").on("click", function() {
    var block_ele = $(this).closest(".card");
    $(block_ele).block({
      message:
        '<div class="semibold"><span class="ft-refresh-cw icon-spin text-left"></span>&nbsp; Loading ...</div>',
      timeout: 2000, //unblock after 2 seconds
      centerX: 0,
      centerY: 0,
      overlayCSS: {
        backgroundColor: "#fff",
        opacity: 0.8,
        cursor: "wait"
      },
      css: {
        top: "10px",
        left: "",
        right: "10px",
        border: 0,
        padding: "10px 15px",
        backgroundColor: "transparent"
      }
    });
  });

  /****************************************
   *			Overlay Examples			*
   ****************************************/

  // Light overlay
  $(".block-light-overlay").on("click", function() {
    var block_ele = $(this).closest(".card");
    $(block_ele).block({
      message: '<div class="ft-refresh-cw icon-spin font-medium-2"></div>',
      timeout: 2000, //unblock after 2 seconds
      overlayCSS: {
        backgroundColor: "#fff",
        opacity: 0.8,
        cursor: "wait"
      },
      css: {
        border: 0,
        padding: 0,
        backgroundColor: "transparent"
      }
    });
  });

  // Custom overlay
  $(".block-opaque-overlay").on("click", function() {
    var block_ele = $(this).closest(".card");
    $(block_ele).block({
      message: '<div class="ft-refresh-cw icon-spin font-medium-2"></div>',
      timeout: 2000, //unblock after 2 seconds
      overlayCSS: {
        backgroundColor: "#2962FF",
        opacity: 1,
        cursor: "wait"
      },
      css: {
        border: 0,
        padding: 0,
        color: "#fff",
        backgroundColor: "transparent"
      }
    });
  });

  // Overlay with custom color
  $(".block-custom-overlay").on("click", function() {
    var block_ele = $(this).closest(".card");
    $(block_ele).block({
      message: '<div class="ft-refresh-cw icon-spin font-medium-2"></div>',
      timeout: 2000, //unblock after 2 seconds
      overlayCSS: {
        backgroundColor: "#E91E63",
        opacity: 0.8,
        cursor: "wait"
      },
      css: {
        border: 0,
        padding: 0,
        color: "#fff",
        backgroundColor: "transparent"
      }
    });
  });

  /****************************************
   *			Callback Options			*
   ****************************************/

  // onBlock callback
  $(".onblock-callback").on("click", function() {
    $.blockUI({
      message: '<div class="ft-refresh-cw icon-spin font-medium-2"></div>',
      fadeIn: 1000,
      timeout: 2000, //unblock after 2 seconds
      overlayCSS: {
        backgroundColor: "#FFF",
        opacity: 0.8,
        cursor: "wait"
      },
      css: {
        border: 0,
        padding: 0,
        color: "#333",
        backgroundColor: "transparent"
      },
      onBlock: function() {
        alert("Page is now blocked, FadeIn complete.");
      }
    });
  });

  // onUnblock callback
  $(".onunblock-callback").on("click", function() {
    $.blockUI({
      message: '<div class="ft-refresh-cw icon-spin font-medium-2"></div>',
      timeout: 2000, //unblock after 2 seconds
      overlayCSS: {
        backgroundColor: "#FFF",
        opacity: 0.8,
        cursor: "wait"
      },
      css: {
        border: 0,
        padding: 0,
        color: "#333",
        backgroundColor: "transparent"
      },
      onUnblock: function() {
        alert("Page is now unblocked. FadeOut complete.");
      }
    });
  });

  // Overlay callback
  $(".onoverlay-click-callback").on("click", function() {
    $.blockUI({
      message: '<div class="ft-refresh-cw icon-spin font-medium-2"></div>',
      overlayCSS: {
        backgroundColor: "#FFF",
        opacity: 0.8,
        cursor: "wait"
      },
      css: {
        color: "#333",
        border: 0,
        padding: 0,
        backgroundColor: "transparent"
      },
      onOverlayClick: $.unblockUI
    });
  });

  /************************************
   *			Other Options			*
   ************************************/

  // Block Without Message
  $(".block-without-msg").on("click", function() {
    var block_ele = $(this).closest(".card");
    $(block_ele).block({
      message: null,
      timeout: 2000, //unblock after 2 seconds
      overlayCSS: {
        backgroundColor: "#fff",
        opacity: 0.8,
        cursor: "wait"
      },
      css: {
        border: 0,
        padding: 0,
        backgroundColor: "transparent"
      }
    });
  });

  // Block without overlay
  $(".block-without-overlay").on("click", function() {
    var block_ele = $(this).closest(".card");
    $(block_ele).block({
      message: '<div class="ft-refresh-cw icon-spin font-medium-2"></div>',
      showOverlay: false,
      timeout: 2000, //unblock after 2 seconds
      css: {
        width: 50,
        height: 50,
        lineHeight: 1,
        color: "#FFF",
        border: 0,
        padding: 15,
        backgroundColor: "#333"
      }
    });
  });

  // Unblock on overlay click
  $(".overlay-unblock").on("click", function() {
    var block_ele = $(this).closest(".card");
    $(block_ele).block({
      message: '<div class="ft-refresh-cw icon-spin font-medium-2"></div>',
      overlayCSS: {
        backgroundColor: "#fff",
        opacity: 0.8,
        cursor: "wait"
      },
      css: {
        border: 0,
        padding: 0,
        backgroundColor: "transparent"
      }
    });

    $(".blockOverlay").on("click", function() {
      $(block_ele).unblock();
    });
  });

  // Growl notification
  $(".growl-notification").on("click", function() {
    $.blockUI({
      message: $(".growl-notification-example"),
      fadeIn: 700,
      fadeOut: 700,
      timeout: 50000,
      showOverlay: false,
      centerY: false,
      css: {
        width: "250px",
        top: "20px",
        left: "",
        right: "20px",
        border: "none",
        padding: "15px 5px",
        backgroundColor: "#333",
        "-webkit-border-radius": "10px",
        "-moz-border-radius": "10px",
        opacity: 0.9,
        color: "#fff"
      }
    });
  });
});