@extends('layouts.app')

@section('title', 'Gestión de Roles')

@section('content')
<div class="container-fluid">
    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <h4 class="mb-0">
                        <i class="fas fa-user-shield text-warning"></i>
                        Gestión de Roles y Permisos
                    </h4>
                    <div class="btn-group">
                        <button type="button" class="btn btn-success" data-toggle="modal" data-target="#createRoleModal">
                            <i class="fas fa-plus"></i> Nuevo Rol
                        </button>
                        <button type="button" class="btn btn-info" onclick="showPermissionsMatrix()">
                            <i class="fas fa-table"></i> Matriz de Permisos
                        </button>
                        <button type="button" class="btn btn-warning" onclick="exportRoles()">
                            <i class="fas fa-download"></i> Exportar
                        </button>
                    </div>
                </div>

                <div class="card-body">
                    <!-- Filtros -->
                    <div class="row mb-3">
                        <div class="col-md-3">
                            <input type="text" class="form-control form-control-sm" id="filter-name" placeholder="Buscar rol...">
                        </div>
                        <div class="col-md-2">
                            <select class="form-control form-control-sm" id="filter-status">
                                <option value="">Todos los estados</option>
                                <option value="active">Activo</option>
                                <option value="inactive">Inactivo</option>
                            </select>
                        </div>
                        <div class="col-md-3">
                            <select class="form-control form-control-sm" id="filter-guard">
                                <option value="">Todos los guards</option>
                                <option value="web">Web</option>
                                <option value="api">API</option>
                            </select>
                        </div>
                        <div class="col-md-3">
                            <input type="text" class="form-control form-control-sm" id="filter-permission" placeholder="Buscar permiso...">
                        </div>
                        <div class="col-md-1">
                            <button type="button" class="btn btn-sm btn-primary" onclick="applyFilters()">
                                <i class="fas fa-search"></i>
                            </button>
                        </div>
                    </div>

                    <!-- Tabla de roles -->
                    <div class="table-responsive">
                        <table class="table table-striped table-hover" id="roles-table">
                            <thead class="thead-dark">
                                <tr>
                                    <th width="15%">Rol</th>
                                    <th width="20%">Descripción</th>
                                    <th width="10%">Guard</th>
                                    <th width="10%">Usuarios</th>
                                    <th width="25%">Permisos</th>
                                    <th width="10%">Estado</th>
                                    <th width="10%">Acciones</th>
                                </tr>
                            </thead>
                            <tbody id="roles-tbody">
                                @forelse($roles as $role)
                                <tr class="role-row" data-role="{{ $role->name }}">
                                    <td>
                                        <div class="d-flex align-items-center">
                                            <i class="fas {{ getRoleIcon($role->name) }} text-{{ getRoleColor($role->name) }} mr-2"></i>
                                            <div>
                                                <div class="font-weight-bold">{{ $role->name }}</div>
                                                <small class="text-muted">ID: {{ $role->id }}</small>
                                            </div>
                                        </div>
                                    </td>
                                    <td>
                                        <div class="text-truncate" style="max-width: 150px;" title="{{ $role->description }}">
                                            {{ $role->description ?? 'Sin descripción' }}
                                        </div>
                                    </td>
                                    <td>
                                        <span class="badge badge-info">{{ $role->guard_name }}</span>
                                    </td>
                                    <td>
                                        <span class="badge badge-primary">{{ $role->users_count ?? 0 }}</span>
                                    </td>
                                    <td>
                                        <div class="d-flex flex-wrap">
                                            @foreach($role->permissions->take(3) as $permission)
                                            <span class="badge badge-secondary mr-1 mb-1" style="font-size: 0.7rem;">
                                                {{ $permission->name }}
                                            </span>
                                            @endforeach
                                            @if($role->permissions->count() > 3)
                                            <span class="badge badge-light">
                                                +{{ $role->permissions->count() - 3 }} más
                                            </span>
                                            @endif
                                        </div>
                                    </td>
                                    <td>
                                        <span class="badge badge-{{ $role->is_active ? 'success' : 'danger' }}">
                                            {{ $role->is_active ? 'Activo' : 'Inactivo' }}
                                        </span>
                                    </td>
                                    <td>
                                        <div class="btn-group btn-group-sm">
                                            <button type="button" class="btn btn-info" onclick="showRoleDetail({{ $role->id }})" title="Ver detalles">
                                                <i class="fas fa-eye"></i>
                                            </button>
                                            @can('role-edit')
                                            <button type="button" class="btn btn-warning" onclick="editRole({{ $role->id }})" title="Editar">
                                                <i class="fas fa-edit"></i>
                                            </button>
                                            @endcan
                                            @can('role-permissions')
                                            <button type="button" class="btn btn-primary" onclick="managePermissions({{ $role->id }})" title="Permisos">
                                                <i class="fas fa-key"></i>
                                            </button>
                                            @endcan
                                            @can('role-delete')
                                            @if(!in_array($role->name, ['super-admin', 'admin']))
                                            <button type="button" class="btn btn-danger" onclick="deleteRole({{ $role->id }})" title="Eliminar">
                                                <i class="fas fa-trash"></i>
                                            </button>
                                            @endif
                                            @endcan
                                        </div>
                                    </td>
                                </tr>
                                @empty
                                <tr>
                                    <td colspan="7" class="text-center text-muted">
                                        <i class="fas fa-user-shield"></i> No hay roles disponibles
                                    </td>
                                </tr>
                                @endforelse
                            </tbody>
                        </table>
                    </div>

                    <!-- Paginación -->
                    @if($roles->hasPages())
                    <div class="d-flex justify-content-center">
                        {{ $roles->links() }}
                    </div>
                    @endif
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Modal para crear rol -->
<div class="modal fade" id="createRoleModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">
                    <i class="fas fa-plus-circle"></i> Crear Nuevo Rol
                </h5>
                <button type="button" class="close" data-dismiss="modal">
                    <span>&times;</span>
                </button>
            </div>
            <form id="create-role-form">
                @csrf
                <div class="modal-body">
                    <div class="form-group">
                        <label for="name">Nombre del Rol</label>
                        <input type="text" class="form-control" id="name" name="name" required>
                        <small class="form-text text-muted">
                            Use formato kebab-case (ej: operador-tecnico)
                        </small>
                    </div>
                    <div class="form-group">
                        <label for="description">Descripción</label>
                        <textarea class="form-control" id="description" name="description" rows="3"></textarea>
                    </div>
                    <div class="form-group">
                        <label for="guard_name">Guard</label>
                        <select class="form-control" id="guard_name" name="guard_name" required>
                            <option value="web">Web</option>
                            <option value="api">API</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <div class="custom-control custom-switch">
                            <input type="checkbox" class="custom-control-input" id="is_active" name="is_active" checked>
                            <label class="custom-control-label" for="is_active">Rol activo</label>
                        </div>
                    </div>
                    <div class="form-group">
                        <label>Permisos Iniciales</label>
                        <div class="row" id="permissions-list">
                            @foreach($permissions as $permission)
                            <div class="col-md-6 mb-2">
                                <div class="custom-control custom-checkbox">
                                    <input type="checkbox" class="custom-control-input" id="perm_{{ $permission->id }}" name="permissions[]" value="{{ $permission->id }}">
                                    <label class="custom-control-label" for="perm_{{ $permission->id }}">
                                        {{ $permission->name }}
                                    </label>
                                </div>
                            </div>
                            @endforeach
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancelar</button>
                    <button type="submit" class="btn btn-success" id="create-role-btn">
                        <i class="fas fa-save"></i> Crear Rol
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- Modal para editar rol -->
<div class="modal fade" id="editRoleModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">
                    <i class="fas fa-edit"></i> Editar Rol
                </h5>
                <button type="button" class="close" data-dismiss="modal">
                    <span>&times;</span>
                </button>
            </div>
            <form id="edit-role-form">
                @csrf
                @method('PUT')
                <div class="modal-body" id="edit-role-content">
                    <!-- Contenido del formulario se carga aquí -->
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancelar</button>
                    <button type="submit" class="btn btn-warning" id="edit-role-btn">
                        <i class="fas fa-save"></i> Actualizar Rol
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- Modal para gestionar permisos -->
<div class="modal fade" id="permissionsModal" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">
                    <i class="fas fa-key"></i> Gestionar Permisos
                </h5>
                <button type="button" class="close" data-dismiss="modal">
                    <span>&times;</span>
                </button>
            </div>
            <div class="modal-body" id="permissions-content">
                <!-- Contenido de permisos se carga aquí -->
            </div>
        </div>
    </div>
