@extends('layouts.horizontal', ['title' => 'Roles'])

@section('content')
<div class="container-fluid">

@include('layouts.partials.page-title', [
    'subtitle' => 'Roles',
    'title' => 'Listado de Roles '
])


<div class="card">
    <div class="card-body">

        <form method="POST" action="{{ route('roles.store') }}">
            @csrf

            {{-- DATOS DEL ROL --}}
            <div class="row mb-4">
                <div class="col-md-6">
                    <label class="form-label">Nombre del Rol</label>
                    <input type="text"
                           name="nombre"
                           class="form-control"
                           value="{{ old('nombre') }}"
                           required>
                </div>

                <div class="col-md-6">
                    <label class="form-label">Descripción</label>
                    <input type="text"
                           name="descripcion"
                           class="form-control"
                           value="{{ old('descripcion') }}">
                </div>
            </div>

            <hr>

            {{-- BUSCADOR --}}
            <div class="mb-3">
                <input type="text"
                       id="permiso-search"
                       class="form-control"
                       placeholder="Buscar módulo o submódulo…">
            </div>

            {{-- TABLA DE PERMISOS --}}
            <div class="table-responsive">
                <table class="table table-sm align-middle" id="tabla-permisos">
                    <thead class="table-light">
                        <tr>
                            <th style="width:30%">Módulo</th>
                            <th>Permisos</th>
                        </tr>
                    </thead>
                    <tbody>

                    @foreach($modulos as $modulo)
                        {{-- MODULO PADRE --}}
                        <tr class="permiso-row fw-bold"
                            data-nombre="{{ strtolower($modulo->nombre) }}">
                            <td>
                                {{ $modulo->nombre }}
                            </td>

                            <td>
                                <div class="d-flex flex-wrap gap-3">
                                    @foreach($modulo->acciones() as $accion)
                                        @php
                                            $permiso = $modulo->permisos->firstWhere('accion', $accion);
                                        @endphp

                                        @if($permiso)
                                            <label class="form-check mb-0">
                                                <input type="checkbox"
                                                       class="form-check-input"
                                                       name="permisos[]"
                                                       value="{{ $permiso->id }}"
                                                       {{ in_array($permiso->id, old('permisos', [])) ? 'checked' : '' }}>
                                                <span class="form-check-label small text-capitalize">
                                                    {{ $accion }}
                                                </span>
                                            </label>
                                        @endif
                                    @endforeach
                                </div>
                            </td>
                        </tr>

                        {{-- SUBMODULOS --}}
                        @foreach($modulo->hijos as $hijo)
                        <tr class="permiso-row"
                            data-nombre="{{ strtolower($modulo->nombre.' '.$hijo->nombre) }}">
                            <td class="ps-4 text-muted">
                                <i class="ti ti-arrow-badge-right me-1"></i>
                                {{ $hijo->nombre }}
                            </td>

                            <td>
                                <div class="d-flex flex-wrap gap-3">
                                    @foreach($hijo->acciones() as $accion)
                                        @php
                                            $permiso = $hijo->permisos->firstWhere('accion', $accion);
                                        @endphp

                                        @if($permiso)
                                            <label class="form-check mb-0">
                                                <input type="checkbox"
                                                       class="form-check-input"
                                                       name="permisos[]"
                                                       value="{{ $permiso->id }}"
                                                       {{ in_array($permiso->id, old('permisos', [])) ? 'checked' : '' }}>
                                                <span class="form-check-label small text-capitalize">
                                                    {{ $accion }}
                                                </span>
                                            </label>
                                        @endif
                                    @endforeach
                                </div>
                            </td>
                        </tr>
                        @endforeach

                    @endforeach

                    </tbody>
                </table>
            </div>

            {{-- BOTON --}}
            <div class="text-end mt-4">
                <button class="btn btn-primary">
                    Guardar Rol
                </button>
            </div>

        </form>
    </div>
</div>
</dic>
@endsection

@push('scripts')
<script>
document.getElementById('permiso-search').addEventListener('keyup', function () {
    const q = this.value.toLowerCase();

    document.querySelectorAll('.permiso-row').forEach(row => {
        const nombre = row.dataset.nombre || '';
        row.style.display = nombre.includes(q) ? '' : 'none';
    });
});
</script>
@endpush