<?php
require_once("clases/Dashboard.class.php");
require_once("clases/DBManager.class.php");



/*if (!isset($_GET["proyecto_id"])) {
    die("Error: Falta ID de proyecto");
}*/

$proyecto_id = intval($_GET["proyecto_id"]);
$dash = new Dashboard();
$proyectos = $dash->ListarProyectos();
// Resumen financiero
$resumen = $dash->ResumenFinancieroProyecto($proyecto_id);



// Gastos por tipo
$gastosTipo = $dash->GastosPorTipo($proyecto_id);

// Gastos mensuales
$gastosMensuales = $dash->GastosMensuales($proyecto_id);
?>

<!DOCTYPE html>
<html>
<head>
    <title>Dashboard del Proyecto</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

    <style>
        body { background: #f4f6f9; }
        .card { border-radius: 10px; }
    </style>
</head>

<body>
<form method="GET" class="mb-4">
    <div class="card p-3">
        <label><b>Seleccione un proyecto:</b></label>
        <div class="row">
            <div class="col-md-8">
                <select name="proyecto_id" class="form-control" onchange="this.form.submit()">
                    <option value="">-- Seleccione --</option>

                    <?php foreach ($proyectos as $p): ?>
                        <option value="<?= $p['id'] ?>" 
                            <?= ($p['id'] == $proyecto_id) ? 'selected' : '' ?>>
                            <?= $p['nombre'] ?>
                        </option>
                    <?php endforeach; ?>
                </select>
            </div>

            <div class="col-md-4">
                <button class="btn btn-primary btn-block">Ver dashboard</button>
            </div>
        </div>
    </div>
</form>


<div class="container mt-4">

    <h2 class="text-center mb-4">Dashboard del Proyecto ID: <?= $proyecto_id ?></h2>

    <!-- ===== TARJETAS DEL RESUMEN ===== -->
    <div class="row">

        <div class="col-md-3 col-6 mb-3">
            <div class="card bg-primary text-white shadow text-center">
                <div class="card-body">
                    <h5>Costo Total</h5>
                    <h4>S/ <?= number_format($resumen["costo_total"],2) ?></h4>
                </div>
            </div>
        </div>

        <div class="col-md-3 col-6 mb-3">
            <div class="card bg-success text-white shadow text-center">
                <div class="card-body">
                    <h5>Total Desembolsado</h5>
                    <h4>S/ <?= number_format($resumen["total_desembolsos"],2) ?></h4>
                </div>
            </div>
        </div>

        <div class="col-md-3 col-6 mb-3">
            <div class="card bg-danger text-white shadow text-center">
                <div class="card-body">
                    <h5>Total Gastado</h5>
                    <h4>S/ <?= number_format($resumen["total_gastos"],2) ?></h4>
                </div>
            </div>
        </div>

        <div class="col-md-3 col-6 mb-3">
            <div class="card bg-warning shadow text-center">
                <div class="card-body">
                    <h5>Saldo Disponible</h5>
                    <h4>S/ <?= number_format($resumen["saldo_desembolsos"],2) ?></h4>
                </div>
            </div>
        </div>

    </div>

    <!-- ===== 2 COLUMNAS EN PC, 1 EN CELULAR ===== -->
    <div class="row">

        <div class="col-md-6 col-12 mb-4">
            <div class="card h-100">
                <div class="card-header bg-secondary text-white">
                    Comparacion: Desembolsos vs Gastos
                </div>
                <div class="card-body">
                    <canvas id="chartDesVsGas"></canvas>
                </div>
            </div>
        </div>

        <div class="col-md-6 col-12 mb-4">
            <div class="card h-100">
                <div class="card-header bg-danger text-white">
                    Gastos por Tipo de Gasto
                </div>
                <div class="card-body">
                    <canvas id="chartTipo"></canvas>
                </div>
            </div>
        </div>

        <div class="col-md-6 col-12 mb-4">
            <div class="card h-100">
                <div class="card-header bg-info text-white">
                    Gastos Mensuales (Linea de Tiempo)
                </div>
                <div class="card-body">
                    <canvas id="chartMensual"></canvas>
                </div>
            </div>
        </div>

        <div class="col-md-6 col-12 mb-4">
            <div class="card h-100">
                <div class="card-header bg-primary text-white">
                    Comparativa: Presupuesto vs Ejecucion
                </div>
                <div class="card-body">
                    <canvas id="chartPresupuesto"></canvas>
                </div>
            </div>
        </div>

    </div>

</div>



<script>
// ====================
// GASTOS POR TIPO
// ====================
new Chart(document.getElementById('chartTipo'), {
    type: 'pie',
    data: {
        labels: [
            <?php 
                foreach ($gastosTipo as $g) {
                    echo "'" .$g["tipo"]. "',";
                }
            ?>
        ],
        datasets: [{
            data: [
                <?php 
                    foreach ($gastosTipo as $g) {
                        echo $g["total"] . ",";
                    }
                ?>
            ]
        }]
    }
});

// ====================
// GASTOS MENSUALES
// ====================
new Chart(document.getElementById('chartMensual'), {
    type: 'line',
    data: {
        labels: [
            <?php 
                foreach ($gastosMensuales as $g) {
                    echo "'" .$g["periodo"]. "',";
                }
            ?>
        ],
        datasets: [{
            label: "Gastos (S/)",
            data: [
                <?php 
                    foreach ($gastosMensuales as $g) {
                        echo $g["total"] . ",";
                    }
                ?>
            ],
            fill: false,
            tension: 0.3
        }]
    }
});

new Chart(document.getElementById('chartDesVsGas'), {
    type: 'bar',
    data: {
        labels: ['Desembolsos', 'Gastos'],
        datasets: [{
            data: [
                <?= $resumen["total_desembolsos"] ?>,
                <?= $resumen["total_gastos"] ?>
            ]
        }]
    }
});


new Chart(document.getElementById('chartPresupuesto'), {
    type: 'bar',
    data: {
        labels: ['Costo Total', 'Total Gastado', 'Saldo por Ejecutar'],
        datasets: [{
            data: [
                <?= $resumen["costo_total"] ?>,
                <?= $resumen["total_gastos"] ?>,
                <?= $resumen["costo_total"] - $resumen["total_gastos"] ?>
            ]
        }]
    },
    options: {
        indexAxis: 'y',
        scales: { x: { beginAtZero: true } }
    }
});


</script>

</body>
</html>