</div>

<!-- Modal para detalles del rol -->
<div class="modal fade" id="roleDetailModal" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">
                    <i class="fas fa-info-circle"></i> Detalle del Rol
                </h5>
                <button type="button" class="close" data-dismiss="modal">
                    <span>&times;</span>
                </button>
            </div>
            <div class="modal-body" id="role-detail-content">
                <!-- Contenido del rol se carga aquí -->
            </div>
        </div>
    </div>
</div>

<!-- Modal matriz de permisos -->
<div class="modal fade" id="permissionsMatrixModal" tabindex="-1">
    <div class="modal-dialog modal-xl">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">
                    <i class="fas fa-table"></i> Matriz de Permisos
                </h5>
                <button type="button" class="close" data-dismiss="modal">
                    <span>&times;</span>
                </button>
            </div>
            <div class="modal-body" id="permissions-matrix-content">
                <!-- Matriz de permisos se carga aquí -->
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
document.getElementById('create-role-form').addEventListener('submit', function(e) {
    e.preventDefault();
    
    const formData = new FormData(this);
    const createBtn = document.getElementById('create-role-btn');
    
    createBtn.disabled = true;
    createBtn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Creando...';
    
    fetch('{{ route("roles.store") }}', {
        method: 'POST',
        headers: {
            'X-CSRF-TOKEN': '{{ csrf_token() }}'
        },
        body: formData
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            alert('Rol creado exitosamente');
            $('#createRoleModal').modal('hide');
            location.reload();
        } else {
            alert('Error: ' + (data.message || 'Error al crear el rol'));
        }
    })
    .catch(error => {
        console.error('Error:', error);
        alert('Error al crear el rol');
    })
    .finally(() => {
        createBtn.disabled = false;
        createBtn.innerHTML = '<i class="fas fa-save"></i> Crear Rol';
    });
});

