/*=========================================================================================
    File Name: ex-component-tree-views.js
    Description: Bootstrap Tree View
    ----------------------------------------------------------------------------------------
    Item Name: Modern Admin - Clean Bootstrap 4 Dashboard HTML Template
    Author: PIXINVENT
    Author URL: http://www.themeforest.net/user/pixinvent
==========================================================================================*/
$(document).ready(function () {
  // color variable define here
  var $primary = '#5A8DEE',
    $danger = '#FF5B5C',
    $warning = '#FDAC41',
    $primary_light = '#6999f3',
    $warning_light = '#FFEED9',
    $dark_primary = '#2c6de9',
    $hover_warning = '#fed8a6',
    $white = '#fff';

  // a default data nested arrary for treeview
  var defaultData = [{
      text: 'Parent 1',
      href: '#parent1',
      tags: ['4'],
      nodes: [{
          text: 'Child 1',
          href: '#child1',
          tags: ['2'],
          nodes: [{
              text: 'Grandchild 1',
              href: '#grandchild1',
              tags: ['0']
            },
            {
              text: 'Grandchild 2',
              href: '#grandchild2',
              tags: ['0']
            }
          ]
        },
        {
          text: 'Child 2',
          href: '#child2',
          tags: ['0']
        }
      ]
    },
    {
      text: 'Parent 2',
      href: '#parent2',
      tags: ['0']
    },
    {
      text: 'Parent 3',
      href: '#parent3',
      tags: ['0']
    }, {
      text: 'Parent 4',
      href: '#parent4',
      tags: ['0']
    }, {
      text: 'Parent 5',
      href: '#parent5',
      tags: ['0']
    }
  ];
  // a alternateData  nested arrary for treeview
  var alternateData = [{
    text: 'Parent 1',
    tags: ['2'],
    nodes: [{
      text: 'Child 1',
      tags: ['2'],
      nodes: [{
        text: 'Grandchild 1',
        tags: ['0']
      }, {
        text: 'Grandchild 2',
        tags: ['0']
      }]
    }, {
      text: 'Child 2',
      tags: ['3']
    }]
  }, {
    text: 'Parent 2',
    tags: ['7']
  }, {
    text: 'Parent 3',
    icon: 'feather icon-map',
    href: '#demo',
    tags: ['11']
  }, {
    text: 'Parent 4',
    icon: 'feather icon-download-cloud',
    href: '/index.html',
    tags: ['19'],
    selected: true
  }, {
    text: 'Parent 5',
    icon: 'feather icon-message-square',
    color: [$white],
    backColor: '#FDAC41',
    href: 'http://www.pixinvent.com',
    tags: ['0', 'available']
  }];

  //a json data for json treeview option
  var json = '[' +
    '{' +
    '"text": "Parent 1",' +
    '"nodes": [' +
    '{' +
    '"text": "Child 1",' +
    '"nodes": [' +
    '{' +
    '"text": "Grandchild 1"' +
    '},' +
    '{' +
    '"text": "Grandchild 2"' +
    '}' +
    ']' +
    '},' +
    '{' +
    '"text": "Child 2"' +
    '}' +
    ']' +
    '},' +
    '{' +
    '"text": "Parent 2"' +
    '},' +
    '{' +
    '"text": "Parent 3"' +
    '},' +
    '{' +
    '"text": "Parent 4"' +
    '},' +
    '{' +
    '"text": "Parent 5"' +
    '}' +
    ']';


  // Default Treeview options define here
  $('#default-treeview').treeview({
    selectedBackColor: [$primary],
    data: defaultData
  });

  // Collapsed Treeview options define here
  $('#collapsed-treeview').treeview({
    selectedBackColor: [$primary],
    levels: 1,
    data: defaultData
  });

  // Epanded Treeview options define here
  $('#expanded-treeview').treeview({
    selectedBackColor: [$primary],
    levels: 99,
    data: defaultData
  });

  //  Color treeview options define here
  $('#primary-color-treeview').treeview({
    selectedBackColor: [$primary],
    color: [$danger],
    data: defaultData
  });

  // Custom Icons options define here
  $('#custom-icon-treeview').treeview({
    selectedBackColor: [$primary],
    color: [$primary],
    expandIcon: 'feather icon-chevron-right',
    collapseIcon: 'feather icon-chevron-down',
    nodeIcon: 'feather icon-bookmark',
    data: defaultData
  });

  // Tags as Badges options define here
  $('#tags-badge-treeview').treeview({
    selectedBackColor: [$primary],
    color: [$primary],
    expandIcon: "feather icon-stop-circle",
    collapseIcon: "feather icon-check-square",
    nodeIcon: "feather icon-user",
    showTags: true,
    data: defaultData
  });

  // No Border options define here
  $('#no-border-treeview').treeview({
    selectedBackColor: [$primary],
    color: [$primary],
    showBorder: false,
    data: defaultData
  });


  // Colorful options define here
  $('#colorful-treeview').treeview({
    expandIcon: "feather icon-stop-circle",
    collapseIcon: "feather icon-check-square",
    nodeIcon: "icon-head",
    color: [$white],
    backColor: [$primary],
    onhoverColor: [$primary_light],
    borderColor: [$primary],
    showBorder: false,
    showTags: true,
    highlightSelected: true,
    selectedColor: [$white],
    selectedBackColor: [$dark_primary],
    data: defaultData
  });

  // Node Overrides options define here
  $('#node-override-treeview').treeview({
    expandIcon: "feather icon-stop-circle",
    collapseIcon: "feather icon-check-square",
    nodeIcon: "icon-head",
    color: [$warning],
    backColor: [$warning_light],
    onhoverColor: [$hover_warning],
    borderColor: [$warning_light],
    showBorder: false,
    highlightSelected: true,
    showTags: true,
    selectedColor: [$white],
    selectedBackColor: [$warning],
    data: alternateData
  });

  // Link Enabled options define here
  $('#link-enabled-treeview').treeview({
    selectedBackColor: [$primary],
    color: [$primary],
    enableLinks: true,
    data: defaultData
  });

  // Disabled Tree options define here
  var $disabledTree = $('#disabled-treeview').treeview({
    selectedBackColor: [$primary],
    data: defaultData
  });

  // disabale all btn's method fire here
  $('#btn-disable-all').on('click', function (e) {
    $disabledTree.treeview('disableAll', {
      silent: $('#chk-disable-silent').is(':checked')
    });
  });
  // enable all btn's method fire here
  $('#btn-enable-all').on('click', function (e) {
    $disabledTree.treeview('enableAll', {
      silent: $('#chk-disable-silent').is(':checked')
    });
  });

  // json data treeview options define here
  var $tree = $('#data-treeview').treeview({
    selectedBackColor: [$primary],
    color: [$primary],
    data: json
  });
  // Searchable Tree options define here
  var $searchableTree = $('#searchable-tree').treeview({
    selectedBackColor: [$primary],
    color: [$primary],
    showBorder: true,
    data: defaultData,
  });
  // Searchable Tree's search and checkbox value save into variable here
  var search = function (e) {
    var pattern = $('#input-search').val();
    var options = {
      ignoreCase: $('#chk-ignore-case').is(':checked'),
      exactMatch: $('#chk-exact-match').is(':checked'),
      revealResults: $('#chk-reveal-results').is(':checked')
    };
    // seachable tree checkbox and search value pass here
    var results = $searchableTree.treeview('search', [pattern, options]);
    // Searchable Tree's search Output  print into html
    var output = '<p>' + results.length + ' matches found</p>';
    $.each(results, function (index, result) {
      output += '<p>- ' + result.text + '</p>';
    });
    $('#search-output').html(output);
  }
  // Searchable Tree's seach btn's action define here
  $('#btn-search').on('click', search);
  $('#input-search').on('keyup', search);
  // Searchable Tree's  clear btn's  action define here
  $('#btn-clear-search').on('click', function (e) {
    $searchableTree.treeview('clearSearch');
    $('#input-search').val('');
    $('#search-output').html('');
  });

  //         Expand & Collapse All      //
  // --------------------------------------

  // Expand / Collapse All options define here
  var $expandibleTree = $('#expandible-tree').treeview({
    selectedBackColor: [$primary],
    data: defaultData,
  });

  // Expand btn's method fire here
  $('#btn-expand-all').on('click', function (e) {
    var levels = $('#select-expand-all-levels').val();
    $expandibleTree.treeview('expandAll', {
      levels: 2
    });
  });
  //  Collapse btn's methode fire here
  $('#btn-collapse-all').on('click', function (e) {
    $expandibleTree.treeview('collapseAll');
  });

  //         Check and Uncked All    //
  // ----------------------------------

  // Check / Uncheck All's options define
  var $checkableTree = $('#checkable-tree').treeview({
    selectedBackColor: [$primary],
    data: defaultData,
    showIcon: false,
    showCheckbox: true,
  });

  // check all btn's methode fire here
  $('#btn-check-all').on('click', function (e) {
    $checkableTree.treeview('checkAll', {
      silent: $('#chk-check-silent').is(':checked')
    });
  });
  //uncheck all btn's methode fire here
  $('#btn-uncheck-all').on('click', function (e) {
    $checkableTree.treeview('uncheckAll', {
      silent: $('#chk-check-silent').is(':checked')
    });
  });
});