<?php
include_once 'includes/header.php';
include_once 'config/database.php';

// Configurar zona horaria de Lima, Perú
date_default_timezone_set('America/Lima');

$database = new Database();
$conn = $database->getConnection();

// Obtener la empresa del usuario logueado
$codempresaUsuario = null;
try {
    $stmt = $conn->prepare("SELECT codempresa FROM templeado WHERE codempleado = ?");
    $stmt->execute([$_SESSION['user']['codempleado']]);
    $resultado = $stmt->fetch(PDO::FETCH_ASSOC);
    if ($resultado) {
        $codempresaUsuario = $resultado['codempresa'];
    }
} catch(PDOException $e) {
    $_SESSION['error'] = "Error al obtener la empresa del usuario: " . $e->getMessage();
}

// Obtener filtros
$codempleadoFiltro = isset($_GET['codempleado']) ? (int)$_GET['codempleado'] : null;
$mes = isset($_GET['mes']) ? (int)$_GET['mes'] : date('n');
$anio = isset($_GET['anio']) ? (int)$_GET['anio'] : date('Y');

// Validar mes y año
if ($mes < 1 || $mes > 12) $mes = date('n');
if ($anio < 2000 || $anio > 2100) $anio = date('Y');

// Obtener empleados de la empresa
$empleados = [];
try {
    $query = "SELECT codempleado, nombres, apellidoPaterno, apellidoMaterno 
              FROM templeado 
              WHERE codempresa = ? 
              ORDER BY apellidoPaterno, apellidoMaterno, nombres";
    $stmt = $conn->prepare($query);
    $stmt->execute([$codempresaUsuario]);
    $empleados = $stmt->fetchAll(PDO::FETCH_ASSOC);
} catch(PDOException $e) {
    $_SESSION['error'] = "Error al obtener los empleados: " . $e->getMessage();
}

// Obtener asistencias del mes seleccionado
$asistencias = [];
if ($codempleadoFiltro && $mes && $anio) {
    try {
        $fechaInicio = sprintf('%04d-%02d-01', $anio, $mes);
        $fechaFin = date('Y-m-t', strtotime($fechaInicio));
        
        $query = "SELECT 
                    t.codprgturnos,
                    t.codempleado,
                    DATE(t.fecha) as fecha,
                    t.reg_entrada,
                    t.reg_salida,
                    t.lat_entrada,
                    t.lng_entrada,
                    t.lat_salida,
                    t.lng_salida,
                    t.foto_entrada,
                    t.foto_salidad,
                    h.hora_entrada,
                    h.hora_salida,
                    h.minutos_tolerancia,
                    h.denominacion as horario_denominacion,
                    h.sigla as horario_sigla,
                    e.nombres,
                    e.apellidoPaterno,
                    e.apellidoMaterno
                  FROM tprogturnos t
                  INNER JOIN thorario_per h ON t.codhorario_per = h.codhorario_per
                  INNER JOIN templeado e ON t.codempleado = e.codempleado
                  WHERE t.codempleado = ?
                    AND DATE(t.fecha) >= ?
                    AND DATE(t.fecha) <= ?
                  ORDER BY t.fecha ASC";
        
        $stmt = $conn->prepare($query);
        $stmt->execute([$codempleadoFiltro, $fechaInicio, $fechaFin]);
        $asistencias = $stmt->fetchAll(PDO::FETCH_ASSOC);
        
        // Calcular tardanzas y anticipos
        foreach ($asistencias as &$asistencia) {
            // Calcular tardanza en entrada (considerando minutos de tolerancia)
            if (!empty($asistencia['reg_entrada']) && !empty($asistencia['hora_entrada'])) {
                $fechaEntrada = new DateTime($asistencia['reg_entrada']);
                $fechaBase = new DateTime($asistencia['fecha']);
                $horaEntradaEsperada = new DateTime($fechaBase->format('Y-m-d') . ' ' . $asistencia['hora_entrada']);
                
                // Obtener minutos de tolerancia del horario
                $minutosTolerancia = 0;
                if (!empty($asistencia['minutos_tolerancia'])) {
                    // El campo minutos_tolerancia está en formato TIME (00:MM:00), extraer los minutos
                    $timeParts = explode(':', $asistencia['minutos_tolerancia']);
                    if (count($timeParts) >= 2) {
                        $minutosTolerancia = intval($timeParts[1]);
                    }
                }
                
                // Sumar minutos de tolerancia a la hora de entrada esperada
                if ($minutosTolerancia > 0) {
                    $horaEntradaEsperada->modify('+' . $minutosTolerancia . ' minutes');
                }
                
                if ($fechaEntrada > $horaEntradaEsperada) {
                    $diff = $fechaEntrada->diff($horaEntradaEsperada);
                    $asistencia['tardanza_minutos'] = ($diff->days * 24 * 60) + ($diff->h * 60) + $diff->i;
                    $asistencia['tipo_entrada'] = 'tardanza';
                } else {
                    $asistencia['tardanza_minutos'] = 0;
                    $asistencia['tipo_entrada'] = 'puntual';
                }
            } else {
                $asistencia['tardanza_minutos'] = null;
                $asistencia['tipo_entrada'] = empty($asistencia['reg_entrada']) ? 'falta' : 'sin_horario';
            }
            
            // Calcular anticipo o retraso en salida
            if (!empty($asistencia['reg_salida']) && !empty($asistencia['hora_salida'])) {
                $fechaSalida = new DateTime($asistencia['reg_salida']);
                $fechaBase = new DateTime($asistencia['fecha']);
                $horaSalidaEsperada = new DateTime($fechaBase->format('Y-m-d') . ' ' . $asistencia['hora_salida']);
                
                if ($fechaSalida < $horaSalidaEsperada) {
                    $diff = $horaSalidaEsperada->diff($fechaSalida);
                    $asistencia['anticipo_minutos'] = ($diff->days * 24 * 60) + ($diff->h * 60) + $diff->i;
                    $asistencia['retraso_minutos'] = null;
                    $asistencia['tipo_salida'] = 'anticipo';
                } else {
                    $diff = $fechaSalida->diff($horaSalidaEsperada);
                    $asistencia['anticipo_minutos'] = null;
                    $asistencia['retraso_minutos'] = ($diff->days * 24 * 60) + ($diff->h * 60) + $diff->i;
                    $asistencia['tipo_salida'] = 'retraso';
                }
            } else {
                $asistencia['anticipo_minutos'] = null;
                $asistencia['retraso_minutos'] = null;
                $asistencia['tipo_salida'] = empty($asistencia['reg_salida']) ? 'sin_registro' : 'sin_horario';
            }
        }
        unset($asistencia); // Liberar referencia
    } catch(PDOException $e) {
        $_SESSION['error'] = "Error al obtener las asistencias: " . $e->getMessage();
    }
}

