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

    File Name: users-contacts.js

    Description: Users contacts configurations

    ----------------------------------------------------------------------------------------

    Item Name: Modern Admin - Clean Bootstrap 4 Dashboard HTML Template

    Author: Pixinvent

    Author URL: http://www.themeforest.net/user/pixinvent

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



$.fn.raty.defaults.path = '../../../app-assets/images/raty/';



$(document).ready(function () {



  if ($('.sidebar-detached.sidebar-left').length > 0) {

    var sidebar_fixed = new PerfectScrollbar('.sidebar-detached.sidebar-left', {

      wheelPropagation: false,

    });

  }

  // checkbox check all on click

  $("input#checkboxsmallall").on("click", function () {

    if ($("input:checked#checkboxsmallall").length > 0) {

      $("input:not(:checked)").prop('checked', true);

    }

    else {

      $("input:checked").prop('checked', false);

    }

  });



  var userDataTable = $('#users-contacts').DataTable({

    'order': [

      [1, '']

    ]

  });

  // Set the search textbox functionality in sidebar

  $('#search-contacts').on('keyup', function () {

    userDataTable.search(this.value).draw();

  });



  userDataTable.on('draw.dt', function () {



    // Favorite initialization and usage

    $('.favorite').on('click', function () {

      $(this).toggleClass('active');

      $('.favorite').raty({

        number: 1,

        hints: ['Favorite']

      });

      $('.favorite.active').raty({

        number: 1,

        hints: ['Favorite'],

        score: 1

      });

    });

    $('.favorite').raty({

      number: 1,

      hints: ['Favorite']

    });

    $('.favorite.active').raty({

      number: 1,

      hints: ['Favorite'],

      score: 1

    });

  });



  $('.favorite').on('click', function () {

    $(this).toggleClass('active');

    $('.favorite').raty({

      number: 1,

      hints: ['Favorite']

    });

    $('.favorite.active').raty({

      number: 1,

      hints: ['Favorite'],

      score: 1

    });

  });

  $('.favorite').raty({

    number: 1,

    hints: ['Favorite']

  });

  $('.favorite.active').raty({

    number: 1,

    hints: ['Favorite'],

    score: 1

  });



  // Add new contact

  var counter = 1;



  $('#add-contact-item').on('click', function (e) {

    e.preventDefault();

    var name = $("#contact-name").val();

    var email = $("#contact-email").val();

    var contact = $("#contact-phone").val();

    var image = $("#user-image").val();

    var fav = $("#favorite:checked").val(),

      favClass = "";

    if (fav == 'on') {

      favClass = " active";

    }



    userDataTable.row.add([

      '<div class="custom-control custom-checkbox">' +

      '<input type="checkbox" class="custom-control-input" id="checkboxsmallall1234">' +

      '<label class="custom-control-label" for="checkboxsmallall1234"></label>' +

      '</div>',

      '<div class="media">' +

      '<div class="media-left pr-1"><span class="avatar avatar-sm avatar-online rounded-circle"><img src="../../../app-assets/images/portrait/small/avatar-s-2.png" alt="avatar"><i></i></span></div>' +

      '<div class="media-body media-middle">' +

      '<a class="name" class="media-heading">' + name + '</a>' +

      '</div>' +

      '</div>',

      '<a class="email" href="' + email + '">' + email + '</a>',

      '<span class="phone">' + contact + '</span>',

      '<div class="favorite ' + favClass + '"></div>',

      '<a data-toggle="modal" data-target="#EditContactModal" class="primary edit mr-1"><i class="la la-pencil"></i></a>' +

      '<a class="danger delete mr-1"><i class="la la-trash-o"></i></a>' +

      '<span class="dropdown">' +

      '<a id="btnSearchDrop2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true" class="dropdown-toggle dropdown-menu-right"><i class="la la-ellipsis-v"></i></a>' +

      '<span aria-labelledby="btnSearchDrop2" class="dropdown-menu mt-1 dropdown-menu-right">' +

      '<a data-toggle="modal" data-target="#EditContactModal" class="dropdown-item edit"><i class="ft-edit-2"></i> Edit</a>' +

      '<a href="#" class="dropdown-item delete"><i class="ft-trash-2"></i> Delete</a>' +

      '<a href="#" class="dropdown-item"><i class="ft-plus-circle primary"></i> Projects</a>' +

      '<a href="#" class="dropdown-item"><i class="ft-plus-circle info"></i> Team</a>' +

      '<a href="#" class="dropdown-item"><i class="ft-plus-circle warning"></i> Clients</a>' +

      '<a href="#" class="dropdown-item"><i class="ft-plus-circle success"></i> Friends</a>' +

      '</span>' +

      '</span>'

    ]).draw(false);



    counter++;

  });



  var currentRow = null;



  $(document).on('click', '.edit', function () {

    currentRow = $(this).parents('tr');

    $("#phone").val("");

    $("#name").val($(this).closest('tr').find('td .name').text());

    $("#email").val($(this).closest('tr').find('.email').text());

    $("#phone").val($(this).closest('tr').find('td.phone', 'td .phone').text());

    $("#fav").val('');

    if ($(this).closest('tr').find('.favorite').hasClass('active')) {

      $("#fav").text('active');

    }

  });

  // Edit item

  $('#edit-contact-item').on('click', function (e) {

    e.preventDefault();

    var name = $("#name").val();

    var email = $("#email").val();

    var contact = $("#phone").val();

    var favClass = $("#fav").text();



    userDataTable.row(currentRow).data([

      '<div class="custom-control custom-checkbox">' +

      '<input type="checkbox" class="custom-control-input" id="checkboxsmallall123">' +

      '<label class="custom-control-label" for="checkboxsmallall123"></label>' +

      '</div>',

      '<div class="media">' +

      '<div class="media-left pr-1"><span class="avatar avatar-sm avatar-online rounded-circle"><img src="../../../app-assets/images/portrait/small/avatar-s-2.png" alt="avatar"><i></i></span></div>' +

      '<div class="media-body media-middle">' +

      '<a class="name" class="media-heading">' + name + '</a>' +

      '</div>' +

      '</div>',

      '<a class="email" href="' + email + '">' + email + '</a>',

      '<span class="phone">' + contact + '</span>',

      '<div class="favorite ' + favClass + '"></div>',

      '<a data-toggle="modal" data-target="#EditContactModal" class="primary edit mr-1"><i class="la la-pencil"></i></a>' +

      '<a class="danger delete mr-1"><i class="la la-trash-o"></i></a>' +

      '<span class="dropdown">' +

      '<a id="btnSearchDrop2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true" class="dropdown-toggle dropdown-menu-right"><i class="la la-ellipsis-v"></i></a>' +

      '<span aria-labelledby="btnSearchDrop2" class="dropdown-menu mt-1 dropdown-menu-right">' +

      '<a data-toggle="modal" data-target="#EditContactModal" class="dropdown-item edit"><i class="ft-edit-2"></i> Edit</a>' +

      '<a href="#" class="dropdown-item delete"><i class="ft-trash-2"></i> Delete</a>' +

      '<a href="#" class="dropdown-item"><i class="ft-plus-circle primary"></i> Projects</a>' +

      '<a href="#" class="dropdown-item"><i class="ft-plus-circle info"></i> Team</a>' +

      '<a href="#" class="dropdown-item"><i class="ft-plus-circle warning"></i> Clients</a>' +

      '<a href="#" class="dropdown-item"><i class="ft-plus-circle success"></i> Friends</a>' +

      '</span>' +

      '</span>'

    ]).draw();



    counter++;

  });



  $(".modal").on("hidden.bs.modal", function () {

    $(".modal-body input").val("")

  });



  // Delete row

  $('#users-contacts').on("click", ".delete", function () {

    userDataTable.row($(this).parents('tr')).remove().draw();

  });



  // Main menu toggle should hide app menu

  $('.menu-toggle').on('click', function (e) {

    $('.app-content .sidebar-left').removeClass('show');

    $('.app-content .content-overlay').removeClass('show');

  });



  // Chat sidebar toggle

  $('.sidebar-toggle').on('click', function (e) {

    e.stopPropagation();

    $('.app-content .sidebar-left').toggleClass('show');

    $('.app-content .content-overlay').addClass('show');

  });

  $('.app-content .content-overlay').on('click', function (e) {

    $('.app-content .sidebar-left').removeClass('show');

    $('.app-content .content-overlay').removeClass('show');

  });



  // For chat sidebar on small screen

  if ($(window).width() > 992) {

    if ($('.app-content .content-overlay').hasClass('show')) {

      $('.app-content .content-overlay').removeClass('show');

    }

  }



});



$(window).on("resize", function () {

  // remove show classes from sidebar and overlay if size is > 992

  if ($(window).width() > 992) {

    if ($('.app-content .content-overlay').hasClass('show')) {

      $('.app-content .sidebar-left').removeClass('show');

      $('.app-content .content-overlay').removeClass('show');

    }

  }

});

