@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" data-table>
 @if (session('ok'))
        <div class="alert alert-success">{{ session('ok') }}</div>
      @endif
  {{-- HEADER SUPERIOR --}}
  <div class="card-header d-flex justify-content-between align-items-center">
    <h4 class="card-title m-0">Roles</h4>
    <a href="{{ route('roles.create') }}" class="btn btn-primary btn-sm">
      <i class="ti ti-plus"></i> Nuevo Rol
    </a>
  </div>
</div>
<div class="card">
    <div class="card-body">

        <form method="POST" action="{{ route('roles.update', $role) }}">
            @csrf
            @method('PUT')

            {{-- 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="{{ $role->nombre }}"
                           required>
                </div>

                <div class="col-md-6">
                    <label class="form-label">Descripción</label>
                    <input type="text"
                           name="descripcion"
                           class="form-control"
                           value="{{ $role->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 --}}
            <input type="hidden" name="permisos" value="">
            <div class="table-responsive">
                <table class="table table-sm align-middle" id="tabla-permisos">
                    <thead class="table-light">
                        <tr>
                            <th>Módulo</th>
                            <th>Permisos</th>
                        </tr>
                    </thead>
                    <tbody>

                   @foreach($modulos as $modulo)
                        <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, $permisosRol ?? []) ? '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">
                                <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, $permisosRol) ? '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">
                    Actualizar Rol
                </button>
            </div>

        </form>
    </div>
</div>




</div>
@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