/*
Template Name: Upcube -  Admin & Dashboard Template
Author: Themesdesign
Contact: themesdesign.in@gmail.com
File: Form Advanced Js File
*/

!function ($) {
    "use strict";
  
    var AdvancedForm = function () { };
  
    AdvancedForm.prototype.init = function () {
  
      // Select2
      $(".select2").select2();
  
      $(".select2-limiting").select2({
        maximumSelectionLength: 2
      });
  
  
      $(".select2-search-disable").select2({
        minimumResultsForSearch: Infinity
      });
  
  
      $('.select2-ajax').select2({
        ajax: {
          url: "https://api.github.com/search/repositories",
          dataType: 'json',
          delay: 250,
          data: function (params) {
            return {
              q: params.term, // search term
              page: params.page
            };
          },
          processResults: function (data, params) {
            // parse the results into the format expected by Select2
            // since we are using custom formatting functions we do not need to
            // alter the remote JSON data, except to indicate that infinite
            // scrolling can be used
            params.page = params.page || 1;
  
            return {
              results: data.items,
              pagination: {
                more: (params.page * 30) < data.total_count
              }
            };
          },
          cache: true
        },
        placeholder: 'Search for a repository',
        minimumInputLength: 1,
        templateResult: formatRepo,
        templateSelection: formatRepoSelection
      });
  
      function formatRepo(repo) {
        if (repo.loading) {
          return repo.text;
        }
  
        var $container = $(
          "<div class='select2-result-repository clearfix'>" +
          "<div class='select2-result-repository__avatar'><img src='" + repo.owner.avatar_url + "' /></div>" +
          "<div class='select2-result-repository__meta'>" +
          "<div class='select2-result-repository__title'></div>" +
          "<div class='select2-result-repository__description'></div>" +
          "<div class='select2-result-repository__statistics'>" +
          "<div class='select2-result-repository__forks'><i class='fa fa-flash'></i> </div>" +
          "<div class='select2-result-repository__stargazers'><i class='fa fa-star'></i> </div>" +
          "<div class='select2-result-repository__watchers'><i class='fa fa-eye'></i> </div>" +
          "</div>" +
          "</div>" +
          "</div>"
        );
  
        $container.find(".select2-result-repository__title").text(repo.full_name);
        $container.find(".select2-result-repository__description").text(repo.description);
        $container.find(".select2-result-repository__forks").append(repo.forks_count + " Forks");
        $container.find(".select2-result-repository__stargazers").append(repo.stargazers_count + " Stars");
        $container.find(".select2-result-repository__watchers").append(repo.watchers_count + " Watchers");
  
        return $container;
      }
  
      function formatRepoSelection(repo) {
        return repo.full_name || repo.text;
      }
  
  
      function formatState(state) {
        if (!state.id) {
          return state.text;
        }
        var baseUrl = "/assets/images/flags/select2";
        var $state = $(
          '<span><img src="' + baseUrl + '/' + state.element.value.toLowerCase() + '.png" class="img-flag" /> ' + state.text + '</span>'
        );
        return $state;
      };
  
      $(".select2-templating").select2({
        templateResult: formatState
      });
  
      //colorpicker start
      $("#colorpicker-default").spectrum();
  
      $("#colorpicker-showalpha").spectrum({
        showAlpha: true
      });
  
      $("#colorpicker-showpaletteonly").spectrum({
        showPaletteOnly: true,
        showPalette: true,
        color: '#34c38f',
        palette: [
          ['#0f9cf3', 'white', '#34c38f',
            'rgb(255, 128, 0);', '#50a5f1'],
          ['red', 'yellow', 'green', 'blue', 'violet']
        ]
      });
  
      $("#colorpicker-togglepaletteonly").spectrum({
        showPaletteOnly: true,
        togglePaletteOnly: true,
        togglePaletteMoreText: 'more',
        togglePaletteLessText: 'less',
        color: '#0f9cf3',
        palette: [
            ["#000","#444","#666","#999","#ccc","#eee","#f3f3f3","#fff"],
            ["#f00","#f90","#ff0","#0f0","#0ff","#00f","#90f","#f0f"],
            ["#f4cccc","#fce5cd","#fff2cc","#d9ead3","#d0e0e3","#cfe2f3","#d9d2e9","#ead1dc"],
            ["#ea9999","#f9cb9c","#ffe599","#b6d7a8","#a2c4c9","#9fc5e8","#b4a7d6","#d5a6bd"],
            ["#e06666","#f6b26b","#ffd966","#93c47d","#76a5af","#6fa8dc","#8e7cc3","#c27ba0"],
            ["#c00","#e69138","#f1c232","#6aa84f","#45818e","#3d85c6","#674ea7","#a64d79"],
            ["#900","#b45f06","#bf9000","#38761d","#134f5c","#0b5394","#351c75","#741b47"],
            ["#600","#783f04","#7f6000","#274e13","#0c343d","#073763","#20124d","#4c1130"]
        ]
    });
  
    $("#colorpicker-showintial").spectrum({
      showInitial: true
    });
  
    $("#colorpicker-showinput-intial").spectrum({
      showInitial: true,
      showInput: true
    });
  
    
  
  
      //Bootstrap-TouchSpin
      var defaultOptions = {
      };

      // touchspin
      $(".vertical-spin").TouchSpin({
          verticalbuttons: true,
          verticalupclass: 'ion-plus-round',
          verticaldownclass: 'ion-minus-round',
          buttondown_class: 'btn btn-primary',
          buttonup_class: 'btn btn-primary'
      });

      $("input[name='demo1']").TouchSpin({
          min: 0,
          max: 100,
          step: 0.1,
          decimals: 2,
          boostat: 5,
          maxboostedstep: 10,
          postfix: '%',
          buttondown_class: 'btn btn-primary',
          buttonup_class: 'btn btn-primary'
      });
      $("input[name='demo2']").TouchSpin({
          min: -1000000000,
          max: 1000000000,
          stepinterval: 50,
          maxboostedstep: 10000000,
          prefix: '$',
          buttondown_class: 'btn btn-primary',
          buttonup_class: 'btn btn-primary'
      });
      $("input[name='demo3']").TouchSpin({
          initval: 40,
          buttondown_class: 'btn btn-primary',
          buttonup_class: 'btn btn-primary'
      });
      $("input[name='demo3_21']").TouchSpin({
          initval: 40,
          buttondown_class: 'btn btn-primary',
          buttonup_class: 'btn btn-primary'
      });
      $("input[name='demo3_22']").TouchSpin({
          initval: 40,
          buttondown_class: 'btn btn-primary',
          buttonup_class: 'btn btn-primary'
      });

      $("input[name='demo5']").TouchSpin({
          initval: 40,
          prefix: "pre",
          postfix: "post",
          buttondown_class: 'btn btn-primary',
          buttonup_class: 'btn btn-primary'
      });
      $("input[name='demo0']").TouchSpin({
          initval: 40,
          buttondown_class: 'btn btn-primary',
          buttonup_class: 'btn btn-primary'
      });

      $("input[name='demo_vertical']").TouchSpin({
        initval: 40,
        verticalbuttons: true
    });

      //Bootstrap-MaxLength
      $('input#defaultconfig').maxlength({
        warningClass: "badge bg-info",
        limitReachedClass: "badge bg-warning"
      });
  
      $('input#thresholdconfig').maxlength({
        threshold: 20,
        warningClass: "badge bg-info",
        limitReachedClass: "badge bg-warning"
      });
  
      $('input#moreoptions').maxlength({
        alwaysShow: true,
        warningClass: "badge bg-success",
        limitReachedClass: "badge bg-danger"
      });
  
      $('input#alloptions').maxlength({
        alwaysShow: true,
        warningClass: "badge bg-success",
        limitReachedClass: "badge bg-danger",
        separator: ' out of ',
        preText: 'You typed ',
        postText: ' chars available.',
        validate: true
      });
  
      $('textarea#textarea').maxlength({
        alwaysShow: true,
        warningClass: "badge bg-info",
        limitReachedClass: "badge bg-warning"
      });
  
      $('input#placement').maxlength({
        alwaysShow: true,
        placement: 'top-left',
        warningClass: "badge bg-info",
        limitReachedClass: "badge bg-warning"
      });
  
  
    },
      //init
      $.AdvancedForm = new AdvancedForm, $.AdvancedForm.Constructor = AdvancedForm
  }(window.jQuery),
  
    //Datepicker
    function ($) {
      "use strict";
      $.AdvancedForm.init();
    }(window.jQuery);
  
  $(function () {
    'use strict';
  
    var $date = $('.docs-date');
    var $container = $('.docs-datepicker-container');
    var $trigger = $('.docs-datepicker-trigger');
    var options = {
      show: function (e) {
        console.log(e.type, e.namespace);
      },
      hide: function (e) {
        console.log(e.type, e.namespace);
      },
      pick: function (e) {
        console.log(e.type, e.namespace, e.view);
      }
    };
  
    $date.on({
      'show.datepicker': function (e) {
        console.log(e.type, e.namespace);
      },
      'hide.datepicker': function (e) {
        console.log(e.type, e.namespace);
      },
      'pick.datepicker': function (e) {
        console.log(e.type, e.namespace, e.view);
      }
    }).datepicker(options);
  
    $('.docs-options, .docs-toggles').on('change', function (e) {
      var target = e.target;
      var $target = $(target);
      var name = $target.attr('name');
      var value = target.type === 'checkbox' ? target.checked : $target.val();
      var $optionContainer;
  
      switch (name) {
        case 'container':
          if (value) {
            value = $container;
            $container.show();
          } else {
            $container.hide();
          }
  
          break;
  
        case 'trigger':
          if (value) {
            value = $trigger;
            $trigger.prop('disabled', false);
          } else {
            $trigger.prop('disabled', true);
          }
  
          break;
  
        case 'inline':
          $optionContainer = $('input[name="container"]');
  
          if (!$optionContainer.prop('checked')) {
            $optionContainer.click();
          }
  
          break;
  
        case 'language':
          $('input[name="format"]').val($.fn.datepicker.languages[value].format);
          break;
      }
  
      options[name] = value;
      $date.datepicker('reset').datepicker('destroy').datepicker(options);
    });
  
    $('.docs-actions').on('click', 'button', function (e) {
      var data = $(this).data();
      var args = data.arguments || [];
      var result;
  
      e.stopPropagation();
  
      if (data.method) {
        if (data.source) {
          $date.datepicker(data.method, $(data.source).val());
        } else {
          result = $date.datepicker(data.method, args[0], args[1], args[2]);
  
          if (result && data.target) {
            $(data.target).val(result);
          }
        }
      }
    });
  
  });