<?php
if (!isset($_SESSION['usu_id'])) {
    header("Location: login.php");
    exit();
}

$bd = new clsbdd();
?>

<div class="row mb-4 align-items-center">
    <div class="col">
        <h2 class="h3 text-dark fw-bold mb-0">
            <i class="fas fa-trophy text-warning me-2"></i>Historial de Competencias y Festivales
        </h2>
        <p class="text-muted small mb-0">Registro integral de eventos, convocatorias de la delegación y control técnico de calificaciones.</p>
    </div>
    <div class="col-auto">
        <button class="btn btn-warning text-dark rounded-pill shadow-sm fw-bold" data-bs-toggle="modal" data-bs-target="#modalCompetencia" id="btnNuevaCompetencia">
            <i class="fas fa-plus me-2"></i>Nueva Competencia
        </button>
    </div>
</div>

<div class="card border-0 shadow-sm rounded-4 mb-4">
    <div class="card-body p-4">
        <div class="table-responsive">
            <table class="table table-hover align-middle mb-0" id="tablaCompetencias">
                <thead class="table-light text-muted small fw-bold text-uppercase">
                    <tr>
                        <th>Evento / Competencia</th>
                        <th style="width: 12%">Fecha</th>
                        <th>Lugar / Sede</th>
                        <th>Organizador</th>
                        <th style="width: 12%">Inscripción</th>
                        <th>Resultado / Puesto</th>
                        <th style="width: 12%">Estado</th>
                        <th class="text-center" style="width: 10%">Acciones</th>
                    </tr>
                </thead>
                <tbody class="small">
                    <?php
                    $sql = "SELECT * FROM bas_competencias ORDER BY com_fecha DESC";
                    $res = $bd->ejecutar($sql);

                    if ($res && $res->num_rows > 0) {
                        while ($row = $res->fetch_assoc()) {
                            switch ($row['com_estado']) {
                                case 'PLANIFICADA':
                                    $badge = '<span class="badge bg-info-subtle text-info border border-info-subtle rounded-pill px-3 py-1">Planificada</span>';
                                    break;
                                case 'FINALIZADA':
                                    $badge = '<span class="badge bg-success-subtle text-success border border-success-subtle rounded-pill px-3 py-1">Finalizada</span>';
                                    break;
                                case 'CANCELADA':
                                    $badge = '<span class="badge bg-danger-subtle text-danger border border-danger-subtle rounded-pill px-3 py-1">Cancelada</span>';
                                    break;
                                default:
                                    $badge = '<span class="badge bg-secondary-subtle text-secondary border border-secondary-subtle rounded-pill px-3 py-1">'.$row['com_estado'].'</span>';
                            }

                            $resultado_txt = !empty($row['com_puesto_logrado']) 
                                ? '<span class="fw-bold text-dark"><i class="fas fa-medal text-warning me-1"></i>'.$row['com_puesto_logrado'].'</span>' 
                                : '<span class="text-muted italic small">Sin registrar</span>';
                            
                            if(!empty($row['com_puntaje'])) {
                                $resultado_txt .= ' <span class="text-muted">('.$row['com_puntaje'].' pts)</span>';
                            }
                            
                            echo "<tr>";
                            echo "<td><div class='fw-bold text-dark'>" . htmlspecialchars($row['com_nombre']) . "</div></td>";
                            echo "<td>" . date('d/m/Y', strtotime($row['com_fecha'])) . "</td>";
                            echo "<td>" . htmlspecialchars($row['com_lugar'] ?? '-') . "</td>";
                            echo "<td>" . htmlspecialchars($row['com_organizador'] ?? '-') . "</td>";
                            echo "<td class='fw-bold text-success'>$" . number_format($row['com_costo_inscripcion'], 2) . "</td>";
                            echo "<td>" . $resultado_txt . "</td>";
                            echo "<td>" . $badge . "</td>";
                            echo "<td class='text-center'>
                                    <button class='btn btn-sm btn-outline-warning rounded-pill btn-editar-comp' 
                                            data-id='".$row['com_id']."' 
                                            data-nombre='".htmlspecialchars($row['com_nombre'], ENT_QUOTES)."'
                                            data-fecha='".$row['com_fecha']."'
                                            data-lugar='".htmlspecialchars($row['com_lugar'] ?? '', ENT_QUOTES)."'
                                            data-organizador='".htmlspecialchars($row['com_organizador'] ?? '', ENT_QUOTES)."'
                                            data-costo='".$row['com_costo_inscripcion']."'
                                            data-estado='".$row['com_estado']."'
                                            data-puesto='".htmlspecialchars($row['com_puesto_logrado'] ?? '', ENT_QUOTES)."'
                                            data-puntaje='".htmlspecialchars($row['com_puntaje'] ?? '')."'
                                            data-obs='".htmlspecialchars($row['com_observaciones_jueces'] ?? '', ENT_QUOTES)."'>
                                        <i class='fas fa-edit'></i>
                                    </button>
                                  </td>";
                            echo "</tr>";
                        }
                    } else {
                        echo "<tr><td colspan='8' class='text-center text-muted py-4'>No hay competencias registradas en el sistema.</td></tr>";
                    }
                    ?>
                </tbody>
            </table>
        </div>
    </div>