function applyFilters() {
    const name = document.getElementById('filter-name').value;
    const status = document.getElementById('filter-status').value;
    const guard = document.getElementById('filter-guard').value;
    const permission = document.getElementById('filter-permission').value;
    
    const params = new URLSearchParams();
    if (name) params.append('name', name);
    if (status) params.append('status', status);
    if (guard) params.append('guard', guard);
    if (permission) params.append('permission', permission);
    
    window.location.href = '{{ route("roles.index") }}?' + params.toString();
}

function showRoleDetail(roleId) {
    fetch(`/roles/${roleId}`, {
        headers: {
            'Accept': 'application/json',
            'X-CSRF-TOKEN': '{{ csrf_token() }}'
        }
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            const role = data.data;
            const content = `
                <div class="row">
                    <div class="col-md-6">
                        <strong>Nombre:</strong> ${role.name}
                    </div>
                    <div class="col-md-6">
                        <strong>Guard:</strong> 
                        <span class="badge badge-info">${role.guard_name}</span>
                    </div>
                    <div class="col-md-6">
                        <strong>Estado:</strong> 
                        <span class="badge badge-${role.is_active ? 'success' : 'danger'}">
                            ${role.is_active ? 'Activo' : 'Inactivo'}
                        </span>
                    </div>
                    <div class="col-md-6">
                        <strong>Usuarios asignados:</strong> ${role.users_count || 0}
                    </div>
                    <div class="col-12 mt-3">
                        <strong>Descripción:</strong>
                        <p class="bg-light p-2 rounded">${role.description || 'Sin descripción'}</p>
                    </div>
                    <div class="col-12">
                        <strong>Permisos (${role.permissions.length}):</strong>
                        <div class="mt-2">
                            ${role.permissions.map(perm => `
                                <span class="badge badge-primary mr-1 mb-1">${perm.name}</span>
                            `).join('')}
                        </div>
                    </div>
                    <div class="col-12 mt-3">
                        <strong>Creado:</strong> ${new Date(role.created_at).toLocaleString()}
                    </div>
                </div>
            `;
            document.getElementById('role-detail-content').innerHTML = content;
            $('#roleDetailModal').modal('show');
        }
    })
    .catch(error => {
        console.error('Error:', error);
        alert('Error al cargar el detalle del rol');
    });
}

