@extends('modules.head') @section('contenido')

<div>
  @csrf
  <div class="form-row">
    <div class="form-group">
      <h4>Pick a role:</h4>
      <select name="rolItems" id="rolItems" class="form-control" onchange="onChangeRols(this)">
        <option selected>Choose...</option>
        @foreach ($roles_names as $item)
        <option value="{{$item->name}}" data-id="{{$item->id}}" data-moduleitems="{{$item->modules_items}}">
          {{$item->name}}
        </option>
        @endforeach
      </select>
    </div>
    <div class="form-group">
      <h4>Link new module items to selected role:</h4>
      <select name="moduleItem" id="moduleItem" class="form-control" onchange="onChangeModuleItems(this)">
        <option selected>Choose...</option>
        @foreach ($module_items_names as $item)
        <option value="{{$item->name}}" data-id="{{$item->id}}"> {{$item->name}} </option>
        @endforeach
      </select>
    </div>
  </div>
  <input name='tags_canvas' value=''><br><br>
  <input name='new_tags_canvas' value=''><br>
  <div id="alert" style="color: #3c8dbc; visibility:hidden">
    <h4>Item already linked!</h4>
  </div>
  <a href="{{url('rolmanagement')}}"><button id="submit" class="btn btn-primary" disabled>Set Relation</button></a>
  <a href="{{url('rolmanagement')}}"><button id="cancelbtn" class="btn btn-danger">Cancel</button></a>
</div>
<script src="{{ asset('js/jQuery/jquery-2.2.3.min.js') }}"></script>
<script src="{{ asset('js/bootstrap/js/bootstrap.min.js') }}"></script>
<script type="text/javascript">
  let alert = document.querySelector("#alert");
  // working with base tags
  let input = document.querySelector('input[name=tags_canvas]'),
    tagify = new Tagify(input, {
      userInput: false
    });
  tagify.on('remove', onRemoveTag);
  let tagsArray = [];
  let base_values = [];
  let ajaxObjToSend = {
    idRol: 0,
    idRemove: [],
    toAdd: []
  };

  const onChangeRols = (e) => {
    $("#submit").prop("disabled", true);
    tagsArray.length = 0;
    let option = e.options[e.selectedIndex];
    ajaxObjToSend.idRol = JSON.parse(option.dataset.id);
    let arrayItems = JSON.parse(option.dataset.moduleitems);
    if (e.value != "Choose...") {
      $("#submit").prop("disabled", false);
      for (let i = 0; i < arrayItems.length; i++) {
        base_values.push(arrayItems[i].name);
        tagsArray.push({
          value: arrayItems[i].name,
          id: arrayItems[i].id
        });
        input.value = JSON.stringify(tagsArray);
      }
    }
  }

  // tag removed callback
  function onRemoveTag(e) {
    ajaxObjToSend.idRemove.push(e.detail.data.id);
    alert.style.visibility = "hidden";
    //updating array after removing a tag
    let filteredArr = tagsArray.filter((item) => {
      return item.value != e.detail.data.value;
    });
    tagsArray = filteredArr;
  }


  // working with new tags
  let input1 = document.querySelector('input[name=new_tags_canvas]'),
    tagify1 = new Tagify(input1, {
      userInput: false
    });
  tagify1.on('remove', onRemoveTag1);
  let tagsArray1 = [];

  // adding items to the array
  const onChangeModuleItems = (select) => {
    if (!base_values.includes(select.value)) {
      alert.style.visibility = "hidden";
      let option = select.options[select.selectedIndex];
      if (select.value != "Choose...") {
        tagsArray1.push({
          value: select.value,
          id: option.dataset.id
        });
        input1.value = JSON.stringify(tagsArray1);

        ajaxObjToSend.toAdd.push(JSON.parse(option.dataset.id));
      }
    } else {
      alert.style.visibility = "visible";
    }
  }
  // tag removed callback
  function onRemoveTag1(e) {
    alert.style.visibility = "hidden";
    //updating array after removing a tag
    let filteredArr = tagsArray1.filter((item) => {
      return item.value != e.detail.data.value;
    });
    tagsArray1 = filteredArr;
    for (let i = 0; i < tagsArray1.length; i++) {
      ajaxObjToSend.toAdd.push(JSON.parse(tagsArray1[i].id));
    }

  }

  //ajax call to server
  function makeAjaxCall(url, data) {
    $.ajax({
      url: url,
      type: "POST",
      contentType: "application/json",
      headers: {
        "X-CSRF-TOKEN": $('meta[name="csrf-token"]').attr("content"),
        "Content-Type": "application/json",
      },
      data: JSON.stringify(data),
      success: function(r) {
        console.log(r)
      },
      complete: function() {
        $("#submit").prop("disabled", true)
      },
      error: function(e) {
        console.log(e)
      },
    });
  }

  let button = document.querySelector("#submit");
  button.addEventListener("click", function() {
    makeAjaxCall("handleForm", ajaxObjToSend);
  });
</script>
@endsection