<?php
// Confirmar sesión
session_start();

if (!isset($_SESSION['loggedin'])) {
    header('Location: index.php');
    exit;
}

include_once('conexion.php');

// Obtener el primer día del mes actual y la fecha actual
$primer_dia_mes = date('Y-m-01'); 
$fecha_actual = date('Y-m-d');

// Lógica para el filtro por fecha
$condicion = "WHERE fecprd BETWEEN '$primer_dia_mes' AND '$fecha_actual'"; // Condición predeterminada
if (isset($_POST['consultar'])) {
    $fecha_inicial = $_POST['fecha_inicial'];
    $fecha_final = $_POST['fecha_final'];

    if (!empty($fecha_inicial) && !empty($fecha_final)) {
        $condicion = "WHERE fecprd BETWEEN '$fecha_inicial' AND '$fecha_final'";
    } else {
        echo "<script>alert('Debe ingresar ambas fechas para realizar la consulta');</script>";
    }
}

// Actualización del número de conos
if (isset($_POST['guardar_cambios'])) {
    $id = $_POST['id_editar'];
    $nuevo_numero = $_POST['nuevo_numero'];

    if (!empty($id) && is_numeric($nuevo_numero)) {
        $sql = "UPDATE prdhvo SET numcns = $nuevo_numero WHERE idprd = $id";
        mysqli_query($conexion, $sql);
        header('Location: produccion.php');
    } else {
        echo "<script>alert('Error: datos no válidos');</script>";
    }
}

// Obtener datos para la gráfica y cálculos
$sql_grafica = "SELECT fecprd, numcns FROM prdhvo $condicion ORDER BY fecprd";
$resultado_grafica = mysqli_query($conexion, $sql_grafica);

$fechas = array();
$conos = array();
$total_conos = 0;

while ($fila = mysqli_fetch_assoc($resultado_grafica)) {
    $fechas[] = $fila['fecprd'];
    $conos[] = $fila['numcns'];
    $total_conos += $fila['numcns'];
}

// Calcular promedio diario
$promedio_diario = (count($fechas) > 0) ? $total_conos / count($fechas) : 0;

// Convertir arrays a formato JSON para JavaScript
$fechas_json = json_encode($fechas);
$conos_json = json_encode($conos);
?>

<!DOCTYPE HTML>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" charset="UTF-8">
    <title>Producción de Huevo</title>
    <link rel="stylesheet" type="text/css" href="style.css">
    <!-- Incluir Chart.js -->
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <style>
        /* Estilos para la ventana modal */
        .modal {
            display: none;
            position: fixed;
            z-index: 1000;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            overflow: auto;
            background-color: rgba(0, 0, 0, 0.4);
            justify-content: center;
            align-items: center;
        }
        .modal-content {
            background-color: white;
            padding: 20px;
            border: 1px solid #888;
            width: 300px;
            margin: auto;
            text-align: center;
            border-radius: 10px;
        }
        .close-btn, .cancel-btn, .save-btn {
            margin-top: 10px;
            padding: 10px 20px;
            border: none;
            border-radius: 5px;
            cursor: pointer;
        }
        .cancel-btn {
            background-color: red;
            color: white;
        }
        .save-btn {
            background-color: green;
            color: white;
        }
        .edit-link {
            text-decoration: underline;
            color: blue;
            cursor: pointer;
        }
        .edit-link:hover {
            color: darkblue;
        }
        /* Estilos para la gráfica */
        #graficaContainer {
            width: 80%;
            margin: 20px auto;
            display: none;
        }
        #chartCanvas {
            background-color: white;
            border: 1px solid #ddd;
            border-radius: 8px;
            box-shadow: 0 0 10px rgba(0,0,0,0.1);
        }
        .btn-grafica {
            background-color: #4CAF50;
            color: white;
            padding: 10px 20px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-size: 16px;
            margin: 10px 0;
        }
        .btn-grafica:hover {
            background-color: #45a049;
        }
        /* Estilo para el promedio */
        .promedio-container {
            text-align: center;
            margin: 20px auto;
            font-size: 18px;
            padding: 15px;
            background-color: #f8f9fa;
            border-radius: 8px;
            box-shadow: 0 2px 5px rgba(0,0,0,0.1);
            max-width: 400px;
            border: 1px solid #dee2e6;
        }
        .promedio-text {
            font-weight: bold;
            color: #2c3e50;
        }
        .promedio-valor {
            color: #e74c3c;
            font-size: 24px;
        }
    </style>
