@extends('admin.layouts.app')
<!-- Plugins css -->
@section('head')
<link href="{{asset('assets_admin/libs/dropzone/dropzone.css')}}" rel="stylesheet" type="text/css" />
@endsection

@section('content')
    <div class="container-fluid">
        <div class="row">
            <div class="col-12">
                <div class="page-title-box d-sm-flex align-items-center justify-content-between">
                    <h4 class="mb-sm-0">{{$title}}</h4>

                    <div class="page-title-right">
                        <ol class="breadcrumb m-0">
                            <li class="breadcrumb-item"><a href="javascript: void(0);">{{$title}}</a></li>
                            <li class="breadcrumb-item active">{{$subtitle}}</li>
                        </ol>
                    </div>

                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-lg-12">
                <div class="card">
                    <form action="{{route('admin.roles.update', $rol->id)}}"  method="POST">
                        @csrf
                        <div class="card-header">
                            <h5 class="card-title mb-0">{{{$subtitle}}}</h5>
                        </div>
                        <div class="card-body">
                            <div class="row g-4">
                                <div class="col-lg-12">
                                    <div>
                                        <label for="job-title-Input" class="form-label">Nombre del Rol <span class="text-danger">*</span></label>
                                        <input type="text" class="form-control" name="name"  value="{{$rol->name}}" required />
                                        @if ($errors->has('name'))
                                            <span class="text-danger">{{ $errors->first('name') }}</span>
                                        @endif
                                    </div>
                                </div>
                                <div class="col-lg-12">
                                    <label for="job-title-Input" class="form-label">Seleccione los permisos para este rol:
                                        <span class="text-danger">*</span><br>
                                        <span class="">Puede dejar permisos sin rol (usuarios que no usarán la plataforma)</span>
                                        <button id="toggle-all" type="button" class="btn btn-outline-success btn-select btn-sm">Seleccionar Todos</button>
                                        @if ($errors->has('permissions'))
                                            <span class="text-danger">{{ $errors->first('permissions') }}</span>
                                        @endif
                                        <br><hr><br>
                                        <div class="row">
                                            @foreach($groupedPermissions as $group)
                                                <div class="col-4">
                                                    <h3>
                                                        {{ $group['associator_lastname'] ?? 'Sin Asociador' }}
                                                        <input type="checkbox" class="check-group" data-group="{{ $group['associator_lastname'] }}">
                                                    </h3>
                                                    <ul class="list-unstyled">
                                                        @foreach($group['permissions'] as $permission)
                                                            <li>
                                                                <input type="checkbox" name="permissions[]" value="{{ $permission->id }}" class="permission-checkbox"
                                                                    {{ in_array($permission->id, $group['selected_permissions']) ? 'checked' : '' }}>
                                                                {{ $permission->lastname }}
                                                            </li>
                                                        @endforeach
                                                    </ul>
                                                </div>
                                            @endforeach
                                        </div>
                                    </label>
                                </div>

                                <div class="col-lg-12">
                                    <div class="hstack justify-content-end gap-2">
                                        <a type="button" href="{{route('admin.roles.index')}}" class="btn btn-ghost-danger"><i class="ri-close-line align-bottom"></i>Cancelar</a>
                                        <button type="submit" class="btn btn-primary">Actualizar rol</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
@section('scripts')
<script>
    // JavaScript para manejar la funcionalidad de check/uncheck
  
    document.getElementById('toggle-all').addEventListener('click', function() {
    // Obtener todos los checkboxes principales y secundarios
    const groupCheckboxes = document.querySelectorAll('.check-group');
    const permissionCheckboxes = document.querySelectorAll('.permission-checkbox');

    // Verificar si el botón ya está en estado de "seleccionado"
    const checkAll = this.classList.contains('selected');

    // Cambiar el estado de selección
    if (checkAll) {
        // Deseleccionar todos
        groupCheckboxes.forEach(checkbox => checkbox.checked = false);
        permissionCheckboxes.forEach(checkbox => checkbox.checked = false);
        this.textContent = 'Seleccionar Todos';
        this.classList.remove('selected');
        this.classList.remove('btn-outline-danger'); // Quitar clase de peligro (rojo)
        this.classList.add('btn-outline-success'); // Añadir clase de éxito (verde)
    } else {
        // Seleccionar todos
        groupCheckboxes.forEach(checkbox => checkbox.checked = true);
        permissionCheckboxes.forEach(checkbox => checkbox.checked = true);
        this.textContent = 'Deseleccionar Todos';
        this.classList.add('selected');
        this.classList.remove('btn-outline-success'); // Quitar clase de éxito (verde)
        this.classList.add('btn-outline-danger'); // Añadir clase de peligro (rojo)
    }
});


    // seleccionar por grupos 
    document.addEventListener('DOMContentLoaded', function() {
    // Selecciona todos los checkboxes de grupo
    document.querySelectorAll('.check-group').forEach(checkbox => {
        checkbox.addEventListener('change', function() {
            const isChecked = this.checked; // Estado del checkbox principal
            // Selecciona todos los checkboxes de permisos en este grupo
            const permissionCheckboxes = this.closest('.col-4').querySelectorAll('.permission-checkbox');
            permissionCheckboxes.forEach(permissionCheckbox => {
                permissionCheckbox.checked = isChecked; // Cambia el estado de cada checkbox de permiso
            });
        });
    });
});


</script>
@endsection
@endsection