<?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();

$codempleado = $_SESSION['user']['codempleado'];

// Obtener fecha actual de Lima
$fechaActual = date('Y-m-d');
$fechaHoraActual = date('Y-m-d H:i:s');

// Obtener información del empleado
$empleado = null;
try {
    $stmt = $conn->prepare("SELECT codempleado, nombres, apellidoPaterno, apellidoMaterno 
                           FROM templeado 
                           WHERE codempleado = ?");
    $stmt->execute([$codempleado]);
    $empleado = $stmt->fetch(PDO::FETCH_ASSOC);
} catch(PDOException $e) {
    $_SESSION['error'] = "Error al obtener información del empleado: " . $e->getMessage();
}

// Buscar TODOS los turnos programados para hoy
$turnosHoy = [];
$turnoSeleccionado = null;
$tipoRegistro = 'entrada'; // Por defecto entrada

try {
    $stmt = $conn->prepare("SELECT t.codprgturnos, t.reg_entrada, t.foto_entrada, t.reg_salida, t.foto_salidad,
                                   t.codhorario_per, h.denominacion, h.hora_entrada, h.hora_salida, h.sigla,
                                   t.fecha
                           FROM tprogturnos t
                           LEFT JOIN thorario_per h ON t.codhorario_per = h.codhorario_per
                           WHERE t.codempleado = ? AND DATE(t.fecha) = ?
                           ORDER BY h.hora_entrada ASC");
    $stmt->execute([$codempleado, $fechaActual]);
    $turnosHoy = $stmt->fetchAll(PDO::FETCH_ASSOC);
    
    // Si hay un turno seleccionado en el POST, usarlo
    $codprgturnosSeleccionado = isset($_POST['codprgturnos']) ? intval($_POST['codprgturnos']) : null;
    if (!$codprgturnosSeleccionado && isset($_GET['turno'])) {
        $codprgturnosSeleccionado = intval($_GET['turno']);
    }
    
    // Buscar el turno seleccionado
    $turnoEncontrado = false;
    $turnoSeleccionado = null; // Inicializar como null para evitar usar datos anteriores
    
    // Debug: mostrar información de los turnos disponibles
    $turnosIdsDisponibles = array_map(function($t) { return intval($t['codprgturnos']); }, $turnosHoy);
    
    if ($codprgturnosSeleccionado) {
        // Buscar el turno en la lista
        foreach ($turnosHoy as $turno) {
            // Comparar como enteros para evitar problemas de tipo
            $turnoId = intval($turno['codprgturnos']);
            $seleccionadoId = intval($codprgturnosSeleccionado);
            
            if ($turnoId === $seleccionadoId) {
                $turnoSeleccionado = $turno;
                $turnoEncontrado = true;
                break;
            }
        }
        
        // Si se especificó un turno pero no se encontró, mostrar error con detalles
        if (!$turnoEncontrado) {
            $_SESSION['error'] = "El turno especificado (ID: $codprgturnosSeleccionado) no se encontró. Turnos disponibles: " . implode(', ', $turnosIdsDisponibles);
        }
    }
    
    // Solo usar el primero si NO se especificó un turno (es decir, si $codprgturnosSeleccionado es null)
    // IMPORTANTE: Si se especificó un turno pero no se encontró, NO usar el primero automáticamente
    if (!$turnoEncontrado && !empty($turnosHoy) && !$codprgturnosSeleccionado) {
        // Solo usar el primero si no se especificó ningún turno
        $turnoSeleccionado = $turnosHoy[0];
    }
    
    // Determinar tipo de registro según el turno seleccionado
    if ($turnoSeleccionado) {
        if (empty($turnoSeleccionado['reg_entrada'])) {
            $tipoRegistro = 'entrada';
        } else if (empty($turnoSeleccionado['reg_salida'])) {
            $tipoRegistro = 'salida';
        }
    }
} catch(PDOException $e) {
    $_SESSION['error'] = "Error al buscar los turnos: " . $e->getMessage();
}

// Procesar guardado
if ($_SERVER['REQUEST_METHOD'] == 'POST' && isset($_POST['guardar_registro'])) {
    try {
        $tipo = $_POST['tipo'] ?? 'entrada';
        $fotoBase64 = $_POST['foto_base64'] ?? '';
        $latitud = !empty($_POST['latitud']) ? $_POST['latitud'] : null;
        $longitud = !empty($_POST['longitud']) ? $_POST['longitud'] : null;
        $codprgturnos = isset($_POST['codprgturnos']) ? intval($_POST['codprgturnos']) : null;
        
        if (!$codprgturnos) {
            throw new Exception("No se especificó el turno a registrar");
        }
        
        // Verificar que el turno existe y pertenece al empleado
        $stmt = $conn->prepare("SELECT codprgturnos, reg_entrada, reg_salida 
                               FROM tprogturnos 
                               WHERE codprgturnos = ? AND codempleado = ? AND DATE(fecha) = ?");
        $stmt->execute([$codprgturnos, $codempleado, $fechaActual]);
        $turnoVerificar = $stmt->fetch(PDO::FETCH_ASSOC);
        
        if (!$turnoVerificar) {
            throw new Exception("El turno especificado no existe o no pertenece a este empleado");
        }
        
        $conn->beginTransaction();
        
        if ($tipo == 'entrada') {
            // Verificar que no tenga entrada ya registrada
            if (!empty($turnoVerificar['reg_entrada'])) {
                throw new Exception("Este turno ya tiene una entrada registrada");
            }
            
            // Guardar entrada
            $fotoNombre = null;
            if (!empty($fotoBase64)) {
                // Decodificar la imagen base64 (ya viene con el texto dibujado)
                $fotoData = base64_decode(preg_replace('#^data:image/\w+;base64,#i', '', $fotoBase64));
                
                // Generar nombre único para la foto (foto_entrada es varchar(250), así que tenemos espacio)
                $timestamp = date('YmdHis');
                $fotoNombre = 'entrada_' . $codempleado . '_' . $codprgturnos . '_' . $timestamp . '.jpg';
                $fotoPath = 'uploads/fotos_entrada_salida/' . $fotoNombre;
                
                // Crear directorio si no existe
                $uploadDir = 'uploads/fotos_entrada_salida/';
                if (!file_exists($uploadDir)) {
                    mkdir($uploadDir, 0777, true);
                }
                
                // Guardar la imagen
                file_put_contents($fotoPath, $fotoData);
            }
            
            $stmt = $conn->prepare("UPDATE tprogturnos SET 
                                   reg_entrada = ?,
                                   foto_entrada = ?,
                                   lat_entrada = ?,
                                   lng_entrada = ?
                                   WHERE codprgturnos = ?");
            $stmt->execute([$fechaHoraActual, $fotoNombre, $latitud, $longitud, $codprgturnos]);
            
            $_SESSION['success'] = "✅ Entrada registrada correctamente";
        } else {
            // Verificar que tenga entrada registrada
            if (empty($turnoVerificar['reg_entrada'])) {
                throw new Exception("Debe registrar primero la entrada para este turno");
            }
            
            // Verificar que no tenga salida ya registrada
            if (!empty($turnoVerificar['reg_salida'])) {
                throw new Exception("Este turno ya tiene una salida registrada");
            }
            
            // Guardar salida
            $fotoNombre = null;
            if (!empty($fotoBase64)) {
                // Decodificar la imagen base64 (ya viene con el texto dibujado)
                $fotoData = base64_decode(preg_replace('#^data:image/\w+;base64,#i', '', $fotoBase64));
                
                // Generar nombre único para la foto (formato para foto_salidad varchar(50))
                $timestamp = date('YmdHis');
                $fotoNombre = 'salida_' . $codempleado . '_' . $codprgturnos . '_' . $timestamp . '.jpg';
                // Asegurar que no exceda 50 caracteres
                if (strlen($fotoNombre) > 50) {
                    $fotoNombre = 'S' . $codempleado . '_' . $codprgturnos . '_' . $timestamp . '.jpg';
                    if (strlen($fotoNombre) > 50) {
                        $fotoNombre = 'S' . substr($codempleado, -5) . '_' . substr($codprgturnos, -5) . '_' . $timestamp . '.jpg';
                    }
                }
                $fotoPath = 'uploads/fotos_entrada_salida/' . $fotoNombre;
                
                // Crear directorio si no existe
                $uploadDir = 'uploads/fotos_entrada_salida/';
                if (!file_exists($uploadDir)) {
                    mkdir($uploadDir, 0777, true);
                }
                
                // Guardar la imagen
                file_put_contents($fotoPath, $fotoData);
            }
            
            $stmt = $conn->prepare("UPDATE tprogturnos SET 
                                   reg_salida = ?,
                                   foto_salidad = ?,
                                   lat_salida = ?,
                                   lng_salida = ?
                                   WHERE codprgturnos = ?");
            $stmt->execute([$fechaHoraActual, $fotoNombre, $latitud, $longitud, $codprgturnos]);
            
            $_SESSION['success'] = "✅ Salida registrada correctamente";
        }
        
        $conn->commit();
        
        // Recargar la página para actualizar el estado, manteniendo el turno seleccionado
        $redirectUrl = "registrar_ent_sal.php";
        if ($codprgturnos) {
            $redirectUrl .= "?turno=" . $codprgturnos;
        }
        header("Location: " . $redirectUrl);
        exit();
        
    } catch(Exception $e) {
        $conn->rollBack();
        $_SESSION['error'] = "❌ Error al guardar el registro: " . $e->getMessage();
    }
}

// No es necesario recargar aquí porque:
// 1. La sección inicial ya carga todos los turnos
// 2. Después de guardar, se hace un redirect con ?turno=X que recarga la página
// 3. La sección inicial maneja correctamente el parámetro GET
?>

<style>
.camera-container {
    position: relative;
    width: 100%;
    max-width: 500px;
    margin: 0 auto;
}

#video {
    width: 100%;
    max-width: 500px;
    border-radius: 10px;
    display: none;
    margin: 0 auto;
    transform: scaleX(-1); /* Efecto espejo para cámara frontal */
}

#canvas {
    display: none;
}

#preview {
    width: 100%;
    max-width: 500px;
    border-radius: 10px;
    display: none;
    margin: 20px auto;
}

.btn-camera {
    width: 100%;
    max-width: 500px;
    margin: 10px auto;
    display: block;
}

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

.info-badge {
    background: rgba(255, 255, 255, 0.2);
    padding: 10px 20px;
    border-radius: 10px;
    margin: 10px 0;
}

.radio-group {
    display: flex;
    gap: 20px;
    justify-content: center;
    margin: 20px 0;
}

.radio-option {
    flex: 1;
    max-width: 200px;
}

.radio-option input[type="radio"] {
    display: none;
}

.radio-option label {
    display: block;
    padding: 20px;
    background: rgba(255, 255, 255, 0.2);
    border: 3px solid transparent;
    border-radius: 10px;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s;
    color: white;
    font-weight: 600;
}

.radio-option input[type="radio"]:checked + label {
    background: rgba(255, 255, 255, 0.9);
    color: #667eea;
    border-color: white;
    transform: scale(1.05);
}

.radio-option label:hover {
    background: rgba(255, 255, 255, 0.3);
}

.turno-card {
    background: rgba(255, 255, 255, 0.1);
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 10px;
    padding: 15px;
    margin: 10px 0;
    cursor: pointer;
    transition: all 0.3s;
}

.turno-card:hover {
    background: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.5);
    transform: translateY(-2px);
}

.turno-card.selected {
    background: rgba(255, 255, 255, 0.3);
    border-color: white;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.turno-card.completo {
    opacity: 0.7;
}

.estado-badge {
    display: inline-block;
    padding: 5px 10px;
    border-radius: 5px;
    font-size: 0.85em;
    margin-left: 10px;
}

.estado-badge.pendiente {
    background: rgba(255, 193, 7, 0.8);
    color: #000;
}

.estado-badge.entrada {
    background: rgba(40, 167, 69, 0.8);
    color: white;
}

.estado-badge.completo {
    background: rgba(23, 162, 184, 0.8);
    color: white;
}
</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-clock"></i> Registrar Entrada/Salida</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; ?>

    <?php if (!$empleado): ?>
        <div class="alert alert-danger">
            <i class="fas fa-exclamation-triangle"></i> No se pudo obtener la información del empleado.
        </div>
    <?php elseif (empty($turnosHoy)): ?>
        <div class="alert alert-warning">
            <i class="fas fa-exclamation-triangle"></i> 
            No se encontraron turnos programados para hoy (<?php echo date('d/m/Y'); ?>). 
            Por favor, asegúrese de que sus turnos estén programados en el sistema.
        </div>
    <?php else: ?>
        <div class="registro-card">
            <div class="text-center mb-4">
                <h4><i class="fas fa-user"></i> <?php echo htmlspecialchars($empleado['nombres'] . ' ' . $empleado['apellidoPaterno'] . ' ' . $empleado['apellidoMaterno']); ?></h4>
                <div class="info-badge">
                    <i class="fas fa-calendar"></i> Fecha y hora actual: <?php echo date('d/m/Y H:i:s'); ?>
                </div>
            </div>

            <!-- Debug temporal: mostrar información de selección -->
            <?php if (isset($_GET['turno'])): ?>
                <div class="alert alert-warning mb-3">
                    <small>
                        <strong>Debug:</strong> 
                        Turno solicitado desde GET: <?php echo intval($_GET['turno']); ?> | 
                        Turno seleccionado actual: <?php echo $turnoSeleccionado ? intval($turnoSeleccionado['codprgturnos']) : 'null'; ?> | 
                        Turnos disponibles: <?php echo implode(', ', $turnosIdsDisponibles); ?>
                    </small>
                </div>
            <?php endif; ?>
            
            <!-- Lista de turnos programados -->
            <?php if (count($turnosHoy) > 1): ?>
                <div class="mb-4">
                    <h5 class="text-white mb-3"><i class="fas fa-list"></i> Turnos Programados para Hoy:</h5>
                    <?php foreach ($turnosHoy as $turno): ?>
                        <?php 
                        $estadoTurno = 'pendiente';
                        $estadoTexto = 'Pendiente Entrada';
                        if (!empty($turno['reg_entrada']) && !empty($turno['reg_salida'])) {
                            $estadoTurno = 'completo';
                            $estadoTexto = 'Completo';
                        } else if (!empty($turno['reg_entrada'])) {
                            $estadoTurno = 'entrada';
                            $estadoTexto = 'Pendiente Salida';
                        }
                        $esSeleccionado = $turnoSeleccionado && isset($turnoSeleccionado['codprgturnos']) && intval($turnoSeleccionado['codprgturnos']) === intval($turno['codprgturnos']);
                        ?>
                        <div class="turno-card <?php echo $esSeleccionado ? 'selected' : ''; ?> <?php echo $estadoTurno == 'completo' ? 'completo' : ''; ?>" 
                             style="cursor: pointer;"
                             data-turno-id="<?php echo intval($turno['codprgturnos']); ?>">
                            <div class="d-flex justify-content-between align-items-center">
                                <div>
                                    <strong>
                                        <?php echo htmlspecialchars($turno['denominacion'] ?? 'Sin horario'); ?>
                                        <?php if (!empty($turno['sigla'])): ?>
                                            (<?php echo htmlspecialchars($turno['sigla']); ?>)
                                        <?php endif; ?>
                                    </strong>
                                    <?php if ($turno['hora_entrada'] && $turno['hora_salida']): ?>
                                        <br>
                                        <small>
                                            <i class="fas fa-clock"></i> 
                                            <?php echo date('H:i', strtotime($turno['hora_entrada'])); ?> - 
                                            <?php echo date('H:i', strtotime($turno['hora_salida'])); ?>
                                        </small>
                                    <?php endif; ?>
                                </div>
                                <div>
                                    <span class="estado-badge <?php echo $estadoTurno; ?>">
                                        <?php echo $estadoTexto; ?>
                                    </span>
                                    <?php if ($esSeleccionado): ?>
                                        <i class="fas fa-check-circle ms-2"></i>
                                    <?php endif; ?>
                                </div>
                            </div>
                            <?php if (!empty($turno['reg_entrada'])): ?>
                                <div class="mt-2">
                                    <small><i class="fas fa-sign-in-alt"></i> Entrada: <?php echo date('d/m/Y H:i:s', strtotime($turno['reg_entrada'])); ?></small>
                                </div>
                            <?php endif; ?>
                            <?php if (!empty($turno['reg_salida'])): ?>
                                <div class="mt-1">
                                    <small><i class="fas fa-sign-out-alt"></i> Salida: <?php echo date('d/m/Y H:i:s', strtotime($turno['reg_salida'])); ?></small>
                                </div>
                            <?php endif; ?>
                        </div>
                    <?php endforeach; ?>
                </div>
            <?php endif; ?>

            <?php if ($turnoSeleccionado): ?>
                <div class="mb-4">
                    <div class="info-badge">
                        <i class="fas fa-calendar-check"></i> Turno Seleccionado: 
                        <strong>
                            <?php echo htmlspecialchars($turnoSeleccionado['denominacion'] ?? 'Sin horario'); ?>
                            <?php if (!empty($turnoSeleccionado['sigla'])): ?>
                                (<?php echo htmlspecialchars($turnoSeleccionado['sigla']); ?>)
                            <?php endif; ?>
                        </strong>
                    </div>
                    <?php if ($turnoSeleccionado['hora_entrada'] && $turnoSeleccionado['hora_salida']): ?>
                        <div class="info-badge">
                            <i class="fas fa-clock"></i> Horario: 
                            <?php echo date('H:i', strtotime($turnoSeleccionado['hora_entrada'])); ?> - 
                            <?php echo date('H:i', strtotime($turnoSeleccionado['hora_salida'])); ?>
                        </div>
                    <?php endif; ?>
                    <?php if (!empty($turnoSeleccionado['reg_entrada'])): ?>
                        <div class="info-badge">
                            <i class="fas fa-sign-in-alt"></i> Entrada registrada: <?php echo date('d/m/Y H:i:s', strtotime($turnoSeleccionado['reg_entrada'])); ?>
                        </div>
                    <?php endif; ?>
                    <?php if (!empty($turnoSeleccionado['reg_salida'])): ?>
                        <div class="info-badge">
                            <i class="fas fa-sign-out-alt"></i> Salida registrada: <?php echo date('d/m/Y H:i:s', strtotime($turnoSeleccionado['reg_salida'])); ?>
                        </div>
                    <?php endif; ?>
                </div>
            <?php endif; ?>

            <?php 
            // Verificar qué turno está seleccionado y su estado
            $turnoCompleto = false;
            $turnoIdSeleccionado = null;
            if ($turnoSeleccionado) {
                $turnoIdSeleccionado = intval($turnoSeleccionado['codprgturnos']);
                $turnoCompleto = !empty($turnoSeleccionado['reg_entrada']) && !empty($turnoSeleccionado['reg_salida']);
            }
            
            // Debug temporal: mostrar información del turno seleccionado
            $codprgturnosDesdeGet = isset($_GET['turno']) ? intval($_GET['turno']) : null;
            ?>
            <?php if ($turnoSeleccionado && $turnoCompleto): ?>
                <div class="alert alert-info text-center">
                    <i class="fas fa-check-circle"></i> 
                    Este turno (ID: <?php echo $turnoIdSeleccionado; ?>) ya tiene registrada tanto la entrada como la salida.
                    <?php if ($codprgturnosDesdeGet && $codprgturnosDesdeGet !== $turnoIdSeleccionado): ?>
                        <br><small class="text-danger">
                            <strong>⚠️ Error de selección:</strong> Se solicitó el turno ID <?php echo $codprgturnosDesdeGet; ?> 
                            pero se está mostrando el turno ID <?php echo $turnoIdSeleccionado; ?>. 
                            Turnos disponibles: <?php echo implode(', ', $turnosIdsDisponibles); ?>
                        </small>
                    <?php endif; ?>
                </div>
            <?php elseif ($turnoSeleccionado): ?>
                <form method="POST" id="formRegistro" enctype="multipart/form-data">
                    <input type="hidden" name="guardar_registro" value="1">
                    <input type="hidden" name="codprgturnos" id="codprgturnos" value="<?php echo $turnoSeleccionado['codprgturnos']; ?>">
                    <input type="hidden" name="foto_base64" id="foto_base64">
                    <input type="hidden" name="latitud" id="latitud">
                    <input type="hidden" name="longitud" id="longitud">
                    
                    <div class="radio-group">
                        <div class="radio-option">
                            <input type="radio" name="tipo" id="tipo_entrada" value="entrada" 
                                   <?php echo $tipoRegistro == 'entrada' ? 'checked' : ''; ?>
                                   <?php echo !empty($turnoSeleccionado['reg_entrada']) ? 'disabled' : ''; ?>>
                            <label for="tipo_entrada">
                                <i class="fas fa-sign-in-alt fa-2x mb-2"></i><br>
                                Entrada
                            </label>
                        </div>
                        <div class="radio-option">
                            <input type="radio" name="tipo" id="tipo_salida" value="salida" 
                                   <?php echo $tipoRegistro == 'salida' ? 'checked' : ''; ?>
                                   <?php echo empty($turnoSeleccionado['reg_entrada']) || !empty($turnoSeleccionado['reg_salida']) ? 'disabled' : ''; ?>>
                            <label for="tipo_salida">
                                <i class="fas fa-sign-out-alt fa-2x mb-2"></i><br>
                                Salida
                            </label>
                        </div>
                    </div>

                    <div class="radio-group">
                        <div class="radio-option">
                            <input type="radio" name="modo_foto" id="modo_foto_con" value="con" checked>
                            <label for="modo_foto_con">
                                <i class="fas fa-camera fa-2x mb-2"></i><br>
                                Con fotografía (recomendado)
                            </label>
                        </div>
                        <div class="radio-option">
                            <input type="radio" name="modo_foto" id="modo_foto_sin" value="sin">
                            <label for="modo_foto_sin">
                                <i class="fas fa-user fa-2x mb-2"></i><br>
                                Sin fotografía
                            </label>
                        </div>
                    </div>

                    <div class="camera-container">
                        <video id="video" autoplay playsinline style="display: none;"></video>
                        <canvas id="canvas"></canvas>
                        <img id="preview" alt="Preview">
                        
                        <div id="loading-camera" class="text-center p-4">
                            <i class="fas fa-spinner fa-spin fa-3x text-white mb-3"></i>
                            <p class="text-white">Cargando cámara...</p>
                        </div>
                        
                        <button type="button" class="btn btn-primary btn-lg btn-camera" id="btnTomarFoto" style="display: none;">
                            <i class="fas fa-camera"></i> Tomar Foto
                        </button>
                        
                        <button type="button" class="btn btn-secondary btn-lg btn-camera" id="btnCancelarFoto" style="display: none;">
                            <i class="fas fa-times"></i> Cancelar
                        </button>
                    </div>

                    <div class="text-center mt-4">
                        <button type="submit" class="btn btn-success btn-lg" id="btnGuardar" disabled>
                            <i class="fas fa-save"></i> Guardar Registro
                        </button>
                    </div>
                </form>
            <?php else: ?>
                <div class="alert alert-warning text-center">
                    <i class="fas fa-exclamation-triangle"></i> 
                    Por favor, seleccione un turno para registrar entrada/salida.
                </div>
            <?php endif; ?>
        </div>
    <?php endif; ?>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    // Agregar event listeners a las tarjetas de turno PRIMERO
    const turnoCards = document.querySelectorAll('.turno-card[data-turno-id]');
    console.log('Tarjetas de turno encontradas:', turnoCards.length);
    turnoCards.forEach(function(card) {
        const turnoId = card.getAttribute('data-turno-id');
        console.log('Agregando listener a turno ID:', turnoId);
        card.addEventListener('click', function(e) {
            e.preventDefault();
            e.stopPropagation();
            const clickedTurnoId = this.getAttribute('data-turno-id');
            console.log('Click en tarjeta de turno, ID:', clickedTurnoId);
            if (clickedTurnoId) {
                const url = 'registrar_ent_sal.php?turno=' + parseInt(clickedTurnoId);
                console.log('Redirigiendo a:', url);
                window.location.href = url;
            }
        });
    });
    
    const video = document.getElementById('video');
    const canvas = document.getElementById('canvas');
    const preview = document.getElementById('preview');
    const btnTomarFoto = document.getElementById('btnTomarFoto');
    const btnCancelarFoto = document.getElementById('btnCancelarFoto');
    const btnGuardar = document.getElementById('btnGuardar');
    const fotoBase64 = document.getElementById('foto_base64');
    const latitudInput = document.getElementById('latitud');
    const longitudInput = document.getElementById('longitud');
    const modoFotoCon = document.getElementById('modo_foto_con');
    const modoFotoSin = document.getElementById('modo_foto_sin');
    let stream = null;
    let ubicacion = { lat: null, lng: null };
    
    // Datos del turno seleccionado desde PHP
    const turnoInfo = {
        denominacion: <?php echo json_encode($turnoSeleccionado['denominacion'] ?? ''); ?>,
        sigla: <?php echo json_encode($turnoSeleccionado['sigla'] ?? ''); ?>,
        horaEntrada: <?php echo json_encode($turnoSeleccionado['hora_entrada'] ?? ''); ?>,
        horaSalida: <?php echo json_encode($turnoSeleccionado['hora_salida'] ?? ''); ?>
    };
    
    // Función para seleccionar un turno (mantener por compatibilidad)
    function seleccionarTurno(codprgturnos) {
        console.log('Seleccionando turno:', codprgturnos);
        console.log('Tipo de dato:', typeof codprgturnos);
        if (codprgturnos) {
            const url = 'registrar_ent_sal.php?turno=' + parseInt(codprgturnos);
            console.log('Redirigiendo a:', url);
            window.location.href = url;
        } else {
            console.error('Error: codprgturnos no está definido');
            alert('Error: No se pudo obtener el ID del turno');
        }
    }

    // Obtener ubicación del dispositivo
    function obtenerUbicacion() {
        if (navigator.geolocation) {
            navigator.geolocation.getCurrentPosition(
                function(position) {
                    ubicacion.lat = position.coords.latitude;
                    ubicacion.lng = position.coords.longitude;
                    latitudInput.value = ubicacion.lat;
                    longitudInput.value = ubicacion.lng;
                    console.log('Ubicación obtenida:', ubicacion);
                },
                function(error) {
                    console.warn('Error al obtener ubicación:', error);
                    alert('No se pudo obtener la ubicación. Por favor, permita el acceso a la ubicación.');
                },
                {
                    enableHighAccuracy: true,
                    timeout: 10000,
                    maximumAge: 0
                }
            );
        } else {
            console.warn('Geolocalización no soportada');
        }
    }

    // Solicitar ubicación al cargar la página
    obtenerUbicacion();

    // Verificar si hay foto ya tomada
    if (fotoBase64 && fotoBase64.value) {
        preview.src = 'data:image/jpeg;base64,' + fotoBase64.value;
        preview.style.display = 'block';
        if (btnGuardar) {
            btnGuardar.disabled = false;
            btnGuardar.removeAttribute('disabled');
            btnGuardar.classList.remove('disabled');
            console.log('Foto existente detectada. Botón activado.');
        }
    } else {
        // Si no hay foto y el modo es "con fotografía", activar cámara automáticamente
        if (!modoFotoSin || !modoFotoSin.checked) {
            activarCamara();
        } else if (btnGuardar) {
            btnGuardar.disabled = false;
            btnGuardar.removeAttribute('disabled');
            btnGuardar.classList.remove('disabled');
        }
    }

    // Función para activar la cámara automáticamente
    function activarCamara() {
        const loadingCamera = document.getElementById('loading-camera');
        
        if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
            navigator.mediaDevices.getUserMedia({ 
                video: { 
                    facingMode: 'user' // Cámara frontal
                } 
            })
            .then(function(mediaStream) {
                stream = mediaStream;
                video.srcObject = stream;
                
                // Cuando el video esté listo, mostrar el video y el botón
                video.addEventListener('loadedmetadata', function() {
                    video.style.display = 'block';
                    if (loadingCamera) loadingCamera.style.display = 'none';
                    if (btnTomarFoto) btnTomarFoto.style.display = 'block';
                });
                
                // También escuchar el evento playing por si acaso
                video.addEventListener('playing', function() {
                    video.style.display = 'block';
                    if (loadingCamera) loadingCamera.style.display = 'none';
                    if (btnTomarFoto) btnTomarFoto.style.display = 'block';
                });
            })
            .catch(function(err) {
                console.error('Error al acceder a la cámara:', err);
                if (loadingCamera) {
                    loadingCamera.innerHTML = '<p class="text-white">Error al acceder a la cámara: ' + err.message + '</p>';
                }
                alert('Error al acceder a la cámara: ' + err.message);
            });
        } else {
            if (loadingCamera) {
                loadingCamera.innerHTML = '<p class="text-white">Su navegador no soporta el acceso a la cámara</p>';
            }
            alert('Su navegador no soporta el acceso a la cámara');
        }
    }

    // Manejar cambio entre "con foto" y "sin foto"
    function actualizarModoFoto() {
        const esSinFoto = modoFotoSin && modoFotoSin.checked;
        if (esSinFoto) {
            // Detener cámara si está activa
            if (stream) {
                stream.getTracks().forEach(track => track.stop());
                stream = null;
            }
            if (video) video.style.display = 'none';
            if (btnTomarFoto) btnTomarFoto.style.display = 'none';
            if (btnCancelarFoto) btnCancelarFoto.style.display = 'none';
            // Limpiar foto y permitir guardar sin foto
            if (preview) preview.style.display = 'none';
            if (fotoBase64) fotoBase64.value = '';
            if (btnGuardar) {
                btnGuardar.disabled = false;
                btnGuardar.removeAttribute('disabled');
                btnGuardar.classList.remove('disabled');
            }
        } else {
            // Modo con foto: exigir foto y reactivar cámara si no hay una
            if (btnGuardar) {
                btnGuardar.disabled = !fotoBase64.value;
                if (btnGuardar.disabled) {
                    btnGuardar.classList.add('disabled');
                } else {
                    btnGuardar.classList.remove('disabled');
                }
            }
            if (!fotoBase64.value) {
                activarCamara();
            }
        }
    }

    if (modoFotoCon) {
        modoFotoCon.addEventListener('change', actualizarModoFoto);
    }
    if (modoFotoSin) {
        modoFotoSin.addEventListener('change', actualizarModoFoto);
    }

    // Función para dibujar texto sobre la imagen
    function dibujarTextoEnImagen(imageData, fechaHora, lat, lng, turnoInfo) {
        return new Promise(function(resolve) {
            const img = new Image();
            img.onload = function() {
                canvas.width = img.width;
                canvas.height = img.height;
                const ctx = canvas.getContext('2d');
                
                // Dibujar la imagen original
                ctx.drawImage(img, 0, 0);
                
                // Configurar estilo del texto - tamaño más grande y visible
                const fontSize = Math.max(12, img.width / 38);
                ctx.font = `bold ${fontSize}px Arial`;
                ctx.textAlign = 'left';
                ctx.textBaseline = 'top';
                
                // Preparar textos
                const textos = [];
                
                // Fecha y hora
                textos.push(fechaHora);
                
                // Turno y horario
                if (turnoInfo.denominacion) {
                    let turnoTexto = turnoInfo.denominacion;
                    if (turnoInfo.sigla) {
                        turnoTexto += ' (' + turnoInfo.sigla + ')';
                    }
                    textos.push(turnoTexto);
                }
                
                if (turnoInfo.horaEntrada && turnoInfo.horaSalida) {
                    // Formatear horas (remover segundos si existen)
                    const horaEntrada = turnoInfo.horaEntrada.substring(0, 5);
                    const horaSalida = turnoInfo.horaSalida.substring(0, 5);
                    textos.push('Horario: ' + horaEntrada + ' - ' + horaSalida);
                }
                
                // Ubicación
                textos.push(lat && lng ? `Lat: ${lat.toFixed(6)}` : 'Lat: No disponible');
                textos.push(lat && lng ? `Lng: ${lng.toFixed(6)}` : 'Lng: No disponible');
                
                // Calcular dimensiones del fondo
                const padding = 5;
                const textHeight = fontSize * 1.4;
                const totalHeight = textos.length * textHeight + padding * 2;
                
                // Calcular ancho máximo del texto
                let maxTextWidth = 0;
                textos.forEach(function(texto) {
                    const metrics = ctx.measureText(texto);
                    if (metrics.width > maxTextWidth) {
                        maxTextWidth = metrics.width;
                    }
                });
                const maxWidth = Math.max(maxTextWidth + padding * 2, 220);
                
                // Dibujar fondo semi-transparente más oscuro para mejor contraste
                ctx.fillStyle = 'rgba(45, 42, 42, 0.85)';
                ctx.fillRect(15, 15, maxWidth, totalHeight);
                
                // Dibujar borde blanco alrededor del fondo
                ctx.strokeStyle = 'rgba(255, 255, 255, 0.5)';
                ctx.lineWidth = 2;
                ctx.strokeRect(15, 15, maxWidth, totalHeight);
                
                // Dibujar cada línea de texto con mejor contraste
                textos.forEach(function(texto, index) {
                    const y = 15 + padding + (index * textHeight);
                    const x = 20;
                    
                    // Primero dibujar el borde negro (sombra) para mejor legibilidad
                    ctx.strokeStyle = '#000000';
                    ctx.lineWidth = 4;
                    ctx.strokeText(texto, x, y);
                    
                    // Luego dibujar el texto en color blanco brillante
                    ctx.fillStyle = '#FFFFFF';
                    ctx.fillText(texto, x, y);
                });
                
                // Convertir a base64
                const imageDataFinal = canvas.toDataURL('image/jpeg', 0.9);
                resolve(imageDataFinal);
            };
            img.src = imageData;
        });
    }

    // Tomar foto - capturar imagen del video
    btnTomarFoto.addEventListener('click', function() {
        // Intentar obtener ubicación nuevamente antes de tomar la foto
        obtenerUbicacion();
        
        if (stream && video.readyState >= 2) { // 2 = HAVE_CURRENT_DATA
            // Capturar la imagen del video
            canvas.width = video.videoWidth;
            canvas.height = video.videoHeight;
            const ctx = canvas.getContext('2d');
            ctx.drawImage(video, 0, 0);
            
            // Obtener fecha y hora actual
            const ahora = new Date();
            const fechaHora = ahora.toLocaleString('es-PE', {
                timeZone: 'America/Lima',
                year: 'numeric',
                month: '2-digit',
                day: '2-digit',
                hour: '2-digit',
                minute: '2-digit',
                second: '2-digit'
            });
            
            // Convertir canvas a imagen temporal
            const imageDataTemp = canvas.toDataURL('image/jpeg', 0.9);
            
            // Dibujar texto sobre la imagen (incluyendo turno y horario)
            dibujarTextoEnImagen(imageDataTemp, fechaHora, ubicacion.lat, ubicacion.lng, turnoInfo)
                .then(function(imageDataFinal) {
                    fotoBase64.value = imageDataFinal.split(',')[1]; // Remover el prefijo
                    
                    // Mostrar preview
                    preview.src = imageDataFinal;
                    preview.style.display = 'block';
                    video.style.display = 'none';
                    
                    // Detener la cámara
                    stream.getTracks().forEach(track => track.stop());
                    stream = null;
                    
                    btnTomarFoto.style.display = 'none';
                    btnCancelarFoto.style.display = 'none';
                    
                    // Activar botón guardar
                    if (btnGuardar) {
                        btnGuardar.disabled = false;
                        btnGuardar.removeAttribute('disabled');
                        btnGuardar.classList.remove('disabled');
                        console.log('Botón guardar activado. Estado disabled:', btnGuardar.disabled);
                    } else {
                        console.error('Botón guardar no encontrado');
                    }
                })
                .catch(function(error) {
                    console.error('Error al procesar la imagen:', error);
                    alert('Error al procesar la imagen. Por favor, intente nuevamente.');
                });
        } else {
            alert('La cámara aún no está lista. Por favor, espere un momento.');
        }
    });

    // Cancelar foto - volver a activar la cámara
    if (btnCancelarFoto) {
        btnCancelarFoto.addEventListener('click', function() {
            if (preview.style.display === 'block') {
                // Si hay una preview, limpiarla y reactivar cámara
                preview.style.display = 'none';
                fotoBase64.value = '';
                btnGuardar.disabled = true;
                
                // Reactivar cámara
                activarCamara();
            } else {
                // Si no hay preview, solo detener la cámara
                if (stream) {
                    stream.getTracks().forEach(track => track.stop());
                    stream = null;
                }
                video.style.display = 'none';
                btnTomarFoto.style.display = 'none';
                btnCancelarFoto.style.display = 'none';
            }
        });
    }

    // Validar antes de enviar
    const formRegistro = document.getElementById('formRegistro');
    if (formRegistro) {
        formRegistro.addEventListener('submit', function(e) {
            const esSinFoto = modoFotoSin && modoFotoSin.checked;
            
            // Solo exigir foto cuando el modo es "con fotografía"
            if (!esSinFoto && !fotoBase64.value) {
                e.preventDefault();
                alert('Por favor, tome una foto antes de guardar');
                return false;
            }
            
            // Verificar que el botón no esté deshabilitado
            if (btnGuardar && btnGuardar.disabled) {
                e.preventDefault();
                alert('Por favor, complete todos los pasos antes de guardar');
                return false;
            }
        });
    }
    
    // Debug: Verificar estado del botón
    console.log('Botón guardar inicial:', btnGuardar ? btnGuardar.disabled : 'no encontrado');
});
</script>

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

