@extends('layouts.layout')

@section('title', 'Constructor de Páginas')

@section('content')

<x-ui.title text="{{$title}}" />

<x-ui.card 
    class="mt-4 mb-4"
>   
    <x-ui.form 
        action="{{ route('configuracion.roles.update', $data->id) }}"
        method="POST"
        formMethod="PUT"
        class="space-y-4"
    >
        <x-ui.row gap="6">

            <x-ui.col xs="12" md="12" lg="4">
                <x-ui.label
                    value="Nombre"
                />
                <x-ui.input
                    name="nombre"
                    value="{{ $data->nombre }}"
                />
            </x-ui.col>
        
        </x-ui.row>
        
        <x-ui.form-group title="Datos de permisos">
 <div class="overflow-x-auto rounded-xl border border-gray-200 shadow-sm">
    
    <table class="min-w-full text-sm text-gray-700">
        
        <thead class="bg-gray-100 text-xs uppercase tracking-wider text-gray-600">
            <tr>
                <th class="px-4 py-3 text-left">Módulo</th>
                <th class="px-4 py-3 text-left">Submódulo</th>
                <th class="px-4 py-3 text-left">Menú</th>
                <th class="px-4 py-3 text-center">Ver</th>
                <th class="px-4 py-3 text-center">Crear</th>
                <th class="px-4 py-3 text-center">Editar</th>
                <th class="px-4 py-3 text-center">Eliminar</th>
                <th class="px-4 py-3 text-center">Aprobar</th>
            </tr>
        </thead>

        <tbody class="divide-y divide-gray-100">

            @foreach($modules as $module)

                <!-- FILA MÓDULO -->
                <tr class="bg-gray-50">
                    <td colspan="8" class="px-4 py-3 font-semibold text-gray-800 text-base">
                        📁 {{ $module->nombre }}
                    </td>
                </tr>

                @foreach($module->submodules as $sub)

                    <!-- FILA SUBMÓDULO -->
                    <tr class="bg-white">
                        <td></td>
                        <td colspan="7" class="px-4 py-2 font-medium text-indigo-600">
                            └── {{ $sub->nombre }}
                        </td>
                    </tr>

                    @foreach($sub->items as $item)

                        <!-- FILA ITEM -->
                        <tr class="hover:bg-gray-50 transition">
                            <td></td>
                            <td></td>
                            <td class="px-4 py-2 text-gray-700">
                                {{ $item->nombre }}
                            </td>

                            @foreach(['ver','nuevo','editar','eliminar','aprobar'] as $perm)
                                   <td class="text-center">
        <input type="checkbox"
               name="permissions[{{ $item->id }}][{{ $perm }}]"
               value="1"
               class="w-4 h-4 text-indigo-600 border-gray-300 rounded focus:ring-indigo-500"
               {{ ($item->perms[$perm] ?? 0) ? 'checked' : '' }}>
    </td>
                            @endforeach

                        </tr>

                    @endforeach

                @endforeach

            @endforeach

        </tbody>
    </table>

</div>
  </x-ui.form-group>

        <x-ui.button-save 
            icon="lucide-save" 
            type="submit"
            value="Guardar"
        />
    
    </x-ui.form> 
</x-ui.card>

<x-ui.button-back
    color="Atrás"  
    href="{{ url('configuracion.roles') }}"
/>


@endsection