$(document).ready(function() {

  checkall('contact-check-all', 'contact-chkbox');

  $('#input-search').on('keyup', function() {
    var rex = new RegExp($(this).val(), 'i');
      $('.searchable-items .items:not(.items-header-section)').hide();
      $('.searchable-items .items:not(.items-header-section)').filter(function() {
          return rex.test($(this).text());
      }).show();
  });

  $('.view-grid').on('click', function(event) {
    event.preventDefault();
    /* Act on the event */

    $(this).parents('.switch').find('.view-list').removeClass('active-view');
    $(this).addClass('active-view');

    $(this).parents('.searchable-container').removeClass('list');
    $(this).parents('.searchable-container').addClass('grid');

    $(this).parents('.searchable-container').find('.searchable-items').removeClass('list');
    $(this).parents('.searchable-container').find('.searchable-items').addClass('grid');

  });

  $('.view-list').on('click', function(event) {
    event.preventDefault();
    /* Act on the event */
    $(this).parents('.switch').find('.view-grid').removeClass('active-view');
    $(this).addClass('active-view');

    $(this).parents('.searchable-container').removeClass('grid');
    $(this).parents('.searchable-container').addClass('list');

    $(this).parents('.searchable-container').find('.searchable-items').removeClass('grid');
    $(this).parents('.searchable-container').find('.searchable-items').addClass('list');
  });

  $('#btn-add-contact').on('click', function(event) {
    $('#addContactModal #btn-add').show();
    $('#addContactModal #btn-edit').hide();
    $('#addContactModal').modal('show');
  })

function deleteContact() {
  $(".delete").on('click', function(event) {
    event.preventDefault();
    /* Act on the event */
    $(this).parents('.items').remove();
  });
}

function addContact() {
  $("#btn-add").click(function() {

    var getParent = $(this).parents('.modal-content');

    var $_name = getParent.find('#c-name');
    var $_email = getParent.find('#c-email');
    var $_occupation = getParent.find('#c-occupation');
    var $_phone = getParent.find('#c-phone');
    var $_location = getParent.find('#c-location');

    var $_getValidationField = document.getElementsByClassName('validation-text');
    var reg = /^.+@[^\.].*\.[a-z]{2,}$/;
    var phoneReg = /^\d*\.?\d*$/;

    var $_nameValue = $_name.val();
    var $_emailValue = $_email.val();
    var $_occupationValue = $_occupation.val();
    var $_phoneValue = $_phone.val();
    var $_locationValue = $_location.val();

    if ($_nameValue == "") {
      $_getValidationField[0].innerHTML = 'Name must be filled out';
      $_getValidationField[0].style.display = 'block';
    } else {
      $_getValidationField[0].style.display = 'none';
    }

    if ($_emailValue == "") {
      $_getValidationField[1].innerHTML = 'Email Id must be filled out';
      $_getValidationField[1].style.display = 'block';
    } else if((reg.test($_emailValue) == false)) {
      $_getValidationField[1].innerHTML = 'Invalid Email';
      $_getValidationField[1].style.display = 'block';
    } else {
      $_getValidationField[1].style.display = 'none';
    }

    if ($_phoneValue == "") {
      $_getValidationField[2].innerHTML = 'Invalid (Enter 10 Digits)';
      $_getValidationField[2].style.display = 'block';
    } else if((phoneReg.test($_phoneValue) == false)) {
      $_getValidationField[2].innerHTML = 'Please Enter A numeric value';
      $_getValidationField[2].style.display = 'block';
    } else {
      $_getValidationField[2].style.display = 'none';
    }

    if ($_nameValue == "" || $_emailValue == "" || (reg.test($_emailValue) == false) || $_phoneValue == "" || (phoneReg.test($_phoneValue) == false)) {
      return false;
    }

    $html = '<div class="items">' +
              '<div class="item-content">' +
                  '<div class="user-profile">' +

                      '<div class="n-chk align-self-center text-center">' +
                          '<label class="new-control new-checkbox checkbox-primary">' +
                            '<input type="checkbox" class="new-control-input contact-chkbox">' +
                            '<span class="new-control-indicator"></span>' +
                          '</label>' +
                      '</div>' +

                      '<img src="assets/img/90x90.jpg">' +
                      '<div class="user-meta-info">' +
                          '<p class="user-name" data-name='+ $_nameValue +'>'+ $_nameValue +'</p>' +
                          '<p class="user-work" data-occupation='+ $_occupationValue +'>'+ $_occupationValue +'</p>' +
                      '</div>' +
                  '</div>' +
                  '<div class="user-email">' +
                      '<p class="info-title">Email: </p>' +
                      '<p class="usr-email-addr" data-email='+ $_emailValue +'>'+ $_emailValue +'</p>' +
                  '</div>' +
                  '<div class="user-location">' +
                      '<p class="info-title">Location: </p>' +
                      '<p class="usr-location" data-location='+ $_locationValue +'>'+ $_locationValue +'</p>' +
                  '</div>' +
                  '<div class="user-phone">' +
                      '<p class="info-title">Phone: </p>' +
                      '<p class="usr-ph-no" data-phone='+ $_phoneValue +'>'+ $_phoneValue +'</p>' +
                  '</div>' +
                  '<div class="action-btn">' +
                      '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-edit-2 edit"><path d="M17 3a2.828 2.828 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5L17 3z"></path></svg>'+
                      '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-user-minus delete"><path d="M16 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path><circle cx="8.5" cy="7" r="4"></circle><line x1="23" y1="11" x2="17" y2="11"></line></svg>'
                  '</div>' +
              '</div>' +
          '</div>';

      $(".searchable-items > .items-header-section").after($html);
      $('#addContactModal').modal('hide');

      var $_setNameValueEmpty = $_name.val('');
      var $_setEmailValueEmpty = $_email.val('');
      var $_setOccupationValueEmpty = $_occupation.val('');
      var $_setPhoneValueEmpty = $_phone.val('');
      var $_setLocationValueEmpty = $_location.val('');

    deleteContact();
    editContact();
    checkall('contact-check-all', 'contact-chkbox');
  });  
}

$('#addContactModal').on('hidden.bs.modal', function (e) {
    var $_name = document.getElementById('c-name');
    var $_email = document.getElementById('c-email');
    var $_occupation = document.getElementById('c-occupation');
    var $_phone = document.getElementById('c-phone');
    var $_location = document.getElementById('c-location');
    var $_getValidationField = document.getElementsByClassName('validation-text');

    var $_setNameValueEmpty = $_name.value = '';
    var $_setEmailValueEmpty = $_email.value = '';
    var $_setOccupationValueEmpty = $_occupation.value = '';
    var $_setPhoneValueEmpty = $_phone.value = '';
    var $_setLocationValueEmpty = $_location.value = '';

    for (var i = 0; i < $_getValidationField.length; i++) {
      e.preventDefault();
      $_getValidationField[i].style.display = 'none';
    }
})

function editContact() {
  $('.edit').on('click', function(event) {

    $('#addContactModal #btn-add').hide();
    $('#addContactModal #btn-edit').show();

    // Get Parents
    var getParentItem = $(this).parents('.items');
    var getModal = $('#addContactModal');

    // Get List Item Fields
    var $_name = getParentItem.find('.user-name');
    var $_email = getParentItem.find('.usr-email-addr');
    var $_occupation = getParentItem.find('.user-work');
    var $_phone = getParentItem.find('.usr-ph-no');
    var $_location = getParentItem.find('.usr-location');

    // Get Attributes
    var $_nameAttrValue = $_name.attr('data-name');
    var $_emailAttrValue = $_email.attr('data-email');
    var $_occupationAttrValue = $_occupation.attr('data-occupation');
    var $_phoneAttrValue = $_phone.attr('data-phone');
    var $_locationAttrValue = $_location.attr('data-location');

    // Get Modal Attributes
    var $_getModalNameInput = getModal.find('#c-name');
    var $_getModalEmailInput = getModal.find('#c-email');
    var $_getModalOccupationInput = getModal.find('#c-occupation');
    var $_getModalPhoneInput = getModal.find('#c-phone');
    var $_getModalLocationInput = getModal.find('#c-location');

    // Set Modal Field's Value
    var $_setModalNameValue = $_getModalNameInput.val($_nameAttrValue);
    var $_setModalEmailValue = $_getModalEmailInput.val($_emailAttrValue);
    var $_setModalOccupationValue = $_getModalOccupationInput.val($_occupationAttrValue);
    var $_setModalPhoneValue = $_getModalPhoneInput.val($_phoneAttrValue);
    var $_setModalLocationValue = $_getModalLocationInput.val($_locationAttrValue);

    $('#addContactModal').modal('show');

    $("#btn-edit").click(function(){

      var getParent = $(this).parents('.modal-content');

      var $_getInputName = getParent.find('#c-name');
      var $_getInputNmail = getParent.find('#c-email');
      var $_getInputNccupation = getParent.find('#c-occupation');
      var $_getInputNhone = getParent.find('#c-phone');
      var $_getInputNocation = getParent.find('#c-location');


      var $_nameValue = $_getInputName.val();
      var $_emailValue = $_getInputNmail.val();
      var $_occupationValue = $_getInputNccupation.val();
      var $_phoneValue = $_getInputNhone.val();
      var $_locationValue = $_getInputNocation.val();

      var  setUpdatedNameValue = $_name.text($_nameValue);
      var  setUpdatedEmailValue = $_email.text($_emailValue);
      var  setUpdatedOccupationValue = $_occupation.text($_occupationValue);
      var  setUpdatedPhoneValue = $_phone.text($_phoneValue);
      var  setUpdatedLocationValue = $_location.text($_locationValue);

      var  setUpdatedAttrNameValue = $_name.attr('data-name', $_nameValue);
      var  setUpdatedAttrEmailValue = $_email.attr('data-email', $_emailValue);
      var  setUpdatedAttrOccupationValue = $_occupation.attr('data-occupation', $_occupationValue);
      var  setUpdatedAttrPhoneValue = $_phone.attr('data-phone', $_phoneValue);
      var  setUpdatedAttrLocationValue = $_location.attr('data-location', $_locationValue);
      $('#addContactModal').modal('hide');
    });
  })
}

$(".delete-multiple").on("click", function() {
    var inboxCheckboxParents = $(".contact-chkbox:checked").parents('.items');   
      inboxCheckboxParents.remove();
});

deleteContact();
addContact();
editContact();

})


