<?php
/**
 * Dashboard de Donaciones
 * Archivo: reporte.php
 */
require_once 'includes/config.php';

// Verificar si el PIN ha sido verificado
if (!isset($_SESSION['pin_verificado']) || $_SESSION['pin_verificado'] !== true) {
    header("Location: pin_block.php");
    exit;
}

// Opcional: Verificar que la sesión no sea demasiado antigua (timeout de 2 horas)
$timeout = 2 * 60 * 60; // 2 horas en segundos
if (isset($_SESSION['pin_verificado_tiempo'])) {
    if ((time() - $_SESSION['pin_verificado_tiempo']) > $timeout) {
        // Sesión expirada
        unset($_SESSION['pin_verificado']);
        unset($_SESSION['pin_verificado_tiempo']);
        header("Location: pin_block.php");
        exit;
    }
}

// Agregar botón de cerrar sesión al final de tu reporte.php
if (isset($_GET['cerrar_sesion'])) {
    unset($_SESSION['pin_verificado']);
    unset($_SESSION['pin_verificado_tiempo']);
    header("Location: pin_block.php");
    exit;
}

// ==========================================
// MANEJO DE EXPORTACIÓN A EXCEL - MEJORADO
// ==========================================
if (isset($_GET['exportar']) && $_GET['exportar'] == 'excel') {
    require_once __DIR__ . '/includes/config.php';
    
    $filtro = $_GET['filtro_fecha'] ?? '30dias';
    $fecha_desde = $_GET['fecha_desde'] ?? null;
    $fecha_hasta = $_GET['fecha_hasta'] ?? null;
    
    // Calcular fechas
    if ($fecha_desde && $fecha_hasta) {
        $fecha_inicio = $fecha_desde;
        $fecha_fin = $fecha_hasta;
        $filtro_texto = 'Desde ' . date('d/m/Y', strtotime($fecha_desde)) . ' hasta ' . date('d/m/Y', strtotime($fecha_hasta));
    } else {
        $fechas = calcular_fechas($filtro);
        $fecha_inicio = $fechas['inicio'];
        $fecha_fin = $fechas['fin'];
        $filtros_texto = [
            'hoy' => 'Hoy',
            'ayer' => 'Ayer',
            '7dias' => 'Últimos 7 días',
            '30dias' => 'Últimos 30 días',
            'mes_actual' => 'Mes Actual',
            'mes_pasado' => 'Mes Pasado',
            'todos' => 'Todos'
        ];
        $filtro_texto = $filtros_texto[$filtro] ?? 'Todos';
    }
    
    // Obtener donaciones por día
    $donaciones_dia = obtener_donaciones_por_dia($pdo, $fecha_inicio, $fecha_fin, 365);
    
    // Configurar headers para descarga Excel
    header('Content-Type: application/vnd.ms-excel; charset=UTF-8');
    header('Content-Disposition: attachment; filename="donaciones_detalladas_' . date('Y-m-d_H-i-s') . '.xls"');
    header('Pragma: no-cache');
    header('Expires: 0');
    
    // Comenzar tabla HTML para Excel
    echo "\xEF\xBB\xBF"; // BOM para UTF-8
    echo '<html xmlns:x="urn:schemas-microsoft-com:office:excel">';
    echo '<head>';
    echo '<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">';
    echo '<style>
        table { border-collapse: collapse; }
        th { background-color: #2c3e50; color: white; font-weight: bold; border: 1px solid #000; padding: 8px; text-align: center; }
        td { border: 1px solid #000; padding: 5px; }
        .number { mso-number-format:"#,##0.00"; }
        .total { background-color: #f0f0f0; font-weight: bold; }
        .fecha-header { background-color: #3498db; color: white; font-weight: bold; font-size: 12pt; }
        .subtotal { background-color: #e8f4f8; font-weight: bold; }
    </style>';
    echo '</head>';
    echo '<body>';
    echo '<h2>Reporte Detallado de Donaciones</h2>';
    echo '<p><strong>Filtro:</strong> ' . $filtro_texto . '</p>';
    echo '<p><strong>Fecha de generación:</strong> ' . date('d/m/Y H:i:s') . '</p>';
    echo '<br>';
    
    $total_general_donaciones = 0;
    $total_general_recaudado = 0;
    $total_general_donantes = 0;
    
    // Iterar por cada día
    foreach ($donaciones_dia as $dia) {
        $fecha = $dia['fecha'];
        
        // Obtener detalle de donantes de este día - SOLO COMPLETADAS
        $sql = "SELECT d.id, d.monto, d.fecha_donacion, d.estado,
                dn.nombre_completo as donante,
                i.nombre as item
                FROM donaciones d
                LEFT JOIN donantes dn ON d.donante_id = dn.id
                LEFT JOIN items i ON d.item_id = i.id
                WHERE DATE(d.fecha_donacion) = :fecha
                AND d.estado = 'completada'
                ORDER BY d.fecha_donacion ASC";
        
        $stmt = $pdo->prepare($sql);
        $stmt->bindParam(':fecha', $fecha);
        $stmt->execute();
        $donantes_del_dia = $stmt->fetchAll(PDO::FETCH_ASSOC);
        
        // Encabezado de fecha
        echo '<br><table border="1" style="margin-bottom: 20px;">';
        echo '<tr class="fecha-header">';
        echo '<td colspan="5" style="text-align: center; padding: 10px;">';
        echo '<strong>📅 ' . date('d/m/Y', strtotime($fecha)) . '</strong>';
        echo '</td>';
        echo '</tr>';
        
        // Cabecera de tabla
        echo '<thead><tr>';
        echo '<th>Hora</th><th>Donante</th><th>Item</th><th>Monto (S/)</th><th>Estado</th>';
        echo '</tr></thead><tbody>';
        
        $subtotal_dia = 0;
        
        // Donantes del día (solo completadas)
        foreach ($donantes_del_dia as $donante) {
            echo '<tr>';
            echo '<td>' . date('H:i', strtotime($donante['fecha_donacion'])) . '</td>';
            echo '<td>' . htmlspecialchars($donante['donante']) . '</td>';
            echo '<td>' . htmlspecialchars($donante['item']) . '</td>';
            echo '<td class="number" style="text-align: right;">' . number_format($donante['monto'], 2) . '</td>';
            echo '<td style="text-align: center;">Completada</td>';
            echo '</tr>';
            
            $subtotal_dia += $donante['monto'];
        }
        
        // Subtotal del día
        echo '<tr class="subtotal">';
        echo '<td colspan="3" style="text-align: right;"><strong>SUBTOTAL DEL DÍA:</strong></td>';
        echo '<td class="number" style="text-align: right;"><strong>' . number_format($subtotal_dia, 2) . '</strong></td>';
        echo '<td style="text-align: center;"><strong>' . count($donantes_del_dia) . ' donantes</strong></td>';
        echo '</tr>';
        
        echo '</tbody></table>';
        
        // Acumular totales generales
        $total_general_donaciones += count($donantes_del_dia);
        $total_general_recaudado += $subtotal_dia;
        $total_general_donantes += $dia['donantes_unicos'];
    }
    
    // TOTALES GENERALES
    echo '<br><table border="1">';
    echo '<tr class="total">';
    echo '<td colspan="2" style="text-align: right; padding: 10px;"><strong>TOTAL GENERAL:</strong></td>';
    echo '<td class="number" style="text-align: right; padding: 10px;"><strong>' . number_format($total_general_recaudado, 2) . '</strong></td>';
    echo '<td colspan="2" style="text-align: center; padding: 10px;"><strong>' . $total_general_donaciones . ' donaciones</strong></td>';
    echo '</tr>';
    echo '</table>';
    
    echo '</body></html>';
    exit;
}

// ==========================================
// INCLUIR CONFIG.PHP
// ==========================================
require_once __DIR__ . '/includes/config.php';

if (!isset($pdo)) {
    die("ERROR: No se pudo conectar a la base de datos. Verifica includes/config.php");
}

// ==========================================
// FUNCIONES
// ==========================================

function calcular_fechas($filtro) {
    $fecha_inicio = null;
    $fecha_fin = null;
    
    switch ($filtro) {
        case 'hoy':
            $fecha_inicio = date('Y-m-d');
            $fecha_fin = date('Y-m-d');
            break;
        case 'ayer':
            $fecha_inicio = date('Y-m-d', strtotime('-1 day'));
            $fecha_fin = date('Y-m-d', strtotime('-1 day'));
            break;
        case '7dias':
            $fecha_inicio = date('Y-m-d', strtotime('-7 days'));
            $fecha_fin = date('Y-m-d');
            break;
        case '30dias':
            $fecha_inicio = date('Y-m-d', strtotime('-30 days'));
            $fecha_fin = date('Y-m-d');
            break;
        case 'mes_actual':
            $fecha_inicio = date('Y-m-01');
            $fecha_fin = date('Y-m-d');
            break;
        case 'mes_pasado':
            $fecha_inicio = date('Y-m-01', strtotime('-1 month'));
            $fecha_fin = date('Y-m-t', strtotime('-1 month'));
            break;
        default:
            break;
    }
    
    return ['inicio' => $fecha_inicio, 'fin' => $fecha_fin];
}

function formato_moneda($monto) {
    return 'S/ ' . number_format((float)$monto, 2, '.', ',');
}

function formato_fecha($fecha) {
    if (empty($fecha)) return '-';
    return date('d/m/Y', strtotime($fecha));
}

function obtener_resumen($pdo, $fecha_inicio = null, $fecha_fin = null) {
    $sql = "SELECT 
        COUNT(*) as total_donaciones,
        SUM(CASE WHEN estado = 'completada' THEN 1 ELSE 0 END) as completadas,
        SUM(CASE WHEN estado = 'pendiente' THEN 1 ELSE 0 END) as pendientes,
        SUM(CASE WHEN estado = 'fallida' THEN 1 ELSE 0 END) as fallidas,
        COALESCE(SUM(CASE WHEN estado = 'completada' THEN monto ELSE 0 END), 0) as total_recaudado,
        COALESCE(SUM(CASE WHEN estado = 'pendiente' THEN monto ELSE 0 END), 0) as total_pendiente,
        COALESCE(AVG(CASE WHEN estado = 'completada' THEN monto ELSE NULL END), 0) as promedio_donacion,
        COUNT(DISTINCT donante_id) as donantes_unicos
    FROM donaciones";
    
    if ($fecha_inicio && $fecha_fin) {
        $sql .= " WHERE DATE(fecha_donacion) BETWEEN :fecha_inicio AND :fecha_fin";
    }
    
    try {
        $stmt = $pdo->prepare($sql);
        if ($fecha_inicio && $fecha_fin) {
            $stmt->bindParam(':fecha_inicio', $fecha_inicio);
            $stmt->bindParam(':fecha_fin', $fecha_fin);
        }
        $stmt->execute();
        return $stmt->fetch();
    } catch (PDOException $e) {
        error_log("Error en obtener_resumen: " . $e->getMessage());
        return ['total_donaciones' => 0, 'completadas' => 0, 'pendientes' => 0, 'fallidas' => 0, 'total_recaudado' => 0, 'total_pendiente' => 0, 'promedio_donacion' => 0, 'donantes_unicos' => 0];
    }
}

function obtener_donaciones_por_estado($pdo, $fecha_inicio = null, $fecha_fin = null) {
    $sql = "SELECT estado, COUNT(*) as cantidad, COALESCE(SUM(monto), 0) as total FROM donaciones";
    if ($fecha_inicio && $fecha_fin) {
        $sql .= " WHERE DATE(fecha_donacion) BETWEEN :fecha_inicio AND :fecha_fin";
    }
    $sql .= " GROUP BY estado ORDER BY cantidad DESC";
    
    try {
        $stmt = $pdo->prepare($sql);
        if ($fecha_inicio && $fecha_fin) {
            $stmt->bindParam(':fecha_inicio', $fecha_inicio);
            $stmt->bindParam(':fecha_fin', $fecha_fin);
        }
        $stmt->execute();
        return $stmt->fetchAll();
    } catch (PDOException $e) {
        error_log("Error en obtener_donaciones_por_estado: " . $e->getMessage());
        return [];
    }
}

function obtener_top_items($pdo, $fecha_inicio = null, $fecha_fin = null, $limite = 8) {
    $sql = "SELECT i.nombre, COUNT(d.id) as cantidad_donaciones, COALESCE(SUM(d.monto), 0) as total_recaudado
            FROM items i
            LEFT JOIN donaciones d ON i.id = d.item_id AND d.estado = 'completada'
            WHERE i.activo = 1";
    
    if ($fecha_inicio && $fecha_fin) {
        $sql .= " AND DATE(d.fecha_donacion) BETWEEN :fecha_inicio AND :fecha_fin";
    }
    
    $sql .= " GROUP BY i.id, i.nombre ORDER BY total_recaudado DESC LIMIT :limite";
    
    try {
        $stmt = $pdo->prepare($sql);
        if ($fecha_inicio && $fecha_fin) {
            $stmt->bindParam(':fecha_inicio', $fecha_inicio);
            $stmt->bindParam(':fecha_fin', $fecha_fin);
        }
        $stmt->bindParam(':limite', $limite, PDO::PARAM_INT);
        $stmt->execute();
        return $stmt->fetchAll();
    } catch (PDOException $e) {
        error_log("Error en obtener_top_items: " . $e->getMessage());
        return [];
    }
}

function obtener_donantes_anonimos($pdo, $fecha_inicio = null, $fecha_fin = null) {
    $sql = "SELECT 
        SUM(CASE WHEN dn.nombre_completo LIKE '%anon%' OR dn.nombre_completo LIKE '%Anon%' OR dn.nombre_completo = 'Anonimo' OR dn.nombre_completo = 'anonimo' THEN 1 ELSE 0 END) as anonimos,
        SUM(CASE WHEN dn.nombre_completo NOT LIKE '%anon%' AND dn.nombre_completo NOT LIKE '%Anon%' AND dn.nombre_completo != 'Anonimo' AND dn.nombre_completo != 'anonimo' THEN 1 ELSE 0 END) as identificados
        FROM donaciones d
        LEFT JOIN donantes dn ON d.donante_id = dn.id
        WHERE d.estado = 'completada'";
    
    if ($fecha_inicio && $fecha_fin) {
        $sql .= " AND DATE(d.fecha_donacion) BETWEEN :fecha_inicio AND :fecha_fin";
    }
    
    try {
        $stmt = $pdo->prepare($sql);
        if ($fecha_inicio && $fecha_fin) {
            $stmt->bindParam(':fecha_inicio', $fecha_inicio);
            $stmt->bindParam(':fecha_fin', $fecha_fin);
        }
        $stmt->execute();
        return $stmt->fetch();
    } catch (PDOException $e) {
        error_log("Error en obtener_donantes_anonimos: " . $e->getMessage());
        return ['anonimos' => 0, 'identificados' => 0];
    }
}

function obtener_historial($pdo, $fecha_inicio = null, $fecha_fin = null, $limite = 10) {
    $sql = "SELECT d.id, dn.nombre_completo, i.nombre as item, d.monto, d.estado, d.fecha_donacion
            FROM donaciones d
            LEFT JOIN donantes dn ON d.donante_id = dn.id
            LEFT JOIN items i ON d.item_id = i.id";
    
    if ($fecha_inicio && $fecha_fin) {
        $sql .= " WHERE DATE(d.fecha_donacion) BETWEEN :fecha_inicio AND :fecha_fin";
    }
    
    $sql .= " ORDER BY d.fecha_donacion DESC LIMIT :limite";
    
    try {
        $stmt = $pdo->prepare($sql);
        if ($fecha_inicio && $fecha_fin) {
            $stmt->bindParam(':fecha_inicio', $fecha_inicio);
            $stmt->bindParam(':fecha_fin', $fecha_fin);
        }
        $stmt->bindParam(':limite', $limite, PDO::PARAM_INT);
        $stmt->execute();
        return $stmt->fetchAll();
    } catch (PDOException $e) {
        error_log("Error en obtener_historial: " . $e->getMessage());
        return [];
    }
}

function obtener_donaciones_por_dia($pdo, $fecha_inicio = null, $fecha_fin = null, $limite = 30) {
    $sql = "SELECT DATE(fecha_donacion) as fecha,
            COUNT(*) as total_donaciones,
            COALESCE(SUM(CASE WHEN estado = 'completada' THEN monto ELSE 0 END), 0) as total_recaudado,
            COALESCE(SUM(CASE WHEN estado = 'pendiente' THEN monto ELSE 0 END), 0) as total_pendiente,
            COALESCE(AVG(CASE WHEN estado = 'completada' THEN monto ELSE NULL END), 0) as promedio_donacion,
            COUNT(DISTINCT donante_id) as donantes_unicos
            FROM donaciones";
    
    if ($fecha_inicio && $fecha_fin) {
        $sql .= " WHERE DATE(fecha_donacion) BETWEEN :fecha_inicio AND :fecha_fin";
    }
    
    $sql .= " GROUP BY DATE(fecha_donacion) ORDER BY fecha DESC LIMIT :limite";
    
    try {
        $stmt = $pdo->prepare($sql);
        if ($fecha_inicio && $fecha_fin) {
            $stmt->bindParam(':fecha_inicio', $fecha_inicio);
            $stmt->bindParam(':fecha_fin', $fecha_fin);
        }
        $stmt->bindParam(':limite', $limite, PDO::PARAM_INT);
        $stmt->execute();
        return $stmt->fetchAll();
    } catch (PDOException $e) {
        error_log("Error en obtener_donaciones_por_dia: " . $e->getMessage());
        return [];
    }
}

// ==========================================
// OBTENER DATOS
// ==========================================

$filtro = $_GET['filtro_fecha'] ?? '30dias';
$fecha_desde = $_GET['fecha_desde'] ?? null;
$fecha_hasta = $_GET['fecha_hasta'] ?? null;

if ($fecha_desde && $fecha_hasta) {
    $fecha_inicio = $fecha_desde;
    $fecha_fin = $fecha_hasta;
    $filtro = 'personalizado';
} else {
    $fechas = calcular_fechas($filtro);
    $fecha_inicio = $fechas['inicio'];
    $fecha_fin = $fechas['fin'];
}

$resumen = obtener_resumen($pdo, $fecha_inicio, $fecha_fin);
$estados = obtener_donaciones_por_estado($pdo, $fecha_inicio, $fecha_fin);
$top_items = obtener_top_items($pdo, $fecha_inicio, $fecha_fin, 8);
$donantes_anonimos = obtener_donantes_anonimos($pdo, $fecha_inicio, $fecha_fin);
$historial = obtener_historial($pdo, $fecha_inicio, $fecha_fin, 10);
$donaciones_dia = obtener_donaciones_por_dia($pdo, $fecha_inicio, $fecha_fin, 30);

// Preparar datos para gráficos
$labels_estados = [];
$data_estados = [];
$colors_estados = [];
foreach ($estados as $estado) {
    $labels_estados[] = ucfirst($estado['estado']);
    $data_estados[] = $estado['cantidad'];
    $colors_estados[] = $estado['estado'] == 'completada' ? '#27ae60' : ($estado['estado'] == 'pendiente' ? '#f39c12' : '#e74c3c');
}

$labels_items = array_column($top_items, 'nombre');
$data_items = array_column($top_items, 'total_recaudado');

$labels_dias = array_map(function($d) { return date('d/m', strtotime($d['fecha'])); }, $donaciones_dia);
$data_dias_donaciones = array_column($donaciones_dia, 'total_donaciones');
$data_dias_recaudado = array_column($donaciones_dia, 'total_recaudado');

$filtros = ['hoy' => 'Hoy', 'ayer' => 'Ayer', '7dias' => 'Últimos 7 días', '30dias' => 'Últimos 30 días', 'mes_actual' => 'Mes Actual', 'mes_pasado' => 'Mes Pasado', 'todos' => 'Todos', 'personalizado' => 'Rango Personalizado'];
?>
<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Dashboard de Donaciones</title>
    
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css">
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    
    <style>
        body { background-color: #f5f7fa; padding: 20px; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; }
        .header { background: linear-gradient(135deg, #2c3e50, #3498db); color: white; padding: 20px; border-radius: 10px; margin-bottom: 20px; box-shadow: 0 4px 6px rgba(0,0,0,0.1); }
        .stat-card { background: white; border-radius: 10px; padding: 20px; margin-bottom: 20px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); border-left: 4px solid; transition: transform 0.2s; }
        .stat-card:hover { transform: translateY(-3px); box-shadow: 0 4px 8px rgba(0,0,0,0.15); }
        .stat-card.primary { border-left-color: #2c3e50; }
        .stat-card.success { border-left-color: #27ae60; }
        .stat-card.warning { border-left-color: #f39c12; }
        .stat-card.danger { border-left-color: #e74c3c; }
        .stat-value { font-size: 26px; font-weight: bold; margin: 8px 0; color: #2c3e50; }
        .stat-label { color: #6c757d; font-size: 13px; font-weight: 600; text-transform: uppercase; }
        .chart-container { background: white; border-radius: 10px; padding: 15px; margin-bottom: 20px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); height: 350px; }
        .chart-wrapper { position: relative; height: 280px; }
        .chart-container h5 { color: #2c3e50; font-weight: 600; margin-bottom: 15px; font-size: 16px; }
        .table-container { background: white; border-radius: 10px; padding: 20px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); margin-bottom: 20px; }
        .table-container h5 { color: #2c3e50; font-weight: 600; margin-bottom: 15px; font-size: 16px; }
        .badge-completada { background: #d4edda; color: #155724; padding: 4px 8px; border-radius: 12px; font-size: 11px; font-weight: 600; }
        .badge-pendiente { background: #fff3cd; color: #856404; padding: 4px 8px; border-radius: 12px; font-size: 11px; font-weight: 600; }
        .badge-fallida { background: #f8d7da; color: #721c24; padding: 4px 8px; border-radius: 12px; font-size: 11px; font-weight: 600; }
        .table { margin-bottom: 0; font-size: 14px; }
        .table thead th { border-bottom: 2px solid #dee2e6; color: #2c3e50; font-weight: 600; font-size: 13px; }
        .table tbody tr:hover { background-color: #f8f9fa; }
        .btn-light { background: white; border: none; box-shadow: 0 2px 4px rgba(0,0,0,0.1); }
        .btn-light:hover { background: #f8f9fa; box-shadow: 0 4px 6px rgba(0,0,0,0.15); }
        .btn-excel { background: linear-gradient(135deg, #28a745, #20c997); color: white; border: none; box-shadow: 0 2px 4px rgba(0,0,0,0.1); }
        .btn-excel:hover { background: linear-gradient(135deg, #20c997, #28a745); box-shadow: 0 4px 6px rgba(0,0,0,0.15); color: white; }
        .btn-danger { box-shadow: 0 2px 4px rgba(0,0,0,0.1); }
        .btn-danger:hover { box-shadow: 0 4px 6px rgba(0,0,0,0.15); }
        .btn-success { box-shadow: 0 2px 4px rgba(0,0,0,0.1); }
        .btn-success:hover { box-shadow: 0 4px 6px rgba(0,0,0,0.15); }
        .card { border: none; box-shadow: 0 2px 4px rgba(0,0,0,0.1); }
        .form-select, .form-control { border-radius: 8px; }
        .fecha-personalizada { display: none; }
        .fecha-personalizada.active { display: block; }
        
        /* Estilos para tabla expandible */
        .clickable-row {
            cursor: pointer;
            transition: all 0.2s ease;
        }

        .clickable-row:hover {
            background-color: #e8f4f8 !important;
        }

        .expand-icon {
            transition: transform 0.3s ease;
            font-size: 14px;
            color: #666;
        }

        .expand-icon.rotated {
            transform: rotate(90deg);
        }

        .detalle-row {
            background-color: #f8f9fa !important;
        }

        .detalle-container {
            border-left: 4px solid #c41e3a;
            border-radius: 5px;
        }

        .detalle-donantes-table {
            font-size: 12px;
            margin-top: 10px;
        }

        .detalle-donantes-table th {
            background-color: #e9ecef;
            color: #495057;
            padding: 8px;
            font-weight: 600;
        }

        .detalle-donantes-table td {
            padding: 6px 8px;
        }
        
        /* Modal personalizado */
        .modal-overlay {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.7);
            backdrop-filter: blur(5px);
            z-index: 9999;
            animation: fadeIn 0.3s ease;
        }
        
        .modal-overlay.active {
            display: flex;
            justify-content: center;
            align-items: center;
        }
        
        .modal-content {
            background: white;
            border-radius: 20px;
            padding: 40px;
            max-width: 450px;
            width: 90%;
            box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
            animation: slideInScale 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
            position: relative;
        }
        
        .modal-icon {
            width: 80px;
            height: 80px;
            margin: 0 auto 20px;
            background: linear-gradient(135deg, #e74c3c, #c0392b);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            animation: pulse 2s infinite;
        }
        
        .modal-icon i {
            font-size: 40px;
            color: white;
        }
        
        .modal-title {
            font-size: 24px;
            font-weight: 700;
            color: #2c3e50;
            text-align: center;
            margin-bottom: 15px;
        }
        
        .modal-message {
            font-size: 16px;
            color: #7f8c8d;
            text-align: center;
            margin-bottom: 30px;
            line-height: 1.6;
        }
        
        .modal-buttons {
            display: flex;
            gap: 15px;
            justify-content: center;
        }
        
        .modal-btn {
            padding: 12px 30px;
            border: none;
            border-radius: 10px;
            font-size: 16px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s;
            min-width: 120px;
        }
        
        .modal-btn-confirm {
            background: linear-gradient(135deg, #e74c3c, #c0392b);
            color: white;
            box-shadow: 0 4px 15px rgba(231, 76, 60, 0.4);
        }
        
        .modal-btn-confirm:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 20px rgba(231, 76, 60, 0.6);
        }
        
        .modal-btn-cancel {
            background: #ecf0f1;
            color: #2c3e50;
        }
        
        .modal-btn-cancel:hover {
            background: #bdc3c7;
        }
        
        @keyframes fadeIn {
            from { opacity: 0; }
            to { opacity: 1; }
        }
        
        @keyframes slideInScale {
            from {
                opacity: 0;
                transform: scale(0.7) translateY(-50px);
            }
            to {
                opacity: 1;
                transform: scale(1) translateY(0);
            }
        }
        
        @keyframes pulse {
            0%, 100% { transform: scale(1); }
            50% { transform: scale(1.05); }
        }
        
        @media (max-width: 768px) {
            body { padding: 10px; }
            .stat-value { font-size: 22px; }
            .header h1 { font-size: 22px; }
            .chart-container { height: 300px; }
            .chart-wrapper { height: 230px; }
        }
    </style>
</head>
<body>
    <div class="container-fluid">
        <!-- Header -->
        <div class="header">
            <div class="row align-items-center">
                <div class="col-md-8">
                    <h1><i class="bi bi-bar-chart-fill"></i> Dashboard de Donaciones</h1>
                    <p class="mb-0">Filtro actual: <?php echo $filtros[$filtro] ?? 'Todos'; ?>
                    <?php if ($filtro == 'personalizado'): ?>
                        (<?php echo formato_fecha($fecha_inicio); ?> - <?php echo formato_fecha($fecha_fin); ?>)
                    <?php endif; ?>
                    </p>
                </div>
                <div class="col-md-4 text-end">
                    <button onclick="window.location.reload()" class="btn btn-light me-2">
                        <i class="bi bi-arrow-clockwise"></i> Actualizar
                    </button>
                    <!-- <button onclick="abrirImpresion()" class="btn btn-success me-2">
                        <i class="bi bi-printer-fill"></i> Imprimir / PDF
                    </button>-->
                    <button onclick="mostrarModalCerrarSesion()" class="btn btn-danger">
                        <i class="bi bi-box-arrow-right"></i> Cerrar Sesión
                    </button>
                </div>
            </div>
        </div>

        <!-- Filtro -->
        <div class="card mb-3">
            <div class="card-body">
                <form method="GET" id="filtroForm" class="row g-3">
                    <div class="col-md-3">
                        <label class="form-label fw-bold">Filtrar por período:</label>
                        <select name="filtro_fecha" id="filtro_fecha" class="form-select" onchange="toggleFechaPersonalizada()">
                            <option value="hoy" <?php echo $filtro == 'hoy' ? 'selected' : ''; ?>>Hoy</option>
                            <option value="ayer" <?php echo $filtro == 'ayer' ? 'selected' : ''; ?>>Ayer</option>
                            <option value="7dias" <?php echo $filtro == '7dias' ? 'selected' : ''; ?>>Últimos 7 días</option>
                            <option value="30dias" <?php echo $filtro == '30dias' ? 'selected' : ''; ?>>Últimos 30 días</option>
                            <option value="mes_actual" <?php echo $filtro == 'mes_actual' ? 'selected' : ''; ?>>Mes Actual</option>
                            <option value="mes_pasado" <?php echo $filtro == 'mes_pasado' ? 'selected' : ''; ?>>Mes Pasado</option>
                            <option value="todos" <?php echo $filtro == 'todos' ? 'selected' : ''; ?>>Todos</option>
                            <option value="personalizado" <?php echo $filtro == 'personalizado' ? 'selected' : ''; ?>>📅 Rango Personalizado</option>
                        </select>
                    </div>
                    
                    <div class="col-md-6 fecha-personalizada <?php echo $filtro == 'personalizado' ? 'active' : ''; ?>" id="fechasPersonalizadas">
                        <div class="row g-2">
                            <div class="col-md-5">
                                <label class="form-label fw-bold">Desde:</label>
                                <input type="date" name="fecha_desde" class="form-control" value="<?php echo $fecha_desde ?? ''; ?>">
                            </div>
                            <div class="col-md-5">
                                <label class="form-label fw-bold">Hasta:</label>
                                <input type="date" name="fecha_hasta" class="form-control" value="<?php echo $fecha_hasta ?? ''; ?>">
                            </div>
                            <div class="col-md-2 d-flex align-items-end">
                                <button type="submit" class="btn btn-primary w-100">
                                    <i class="bi bi-search"></i> Filtrar
                                </button>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
        </div>

        <!-- KPIs -->
        <div class="row">
            <div class="col-md-3 col-sm-6">
                <div class="stat-card primary">
                    <div class="stat-label">TOTAL RECAUDADO</div>
                    <div class="stat-value"><?php echo formato_moneda($resumen['total_recaudado']); ?></div>
                    <small><?php echo $resumen['completadas']; ?> completadas</small>
                </div>
            </div>
            <div class="col-md-3 col-sm-6">
                <div class="stat-card success">
                    <div class="stat-label">TOTAL DONACIONES</div>
                    <div class="stat-value"><?php echo $resumen['total_donaciones']; ?></div>
                    <small><?php echo $resumen['donantes_unicos']; ?> donantes únicos</small>
                </div>
            </div>
            <div class="col-md-3 col-sm-6">
                <div class="stat-card warning">
                    <div class="stat-label">PROMEDIO</div>
                    <div class="stat-value"><?php echo formato_moneda($resumen['promedio_donacion']); ?></div>
                    <small>Por donación</small>
                </div>
            </div>
        </div>

        <!-- TABLA PRINCIPAL - EXPANDIBLE -->
        <div class="row">
            <div class="col-md-12">
                <div class="table-container">
                    <div class="d-flex justify-content-between align-items-center mb-3">
                        <h5 class="mb-0"><i class="bi bi-calendar3"></i> Donaciones por Día (Click en fecha para ver detalle)</h5>
                        <a href="?exportar=excel&filtro_fecha=<?php echo $filtro; ?><?php echo $filtro == 'personalizado' ? '&fecha_desde='.$fecha_desde.'&fecha_hasta='.$fecha_hasta : ''; ?>" class="btn btn-excel">
                            <i class="bi bi-file-earmark-excel"></i> Exportar a Excel
                        </a>
                    </div>
                    <div class="table-responsive">
                        <table class="table table-striped table-hover">
                            <thead>
                                <tr>
                                    <th style="width: 40px;"></th>
                                    <th>Fecha</th>
                                    <th class="text-end">Total</th>
                                    <th class="text-end">Recaudado</th>
                                    <th class="text-end">Promedio</th>
                                    <th class="text-center">Donantes</th>
                                </tr>
                            </thead>
                            <tbody>
                                <?php if (empty($donaciones_dia)): ?>
                                    <tr><td colspan="6" class="text-center text-muted py-3">No hay datos disponibles</td></tr>
                                <?php else: ?>
                                    <?php foreach ($donaciones_dia as $dia): ?>
                                    <tr class="clickable-row" data-fecha="<?php echo $dia['fecha']; ?>" onclick="toggleDetalle('<?php echo $dia['fecha']; ?>')">
                                        <td class="text-center">
                                            <i class="bi bi-chevron-right expand-icon" id="icon-<?php echo $dia['fecha']; ?>"></i>
                                        </td>
                                        <td><strong><?php echo formato_fecha($dia['fecha']); ?></strong></td>
                                        <td class="text-end"><?php echo $dia['total_donaciones']; ?></td>
                                        <td class="text-end"><strong class="text-success"><?php echo formato_moneda($dia['total_recaudado']); ?></strong></td>
                                        <td class="text-end"><?php echo formato_moneda($dia['promedio_donacion']); ?></td>
                                        <td class="text-center"><?php echo $dia['donantes_unicos']; ?></td>
                                    </tr>
                                    <tr class="detalle-row" id="detalle-<?php echo $dia['fecha']; ?>" style="display: none;">
                                        <td colspan="6">
                                            <div class="detalle-container" style="padding: 15px; background: #f8f9fa;">
                                                <div class="spinner-border spinner-border-sm me-2" role="status">
                                                    <span class="visually-hidden">Cargando...</span>
                                                </div>
                                                Cargando detalle...
                                            </div>
                                        </td>
                                    </tr>
                                    <?php endforeach; ?>
                                <?php endif; ?>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>

        <!-- GRÁFICOS INTERACTIVOS -->
        <div class="row">
            <div class="col-md-4">
                <div class="chart-container">
                    <h5><i class="bi bi-pie-chart-fill"></i> Donaciones por Estado</h5>
                    <div class="chart-wrapper">
                        <canvas id="estadosChart"></canvas>
                    </div>
                </div>
            </div>
            <div class="col-md-8">
                <div class="chart-container">
                    <h5><i class="bi bi-bar-chart-fill"></i> <span id="itemsChartTitle">Items Más Donados</span></h5>
                    <div class="chart-wrapper">
                        <canvas id="itemsChart"></canvas>
                    </div>
                </div>
            </div>
        </div>

        <div class="row">
            <div class="col-md-8">
                <div class="chart-container">
                    <h5><i class="bi bi-graph-up"></i> Donaciones por Día</h5>
                    <div class="chart-wrapper">
                        <canvas id="diasChart"></canvas>
                    </div>
                </div>
            </div>
            <div class="col-md-4">
                <div class="chart-container">
                    <h5><i class="bi bi-person-badge"></i> Donantes Anónimos vs Identificados</h5>
                    <div class="chart-wrapper">
                        <canvas id="anonimosChart"></canvas>
                    </div>
                </div>
            </div>
        </div>

        <!-- HISTORIAL -->
        <div class="row">
            <div class="col-md-12">
                <div class="table-container">
                    <h5><i class="bi bi-clock-history"></i> Historial Reciente</h5>
                    <div class="table-responsive">
                        <table class="table table-sm table-hover">
                            <thead>
                                <tr>
                                    <th>Fecha</th>
                                    <th>Donante</th>
                                    <th>Item</th>
                                    <th class="text-end">Monto</th>
                                    <th class="text-center">Estado</th>
                                </tr>
                            </thead>
                            <tbody>
                                <?php if (empty($historial)): ?>
                                    <tr><td colspan="5" class="text-center text-muted py-3">No hay datos disponibles</td></tr>
                                <?php else: ?>
                                    <?php foreach ($historial as $don): ?>
                                    <tr>
                                        <td><?php echo formato_fecha($don['fecha_donacion']); ?></td>
                                        <td><?php echo htmlspecialchars(substr($don['nombre_completo'], 0, 25)); ?></td>
                                        <td><?php echo htmlspecialchars(substr($don['item'], 0, 30)); ?></td>
                                        <td class="text-end"><strong><?php echo formato_moneda($don['monto']); ?></strong></td>
                                        <td class="text-center"><span class="badge-<?php echo $don['estado']; ?>"><?php echo ucfirst($don['estado']); ?></span></td>
                                    </tr>
                                    <?php endforeach; ?>
                                <?php endif; ?>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Modal personalizado de cerrar sesión -->
    <div class="modal-overlay" id="modalCerrarSesion">
        <div class="modal-content">
            <div class="modal-icon">
                <i class="bi bi-power"></i>
            </div>
            <h2 class="modal-title">¿Cerrar Sesión?</h2>
            <p class="modal-message">
                Tu sesión se cerrará y tendrás que volver a ingresar el PIN de seguridad para acceder nuevamente.
            </p>
            <div class="modal-buttons">
                <button class="modal-btn modal-btn-cancel" onclick="cerrarModal()">
                    <i class="bi bi-x-circle"></i> Cancelar
                </button>
                <button class="modal-btn modal-btn-confirm" onclick="confirmarCerrarSesion()">
                    <i class="bi bi-check-circle"></i> Cerrar Sesión
                </button>
            </div>
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    <script>
        // Funciones del modal
        function mostrarModalCerrarSesion() {
            document.getElementById('modalCerrarSesion').classList.add('active');
        }
        
        function cerrarModal() {
            document.getElementById('modalCerrarSesion').classList.remove('active');
        }
        
        function confirmarCerrarSesion() {
            window.location.href = '?cerrar_sesion=1';
        }
        
        // Cerrar modal al hacer clic fuera de él
        document.getElementById('modalCerrarSesion').addEventListener('click', function(e) {
            if (e.target === this) {
                cerrarModal();
            }
        });
        
        // Cerrar modal con la tecla ESC
        document.addEventListener('keydown', function(e) {
            if (e.key === 'Escape') {
                cerrarModal();
            }
        });
        
        function toggleFechaPersonalizada() {
            const select = document.getElementById('filtro_fecha');
            const fechasDiv = document.getElementById('fechasPersonalizadas');
            const form = document.getElementById('filtroForm');
            
            if (select.value === 'personalizado') {
                fechasDiv.classList.add('active');
            } else {
                fechasDiv.classList.remove('active');
                form.submit();
            }
        }
        
        Chart.defaults.font.family = "'Segoe UI', Tahoma, Geneva, Verdana, sans-serif";
        Chart.defaults.font.size = 11;
        
        // DATOS DESDE PHP
        const datosCompletos = {
            estados: <?php echo json_encode($estados); ?>,
            items: <?php echo json_encode($top_items); ?>
        };
        
        // Datos originales para restaurar
        const datosOriginales = {
            itemsLabels: <?php echo json_encode($labels_items); ?>,
            itemsData: <?php echo json_encode($data_items); ?>,
            estadosLabels: <?php echo json_encode($labels_estados); ?>,
            estadosData: <?php echo json_encode($data_estados); ?>,
            estadosColors: <?php echo json_encode($colors_estados); ?>
        };
        
        let filtroActual = {
            items: null,
            estados: null
        };
        
        // GRÁFICO DE ESTADOS (Torta) - CON INTERACTIVIDAD
        const estadosChart = new Chart(document.getElementById('estadosChart'), {
            type: 'doughnut',
            data: {
                labels: <?php echo json_encode($labels_estados); ?>,
                datasets: [{
                    data: <?php echo json_encode($data_estados); ?>,
                    backgroundColor: <?php echo json_encode($colors_estados); ?>,
                    borderWidth: 2,
                    borderColor: '#fff'
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                onClick: (event, elements) => {
                    if (elements.length > 0) {
                        const index = elements[0].index;
                        const estadoSeleccionado = datosCompletos.estados[index].estado;
                        
                        // Si ya está filtrado por este estado, restaurar
                        if (filtroActual.items === estadoSeleccionado) {
                            restaurarItems();
                        } else {
                            filtrarItemsPorEstado(estadoSeleccionado);
                        }
                    }
                },
                plugins: {
                    legend: { position: 'bottom', labels: { padding: 10, font: { size: 11 } } },
                    tooltip: {
                        callbacks: {
                            label: function(context) {
                                let total = context.dataset.data.reduce((a, b) => a + b, 0);
                                let percent = Math.round((context.parsed / total) * 100);
                                return context.label + ': ' + context.parsed + ' (' + percent + '%)';
                            }
                        }
                    }
                }
            }
        });

        // GRÁFICO DE ITEMS (Barras) - CON INTERACTIVIDAD
        const itemsChart = new Chart(document.getElementById('itemsChart'), {
            type: 'bar',
            data: {
                labels: <?php echo json_encode($labels_items); ?>,
                datasets: [{
                    label: 'Total Recaudado',
                    data: <?php echo json_encode($data_items); ?>,
                    backgroundColor: '#3498db',
                    borderColor: '#2980b9',
                    borderWidth: 1
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                onClick: (event, elements) => {
                    if (elements.length > 0) {
                        const index = elements[0].index;
                        const itemSeleccionado = itemsChart.data.labels[index];
                        
                        // Si ya está filtrado por este item, restaurar
                        if (filtroActual.estados === itemSeleccionado) {
                            restaurarEstados();
                        } else {
                            filtrarEstadosPorItem(itemSeleccionado);
                        }
                    }
                },
                plugins: {
                    legend: { display: false },
                    tooltip: {
                        callbacks: {
                            label: function(context) {
                                return 'S/ ' + context.parsed.y.toFixed(2);
                            }
                        }
                    }
                },
                scales: {
                    y: {
                        beginAtZero: true,
                        ticks: { callback: function(value) { return 'S/ ' + value; } }
                    }
                }
            }
        });

        // FUNCIÓN: Filtrar Items por Estado
        function filtrarItemsPorEstado(estado) {
            fetch(`get_data.php?action=items_por_estado&estado=${estado}&filtro_fecha=<?php echo $filtro; ?>&fecha_desde=<?php echo $fecha_desde ?? ''; ?>&fecha_hasta=<?php echo $fecha_hasta ?? ''; ?>`)
                .then(res => res.json())
                .then(data => {
                    itemsChart.data.labels = data.labels;
                    itemsChart.data.datasets[0].data = data.values;
                    itemsChart.update();
                    document.getElementById('itemsChartTitle').innerHTML = `Items con estado: <strong>${estado}</strong> <span style="font-size: 11px; color: #666;">(Click de nuevo para restaurar)</span>`;
                    filtroActual.items = estado;
                });
        }

        // FUNCIÓN: Filtrar Estados por Item
        function filtrarEstadosPorItem(item) {
            fetch(`get_data.php?action=estados_por_item&item=${encodeURIComponent(item)}&filtro_fecha=<?php echo $filtro; ?>&fecha_desde=<?php echo $fecha_desde ?? ''; ?>&fecha_hasta=<?php echo $fecha_hasta ?? ''; ?>`)
                .then(res => res.json())
                .then(data => {
                    estadosChart.data.labels = data.labels;
                    estadosChart.data.datasets[0].data = data.values;
                    estadosChart.data.datasets[0].backgroundColor = data.colors;
                    estadosChart.update();
                    filtroActual.estados = item;
                });
        }

        // FUNCIÓN: Restaurar Items originales
        function restaurarItems() {
            itemsChart.data.labels = datosOriginales.itemsLabels;
            itemsChart.data.datasets[0].data = datosOriginales.itemsData;
            itemsChart.update();
            document.getElementById('itemsChartTitle').textContent = 'Items Más Donados';
            filtroActual.items = null;
        }

        // FUNCIÓN: Restaurar Estados originales
        function restaurarEstados() {
            estadosChart.data.labels = datosOriginales.estadosLabels;
            estadosChart.data.datasets[0].data = datosOriginales.estadosData;
            estadosChart.data.datasets[0].backgroundColor = datosOriginales.estadosColors;
            estadosChart.update();
            filtroActual.estados = null;
        }

        // GRÁFICO DE DÍAS (Línea)
        new Chart(document.getElementById('diasChart'), {
            type: 'line',
            data: {
                labels: <?php echo json_encode($labels_dias); ?>,
                datasets: [
                    {
                        label: 'Cantidad',
                        data: <?php echo json_encode($data_dias_donaciones); ?>,
                        borderColor: '#3498db',
                        backgroundColor: 'rgba(52, 152, 219, 0.1)',
                        fill: true,
                        tension: 0.4
                    },
                    {
                        label: 'Monto (S/)',
                        data: <?php echo json_encode($data_dias_recaudado); ?>,
                        borderColor: '#27ae60',
                        backgroundColor: 'rgba(39, 174, 96, 0.1)',
                        fill: true,
                        tension: 0.4
                    }
                ]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                plugins: {
                    legend: { position: 'top', labels: { padding: 10, usePointStyle: true, font: { size: 11 } } },
                    tooltip: { mode: 'index', intersect: false }
                },
                scales: { y: { beginAtZero: true } }
            }
        });

        // GRÁFICO DE ANÓNIMOS
        new Chart(document.getElementById('anonimosChart'), {
            type: 'doughnut',
            data: {
                labels: ['Anónimos', 'Identificados'],
                datasets: [{
                    data: [<?php echo $donantes_anonimos['anonimos']; ?>, <?php echo $donantes_anonimos['identificados']; ?>],
                    backgroundColor: ['#95a5a6', '#3498db'],
                    borderWidth: 2,
                    borderColor: '#fff'
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                plugins: {
                    legend: { position: 'bottom', labels: { padding: 10, font: { size: 11 } } },
                    tooltip: {
                        callbacks: {
                            label: function(context) {
                                let total = context.dataset.data.reduce((a, b) => a + b, 0);
                                let percent = Math.round((context.parsed / total) * 100);
                                return context.label + ': ' + context.parsed + ' (' + percent + '%)';
                            }
                        }
                    }
                }
            }
        });

        // ========================================
        // NUEVAS FUNCIONES AÑADIDAS
        // ========================================

        // FUNCIÓN: Abrir ventana de impresión
        function abrirImpresion() {
            const params = new URLSearchParams(window.location.search);
            const url = 'imprimir_reporte.php?' + params.toString();
            window.open(url, 'Imprimir', 'width=900,height=800,scrollbars=yes');
        }

        // FUNCIÓN: Toggle detalle de donantes por día
        let detallesCache = {};

        async function toggleDetalle(fecha) {
            const detalleRow = document.getElementById('detalle-' + fecha);
            const icon = document.getElementById('icon-' + fecha);
            
            // Si ya está visible, ocultarlo
            if (detalleRow.style.display !== 'none') {
                detalleRow.style.display = 'none';
                icon.classList.remove('rotated');
                return;
            }
            
            // Mostrar fila
            detalleRow.style.display = '';
            icon.classList.add('rotated');
            
            // Si ya está en cache, mostrar
            if (detallesCache[fecha]) {
                detalleRow.querySelector('.detalle-container').innerHTML = detallesCache[fecha];
                return;
            }
            
            // Cargar datos por AJAX
            try {
                const response = await fetch('get_donantes_dia.php?fecha=' + fecha);
                const data = await response.json();
                
                if (!data.success) {
                    throw new Error(data.error || 'Error al cargar datos');
                }
                
                let html = '<h6 class="mb-3"><i class="bi bi-people-fill"></i> Donantes del ' + formatearFecha(fecha) + ':</h6>';
                
                if (data.donantes.length === 0) {
                    html += '<p class="text-muted">No hay donantes registrados en esta fecha.</p>';
                } else {
                    html += '<table class="table table-sm detalle-donantes-table table-bordered">';
                    html += '<thead><tr>';
                    html += '<th>Hora</th>';
                    html += '<th>Donante</th>';
                    html += '<th>Item</th>';
                    html += '<th class="text-end">Monto</th>';
                    html += '<th class="text-center">Estado</th>';
                    html += '</tr></thead><tbody>';
                    
                    data.donantes.forEach(d => {
                        const hora = new Date(d.fecha_donacion).toLocaleTimeString('es-PE', {hour: '2-digit', minute: '2-digit'});
                        const estadoClase = d.estado === 'completada' ? 'badge-completada' : 
                                           (d.estado === 'pendiente' ? 'badge-pendiente' : 'badge-fallida');
                        
                        html += '<tr>';
                        html += '<td>' + hora + '</td>';
                        html += '<td>' + escapeHtml(d.donante) + '</td>';
                        html += '<td>' + escapeHtml(d.item) + '</td>';
                        html += '<td class="text-end"><strong>S/ ' + parseFloat(d.monto).toFixed(2) + '</strong></td>';
                        html += '<td class="text-center"><span class="' + estadoClase + '">' + d.estado + '</span></td>';
                        html += '</tr>';
                    });
                    
                    html += '</tbody></table>';
                    html += '<p class="text-muted mb-0 mt-2"><small><strong>Total donantes:</strong> ' + data.donantes.length + '</small></p>';
                }
                
                detallesCache[fecha] = html;
                detalleRow.querySelector('.detalle-container').innerHTML = html;
                
            } catch (error) {
                console.error('Error:', error);
                detalleRow.querySelector('.detalle-container').innerHTML = 
                    '<div class="alert alert-danger mb-0">Error al cargar los detalles. Por favor, intenta de nuevo.</div>';
            }
        }

        // Función auxiliar para formatear fecha
        function formatearFecha(fecha) {
            const partes = fecha.split('-');
            const meses = ['enero', 'febrero', 'marzo', 'abril', 'mayo', 'junio', 
                           'julio', 'agosto', 'septiembre', 'octubre', 'noviembre', 'diciembre'];
            return partes[2] + ' de ' + meses[parseInt(partes[1]) - 1] + ' de ' + partes[0];
        }

        // Función auxiliar para escapar HTML
        function escapeHtml(text) {
            const div = document.createElement('div');
            div.textContent = text;
            return div.innerHTML;
        }
    </script>
</body>
</html>