// Obtener datos históricos para el gráfico (mes seleccionado)
$datosGrafico = [];
if ($codempleadoFiltro && $mes && $anio) {
    try {
        $fechaInicio = sprintf('%04d-%02d-01', $anio, $mes);
        $fechaFin = date('Y-m-t', strtotime($fechaInicio));
        
        $query = "SELECT 
                    DATE(t.fecha) as fecha,
                    t.reg_entrada,
                    t.reg_salida,
                    h.hora_entrada,
                    h.hora_salida
                  FROM tprogturnos t
                  LEFT JOIN thorario_per h ON t.codhorario_per = h.codhorario_per
                  WHERE t.codempleado = ?
                    AND DATE(t.fecha) >= ?
                    AND DATE(t.fecha) <= ?
                  ORDER BY t.fecha ASC";
        
        $stmt = $conn->prepare($query);
        $stmt->execute([$codempleadoFiltro, $fechaInicio, $fechaFin]);
        $registros = $stmt->fetchAll(PDO::FETCH_ASSOC);
        
        foreach ($registros as $reg) {
            $fecha = $reg['fecha'];
            
            // Calcular minutos desde medianoche para cada hora
            $horaEntradaMinutos = null;
            if ($reg['hora_entrada']) {
                $horaEntrada = new DateTime($reg['hora_entrada']);
                $horaEntradaMinutos = (int)$horaEntrada->format('H') * 60 + (int)$horaEntrada->format('i');
            }
            
            $horaSalidaMinutos = null;
            if ($reg['hora_salida']) {
                $horaSalida = new DateTime($reg['hora_salida']);
                $horaSalidaMinutos = (int)$horaSalida->format('H') * 60 + (int)$horaSalida->format('i');
            }
            
            $regEntradaMinutos = null;
            if ($reg['reg_entrada']) {
                $regEntrada = new DateTime($reg['reg_entrada']);
                $regEntradaMinutos = (int)$regEntrada->format('H') * 60 + (int)$regEntrada->format('i');
            }
            
            $regSalidaMinutos = null;
            if ($reg['reg_salida']) {
                $regSalida = new DateTime($reg['reg_salida']);
                $regSalidaMinutos = (int)$regSalida->format('H') * 60 + (int)$regSalida->format('i');
            }
            
            $datosGrafico[] = [
                'fecha' => $fecha,
                'fecha_formato' => date('d/m', strtotime($fecha)),
                'hora_entrada_prog' => $reg['hora_entrada'] ? date('H:i', strtotime($reg['hora_entrada'])) : null,
                'hora_salida_prog' => $reg['hora_salida'] ? date('H:i', strtotime($reg['hora_salida'])) : null,
                'reg_entrada' => $reg['reg_entrada'] ? date('H:i', strtotime($reg['reg_entrada'])) : null,
                'reg_salida' => $reg['reg_salida'] ? date('H:i', strtotime($reg['reg_salida'])) : null,
                'hora_entrada_minutos' => $horaEntradaMinutos,
                'hora_salida_minutos' => $horaSalidaMinutos,
                'reg_entrada_minutos' => $regEntradaMinutos,
                'reg_salida_minutos' => $regSalidaMinutos
            ];
        }
    } catch(PDOException $e) {
        // Error silencioso para el gráfico
    }
}

