@extends('adminlte::page')

@section('title', 'Crear Nuevo Rol')

@section('content_header')
    <div class="row">
        <div class="col-sm-6">
            <h1><i class="fas fa-user-plus"></i> Crear Nuevo Rol</h1>
        </div>
    </div>
@stop

@section('content')
    <form action="{{ route('roles.store') }}" method="POST" id="createRoleForm">
        @csrf

        <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>
                        </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"></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>
                        </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 }}"
                                               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> Crear Rol
                        </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 + '%';
        }

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

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

        // Validación del formulario
        const form = document.getElementById('createRoleForm');
        form.addEventListener('submit', function(e) {
            const nombreRol = document.getElementById('name').value.trim();

            if (!nombreRol) {
                e.preventDefault();
                alert('Por favor, ingrese un nombre para el rol.');
                document.getElementById('name').focus();
                return false;
            }

            // Mostrar loading en el botón de guardar
            const submitBtn = form.querySelector('button[type="submit"]');
            const originalText = submitBtn.innerHTML;
            submitBtn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Creando...';
            submitBtn.disabled = true;

            // Re-habilitar después de 3 segundos (por si hay error)
            setTimeout(() => {
                submitBtn.innerHTML = originalText;
                submitBtn.disabled = false;
            }, 3000);
        });
    });
</script>
@stop