// Validation Process

var $_getValidationField = document.getElementsByClassName('validation-text');
var reg = /^.+@[^\.].*\.[a-z]{2,}$/;
var phoneReg = /^\d{10}$/;

getNameInput = document.getElementById('c-name');

getNameInput.addEventListener('input', function() {

  getNameInputValue = this.value;

  if (getNameInputValue == "") {
    $_getValidationField[0].innerHTML = 'Name Required';
    $_getValidationField[0].style.display = 'block';
  } else {
    $_getValidationField[0].style.display = 'none';
  }

})


getEmailInput = document.getElementById('c-email');

getEmailInput.addEventListener('input', function() {

    getEmailInputValue = this.value;

    if (getEmailInputValue == "") {
      $_getValidationField[1].innerHTML = 'Email Required';
      $_getValidationField[1].style.display = 'block';
    } else if((reg.test(getEmailInputValue) == false)) {
      $_getValidationField[1].innerHTML = 'Invalid Email';
      $_getValidationField[1].style.display = 'block';
    } else {
      $_getValidationField[1].style.display = 'none';
    }

})

getPhoneInput = document.getElementById('c-phone');

getPhoneInput.addEventListener('input', function() {

  getPhoneInputValue = this.value;

  if (getPhoneInputValue == "") {
    $_getValidationField[2].innerHTML = 'Phone Number Required';
    $_getValidationField[2].style.display = 'block';
  } else if((phoneReg.test(getPhoneInputValue) == false)) {
    $_getValidationField[2].innerHTML = 'Invalid (Enter 10 Digits)';
    $_getValidationField[2].style.display = 'block';
  } else {
    $_getValidationField[2].style.display = 'none';
  }

})