</head>
<body class="loggedin">
    <nav class="navtop">
        <h1 style="color:white;"><?php echo $_SESSION["name"] ?></h1>
        <table width="35%" border="0" style="width: 200px;">
            <tr>
                <td><a href="regproduccion.php" style="color:white;">Registrar Producción</a></td>
                <td><a href="graficaproduccion.php" style="color:white;">Grafica Producción</a></td>
                <td><a target="_top" href="inicio.php" style="color:white;"><i class="fas fa-user-circle"></i>Cerrar</a></td>
            </tr>
        </table>
    </nav>
    <br><br>
    <div id="produccionreg">
        <center>
            <h1>Producción Registrada</h1>
            
            <!-- Formulario de Consulta por Fecha -->
            <form method="post" action="">
                <table border="0" cellpadding="5">
                    <tr>
                        <td><strong>Fecha Inicial:</strong></td>
                        <td>
                            <input type="date" name="fecha_inicial" 
                                   value="<?php echo isset($_POST['fecha_inicial']) ? $_POST['fecha_inicial'] : $primer_dia_mes; ?>" 
                                   required>
                        </td>
                        <td><strong>Fecha Final:</strong></td>
                        <td>
                            <input type="date" name="fecha_final" 
                                   value="<?php echo isset($_POST['fecha_final']) ? $_POST['fecha_final'] : $fecha_actual; ?>" 
                                   required>
                        </td>
                        <td>                            
                            <button type="submit" name="consultar" style="width: 100%; max-width: 150px;"><strong>Consultar</strong></button>
                        </td>
                    </tr>
                </table>
            </form>
            <br>

            <!-- Botón para mostrar/ocultar gráfica -->
            <button id="btnMostrarGrafica" class="btn-grafica">Generar Gráfica</button>
            
            <!-- Contenedor para la gráfica -->
            <div id="graficaContainer">
                <canvas id="chartCanvas"></canvas>
            </div>

            <!-- Tabla de resultados -->
            <?php
            $sql = "SELECT * FROM prdhvo $condicion ORDER BY fecprd";
            $resultado = mysqli_query($conexion, $sql);

            echo "<table border=2 align='center'>
                    <tr>
                        <th>Id</th>
                        <th>Fecha</th>
                        <th>Número de Conos</th>
                        <th>Editar</th>
                    </tr>";
            while ($fila = mysqli_fetch_assoc($resultado)) {
                echo "<tr>
                        <td>" . $fila['idprd'] . "</td>
                        <td>" . $fila['fecprd'] . "</td>
                        <td>" . $fila['numcns'] . "</td>
                        <td>
                            <center>
                                <a href='#' class='edit-link' data-id='" . $fila['idprd'] . "' data-num='" . $fila['numcns'] . "'>Editar</a>
                            </center>
                        </td>
                    </tr>";
            }

            // Agregar el renglón con el total acumulado
            echo "<tr>
                    <td colspan='2' align='right'><strong>Total de Conos:</strong></td>
                    <td><strong>$total_conos</strong></td>
                    <td></td>
                  </tr>";

            echo "</table>";
            
            // Mostrar el promedio diario
            echo "<div class='promedio-container'>
                    <span class='promedio-text'>Promedio diario de producción: </span>
                    <span class='promedio-valor'>" . number_format($promedio_diario, 2) . " conos/día</span>
                  </div>";
            
            mysqli_free_result($resultado);
            ?>
        </center>
    </div>

    <!-- Ventana modal para editar -->
    <div id="editModal" class="modal">
        <div class="modal-content">
            <h2>Editar Número de Conos</h2>
            <form method="post" action="">
                <input type="hidden" name="id_editar" id="id_editar">
                <label for="nuevo_numero"><strong>Número de Conos:</strong></label>
                <input type="number" name="nuevo_numero" id="nuevo_numero" required>
                <br>
                <button type="button" class="cancel-btn" id="cancelar">Cancelar</button>
                <button type="submit" class="save-btn" name="guardar_cambios">Guardar</button>
            </form>
        </div>
    </div>

    <script>
        // Mostrar el modal con datos precargados
        const editLinks = document.querySelectorAll('.edit-link');
        const modal = document.getElementById('editModal');
        const idField = document.getElementById('id_editar');
        const numeroField = document.getElementById('nuevo_numero');
        const cancelButton = document.getElementById('cancelar');

        editLinks.forEach(link => {
            link.addEventListener('click', (e) => {
                e.preventDefault();
                const id = link.getAttribute('data-id');
                const numero = link.getAttribute('data-num');

                idField.value = id;
                numeroField.value = numero;

                modal.style.display = 'flex';
            });
        });

        // Cerrar el modal
        cancelButton.addEventListener('click', () => {
            modal.style.display = 'none';
        });

        // Cerrar el modal al hacer clic fuera de él
        window.addEventListener('click', event => {
            if (event.target == modal) {
                modal.style.display = 'none';
            }
        });

        // Mostrar/ocultar gráfica
        const btnMostrarGrafica = document.getElementById('btnMostrarGrafica');
        const graficaContainer = document.getElementById('graficaContainer');
        
        btnMostrarGrafica.addEventListener('click', function() {
            if (graficaContainer.style.display === 'none' || graficaContainer.style.display === '') {
                graficaContainer.style.display = 'block';
                dibujarGrafica();
                btnMostrarGrafica.textContent = 'Ocultar Gráfica';
            } else {
                graficaContainer.style.display = 'none';
                btnMostrarGrafica.textContent = 'Generar Gráfica';
            }
        });

        // Función para dibujar la gráfica
        function dibujarGrafica() {
            const fechas = <?php echo $fechas_json; ?>;
            const conos = <?php echo $conos_json; ?>;
            
            const ctx = document.getElementById('chartCanvas').getContext('2d');
            
            // Destruir gráfica anterior si existe
            if (window.myChart) {
                window.myChart.destroy();
            }
            
            window.myChart = new Chart(ctx, {
                type: 'bar',
                data: {
                    labels: fechas,
                    datasets: [{
                        label: 'Número de Conos Producidos',
                        data: conos,
                        backgroundColor: 'rgba(54, 162, 235, 0.5)',
                        borderColor: 'rgba(54, 162, 235, 1)',
                        borderWidth: 1
                    }]
                },
                options: {
                    responsive: true,
                    scales: {
                        y: {
                            beginAtZero: true,
                            title: {
                                display: true,
                                text: 'Número de Conos'
                            }
                        },
                        x: {
                            title: {
                                display: true,
                                text: 'Fecha'
                            }
                        }
                    }
                }
            });
        }
    </script>
</body>
</html>