<?php
// Include database connection file
require_once 'utils_database.php';

// Initialize database connection
$conn = Activarmysql();

// Get active tab from URL parameter or default to first tab
$active_tab = isset($_GET['tab']) ? $_GET['tab'] : 'ttipo_presentacion';

// Initialize variables for CRUD operations
$operation = isset($_POST['operation']) ? $_POST['operation'] : '';
$id = isset($_POST['id']) ? $_POST['id'] : '';

// Handle CRUD operations
if ($operation == 'create' || $operation == 'update') {
    handleSaveOperation($conn, $active_tab, $operation, $_POST);
} elseif ($operation == 'delete') {
    handleDeleteOperation($conn, $active_tab, $id);
}

// Function to handle save operations (create or update)
function handleSaveOperation($conn, $table, $operation, $data) {
    $id = $data['id'] ?? '';
    $fields = [];
    $values = [];
    $updates = [];
    
    // Remove operation and id from data for processing fields
    unset($data['operation']);
    if ($operation == 'update') {
        unset($data['id']);
    }
    
    // Process the remaining fields
    foreach ($data as $field => $value) {
        if ($operation == 'create') {
            $fields[] = "`$field`";
            $values[] = "'" . mysqli_real_escape_string($conn, $value) . "'";
        } else {
            $updates[] = "`$field` = '" . mysqli_real_escape_string($conn, $value) . "'";
        }
    }
    
    // Build and execute query
    if ($operation == 'create') {
        $sql = "INSERT INTO `$table` (" . implode(', ', $fields) . ") VALUES (" . implode(', ', $values) . ")";
    } else {
        $sql = "UPDATE `$table` SET " . implode(', ', $updates) . " WHERE id = '$id'";
    }
    
    mysqli_query($conn, $sql);
    
    // Redirect to avoid form resubmission
    header("Location: index.php?tab=$table");
    exit;
}

// Function to handle delete operation
function handleDeleteOperation($conn, $table, $id) {
    $sql = "DELETE FROM `$table` WHERE id = '$id'";
    mysqli_query($conn, $sql);
    
    // Redirect to avoid form resubmission
    header("Location: index.php?tab=$table");
    exit;
}

// Function to get columns for a table
function getTableColumns($conn, $table) {
    $columns = [];
    $result = mysqli_query($conn, "DESCRIBE `$table`");
    
    if ($result) {
        while ($row = mysqli_fetch_assoc($result)) {
            $columns[] = $row;
        }
    }
    
    return $columns;
}

// Function to get data for a table
function getTableData($conn, $table) {
    $data = [];
    $result = mysqli_query($conn, "SELECT * FROM `$table`");
    
    if ($result) {
        while ($row = mysqli_fetch_assoc($result)) {
            $data[] = $row;
        }
    }
    
    return $data;
}

