@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="/groups" class="opacity-60">
            <span>
                groups
            </span>
        </a>
        </li>
    </ol>
    </nav>
    <h1 class="text-2xl font-sans font-bold">Group Management</h1>
    <br>
    
    @php
        $result = DB::table('comm_groupmanagement')->get();
        $result1 =  DB::table('comm_associate_user as cu')->join('comm_groupmanagement as hu', 'cu.g_name', '=', 'hu.id')->select('cu.id', 'cu.user_name', 'hu.groupname')->get();


        
        
    @endphp 
    <div class="flex w-full gap-10">

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

    <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 " style="height: 26.5rem;">
        <div>
            <h5 class="block mb-2 font-sans text-xl antialiased font-semibold leading-snug tracking-normal text-blue-gray-900">
            Add/ Modify Group&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] ">
                        <input type="text" placeholder="Group Name" id="GroupName" value="{{ $Groupname_up ?? '' }}"
                        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_save(this)">Save</button>
                </div>
            </p>
        </div>
    <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">
                            Role name
                        </th>
                        <th scope="col" class="px-6 py-3">
                            Modify
                        </th>
                    </tr>
                </thead>
                <tbody class="overflow-y-auto" id="getAddModifyGroup">
                    @if(count($result) > 0)
                        @foreach ($result 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 cursor-pointer">
                            <button Onclick="Fun_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="2" 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>
    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 --------------------------- -->


<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" style="height: 26.5rem;">
        <h5 class="block mb-2 font-sans text-xl antialiased font-semibold leading-snug tracking-normal text-blue-gray-900">
        Associate user with group&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 group</option>
                        @foreach ($GROUPlist as $data)
                                <option value="{{$data->id}}" selected>{{$data->groupname}}</option>
                        @endforeach
                    </select>
                    <input type="text" id="tags" placeholder="Select Member" value="{{$Associate_list[0]->user_name ?? ''}}"
                    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>

    $(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();
                        }
                    }
                })
            }
        



    }

    // function getdata() {
    //     $.ajax({
    //         type: "post",
    //         url: "{{ route('autonomous-level') }}",
    //         headers: {
    //             'X-CSRF-TOKEN': '{{ csrf_token() }}'
    //         },
    //         data: {
    //             ref: 'getelement',
    //         },
    //         success: function(result) {
    //             $('#getAssociate').html('');
    //             for (let i = 0; i < result.message.length; i++) {
    //                 var tablerow = `
    //                 <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">
    //                     `+result.message[i].groupname+`
    //                     </th>
    //                     <td class="px-6 py-3">
    //                         `+result.message[i].user_name+`
    //                     </td>
    //                     <td class="px-6 py-3 cursor-pointer">
    //                     <button Onclick="Associate_edit(`+result.message[i].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>
    //                 `;
    //                 $('#getAssociate').append(tablerow);
    //             }
    //         }
    //     })
    // }


    // function getdata_group() {
    //     $.ajax({
    //         type: "post",
    //         url: "{{ route('autonomous-level') }}",
    //         headers: {
    //             'X-CSRF-TOKEN': '{{ csrf_token() }}'
    //         },
    //         data: {
    //             ref: 'getgroup',
    //         },
    //         success: function(result) {
    //             $('#getAddModifyGroup').html('');
    //             for (let i = 0; i < result.message.length; i++) {
    //                 var tablerow = `
    //                 <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">
    //                         `+result.message[i].groupname+`
    //                     </th>
    //                     <td class="px-6 py-3 cursor-pointer">
    //                     <button Onclick="Fun_edit(`+result.message[i].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>
    //                 `;
    //                 $('#getAddModifyGroup').append(tablerow);
    //             }
    //         }
    //     })
    // }

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