<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <title>Reportes</title>
    <style>
    /* Estilos de las tarjetas (Cards) */
    .card {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        border: 1px solid #d1d1d1;
        padding: 15px;
        margin-bottom: 20px;
        border-radius: 8px;
        box-shadow: 0 4px 8px rgba(0,0,0,0.05);
        background-color: #fff;
        border-left: 5px solid #005e14; /* Decoración verde a la izquierda */
        transition: transform 0.2s;
    }
    .card:hover {
        transform: translateY(-2px);
        box-shadow: 0 6px 12px rgba(0,0,0,0.1);
    }

    .info-row {
        display: flex;
        flex-wrap: wrap;
        margin-bottom: 8px;
        padding: 8px;
        border-bottom: 1px solid #f0f0f0;
        gap: 10px;
        font-size: 0.95rem;
    }
    
    .info-row:last-of-type {
        border-bottom: none;
    }

    .info-label { width: 130px; font-weight: bold; color: #005e14; }
    .info-value { flex: 1; color: #333; }

    .acciones {
        display: flex;
        justify-content: flex-end; /* Botones a la derecha */
        gap: 15px;
        margin-top: 15px;
        padding-top: 10px;
        border-top: 1px solid #eee;
    }

    .acciones a img {
        height: 24px;
        opacity: 0.8;
        transition: opacity 0.2s;
    }
    .acciones a:hover img { opacity: 1; transform: scale(1.1); }

    @media (max-width: 600px) {
        .info-row { flex-direction: column; }
        .info-label { width: 100%; margin-bottom: 2px; }
        .acciones { justify-content: center; }
    }
    </style>
</head>
<body>

<?php
// 1. CONEXIÓN
$conexion = mysqli_connect('localhost', 'root', 'BpjysVrFK6LJ5XyW', 'micpu');
$conexion->set_charset("utf8");

$meses = [
    1 => 'enero', 2 => 'febrero', 3 => 'marzo', 4 => 'abril',
    5 => 'mayo', 6 => 'junio', 7 => 'julio', 8 => 'agosto',
    9 => 'septiembre', 10 => 'octubre', 11 => 'noviembre', 12 => 'diciembre'
];

// 2. RECIBIR VARIABLES (Sanitizadas)
$anio_tab = $_POST['anio'] ?? date("Y"); // Año de la pestaña

$nombre        = $_POST['nombre'] ?? '';
$apellido      = $_POST['apellido'] ?? '';
$area          = $_POST['area'] ?? '';
$estado        = $_POST['estado'] ?? '';
$clasificacion = $_POST['clasificacion'] ?? '';
$fecha_inicio  = $_POST['fecha_inicio'] ?? '';
$fecha_fin     = $_POST['fecha_fin'] ?? '';

$condiciones = [];

// Filtros de texto
if ($nombre != '') $condiciones[] = "Nombre LIKE '%" . mysqli_real_escape_string($conexion, $nombre) . "%'";
if ($apellido != '') $condiciones[] = "Apellidos LIKE '%" . mysqli_real_escape_string($conexion, $apellido) . "%'";
if ($area != '') $condiciones[] = "Area = '" . mysqli_escape_string($conexion, $area) . "'";
if ($estado != '') $condiciones[] = "Estatus = '" . mysqli_real_escape_string($conexion, $estado) . "'";
if ($clasificacion != '') $condiciones[] = "Clasificacion = '" . mysqli_real_escape_string($conexion, $clasificacion) . "'";

// 3. LÓGICA DE FECHAS vs AÑO DE PESTAÑA
if ($fecha_inicio != '' || $fecha_fin != '') {
    // Si el usuario eligió fechas manuales, ignoramos el año de la pestaña
    if ($fecha_inicio != '' && $fecha_fin != '') {
        $condiciones[] = "Fecha BETWEEN '$fecha_inicio 00:00:00' AND '$fecha_fin 23:59:59'";
    } elseif ($fecha_inicio != '') {
        $condiciones[] = "Fecha >= '$fecha_inicio 00:00:00'";
    } elseif ($fecha_fin != '') {
        $condiciones[] = "Fecha <= '$fecha_fin 23:59:59'";
    }
} else {
    // Si NO hay fechas manuales, usamos el año de la pestaña
    if ($anio_tab != '') {
        $condiciones[] = "YEAR(Fecha) = '" . mysqli_real_escape_string($conexion, $anio_tab) . "'";
    }
}

$where = count($condiciones) > 0 ? 'WHERE ' . implode(' AND ', $condiciones) : '';

// Consulta SQL
$sql = "SELECT * FROM mcorrect $where ORDER BY Fecha DESC";
$result = mysqli_query($conexion, $sql);

// 4. GENERAR HTML
if (mysqli_num_rows($result) > 0) {
    while ($r = mysqli_fetch_assoc($result)) {
        
        // Formato de Fecha
        $timestamp = strtotime($r['Fecha']);
        $dia = date('j', $timestamp);
        $mes = $meses[(int)date('n', $timestamp)];
        $anio = date('Y', $timestamp);
        $fecha_formateada = "$dia de $mes de $anio";

        // --- FORMATO DE FOLIO: 001-2026 ---
        // Si existe folio_anual úsalo, si no usa Id
        $numero_folio = ($r['folio_anual'] > 0) ? $r['folio_anual'] : $r['Id'];
        
        // str_pad agrega ceros a la izquierda (ej. 1 -> 001)
        $folio_visual = str_pad($numero_folio, 3, "0", STR_PAD_LEFT) . "-" . $anio;
        // ----------------------------------

        echo "<div class='card'>";
        
        // Cabecera de la tarjeta con Folio
        echo "<div style='display:flex; justify-content:space-between; align-items:center; margin-bottom:10px;'>";
        echo "<h2 style='margin:0; font-size:1.1rem; color:#333;'>Folio: <span style='color:#d9534f;'>$folio_visual</span></h2>";
        // Badge de Estatus
        $color_estatus = ($r['Estatus'] == 'Completado') ? '#28a745' : (($r['Estatus'] == 'En proceso') ? '#ffc107' : '#dc3545');
        echo "<span style='background:$color_estatus; color:#fff; padding:3px 8px; border-radius:4px; font-size:0.8rem;'>{$r['Estatus']}</span>";
        echo "</div>";

        echo "<div style='font-weight:bold; font-size:1.1rem; margin-bottom:10px;'>{$r['Nombre']} {$r['Apellidos']}</div>";

        echo "<div class='info-row'>
                <div class='info-label'>Área:</div><div class='info-value'>{$r['Area']}</div>
              </div>";

        echo "<div class='info-row'>
                <div class='info-label'>Equipo:</div><div class='info-value'>{$r['Descripcion']} (Serie: {$r['NoSerie']})</div>
              </div>";

        echo "<div class='info-row'>
                <div class='info-label'>Falla:</div><div class='info-value'>{$r['Necesidad']}</div>
              </div>";
              
        echo "<div class='info-row'>
                <div class='info-label'>Diagnóstico:</div><div class='info-value'>{$r['Diagnostico']}</div>
              </div>";

        echo "<div class='info-row'>
                <div class='info-label'>Fecha:</div><div class='info-value'>$fecha_formateada</div>
              </div>";

        // Botones de acción
        echo "<div class='acciones'>";
        echo "<a href='reporte.php?Id={$r['Id']}' target='_blank' title='Imprimir PDF'><img src='IMG/pdf.png' alt='PDF'></a>";
        echo "<a href='editar_hardware.php?" . htmlspecialchars(http_build_query($r)) . "' title='Editar'><img src='IMG/editar.png' alt='Editar'></a>";
        echo "<a href='eliminar_correc.php?Id={$r['Id']}' title='Eliminar' onclick='return confirm(\"¿Estás seguro de eliminar este reporte?\");'><img src='IMG/eliminar.png' alt='Eliminar'></a>";
        echo "</div>";
        
        echo "</div>"; // Fin card
    }
} else {
    // Mensaje cuando no hay resultados
    echo "<div style='grid-column: 1/-1; text-align:center; padding: 40px; background:#fff; border-radius:8px; color:#777;'>
            <h3>No se encontraron reportes.</h3>
            <p>No hay registros para el año <strong>$anio_tab</strong> con los filtros seleccionados.</p>
          </div>";
}
?>

</body>
</html>