// Nombres de los meses
$meses = [
    1 => 'Enero', 2 => 'Febrero', 3 => 'Marzo', 4 => 'Abril',
    5 => 'Mayo', 6 => 'Junio', 7 => 'Julio', 8 => 'Agosto',
    9 => 'Septiembre', 10 => 'Octubre', 11 => 'Noviembre', 12 => 'Diciembre'
];
?>

<style>
.table-asistencias {
    font-size: 0.9rem;
}

.table-asistencias th {
    background: #f8f9fa;
    font-weight: 600;
    border: 1px solid #dee2e6;
    padding: 10px;
    text-align: center;
    vertical-align: middle;
}

.table-asistencias td {
    border: 1px solid #dee2e6;
    padding: 8px;
    vertical-align: middle;
}

/* Colores para estados */
.estado-puntual {
    background-color: #d4edda !important;
    color: #155724;
    font-weight: 600;
}

.estado-tardanza {
    background-color: #fff3cd !important;
    color: #856404;
    font-weight: 600;
}

.estado-falta {
    background-color: #f8d7da !important;
    color: #721c24;
    font-weight: 600;
}

.estado-anticipo {
    background-color: #d1ecf1 !important;
    color: #0c5460;
    font-weight: 600;
}

.estado-retraso {
    background-color: #ffeaa7 !important;
    color: #856404;
    font-weight: 600;
}

.estado-sin-registro {
    background-color: #e2e3e5 !important;
    color: #383d41;
}

.ubicacion-link {
    cursor: pointer;
    color: #007bff;
    text-decoration: underline;
}

.ubicacion-link:hover {
    color: #0056b3;
    text-decoration: none;
}

.filtros-card {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border-radius: 10px;
    padding: 20px;
    margin-bottom: 20px;
}

.filtros-card .form-label {
    color: white;
    font-weight: 600;
}

.filtros-card select {
    border-radius: 5px;
}

#map {
    width: 100%;
    height: 400px;
    border-radius: 8px;
}
</style>

