@extends('includes.layout')
@section('content')

<div class="p-4 overflow-y-auto h-5/6">
    <nav aria-label="breadcrumb" class="w-max">
    <ol class="flex flex-wrap items-center w-full px-4 py-2 rounded-md bg-blue-gray-50 bg-opacity-60">
        <li
        class="flex items-center font-sans text-sm antialiased font-normal leading-normal transition-colors duration-300 cursor-pointer text-blue-gray-900 hover:text-light-blue-500">
        <a href="/settings" class="opacity-60">
            <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4" viewBox="0 0 20 20"
            fill="currentColor">
            <path
                d="M10.707 2.293a1 1 0 00-1.414 0l-7 7a1 1 0 001.414 1.414L4 10.414V17a1 1 0 001 1h2a1 1 0 001-1v-2a1 1 0 011-1h2a1 1 0 011 1v2a1 1 0 001 1h2a1 1 0 001-1v-6.586l.293.293a1 1 0 001.414-1.414l-7-7z">
            </path>
            </svg>
        </a>
        <span
            class="mx-2 font-sans text-sm antialiased font-normal leading-normal pointer-events-none select-none text-blue-gray-500">
            /
        </span>
        </li>
        <li
        class="flex items-center font-sans text-sm antialiased font-normal leading-normal transition-colors duration-300 cursor-pointer text-blue-gray-900 hover:text-light-blue-500">
        <a href="/departments" class="opacity-60">
            <span>
               departments
            </span>
        </a>
        </li>
    </ol>
    </nav>
    <h1 class="text-2xl font-sans font-bold">Department Management</h1>
    <br>
    
  
   
    <div class="flex w-full gap-10">

<!-- -------------------------- Add/ Modify Group --------------------------- -->

   
<script>
    function Fun_save(event) {

        var checker = $(event).text();
        if(checker == 'Save') {
            var name = $('#GroupName').val();
            if(name == '') {
                alert('Please Enter Name....');
            }else {
                $.ajax({
                    type: "post",
                    url: "{{ route('autonomous-level') }}",
                    headers: {
                        'X-CSRF-TOKEN': '{{ csrf_token() }}'
                    },
                    data: {
                        ref: 'Group_Management',
                        name: name
                    },
                    success: function(result) {
                        if(result.message) {
                            $('#GroupName').val('');
                            alert(result.message);
                            location.reload();
                            // getdata_group()
                        }
                    }
                })
            }
        }else if(checker == 'Update') {
            var name = $('#GroupName').val();
            if(name == '') {
                alert('Please Enter Name....');
            }else {
                $.ajax({
                    type: "post",
                    url: "{{ route('autonomous-level') }}",
                    headers: {
                        'X-CSRF-TOKEN': '{{ csrf_token() }}'
                    },
                    data: {
                        ref: 'Group_Management_update',
                        name: name,
                        idss: ''
                    },
                    success: function(result) {
                        if(result.message) {
                            $('#GroupName').val('');
                            alert(result.message);
                            location.replace('http://127.0.0.1:8000/groups');
                        }
                    }
                })
            }
        }
    }

    function Fun_edit(id) {
        window.location.href = 'http://127.0.0.1:8000/groups?id='+id;
    }
</script>
<!-- -------------------------- Add/ Modify Group --------------------------- -->


<!-- -------------------------- Associate user with group style="height: 26.5rem;"-------------------------- -->


<div class="relative flex flex-col mt-6 text-gray-700 bg-white shadow-md bg-clip-border rounded-xl w-1/2 overflow-y-auto">
    <div class="p-6 w-full" >
        <h5 class="block mb-2 font-sans text-xl antialiased font-semibold leading-snug tracking-normal text-blue-gray-900">
        Add/Modify Departments&nbsp; <span style="color: red;">*</span>
        </h5>
        <p class="block font-sans text-base antialiased font-light leading-relaxed text-inherit">
            <div class="w-auto flex items-center gap-4">
                <div class="relative h-10 w-full min-w-[200px] flex gap-2">
                    <select id="select_id" class="peer h-full w-full rounded-[7px]  !border  !border-gray-300 border-t-transparent bg-transparent bg-white px-3 py-2.5 font-sans text-sm font-normal text-blue-gray-700  shadow-lg shadow-gray-900/5 outline outline-0 ring-4 ring-transparent transition-all placeholder:text-gray-500 placeholder-shown:border placeholder-shown:border-blue-gray-200 placeholder-shown:border-t-blue-gray-200 focus:border-2  focus:!border-gray-900 focus:border-t-transparent focus:!border-t-gray-900 focus:outline-0 focus:ring-gray-900/10 disabled:border-0 disabled:bg-blue-gray-50" >
                        <option selected="" value="">Select Department</option>
                        <option value="Accounts" >Accounts</option>
                        <option value="Mod" >Mod</option>
                        <option value="Finance" >Finance</option>
                        <option value="Support" >Support</option>




                    </select>
                    <div>    <div>
                    <input type="text" id="tags" placeholder="Select Member" class="input-field" autocomplete="off" class="peer h-full w-full rounded-[7px]  !border  !border-gray-300 border-t-transparent bg-transparent bg-white px-3 py-2.5 font-sans text-sm font-normal text-blue-gray-700  shadow-lg shadow-gray-900/5 outline outline-0 ring-4 ring-transparent transition-all placeholder:text-gray-500 placeholder-shown:border placeholder-shown:border-blue-gray-200 placeholder-shown:border-t-blue-gray-200 focus:border-2  focus:!border-gray-900 focus:border-t-transparent focus:!border-t-gray-900 focus:outline-0 focus:ring-gray-900/10 disabled:border-0 disabled:bg-blue-gray-50" />
