@extends('sistema.sistema')
@section('content')

<div class="bg-gray-50 min-h-screen p-6">
    <div class="max-w-8xl mx-auto bg-white rounded-2xl shadow-lg p-6 mt-16 mb-16">
        <h1 class="text-3xl font-extrabold text-orange-600 text-center mb-6">Permissões do Sistema</h1>

        <div class="flex flex-col sm:flex-row gap-6">
            <!-- Filtro de grupos -->
            <div class="w-full sm:w-1/4 bg-gray-100 rounded-2xl shadow-md p-4 flex flex-col items-center gap-4">
                <p class="text-lg font-semibold text-gray-700 mb-2 text-center">Lista de Grupos</p>
                <form action="{{ route('permissionsgroup') }}" method="get" class="w-full">
                    <div class="flex flex-col gap-3 items-center">
                        <select name="group_id" id="group_id" class="w-full border rounded-xl px-3 py-2 focus:ring-2 focus:ring-orange-400 focus:outline-none shadow-sm transition">
                            @foreach ($grupo as $item)
                                <option value="{{ $item->id }}" {{ request('group_id') == $item->id ? 'selected' : '' }}>
                                    {{ ucfirst($item->nome) }}
                                </option>
                            @endforeach
                        </select>
                        <button type="submit" class="flex items-center gap-2 bg-orange-500 text-white px-4 py-2 rounded-2xl hover:bg-orange-600 transition shadow-md">
                            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
                            </svg>
                            Consultar
                        </button>
                    </div>
                </form>
            </div>

            <!-- Tabela de permissões -->
            <div class="w-full sm:w-3/4 bg-gray-100 rounded-2xl shadow-md p-4 overflow-x-auto">
                <p class="text-lg font-semibold text-gray-700 mb-4 text-center"> Recursos & Permissionamento</p>

                <form id="formAcl">
                    <table class="min-w-full divide-y divide-gray-200 rounded-xl overflow-hidden shadow-sm">
                        <thead class="bg-gray-200">
                            <tr>
                                <th class="px-4 py-2 text-left text-gray-700 font-semibold">Cod</th>
                                <th class="px-4 py-2 text-left text-gray-700 font-semibold">Recurso</th>
                                <th class="px-4 py-2 text-left text-gray-700 font-semibold">Módulo</th>
                                <th class="px-4 py-2 text-center text-gray-700 font-semibold">Acessar</th>
                                <th class="px-4 py-2 text-center text-gray-700 font-semibold">Ler</th>
                                <th class="px-4 py-2 text-center text-gray-700 font-semibold">Criar</th>
                                <th class="px-4 py-2 text-center text-gray-700 font-semibold">Atualizar</th>
                                <th class="px-4 py-2 text-center text-gray-700 font-semibold">Deletar</th>
                                <th class="px-4 py-2 text-center text-gray-700 font-semibold">Exportar</th>
                            </tr>
                        </thead>
                        <tbody class="bg-white divide-y divide-gray-200">
                            @foreach ($resources as $res)
                                @php $pg = $permissionsGroupMap[$res->id] ?? null; @endphp
                                <tr class="hover:bg-gray-50 transition">
                                    <td class="px-4 py-2 font-bold text-gray-800 text-center">{{ $res->id }}</td>
                                    @if($pg?->group_id)
                                        <input type="hidden" id="groupId" data-id="{{ $pg->group_id }}">
                                    @endif
                                    <td class="px-4 py-2 font-semibold text-gray-700">{{ ucfirst($res->name) }}</td>
                                    <td class="px-4 py-2 text-gray-500">{{ ucfirst($res->module) }}</td>

                                    {{-- Permissões --}}
                                    @foreach (['has_access', 'can_read', 'can_create', 'can_update', 'can_delete', 'can_export'] as $perm)
                                        <td class="px-2 py-1 text-center">
                                            <select name="permissions[{{ $res->id }}][{{ $perm }}]"
                                                    class="border rounded-xl px-2 py-1 focus:ring-2 focus:ring-orange-400 focus:outline-none shadow-sm transition"
                                                    data-resource="{{ $res->id }}"
                                                    data-permission="{{ $perm }}">
                                                <option value="0" {{ !$pg?->{$perm} ? 'selected' : '' }}>Não</option>
                                                <option value="1" {{ $pg?->{$perm} ? 'selected' : '' }}>Sim</option>
                                            </select>
                                        </td>
                                    @endforeach
                                </tr>
                            @endforeach
                        </tbody>
                    </table>

                    <div class="flex justify-end mt-4">
                        <button id="btnSave" type="button" class="flex items-center gap-2 bg-orange-500 text-white px-6 py-2 rounded-2xl hover:bg-orange-600 transition shadow-md">
                            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
                            </svg>
                            Salvar
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

@vite('resources/js/sistema/acl.js')
@endsection