{{-- <div class="modal-header px-0">
    <h5 class="modal-title text-primary" id="tagModalLabel">Add Tag</h5>
    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
  </div>
  <div class="bd-example">
    <form method="POST" href="javascript void(0)" action="{{ route('createTag') }}" name="createTagForm" id="createTagForm">
      @csrf
      <div class="col py-1 mt-3">
        <label for="" class="form-label">Focus Area</label>
        <select name="parent_id" id="parent_id" class="form-control">
            <option value="">select..</option>
            @foreach ($focus_area as $item)
              <option value="{{ $item->id}}">{{ $item->fa_full_form}}</option>
            @endforeach
        </select>
      </div>
      <div class="col py-1">
        <label for="" class="form-label">Tag</label>
        <input type="text" class="form-control" id="tag" name="tag" required>
      </div>
      <div class="modal-footer border-0">
        <a class="btn btn-primary btn-rounded px-4 btn-sm my-2" id="submitTag">Add Tag</a> 
        <a class="btn btn-secondary btn-rounded px-4 btn-sm my-2" data-bs-dismiss="modal" aria-label="Close">Cancel</a> 
      </div>
    </form>
  </div>
   --}}

  <div class="modal-header px-0">
    <h5 class="modal-title text-primary" id="">Tags</h5>
    <button type="button" class="btn-close"  onclick="location.reload()" aria-label="Close"></button>
  </div>
  <h4 class="pt-3 text-underline">{{$accountabilities->focusArea->fa_full_form}}</h4>
  <h5 class=" mt-3 fw-bold">{{$accountabilities->accountabilities}}</h5>
  <p>{{$accountabilities->description}}</p>
  <div class="bd-example">
    <form method="POST" href="javascript void(0)"  name="addTagForm" id="addTagForm">
      @csrf
      <input type="hidden" id="parent_id" name="parent_id" value="{{ $parent_id }}">
      <label class="mb-2">Adding Tags</label>
      <input id="demo-1" type="text" placeholder="Enter something">
      <div class="modal-footer">
        {{-- <a class="btn btn-primary btn-rounded px-4 btn-sm my-2 submitTags" id="submitTags">Add Tag</a>  --}}
        <a class="btn btn-primary btn-rounded px-4 btn-sm my-2" onclick="location.reload()" aria-label="Close">OK</a> 
      </div>
    </form>
  </div>

<script>
var APP_URL  = "{{ url('')}}";
var items = {!! json_encode($items) !!};
$(document).ready(function() {
const element = document.getElementById('demo-1');
const example = new Choices(element,{
        // delimiter: ',',
        editItems: true,
        removeItemButton: true,
        removeItems: true,
        paste: true,
    }).setValue(items);

element.addEventListener(
  'addItem',
    function(event) {
      $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': jQuery('meta[name="csrf-token"]').attr('content')
            }
        });
        let formData =$('#createTagForm').serialize();
        var parent_id = $('#parent_id').val()
        $.ajax({
            data:{parent_id: parent_id, tag: event.detail.value},
            url: APP_URL + "/admin/tag/create-tag",
            type: "POST",
            dataType: 'html',
            success: function(result) {
              addTag(parent_id);
            },
            error:function (response){

            },
        });  
    },
    false,
  );

  element.addEventListener(
    'removeItem',
    function(event) {
      var parent_id = $('#parent_id').val()
      $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': jQuery('meta[name="csrf-token"]').attr('content')
            }
        });
        $.ajax({
            data:{tag_id: event.detail.value},
            url: APP_URL + "/admin/tag/delete-tag",
            type: "POST",
            dataType: 'html',
            success: function(result) {
              addTag(parent_id);
            },
            error:function (response){

            },
        });  

    },
    false,
  );

    // var firstElement = document.getElementById('demo-1');
    // var choices1 = new Choices(firstElement, {
    //     // delimiter: ',',
    //     editItems: true,
    //     removeItemButton: true,
    //     removeItems: true,
    //     paste: true,
    // }
    
    
    // );

    });

    function addTag(parent_id) {
      $.ajaxSetup({
                  headers: {
                      'X-CSRF-TOKEN': jQuery('meta[name="csrf-token"]').attr('content')
                  }
              });
              $.ajax({
                  data:{parent_id: parent_id},
                  url: APP_URL + "/admin/tag/open-create-form",
                  type: "POST",
                  dataType: 'html',
                  success: function(result) {
                      $('#tagModal').modal('show');
                      $('#tagModalBody').html(result);
                  },
                  error:function (response){},
                  complete:function(data){
                      
                  }
              });  
    }

  </script>
    <style>
      .choices__list--multiple .choices__item {color: #000 !important; background-color: rgb(234, 233, 233) !important}
    </style>