function editRole(roleId) {
    fetch(`/roles/${roleId}/edit`, {
        headers: {
            'Accept': 'application/json',
            'X-CSRF-TOKEN': '{{ csrf_token() }}'
        }
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            const role = data.data;
            const content = `
                <input type="hidden" name="role_id" value="${role.id}">
                <div class="form-group">
                    <label for="edit_name">Nombre del Rol</label>
                    <input type="text" class="form-control" id="edit_name" name="name" value="${role.name}" required>
                </div>
                <div class="form-group">
                    <label for="edit_description">Descripción</label>
                    <textarea class="form-control" id="edit_description" name="description" rows="3">${role.description || ''}</textarea>
                </div>
                <div class="form-group">
                    <label for="edit_guard_name">Guard</label>
                    <select class="form-control" id="edit_guard_name" name="guard_name" required>
                        <option value="web" ${role.guard_name === 'web' ? 'selected' : ''}>Web</option>
                        <option value="api" ${role.guard_name === 'api' ? 'selected' : ''}>API</option>
                    </select>
                </div>
                <div class="form-group">
                    <div class="custom-control custom-switch">
                        <input type="checkbox" class="custom-control-input" id="edit_is_active" name="is_active" ${role.is_active ? 'checked' : ''}>
                        <label class="custom-control-label" for="edit_is_active">Rol activo</label>
                    </div>
                </div>
            `;
            document.getElementById('edit-role-content').innerHTML = content;
            $('#editRoleModal').modal('show');
        }
    })
    .catch(error => {
        console.error('Error:', error);
        alert('Error al cargar los datos del rol');
    });
}

document.getElementById('edit-role-form').addEventListener('submit', function(e) {
    e.preventDefault();
    
    const formData = new FormData(this);
    const roleId = formData.get('role_id');
    const editBtn = document.getElementById('edit-role-btn');
    
    editBtn.disabled = true;
    editBtn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Actualizando...';
    
    fetch(`/roles/${roleId}`, {
        method: 'POST',
        headers: {
            'X-CSRF-TOKEN': '{{ csrf_token() }}'
        },
        body: formData
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            alert('Rol actualizado exitosamente');
            $('#editRoleModal').modal('hide');
            location.reload();
        } else {
            alert('Error: ' + (data.message || 'Error al actualizar el rol'));
        }
    })
    .catch(error => {
        console.error('Error:', error);
        alert('Error al actualizar el rol');
    })
    .finally(() => {
        editBtn.disabled = false;
        editBtn.innerHTML = '<i class="fas fa-save"></i> Actualizar Rol';
    });
});

function managePermissions(roleId) {
    fetch(`/roles/${roleId}/permissions`, {
        headers: {
            'Accept': 'application/json',
            'X-CSRF-TOKEN': '{{ csrf_token() }}'
        }
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            const role = data.data.role;
            const permissions = data.data.permissions;
            const rolePermissions = role.permissions.map(p => p.id);
            
            const content = `
                <h6>Permisos para: <strong>${role.name}</strong></h6>
                <form id="permissions-form">
                    <input type="hidden" name="role_id" value="${role.id}">
                    <div class="row">
                        ${permissions.map(permission => `
                            <div class="col-md-6 mb-2">
                                <div class="custom-control custom-checkbox">
                                    <input type="checkbox" class="custom-control-input" 
                                           id="permission_${permission.id}" 
                                           name="permissions[]" 
                                           value="${permission.id}"
                                           ${rolePermissions.includes(permission.id) ? 'checked' : ''}>
                                    <label class="custom-control-label" for="permission_${permission.id}">
                                        ${permission.name}
                                    </label>
                                </div>
                            </div>
                        `).join('')}
                    </div>
                    <div class="text-right mt-3">
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancelar</button>
                        <button type="submit" class="btn btn-primary">
                            <i class="fas fa-save"></i> Guardar Permisos
                        </button>
                    </div>
                </form>
            `;
            document.getElementById('permissions-content').innerHTML = content;
            $('#permissionsModal').modal('show');
            
            // Agregar event listener al formulario
            document.getElementById('permissions-form').addEventListener('submit', function(e) {
                e.preventDefault();
                saveRolePermissions(this);
            });
        }
    })
    .catch(error => {
        console.error('Error:', error);
        alert('Error al cargar los permisos');
    });
}