?>

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Sistema de Gestión - CRUD</title>
    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- Font Awesome -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
    
    <!-- Custom CSS -->
   <style>
    :root {
        --emerald: #3C7A6C;
        --emerald-dark: #203c3f;
        --emerald-light: #06c290;
        --green-accent: #4ADE80;
        --green-pale: #A7F3D0;
        --green-deep: #064E3B;
        
        /* Nuevas variables para gradientes */
        --primary-color: var(--emerald);
        --secondary-color: var(--emerald-light);
        --tertiary-color: var(--green-accent);
        --dark-color: var(--emerald-dark);
        --primary-gradient: linear-gradient(135deg, var(--tertiary-color), var(--dark-color));
        --secondary-gradient: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
    }
    
    body {
        background-color: #f9f9f9;
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    }
    
    /* Header y navbar con estilo de gradiente */
    .navbar, header, footer {
        background: var(--primary-gradient) !important;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        color: rgba(255, 255, 255, 0.9);
        border-radius: 20px;
    }
    
    .navbar-brand {
        font-weight: bold;
        color: white !important;
    }
    
    /* Tarjetas con bordes más consistentes */
    .card {
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        margin-bottom: 20px;
        border: none;
        border-radius: 20px;
    }
    
    .card-header {
        background: var(--secondary-gradient);
        border-bottom: 1px solid #dee2e6;
        font-weight: bold;
        border-radius: 20px 20px 0 0 !important;
    }
    
    /* Mejoras para tabs de navegación */
    .nav-tabs .nav-item .nav-link {
        color: #495057;
        font-weight: 500;
        border-radius: 20px 20px 0 0;
        margin-right: 2px;
    }
    
    .nav-tabs .nav-item .nav-link.active {
        font-weight: bold;
        color: var(--emerald-dark);
        background-color: #fff;
        border-top: 3px solid var(--emerald);
    }
    
    /* Botones con estilos de gradiente */
    .btn-primary, .btn-next, .btn-submit {
        background: var(--secondary-gradient);
        border-color: var(--emerald-dark);
    }
    
    .btn-primary:hover, .btn-primary:focus {
        background-color: var(--emerald-dark);
        border-color: var(--emerald-dark);
    }
    
    .btn-danger {
        background-color: #e74c3c;
        border-color: #c0392b;
    }
    
    .btn-info {
        background: var(--primary-gradient);
        border-color: var(--green-deep);
        color: #fff;
    }
    
    .btn-info:hover, .btn-info:focus {
        background-color: var(--green-deep);
        border-color: var(--green-deep);
        color: #fff;
    }
    
    .btn-crud {
        margin-right: 5px;
    }
    
    /* Estilo para tablas */
    .table thead th {
        background-color: var(--emerald-light);
        color: #495057;
        font-weight: 600;
    }
    
    .table-striped tbody tr:nth-of-type(odd) {
        background-color: rgba(46, 204, 113, 0.05);
    }
    
    .table-hover tbody tr:hover {
        background-color: rgba(46, 204, 113, 0.1);
    }
    
    /* Enfoque en controles de formulario */
    .form-control:focus {
        border-color: var(--emerald);
        box-shadow: 0 0 0 0.2rem rgba(46, 204, 113, 0.25);
    }
    
    /* Mejoras para modales */
    .modal-header {
        background: var(--secondary-gradient);
        color: #333;
    }
    
    /* Estilo para paginación */
    .pagination .page-item.active .page-link {
        background-color: var(--emerald);
        border-color: var(--emerald);
    }
    
    .pagination .page-link {
        color: var(--emerald);
    }
    
    /* Mejoras para la barra de progreso */
    .progress-container {
        backdrop-filter: blur(10px);
        background-color: rgba(255, 255, 255, 0.95);
        border: 1px solid rgba(255, 255, 255, 0.7);
        border-radius: 20px;
        position: relative;
        z-index: 100;
    }
    
    /* Estilos para secciones de formulario */
    .form-section {
        border-radius: 20px;
    }
    
    .form-section[data-section="1"] {
        margin-top: 30px;
    }
    
    /* Contenedor principal */
    .container {
        position: relative;
        padding-bottom: 40px;
    }
    
    /* Estilos adicionales para solucionar problemas de dropdown */
    .dropdown-menu {
        z-index: 1050; /* Mayor z-index para evitar superposiciones */
    }
    
    .dropdown-item {
        cursor: pointer;
    }
    
    /* Estilos para tablas responsivas en móviles */
    @media (max-width: 767.98px) {
        .table-responsive {
            overflow-x: auto;
        }
        
        /* Convertir tabla a formato vertical en móviles */
        .table-mobile-responsive thead {
            display: none;
        }
        
        .table-mobile-responsive tbody tr {
            display: block;
            margin-bottom: 1rem;
            border: 1px solid #dee2e6;
            border-radius: 0.25rem;
        }
        
        .table-mobile-responsive tbody td {
            display: block;
            text-align: right;
            border-bottom: 1px solid #dee2e6;
            padding: 0.75rem;
        }
        
        .table-mobile-responsive tbody td:last-child {
            border-bottom: none;
        }
        
        .table-mobile-responsive tbody td::before {
            content: attr(data-label);
            float: left;
            font-weight: bold;
        }
    }
