// Javascript

import $ from 'jquery'
import 'bootstrap';
import 'bootstrap-select';
import 'bootstrap-validator';
import 'bootstrap-fileinput';


// CSS

import 'bootstrap/dist/css/bootstrap.css';
import 'bootstrap-select/dist/css/bootstrap-select.css';
import 'bootstrap-fileinput/css/fileinput.css';

import '@fortawesome/fontawesome-free/css/all.css';

import './style.css'

$(function () {
  
  $("#myInput").on("keyup", function(eventObject) {
    
    var input, filter, ul, li, a, i;

    input = eventObject.currentTarget;
    filter = input.value.toUpperCase();
    ul = document.getElementById("myUL");
    li = ul.getElementsByTagName('a');

    // Loop through all list items, and hide those who don't match the search query
    for (i = 0; i < li.length; i++) {
      a = li[i]; //li[i].getElementsByTagName("a")[0];
      if (a.innerHTML.toUpperCase().indexOf(filter) > -1) {
	li[i].style.display = "";
      } else {
	li[i].style.display = "none";
      }
    }

  });

  function checkUsernameInputHandler(eventObject) {
    var input_el = $(eventObject.currentTarget);
    var data = JSON.stringify({"username": input_el.val()});
    var url = `/teachers/check_username/${input_el.val()}`
        
    $.post(
      url,
      data,
      function(result) {
	if (result.exists) {
	  console.log("Username exists");
	}
      },
      "json"
    );
  }

  function usernameGenerator(eventObject, firstname, surname) {
    var input_el = $(eventObject.currentTarget);
    input_el.val(firstname+"."+surname);
  }

  function deleteRelationHandler(eventObject) {
    var url = this.dataset.url;
    var modalEl = $('#karmen-modal-remove');
    
    var el = $(this);

    modalEl.modal({backdrop: 'static'}).one('click', '#karmen-modal-btn-confirm', function() {
    
      $.ajax({
	url: url,
	type: 'DELETE',
	success: function(result) {
	  el.closest(".list-group-item").remove();
	  modalEl.modal('hide');
	}
      });
      
    });
    
    return false;
  };

  function deleteHandler(eventObject) {
    var url = this.dataset.url;
    var modalEl = $('#karmen-modal-remove');
    
    var el = $(this);

    modalEl.modal({backdrop: 'static'}).one('click', '#karmen-modal-btn-confirm', function() {
      
      $.ajax({
	url: url,
	type: 'DELETE',
	success: function(result) {
	  modalEl.modal('hide');
	  window.location.replace(result.redirect_url);
	}
      });
      
    });
    
    return false;
  };
  
  $(".ajax-post").on("click", function(eventObject) {
    var select_el = $("#"+this.dataset.select).first();
    var listgroup_el = $("#"+this.dataset.listgroup).first();
    var url = this.dataset.url;
    var data = JSON.stringify({"ids": select_el.val()});
    
    $.post(
      url,
      data,
      function(result) {
	var i;
	if (result.elements != null) {
	  for (i = 0; i < result.elements.length; i++) {
	    var newItem = `
		<a href="#" class="list-group-item clearfix">
		<span class="glyphicon glyphicon-book"></span>
		${result.elements[i].Name}
		<span class="pull-right">
		<button data-url="/${result.name1}/${result.id1}/${result.name2}/${result.id2[i]}/delete" class="btn btn-xs btn-warning karmen-ajax-delete">
		<span class="glyphicon glyphicon-trash"></span>
		</button>
	      </span>
	      `;
	    $(listgroup_el).append(newItem);
	    $(".karmen-ajax-delete").on("click", deleteHandler);
	  }
	}
      
      },
      "json"
    );

    select_el.val('default');
    select_el.selectpicker("refresh");
    
    return false;
    
  });

  $(".karmen-ajax-delete-relation").on("click", deleteRelationHandler);
  $(".karmen-ajax-delete").on("click", deleteHandler);

});