<?php
include_once 'includes/header.php';
include_once 'config/database.php';

$database = new Database();
$conn = $database->getConnection();

// Obtener la empresa del usuario logueado
$codempresaUsuario = null;
try {
    $stmt = $conn->prepare("SELECT codempresa FROM templeado WHERE codempleado = ?");
    $stmt->execute([$_SESSION['user']['codempleado']]);
    $resultado = $stmt->fetch(PDO::FETCH_ASSOC);
    if ($resultado) {
        $codempresaUsuario = $resultado['codempresa'];
    }
} catch(PDOException $e) {
    $_SESSION['error'] = "Error al obtener la empresa del usuario: " . $e->getMessage();
}

// Procesar filtros
$fechaInicio = isset($_GET['fecha_inicio']) ? $_GET['fecha_inicio'] : date('Y-m-01'); // Primer día del mes actual
$fechaFin = isset($_GET['fecha_fin']) ? $_GET['fecha_fin'] : date('Y-m-t'); // Último día del mes actual
$tipoPeriodo = isset($_GET['tipo_periodo']) ? $_GET['tipo_periodo'] : 'meses'; // días o meses
$mostrarMoviles = isset($_GET['moviles']) ? true : false;
$mostrarFijas = isset($_GET['fijas']) ? true : false;

// Si no se selecciona ningún tipo, mostrar ambos por defecto
if (!$mostrarMoviles && !$mostrarFijas) {
    $mostrarMoviles = true;
    $mostrarFijas = true;
}

// Datos para gráficos
$datosGrafico = [];