</style>
</head>
<body>
    <!-- Navigation -->
    <nav class="navbar navbar-expand-lg navbar-dark bg-dark mb-4">
        <div class="container">
            <a class="navbar-brand" href="#">
                <i class="fas fa-database me-2"></i>Sistema de Gestión
            </a>
        </div>
    </nav>

    <!-- Main Content -->
    <div class="container">
        <div class="row">
            <div class="col-md-12">
                <div class="card">
                    <div class="card-header">
                        <ul class="nav nav-tabs card-header-tabs">
                            <li class="nav-item">
                                <a class="nav-link <?php echo $active_tab == 'ttipo_presentacion' ? 'active' : ''; ?>" href="?tab=ttipo_presentacion">
                                    <i class="fas fa-file-powerpoint me-1"></i>Tipo Presentación
                                </a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link <?php echo $active_tab == 'ttipo_competicion' ? 'active' : ''; ?>" href="?tab=ttipo_competicion">
                                    <i class="fas fa-trophy me-1"></i>Tipo Competición
                                </a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link <?php echo $active_tab == 'testadotrabajo' ? 'active' : ''; ?>" href="?tab=testadotrabajo">
                                    <i class="fas fa-tasks me-1"></i>Estado Trabajo
                                </a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link <?php echo $active_tab == 'ttipousuario' ? 'active' : ''; ?>" href="?tab=ttipousuario">
                                    <i class="fas fa-users me-1"></i>Tipo Usuario
                                </a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link <?php echo $active_tab == 'ttrabajo' ? 'active' : ''; ?>" href="?tab=ttrabajo">
                                    <i class="fas fa-file-alt me-1"></i>Trabajos
                                </a>
                            </li>
                        </ul>
                    </div>
                    <div class="card-body">
                        <!-- New Record Button -->
                        <div class="mb-3">
                            <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#formModal">
                                <i class="fas fa-plus-circle me-1"></i>Nuevo Registro
                            </button>
                        </div>
                        
                        <!-- Search and Filter Controls -->
                        <?php if ($active_tab == 'ttrabajo'): ?>
                        <div class="row mb-3">
                            <div class="col-md-4">
                                <div class="input-group">
                                    <input type="text" class="form-control" id="searchInput" placeholder="Buscar...">
                                    <button class="btn btn-outline-secondary" type="button" id="searchButton">
                                        <i class="fas fa-search"></i>
                                    </button>
                                </div>
                            </div>
                            <div class="col-md-4">
                                <select class="form-select" id="filterEstado">
                                    <option value="">Filtrar por Estado</option>
                                    <option value="1">Pendiente por asignar</option>
                                    <option value="2">Pendiente por evaluar</option>
                                    <option value="3">En proceso de evaluacion</option>
                                    <option value="4">Evaluado</option>
                                    <option value="5">No Aprobado</option>
                                </select>
                            </div>
                            <div class="col-md-4 text-end">
                                <button type="button" class="btn btn-outline-success" id="exportButton">
                                    <i class="fas fa-file-excel me-1"></i>Exportar
                                </button>
                            </div>
                        </div>
                        <?php endif; ?>
                        
                        <!-- Data Table -->
                        <div class="table-responsive">
                            <table class="table table-striped table-hover">
                                <thead>
                                    <tr>
                                        <?php
                                        $columns = getTableColumns($conn, $active_tab);
                                        
                                        // For ttrabajo table, display only selected columns to improve usability
                                        if ($active_tab == 'ttrabajo') {
                                            $displayColumns = ['id', 'codigo', 'titulo', 'fecha', 'estado', 'calificacion_promedio', 'aprobado'];
                                            foreach ($displayColumns as $field) {
                                                echo "<th>" . ucfirst(str_replace('_', ' ', $field)) . "</th>";
                                            }
                                        } else {
                                            foreach ($columns as $column) {
                                                echo "<th>" . ucfirst(str_replace('_', ' ', $column['Field'])) . "</th>";
                                            }
                                        }
                                        ?>
                                        <th>Acciones</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <?php
                                    if ($active_tab == 'ttrabajo') {
                                        // For ttrabajo, limit the query and fields displayed
                                        $data = [];
                                        $query = "SELECT id, codigo, titulo, fecha, estado, calificacion_promedio, aprobado FROM ttrabajo LIMIT 25";
                                        $result = mysqli_query($conn, $query);
                                        if ($result) {
                                            while ($row = mysqli_fetch_assoc($result)) {
                                                $data[] = $row;
                                            }
                                        }
                                    } else {
                                        $data = getTableData($conn, $active_tab);
                                    }
                                    
                                    if (count($data) > 0) {
                                        foreach ($data as $row) {
                                            echo "<tr>";
                                            if ($active_tab == 'ttrabajo') {
                                                // Display only selected columns for ttrabajo
                                                $displayColumns = ['id', 'codigo', 'titulo', 'fecha', 'estado', 'calificacion_promedio', 'aprobado'];
                                                foreach ($displayColumns as $field) {
                                                    if ($field == 'estado') {
                                                        // Convert estado code to description
                                                        $estadoDesc = '';
                                                        switch ($row[$field]) {
                                                            case 1: $estadoDesc = 'Pendiente por asignar'; break;
                                                            case 2: $estadoDesc = 'Pendiente por evaluar'; break;
                                                            case 3: $estadoDesc = 'En proceso de evaluacion'; break;
                                                            case 4: $estadoDesc = 'Evaluado'; break;
                                                            case 5: $estadoDesc = 'No Aprobado'; break;
                                                            default: $estadoDesc = 'Desconocido';
                                                        }
                                                        echo "<td>" . $estadoDesc . "</td>";
                                                    } elseif ($field == 'aprobado') {
                                                        echo "<td>" . ($row[$field] ? 'Sí' : 'No') . "</td>";
                                                    } elseif ($field == 'fecha') {
                                                        // Format date nicely
                                                        echo "<td>" . date('d/m/Y', strtotime($row[$field])) . "</td>";
                                                    } else {
                                                        echo "<td>" . htmlspecialchars($row[$field]) . "</td>";
                                                    }
                                                }
                                            } else {
                                                foreach ($columns as $column) {
                                                    $field = $column['Field'];
                                                    echo "<td>" . htmlspecialchars($row[$field]) . "</td>";
                                                }
                                            }
                                            
                                            // Actions buttons with different styling for ttrabajo
                                            if ($active_tab == 'ttrabajo') {
                                                echo "<td>
                                                        <div class='dropdown'>
                                                            <button class='btn btn-sm btn-outline-secondary dropdown-toggle' type='button' data-bs-toggle='dropdown' aria-expanded='false'>
                                                                Acciones
                                                            </button>
                                                            <ul class='dropdown-menu'>
                                                                <li><a class='dropdown-item' href='#' onclick='viewRecord(" . $row['id'] . ");return false;'><i class='fas fa-eye me-2'></i>Ver detalle</a></li>
                                                                <li><a class='dropdown-item' href='#' onclick='editRecord(" . $row['id'] . ");return false;'><i class='fas fa-edit me-2'></i>Editar</a></li>
                                                                <li><a class='dropdown-item text-danger' href='#' onclick='deleteRecord(" . $row['id'] . ");return false;'><i class='fas fa-trash me-2'></i>Eliminar</a></li>
                                                            </ul>
                                                        </div>
                                                    </td>";
                                            } else {
                                                echo "<td>
                                                        <button type='button' class='btn btn-sm btn-info btn-crud' onclick='editRecord(" . json_encode($row) . ")'>
                                                            <i class='fas fa-edit'></i> Editar
                                                        </button>
                                                        <button type='button' class='btn btn-sm btn-danger btn-crud' onclick='deleteRecord(" . $row['id'] . ")'>
                                                            <i class='fas fa-trash'></i> Borrar
                                                        </button>
                                                    </td>";
                                            }
                                            echo "</tr>";
                                        }
                                    } else {
                                        $colSpan = ($active_tab == 'ttrabajo') ? 8 : count($columns) + 1;
                                        echo "<tr><td colspan='$colSpan' class='text-center'>No hay registros disponibles</td></tr>";
                                    }
                                    ?>
                                </tbody>
                            </table>
                        </div>
                        
                        <!-- Pagination for ttrabajo -->
                        <?php if ($active_tab == 'ttrabajo'): ?>
                        <div class="d-flex justify-content-between align-items-center">
                            <div>
                                <span class="text-muted">Mostrando 1-25 de XX registros</span>
                            </div>
                            <nav aria-label="Page navigation">
                                <ul class="pagination">
                                    <li class="page-item disabled">
                                        <a class="page-link" href="#" aria-label="Previous">
                                            <span aria-hidden="true">&laquo;</span>
                                        </a>
                                    </li>
                                    <li class="page-item active"><a class="page-link" href="#">1</a></li>
                                    <li class="page-item"><a class="page-link" href="#">2</a></li>
                                    <li class="page-item"><a class="page-link" href="#">3</a></li>
                                    <li class="page-item">
                                        <a class="page-link" href="#" aria-label="Next">
                                            <span aria-hidden="true">&raquo;</span>
                                        </a>
                                    </li>
                                </ul>
                            </nav>
                        </div>
                        <?php endif; ?>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Form Modal -->
    <div class="modal fade" id="formModal" tabindex="-1" aria-labelledby="formModalLabel" aria-hidden="true">
        <div class="modal-dialog <?php echo ($active_tab == 'ttrabajo') ? 'modal-xl' : ''; ?>">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="formModalLabel">
                        <i class="fas fa-edit me-1"></i><span id="modalTitle">Nuevo Registro</span>
                    </h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <form id="recordForm" method="post">
                    <div class="modal-body">
                        <input type="hidden" name="operation" id="operation" value="create">
                        
                        <?php if ($active_tab == 'ttrabajo'): ?>
                        <!-- Custom form for ttrabajo -->
                        <input type="hidden" name="id" id="id">
                        
                        <ul class="nav nav-tabs" id="trabajoTab" role="tablist">
                            <li class="nav-item" role="presentation">
                                <button class="nav-link active" id="info-tab" data-bs-toggle="tab" data-bs-target="#info" type="button" role="tab" aria-controls="info" aria-selected="true">Información General</button>
                            </li>
                            <li class="nav-item" role="presentation">
                                <button class="nav-link" id="autores-tab" data-bs-toggle="tab" data-bs-target="#autores" type="button" role="tab" aria-controls="autores" aria-selected="false">Autores</button>
                            </li>
                            <li class="nav-item" role="presentation">
                                <button class="nav-link" id="evaluacion-tab" data-bs-toggle="tab" data-bs-target="#evaluacion" type="button" role="tab" aria-controls="evaluacion" aria-selected="false">Evaluación</button>
                            </li>
                        </ul>
                        
                        <div class="tab-content py-3" id="trabajoTabContent">
                            <!-- Tab 1: General Information -->
                            <div class="tab-pane fade show active" id="info" role="tabpanel" aria-labelledby="info-tab">
                                <div class="row">
                                    <div class="col-md-6">
                                        <div class="mb-3">
                                            <label for="codigo" class="form-label">Código</label>
                                            <input type="text" class="form-control" id="codigo" name="codigo" required>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="mb-3">
                                            <label for="fecha" class="form-label">Fecha</label>
                                            <input type="date" class="form-control" id="fecha" name="fecha" required>
                                        </div>
                                    </div>
                                </div>
                                
                                <div class="mb-3">
                                    <label for="titulo" class="form-label">Título</label>
                                    <input type="text" class="form-control" id="titulo" name="titulo" required>
                                </div>
                                
                                <div class="row">
                                    <div class="col-md-4">
                                        <div class="mb-3">
                                            <label for="cod_tipo_competicion_propuesto" class="form-label">Tipo Competición</label>
                                            <select class="form-select" id="cod_tipo_competicion_propuesto" name="cod_tipo_competicion_propuesto" required>
                                                <option value="">Seleccione...</option>
                                                <?php
                                                $competiciones = mysqli_query($conn, "SELECT id, descripcion_esp FROM ttipo_competicion");
                                                if ($competiciones) {
                                                    while ($comp = mysqli_fetch_assoc($competiciones)) {
                                                        echo "<option value='" . $comp['id'] . "'>" . $comp['descripcion_esp'] . "</option>";
                                                    }
                                                }
                                                ?>
                                            </select>
                                        </div>
                                    </div>
                                    <div class="col-md-4">
                                        <div class="mb-3">
                                            <label for="cod_tipo_presentacion_propuesto" class="form-label">Tipo Presentación Propuesto</label>
                                            <select class="form-select" id="cod_tipo_presentacion_propuesto" name="cod_tipo_presentacion_propuesto" required>
                                                <option value="">Seleccione...</option>
                                                <?php
                                                $presentaciones = mysqli_query($conn, "SELECT id, descripcion_esp FROM ttipo_presentacion");
                                                if ($presentaciones) {
                                                    while ($pres = mysqli_fetch_assoc($presentaciones)) {
                                                        echo "<option value='" . $pres['id'] . "'>" . $pres['descripcion_esp'] . "</option>";
                                                    }
                                                }
                                                ?>
                                            </select>
                                        </div>
                                    </div>
                                    <div class="col-md-4">
                                        <div class="mb-3">
                                            <label for="estado" class="form-label">Estado</label>
                                            <select class="form-select" id="estado" name="estado" required>
                                                <option value="">Seleccione...</option>
                                                <?php
                                                $estados = mysqli_query($conn, "SELECT id, descripcion FROM testadotrabajo");
                                                if ($estados) {
                                                    while ($est = mysqli_fetch_assoc($estados)) {
                                                        echo "<option value='" . $est['id'] . "'>" . $est['descripcion'] . "</option>";
                                                    }
                                                }
                                                ?>
                                            </select>
                                        </div>
                                    </div>
                                </div>
                                
                                <div class="row">
                                    <div class="col-md-6">
                                        <div class="mb-3">
                                            <label for="pais" class="form-label">País</label>
                                            <input type="text" class="form-control" id="pais" name="pais">
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="mb-3">
                                            <label for="ciudad" class="form-label">Ciudad</label>
                                            <input type="text" class="form-control" id="ciudad" name="ciudad">
                                        </div>
                                    </div>
                                </div>
                                
                                <div class="mb-3">
                                    <label for="area_tematica" class="form-label">Área Temática</label>
                                    <input type="text" class="form-control" id="area_tematica" name="area_tematica">
                                </div>
                                
                                <div class="mb-3">
                                    <label for="introduccion" class="form-label">Introducción</label>
                                    <textarea class="form-control" id="introduccion" name="introduccion" rows="3"></textarea>
                                </div>
                                
                                <div class="mb-3">
                                    <label for="materiales" class="form-label">Materiales</label>
                                    <textarea class="form-control" id="materiales" name="materiales" rows="3"></textarea>
                                </div>
                                
                                <div class="mb-3">
                                    <label for="resultados" class="form-label">Resultados</label>
                                    <textarea class="form-control" id="resultados" name="resultados" rows="3"></textarea>
                                </div>
                                
                                <div class="mb-3">
                                    <label for="conclusiones" class="form-label">Conclusiones</label>
                                    <textarea class="form-control" id="conclusiones" name="conclusiones" rows="3"></textarea>
                                </div>
                            </div>
                            
                            <!-- Tab 2: Authors -->
                            <div class="tab-pane fade" id="autores" role="tabpanel" aria-labelledby="autores-tab">
                                <div class="mb-3">
                                    <label for="nro_autores" class="form-label">Número de Autores</label>
                                    <input type="number" class="form-control" id="nro_autores" name="nro_autores" min="1" max="10" value="1">
                                </div>
                                
                                <div id="autoresContainer">
                                    <!-- Author 1 (always visible) -->
                                    <div class="card mb-3">
                                        <div class="card-header bg-light">
                                            <strong>Autor 1 (Corresponsal)</strong>
                                        </div>
                                        <div class="card-body">
                                            <div class="row">
                                                <div class="col-md-2">
                                                    <div class="mb-3">
                                                        <label for="titulo_autor1" class="form-label">Título</label>
                                                        <input type="text" class="form-control" id="titulo_autor1" name="titulo_autor1">
                                                    </div>
                                                </div>
                                                <div class="col-md-5">
                                                    <div class="mb-3">
                                                        <label for="autor1" class="form-label">Nombre</label>
                                                        <input type="text" class="form-control" id="autor1" name="autor1" required>
                                                    </div>
                                                </div>
                                                <div class="col-md-5">
                                                    <div class="mb-3">
                                                        <label for="apellido_autor1" class="form-label">Apellido</label>
                                                        <input type="text" class="form-control" id="apellido_autor1" name="apellido_autor1" required>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="row">
                                                <div class="col-md-6">
                                                    <div class="mb-3">
                                                        <label for="inst_autor1" class="form-label">Institución</label>
                                                        <input type="text" class="form-control" id="inst_autor1" name="inst_autor1">
                                                    </div>
                                                </div>
                                                <div class="col-md-6">
                                                    <div class="mb-3">
                                                        <label for="email_autor1" class="form-label">Email</label>
                                                        <input type="email" class="form-control" id="email_autor1" name="email_autor1" required>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    
                                    <!-- Author fields 2-10 will be dynamically shown/hidden -->
                                    <?php for ($i = 2; $i <= 10; $i++): ?>
                                    <div class="card mb-3 author-card" id="author<?php echo $i; ?>Card" style="display: none;">
                                        <div class="card-header bg-light">
                                            <strong>Autor <?php echo $i; ?></strong>
                                        </div>
                                        <div class="card-body">
                                            <div class="row">
                                                <div class="col-md-2">
                                                    <div class="mb-3">
                                                        <label for="titulo_autor<?php echo $i; ?>" class="form-label">Título</label>
                                                        <input type="text" class="form-control" id="titulo_autor<?php echo $i; ?>" name="titulo_autor<?php echo $i; ?>">
                                                    </div>
                                                </div>
                                                <div class="col-md-5">
                                                    <div class="mb-3">
                                                        <label for="autor<?php echo $i; ?>" class="form-label">Nombre</label>
                                                        <input type="text" class="form-control" id="autor<?php echo $i; ?>" name="autor<?php echo $i; ?>">
                                                    </div>
                                                </div>
                                                <div class="col-md-5">
                                                    <div class="mb-3">
                                                        <label for="apellido_autor<?php echo $i; ?>" class="form-label">Apellido</label>
                                                        <input type="text" class="form-control" id="apellido_autor<?php echo $i; ?>" name="apellido_autor<?php echo $i; ?>">
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="row">
                                                <div class="col-md-6">
                                                    <div class="mb-3">
                                                        <label for="inst_autor<?php echo $i; ?>" class="form-label">Institución</label>
                                                        <input type="text" class="form-control" id="inst_autor<?php echo $i; ?>" name="inst_autor<?php echo $i; ?>">
                                                    </div>
                                                </div>
                                                <div class="col-md-6">
                                                    <div class="mb-3">
                                                        <label for="email_autor<?php echo $i; ?>" class="form-label">Email</label>
                                                        <input type="email" class="form-control" id="email_autor<?php echo $i; ?>" name="email_autor<?php echo $i; ?>">
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <?php endfor; ?>
                                </div>
                            </div>
                            
                            <!-- Tab 3: Evaluation -->
                            <div class="tab-pane fade" id="evaluacion" role="tabpanel" aria-labelledby="evaluacion-tab">
                                <div class="row">
                                    <div class="col-md-4">
                                        <div class="mb-3">
                                            <label for="evaluador1" class="form-label">Evaluador 1</label>
                                            <select class="form-select" id="evaluador1" name="evaluador1">
                                                <option value="">Seleccione...</option>
                                                <?php
                                                $evaluadores = mysqli_query($conn, "SELECT id, nombre FROM tusuario WHERE tipousuario = 'E'");
                                                if ($evaluadores) {
                                                    while ($eval = mysqli_fetch_assoc($evaluadores)) {
                                                        echo "<option value='" . $eval['id'] . "'>" . $eval['nombre'] . "</option>";
                                                    }
                                                }
                                                ?>
                                            </select>
                                        </div>
                                    </div>
                                    <div class="col-md-4">
                                        <div class="mb-3">
                                            <label for="evaluador2" class="form-label">Evaluador 2</label>
                                            <select class="form-select" id="evaluador2" name="evaluador2">
                                                <option value="">Seleccione...</option>
                                                <?php
                                                $evaluadores = mysqli_query($conn, "SELECT id, nombre FROM tusuario WHERE tipousuario = 'E'");
                                                if ($evaluadores) {
                                                    while ($eval = mysqli_fetch_assoc($evaluadores)) {
                                                        echo "<option value='" . $eval['id'] . "'>" . $eval['nombre'] . "</option>";
                                                    }
                                                }
                                                ?>
                                            </select>
                                        </div>
                                    </div>
                                    <div class="col-md-4">
                                        <div class="mb-3">
                                            <label for="evaluador3" class="form-label">Evaluador 3</label>
                                            <select class="form-select" id="evaluador3" name="evaluador3">
                                                <option value="">Seleccione...</option>
                                                <?php
                                                $evaluadores = mysqli_query($conn, "SELECT id, nombre FROM tusuario WHERE tipousuario = 'E'");
                                                if ($evaluadores) {
                                                    while ($eval = mysqli_fetch_assoc($evaluadores)) {
                                                        echo "<option value='" . $eval['id'] . "'>" . $eval['nombre'] . "</option>";
                                                    }
                                                }
                                                ?>
                                            </select>
                                        </div>
                                    </div>
                                </div>
                                
                                <div class="row">
                                    <div class="col-md-4">
                                        <div class="card mb-3">
                                            <div class="card-header bg-light">
                                                <strong>Evaluación 1</strong>
                                            </div>
                                            <div class="card-body">
                                                <?php for ($i = 1; $i <= 6; $i++): ?>
                                                <div class="mb-3">
                                                    <label for="calificacion1_<?php echo $i; ?>" class="form-label">Criterio <?php echo $i; ?></label>
                                                    <input type="number" class="form-control" id="calificacion1_<?php echo $i; ?>" name="calificacion1_<?php echo $i; ?>" min="0" max="10" step="0.1">
                                                </div>
                                                <?php endfor; ?>
                                                <div class="mb-3">
                                                    <label for="calificacion1_fecha" class="form-label">Fecha de evaluación</label>
                                                    <input type="date" class="form-control" id="calificacion1_fecha" name="calificacion1_fecha">
                                                </div>
                                                <div class="mb-3">
                                                    <label for="cod_tipo_presentacion_recomendado1" class="form-label">Tipo de presentación recomendado</label>
                                                    <select class="form-select" id="cod_tipo_presentacion_recomendado1" name="cod_tipo_presentacion_recomendado1">
                                                        <option value="">Seleccione...</option>
                                                        <?php
                                                        $presentaciones = mysqli_query($conn, "SELECT id, descripcion_esp FROM ttipo_presentacion");
                                                        if ($presentaciones) {
                                                            while ($pres = mysqli_fetch_assoc($presentaciones)) {
                                                                echo "<option value='" . $pres['id'] . "'>" . $pres['descripcion_esp'] . "</option>";
                                                            }
                                                        }
                                                        ?>
                                                    </select>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    
                                    <div class="col-md-4">
                                        <div class="card mb-3">
                                            <div class="card-header bg-light">
                                                <strong>Evaluación 2</strong>
                                            </div>
                                            <div class="card-body">
                                                <?php for ($i = 1; $i <= 6; $i++): ?>
                                                <div class="mb-3">
                                                    <label for="calificacion2_<?php echo $i; ?>" class="form-label">Criterio <?php echo $i; ?></label>
                                                    <input type="number" class="form-control" id="calificacion2_<?php echo $i; ?>" name="calificacion2_<?php echo $i; ?>" min="0" max="10" step="0.1">
                                                </div>
                                                <?php endfor; ?>
                                                <div class="mb-3">
                                                    <label for="calificacion2_fecha" class="form-label">Fecha de evaluación</label>
                                                    <input type="date" class="form-control" id="calificacion2_fecha" name="calificacion2_fecha">
                                                </div>
                                                <div class="mb-3">
                                                    <label for="cod_tipo_presentacion_recomendado2" class="form-label">Tipo de presentación recomendado</label>
                                                    <select class="form-select" id="cod_tipo_presentacion_recomendado2" name="cod_tipo_presentacion_recomendado2">
                                                        <option value="">Seleccione...</option>
                                                        <?php
                                                        $presentaciones = mysqli_query($conn, "SELECT id, descripcion_esp FROM ttipo_presentacion");
                                                        if ($presentaciones) {
                                                            while ($pres = mysqli_fetch_assoc($presentaciones)) {
                                                                echo "<option value='" . $pres['id'] . "'>" . $pres['descripcion_esp'] . "</option>";
                                                            }
                                                        }
                                                        ?>
                                                    </select>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    
                                    <div class="col-md-4">
                                        <div class="card mb-3">
                                            <div class="card-header bg-light">
                                                <strong>Evaluación 3</strong>
                                            </div>
                                            <div class="card-body">
                                                <?php for ($i = 1; $i <= 6; $i++): ?>
                                                <div class="mb-3">
                                                    <label for="calificacion3_<?php echo $i; ?>" class="form-label">Criterio <?php echo $i; ?></label>
                                                    <input type="number" class="form-control" id="calificacion3_<?php echo $i; ?>" name="calificacion3_<?php echo $i; ?>" min="0" max="10" step="0.1">
                                                </div>
                                                <?php endfor; ?>
                                                <div class="mb-3">
                                                    <label for="calificacion3_fecha" class="form-label">Fecha de evaluación</label>
                                                    <input type="date" class="form-control" id="calificacion3_fecha" name="calificacion3_fecha">
                                                </div>
                                                <div class="mb-3">
                                                    <label for="cod_tipo_presentacion_recomendado3" class="form-label">Tipo de presentación recomendado</label>
                                                    <select class="form-select" id="cod_tipo_presentacion_recomendado3" name="cod_tipo_presentacion_recomendado3">
                                                        <option value="">Seleccione...</option>
                                                        <?php
                                                        $presentaciones = mysqli_query($conn, "SELECT id, descripcion_esp FROM ttipo_presentacion");
                                                        if ($presentaciones) {
                                                            while ($pres = mysqli_fetch_assoc($presentaciones)) {
                                                                echo "<option value='" . $pres['id'] . "'>" . $pres['descripcion_esp'] . "</option>";
                                                            }
                                                        }
                                                        ?>
                                                    </select>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                
                                <div class="row">
                                    <div class="col-md-6">
                                        <div class="mb-3">
                                            <label for="calificacion_promedio" class="form-label">Calificación Promedio</label>
                                            <input type="number" class="form-control" id="calificacion_promedio" name="calificacion_promedio" min="0" max="10" step="0.01" readonly>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="mb-3">
                                            <label for="cod_tipo_presentacion_aprobado" class="form-label">Tipo de presentación aprobado</label>
                                            <select class="form-select" id="cod_tipo_presentacion_aprobado" name="cod_tipo_presentacion_aprobado">
                                                <option value="">Seleccione...</option>
                                                <?php
                                                $presentaciones = mysqli_query($conn, "SELECT id, descripcion_esp FROM ttipo_presentacion");
                                                if ($presentaciones) {
                                                    while ($pres = mysqli_fetch_assoc($presentaciones)) {
                                                        echo "<option value='" . $pres['id'] . "'>" . $pres['descripcion_esp'] . "</option>";
                                                    }
                                                }
                                                ?>
                                            </select>
                                        </div>
                                    </div>
                                </div>
                                
                                <div class="row">
                                    <div class="col-md-12">
                                        <div class="form-check form-switch mb-3">
                                            <input class="form-check-input" type="checkbox" id="aprobado" name="aprobado" value="1">
                                            <label class="form-check-label" for="aprobado">Trabajo Aprobado</label>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                        <?php else: ?>
                        <!-- Standard form for other tables -->
                        <?php
                        foreach ($columns as $column) {
                            $field = $column['Field'];
                            $type = $column['Type'];
                            $isAutoIncrement = ($column['Extra'] == 'auto_increment');
                            
                            // Skip autoincrement field for new records, but include it as hidden for updates
                            if ($field == 'id') {
                                echo "<input type='hidden' name='id' id='id'>";
                                continue;
                            }
                            
                            // Determine input type based on field type
                            $inputType = "text";
                            if (strpos($type, 'int') !== false) {
                                $inputType = "number";
                            }
                            
                            echo "<div class='mb-3'>";
                            echo "<label for='$field' class='form-label'>" . ucfirst(str_replace('_', ' ', $field)) . "</label>";
                            echo "<input type='$inputType' class='form-control' id='$field' name='$field' required>";
                            echo "</div>";
                        }
                        ?>
                        <?php endif; ?>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancelar</button>
                        <button type="submit" class="btn btn-primary">Guardar</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <!-- View Modal for ttrabajo -->
    <div class="modal fade" id="viewModal" tabindex="-1" aria-labelledby="viewModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="viewModalLabel">
                        <i class="fas fa-file-alt me-1"></i><span>Detalles del Trabajo</span>
                    </h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div id="trabajoDetails">
                        <div class="row">
                            <div class="col-md-6">
                                <p><strong>Código:</strong> <span id="view_codigo"></span></p>
                                <p><strong>Título:</strong> <span id="view_titulo"></span></p>
                                <p><strong>Fecha:</strong> <span id="view_fecha"></span></p>
                            </div>
                            <div class="col-md-6">
                                <p><strong>Estado:</strong> <span id="view_estado"></span></p>
                                <p><strong>Calificación:</strong> <span id="view_calificacion"></span></p>
                                <p><strong>Aprobado:</strong> <span id="view_aprobado"></span></p>
                            </div>
                        </div>
                        
                        <h6 class="mt-4 border-bottom pb-2">Resumen</h6>
                        <div class="row">
                            <div class="col-md-12">
                                <p><strong>Introducción:</strong> <span id="view_introduccion"></span></p>
                                <p><strong>Materiales:</strong> <span id="view_materiales"></span></p>
                                <p><strong>Resultados:</strong> <span id="view_resultados"></span></p>
                                <p><strong>Conclusiones:</strong> <span id="view_conclusiones"></span></p>
                            </div>
                        </div>
                        
                        <h6 class="mt-4 border-bottom pb-2">Autores</h6>
                        <div id="autoresView">
                            <!-- Will be filled dynamically -->
                        </div>
                        
                        <h6 class="mt-4 border-bottom pb-2">Evaluaciones</h6>
                        <div class="row" id="evaluacionesView">
                            <!-- Will be filled dynamically -->
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cerrar</button>
                    <button type="button" class="btn btn-primary" onclick="editRecordFromView()">Editar</button>
                </div>
            </div>
        </div>
    </div>

    <!-- Delete Confirmation Modal -->
    <div class="modal fade" id="deleteModal" tabindex="-1" aria-labelledby="deleteModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="deleteModalLabel">
                        <i class="fas fa-trash-alt me-1"></i>Confirmar Eliminación
                    </h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    ¿Está seguro que desea eliminar este registro? Esta acción no se puede deshacer.
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancelar</button>
                    <form method="post" id="deleteForm">
                        <input type="hidden" name="operation" value="delete">
                        <input type="hidden" name="id" id="deleteId">
                        <button type="submit" class="btn btn-danger">Eliminar</button>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <!-- Bootstrap and other JS libraries -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>
    
    <!-- Custom JavaScript -->
    <script src="crud-functions.js"></script>
</body>
</html>