<div class="col-md-10 p-4">
    <div class="d-flex justify-content-between align-items-center mb-4">
        <h2><i class="fas fa-clipboard-list"></i> Reporte de Asistencias</h2>
    </div>

    <?php if (isset($_SESSION['success'])): ?>
        <div class="alert alert-success alert-custom">
            <i class="fas fa-check-circle"></i>
            <?php 
            echo $_SESSION['success']; 
            unset($_SESSION['success']);
            ?>
        </div>
    <?php endif; ?>

    <?php if (isset($_SESSION['error'])): ?>
        <div class="alert alert-danger alert-custom">
            <i class="fas fa-exclamation-triangle"></i>
            <?php 
            echo $_SESSION['error']; 
            unset($_SESSION['error']);
            ?>
        </div>
    <?php endif; ?>

    <!-- Filtros -->
    <div class="card filtros-card mb-4">
        <div class="card-body">
            <form method="GET" action="reportes_asistencias.php" class="row g-3">
                <div class="col-md-4">
                    <label class="form-label">
                        <i class="fas fa-user"></i> Trabajador
                    </label>
                    <select name="codempleado" class="form-select" required>
                        <option value="">-- Seleccionar Trabajador --</option>
                        <?php foreach ($empleados as $emp): ?>
                            <option value="<?php echo $emp['codempleado']; ?>" 
                                    <?php echo $codempleadoFiltro == $emp['codempleado'] ? 'selected' : ''; ?>>
                                <?php echo htmlspecialchars($emp['apellidoPaterno'] . ' ' . $emp['apellidoMaterno'] . ', ' . $emp['nombres']); ?>
                            </option>
                        <?php endforeach; ?>
                    </select>
                </div>
                <div class="col-md-3">
                    <label class="form-label">
                        <i class="fas fa-calendar-month"></i> Mes
                    </label>
                    <select name="mes" class="form-select" required>
                        <?php for ($m = 1; $m <= 12; $m++): ?>
                            <option value="<?php echo $m; ?>" <?php echo $mes == $m ? 'selected' : ''; ?>>
                                <?php echo $meses[$m]; ?>
                            </option>
                        <?php endfor; ?>
                    </select>
                </div>
                <div class="col-md-3">
                    <label class="form-label">
                        <i class="fas fa-calendar-year"></i> Año
                    </label>
                    <select name="anio" class="form-select" required>
                        <?php for ($a = date('Y') - 2; $a <= date('Y') + 2; $a++): ?>
                            <option value="<?php echo $a; ?>" <?php echo $anio == $a ? 'selected' : ''; ?>>
                                <?php echo $a; ?>
                            </option>
                        <?php endfor; ?>
                    </select>
                </div>
                <div class="col-md-2 d-flex align-items-end">
                    <button type="submit" class="btn btn-light btn-lg w-100">
                        <i class="fas fa-search"></i> Filtrar
                    </button>
                </div>
            </form>
        </div>
    </div>

    <?php if ($codempleadoFiltro && !empty($asistencias)): ?>
        <!-- Tabla de asistencias -->
        <div class="card">
            <div class="card-header bg-primary text-white">
                <h5 class="mb-0">
                    <i class="fas fa-table"></i> Asistencias - 
                    <?php 
                    $empleadoSeleccionado = array_filter($empleados, function($e) use ($codempleadoFiltro) {
                        return $e['codempleado'] == $codempleadoFiltro;
                    });
                    if (!empty($empleadoSeleccionado)) {
                        $emp = reset($empleadoSeleccionado);
                        echo htmlspecialchars($emp['apellidoPaterno'] . ' ' . $emp['apellidoMaterno'] . ', ' . $emp['nombres']);
                    }
                    ?> - 
                    <?php echo $meses[$mes] . ' ' . $anio; ?>
                </h5>
            </div>
            <div class="card-body p-0">
                <div class="table-responsive">
                    <table class="table table-bordered table-hover table-asistencias mb-0">
                        <thead>
                            <tr>
                                <th>Fecha</th>
                                <th>Horario</th>
                                <th>Hora Entrada<br>Programada</th>
                                <th>Registro<br>Entrada</th>
                                <th>Estado<br>Entrada</th>
                                <th>Ubicación<br>Entrada</th>
                                <th>Hora Salida<br>Programada</th>
                                <th>Registro<br>Salida</th>
                                <th>Estado<br>Salida</th>
                                <th>Ubicación<br>Salida</th>
                            </tr>
                        </thead>
                        <tbody>
                            <?php foreach ($asistencias as $asist): 
                                $fecha = date('d/m/Y', strtotime($asist['fecha']));
                                $horaEntradaProg = !empty($asist['hora_entrada']) ? date('H:i', strtotime($asist['hora_entrada'])) : '-';
                                $horaSalidaProg = !empty($asist['hora_salida']) ? date('H:i', strtotime($asist['hora_salida'])) : '-';
                                $regEntrada = !empty($asist['reg_entrada']) ? date('d/m/Y H:i:s', strtotime($asist['reg_entrada'])) : '-';
                                $regSalida = !empty($asist['reg_salida']) ? date('d/m/Y H:i:s', strtotime($asist['reg_salida'])) : '-';
                                
                                // Clase CSS para entrada
                                $claseEntrada = 'estado-' . ($asist['tipo_entrada'] ?? 'sin-registro');
                                
                                // Clase CSS para salida
                                $claseSalida = 'estado-' . ($asist['tipo_salida'] ?? 'sin-registro');
                                
                                // Texto de estado entrada
                                $textoEntrada = '';
                                if ($asist['tipo_entrada'] == 'tardanza') {
                                    $textoEntrada = 'Tardanza: ' . ($asist['tardanza_minutos'] ?? 0) . ' min';
                                } elseif ($asist['tipo_entrada'] == 'falta') {
                                    $textoEntrada = 'FALTA';
                                } elseif ($asist['tipo_entrada'] == 'puntual') {
                                    $textoEntrada = 'Puntual';
                                } else {
                                    $textoEntrada = '-';
                                }
                                
                                // Texto de estado salida
                                $textoSalida = '';
                                if ($asist['tipo_salida'] == 'anticipo') {
                                    $textoSalida = 'Anticipo: ' . ($asist['anticipo_minutos'] ?? 0) . ' min';
                                } elseif ($asist['tipo_salida'] == 'retraso') {
                                    $textoSalida = 'Retraso: ' . ($asist['retraso_minutos'] ?? 0) . ' min';
                                } elseif ($asist['tipo_salida'] == 'sin_registro') {
                                    $textoSalida = 'Sin registro';
                                } else {
                                    $textoSalida = '-';
                                }
                            ?>
                                <tr>
                                    <td class="text-center"><strong><?php echo $fecha; ?></strong></td>
                                    <td class="text-center">
                                        <?php if (!empty($asist['horario_sigla'])): ?>
                                            <span class="badge bg-secondary"><?php echo htmlspecialchars($asist['horario_sigla']); ?></span>
                                        <?php endif; ?>
                                        <br>
                                        <small><?php echo htmlspecialchars($asist['horario_denominacion'] ?? '-'); ?></small>
                                    </td>
                                    <td class="text-center"><?php echo $horaEntradaProg; ?></td>
                                    <td class="text-center"><?php echo $regEntrada; ?></td>
                                    <td class="text-center <?php echo $claseEntrada; ?>">
                                        <?php echo $textoEntrada; ?>
                                    </td>
                                    <td class="text-center">
                                        <?php if (!empty($asist['lat_entrada']) && !empty($asist['lng_entrada'])): ?>
                                            <span class="ubicacion-link" 
                                                  onclick="mostrarMapa(<?php echo $asist['lat_entrada']; ?>, <?php echo $asist['lng_entrada']; ?>, 'Entrada')">
                                                <i class="fas fa-map-marker-alt"></i> Ver ubicación
                                            </span>
                                        <?php else: ?>
                                            <span class="text-muted">-</span>
                                        <?php endif; ?>
                                        <?php if (!empty($asist['foto_entrada'])): ?>
                                            <br>
                                            <button type="button" class="btn btn-sm btn-info mt-1" onclick="verFoto('entrada', '<?php echo htmlspecialchars($asist['foto_entrada']); ?>')">
                                                <i class="fas fa-image"></i> Ver foto
                                            </button>
                                        <?php endif; ?>
                                    </td>
                                    <td class="text-center"><?php echo $horaSalidaProg; ?></td>
                                    <td class="text-center"><?php echo $regSalida; ?></td>
                                    <td class="text-center <?php echo $claseSalida; ?>">
                                        <?php echo $textoSalida; ?>
                                    </td>
                                    <td class="text-center">
                                        <?php if (!empty($asist['lat_salida']) && !empty($asist['lng_salida'])): ?>
                                            <span class="ubicacion-link" 
                                                  onclick="mostrarMapa(<?php echo $asist['lat_salida']; ?>, <?php echo $asist['lng_salida']; ?>, 'Salida')">
                                                <i class="fas fa-map-marker-alt"></i> Ver ubicación
                                            </span>
                                        <?php else: ?>
                                            <span class="text-muted">-</span>
                                        <?php endif; ?>
                                        <?php if (!empty($asist['foto_salidad'])): ?>
                                            <br>
                                            <button type="button" class="btn btn-sm btn-info mt-1" onclick="verFoto('salida', '<?php echo htmlspecialchars($asist['foto_salidad']); ?>')">
                                                <i class="fas fa-image"></i> Ver foto
                                            </button>
                                        <?php endif; ?>
                                    </td>
                                </tr>
                            <?php endforeach; ?>
                        </tbody>
                    </table>
                </div>
            </div>
            <div class="card-footer">
                <div class="row">
                    <div class="col-md-12">
                        <small class="text-muted">
                            <i class="fas fa-info-circle"></i> 
                            <strong>Leyenda de colores:</strong>
                            <span class="badge estado-puntual">Puntual</span>
                            <span class="badge estado-tardanza">Tardanza</span>
                            <span class="badge estado-falta">Falta</span>
                            <span class="badge estado-anticipo">Anticipo</span>
                            <span class="badge estado-retraso">Retraso</span>
                            <span class="badge estado-sin-registro">Sin registro</span>
                        </small>
                    </div>
                </div>
            </div>
        </div>
    <?php elseif ($codempleadoFiltro && empty($asistencias)): ?>
        <div class="alert alert-info">
            <i class="fas fa-info-circle"></i> 
            No se encontraron registros de asistencia para el trabajador y período seleccionado.
        </div>
    <?php else: ?>
        <div class="alert alert-warning">
            <i class="fas fa-exclamation-triangle"></i> 
            Por favor, seleccione un trabajador, mes y año para ver el reporte de asistencias.
        </div>
    <?php endif; ?>
    
    <?php if ($codempleadoFiltro && !empty($asistencias)): ?>
        <!-- Botón de Exportar a Excel -->
        <div class="card mt-4 mb-4">
            <div class="card-body text-center">
                <a href="export_asistencias.php?codempleado=<?php echo $codempleadoFiltro; ?>&mes=<?php echo $mes; ?>&anio=<?php echo $anio; ?>" 
                   class="btn btn-success btn-lg" 
                   style="background: linear-gradient(135deg, #28a745 0%, #20c997 100%); border: none; padding: 15px 40px; font-size: 16px; font-weight: bold;">
                    <i class="fas fa-file-excel"></i> Exportar a Excel
                </a>
                <p class="text-muted mt-3 mb-0">
                    <i class="fas fa-info-circle"></i> 
                    El archivo Excel incluirá todos los datos de la tabla con colores intuitivos para facilitar la comprensión
                </p>
            </div>
        </div>
    <?php endif; ?>
    
    <?php if ($codempleadoFiltro && !empty($datosGrafico)): ?>
        <!-- Gráfico estadístico -->
        <div class="card mt-4 shadow-sm">
            <div class="card-header" style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white;">
                <h5 class="mb-0">
                    <i class="fas fa-chart-line"></i> Estadísticas de Asistencia - <?php echo $meses[$mes] . ' ' . $anio; ?>
                </h5>
            </div>
            <div class="card-body">
                <div style="position: relative; height: 450px; width: 100%;">
                    <canvas id="graficoAsistencias"></canvas>
                </div>
                <div class="mt-3">
                    <div class="row text-center">
                        <div class="col-md-3">
                            <div class="p-2 bg-light rounded">
                                <small class="text-muted d-block">Línea verde punteada</small>
                                <strong>Hora Entrada Programada</strong>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="p-2 bg-light rounded">
                                <small class="text-muted d-block">Línea azul sólida</small>
                                <strong>Registro Entrada Real</strong>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="p-2 bg-light rounded">
                                <small class="text-muted d-block">Línea amarilla punteada</small>
                                <strong>Hora Salida Programada</strong>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="p-2 bg-light rounded">
                                <small class="text-muted d-block">Línea roja sólida</small>
                                <strong>Registro Salida Real</strong>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    <?php endif; ?>
