{% extends "base.html" %}

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

{% block content %}
<div class="attendance-page">
    <div class="page-header">
        <h1><i class="fas fa-camera"></i> Registro de Asistencia</h1>
        <p>Captura tu rostro para registrar entrada o salida</p>
    </div>
    
    <div class="attendance-container">
        <div class="camera-section">
            <div class="camera-container">
                <video id="video" autoplay></video>
                <canvas id="canvas" style="display:none;"></canvas>
            </div>
            
            <div class="camera-controls">
                <button id="startCameraBtn" class="btn btn-primary btn-lg">
                    <i class="fas fa-video"></i> Iniciar Cámara
                </button>
                <button id="captureCheckinBtn" class="btn btn-success btn-lg" style="display:none;">
                    <i class="fas fa-sign-in-alt"></i> Registrar Entrada
                </button>
                <button id="captureCheckoutBtn" class="btn btn-warning btn-lg" style="display:none;">
                    <i class="fas fa-sign-out-alt"></i> Registrar Salida
                </button>
            </div>
            
            <div id="resultMessage" class="result-message" style="display:none;"></div>
        </div>
        
        <div class="today-attendance">
            <h3><i class="fas fa-calendar-day"></i> Asistencia de Hoy</h3>
            <div id="todayAttendanceList">
                <p class="text-center">Cargando...</p>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
let stream = null;

$('#startCameraBtn').click(function() {
    startCamera();
});

$('#captureCheckinBtn').click(function() {
    captureAndRegister('checkin');
});

$('#captureCheckoutBtn').click(function() {
    captureAndRegister('checkout');
});

function startCamera() {
    navigator.mediaDevices.getUserMedia({ video: { width: 640, height: 480 } })
        .then(function(mediaStream) {
            stream = mediaStream;
            $('#video').get(0).srcObject = stream;
            $('#startCameraBtn').hide();
            $('#captureCheckinBtn').show();
            $('#captureCheckoutBtn').show();
        })
        .catch(function(err) {
            showAlert('Error al acceder a la cámara: ' + err.message, 'error');
        });
}

function captureAndRegister(type) {
    const video = $('#video').get(0);
    const canvas = $('#canvas').get(0);
    const context = canvas.getContext('2d');
    
    canvas.width = video.videoWidth;
    canvas.height = video.videoHeight;
    context.drawImage(video, 0, 0);
    
    const photoData = canvas.toDataURL('image/jpeg');
    
    // Mostrar mensaje de procesamiento
    showResult('Procesando... Por favor espera', 'info');
    
    const url = type === 'checkin' ? '/attendance/api/attendance/checkin' : '/attendance/api/attendance/checkout';
    
    $.ajax({
        url: url,
        method: 'POST',
        contentType: 'application/json',
        data: JSON.stringify({ photo: photoData }),
        success: function(response) {
            if (response.success) {
                const message = `
                    <div class="success-result">
                        <i class="fas fa-check-circle"></i>
                        <h3>${response.message}</h3>
                        <p><strong>${response.employee.full_name}</strong></p>
                        ${response.is_late ? '<p class="warning-text"><i class="fas fa-exclamation-triangle"></i> Llegada tarde</p>' : ''}
                    </div>
                `;
                showResult(message, 'success');
                loadTodayAttendance();
            } else {
                showResult(`<i class="fas fa-times-circle"></i> ${response.message}`, 'error');
            }
        },
        error: function(xhr) {
            const response = xhr.responseJSON;
            showResult(`<i class="fas fa-exclamation-circle"></i> ${response?.message || 'Error al procesar'}`, 'error');
        }
    });
}

function showResult(message, type) {
    const resultDiv = $('#resultMessage');
    resultDiv.removeClass('success error info warning').addClass(type);
    resultDiv.html(message).show();
    
    setTimeout(() => {
        resultDiv.fadeOut();
    }, 5000);
}

function loadTodayAttendance() {
    $.ajax({
        url: '/attendance/api/attendance/today',
        method: 'GET',
        success: function(response) {
            if (response.success) {
                renderTodayAttendance(response.attendances);
            }
        }
    });
}

function renderTodayAttendance(attendances) {
    const container = $('#todayAttendanceList');
    container.empty();
    
    if (attendances.length === 0) {
        container.append('<p class="text-center">No hay registros hoy</p>');
        return;
    }
    
    attendances.forEach(att => {
        const statusClass = att.is_late ? 'status-late' : 'status-present';
        const checkOut = att.check_out_time || 'Pendiente';
        
        const item = `
            <div class="attendance-item ${statusClass}">
                <div class="att-employee">${att.employee_name}</div>
                <div class="att-times">
                    <span><i class="fas fa-sign-in-alt"></i> ${att.check_in_time}</span>
                    <span><i class="fas fa-sign-out-alt"></i> ${checkOut}</span>
                </div>
                ${att.is_late ? '<span class="badge badge-warning">Tarde</span>' : ''}
            </div>
        `;
        container.append(item);
    });
}

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