@extends('adminlte::page')

@section('title', 'Editar Rol - ' . $role->name)

@section('content_header')
    <div class="row">
        <div class="col-sm-6">
            <h1><i class="fas fa-user-shield"></i> Editar Rol</h1>
        </div>
        <div class="col-sm-6 text-sm-right">
            <button type="submit" form="editRoleForm" class="btn btn-success mr-2">
                <i class="fas fa-save"></i> Actualizar
            </button>
            <a href="{{ route('roles.index') }}" class="btn btn-warning mr-2">
                <i class="fas fa-list"></i> Lista de Roles
            </a>
        </div>
    </div>
@stop

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

        <div class="row">
            {{-- Columna izquierda: Información del rol --}}
            <div class="col-md-4">
                <div class="card card-primary">
                    <div class="card-header">
                        <h3 class="card-title">
                            <i class="fas fa-edit"></i> Información del Rol
                        </h3>
                    </div>
                    <div class="card-body">
                        <p class="text-muted">Configura el nombre y descripción del rol.</p>

                        @include('partials.validaciones')

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

                        <div class="form-group">
                            <label for="description">Descripción</label>
                            <textarea id="description" name="description"
                                      class="form-control" rows="3"
                                      placeholder="Descripción del rol">{{ $role->description ?? '' }}</textarea>
                        </div>

                        <!-- Resumen de Permisos -->
                        <div class="form-group">
                            <label>Permisos activos:</label>
                            <div class="d-flex align-items-center">
                                <span class="mr-2" id="permisosActivos">0</span>
                                <span class="text-muted">de</span>
                                <span class="ml-2" id="totalPermisos">0</span>
                            </div>
                            <div class="progress mt-2">
                                <div class="progress-bar bg-success" role="progressbar"
                                     id="progressBar" style="width: 0%"></div>
                            </div>

                            @if($permisosActivos->count() > 0)
                                <div class="mt-3">
                                    <label class="text-muted small d-block">Permisos asignados:</label>
                                    <div class="mt-2" style="max-height: 200px; overflow-y: auto;">
                                        @foreach($permisosActivos as $permiso)
                                            <span class="badge badge-info mr-1 mb-1">
                                                <i class="fas fa-key"></i> {{ $permiso->name }}
                                            </span>
                                        @endforeach
                                    </div>
                                </div>
                            @endif
                        </div>
                    </div>
                </div>
            </div>

            {{-- Columna derecha: Permisos del sistema --}}
            <div class="col-md-8">
                <div class="card card-warning">
                    <div class="card-header">
                        <h3 class="card-title">
                            <i class="fas fa-eye"></i> Permisos del Sistema
                        </h3>
                    </div>
                    <div class="card-body">
                        <!-- Controles de selección masiva -->
                        <div class="row mb-3">
                            <div class="col-6">
                                <div class="custom-control custom-radio">
                                    <input type="radio" class="custom-control-input" id="activarTodos" name="accionMasiva" value="activar">
                                    <label class="custom-control-label" for="activarTodos">
                                         Activar todos los permisos
                                    </label>
                                </div>
                            </div>
                            <div class="col-6">
                                <div class="custom-control custom-radio">
                                    <input type="radio" class="custom-control-input" id="desactivarTodos" name="accionMasiva" value="desactivar">
                                    <label class="custom-control-label" for="desactivarTodos">
                                        Desactivar todos los permisos
                                    </label>
                                </div>
                            </div>
                        </div>

                        <!-- Lista simple de permisos por categoría -->
                        @foreach ($permisos as $key => $permiso)
                            @php
                                switch ($key) {
                                    case 'home': $label = 'Dashboard'; break;
                                    case 'usuarios': $label = 'Gestión de Usuarios'; break;
                                    case 'roles': $label = 'Gestión de Roles'; break;
                                    case 'productos': $label = 'Gestión de Productos'; break;
                                    case 'ventas': $label = 'Gestión de Ventas'; break;
                                    case 'clientes': $label = 'Gestión de Clientes'; break;
                                    case 'empleados': $label = 'Gestión de Empleados'; break;
                                    case 'reportes': $label = 'Reportes'; break;
                                    case 'configuracion': $label = 'Configuración'; break;
                                    default: $label = ucfirst($key); break;
                                }
                            @endphp

                            <h5 class="mt-3 mb-2">
                                <i class="fas fa-folder-open mr-1"></i> {{ $label }}
                                <small class="text-muted">({{ count($permiso) }} permisos)</small>
                            </h5>
                            <hr class="mt-1 mb-2">

                            @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 }}"
                                           data-category="{{ $key }}">
                                    <label class="custom-control-label" for="permiso{{ $item->id }}">
                                        <strong>{{ $item->description }}</strong>
                                        <br>
                                        <small class="text-muted">{{ $item->name }}</small>
                                    </label>
                                </div>
                            @endforeach
                        @endforeach
                    </div>
                </div>
            </div>
        </div>
    </form>
@stop

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

        // Función para actualizar contadores
        function actualizarContadores() {
            const total = checkboxes.length;
            const activos = Array.from(checkboxes).filter(cb => cb.checked).length;
            const porcentaje = total > 0 ? (activos / total) * 100 : 0;

            totalPermisos.textContent = total;
            permisosActivos.textContent = activos;
            progressBar.style.width = porcentaje + '%';
        }

        // Inicializar contadores
        actualizarContadores();

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

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

        // Actualizar contadores cuando cambie cualquier checkbox
        checkboxes.forEach(checkbox => {
            checkbox.addEventListener('change', actualizarContadores);
        });

    });
</script>
@stop