{% extends "base.html" %}

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

{% block content %}
<div class="employee-form-page">
    <div class="page-header">
        <h1><i class="fas fa-user-plus"></i> Agregar 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="employeeForm" class="form-container">
        <div class="form-row">
            <div class="form-group">
                <label for="employee_code">Código de Empleado *</label>
                <input type="text" id="employee_code" name="employee_code" required>
            </div>
            
            <div class="form-group">
                <label for="full_name">Nombre Completo *</label>
                <input type="text" id="full_name" name="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">
            </div>
            
            <div class="form-group">
                <label for="phone">Teléfono</label>
                <input type="tel" id="phone" name="phone">
            </div>
        </div>
        
        <div class="form-row">
            <div class="form-group">
                <label for="department">Departamento</label>
                <input type="text" id="department" name="department">
            </div>
            
            <div class="form-group">
                <label for="position">Puesto</label>
                <input type="text" id="position" name="position">
            </div>
        </div>
        
        <div class="photo-capture-section">
            <h3><i class="fas fa-camera"></i> Captura de Foto Facial</h3>
            <p>Por favor captura una foto frontal del empleado para el reconocimiento facial.</p>
            
            <div class="camera-container">
                <video id="video" autoplay></video>
                <canvas id="canvas" style="display:none;"></canvas>
                <img id="capturedPhoto" style="display:none;">
            </div>
            
            <div class="camera-controls">
                <button type="button" id="startCameraBtn" class="btn btn-primary">
                    <i class="fas fa-video"></i> Iniciar Cámara
                </button>
                <button type="button" id="captureBtn" class="btn btn-success" style="display:none;">
                    <i class="fas fa-camera"></i> Capturar Foto
                </button>
                <button type="button" id="retakeBtn" class="btn btn-warning" style="display:none;">
                    <i class="fas fa-redo"></i> Tomar Otra Foto
                </button>
            </div>
            
            <input type="hidden" id="photo" name="photo">
        </div>
        
        <div class="form-actions">
            <button type="submit" class="btn btn-primary btn-lg">
                <i class="fas fa-save"></i> Guardar Empleado
            </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 src="{{ url_for('static', filename='js/camera.js') }}"></script>
<script>
let stream = null;
let photoData = null;

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

$('#captureBtn').click(function() {
    capturePhoto();
});

$('#retakeBtn').click(function() {
    retakePhoto();
});

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

function capturePhoto() {
    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);
    
    photoData = canvas.toDataURL('image/jpeg');
    $('#photo').val(photoData);
    
    $('#capturedPhoto').attr('src', photoData).show();
    $('#video').hide();
    $('#captureBtn').hide();
    $('#retakeBtn').show();
    
    // Detener cámara
    if (stream) {
        stream.getTracks().forEach(track => track.stop());
    }
}

function retakePhoto() {
    $('#capturedPhoto').hide();
    $('#video').show();
    $('#retakeBtn').hide();
    photoData = null;
    $('#photo').val('');
    startCamera();
}

$('#employeeForm').submit(function(e) {
    e.preventDefault();
    
    if (!photoData) {
        showAlert('Por favor captura una foto del empleado', 'warning');
        return;
    }
    
    const formData = new FormData();
    formData.append('employee_code', $('#employee_code').val());
    formData.append('full_name', $('#full_name').val());
    formData.append('email', $('#email').val());
    formData.append('phone', $('#phone').val());
    formData.append('department', $('#department').val());
    formData.append('position', $('#position').val());
    formData.append('photo', photoData);
    
    $.ajax({
        url: '/employees/api/employees',
        method: 'POST',
        data: formData,
        processData: false,
        contentType: false,
        success: function(response) {
            if (response.success) {
                showAlert('Empleado agregado exitosamente', 'success');
                setTimeout(() => {
                    window.location.href = '/employees/';
                }, 1500);
            } else {
                showAlert(response.message, 'error');
            }
        },
        error: function(xhr) {
            const response = xhr.responseJSON;
            showAlert(response?.message || 'Error al agregar empleado', 'error');
        }
    });
});
</script>
{% endblock %}