@extends('layouts.app')
@section('title', 'Manajemen Role & Permission - Dazry Laundry App')
@section('page_title', 'Manajemen Role & Permission')
@section('content')
<section class="bg-white">
   
    @if (session('success'))
        <div class="bg-green-100 border border-green-400 text-green-700 px-4 py-3  mb-4" role="alert">
            {{ session('success') }}
        </div>
    @endif

    <div class="overflow-x-auto  border border-gray-200 min-h-[300px] ">
        <table class="min-w-full divide-y divide-gray-200">
            <thead class="bg-blue-700 text-white">
                <tr>
                    <th scope="col" class="px-6 py-3 text-left text-xs font-medium uppercase tracking-wider">No.</th>
                    <th scope="col" class="px-6 py-3 text-left text-xs font-medium  uppercase tracking-wider">Nama</th>
                    <th scope="col" class="px-6 py-3 text-left text-xs font-medium  uppercase tracking-wider">Email</th>
                    <th scope="col" class="px-6 py-3 text-left text-xs font-medium  uppercase tracking-wider">Role Sekarang</th>
                    <th scope="col" class="px-6 py-3 text-center text-xs font-medium  uppercase tracking-wider ">Ubah Role</th>
                    
                </tr>
            </thead>
            <tbody class="bg-white divide-y divide-gray-200">
                @forelse ($users as $item)
                <tr>
                    <td class="px-6 py-4 whitespace-nowrap text-sm ">{{ $loop->iteration }}</td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">{{ $item->name }}</td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm ">{{ $item->email }}</td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm ">{{ $item->roles->pluck('name')->implode(', ') ?: '-' }}</td>
                     <td class="px-6 py-4 whitespace-nowrap text-center text-sm font-medium">
                       
                        {{-- <form action="{{ route('settings.userRole.assignRole',$item->id) }}" method="POST">
                            @csrf
                            <select name="role" class="form-select d-inline w-auto">
                                @foreach($roles as $r)
                                <option value="{{ $r->name }}" {{ $item->roles->contains($r) ? 'selected' : '' }}>
                                    {{ $r->name }}
                                </option>
                                @endforeach
                            </select>
                            <button class="btn btn-sm btn-primary">Update</button>
                        </form> --}}

                        <button type="button"
                            class="px-3 py-1 bg-gray-600 text-white rounded-md hover:bg-blue-700 transition"
                            onclick="openRoleModal({{ $item->id }}, '{{ $item->name }}', '{{ $item->roles->pluck('name')->implode(', ') }}')">
                            <i class="fas fa-pencil"></i>
                        </button>
                    </td>
                </tr>
                @empty
                    <tr>
                        <td colspan="5" class="px-6 py-4 whitespace-nowrap text-center text-sm ">Tidak ada data yang tersedia.</td>
                    </tr>
                @endforelse
            </tbody>
        </table>
    </div>

    {{-- Pagination Links --}}
    <div class="mt-6">
        {{ $users->appends(['search' => request('search')])->links() }}
    </div>

    <!-- Modal -->
    <div id="roleModal" class="fixed inset-0 bg-black bg-opacity-50 hidden items-center justify-center z-50">
        <div class="bg-white rounded-lg shadow-lg w-full max-w-md p-6">
            <h2 class="text-xl font-bold text-gray-800 mb-4">Ubah Role User</h2>
            <p id="modalUserName" class="text-sm text-gray-600 mb-4"></p>
            
            <form id="roleForm" method="POST">
                @csrf
                <div class="mb-4">
                    <label for="roleSelect" class="block text-sm font-medium text-gray-700 mb-1">Pilih Role</label>
                    <select name="role" id="roleSelect"
                        class="w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 text-sm">
                        @foreach($roles as $r)
                            <option value="{{ $r->name }}">{{ $r->name }}</option>
                        @endforeach
                    </select>
                </div>

                <div class="flex justify-end space-x-2">
                    <button type="button"
                        onclick="closeRoleModal()"
                        class="px-4 py-2 bg-gray-200 text-gray-700 rounded-md hover:bg-gray-300 transition">
                        Batal
                    </button>
                    <button type="submit"
                        class="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 transition">
                        Update
                    </button>
                </div>
            </form>
        </div>
    </div>

    <script>
        function openRoleModal(userId, userName, currentRole) {
            // update action form
            let form = document.getElementById('roleForm');
            //form.action = '/settings/usersRole/1/assign-role';
            form.action = '/settings/usersRole/' + userId + '/assign-role';


            // tampilkan nama user di modal
            document.getElementById('modalUserName').innerText = "User: " + userName;

            // set role aktif
            let select = document.getElementById('roleSelect');
            for (let i = 0; i < select.options.length; i++) {
                select.options[i].selected = (select.options[i].value === currentRole);
            }

            // tampilkan modal
            let modal = document.getElementById('roleModal');
            modal.classList.remove('hidden');
            modal.classList.add('flex');
        }

        function closeRoleModal() {
            let modal = document.getElementById('roleModal');
            modal.classList.add('hidden');
            modal.classList.remove('flex');
        }
    </script>


</section>
@endsection