@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>
@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-5">
                <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 class="card-tools">
                            <button type="button" class="btn btn-tool" data-card-widget="collapse">
                                <i class="fas fa-minus"></i>
                            </button>
                        </div>
                    </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>

                            <!-- Badges de permisos activos -->
                            @if($permisosActivos->count() > 0)
                                <div class="mt-3">
                                    <label class="text-muted small">Permisos asignados:</label>
                                    <div class="mt-2">
                                        @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-7">
            <div class="card card-warning">
                <div class="card-header">
                    <h3 class="card-title">
                        <i class="fas fa-eye"></i> Permisos del Sistema
                    </h3>
                    <div class="card-tools">
                        <button type="button" class="btn btn-tool" data-card-widget="collapse">
                            <i class="fas fa-minus"></i>
                        </button>
                    </div>
                </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
                                </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
                                </label>
                            </div>
                        </div>
                    </div>

                    <!-- Lista de permisos organizados por categorías -->
                    @foreach ($permisos as $key => $permiso)
                        <div class="card card-outline">
                            <div class="card-header">
                                <h5 class="card-title mb-0">
                                    <i class="fas fa-folder"></i>
                                    @if($key == 'home')
                                        Dashboard
                                    @elseif($key == 'usuarios')
                                        Gestión de Usuarios
                                    @elseif($key == 'roles')
                                        Gestión de Roles
                                    @elseif($key == 'productos')
                                        Gestión de Productos
                                    @elseif($key == 'ventas')
                                        Gestión de Ventas
                                    @elseif($key == 'clientes')
                                        Gestión de Clientes
                                    @elseif($key == 'empleados')
                                        Gestión de Empleados
                                    @elseif($key == 'reportes')
                                        Reportes
                                    @elseif($key == 'configuracion')
                                        Configuración
                                    @else
                                        {{ ucfirst($key) }}
                                    @endif
                                </h5>
                                <div class="card-tools">
                                    <button type="button" class="btn btn-tool collapse-btn" data-target="collapse-{{ $loop->index }}">
                                        <i class="fas fa-plus"></i>
                                    </button>
                                </div>
                            </div>
                            <div class="card-body collapse-content" id="collapse-{{ $loop->index }}" style="display: none;">
                                <div class="mb-2">
                                    <small class="text-muted" id="contador{{ $loop->index }}">
                                        {{ count($permiso) }} permisos disponibles
                                    </small>
                                </div>

                                @foreach ($permiso as $item)
                                    <div class="custom-control custom-switch mb-3">
                                        <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 }}">
                                            <div class="d-flex justify-content-between align-items-center">
                                                <div>
                                                    <strong>{{ $item->description }}</strong>
                                                    <br>
                                                    <small class="text-muted">{{ $item->name }}</small>
                                                </div>

                                            </div>
                                        </label>
                                    </div>
                                @endforeach
                            </div>
                        </div>
                    @endforeach
                </div>
            </div>
        </div>
        </div>

        <!-- Botones de Acción -->
        <div class="row">
            <div class="col-12">
                <div class="card">
                    <div class="card-body text-center">
                        <button type="submit" class="btn btn-success btn-lg mr-3">
                            <i class="fas fa-save"></i> Guardar Cambios
                        </button>
                        <a href="{{ route('roles.index') }}" class="btn btn-secondary btn-lg">
                            <i class="fas fa-times"></i> Cancelar
                        </a>
                    </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 + '%';
        }

        // Función para expandir tarjetas con permisos activos
        function expandirTarjetasConPermisosActivos() {
            checkboxes.forEach(checkbox => {
                if (checkbox.checked) {
                    const tarjeta = checkbox.closest('.card');
                    const collapseContent = tarjeta.querySelector('.collapse-content');
                    const collapseBtn = tarjeta.querySelector('.collapse-btn');
                    const icon = collapseBtn ? collapseBtn.querySelector('i') : null;

                    if (collapseContent && collapseContent.style.display === 'none') {
                        collapseContent.style.display = 'block';
                        if (icon) {
                            icon.classList.remove('fa-plus');
                            icon.classList.add('fa-minus');
                        }
                    }
                }
            });
        }

        // Inicializar contadores
        actualizarContadores();

        // Expandir tarjetas con permisos activos al cargar
        expandirTarjetasConPermisosActivos();

        // 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);
        });

        // Configurar iconos de colapso
        document.querySelectorAll('.collapse-btn').forEach(button => {
            button.addEventListener('click', function() {
                const targetId = this.getAttribute('data-target');
                const targetElement = document.getElementById(targetId);
                const icon = this.querySelector('i');

                if (targetElement.style.display === 'none') {
                    targetElement.style.display = 'block';
                    icon.classList.remove('fa-plus');
                    icon.classList.add('fa-minus');
                } else {
                    targetElement.style.display = 'none';
                    icon.classList.remove('fa-minus');
                    icon.classList.add('fa-plus');
                }
            });
        });
    });
</script>
@stop