@extends('adminlte::page')

@section('title', 'Editar rol')

@section('content_header')
    <h1>Permisos</h1>
@stop

@section('content')

    <div class="row">
        <div class="col-md-6">
            <div class="card">
                <div class="card-header">
                    <h3 class="card-title">Editar Rol</h3>
                </div>
                <div class="card-body">

                    @include('partials.validaciones')

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

                        <div class="form-group">
                            <label for="name">Nombre del Rol</label>
                            <input type="text" id="name" name="name" placeholder="Ingrese Rol" class="form-control" required value="{{ $role->name }}">
                        </div>


                        <h3 class="text-uppercase">Lista de Permisos</h3>

                        <div class="form-group">
                            <!-- Botones para activar/desactivar todos -->
                            <div class="form-check">
                                <input type="checkbox" class="form-check-input" id="activarTodos">
                                <label class="form-check-label" for="activarTodos">Activar todos</label>
                            </div>
                            <div class="form-check">
                                <input type="checkbox" class="form-check-input" id="desactivarTodos">
                                <label class="form-check-label" for="desactivarTodos">Desactivar todos</label>
                            </div>

                            @foreach ($permisos as $key => $permiso)

                                <p class="text-uppercase text-red">{{ $key }}</p>
                                @foreach ($permiso as $item)
                                    <div class="custom-control custom-switch mb-2">
                                        <input type="checkbox" class="custom-control-input permiso-checkbox" id="permiso{{ $item->id }}"
                                            name="permisos[]" value="{{ $item->id }}" {{ $role->hasPermissionTo($item->name) ? 'checked' : '' }}
                                            data-permiso="{{ $item->id }}">
                                        <label class="custom-control-label" for="permiso{{ $item->id }}">
                                            {{ $item->description }}
                                        </label>
                                    </div>
                                @endforeach
                            @endforeach
                        </div>



                        <div class="form-group mt-5">
                            @csrf
                            @method('PUT')
                            <button type="submit" class="btn btn-success mr-2">Editar Rol</button>
                            <a href="{{ route('roles.index') }}" class="btn btn-primary">Lista de Roles</a>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

@stop

@section('css')

@stop

@section('js')
<script>
    document.addEventListener('DOMContentLoaded', function() {
        const activarTodos = document.getElementById('activarTodos');
        const desactivarTodos = document.getElementById('desactivarTodos');
        const checkboxes = document.querySelectorAll('.permiso-checkbox');

        // Activar todos (excepto el home)
        activarTodos.addEventListener('change', function() {
            checkboxes.forEach(checkbox => {
                if (checkbox.id !== 'permisoHome') {
                    checkbox.checked = activarTodos.checked;
                }
            });
        });

        // Desactivar todos (excepto el home)
        desactivarTodos.addEventListener('change', function() {
            checkboxes.forEach(checkbox => {
                if (checkbox.id !== 'permisoHome') {
                    checkbox.checked = !desactivarTodos.checked;
                }
            });
        });
    });
</script>

@stop