{% extends "base.html" %}

{% block title %}Empleados - Sistema de Asistencia{% endblock %}

{% block content %}
<div class="employees-page">
    <div class="page-header">
        <h1><i class="fas fa-users"></i> Gestión de Empleados</h1>
        <a href="{{ url_for('employees.add_employee') }}" class="btn btn-primary">
            <i class="fas fa-user-plus"></i> Agregar Empleado
        </a>
    </div>
    
    <div class="search-bar">
        <input type="text" id="searchInput" placeholder="Buscar por nombre, código o email...">
        <button class="btn btn-secondary" onclick="searchEmployees()">
            <i class="fas fa-search"></i> Buscar
        </button>
    </div>
    
    <div class="table-container">
        <table class="data-table" id="employeesTable">
            <thead>
                <tr>
                    <th>Código</th>
                    <th>Nombre</th>
                    <th>Email</th>
                    <th>Departamento</th>
                    <th>Puesto</th>
                    <th>Estado</th>
                    <th>Acciones</th>
                </tr>
            </thead>
            <tbody id="employeesTableBody">
                <tr>
                    <td colspan="7" class="text-center">Cargando...</td>
                </tr>
            </tbody>
        </table>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
let employees = [];

function loadEmployees() {
    $.ajax({
        url: '/employees/api/employees',
        method: 'GET',
        success: function(response) {
            if (response.success) {
                employees = response.employees;
                renderEmployees(employees);
            }
        },
        error: function() {
            showAlert('Error al cargar empleados', 'error');
        }
    });
}

function renderEmployees(data) {
    const tbody = $('#employeesTableBody');
    tbody.empty();
    
    if (data.length === 0) {
        tbody.append('<tr><td colspan="7" class="text-center">No hay empleados registrados</td></tr>');
        return;
    }
    
    data.forEach(emp => {
        const statusBadge = emp.is_active ? 
            '<span class="badge badge-success">Activo</span>' : 
            '<span class="badge badge-danger">Inactivo</span>';
        
        const row = `
            <tr>
                <td>${emp.employee_code}</td>
                <td>${emp.full_name}</td>
                <td>${emp.email || '-'}</td>
                <td>${emp.department || '-'}</td>
                <td>${emp.position || '-'}</td>
                <td>${statusBadge}</td>
                <td>
                    <button class="btn btn-sm btn-info" onclick="editEmployee(${emp.id})">
                        <i class="fas fa-edit"></i>
                    </button>
                    <button class="btn btn-sm btn-danger" onclick="deleteEmployee(${emp.id})">
                        <i class="fas fa-trash"></i>
                    </button>
                </td>
            </tr>
        `;
        tbody.append(row);
    });
}

function searchEmployees() {
    const searchTerm = $('#searchInput').val().toLowerCase();
    const filtered = employees.filter(emp => 
        emp.full_name.toLowerCase().includes(searchTerm) ||
        emp.employee_code.toLowerCase().includes(searchTerm) ||
        (emp.email && emp.email.toLowerCase().includes(searchTerm))
    );
    renderEmployees(filtered);
}

function editEmployee(id) {
    window.location.href = `/employees/edit/${id}`;
}

function deleteEmployee(id) {
    if (!confirm('¿Está seguro de eliminar este empleado?')) return;
    
    $.ajax({
        url: `/employees/api/employees/${id}`,
        method: 'DELETE',
        success: function(response) {
            if (response.success) {
                showAlert('Empleado eliminado exitosamente', 'success');
                loadEmployees();
            }
        },
        error: function() {
            showAlert('Error al eliminar empleado', 'error');
        }
    });
}

$(document).ready(function() {
    loadEmployees();
});
</script>
{% endblock %}