<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Registro de Asistencia - CEI El Angel</title>
    <link rel="icon" type="image/png" href="logoguarde.png">
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            min-height: 100vh;
            color: #333;
        }

        .container {
            max-width: 400px;
            margin: 0 auto;
            padding: 20px;
            min-height: 100vh;
            display: flex;
            flex-direction: column;
        }

        .header {
            background: white;
            border-radius: 15px;
            padding: 20px;
            text-align: center;
            box-shadow: 0 5px 15px rgba(0,0,0,0.1);
            margin-bottom: 20px;
        }

        .logo {
            width: 60px;
            height: 60px;
            background: #4CAF50;
            border-radius: 50%;
            margin: 0 auto 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 24px;
            color: white;
            font-weight: bold;
        }

        .company-name {
            font-size: 18px;
            font-weight: bold;
            color: #2c3e50;
            margin-bottom: 5px;
        }

        .app-title {
            font-size: 16px;
            color: #666;
        }

        .clock {
            background: white;
            border-radius: 15px;
            padding: 15px;
            text-align: center;
            box-shadow: 0 5px 15px rgba(0,0,0,0.1);
            margin-bottom: 20px;
        }

        .time {
            font-size: 24px;
            font-weight: bold;
            color: #2c3e50;
        }

        .date {
            font-size: 14px;
            color: #666;
            margin-top: 5px;
        }

        .form-card {
            background: white;
            border-radius: 15px;
            padding: 25px;
            box-shadow: 0 5px 15px rgba(0,0,0,0.1);
            margin-bottom: 20px;
        }

        .form-group {
            margin-bottom: 20px;
        }

        label {
            display: block;
            margin-bottom: 8px;
            font-weight: 600;
            color: #2c3e50;
        }

        select, input {
            width: 100%;
            padding: 12px;
            border: 2px solid #e1e8ed;
            border-radius: 8px;
            font-size: 16px;
            transition: border-color 0.3s;
        }

        select:focus, input:focus {
            outline: none;
            border-color: #667eea;
        }

        .pin-input {
            text-align: center;
            font-size: 18px;
            letter-spacing: 8px;
        }

        .action-buttons {
            display: flex;
            gap: 10px;
            margin-top: 20px;
        }

        .btn {
            flex: 1;
            padding: 15px;
            border: none;
            border-radius: 8px;
            font-size: 16px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s;
            text-transform: uppercase;
        }

        .btn-entrada {
            background: #4CAF50;
            color: white;
        }

        .btn-entrada:hover:not(:disabled) {
            background: #45a049;
        }

        .btn-salida {
            background: #f44336;
            color: white;
        }

        .btn-salida:hover:not(:disabled) {
            background: #da190b;
        }

        .btn:disabled {
            background: #ccc;
            cursor: not-allowed;
            opacity: 0.6;
        }

        .location-info {
            background: #f8f9fa;
            border-radius: 8px;
            padding: 12px;
            margin: 15px 0;
            border-left: 4px solid #667eea;
        }

        .location-text {
            font-size: 14px;
            color: #666;
            margin: 0;
        }

        .status-panel {
            background: white;
            border-radius: 15px;
            padding: 20px;
            box-shadow: 0 5px 15px rgba(0,0,0,0.1);
            margin-bottom: 20px;
        }

        .status-title {
            font-size: 18px;
            font-weight: bold;
            color: #2c3e50;
            margin-bottom: 15px;
            text-align: center;
        }

        .status-section {
            margin-bottom: 15px;
        }

        .status-section h4 {
            font-size: 14px;
            margin-bottom: 8px;
            color: #666;
        }

        .employee-status {
            background: #f8f9fa;
            border-radius: 8px;
            padding: 10px;
            margin-bottom: 5px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .employee-status.working {
            border-left: 4px solid #4CAF50;
        }

        .employee-status.outside {
            border-left: 4px solid #f44336;
        }

        .employee-name {
            font-weight: 600;
            color: #2c3e50;
        }

        .employee-time {
            font-size: 12px;
            color: #666;
        }

        .message {
            background: #e8f5e8;
            border: 1px solid #4CAF50;
            border-radius: 8px;
            padding: 12px;
            margin: 15px 0;
            text-align: center;
            color: #2d5016;
        }

        .message.error {
            background: #ffeaa7;
            border-color: #fdcb6e;
            color: #8b4513;
        }

        .update-btn {
            background: #667eea;
            color: white;
            width: 100%;
            padding: 12px;
            border: none;
            border-radius: 8px;
            font-size: 14px;
            font-weight: 600;
            cursor: pointer;
            margin-top: 10px;
        }

        .update-btn:hover {
            background: #5a6fd8;
        }

        .reports-section {
            background: white;
            border-radius: 15px;
            padding: 20px;
            box-shadow: 0 5px 15px rgba(0,0,0,0.1);
            margin-bottom: 20px;
            display: none;
        }

        .reports-section.visible {
            display: block;
        }

        .report-controls {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 10px;
            margin-bottom: 15px;
        }

        .report-controls select {
            padding: 10px;
            font-size: 14px;
        }

        .generate-btn {
            background: #28a745;
            color: white;
            width: 100%;
            padding: 12px;
            border: none;
            border-radius: 8px;
            font-size: 14px;
            font-weight: 600;
            cursor: pointer;
            margin-top: 10px;
        }

        .generate-btn:hover {
            background: #218838;
        }

        .gdpr-notice {
            background: #fff3cd;
            border: 1px solid #ffeaa7;
            border-radius: 8px;
            padding: 15px;
            margin-bottom: 20px;
            font-size: 12px;
            color: #856404;
        }

        .hidden {
            display: none;
        }

        @media (max-width: 480px) {
            .container {
                padding: 10px;
            }
            
            .form-card {
                padding: 20px;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <!-- Header -->
        <div class="header">
            <div class="logo">
            <img src="logoguarde.png" alt="Logo" style="width: 100%; height: 100%; object-fit: contain;">
        </div>
            <div class="company-name">CEI El Angel</div>
            <div class="app-title">Registro de Asistencia</div>
        </div>

        <!-- Reloj -->
        <div class="clock">
            <div class="time" id="currentTime">00:00:00</div>
            <div class="date" id="currentDate">Lunes, 1 de Enero de 2024</div>
        </div>

        <!-- Aviso RGPD -->
        <div class="gdpr-notice">
            <strong>📋 Aviso Legal:</strong> Esta aplicación cumple con el RGPD y la normativa española de registro horario. El uso de geolocalización es meramente indicativo. Sus datos se almacenan localmente y de forma segura.
        </div>

        <!-- Formulario Principal -->
        <div class="form-card">
            <div class="form-group">
                <label for="employeeSelect">👤 Seleccionar Empleado</label>
                <select id="employeeSelect">
                    <option value="">Seleccionar...</option>
                    <option value="reme">Reme Garcia Lanzas</option>
                    <option value="carmen">Carmen Nuñez Torres</option>
                    <option value="sandra">Sandra Aragon Muñoz</option>
                    <option value="aida">Aida Garcia Diaz</option>
                    <option value="mariajose">Maria Jose Moreno Becerra</option>
                    <option value="isabel">Isabel Maria Fernandez Medina</option>
                    <option value="inmaculada">Inmaculada Macias Ortega</option>
                    <option value="direccion">Dirección</option>
                </select>
            </div>

            <div class="form-group">
                <label for="pinInput">🔐 PIN de Seguridad (4 dígitos)</label>
                <input type="password" id="pinInput" class="pin-input" maxlength="4" placeholder="">
            </div>

            <div class="location-info" style="display: none;">
                <p class="location-text">📍 <strong>Ubicación:</strong> C/Conde Villamediana, 14 Marbella</p>
            </div>

            <div class="action-buttons">
                <button class="btn btn-entrada" id="entradaBtn" disabled>
                    🟢 Entrada
                </button>
                <button class="btn btn-salida" id="salidaBtn" disabled>
                    🔴 Salida
                </button>
            </div>

            <div id="messageArea"></div>
        </div>

        <!-- Panel de Estado -->
        <div class="status-panel">
            <div class="status-title">📊 Estado Actual de Empleados</div>
            
            <div class="status-section">
                <h4>🟢 Empleados en el Trabajo:</h4>
                <div id="workingEmployees"></div>
            </div>
            
            <div class="status-section">
                <h4>🔴 Empleados Fuera:</h4>
                <div id="outsideEmployees"></div>
            </div>
        </div>

        <!-- Sección de Reportes (Solo Dirección) -->
        <div class="reports-section" id="reportsSection">
            <div class="status-title">📈 Generar Reportes Excel</div>
            
            <div class="report-controls">
                <select id="reportEmployee">
                    <option value="todos">Todos los Empleados</option>
                    <option value="reme">Reme Garcia Lanzas</option>
                    <option value="carmen">Carmen Nuñez Torres</option>
                    <option value="sandra">Sandra Aragon Muñoz</option>
                    <option value="aida">Aida Garcia Diaz</option>
                    <option value="mariajose">Maria Jose Moreno Becerra</option>
                    <option value="isabel">Isabel Maria Fernandez Medina</option>
                    <option value="inmaculada">Inmaculada Macias Ortega</option>
                </select>
                
                <select id="reportMonth">
                    <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>
                
                <select id="reportYear">
                    <option value="2025">2025</option>
                    <option value="2024">2024</option>
                    <option value="2023">2023</option>
                    <option value="2022">2022</option>
                    <option value="2021">2021</option>
                </select>
            </div>
            
            <button class="generate-btn" onclick="generateExcelReport()">
                📄 Generar Reporte Excel
            </button>
        </div>
    </div>

    <!-- Scripts necesarios -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.18.5/xlsx.full.min.js"></script>
    
    <script>
        // Configuración de empleados y PINs
        const employees = {
            'reme': { name: 'Reme Garcia Lanzas', pin: '1234', isWorking: false, lastAction: null, actionTime: null },
            'carmen': { name: 'Carmen Nuñez Torres', pin: '2345', isWorking: false, lastAction: null, actionTime: null },
            'sandra': { name: 'Sandra Aragon Muñoz', pin: '3456', isWorking: false, lastAction: null, actionTime: null },
            'aida': { name: 'Aida Garcia Diaz', pin: '4567', isWorking: false, lastAction: null, actionTime: null },
            'mariajose': { name: 'Maria Jose Moreno Becerra', pin: '5678', isWorking: false, lastAction: null, actionTime: null },
            'isabel': { name: 'Isabel Maria Fernandez Medina', pin: '6789', isWorking: false, lastAction: null, actionTime: null },
            'inmaculada': { name: 'Inmaculada Macias Ortega', pin: '7890', isWorking: false, lastAction: null, actionTime: null },
            'direccion': { name: 'Dirección', pin: '0000', isWorking: false, lastAction: null, actionTime: null }
        };

        let currentEmployee = null;
        let isValidated = false;

        // Inicialización
        document.addEventListener('DOMContentLoaded', function() {
            initializeClock();
            setupEventListeners();
            loadEmployeeStates();
            setCurrentMonth();
            updateStatusPanel();
            scheduleMiddnightReset();
        });

        function initializeClock() {
            function updateClock() {
                const now = new Date();
                const timeString = now.toLocaleTimeString('es-ES');
                const dateString = now.toLocaleDateString('es-ES', {
                    weekday: 'long',
                    year: 'numeric',
                    month: 'long',
                    day: 'numeric'
                });
                
                document.getElementById('currentTime').textContent = timeString;
                document.getElementById('currentDate').textContent = dateString;
            }
            
            updateClock();
            setInterval(updateClock, 1000);
        }

        function setCurrentMonth() {
            const currentMonth = new Date().getMonth() + 1;
            document.getElementById('reportMonth').value = currentMonth;
        }

        function setupEventListeners() {
            const employeeSelect = document.getElementById('employeeSelect');
            const pinInput = document.getElementById('pinInput');
            const entradaBtn = document.getElementById('entradaBtn');
            const salidaBtn = document.getElementById('salidaBtn');

            employeeSelect.addEventListener('change', handleEmployeeSelection);
            pinInput.addEventListener('input', handlePinInput);
            entradaBtn.addEventListener('click', () => handleTimeRecord('entrada'));
            salidaBtn.addEventListener('click', () => handleTimeRecord('salida'));
        }

        function handleEmployeeSelection() {
            const selectedEmployee = document.getElementById('employeeSelect').value;
            const pinInput = document.getElementById('pinInput');
            
            if (selectedEmployee) {
                pinInput.disabled = false;
                pinInput.focus();
            } else {
                pinInput.disabled = true;
                pinInput.value = '';
                resetButtons();
            }
            
            isValidated = false;
            currentEmployee = null;
        }

        function handlePinInput() {
            const selectedEmployee = document.getElementById('employeeSelect').value;
            const pinValue = document.getElementById('pinInput').value;
            
            if (selectedEmployee && pinValue.length === 4) {
                validateEmployee(selectedEmployee, pinValue);
            }
        }

        function validateEmployee(employeeId, pin) {
            if (employees[employeeId] && employees[employeeId].pin === pin) {
                currentEmployee = employeeId;
                isValidated = true;
                updateButtonStates();
                
                // Mostrar sección de reportes solo para dirección
                if (employeeId === 'direccion') {
                    document.getElementById('reportsSection').classList.add('visible');
                } else {
                    document.getElementById('reportsSection').classList.remove('visible');
                }
                
                showMessage(`✅ Validación exitosa. Bienvenido/a ${employees[employeeId].name}`, 'success');
            } else {
                showMessage('❌ PIN incorrecto. Inténtalo de nuevo.', 'error');
                resetButtons();
            }
        }

        function updateButtonStates() {
            const entradaBtn = document.getElementById('entradaBtn');
            const salidaBtn = document.getElementById('salidaBtn');
            
            if (!isValidated || !currentEmployee) {
                entradaBtn.disabled = true;
                salidaBtn.disabled = true;
                return;
            }
            
            const employee = employees[currentEmployee];
            
            if (employee.isWorking) {
                entradaBtn.disabled = true;
                salidaBtn.disabled = false;
            } else {
                entradaBtn.disabled = false;
                salidaBtn.disabled = true;
            }
        }

        function resetButtons() {
            document.getElementById('entradaBtn').disabled = true;
            document.getElementById('salidaBtn').disabled = true;
        }

        function handleTimeRecord(action) {
            if (!isValidated || !currentEmployee) {
                showMessage('❌ Error de validación. Inténtalo de nuevo.', 'error');
                return;
            }

            const now = new Date();
            const timeString = now.toLocaleTimeString('es-ES');
            const employee = employees[currentEmployee];
            
            if (action === 'entrada') {
                employee.isWorking = true;
                employee.lastAction = 'entrada';
                employee.actionTime = timeString;
                showMessage(getGreeting() + ` ${employee.name}. Entrada registrada a las ${timeString}`, 'success');
            } else {
                employee.isWorking = false;
                employee.lastAction = 'salida';
                employee.actionTime = timeString;
                showMessage(getFarewell() + ` ${employee.name}. Salida registrada a las ${timeString}`, 'success');
            }
            
            saveEmployeeStates();
            resetForm();
            updateStatusPanel();
        }

        function getGreeting() {
            const hour = new Date().getHours();
            if (hour < 12) return '🌅 Buenos días';
            if (hour < 20) return '☀️ Buenas tardes';
            return '🌙 Buenas noches';
        }

        function getFarewell() {
            const hour = new Date().getHours();
            if (hour < 20) return '👋 Que tenga buen día';
            return '🌙 Que tenga buena noche';
        }

        function resetForm() {
            document.getElementById('employeeSelect').value = '';
            document.getElementById('pinInput').value = '';
            document.getElementById('reportsSection').classList.remove('visible');
            resetButtons();
            isValidated = false;
            currentEmployee = null;
        }

        function updateStatusPanel() {
            const workingDiv = document.getElementById('workingEmployees');
            const outsideDiv = document.getElementById('outsideEmployees');
            
            workingDiv.innerHTML = '';
            outsideDiv.innerHTML = '';
            
            for (const [id, employee] of Object.entries(employees)) {
                if (id === 'direccion') continue; // No mostrar dirección en el panel
                
                const statusDiv = document.createElement('div');
                statusDiv.className = `employee-status ${employee.isWorking ? 'working' : 'outside'}`;
                
                const actionText = employee.lastAction === 'entrada' ? 'Entrada' : 'Salida';
                const timeText = employee.actionTime ? `${actionText}: ${employee.actionTime}` : 'Sin registros';
                
                statusDiv.innerHTML = `
                    <div class="employee-name">${employee.name}</div>
                    <div class="employee-time">${timeText}<br>📍 C/Conde Villamediana, 14</div>
                `;
                
                if (employee.isWorking) {
                    workingDiv.appendChild(statusDiv);
                } else {
                    outsideDiv.appendChild(statusDiv);
                }
            }
            
            if (workingDiv.children.length === 0) {
                workingDiv.innerHTML = '<div class="employee-status">No hay empleados trabajando</div>';
            }
            
            if (outsideDiv.children.length === 0) {
                outsideDiv.innerHTML = '<div class="employee-status">Todos los empleados están trabajando</div>';
            }
        }

        function showMessage(message, type = 'success') {
            const messageArea = document.getElementById('messageArea');
            messageArea.innerHTML = `<div class="message ${type === 'error' ? 'error' : ''}">${message}</div>`;
            
            setTimeout(() => {
                messageArea.innerHTML = '';
            }, 4000);
        }

        // Gestión de persistencia de datos
        function saveEmployeeStates() {
            const states = {};
            for (const [id, employee] of Object.entries(employees)) {
                states[id] = {
                    isWorking: employee.isWorking,
                    lastAction: employee.lastAction,
                    actionTime: employee.actionTime
                };
            }
            localStorage.setItem('employeeStates', JSON.stringify(states));
        }

        function loadEmployeeStates() {
            const saved = localStorage.getItem('employeeStates');
            if (saved) {
                const states = JSON.parse(saved);
                for (const [id, state] of Object.entries(states)) {
                    if (employees[id]) {
                        employees[id].isWorking = state.isWorking || false;
                        employees[id].lastAction = state.lastAction;
                        employees[id].actionTime = state.actionTime;
                    }
                }
            }
        }

        function scheduleMiddnightReset() {
            const now = new Date();
            const midnight = new Date();
            midnight.setHours(24, 0, 0, 0);
            
            const timeToMidnight = midnight.getTime() - now.getTime();
            
            setTimeout(() => {
                resetDailyData();
                scheduleMiddnightReset(); // Reprogramar para el siguiente día
            }, timeToMidnight);
        }

        function resetDailyData() {
            for (const employee of Object.values(employees)) {
                employee.isWorking = false;
                employee.lastAction = null;
                employee.actionTime = null;
            }
            saveEmployeeStates();
            updateStatusPanel();
            showMessage('🔄 Nuevo día iniciado. Datos reiniciados.', 'success');
        }

        // Generación de reportes Excel
        function generateExcelReport() {
            const selectedEmployee = document.getElementById('reportEmployee').value;
            const selectedMonth = parseInt(document.getElementById('reportMonth').value);
            const selectedYear = parseInt(document.getElementById('reportYear').value);
            
            const workbook = XLSX.utils.book_new();
            const worksheetData = generateReportData(selectedEmployee, selectedMonth, selectedYear);
            const worksheet = XLSX.utils.aoa_to_sheet(worksheetData);
            
            // Aplicar estilos básicos
            const range = XLSX.utils.decode_range(worksheet['!ref']);
            for (let R = range.s.r; R <= range.e.r; ++R) {
                for (let C = range.s.c; C <= range.e.c; ++C) {
                    const cell_address = {c: C, r: R};
                    const cell_ref = XLSX.utils.encode_cell(cell_address);
                    if (!worksheet[cell_ref]) continue;
                    
                    // Aplicar formato a celdas con "FESTIVO"
                    if (worksheet[cell_ref].v === 'FESTIVO') {
                        worksheet[cell_ref].s = {
                            font: { color: { rgb: "FF0000" }, bold: true }
                        };
                    }
                }
            }
            
            XLSX.utils.book_append_sheet(workbook, worksheet, "Registro Jornada");
            
            const fileName = `Registro_Jornada_Laboral_CEI_El_Angel_${selectedMonth}_${selectedYear}.xlsx`;
            XLSX.writeFile(workbook, fileName);
            
            showMessage('📄 Reporte Excel generado exitosamente', 'success');
        }

        function generateReportData(employeeFilter, month, year) {
            const daysInMonth = new Date(year, month, 0).getDate();
            const monthNames = ['', 'Enero', 'Febrero', 'Marzo', 'Abril', 'Mayo', 'Junio', 
                              'Julio', 'Agosto', 'Septiembre', 'Octubre', 'Noviembre', 'Diciembre'];
            
            // Crear encabezado
            const header = ['Registro de Jornada Laboral CEI El Angel', '', '', '', '', '', ''];
            const subHeader = [`${monthNames[month]} ${year}`, '', '', '', '', '', ''];
            const columnHeaders = ['Trabajador'];
            
            // Agregar días del mes como columnas
            for (let day = 1; day <= daysInMonth; day++) {
                columnHeaders.push(day.toString());
            }
            
            const data = [header, subHeader, [], columnHeaders];
            
            // Obtener lista de empleados
            const employeeList = employeeFilter === 'todos' 
                ? Object.entries(employees).filter(([id]) => id !== 'direccion')
                : [[employeeFilter, employees[employeeFilter]]];
            
            // Generar datos para cada empleado
            employeeList.forEach(([id, employee]) => {
                const row = [employee.name];
                let weeklyHours = 0; // Para acumular horas semanales
                
                for (let day = 1; day <= daysInMonth; day++) {
                    const date = new Date(year, month - 1, day);
                    const dayOfWeek = date.getDay(); // 0=Domingo, 1=Lunes, ..., 6=Sábado
                    
                    if (isHoliday(date) || isLocalHoliday(date)) {
                        row.push('FESTIVO');
                    } else if (dayOfWeek === 0) { // Domingo
                        row.push('');
                    } else if (dayOfWeek === 6) { // Sábado - mostrar horas semanales
                        if (weeklyHours > 0) {
                            row.push(`Horas semanales: ${weeklyHours}`);
                        } else {
                            row.push('');
                        }
                        weeklyHours = 0; // Reset para la siguiente semana
                    } else {
                        // Días laborables (Lunes a Viernes)
                        let workData = '';
                        let dailyHours = 0;
                        
                        // Verificar si algún empleado registró entrada a las 7:00 en este día
                        const hasEarlyEntry = checkEarlyEntry(date);
                        
                        // Condiciones especiales basadas en día de la semana y registro temprano
                        if (hasEarlyEntry && (
                            (dayOfWeek === 1 && id === 'aida') ||     // Lunes - Aida
                            (dayOfWeek === 2 && id === 'mariajose') || // Martes - Maria Jose
                            (dayOfWeek === 3 && id === 'reme') ||     // Miércoles - Reme
                            (dayOfWeek === 4 && id === 'sandra') ||   // Jueves - Sandra
                            (dayOfWeek === 5 && id === 'carmen')      // Viernes - Carmen
                        )) {
                            workData = `Ubicacion: C/Conde Villamediana, 14 Marbella
Entrada: 7:30
Descanso: 14:30
Entrada: 15:00
Salida: 16:00
Numero de horas: 7.5`;
                            dailyHours = 7.5;
                        } else if (id === 'inmaculada') {
                            // Horario especial para Inmaculada
                            workData = `Ubicacion: C/Conde Villamediana, 14 Marbella
Entrada: 9:00
Salida: 15:30
Numero de horas: 6.5`;
                            dailyHours = 6.5;
                        } else {
                            // Horario normal para otros empleados
                            workData = `Ubicacion: C/Conde Villamediana, 14 Marbella
Entrada: 9:00
Descanso: 14:30
Entrada: 15:00
Salida: 17:00
Numero de horas: 7.5`;
                            dailyHours = 7.5;
                        }
                        
                        row.push(workData);
                        weeklyHours += dailyHours;
                    }
                }
                
                data.push(row);
            });
            
            return data;
        }

        // Función para simular verificación de entrada temprana
        function checkEarlyEntry(date) {
            // En un sistema real, esto verificaría los registros reales
            // Para el reporte ficticio, asumimos que hay entrada temprana en días laborables
            const dayOfWeek = date.getDay();
            return dayOfWeek >= 1 && dayOfWeek <= 5; // Lunes a Viernes
        }

        function isHoliday(date) {
            const year = date.getFullYear();
            const month = date.getMonth() + 1;
            const day = date.getDate();
            
            // Festivos nacionales españoles (lista simplificada)
            const nationalHolidays = [
                `${year}-01-01`, // Año Nuevo
                `${year}-01-06`, // Reyes Magos
                `${year}-05-01`, // Día del Trabajo
                `${year}-08-15`, // Asunción de la Virgen
                `${year}-10-12`, // Día de la Hispanidad
                `${year}-11-01`, // Todos los Santos
                `${year}-12-06`, // Día de la Constitución
                `${year}-12-08`, // Inmaculada Concepción
                `${year}-12-25`  // Navidad
            ];
            
            const dateString = `${year}-${month.toString().padStart(2, '0')}-${day.toString().padStart(2, '0')}`;
            
            return nationalHolidays.includes(dateString);
        }

        function isLocalHoliday(date) {
            const year = date.getFullYear();
            const month = date.getMonth() + 1;
            const day = date.getDate();
            
            // Festivos locales de Marbella
            const localHolidays = [
                `${year}-06-11`, // 11 de junio
                `${year}-10-29`  // 29 de octubre
            ];
            
            const dateString = `${year}-${month.toString().padStart(2, '0')}-${day.toString().padStart(2, '0')}`;
            
            return localHolidays.includes(dateString);
        }

        // Función para calcular Semana Santa (aproximada)
        function getEasterDate(year) {
            const a = year % 19;
            const b = Math.floor(year / 100);
            const c = year % 100;
            const d = Math.floor(b / 4);
            const e = b % 4;
            const f = Math.floor((b + 8) / 25);
            const g = Math.floor((b - f + 1) / 3);
            const h = (19 * a + b - d - g + 15) % 30;
            const i = Math.floor(c / 4);
            const k = c % 4;
            const l = (32 + 2 * e + 2 * i - h - k) % 7;
            const m = Math.floor((a + 11 * h + 22 * l) / 451);
            const month = Math.floor((h + l - 7 * m + 114) / 31);
            const day = ((h + l - 7 * m + 114) % 31) + 1;
            
            return new Date(year, month - 1, day);
        }

        // Función de utilidad para debugging
        function debugEmployeeStates() {
            console.log('Estados actuales de empleados:', employees);
        }

        // Función para exportar datos de prueba
        function exportTestData() {
            const testData = {
                employees: employees,
                timestamp: new Date().toISOString(),
                location: 'C/Conde Villamediana, 14 Marbella'
            };
            
            const blob = new Blob([JSON.stringify(testData, null, 2)], {type: 'application/json'});
            const url = URL.createObjectURL(blob);
            const a = document.createElement('a');
            a.href = url;
            a.download = 'registro_asistencia_backup.json';
            a.click();
            URL.revokeObjectURL(url);
        }

        // Función para importar datos de prueba
        function importTestData(event) {
            const file = event.target.files[0];
            if (!file) return;
            
            const reader = new FileReader();
            reader.onload = function(e) {
                try {
                    const data = JSON.parse(e.target.result);
                    if (data.employees) {
                        Object.assign(employees, data.employees);
                        saveEmployeeStates();
                        updateStatusPanel();
                        showMessage('📥 Datos importados correctamente', 'success');
                    }
                } catch (error) {
                    showMessage('❌ Error al importar datos', 'error');
                }
            };
            reader.readAsText(file);
        }

        // Función para validar integridad de datos
        function validateDataIntegrity() {
            let isValid = true;
            const issues = [];
            
            for (const [id, employee] of Object.entries(employees)) {
                if (!employee.name || !employee.pin) {
                    issues.push(`Empleado ${id}: datos incompletos`);
                    isValid = false;
                }
                
                if (employee.pin.length !== 4) {
                    issues.push(`Empleado ${id}: PIN debe tener 4 dígitos`);
                    isValid = false;
                }
            }
            
            if (!isValid) {
                console.warn('Problemas de integridad detectados:', issues);
            }
            
            return isValid;
        }

        // Función para limpiar datos antiguos
        function cleanOldData() {
            const confirmClean = confirm('¿Está seguro de que desea limpiar todos los registros? Esta acción no se puede deshacer.');
            
            if (confirmClean) {
                localStorage.removeItem('employeeStates');
                for (const employee of Object.values(employees)) {
                    employee.isWorking = false;
                    employee.lastAction = null;
                    employee.actionTime = null;
                }
                updateStatusPanel();
                showMessage('🧹 Datos limpiados correctamente', 'success');
            }
        }

        // Función para mostrar estadísticas
        function showStatistics() {
            const working = Object.values(employees).filter(emp => emp.isWorking && emp.name !== 'Dirección').length;
            const total = Object.values(employees).filter(emp => emp.name !== 'Dirección').length;
            const outside = total - working;
            
            const stats = {
                totalEmployees: total,
                working: working,
                outside: outside,
                workingPercentage: total > 0 ? Math.round((working / total) * 100) : 0
            };
            
            console.log('Estadísticas actuales:', stats);
            return stats;
        }

        // Función para generar reporte de asistencia diaria
        function generateDailyReport() {
            const today = new Date();
            const dateString = today.toLocaleDateString('es-ES');
            
            let report = `REPORTE DIARIO DE ASISTENCIA - ${dateString}\n`;
            report += `CEI El Angel - C/Conde Villamediana, 14 Marbella\n`;
            report += `${'='.repeat(50)}\n\n`;
            
            for (const [id, employee] of Object.entries(employees)) {
                if (id === 'direccion') continue;
                
                report += `${employee.name}:\n`;
                if (employee.lastAction && employee.actionTime) {
                    report += `  Última acción: ${employee.lastAction} a las ${employee.actionTime}\n`;
                    report += `  Estado actual: ${employee.isWorking ? 'Trabajando' : 'Fuera'}\n`;
                } else {
                    report += `  Sin registros para hoy\n`;
                }
                report += `\n`;
            }
            
            const stats = showStatistics();
            report += `RESUMEN:\n`;
            report += `Total empleados: ${stats.totalEmployees}\n`;
            report += `Trabajando: ${stats.working}\n`;
            report += `Fuera: ${stats.outside}\n`;
            report += `Porcentaje trabajando: ${stats.workingPercentage}%\n`;
            
            return report;
        }

        // Función para descargar reporte diario
        function downloadDailyReport() {
            const report = generateDailyReport();
            const blob = new Blob([report], {type: 'text/plain;charset=utf-8'});
            const url = URL.createObjectURL(blob);
            const a = document.createElement('a');
            a.href = url;
            a.download = `reporte_diario_${new Date().toISOString().split('T')[0]}.txt`;
            a.click();
            URL.revokeObjectURL(url);
        }

        // Función para verificar conexión HTTPS
        function checkHTTPS() {
            if (location.protocol !== 'https:' && location.hostname !== 'localhost') {
                showMessage('⚠️ Para mayor seguridad, use HTTPS en producción', 'error');
            }
        }

        // Función para detectar dispositivo móvil
        function isMobileDevice() {
            return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
        }

        // Función para optimizar para móvil
        function optimizeMobile() {
            if (isMobileDevice()) {
                document.body.classList.add('mobile-optimized');
                // Evitar zoom en inputs en iOS
                const inputs = document.querySelectorAll('input, select');
                inputs.forEach(input => {
                    input.addEventListener('focus', () => {
                        input.style.fontSize = '16px';
                    });
                });
            }
        }

        // Inicialización adicional
        document.addEventListener('DOMContentLoaded', function() {
            validateDataIntegrity();
            checkHTTPS();
            optimizeMobile();
            
            // Mostrar mensaje inicial
            setTimeout(() => {
                showMessage('✅ Sistema de registro de asistencia iniciado correctamente', 'success');
            }, 1000);
        });

        // Event listeners adicionales para funcionalidades extra
        document.addEventListener('keydown', function(e) {
            // Atajo de teclado para actualizar panel (Ctrl+R)
            if (e.ctrlKey && e.key === 'r') {
                e.preventDefault();
                updateStatusPanel();
                showMessage('🔄 Panel actualizado manualmente', 'success');
            }
            
            // Atajo para limpiar datos (Ctrl+Shift+C)
            if (e.ctrlKey && e.shiftKey && e.key === 'C') {
                e.preventDefault();
                cleanOldData();
            }
        });

        // Función para manejar errores globales
        window.addEventListener('error', function(e) {
            console.error('Error en la aplicación:', e.error);
            showMessage('❌ Se produjo un error inesperado. Recargue la página si persiste.', 'error');
        });

        // Función para manejar pérdida de conexión
        window.addEventListener('offline', function() {
            showMessage('📶 Sin conexión a internet. Los datos se guardan localmente.', 'error');
        });

        window.addEventListener('online', function() {
            showMessage('📶 Conexión restaurada.', 'success');
        });

        // Función para mostrar información del sistema
        function showSystemInfo() {
            const info = {
                userAgent: navigator.userAgent,
                platform: navigator.platform,
                language: navigator.language,
                localStorage: typeof(Storage) !== "undefined",
                timestamp: new Date().toISOString()
            };
            
            console.log('Información del sistema:', info);
            return info;
        }

        // Función para test de funcionalidad
        function runSystemTest() {
            console.log('Ejecutando pruebas del sistema...');
            
            const tests = [
                { name: 'Validación de datos', test: validateDataIntegrity },
                { name: 'Carga de estados', test: () => { loadEmployeeStates(); return true; } },
                { name: 'Actualización de panel', test: () => { updateStatusPanel(); return true; } },
                { name: 'Información del sistema', test: () => { showSystemInfo(); return true; } }
            ];
            
            const results = tests.map(({name, test}) => {
                try {
                    const result = test();
                    console.log(`✅ ${name}: PASÓ`);
                    return {name, status: 'PASS', result};
                } catch (error) {
                    console.error(`❌ ${name}: FALLÓ`, error);
                    return {name, status: 'FAIL', error: error.message};
                }
            });
            
            console.log('Resultados de las pruebas:', results);
            return results;
        }

        // Configuración de Service Worker para funcionamiento offline (opcional)
        if ('serviceWorker' in navigator) {
            window.addEventListener('load', function() {
                // Registro del service worker se haría aquí en una implementación completa
                console.log('Service Worker compatible');
            });
        }
    </script>
</body>
</html>