function saveRolePermissions(form) {
    const formData = new FormData(form);
    const roleId = formData.get('role_id');
    
    fetch(`/roles/${roleId}/permissions`, {
        method: 'POST',
        headers: {
            'X-CSRF-TOKEN': '{{ csrf_token() }}'
        },
        body: formData
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            alert('Permisos actualizados exitosamente');
            $('#permissionsModal').modal('hide');
            location.reload();
        } else {
            alert('Error: ' + (data.message || 'Error al actualizar los permisos'));
        }
    })
    .catch(error => {
        console.error('Error:', error);
        alert('Error al actualizar los permisos');
    });
}

function deleteRole(roleId) {
    if (confirm('¿Está seguro de eliminar este rol? Esta acción no se puede deshacer.')) {
        fetch(`/roles/${roleId}`, {
            method: 'DELETE',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': '{{ csrf_token() }}'
            }
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                alert('Rol eliminado exitosamente');
                location.reload();
            } else {
                alert('Error: ' + (data.message || 'Error al eliminar el rol'));
            }
        })
        .catch(error => {
            console.error('Error:', error);
            alert('Error al eliminar el rol');
        });
    }
}

function showPermissionsMatrix() {
    fetch('/roles/permissions-matrix', {
        headers: {
            'Accept': 'application/json',
            'X-CSRF-TOKEN': '{{ csrf_token() }}'
        }
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            const { roles, permissions } = data.data;
            
            let table = `
                <div class="table-responsive">
                    <table class="table table-sm table-bordered">
                        <thead class="thead-dark">
                            <tr>
                                <th>Permiso</th>
                                ${roles.map(role => `<th class="text-center" style="writing-mode: vertical-lr; text-orientation: mixed;">${role.name}</th>`).join('')}
                            </tr>
                        </thead>
                        <tbody>
            `;
            
            permissions.forEach(permission => {
                table += `<tr>
                    <td><small>${permission.name}</small></td>`;
                
                roles.forEach(role => {
                    const hasPermission = role.permissions.some(p => p.id === permission.id);
                    table += `<td class="text-center">
                        ${hasPermission ? '<i class="fas fa-check text-success"></i>' : '<i class="fas fa-times text-danger"></i>'}
                    </td>`;
                });
                
                table += '</tr>';
            });
            
            table += `
                        </tbody>
                    </table>
                </div>
            `;
            
            document.getElementById('permissions-matrix-content').innerHTML = table;
            $('#permissionsMatrixModal').modal('show');
        }
    })
    .catch(error => {
        console.error('Error:', error);
        alert('Error al cargar la matriz de permisos');
    });
}

function exportRoles() {
    fetch('/roles/export', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'X-CSRF-TOKEN': '{{ csrf_token() }}'
        }
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            alert('Exportación iniciada. Recibirá una notificación cuando esté lista.');
        }
    })
    .catch(error => {
        console.error('Error:', error);
        alert('Error al iniciar la exportación');
    });
}
</script>
@endpush

@php
function getRoleIcon($roleName) {
    $icons = [
        'super-admin' => 'fa-crown',
        'admin' => 'fa-user-shield',
        'gerente' => 'fa-user-tie',
        'supervisor' => 'fa-user-check',
        'tecnico' => 'fa-tools',
        'operador' => 'fa-user',
        'cliente' => 'fa-user-circle'
    ];
    return $icons[$roleName] ?? 'fa-user-tag';
}

function getRoleColor($roleName) {
    $colors = [
        'super-admin' => 'danger',
        'admin' => 'warning',
        'gerente' => 'info',
        'supervisor' => 'primary',
        'tecnico' => 'success',
        'operador' => 'secondary',
        'cliente' => 'dark'
    ];
    return $colors[$roleName] ?? 'secondary';
}
@endphp