</div>

<div class="modal fade" id="modalCompetencia" data-bs-backdrop="static" tabindex="-1" aria-labelledby="modalCompetenciaLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg modal-dialog-centered">
        <div class="modal-content border-0 shadow rounded-4">
            <div class="modal-header bg-dark text-white border-0 py-3 rounded-top-4">
                <h5 class="modal-title fw-bold small text-uppercase" id="modalCompetenciaLabel">
                    <i class="fas fa-trophy me-2 text-warning"></i>Expediente de Competencia
                </h5>
                <button type="button" class="btn-close btn-close-white small" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            
            <ul class="nav nav-tabs bg-light px-4 pt-2 border-bottom-0" id="compTabs" role="tablist">
                <li class="nav-item">
                    <button class="nav-link active small fw-bold text-uppercase py-2" id="evento-tab" data-bs-toggle="tab" data-bs-target="#tab-evento" type="button" role="tab">1. Datos del Evento</button>
                </li>
                <li class="nav-item">
                    <button class="nav-link small fw-bold text-uppercase py-2" id="convocatoria-tab" data-bs-toggle="tab" data-bs-target="#tab-convocatoria" type="button" role="tab">2. Convocatoria / Delegación</button>
                </li>
                <li class="nav-item">
                    <button class="nav-link small fw-bold text-uppercase py-2" id="resultados-tab" data-bs-toggle="tab" data-bs-target="#tab-resultados" type="button" role="tab">3. Resultados y Jueces</button>
                </li>
            </ul>

            <form id="formCompetencia" method="POST" action="controlador/CompetenciaController.php?action=guardar">
                <div class="modal-body p-4 pt-3 tab-content">
                    <input type="hidden" name="com_id" id="com_id">
                    
                    <div class="tab-pane fade show active" id="tab-evento" role="tabpanel">
                        <div class="row g-3">
                            <div class="col-12">
                                <label for="com_nombre" class="form-label text-muted small fw-bold">Nombre de la Competencia / Festival *</label>
                                <input type="text" class="form-control bg-light text-uppercase" name="com_nombre" id="com_nombre" required>
                            </div>
                            <div class="col-md-6">
                                <label for="com_fecha" class="form-label text-muted small fw-bold">Fecha del Evento *</label>
                                <input type="date" class="form-control bg-light" name="com_fecha" id="com_fecha" value="<?php echo date('Y-m-d'); ?>" required>
                            </div>
                            <div class="col-md-6">
                                <label for="com_costo_inscripcion" class="form-label text-muted small fw-bold">Costo de Inscripción por Alumna ($) *</label>
                                <input type="number" step="0.01" min="0" class="form-control bg-light fw-bold text-success" name="com_costo_inscripcion" id="com_costo_inscripcion" required>
                            </div>
                            <div class="col-md-6">
                                <label for="com_lugar" class="form-label text-muted small fw-bold">Lugar / Sede</label>
                                <input type="text" class="form-control bg-light text-uppercase" name="com_lugar" id="com_lugar" placeholder="Ej: Coliseo Principal">
                            </div>
                            <div class="col-md-6">
                                <label for="com_organizador" class="form-label text-muted small fw-bold">Institución Organizadora</label>
                                <input type="text" class="form-control bg-light text-uppercase" name="com_organizador" id="com_organizador" placeholder="Ej: Federación Ecuatoriana de Baño y Danza">
                            </div>
                            <div class="col-12">
                                <label for="com_estado" class="form-label text-muted small fw-bold">Estado del Calendario</label>
                                <select class="form-select bg-light fw-bold" name="com_estado" id="com_estado">
                                    <option value="PLANIFICADA" class="text-info">PLANIFICADA</option>
                                    <option value="FINALIZADA" class="text-success">FINALIZADA</option>
                                    <option value="CANCELADA" class="text-danger">CANCELADA</option>
                                </select>
                            </div>
                        </div>
                    </div>

                    <div class="tab-pane fade" id="tab-convocatoria" role="tabpanel">
                        <div class="alert alert-info border-0 rounded-3 small mb-3">
                            <i class="fas fa-info-circle me-2"></i>Define qué grupos van a representar a la academia. (En fases posteriores habilitaremos las casillas para vincular las cuentas por cobrar masivas).
                        </div>
                        <div class="row g-3">
                            <div class="col-12">
                                <label class="form-label text-muted small fw-bold mb-2">Categorías Técnicas Convocadas</label>
                                <div class="p-3 bg-light rounded-3 border">
                                    <?php
                                    $sql_cla = "SELECT * FROM bas_clasificaciones WHERE cla_estado = 1 ORDER BY cla_categoria ASC";
                                    $res_cla = $bd->ejecutar($sql_cla);
                                    if ($res_cla && $res_cla->num_rows > 0) {
                                        while($c = $res_cla->fetch_assoc()) {
                                            echo "<div class='form-check form-check-inline me-4 mb-2'>";
                                            echo "<input class='form-check-input' type='checkbox' name='categorias_convocadas[]' value='".$c['cla_id']."' id='cla_chk_".$c['cla_id']."'>";
                                            echo "<label class='form-check-label small fw-bold text-dark' for='cla_chk_".$c['cla_id']."'>".htmlspecialchars($c['cla_categoria']." - ".$c['cla_nivel'])."</label>";
                                            echo "</div>";
                                        }
                                    }
                                    ?>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="tab-pane fade" id="tab-resultados" role="tabpanel">
                        <div class="row g-3">
                            <div class="col-md-6">
                                <label for="com_puesto_logrado" class="form-label text-muted small fw-bold">Puesto / Mención Obtenida</label>
                                <input type="text" class="form-control bg-light text-uppercase fw-bold text-dark" name="com_puesto_logrado" id="com_puesto_logrado" placeholder="Ej: 1ER LUGAR, MENCIÓN DE HONOR, ETC.">
                            </div>
                            <div class="col-md-6">
                                <label for="com_puntaje" class="form-label text-muted small fw-bold">Calificación / Puntaje Final</label>
                                <input type="number" step="0.01" min="0" max="100" class="form-control bg-light" name="com_puntaje" id="com_puntaje" placeholder="Ej: 95.50">
                            </div>
                            <div class="col-12">
                                <label for="com_observaciones_jueces" class="form-label text-muted small fw-bold">Observaciones de los Jueces y Feedback Técnico</label>
                                <textarea class="form-control bg-light" name="com_observaciones_jueces" id="com_observaciones_jueces" rows="4" placeholder="Registrar comentarios del jurado: Limpieza en giros, coordinación de bastones, sincronización grupal..."></textarea>
                            </div>
                        </div>
                    </div>

                </div>
                <div class="modal-footer border-0 p-4 pt-0">
                    <button type="button" class="btn btn-light rounded-pill px-4 btn-sm fw-bold text-muted" data-bs-dismiss="modal">Cancelar</button>
                    <button type="submit" class="btn btn-primary rounded-pill px-4 btn-sm fw-bold text-white">Guardar Ficha</button>
                </div>
            </form>
        </div>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    const tabla = document.getElementById('tablaCompetencias');
    if (tabla) {
        tabla.addEventListener('click', function(e) {
            const boton = e.target.closest('.btn-editar-comp');
            if (boton) {
                e.preventDefault();
                
                // Forzar regreso a la pestaña de datos generales del evento
                const firstTab = new bootstrap.Tab(document.getElementById('evento-tab'));
                firstTab.show();

                // Llenado de campos base
                document.getElementById('com_id').value = boton.getAttribute('data-id');
                document.getElementById('com_nombre').value = boton.getAttribute('data-nombre');
                document.getElementById('com_fecha').value = boton.getAttribute('data-fecha');
                document.getElementById('com_lugar').value = boton.getAttribute('data-lugar');
                document.getElementById('com_organizador').value = boton.getAttribute('data-organizador');
                document.getElementById('com_costo_inscripcion').value = boton.getAttribute('data-costo');
                document.getElementById('com_estado').value = boton.getAttribute('data-estado');
                
                // Llenado de campos de resultados técnicos
                document.getElementById('com_puesto_logrado').value = boton.getAttribute('data-puesto');
                document.getElementById('com_puntaje').value = boton.getAttribute('data-puntaje');
                document.getElementById('com_observaciones_jueces').value = boton.getAttribute('data-obs');

                const elModal = document.getElementById('modalCompetencia');
                const m = bootstrap.Modal.getInstance(elModal) || new bootstrap.Modal(elModal);
                m.show();
            }
        });
    }

    const btnNueva = document.getElementById('btnNuevaCompetencia');
    if (btnNueva) {
        btnNueva.addEventListener('click', function() {
            document.getElementById('formCompetencia').reset();
            document.getElementById('com_id').value = '';
            const firstTab = new bootstrap.Tab(document.getElementById('evento-tab'));
            firstTab.show();
        });
    }
});
</script>