</div>

<!-- Modal para mostrar mapa -->
<div class="modal fade" id="modalMapa" tabindex="-1" aria-labelledby="modalMapaLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="modalMapaLabel">
                    <i class="fas fa-map-marker-alt"></i> Ubicación del Registro
                </h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <div id="map"></div>
                <div class="mt-3">
                    <p class="mb-1"><strong>Coordenadas:</strong></p>
                    <p class="mb-0" id="coordenadasTexto"></p>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cerrar</button>
            </div>
        </div>
    </div>
</div>

<!-- Modal para ver foto -->
<div class="modal fade" id="modalFoto" tabindex="-1" aria-labelledby="modalFotoLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="modalFotoLabel">
                    <i class="fas fa-image"></i> Foto de <span id="tipoFoto"></span>
                </h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body text-center">
                <img id="imagenFoto" src="" alt="Foto" class="img-fluid" style="max-height: 70vh; border-radius: 8px;">
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cerrar</button>
            </div>
        </div>
    </div>
</div>

<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDummyKeyReplaceWithYourKey&callback=initMap" async defer></script>
<script>
let map;
let marker;

function initMap() {
    // Esta función se llamará cuando Google Maps esté listo
    // El mapa se inicializará cuando se abra el modal
}

function mostrarMapa(lat, lng, tipo) {
    const modal = new bootstrap.Modal(document.getElementById('modalMapa'));
    document.getElementById('modalMapaLabel').innerHTML = '<i class="fas fa-map-marker-alt"></i> Ubicación de ' + tipo;
    document.getElementById('coordenadasTexto').textContent = 'Latitud: ' + lat + ', Longitud: ' + lng;
    
    // Inicializar el mapa cuando se abre el modal
    const mapElement = document.getElementById('map');
    if (!map) {
        map = new google.maps.Map(mapElement, {
            center: { lat: parseFloat(lat), lng: parseFloat(lng) },
            zoom: 15
        });
    } else {
        map.setCenter({ lat: parseFloat(lat), lng: parseFloat(lng) });
        map.setZoom(15);
    }
    
    // Agregar o actualizar marcador
    if (marker) {
        marker.setPosition({ lat: parseFloat(lat), lng: parseFloat(lng) });
    } else {
        marker = new google.maps.Marker({
            position: { lat: parseFloat(lat), lng: parseFloat(lng) },
            map: map,
            title: 'Ubicación de ' + tipo
        });
    }
    
    // Agregar ventana de información
    const infoWindow = new google.maps.InfoWindow({
        content: '<div><strong>' + tipo + '</strong><br>Lat: ' + lat + '<br>Lng: ' + lng + '</div>'
    });
    
    marker.addListener('click', function() {
        infoWindow.open(map, marker);
    });
    
    // Abrir ventana de información automáticamente
    infoWindow.open(map, marker);
    
    modal.show();
}

