{% extends "base.html" %}

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

{% block content %}
<div class="records-page">
    <div class="page-header">
        <h1><i class="fas fa-list"></i> Registros de Asistencia</h1>
    </div>
    
    <div class="filters-section">
        <h3><i class="fas fa-filter"></i> Filtros</h3>
        <div class="form-row">
            <div class="form-group">
                <label for="filterStartDate">Fecha Inicio</label>
                <input type="date" id="filterStartDate">
            </div>
            <div class="form-group">
                <label for="filterEndDate">Fecha Fin</label>
                <input type="date" id="filterEndDate">
            </div>
            <div class="form-group">
                <label for="filterEmployee">Empleado</label>
                <select id="filterEmployee">
                    <option value="">Todos</option>
                </select>
            </div>
            <div class="form-group">
                <label for="filterStatus">Estado</label>
                <select id="filterStatus">
                    <option value="">Todos</option>
                    <option value="present">Presente</option>
                    <option value="late">Tarde</option>
                    <option value="absent">Ausente</option>
                </select>
            </div>
            <div class="form-group">
                <button class="btn btn-primary" onclick="applyFilters()">
                    <i class="fas fa-search"></i> Buscar
                </button>
            </div>
        </div>
    </div>
    
    <div class="table-container">
        <table class="data-table" id="recordsTable">
            <thead>
                <tr>
                    <th>Fecha</th>
                    <th>Empleado</th>
                    <th>Código</th>
                    <th>Entrada</th>
                    <th>Salida</th>
                    <th>Horas</th>
                    <th>Estado</th>
                </tr>
            </thead>
            <tbody id="recordsTableBody">
                <tr>
                    <td colspan="7" class="text-center">Cargando...</td>
                </tr>
            </tbody>
        </table>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
function loadRecords() {
    const params = {
        start_date: $('#filterStartDate').val(),
        end_date: $('#filterEndDate').val(),
        employee_id: $('#filterEmployee').val(),
        status: $('#filterStatus').val()
    };
    
    $.ajax({
        url: '/attendance/api/attendance/records',
        method: 'GET',
        data: params,
        success: function(response) {
            if (response.success) {
                renderRecords(response.attendances);
            }
        },
        error: function() {
            showAlert('Error al cargar registros', 'error');
        }
    });
}

function renderRecords(records) {
    const tbody = $('#recordsTableBody');
    tbody.empty();
    
    if (records.length === 0) {
        tbody.append('<tr><td colspan="7" class="text-center">No hay registros</td></tr>');
        return;
    }
    
    records.forEach(rec => {
        const statusClass = rec.status === 'absent' ? 'danger' : (rec.is_late ? 'warning' : 'success');
        const workHours = rec.work_hours ? rec.work_hours.toFixed(2) : '-';
        
        const row = `
            <tr>
                <td>${rec.date}</td>
                <td>${rec.employee_name}</td>
                <td>${rec.employee_code}</td>
                <td>${rec.check_in_time || '-'}</td>
                <td>${rec.check_out_time || '-'}</td>
                <td>${workHours}</td>
                <td><span class="badge badge-${statusClass}">${rec.status}</span></td>
            </tr>
        `;
        tbody.append(row);
    });
}

function applyFilters() {
    loadRecords();
}

$(document).ready(function() {
    // Cargar empleados para filtro
    $.ajax({
        url: '/employees/api/employees',
        method: 'GET',
        success: function(response) {
            if (response.success) {
                const select = $('#filterEmployee');
                response.employees.forEach(emp => {
                    select.append(`<option value="${emp.id}">${emp.full_name}</option>`);
                });
            }
        }
    });
    
    // Establecer fechas por defecto (últimos 30 días)
    const today = new Date();
    $('#filterEndDate').val(today.toISOString().split('T')[0]);
    
    const thirtyDaysAgo = new Date();
    thirtyDaysAgo.setDate(thirtyDaysAgo.getDate() - 30);
    $('#filterStartDate').val(thirtyDaysAgo.toISOString().split('T')[0]);
    
    loadRecords();
});
</script>
{% endblock %}