</div>
<div id="suggestions" class="suggestions-dropdown"></div>
</div></div>
                    <!-- <input type="text" id="tags" placeholder="Select Member" value=""
                    class="peer h-full w-full rounded-[7px]  !border  !border-gray-300 border-t-transparent bg-transparent bg-white px-3 py-2.5 font-sans text-sm font-normal text-blue-gray-700  shadow-lg shadow-gray-900/5 outline outline-0 ring-4 ring-transparent transition-all placeholder:text-gray-500 placeholder-shown:border placeholder-shown:border-blue-gray-200 placeholder-shown:border-t-blue-gray-200 focus:border-2  focus:!border-gray-900 focus:border-t-transparent focus:!border-t-gray-900 focus:outline-0 focus:ring-gray-900/10 disabled:border-0 disabled:bg-blue-gray-50" />
                 -->
                </div>
                <button
            class="align-middle select-none font-sans font-bold text-center uppercase transition-all disabled:opacity-50 disabled:shadow-none disabled:pointer-events-none text-xs py-3 px-6 rounded-lg bg-gray-900 text-white shadow-md shadow-gray-900/10 hover:shadow-lg hover:shadow-gray-900/20 focus:opacity-[0.85] focus:shadow-none active:opacity-[0.85] active:shadow-none"
            type="button" onclick="Fun_save1(this)">Save</button>
            </div>
        </p>

    <div class="w-full relative overflow-x-auto shadow-md sm:rounded-lg mt-4">
            <table class="w-full text-sm text-left rtl:text-right text-gray-500 darks:text-gray-400">
                <thead class="text-xs text-gray-700 uppercase bg-gray-50 darks:bg-gray-700 darks:text-gray-400 sticky top-0">
                    <tr>
                        <th scope="col" class="px-6 py-3">
                            Group Name
                        </th>
                        <th scope="col" class="px-6 py-3">
                            Users
                        </th>
                        <th scope="col" class="px-6 py-3">
                            Modify
                        </th>
                    </tr>
                </thead>
                <tbody class="overflow-y-auto" id="getAssociate">
                    @if(count($result1) > 0)
                        @foreach ($result1 as $items)
                        <tr class="odd:bg-white odd:darks:bg-gray-900 even:bg-gray-50 even:darks:bg-gray-800 border-b darks:border-gray-700">
                            <th scope="row" class="px-6 py-3 font-medium text-gray-900 whitespace-nowrap darks:text-white">
                                {{$items->groupname}}
                            </th>
                            <td class="px-6 py-3">
                                {{$items->user_name}}
                            </td>
                            <td class="px-6 py-3 cursor-pointer">
                            <button Onclick="Associate_edit('{{$items->id}}')" class="select-none rounded-lg bg-gray-900 py-1 px-4 text-center align-middle font-sans text-xs font-bold text-white shadow-md shadow-gray-900/10 transition-all hover:shadow-lg hover:shadow-gray-900/20 focus:opacity-[0.85] focus:shadow-none active:opacity-[0.85] active:shadow-none disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none" type="button">
                                Edit
                            </button>
                            </td>
                        </tr>
                        @endforeach
                    @else
                        <tr class="odd:bg-white odd:darks:bg-gray-900 even:bg-gray-50 even:darks:bg-gray-800 border-b darks:border-gray-700">
                            <th colspan="3" scope="row" class="text-center text-zinc-400 px-6 py-3 font-medium text-gray-900 whitespace-nowrap darks:text-white">
                                No data available in table
                            </th>
                        </tr>
                    @endif
                </tbody>
            </table>
        </div>
    </div>
    </div>

    <script>

   


        const inputField = document.getElementById('tags');
const suggestionsDropdown = document.getElementById('suggestions');

const members = @json($stafflist1);
inputField.addEventListener('input', function() {
  const query = inputField.value.toLowerCase();

  // Filter members based on the name and auto_suggest flag
  const filteredMembers = members.filter(member =>
    member.auto_suggest === 1 && member.name.toLowerCase().includes(query)
  );

  if (query.length > 0 && filteredMembers.length > 0) {
    suggestionsDropdown.style.display = 'block';
    suggestionsDropdown.innerHTML = filteredMembers.map(member => 
      `<div class="suggestion-item">${member.name}</div>`
    ).join('');
    
    // Add event listeners to the suggestions
    const suggestionItems = document.querySelectorAll('.suggestion-item');
    suggestionItems.forEach(item => {
      item.addEventListener('click', () => {
        inputField.value = item.textContent;
        suggestionsDropdown.style.display = 'none';
      });
    });
  } else {
    suggestionsDropdown.style.display = 'none';
  }
});


// $(function() {
//         var availableTags = @json($stafflist1).map(e=>e.name);
//         $( "#tags" ).autocomplete({
//             source: availableTags
//         });
//     });

    function Associate_edit(id) {
        // alert(id)
        location.replace('http://127.0.0.1:8000/groups?ids='+id); 
    }
      

    function Fun_save1(text) {
        var textz = $(text).text();

            var team = $('#select_id').val();
            var user = $('#tags').val();

            if(team == '') {
                alert('Select Team....');
            }else if(user == '') {
                alert('Serach Member....');
            }else {
                $.ajax({
                    type: "post",
                    url: "{{ route('autonomous-level') }}",
                    headers: {
                        'X-CSRF-TOKEN': '{{ csrf_token() }}'
                    },
                    data: {
                        ref: textz=='Save' ? 'Associate_user' : 'Associate_user_update',
                        team: team,
                        user: user,
                        idss: ''
                    },
                    success: function(result) {
                        if(result.message) {
                            $('#select_id').val('');
                            $('#tags').val('');
                            alert(result.message);
                            location.reload();
                            // getdata();
                        }
                    }
                })
            }
        



    }

   
    </script>
    </div>
    
</div>
@endsection