if ($codempresaUsuario && ($mostrarMoviles || $mostrarFijas)) {
    try {
        // Generar array de períodos según el tipo seleccionado
        $periodos = [];
        $fechaActual = new DateTime($fechaInicio);
        $fechaFinal = new DateTime($fechaFin);
        
        if ($tipoPeriodo == 'dias') {
            // Generar días
            while ($fechaActual <= $fechaFinal) {
                $periodos[] = $fechaActual->format('Y-m-d');
                $fechaActual->add(new DateInterval('P1D'));
            }
        } else {
            // Generar meses
            while ($fechaActual <= $fechaFinal) {
                $periodos[] = $fechaActual->format('Y-m');
                $fechaActual->add(new DateInterval('P1M'));
            }
        }
        
        $datosGrafico['periodos'] = $periodos;
        $datosGrafico['tipo_periodo'] = $tipoPeriodo;
        
        // Obtener estados únicos para móviles
        $estadosMoviles = [];
        if ($mostrarMoviles) {
            $stmt = $conn->prepare("
                SELECT DISTINCT c.estado
                FROM tcronogramaequipo c
                INNER JOIN timportequipos i ON c.ID = i.id
                WHERE i.codempresa = ? 
                AND c.fechapago BETWEEN ? AND ?
                AND c.estado IS NOT NULL 
                AND c.estado != ''
                ORDER BY c.estado
            ");
            $stmt->execute([$codempresaUsuario, $fechaInicio, $fechaFin]);
            $estadosMoviles = $stmt->fetchAll(PDO::FETCH_COLUMN);
        }
        
        // Obtener estados únicos para fijas
        $estadosFijas = [];
        if ($mostrarFijas) {
            $stmt = $conn->prepare("
                SELECT DISTINCT c.estado
                FROM tcronogramaventas c
                INNER JOIN timportventas i ON c.id = i.id
                WHERE i.codempresa = ? 
                AND c.fechapago BETWEEN ? AND ?
                AND c.estado IS NOT NULL 
                AND c.estado != ''
                ORDER BY c.estado
            ");
            $stmt->execute([$codempresaUsuario, $fechaInicio, $fechaFin]);
            $estadosFijas = $stmt->fetchAll(PDO::FETCH_COLUMN);
        }
        
        $datosGrafico['estados_moviles'] = $estadosMoviles;
        $datosGrafico['estados_fijas'] = $estadosFijas;
        
        // Consulta para móviles agrupada por período y estado
        $datosGrafico['moviles'] = [];
        if ($mostrarMoviles) {
            foreach ($estadosMoviles as $estado) {
                $datosGrafico['moviles'][$estado] = [];
                foreach ($periodos as $periodo) {
                    if ($tipoPeriodo == 'dias') {
                        $stmt = $conn->prepare("
                            SELECT COALESCE(SUM(c.monto), 0) as total_monto
                            FROM tcronogramaequipo c
                            INNER JOIN timportequipos i ON c.ID = i.id
                            WHERE i.codempresa = ? 
                            AND DATE(c.fechapago) = ?
                            AND c.estado = ?
                            AND c.monto IS NOT NULL
                        ");
                    } else {
                        $stmt = $conn->prepare("
                            SELECT COALESCE(SUM(c.monto), 0) as total_monto
                            FROM tcronogramaequipo c
                            INNER JOIN timportequipos i ON c.ID = i.id
                            WHERE i.codempresa = ? 
                            AND DATE_FORMAT(c.fechapago, '%Y-%m') = ?
                            AND c.estado = ?
                            AND c.monto IS NOT NULL
                        ");
                    }
                    $stmt->execute([$codempresaUsuario, $periodo, $estado]);
                    $resultado = $stmt->fetch(PDO::FETCH_ASSOC);
                    $datosGrafico['moviles'][$estado][] = floatval($resultado['total_monto']);
                }
            }
        }
        
        // Consulta para fijas agrupada por período y estado
        $datosGrafico['fijas'] = [];
        if ($mostrarFijas) {
            foreach ($estadosFijas as $estado) {
                $datosGrafico['fijas'][$estado] = [];
                foreach ($periodos as $periodo) {
                    if ($tipoPeriodo == 'dias') {
                        $stmt = $conn->prepare("
                            SELECT COALESCE(SUM(c.monto), 0) as total_monto
                            FROM tcronogramaventas c
                            INNER JOIN timportventas i ON c.id = i.id
                            WHERE i.codempresa = ? 
                            AND DATE(c.fechapago) = ?
                            AND c.estado = ?
                            AND c.monto IS NOT NULL
                        ");
                    } else {
                        $stmt = $conn->prepare("
                            SELECT COALESCE(SUM(c.monto), 0) as total_monto
                            FROM tcronogramaventas c
                            INNER JOIN timportventas i ON c.id = i.id
                            WHERE i.codempresa = ? 
                            AND DATE_FORMAT(c.fechapago, '%Y-%m') = ?
                            AND c.estado = ?
                            AND c.monto IS NOT NULL
                        ");
                    }
                    $stmt->execute([$codempresaUsuario, $periodo, $estado]);
                    $resultado = $stmt->fetch(PDO::FETCH_ASSOC);
                    $datosGrafico['fijas'][$estado][] = floatval($resultado['total_monto']);
                }
            }
        }
        
    } catch(PDOException $e) {
        $_SESSION['error'] = "Error al obtener datos para el gráfico: " . $e->getMessage();
    }
}

// Datos para gráficos de paquetes
$datosPaquetesMoviles = [];
$datosPaquetesFijas = [];

if ($codempresaUsuario && ($mostrarMoviles || $mostrarFijas)) {
    try {
        // Consulta para paquetes móviles (plan_a_evaluar de timportequipos)
        if ($mostrarMoviles) {
            $stmt = $conn->prepare("
                SELECT i.plan_a_evaluar, COUNT(*) as cantidad
                FROM timportequipos i
                INNER JOIN tcronogramaequipo c ON i.id = c.ID
                WHERE i.codempresa = ? 
                AND c.fechapago BETWEEN ? AND ?
                AND i.plan_a_evaluar IS NOT NULL 
                AND i.plan_a_evaluar != ''
                GROUP BY i.plan_a_evaluar
                ORDER BY cantidad DESC
                LIMIT 10
            ");
            $stmt->execute([$codempresaUsuario, $fechaInicio, $fechaFin]);
            $datosPaquetesMoviles = $stmt->fetchAll(PDO::FETCH_ASSOC);
        }
        
        // Consulta para paquetes fijas (paquete_contratado de timportventas)
        if ($mostrarFijas) {
            $stmt = $conn->prepare("
                SELECT i.paquete_contratado, COUNT(*) as cantidad
                FROM timportventas i
                INNER JOIN tcronogramaventas c ON i.id = c.id
                WHERE i.codempresa = ? 
                AND c.fechapago BETWEEN ? AND ?
                AND i.paquete_contratado IS NOT NULL 
                AND i.paquete_contratado != ''
                GROUP BY i.paquete_contratado
                ORDER BY cantidad DESC
                LIMIT 10
            ");
            $stmt->execute([$codempresaUsuario, $fechaInicio, $fechaFin]);
            $datosPaquetesFijas = $stmt->fetchAll(PDO::FETCH_ASSOC);
        }
        
    } catch(PDOException $e) {
        $_SESSION['error'] = "Error al obtener datos de paquetes: " . $e->getMessage();
    }
}

// Datos para empleados más importantes
$datosEmpleadosMoviles = [];
$datosEmpleadosFijas = [];

if ($codempresaUsuario && ($mostrarMoviles || $mostrarFijas)) {
    try {
        // Consulta para empleados más importantes en móviles (timportequipos)
        if ($mostrarMoviles) {
            $stmt = $conn->prepare("
                SELECT i.agente, COUNT(*) as cantidad
                FROM timportequipos i
                WHERE i.codempresa = ? 
                AND i.agente IS NOT NULL 
                AND i.agente != ''
                GROUP BY i.agente
                ORDER BY cantidad DESC
                LIMIT 10
            ");
            $stmt->execute([$codempresaUsuario]);
            $datosEmpleadosMoviles = $stmt->fetchAll(PDO::FETCH_ASSOC);
        }
        
        // Consulta para empleados más importantes en fijas (timportventas)
        if ($mostrarFijas) {
            $stmt = $conn->prepare("
                SELECT i.agente, COUNT(*) as cantidad
                FROM timportventas i
                WHERE i.codempresa = ? 
                AND i.agente IS NOT NULL 
                AND i.agente != ''
                GROUP BY i.agente
                ORDER BY cantidad DESC
                LIMIT 10
            ");
            $stmt->execute([$codempresaUsuario]);
            $datosEmpleadosFijas = $stmt->fetchAll(PDO::FETCH_ASSOC);
        }
        
    } catch(PDOException $e) {
        $_SESSION['error'] = "Error al obtener datos de empleados: " . $e->getMessage();
    }
}

// Datos para cantidad por estado
$datosEstadosMoviles = [];
$datosEstadosFijas = [];

if ($codempresaUsuario && ($mostrarMoviles || $mostrarFijas)) {
    try {
        // Consulta para estados en móviles (tcronogramaequipo)
        if ($mostrarMoviles) {
            $stmt = $conn->prepare("
                SELECT c.estado, COUNT(*) as cantidad
                FROM tcronogramaequipo c
                INNER JOIN timportequipos i ON c.ID = i.id
                WHERE i.codempresa = ? 
                AND c.fechapago BETWEEN ? AND ?
                AND c.estado IS NOT NULL 
                AND c.estado != ''
                GROUP BY c.estado
                ORDER BY cantidad DESC
            ");
            $stmt->execute([$codempresaUsuario, $fechaInicio, $fechaFin]);
            $datosEstadosMoviles = $stmt->fetchAll(PDO::FETCH_ASSOC);
        }
        
        // Consulta para estados en fijas (tcronogramaventas)
        if ($mostrarFijas) {
            $stmt = $conn->prepare("
                SELECT c.estado, COUNT(*) as cantidad
                FROM tcronogramaventas c
                INNER JOIN timportventas i ON c.id = i.id
                WHERE i.codempresa = ? 
                AND c.fechapago BETWEEN ? AND ?
                AND c.estado IS NOT NULL 
                AND c.estado != ''
                GROUP BY c.estado
                ORDER BY cantidad DESC
            ");
            $stmt->execute([$codempresaUsuario, $fechaInicio, $fechaFin]);
            $datosEstadosFijas = $stmt->fetchAll(PDO::FETCH_ASSOC);
        }
        
    } catch(PDOException $e) {
        $_SESSION['error'] = "Error al obtener datos de estados: " . $e->getMessage();
    }
}

// Obtener nombre de la empresa seleccionada
$nombreEmpresa = "Empresa no encontrada";
if ($codempresaUsuario) {
    try {
        $stmt = $conn->prepare("SELECT nomempresa FROM tempresa WHERE codempresa = ?");
        $stmt->execute([$codempresaUsuario]);
        $empresa = $stmt->fetch(PDO::FETCH_ASSOC);
        if ($empresa) {
            $nombreEmpresa = $empresa['nomempresa'];
        }
    } catch(PDOException $e) {
        // Mantener el valor por defecto
    }
}
?>

<style>
.filtros-card {
    background: white;
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    border: none;
    margin-bottom: 30px;
}

.grafico-card {
    background: white;
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    border: none;
    margin-bottom: 30px;
}

.titulo-principal {
    background: linear-gradient(135deg, #667eea, #764ba2);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-weight: bold;
    font-size: 2.5rem;
    margin-bottom: 30px;
}

.filtro-group {
    background: linear-gradient(135deg, #f8f9fa, #ffffff);
    border-radius: 15px;
    padding: 20px;
    margin-bottom: 20px;
    border: 2px solid #e9ecef;
    transition: all 0.3s ease;
}

.filtro-group:hover {
    border-color: #667eea;
    box-shadow: 0 5px 15px rgba(102, 126, 234, 0.1);
}

.filtro-label {
    font-weight: 600;
    color: #495057;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
}

.filtro-label i {
    margin-right: 10px;
    color: #667eea;
}

.form-control-modern {
    border: 2px solid #e9ecef;
    border-radius: 10px;
    padding: 12px 15px;
    transition: all 0.3s ease;
    font-size: 1rem;
}

.form-control-modern:focus {
    border-color: #667eea;
    box-shadow: 0 0 0 0.2rem rgba(102, 126, 234, 0.25);
}

.btn-modern {
    background: linear-gradient(135deg, #667eea, #764ba2);
    border: none;
    border-radius: 10px;
    padding: 12px 25px;
    font-weight: 600;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
}

.btn-modern:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(102, 126, 234, 0.4);
}

.checkbox-modern {
    display: flex;
    align-items: center;
    margin: 10px 0;
    padding: 10px;
    background: #f8f9fa;
    border-radius: 10px;
    transition: all 0.3s ease;
}

.checkbox-modern:hover {
    background: #e9ecef;
}

.checkbox-modern input[type="checkbox"] {
    margin-right: 10px;
    transform: scale(1.2);
}

.checkbox-modern label {
    margin: 0;
    font-weight: 500;
    cursor: pointer;
}

.grafico-container {
    position: relative;
    height: 500px;
    padding: 20px;
}

.grafico-paquetes-container {
    position: relative;
    height: 400px;
    padding: 20px;
}

.resumen-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
    margin-bottom: 30px;
}

.resumen-card {
    background: linear-gradient(135deg, #667eea, #764ba2);
    color: white;
    border-radius: 15px;
    padding: 25px;
    text-align: center;
    box-shadow: 0 8px 25px rgba(102, 126, 234, 0.3);
    transition: all 0.3s ease;
}

.resumen-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 35px rgba(102, 126, 234, 0.4);
}

.resumen-card h3 {
    font-size: 2rem;
    margin-bottom: 10px;
    font-weight: bold;
}

.resumen-card p {
    margin: 0;
    opacity: 0.9;
    font-size: 1.1rem;
}

.sin-datos {
    text-align: center;
    padding: 60px 20px;
    background: linear-gradient(135deg, #f8f9fa, #e9ecef);
    border-radius: 20px;
    margin: 40px 0;
}

.sin-datos i {
    font-size: 4rem;
    color: #6c757d;
    margin-bottom: 20px;
}

.sin-datos h4 {
    color: #495057;
    margin-bottom: 15px;
}

.sin-datos p {
    color: #6c757d;
    font-size: 1.1rem;
}

.nav-tabs-custom {
    border-bottom: 2px solid #e9ecef;
    margin-bottom: 20px;
}

.nav-tabs-custom .nav-link {
    border: none;
    border-bottom: 3px solid transparent;
    color: #6c757d;
    font-weight: 600;
    padding: 15px 25px;
    transition: all 0.3s ease;
}

.nav-tabs-custom .nav-link:hover {
    border-bottom-color: #667eea;
    color: #667eea;
}

.nav-tabs-custom .nav-link.active {
    color: #667eea;
    border-bottom-color: #667eea;
    background: transparent;
}

.tab-content-custom {
    padding: 20px 0;
}

.empleado-card {
    background: linear-gradient(135deg, #f8f9fa, #ffffff);
    border-radius: 10px;
    padding: 15px;
    margin-bottom: 10px;
    border-left: 4px solid #667eea;
    transition: all 0.3s ease;
}

.empleado-card:hover {
    transform: translateX(5px);
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

.estado-card {
    background: linear-gradient(135deg, #f8f9fa, #ffffff);
    border-radius: 10px;
    padding: 15px;
    margin-bottom: 10px;
    transition: all 0.3s ease;
}

.estado-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

.badge-cantidad {
    font-size: 1.2rem;
    padding: 8px 15px;
    border-radius: 20px;
    font-weight: bold;
}

.ranking-badge {
    background: linear-gradient(135deg, #667eea, #764ba2);
    color: white;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 1.1rem;
    margin-right: 15px;
}

@media (max-width: 768px) {
    .titulo-principal {
        font-size: 2rem;
    }
    
    .grafico-container {
        height: 400px;
    }
    
    .resumen-cards {
        grid-template-columns: 1fr;
    }
    
    .nav-tabs-custom .nav-link {
        padding: 10px 15px;
        font-size: 0.9rem;
    }
}
</style>

<div class="col-md-10 p-4">
    <div class="d-flex justify-content-between align-items-center mb-4">
        <h2 style="background: linear-gradient(135deg, #667eea, #764ba2); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; font-weight: bold;">
            <i class="fas fa-chart-bar" style="color: #667eea;"></i> Reportes por Empresa
        </h2>
    </div>

        <?php if (isset($_SESSION['success'])): ?>
            <div class="alert alert-success alert-dismissible fade show">
                <i class="fas fa-check-circle"></i>
                <?php 
                echo $_SESSION['success']; 
                unset($_SESSION['success']);
                ?>
                <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
            </div>
        <?php endif; ?>

        <?php if (isset($_SESSION['error'])): ?>
            <div class="alert alert-danger alert-dismissible fade show">
                <i class="fas fa-exclamation-triangle"></i>
                <?php 
                echo $_SESSION['error']; 
                unset($_SESSION['error']);
                ?>
                <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
            </div>
        <?php endif; ?>

        <!-- Filtros -->
        <div class="card filtros-card">
            <div class="card-body">
                <h5 class="card-title mb-4">
                    <i class="fas fa-filter" style="color: #667eea;"></i> Filtros de Búsqueda
                </h5>
                
                <form method="GET" action="reporte_por_empresa.php" class="row g-4">
                    <!-- Filtros de fecha -->
                    <div class="col-md-12">
                        <div class="filtro-group">
                            <label class="filtro-label">
                                <i class="fas fa-calendar-alt"></i> Rango de Fechas
                            </label>
                            <div class="row">
                                <div class="col-md-4">
                                    <label class="form-label">Fecha Inicio</label>
                                    <input type="date" class="form-control form-control-modern" name="fecha_inicio" 
                                           value="<?php echo htmlspecialchars($fechaInicio); ?>" required>
                                </div>
                                <div class="col-md-4">
                                    <label class="form-label">Fecha Fin</label>
                                    <input type="date" class="form-control form-control-modern" name="fecha_fin" 
                                           value="<?php echo htmlspecialchars($fechaFin); ?>" required>
                                </div>
                                <div class="col-md-4">
                                    <label class="form-label">Tipo de Período</label>
                                    <select class="form-control form-control-modern" name="tipo_periodo" required>
                                        <option value="meses" <?php echo $tipoPeriodo == 'meses' ? 'selected' : ''; ?>>Por Meses</option>
                                        <option value="dias" <?php echo $tipoPeriodo == 'dias' ? 'selected' : ''; ?>>Por Días</option>
                                    </select>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Checkboxes para tipos de servicio -->
                    <div class="col-md-12">
                        <div class="filtro-group">
                            <label class="filtro-label">
                                <i class="fas fa-mobile-alt"></i> Tipos de Servicio
                            </label>
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="checkbox-modern">
                                        <input type="checkbox" id="moviles" name="moviles" 
                                               <?php echo $mostrarMoviles ? 'checked' : ''; ?>>
                                        <label for="moviles">
                                            <i class="fas fa-mobile-alt" style="color: #28a745; margin-right: 8px;"></i>
                                            Móviles
                                        </label>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="checkbox-modern">
                                        <input type="checkbox" id="fijas" name="fijas" 
                                               <?php echo $mostrarFijas ? 'checked' : ''; ?>>
                                        <label for="fijas">
                                            <i class="fas fa-phone-volume" style="color: #007bff; margin-right: 8px;"></i>
                                            Fijas
                                        </label>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Botón de búsqueda -->
                    <div class="col-md-12 text-center">
                        <button type="submit" class="btn btn-modern text-white">
                            <i class="fas fa-search"></i> Generar Reporte
                        </button>
                    </div>
                </form>
            </div>
        </div>

        <?php if (!empty($datosGrafico) && ($mostrarMoviles || $mostrarFijas)): ?>
            <!-- Resumen de datos -->
            <div class="resumen-cards">
                <?php if ($mostrarMoviles): ?>
                    <?php
                    $totalMoviles = 0;
                    if (isset($datosGrafico['moviles']) && is_array($datosGrafico['moviles'])) {
                        foreach ($datosGrafico['moviles'] as $estado => $valores) {
                            $totalMoviles += array_sum($valores);
                        }
                    }
                    ?>
                    <div class="resumen-card">
                        <h3><?php echo number_format($totalMoviles, 2); ?></h3>
                        <p><i class="fas fa-mobile-alt"></i> Total Móviles</p>
                    </div>
                <?php endif; ?>

                <?php if ($mostrarFijas): ?>
                    <?php
                    $totalFijas = 0;
                    if (isset($datosGrafico['fijas']) && is_array($datosGrafico['fijas'])) {
                        foreach ($datosGrafico['fijas'] as $estado => $valores) {
                            $totalFijas += array_sum($valores);
                        }
                    }
                    ?>
                    <div class="resumen-card">
                        <h3><?php echo number_format($totalFijas, 2); ?></h3>
                        <p><i class="fas fa-phone-volume"></i> Total Fijas</p>
                    </div>
                <?php endif; ?>

                <div class="resumen-card">
                    <h3><?php echo number_format(($totalMoviles ?? 0) + ($totalFijas ?? 0), 2); ?></h3>
                    <p><i class="fas fa-chart-line"></i> Total General</p>
                </div>
            </div>

            <!-- Gráfico -->
            <div class="card grafico-card">
                <div class="card-body">
                    <h5 class="card-title mb-4">
                        <i class="fas fa-chart-bar" style="color: #667eea;"></i> 
                        Ventas <?php echo $tipoPeriodo == 'dias' ? 'por Día' : 'por Mes'; ?> - <?php echo htmlspecialchars($nombreEmpresa); ?>
                    </h5>
                    <div class="grafico-container">
                        <canvas id="graficoVentas"></canvas>
                    </div>
                </div>
            </div>

            <!-- Gráficos de Paquetes -->
            <div class="row">
                <?php if ($mostrarMoviles && !empty($datosPaquetesMoviles)): ?>
                    <div class="col-md-6 mb-4">
                        <div class="card grafico-card">
                            <div class="card-body">
                                <h5 class="card-title mb-4">
                                    <i class="fas fa-mobile-alt" style="color: #28a745;"></i> 
                                    Paquetes Móviles Más Consumidos
                                </h5>
                                <div class="grafico-paquetes-container">
                                    <canvas id="graficoPaquetesMoviles"></canvas>
                                </div>
                            </div>
                        </div>
                    </div>
                <?php endif; ?>

                <?php if ($mostrarFijas && !empty($datosPaquetesFijas)): ?>
                    <div class="col-md-6 mb-4">
                        <div class="card grafico-card">
                            <div class="card-body">
                                <h5 class="card-title mb-4">
                                    <i class="fas fa-phone-volume" style="color: #007bff;"></i> 
                                    Paquetes Fijos Más Contratados
                                </h5>
                                <div class="grafico-paquetes-container">
                                    <canvas id="graficoPaquetesFijas"></canvas>
                                </div>
                            </div>
                        </div>
                    </div>
                <?php endif; ?>
            </div>

            <!-- Sección de Empleados y Estados -->
            <div class="card grafico-card">
                <div class="card-body">
                    <ul class="nav nav-tabs nav-tabs-custom" id="empleadosEstadosTab" role="tablist">
                        <?php if ($mostrarMoviles): ?>
                        <li class="nav-item" role="presentation">
                            <button class="nav-link <?php echo ($mostrarFijas) ? '' : 'active'; ?>" id="empleados-moviles-tab" data-bs-toggle="tab" data-bs-target="#empleados-moviles" type="button" role="tab">
                                <i class="fas fa-mobile-alt"></i> Empleados Móviles
                            </button>
                        </li>
                        <li class="nav-item" role="presentation">
                            <button class="nav-link" id="estados-moviles-tab" data-bs-toggle="tab" data-bs-target="#estados-moviles" type="button" role="tab">
                                <i class="fas fa-list"></i> Estados Móviles
                            </button>
                        </li>
                        <?php endif; ?>
                        
                        <?php if ($mostrarFijas): ?>
                        <li class="nav-item" role="presentation">
                            <button class="nav-link <?php echo (!$mostrarMoviles) ? 'active' : ''; ?>" id="empleados-fijas-tab" data-bs-toggle="tab" data-bs-target="#empleados-fijas" type="button" role="tab">
                                <i class="fas fa-phone-volume"></i> Empleados Fijas
                            </button>
                        </li>
                        <li class="nav-item" role="presentation">
                            <button class="nav-link" id="estados-fijas-tab" data-bs-toggle="tab" data-bs-target="#estados-fijas" type="button" role="tab">
                                <i class="fas fa-list"></i> Estados Fijas
                            </button>
                        </li>
                        <?php endif; ?>
                    </ul>
                    
                    <div class="tab-content tab-content-custom" id="empleadosEstadosTabContent">
                        <!-- Tab Empleados Móviles -->
                        <?php if ($mostrarMoviles): ?>
                        <div class="tab-pane fade <?php echo ($mostrarFijas) ? '' : 'show active'; ?>" id="empleados-moviles" role="tabpanel">
                            <h5 class="mb-4"><i class="fas fa-mobile-alt" style="color: #28a745;"></i> Top 10 Empleados con Más Importancia - Móviles</h5>
                            <?php if (!empty($datosEmpleadosMoviles)): ?>
                                <?php foreach ($datosEmpleadosMoviles as $index => $empleado): ?>
                                    <div class="empleado-card d-flex align-items-center">
                                        <div class="ranking-badge"><?php echo $index + 1; ?></div>
                                        <div class="flex-grow-1">
                                            <h6 class="mb-1"><?php echo htmlspecialchars($empleado['agente']); ?></h6>
                                            <small class="text-muted">Agente de ventas</small>
                                        </div>
                                        <div class="text-end">
                                            <span class="badge badge-cantidad bg-success">
                                                <?php echo number_format($empleado['cantidad']); ?> registros
                                            </span>
                                        </div>
                                    </div>
                                <?php endforeach; ?>
                            <?php else: ?>
                                <div class="alert alert-info">
                                    <i class="fas fa-info-circle"></i> No hay datos de empleados para móviles en el período seleccionado.
                                </div>
                            <?php endif; ?>
                        </div>
                        
                        <!-- Tab Estados Móviles -->
                        <div class="tab-pane fade" id="estados-moviles" role="tabpanel">
                            <h5 class="mb-4"><i class="fas fa-list" style="color: #28a745;"></i> Cantidad por Estado - Móviles</h5>
                            <?php if (!empty($datosEstadosMoviles)): ?>
                                <div class="row">
                                    <?php foreach ($datosEstadosMoviles as $estado): ?>
                                        <div class="col-md-6 mb-3">
                                            <div class="estado-card">
                                                <div class="d-flex justify-content-between align-items-center">
                                                    <div>
                                                        <h6 class="mb-1"><?php echo htmlspecialchars($estado['estado']); ?></h6>
                                                        <small class="text-muted">Estado de cronograma</small>
                                                    </div>
                                                    <div>
                                                        <span class="badge badge-cantidad bg-success">
                                                            <?php echo number_format($estado['cantidad']); ?>
                                                        </span>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    <?php endforeach; ?>
                                </div>
                            <?php else: ?>
                                <div class="alert alert-info">
                                    <i class="fas fa-info-circle"></i> No hay datos de estados para móviles en el período seleccionado.
                                </div>
                            <?php endif; ?>
                        </div>
                        <?php endif; ?>
                        
                        <!-- Tab Empleados Fijas -->
                        <?php if ($mostrarFijas): ?>
                        <div class="tab-pane fade <?php echo (!$mostrarMoviles) ? 'show active' : ''; ?>" id="empleados-fijas" role="tabpanel">
                            <h5 class="mb-4"><i class="fas fa-phone-volume" style="color: #007bff;"></i> Top 10 Empleados con Más Importancia - Fijas</h5>
                            <?php if (!empty($datosEmpleadosFijas)): ?>
                                <?php foreach ($datosEmpleadosFijas as $index => $empleado): ?>
                                    <div class="empleado-card d-flex align-items-center">
                                        <div class="ranking-badge"><?php echo $index + 1; ?></div>
                                        <div class="flex-grow-1">
                                            <h6 class="mb-1"><?php echo htmlspecialchars($empleado['agente']); ?></h6>
                                            <small class="text-muted">Agente de ventas</small>
                                        </div>
                                        <div class="text-end">
                                            <span class="badge badge-cantidad bg-primary">
                                                <?php echo number_format($empleado['cantidad']); ?> registros
                                            </span>
                                        </div>
                                    </div>
                                <?php endforeach; ?>
                            <?php else: ?>
                                <div class="alert alert-info">
                                    <i class="fas fa-info-circle"></i> No hay datos de empleados para fijas en el período seleccionado.
                                </div>
                            <?php endif; ?>
                        </div>
                        
                        <!-- Tab Estados Fijas -->
                        <div class="tab-pane fade" id="estados-fijas" role="tabpanel">
                            <h5 class="mb-4"><i class="fas fa-list" style="color: #007bff;"></i> Cantidad por Estado - Fijas</h5>
                            <?php if (!empty($datosEstadosFijas)): ?>
                                <div class="row">
                                    <?php foreach ($datosEstadosFijas as $estado): ?>
                                        <div class="col-md-6 mb-3">
                                            <div class="estado-card">
                                                <div class="d-flex justify-content-between align-items-center">
                                                    <div>
                                                        <h6 class="mb-1"><?php echo htmlspecialchars($estado['estado']); ?></h6>
                                                        <small class="text-muted">Estado de cronograma</small>
                                                    </div>
                                                    <div>
                                                        <span class="badge badge-cantidad bg-primary">
                                                            <?php echo number_format($estado['cantidad']); ?>
                                                        </span>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    <?php endforeach; ?>
                                </div>
                            <?php else: ?>
                                <div class="alert alert-info">
                                    <i class="fas fa-info-circle"></i> No hay datos de estados para fijas en el período seleccionado.
                                </div>
                            <?php endif; ?>
                        </div>
                        <?php endif; ?>
                    </div>
                </div>
            </div>
        <?php else: ?>
            <!-- Sin datos -->
            <div class="sin-datos">
                <i class="fas fa-chart-bar"></i>
                <h4>No hay datos disponibles</h4>
                <p>Seleccione los filtros y genere un reporte para ver los gráficos.</p>
                <p class="text-muted">
                    <i class="fas fa-info-circle"></i> 
                    Seleccione al menos un tipo de servicio (Móviles o Fijas) para generar el reporte.
                </p>
            </div>
        <?php endif; ?>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    <?php if (!empty($datosGrafico) && ($mostrarMoviles || $mostrarFijas)): ?>
        // Configuración del gráfico
        const ctx = document.getElementById('graficoVentas').getContext('2d');
        
        // Preparar datos
        const periodos = <?php echo json_encode($datosGrafico['periodos']); ?>;
        const tipoPeriodo = <?php echo json_encode($datosGrafico['tipo_periodo']); ?>;
        const datosMoviles = <?php echo json_encode($datosGrafico['moviles'] ?? []); ?>;
        const datosFijas = <?php echo json_encode($datosGrafico['fijas'] ?? []); ?>;
        const estadosMoviles = <?php echo json_encode($datosGrafico['estados_moviles'] ?? []); ?>;
        const estadosFijas = <?php echo json_encode($datosGrafico['estados_fijas'] ?? []); ?>;
        
        // Función para generar colores
        function generarColor(baseHue, index, total, tipo) {
            const hue = (baseHue + (index * (360 / total))) % 360;
            const saturation = tipo === 'moviles' ? 70 : 60;
            const lightness = tipo === 'moviles' ? 55 : 50;
            return `hsl(${hue}, ${saturation}%, ${lightness}%)`;
        }
        
        // Función para generar color con transparencia
        function generarColorTransparente(color, alpha) {
            return color.replace(')', `, ${alpha})`).replace('hsl', 'hsla');
        }
        
        // Formatear períodos para mostrar
        const periodosFormateados = periodos.map(periodo => {
            if (tipoPeriodo === 'dias') {
                const fecha = new Date(periodo);
                return fecha.toLocaleDateString('es-ES', { day: '2-digit', month: 'short' });
            } else {
                const fecha = new Date(periodo + '-01');
                return fecha.toLocaleDateString('es-ES', { month: 'short', year: 'numeric' });
            }
        });
        
        // Configurar datasets
        const datasets = [];
        
        // Datasets para móviles por estado
        <?php if ($mostrarMoviles): ?>
        <?php
        $estadosMovilesArray = isset($datosGrafico['estados_moviles']) ? $datosGrafico['estados_moviles'] : [];
        foreach ($estadosMovilesArray as $index => $estado):
        ?>
        datasets.push({
            label: 'Móviles - <?php echo addslashes($estado); ?>',
            data: datosMoviles['<?php echo addslashes($estado); ?>'] || [],
            backgroundColor: generarColorTransparente(generarColor(120, <?php echo $index; ?>, <?php echo count($estadosMovilesArray); ?>, 'moviles'), 0.8),
            borderColor: generarColor(120, <?php echo $index; ?>, <?php echo count($estadosMovilesArray); ?>, 'moviles'),
            borderWidth: 2,
            borderRadius: 8,
            borderSkipped: false,
        });
        <?php endforeach; ?>
        <?php endif; ?>
        
        // Datasets para fijas por estado
        <?php if ($mostrarFijas): ?>
        <?php
        $estadosFijasArray = isset($datosGrafico['estados_fijas']) ? $datosGrafico['estados_fijas'] : [];
        foreach ($estadosFijasArray as $index => $estado):
        ?>
        datasets.push({
            label: 'Fijas - <?php echo addslashes($estado); ?>',
            data: datosFijas['<?php echo addslashes($estado); ?>'] || [],
            backgroundColor: generarColorTransparente(generarColor(240, <?php echo $index; ?>, <?php echo count($estadosFijasArray); ?>, 'fijas'), 0.8),
            borderColor: generarColor(240, <?php echo $index; ?>, <?php echo count($estadosFijasArray); ?>, 'fijas'),
            borderWidth: 2,
            borderRadius: 8,
            borderSkipped: false,
        });
        <?php endforeach; ?>
        <?php endif; ?>
        
        // Crear gráfico
        new Chart(ctx, {
            type: 'bar',
            data: {
                labels: periodosFormateados,
                datasets: datasets
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                plugins: {
                    title: {
                        display: true,
                        text: tipoPeriodo === 'dias' ? 'Ventas por Día' : 'Ventas por Mes',
                        font: {
                            size: 18,
                            weight: 'bold'
                        },
                        color: '#495057'
                    },
                    legend: {
                        display: true,
                        position: 'top',
                        labels: {
                            usePointStyle: true,
                            padding: 20,
                            font: {
                                size: 14,
                                weight: 'bold'
                            }
                        }
                    },
                    tooltip: {
                        backgroundColor: 'rgba(0, 0, 0, 0.8)',
                        titleColor: 'white',
                        bodyColor: 'white',
                        borderColor: '#667eea',
                        borderWidth: 2,
                        cornerRadius: 8,
                        displayColors: true,
                        callbacks: {
                            label: function(context) {
                                return context.dataset.label + ': S/ ' + context.parsed.y.toLocaleString('es-PE', {
                                    minimumFractionDigits: 2,
                                    maximumFractionDigits: 2
                                });
                            }
                        }
                    }
                },
                scales: {
                    x: {
                        stacked: true,
                        grid: {
                            color: 'rgba(0, 0, 0, 0.1)',
                            drawBorder: false
                        },
                        ticks: {
                            color: '#495057',
                            font: {
                                size: 12,
                                weight: 'bold'
                            },
                            maxRotation: tipoPeriodo === 'dias' ? 45 : 0,
                            minRotation: tipoPeriodo === 'dias' ? 45 : 0
                        }
                    },
                    y: {
                        stacked: true,
                        beginAtZero: true,
                        grid: {
                            color: 'rgba(0, 0, 0, 0.1)',
                            drawBorder: false
                        },
                        ticks: {
                            color: '#495057',
                            font: {
                                size: 12,
                                weight: 'bold'
                            },
                            callback: function(value) {
                                return 'S/ ' + value.toLocaleString('es-PE');
                            }
                        }
                    }
                },
                animation: {
                    duration: 2000,
                    easing: 'easeInOutQuart'
                },
                interaction: {
                    intersect: false,
                    mode: 'index'
                }
            }
        });
    <?php endif; ?>
    
    // Gráfico de paquetes móviles
    <?php if ($mostrarMoviles && !empty($datosPaquetesMoviles)): ?>
        const ctxMoviles = document.getElementById('graficoPaquetesMoviles').getContext('2d');
        const paquetesMoviles = <?php echo json_encode($datosPaquetesMoviles); ?>;
        
        const labelsMoviles = paquetesMoviles.map(item => {
            // Truncar texto largo para mejor visualización
            return item.plan_a_evaluar.length > 30 ? 
                item.plan_a_evaluar.substring(0, 30) + '...' : 
                item.plan_a_evaluar;
        });
        const dataMoviles = paquetesMoviles.map(item => item.cantidad);
        
        new Chart(ctxMoviles, {
            type: 'bar',
            data: {
                labels: labelsMoviles,
                datasets: [{
                    label: 'Cantidad',
                    data: dataMoviles,
                    backgroundColor: 'rgba(40, 167, 69, 0.8)',
                    borderColor: 'rgba(40, 167, 69, 1)',
                    borderWidth: 2,
                    borderRadius: 8,
                    borderSkipped: false,
                }]
            },
            options: {
                indexAxis: 'y',
                responsive: true,
                maintainAspectRatio: false,
                plugins: {
                    title: {
                        display: true,
                        text: 'Top 10 Paquetes Móviles',
                        font: {
                            size: 16,
                            weight: 'bold'
                        },
                        color: '#495057'
                    },
                    legend: {
                        display: false
                    },
                    tooltip: {
                        backgroundColor: 'rgba(0, 0, 0, 0.8)',
                        titleColor: 'white',
                        bodyColor: 'white',
                        borderColor: '#28a745',
                        borderWidth: 2,
                        cornerRadius: 8,
                        callbacks: {
                            title: function(context) {
                                const index = context[0].dataIndex;
                                return paquetesMoviles[index].plan_a_evaluar;
                            },
                            label: function(context) {
                                return 'Cantidad: ' + context.parsed.x;
                            }
                        }
                    }
                },
                scales: {
                    x: {
                        beginAtZero: true,
                        grid: {
                            color: 'rgba(0, 0, 0, 0.1)',
                            drawBorder: false
                        },
                        ticks: {
                            color: '#495057',
                            font: {
                                size: 12,
                                weight: 'bold'
                            }
                        }
                    },
                    y: {
                        grid: {
                            color: 'rgba(0, 0, 0, 0.1)',
                            drawBorder: false
                        },
                        ticks: {
                            color: '#495057',
                            font: {
                                size: 11,
                                weight: 'bold'
                            }
                        }
                    }
                },
                animation: {
                    duration: 2000,
                    easing: 'easeInOutQuart'
                }
            }
        });
    <?php endif; ?>
    
    // Gráfico de paquetes fijas
    <?php if ($mostrarFijas && !empty($datosPaquetesFijas)): ?>
        const ctxFijas = document.getElementById('graficoPaquetesFijas').getContext('2d');
        const paquetesFijas = <?php echo json_encode($datosPaquetesFijas); ?>;
        
        const labelsFijas = paquetesFijas.map(item => {
            // Truncar texto largo para mejor visualización
            return item.paquete_contratado.length > 30 ? 
                item.paquete_contratado.substring(0, 30) + '...' : 
                item.paquete_contratado;
        });
        const dataFijas = paquetesFijas.map(item => item.cantidad);
        
        new Chart(ctxFijas, {
            type: 'bar',
            data: {
                labels: labelsFijas,
                datasets: [{
                    label: 'Cantidad',
                    data: dataFijas,
                    backgroundColor: 'rgba(0, 123, 255, 0.8)',
                    borderColor: 'rgba(0, 123, 255, 1)',
                    borderWidth: 2,
                    borderRadius: 8,
                    borderSkipped: false,
                }]
            },
            options: {
                indexAxis: 'y',
                responsive: true,
                maintainAspectRatio: false,
                plugins: {
                    title: {
                        display: true,
                        text: 'Top 10 Paquetes Fijos',
                        font: {
                            size: 16,
                            weight: 'bold'
                        },
                        color: '#495057'
                    },
                    legend: {
                        display: false
                    },
                    tooltip: {
                        backgroundColor: 'rgba(0, 0, 0, 0.8)',
                        titleColor: 'white',
                        bodyColor: 'white',
                        borderColor: '#007bff',
                        borderWidth: 2,
                        cornerRadius: 8,
                        callbacks: {
                            title: function(context) {
                                const index = context[0].dataIndex;
                                return paquetesFijas[index].paquete_contratado;
                            },
                            label: function(context) {
                                return 'Cantidad: ' + context.parsed.x;
                            }
                        }
                    }
                },
                scales: {
                    x: {
                        beginAtZero: true,
                        grid: {
                            color: 'rgba(0, 0, 0, 0.1)',
                            drawBorder: false
                        },
                        ticks: {
                            color: '#495057',
                            font: {
                                size: 12,
                                weight: 'bold'
                            }
                        }
                    },
                    y: {
                        grid: {
                            color: 'rgba(0, 0, 0, 0.1)',
                            drawBorder: false
                        },
                        ticks: {
                            color: '#495057',
                            font: {
                                size: 11,
                                weight: 'bold'
                            }
                        }
                    }
                },
                animation: {
                    duration: 2000,
                    easing: 'easeInOutQuart'
                }
            }
        });
    <?php endif; ?>
    
    // Validación de fechas
    const fechaInicio = document.querySelector('input[name="fecha_inicio"]');
    const fechaFin = document.querySelector('input[name="fecha_fin"]');
    
    function validarFechas() {
        if (fechaInicio.value && fechaFin.value) {
            if (new Date(fechaInicio.value) > new Date(fechaFin.value)) {
                fechaFin.setCustomValidity('La fecha fin debe ser posterior a la fecha inicio');
            } else {
                fechaFin.setCustomValidity('');
            }
        }
    }
    
    fechaInicio.addEventListener('change', validarFechas);
    fechaFin.addEventListener('change', validarFechas);
    
    // Validación de checkboxes
    const form = document.querySelector('form');
    form.addEventListener('submit', function(e) {
        const moviles = document.getElementById('moviles').checked;
        const fijas = document.getElementById('fijas').checked;
        
        if (!moviles && !fijas) {
            e.preventDefault();
            alert('Debe seleccionar al menos un tipo de servicio (Móviles o Fijas)');
            return false;
        }
    });
});
</script>

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