{% extends "base.html" %}

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

{% block content %}
<div class="reports-page">
    <div class="page-header">
        <h1><i class="fas fa-chart-bar"></i> Reportes de Asistencia</h1>
        <p>Genera y exporta reportes de asistencia</p>
    </div>
    
    <div class="reports-tabs">
        <button class="tab-btn active" onclick="showTab('daily')">Reporte Diario</button>
        <button class="tab-btn" onclick="showTab('employee')">Reporte por Empleado</button>
        <button class="tab-btn" onclick="showTab('monthly')">Reporte Mensual</button>
    </div>
    
    <!-- Reporte Diario -->
    <div id="dailyReport" class="report-tab active">
        <h3>Reporte de Asistencia Diaria</h3>
        <div class="form-row">
            <div class="form-group">
                <label for="dailyDate">Fecha</label>
                <input type="date" id="dailyDate" value="{{ today }}">
            </div>
            <div class="form-group">
                <button class="btn btn-primary" onclick="generateDailyReport()">
                    <i class="fas fa-search"></i> Generar
                </button>
            </div>
        </div>
        
        <div id="dailyReportResult" class="report-result"></div>
        
        <div class="export-buttons" style="display:none;" id="dailyExportButtons">
            <button class="btn btn-success" onclick="exportReport('daily', 'excel')">
                <i class="fas fa-file-excel"></i> Exportar a Excel
            </button>
            <button class="btn btn-danger" onclick="exportReport('daily', 'pdf')">
                <i class="fas fa-file-pdf"></i> Exportar a PDF
            </button>
        </div>
    </div>
    
    <!-- Reporte por Empleado -->
    <div id="employeeReport" class="report-tab">
        <h3>Reporte de Asistencia por Empleado</h3>
        <div class="form-row">
            <div class="form-group">
                <label for="employeeSelect">Empleado</label>
                <select id="employeeSelect"></select>
            </div>
            <div class="form-group">
                <label for="empStartDate">Fecha Inicio</label>
                <input type="date" id="empStartDate">
            </div>
            <div class="form-group">
                <label for="empEndDate">Fecha Fin</label>
                <input type="date" id="empEndDate">
            </div>
            <div class="form-group">
                <button class="btn btn-primary" onclick="generateEmployeeReport()">
                    <i class="fas fa-search"></i> Generar
                </button>
            </div>
        </div>
        
        <div id="employeeReportResult" class="report-result"></div>
    </div>
    
    <!-- Reporte Mensual -->
    <div id="monthlyReport" class="report-tab">
        <h3>Reporte Mensual de Estadísticas</h3>
        <div class="form-row">
            <div class="form-group">
                <label for="monthlyYear">Año</label>
                <input type="number" id="monthlyYear" value="{{ current_year }}">
            </div>
            <div class="form-group">
                <label for="monthlyMonth">Mes</label>
                <select id="monthlyMonth">
                    <option value="1">Enero</option>
                    <option value="2">Febrero</option>
                    <option value="3">Marzo</option>
                    <option value="4">Abril</option>
                    <option value="5">Mayo</option>
                    <option value="6">Junio</option>
                    <option value="7">Julio</option>
                    <option value="8">Agosto</option>
                    <option value="9">Septiembre</option>
                    <option value="10">Octubre</option>
                    <option value="11">Noviembre</option>
                    <option value="12">Diciembre</option>
                </select>
            </div>
            <div class="form-group">
                <button class="btn btn-primary" onclick="generateMonthlyReport()">
                    <i class="fas fa-search"></i> Generar
                </button>
            </div>
        </div>
        
        <div id="monthlyReportResult" class="report-result"></div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
function showTab(tabName) {
    $('.report-tab').removeClass('active');
    $('.tab-btn').removeClass('active');
    
    $(`#${tabName}Report`).addClass('active');
    event.target.classList.add('active');
}

function generateDailyReport() {
    const date = $('#dailyDate').val();
    
    $.ajax({
        url: '/reports/api/daily',
        method: 'GET',
        data: { date: date },
        success: function(response) {
            if (response.success) {
                renderDailyReport(response);
                $('#dailyExportButtons').show();
            }
        },
        error: function() {
            showAlert('Error al generar reporte', 'error');
        }
    });
}

function renderDailyReport(data) {
    let html = `
        <div class="report-summary">
            <h4>Resumen del ${data.date}</h4>
            <div class="summary-stats">
                <div class="stat">Total: ${data.total_employees}</div>
                <div class="stat success">Presentes: ${data.present}</div>
                <div class="stat danger">Ausentes: ${data.absent}</div>
                <div class="stat warning">Tarde: ${data.late}</div>
            </div>
        </div>
        <table class="data-table">
            <thead>
                <tr>
                    <th>Código</th>
                    <th>Nombre</th>
                    <th>Entrada</th>
                    <th>Salida</th>
                    <th>Horas</th>
                    <th>Estado</th>
                </tr>
            </thead>
            <tbody>
    `;
    
    data.data.forEach(row => {
        const statusClass = row.status === 'absent' ? 'danger' : (row.is_late ? 'warning' : 'success');
        html += `
            <tr>
                <td>${row.employee_code}</td>
                <td>${row.employee_name}</td>
                <td>${row.check_in || '-'}</td>
                <td>${row.check_out || '-'}</td>
                <td>${row.work_hours ? row.work_hours.toFixed(2) : '-'}</td>
                <td><span class="badge badge-${statusClass}">${row.status}</span></td>
            </tr>
        `;
    });
    
    html += '</tbody></table>';
    
    $('#dailyReportResult').html(html);
}

function exportReport(type, format) {
    showAlert('Generando archivo...', 'info');
    // Implementar exportación
}

// Cargar empleados para selección
$(document).ready(function() {
    $.ajax({
        url: '/employees/api/employees',
        method: 'GET',
        success: function(response) {
            if (response.success) {
                const select = $('#employeeSelect');
                response.employees.forEach(emp => {
                    select.append(`<option value="${emp.id}">${emp.full_name} (${emp.employee_code})</option>`);
                });
            }
        }
    });
    
    // Establecer fechas por defecto
    const today = new Date().toISOString().split('T')[0];
    $('#dailyDate').val(today);
    $('#empEndDate').val(today);
    
    const thirtyDaysAgo = new Date();
    thirtyDaysAgo.setDate(thirtyDaysAgo.getDate() - 30);
    $('#empStartDate').val(thirtyDaysAgo.toISOString().split('T')[0]);
    
    // Mes actual
    $('#monthlyMonth').val(new Date().getMonth() + 1);
});
</script>
{% endblock %}