// Si Google Maps no está disponible, usar OpenStreetMap como alternativa
if (typeof google === 'undefined' || typeof google.maps === 'undefined') {
    function mostrarMapa(lat, lng, tipo) {
        const modal = new bootstrap.Modal(document.getElementById('modalMapa'));
        document.getElementById('modalMapaLabel').innerHTML = '<i class="fas fa-map-marker-alt"></i> Ubicación de ' + tipo;
        document.getElementById('coordenadasTexto').textContent = 'Latitud: ' + lat + ', Longitud: ' + lng;
        
        // Usar OpenStreetMap como alternativa
        const mapElement = document.getElementById('map');
        const url = `https://www.openstreetmap.org/export/embed.html?bbox=${parseFloat(lng)-0.01},${parseFloat(lat)-0.01},${parseFloat(lng)+0.01},${parseFloat(lat)+0.01}&layer=mapnik&marker=${lat},${lng}`;
        mapElement.innerHTML = `<iframe width="100%" height="400" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="${url}"></iframe>`;
        
        modal.show();
    }
}

// Función para ver foto
function verFoto(tipo, nombreFoto) {
    const modal = new bootstrap.Modal(document.getElementById('modalFoto'));
    const tipoTexto = tipo === 'entrada' ? 'Entrada' : 'Salida';
    document.getElementById('tipoFoto').textContent = tipoTexto;
    document.getElementById('imagenFoto').src = 'uploads/fotos_entrada_salida/' + nombreFoto;
    modal.show();
}

