{% extends "base.html" %}

{% block title %}Editar Empleado - Sistema de Asistencia{% endblock %}

{% block content %}
<div class="employee-form-page">
    <div class="page-header">
        <h1><i class="fas fa-user-edit"></i> Editar Empleado</h1>
        <a href="{{ url_for('employees.list_employees') }}" class="btn btn-secondary">
            <i class="fas fa-arrow-left"></i> Volver
        </a>
    </div>
    
    <form id="editEmployeeForm" class="form-container">
        <input type="hidden" id="employee_id" value="{{ employee.id }}">
        
        <div class="form-row">
            <div class="form-group">
                <label for="employee_code">Código de Empleado</label>
                <input type="text" id="employee_code" value="{{ employee.employee_code }}" disabled>
            </div>
            
            <div class="form-group">
                <label for="full_name">Nombre Completo *</label>
                <input type="text" id="full_name" name="full_name" value="{{ employee.full_name }}" required>
            </div>
        </div>
        
        <div class="form-row">
            <div class="form-group">
                <label for="email">Email</label>
                <input type="email" id="email" name="email" value="{{ employee.email or '' }}">
            </div>
            
            <div class="form-group">
                <label for="phone">Teléfono</label>
                <input type="tel" id="phone" name="phone" value="{{ employee.phone or '' }}">
            </div>
        </div>
        
        <div class="form-row">
            <div class="form-group">
                <label for="department">Departamento</label>
                <input type="text" id="department" name="department" value="{{ employee.department or '' }}">
            </div>
            
            <div class="form-group">
                <label for="position">Puesto</label>
                <input type="text" id="position" name="position" value="{{ employee.position or '' }}">
            </div>
        </div>
        
        <div class="form-group">
            <label>
                <input type="checkbox" id="is_active" name="is_active" {% if employee.is_active %}checked{% endif %}>
                Empleado activo
            </label>
        </div>
        
        <div class="form-actions">
            <button type="submit" class="btn btn-primary btn-lg">
                <i class="fas fa-save"></i> Guardar Cambios
            </button>
            <a href="{{ url_for('employees.list_employees') }}" class="btn btn-secondary btn-lg">
                <i class="fas fa-times"></i> Cancelar
            </a>
        </div>
    </form>
</div>
{% endblock %}

{% block extra_js %}
<script>
$('#editEmployeeForm').submit(function(e) {
    e.preventDefault();
    
    const employeeId = $('#employee_id').val();
    const data = {
        full_name: $('#full_name').val(),
        email: $('#email').val(),
        phone: $('#phone').val(),
        department: $('#department').val(),
        position: $('#position').val(),
        is_active: $('#is_active').is(':checked')
    };
    
    $.ajax({
        url: `/employees/api/employees/${employeeId}`,
        method: 'PUT',
        contentType: 'application/json',
        data: JSON.stringify(data),
        success: function(response) {
            if (response.success) {
                showAlert('Empleado actualizado exitosamente', 'success');
                setTimeout(() => {
                    window.location.href = '/employees/';
                }, 1500);
            }
        },
        error: function(xhr) {
            const response = xhr.responseJSON;
            showAlert(response?.message || 'Error al actualizar empleado', 'error');
        }
    });
});
</script>
{% endblock %}