@extends('layouts.kaiadmin.master')

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

@section('content_header')
<div class="d-flex justify-content-between align-items-center mb-3">
    <h1><i class="fas fa-user-shield"></i> Editar Rol</h1>
    <a href="{{ route('roles.index') }}" class="btn btn-secondary">
        <i class="fas fa-arrow-left"></i> Volver a la lista
    </a>
</div>
@stop

@section('content')

@if (session('info'))
    <div class="alert alert-success alert-dismissible fade show" role="alert">
        {{ session('info') }}
        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
    </div>
@endif

<div class="card shadow-sm">
    <div class="card-header bg-light">
        <h5 class="mb-0">Formulario de Rol</h5>
    </div>
    <div class="card-body">

        {!! Form::model($role, ['route'=> ['roles.update', $role], 'method' => 'put', 'autocomplete' => 'off']) !!}

            <div class="row align-items-end mb-3">
                <div class="col-md-6">
                    {!! Form::label('name', 'Nombre del Rol', ['class' => 'form-label']) !!}
                    {!! Form::text('name', null, ['class' => 'form-control', 'placeholder' => 'Ej: Administrador']) !!}
                    @error('name')
                        <small class="text-danger">{{ $message }}</small>
                    @enderror
                </div>
            
                <div class="col-md-6">
                    <label for="perm-search" class="form-label">Buscar Permiso</label>
                    <input type="text" id="perm-search" class="form-control" placeholder="Buscar permiso...">
                </div>
            </div>

            <div class="row mb-3">
                <div class="col-12">
                    <div class="d-flex gap-2">
                        <button type="button" id="select-all" class="btn btn-sm btn-outline-primary">
                            <i class="fas fa-check-double"></i> Seleccionar Todos
                        </button>
                        <button type="button" id="deselect-all" class="btn btn-sm btn-outline-secondary">
                            <i class="fas fa-times"></i> Deseleccionar Todos
                        </button>
                        <span class="ms-auto text-muted" id="selected-count">0 permisos seleccionados</span>
                    </div>
                </div>
            </div>

            <div id="permissions-loading" class="text-center my-3 text-muted">
                <i class="fas fa-spinner fa-spin me-2"></i> Cargando permisos...
            </div>

            <div id="permissions-container" style="max-height: 500px; overflow-y: auto; display: none;" class="px-2"></div>

            <div class="mt-4">
                {!! Form::submit('Actualizar Rol', ['class' => 'btn btn-primary']) !!}
            </div>

        {!! Form::close() !!}
    </div>
</div>

@stop