<?php if ($codempleadoFiltro && !empty($datosGrafico)): ?>
// Gráfico de asistencias
document.addEventListener('DOMContentLoaded', function() {
    const ctx = document.getElementById('graficoAsistencias');
    if (!ctx) return;
    
    const datos = <?php echo json_encode($datosGrafico); ?>;
    
    const fechas = datos.map(d => d.fecha_formato);
    const horaEntradaProg = datos.map(d => d.hora_entrada_minutos);
    const regEntrada = datos.map(d => d.reg_entrada_minutos);
    const horaSalidaProg = datos.map(d => d.hora_salida_minutos);
    const regSalida = datos.map(d => d.reg_salida_minutos);
    
    // Convertir minutos a formato hora para el eje Y
    const formatoHora = function(minutos) {
        if (minutos === null) return null;
        const horas = Math.floor(minutos / 60);
        const mins = minutos % 60;
        return horas + (mins / 60);
    };
    
    // Preparar datos convertidos
    const datosEntradaProg = horaEntradaProg.map(formatoHora);
    const datosRegEntrada = regEntrada.map(formatoHora);
    const datosSalidaProg = horaSalidaProg.map(formatoHora);
    const datosRegSalida = regSalida.map(formatoHora);
    
    // Función para calcular rango dinámico basado en datasets visibles
    function calcularRangoDinamico(chart) {
        const todosLosValores = [];
        
        // Recorrer todos los datasets y agregar valores solo de los visibles
        chart.data.datasets.forEach((dataset, index) => {
            const meta = chart.getDatasetMeta(index);
            if (!meta.hidden) { // Solo incluir si el dataset está visible
                dataset.data.forEach(valor => {
                    if (valor !== null && !isNaN(valor)) {
                        todosLosValores.push(valor);
                    }
                });
            }
        });
        
        let minHora = 0;
        let maxHora = 24;
        
        if (todosLosValores.length > 0) {
            minHora = Math.min(...todosLosValores);
            maxHora = Math.max(...todosLosValores);
            
            // Agregar margen de 1 hora arriba y abajo para mejor visualización
            const margen = 1;
            minHora = Math.max(0, Math.floor(minHora) - margen);
            maxHora = Math.min(24, Math.ceil(maxHora) + margen);
            
            // Asegurar que haya al menos un rango de 4 horas para mejor visualización
            if (maxHora - minHora < 4) {
                const centro = (minHora + maxHora) / 2;
                minHora = Math.max(0, centro - 2);
                maxHora = Math.min(24, centro + 2);
            }
        }
        
        return { min: minHora, max: maxHora };
    }
    
    // Calcular rango inicial con todos los datos
    const rangoInicial = calcularRangoDinamico({
        data: {
            datasets: [
                { data: datosEntradaProg },
                { data: datosRegEntrada },
                { data: datosSalidaProg },
                { data: datosRegSalida }
            ]
        },
        getDatasetMeta: function(index) {
            return { hidden: false };
        }
    });
    
    let minHora = rangoInicial.min;
    let maxHora = rangoInicial.max;
    
    const chart = new Chart(ctx, {
        type: 'line',
        data: {
            labels: fechas,
            datasets: [
                {
                    label: 'Hora Entrada Programada',
                    data: datosEntradaProg,
                    borderColor: 'rgba(40, 167, 69, 1)',
                    backgroundColor: 'rgba(40, 167, 69, 0.1)',
                    borderWidth: 2,
                    borderDash: [5, 5],
                    fill: false,
                    tension: 0.4,
                    pointRadius: 3,
                    pointHoverRadius: 5
                },
                {
                    label: 'Registro Entrada Real',
                    data: datosRegEntrada,
                    borderColor: 'rgba(0, 123, 255, 1)',
                    backgroundColor: 'rgba(0, 123, 255, 0.1)',
                    borderWidth: 3,
                    fill: false,
                    tension: 0.4,
                    pointRadius: 4,
                    pointHoverRadius: 6,
                    pointStyle: 'circle'
                },
                {
                    label: 'Hora Salida Programada',
                    data: datosSalidaProg,
                    borderColor: 'rgba(255, 193, 7, 1)',
                    backgroundColor: 'rgba(255, 193, 7, 0.1)',
                    borderWidth: 2,
                    borderDash: [5, 5],
                    fill: false,
                    tension: 0.4,
                    pointRadius: 3,
                    pointHoverRadius: 5
                },
                {
                    label: 'Registro Salida Real',
                    data: datosRegSalida,
                    borderColor: 'rgba(220, 53, 69, 1)',
                    backgroundColor: 'rgba(220, 53, 69, 0.1)',
                    borderWidth: 3,
                    fill: false,
                    tension: 0.4,
                    pointRadius: 4,
                    pointHoverRadius: 6,
                    pointStyle: 'circle'
                }
            ]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            plugins: {
                legend: {
                    display: true,
                    position: 'top',
                    labels: {
                        usePointStyle: true,
                        padding: 15,
                        font: {
                            size: 12,
                            weight: 'bold'
                        }
                    }
                },
                tooltip: {
                    mode: 'index',
                    intersect: false,
                    callbacks: {
                        label: function(context) {
                            if (context.parsed.y === null) return context.dataset.label + ': Sin registro';
                            const horas = Math.floor(context.parsed.y);
                            const minutos = Math.round((context.parsed.y - horas) * 60);
                            return context.dataset.label + ': ' + 
                                   String(horas).padStart(2, '0') + ':' + 
                                   String(minutos).padStart(2, '0');
                        }
                    }
                }
            },
            scales: {
                x: {
                    display: true,
                    title: {
                        display: true,
                        text: 'Fecha',
                        font: {
                            size: 12,
                            weight: 'bold'
                        }
                    },
                    grid: {
                        color: 'rgba(0, 0, 0, 0.05)'
                    }
                },
                y: {
                    display: true,
                    title: {
                        display: true,
                        text: 'Hora del día',
                        font: {
                            size: 12,
                            weight: 'bold'
                        }
                    },
                    ticks: {
                        callback: function(value) {
                            if (value === null || isNaN(value)) return '';
                            const horas = Math.floor(value);
                            const minutos = Math.round((value - horas) * 60);
                            return String(horas).padStart(2, '0') + ':' + String(minutos).padStart(2, '0');
                        },
                        stepSize: 0.5
                    },
                    grid: {
                        color: 'rgba(0, 0, 0, 0.05)'
                    },
                    min: minHora,
                    max: maxHora
                }
            },
            interaction: {
                mode: 'index',
                intersect: false
            },
            animation: {
                duration: 1500,
                easing: 'easeInOutQuart'
            }
        },
        plugins: [{
            id: 'rangoDinamico',
            afterEvent: function(chart, args) {
                // Detectar clics en la leyenda
                if (args.event.type === 'click') {
                    setTimeout(function() {
                        const nuevoRango = calcularRangoDinamico(chart);
                        if (chart.options.scales.y.min !== nuevoRango.min || chart.options.scales.y.max !== nuevoRango.max) {
                            chart.options.scales.y.min = nuevoRango.min;
                            chart.options.scales.y.max = nuevoRango.max;
                            chart.update('none');
                        }
                    }, 50);
                }
            }
        }]
    });
    
    // Listener adicional para detectar clics en la leyenda
    ctx.onclick = function(evt) {
        const points = chart.getElementsAtEventForMode(evt, 'nearest', { intersect: true }, true);
        // Si no se hizo clic en un punto del gráfico, podría ser en la leyenda
        if (points.length === 0) {
            setTimeout(function() {
                const nuevoRango = calcularRangoDinamico(chart);
                if (chart.options.scales.y.min !== nuevoRango.min || chart.options.scales.y.max !== nuevoRango.max) {
                    chart.options.scales.y.min = nuevoRango.min;
                    chart.options.scales.y.max = nuevoRango.max;
                    chart.update('none');
                }
            }, 100);
        }
    };
});
<?php endif; ?>
</script>

<?php
include_once 'includes/footer.php';
?>