@section('css')
<link rel="stylesheet" href="/css/admin_custom.css">
<style>
    .perm-card {
        border: 1px solid #e0e0e0;
        border-radius: 0.5rem;
        background-color: #f9f9f9;
        transition: all 0.2s ease;
        cursor: pointer;
        position: relative;
    }

    .perm-card:hover {
        background-color: #f0f8ff;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
        transform: translateY(-1px);
    }

    /* Estilos ultra-específicos para KaiAdmin */
    #permissions-container .card.perm-card.perm-selected,
    #permissions-container .perm-card.perm-selected,
    .perm-card.perm-selected[data-id] {
        background: #198754 !important;
        background-color: #198754 !important;
        background-image: linear-gradient(135deg, #198754 0%, #20c997 100%) !important;
        color: #ffffff !important;
        border: 2px solid #146c43 !important;
        box-shadow: 0 4px 12px rgba(25, 135, 84, 0.3) !important;
    }

    #permissions-container .card.perm-card.perm-selected:hover,
    #permissions-container .perm-card.perm-selected:hover,
    .perm-card.perm-selected[data-id]:hover {
        background: #146c43 !important;
        background-color: #146c43 !important;
        background-image: linear-gradient(135deg, #146c43 0%, #198754 100%) !important;
        transform: translateY(-2px) !important;
        box-shadow: 0 6px 16px rgba(25, 135, 84, 0.4) !important;
    }

    /* Forzar texto blanco en elementos seleccionados */
    #permissions-container .perm-selected .card-text,
    #permissions-container .perm-selected p,
    #permissions-container .perm-selected *,
    .perm-selected[data-id] .card-text,
    .perm-selected[data-id] p,
    .perm-selected[data-id] * {
        color: #ffffff !important;
    }

    /* Sobrescribir cualquier estilo de KaiAdmin */
    .perm-selected.card,
    .perm-selected.card .card-body,
    .perm-selected.card .card-body * {
        background-color: transparent !important;
        color: #ffffff !important;
    }


    .perm-card .card-text {
        transition: color 0.2s ease;
    }

    .perm-selected .card-text {
        color: white !important;
    }

    .perm-group-title {
        font-weight: bold;
        font-size: 1rem;
        color: #0d6efd;
        border-bottom: 1px solid #dee2e6;
        margin-bottom: 1rem;
        padding-bottom: 0.5rem;
    }

    .perm-toggle {
        cursor: pointer;
        user-select: none;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0.5rem 0;
    }

    .perm-toggle .toggle-icon {
        transition: transform 0.3s ease;
    }

    .perm-toggle.collapsed .toggle-icon {
        transform: rotate(-90deg);
    }

    .perm-card .permission-status {
        position: absolute;
        top: 5px;
        right: 5px;
        font-size: 0.8rem;
    }

    /* Icono de confirmación específico para KaiAdmin */
    #permissions-container .perm-selected::before,
    .perm-selected[data-id]::before {
        content: "✓" !important;
        position: absolute !important;
        top: 5px !important;
        right: 5px !important;
        background: rgba(255, 255, 255, 0.95) !important;
        color: #198754 !important;
        border-radius: 50% !important;
        width: 18px !important;
        height: 18px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: 11px !important;
        font-weight: bold !important;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3) !important;
        z-index: 10 !important;
    }

    /* Forzar colores específicos para KaiAdmin */
    #permissions-container .perm-selected,
    #permissions-container .perm-selected *,
    #permissions-container .perm-selected .card-body,
    #permissions-container .perm-selected .card-text,
    .perm-selected[data-id],
    .perm-selected[data-id] *,
    .perm-selected[data-id] .card-body,
    .perm-selected[data-id] .card-text {
        color: #ffffff !important;
    }

    /* Animación específica para KaiAdmin */
    #permissions-container .perm-card.selecting,
    .perm-card.selecting[data-id] {
        animation: pulseSelectKai 0.4s ease-in-out !important;
    }

    @keyframes pulseSelectKai {
        0% { transform: scale(1); }
        50% { 
            transform: scale(1.08); 
            box-shadow: 0 6px 20px rgba(25, 135, 84, 0.4) !important;
            background: #20c997 !important;
        }
        100% { transform: scale(1); }
    }

    /* Asegurar posición relativa para el ícono en KaiAdmin */
    #permissions-container .perm-card,
    .perm-card[data-id] {
        position: relative !important;
    }

    .group-counter {
        font-size: 0.8rem;
        color: #6c757d;
        font-weight: normal;
    }
</style>
@stop

@section('js')
<script>
    document.addEventListener("DOMContentLoaded", function () {
        const container = document.getElementById("permissions-container");
        const loading = document.getElementById("permissions-loading");
        const searchInput = document.getElementById("perm-search");
        const selectAllBtn = document.getElementById("select-all");
        const deselectAllBtn = document.getElementById("deselect-all");
        const selectedCountEl = document.getElementById("selected-count");
        
        let allPermissions = [];
        let selectedPermissions = new Set();
    
        const permLabels = {
            "dashboard": "Página Principal",
            "users": "Usuarios Registrados",
            "tarifaresolucion": "Tarifa Resolucion",
            "tarifabloque": "Tarifa Bloque",
            "tarifacargos": "Tarifa Cargo",
            "itinerarios": "Itinerarios",
            "itinerariosrutas": "Itinerarios Rutas",
            "lectores": "Lectores",
            "itinerariosbases": "Itinerarios Bases",
            "usrservicio": "Usuario Externos",
            "estadocuenta": "Estado de Cuenta",
            "lecturas": "Lecturas",
            "cargoslecturas": "Cargos Lecturas",
            "roles": "Roles",
            "usersest": "Usuarios Internos",
            "permisos": "Permisos",
            "tarifacargosCR": "Tarifa Cargos Cortes y Reconexión",
            "lecturacampobase": "Lectura Campo Base",
            "lecturacampo": "Lectura Campo",
            "accesoinformacion": "Acceso Informacion Publica",
            "activosfijos": "Activos Fijos",
            "actualizacion": "Actualizacion de Datos",
            "codigopostal": "Codigo Postal",
            "concausistica": "Causisitica",
            "voltajeservicio": "Voltaje del Servicio",
            "departamentos": "Departamentos",
            "departamentosempresa": "Departamentos-Unidades-Jefaturas",
            "facturacion": "Facturación",
            "realizarpago": "Realizar Pago",
            "municipios": "Municipios",
            "paises": "Paises",
            "servicios": "Servicios",
            "tarifabloquegeneral": "Tarifa Bloque General",
            "accesoinformacionformulario": "Formulario de Acceso Informacion",
            "concategoriaservicio": "Categoría de Servicio",
        };
    
        function humanize(text) {
            if (!text) return '';
            if (permLabels[text]) return permLabels[text];
            let result = text.replace(/([a-z])([A-Z])/g, '$1 $2');
            result = result.replace(/([A-Z])([A-Z][a-z])/g, '$1 $2');
            result = result.replace(/_/g, ' ');
            return result.charAt(0).toUpperCase() + result.slice(1);
        }

        function updateSelectedCount() {
            selectedCountEl.textContent = `${selectedPermissions.size} permisos seleccionados`;
        }

        function updateGroupCounters() {
            document.querySelectorAll('.perm-group').forEach(group => {
                const groupCards = group.querySelectorAll('.perm-card');
                const selectedInGroup = group.querySelectorAll('.perm-selected').length;
                const totalInGroup = groupCards.length;
                
                const counter = group.querySelector('.group-counter');
                if (counter) {
                    counter.textContent = `(${selectedInGroup}/${totalInGroup})`;
                }
            });
        }

        function togglePermission(card, permissionId) {
            const checkbox = card.querySelector('input[type=checkbox]');
            const isSelected = selectedPermissions.has(permissionId);
            
            // Agregar animación de selección
            card.classList.add('selecting');
            setTimeout(() => card.classList.remove('selecting'), 300);
            
            if (isSelected) {
                selectedPermissions.delete(permissionId);
                card.classList.remove('perm-selected');
                checkbox.checked = false;
                
                // Resetear estilos inline para deselección
                card.style.backgroundColor = '';
                card.style.background = '';
                card.style.color = '';
                card.style.border = '';
                card.style.boxShadow = '';
            } else {
                selectedPermissions.add(permissionId);
                card.classList.add('perm-selected');
                checkbox.checked = true;
                
                // Forzar estilos inline para KaiAdmin
                card.style.backgroundColor = '#198754';
                card.style.background = 'linear-gradient(135deg, #198754 0%, #20c997 100%)';
                card.style.color = '#ffffff';
                card.style.border = '2px solid #146c43';
                card.style.boxShadow = '0 4px 12px rgba(25, 135, 84, 0.3)';
                
                // Forzar color del texto
                const textElement = card.querySelector('.card-text');
                if (textElement) {
                    textElement.style.color = '#ffffff';
                }
            }
            
            updateSelectedCount();
            updateGroupCounters();
        }
    
        // Cargar permisos asignados al rol
        const assignedPermissions = @json($role->permissions->pluck('id')->toArray());
        assignedPermissions.forEach(id => selectedPermissions.add(id));
        updateSelectedCount();

        fetch("/api/permissions")
            .then(response => response.json())
            .then(data => {
                allPermissions = data;
                loading.style.display = "none";
                container.style.display = "block";
    
                const grouped = {};
    
                // Agrupar permisos
                data.forEach(p => {
                    const group = p.name.split('.')[0];
                    grouped[group] = grouped[group] || [];
                    grouped[group].push(p);
                });
    
                Object.entries(grouped).forEach(([groupName, permissions]) => {
                    const groupCard = document.createElement('div');
                    groupCard.className = 'mb-4 perm-group';
    
                    const toggle = document.createElement('div');
                    toggle.className = 'perm-toggle collapsed';
                    toggle.innerHTML = `
                        <h6 class="perm-group-title mb-0">
                            ${humanize(groupName)} 
                            <span class="group-counter">(0/${permissions.length})</span>
                        </h6>
                        <i class="fas fa-chevron-down toggle-icon"></i>
                    `;
    
                    const row = document.createElement('div');
                    row.className = 'row g-3 mt-2';
                    row.style.display = 'none';
    
                    permissions.forEach(permission => {
                        const isChecked = selectedPermissions.has(permission.id);
                        const selectedClass = isChecked ? 'perm-selected' : '';
                        const labelText = humanize(permission.description || permission.name);
                        
                        // Estilos inline para elementos pre-seleccionados (KaiAdmin override)
                        const inlineStyles = isChecked ? 
                            `style="background: linear-gradient(135deg, #198754 0%, #20c997 100%) !important; 
                                    background-color: #198754 !important; 
                                    color: #ffffff !important; 
                                    border: 2px solid #146c43 !important; 
                                    box-shadow: 0 4px 12px rgba(25, 135, 84, 0.3) !important;"` : '';
                        
                        const textStyle = isChecked ? 'style="color: #ffffff !important;"' : '';
    
                        const col = document.createElement('div');
                        col.className = 'col-6 col-md-4 col-lg-3 perm-col';
    
                        col.innerHTML = `
                            <div class="card perm-card text-center ${selectedClass}" data-id="${permission.id}" ${inlineStyles}>
                                <div class="card-body py-2">
                                    <p class="card-text mb-1" style="font-size: 0.9rem;" ${textStyle}>${labelText}</p>
                                    <input type="checkbox" class="d-none" name="permissions[]" value="${permission.id}" ${isChecked ? 'checked' : ''}>
                                </div>
                            </div>
                        `;
    
                        row.appendChild(col);
                    });
    
                    toggle.addEventListener('click', function () {
                        const isVisible = row.style.display === 'block';
                        row.style.display = isVisible ? 'none' : 'block';
                        toggle.classList.toggle('collapsed', isVisible);
                    });
    
                    groupCard.appendChild(toggle);
                    groupCard.appendChild(row);
                    container.appendChild(groupCard);
                });
    
                // Event listeners para las tarjetas de permisos
                document.querySelectorAll('.perm-card').forEach(card => {
                    card.addEventListener('click', function () {
                        const permissionId = parseInt(this.getAttribute('data-id'));
                        togglePermission(this, permissionId);
                    });
                });

                // Actualizar contadores iniciales
                updateGroupCounters();
            })
            .catch(error => {
                loading.innerHTML = `<span class="text-danger">Error al cargar permisos.</span>`;
                console.error("Error:", error);
            });

        // Botón seleccionar todos
        selectAllBtn.addEventListener('click', function() {
            document.querySelectorAll('.perm-card').forEach(card => {
                const permissionId = parseInt(card.getAttribute('data-id'));
                if (!selectedPermissions.has(permissionId)) {
                    togglePermission(card, permissionId);
                }
            });
        });

        // Botón deseleccionar todos
        deselectAllBtn.addEventListener('click', function() {
            document.querySelectorAll('.perm-card').forEach(card => {
                const permissionId = parseInt(card.getAttribute('data-id'));
                if (selectedPermissions.has(permissionId)) {
                    togglePermission(card, permissionId);
                }
            });
        });
    
        // Búsqueda mejorada
        searchInput.addEventListener("input", function () {
            const query = this.value.toLowerCase();
            const groups = document.querySelectorAll('.perm-group');
            
            groups.forEach(group => {
                const cols = group.querySelectorAll('.perm-col');
                let visibleCount = 0;
                
                cols.forEach(col => {
                    const text = col.querySelector('.card-text').textContent.toLowerCase();
                    const isVisible = text.includes(query);
                    col.style.display = isVisible ? '' : 'none';
                    if (isVisible) visibleCount++;
                });
                
                // Mostrar/ocultar grupo según si tiene elementos visibles
                const groupRow = group.querySelector('.row');
                if (query && visibleCount > 0) {
                    groupRow.style.display = 'block';
                    group.querySelector('.perm-toggle').classList.remove('collapsed');
                } else if (query && visibleCount === 0) {
                    group.style.display = 'none';
                } else {
                    group.style.display = 'block';
                    if (query === '') {
                        groupRow.style.display = 'none';
                        group.querySelector('.perm-toggle').classList.add('collapsed');
                    }
                }
            });
        });
    });
</script>
@stop