<?php
require_once("clases/Actividad.class.php");
require_once("clases/Proyecto.class.php");

$obj = new Actividad();
$objProyecto = new Proyecto();

$proyecto_id = isset($_GET['proyecto_id']) ? intval($_GET['proyecto_id']) : 0;
//echo $proyecto_id;

// OBTENER DATOS DEL PROYECTO
$proyecto = null;
if ($proyecto_id > 0) {
    if ($objProyecto->BuscarPorCodigo($proyecto_id)) {
        $proyecto = $objProyecto;
    }
}

// LISTA DE ACTIVIDADES
$lista = $obj->ListarPorProyecto($proyecto_id);
?>

<!-- CSS BOOTSTRAP 3 -->
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">

<style>
.gantt-container {
    border: 1px solid #ddd;
    padding: 20px;
    background: #fafafa;
    margin-top: 20px;
}

.gantt-item {
    margin-bottom: 20px;
}

.gantt-bar {
    color: white;
    padding: 5px 10px;
    border-radius: 4px;
    font-size: 12px;
    position: relative;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}
</style>


<div class="panel panel-default">
    <div class="panel-heading">
        <strong>Actividades del Proyecto</strong>
        <button class="btn btn-success btn-xs pull-right" 
                data-toggle="modal" data-target="#modalActividad"
                onclick="nuevaActividad()">
            + Nueva Actividad
        </button>
    </div>

    <div class="panel-body">

        <!-- ============================
             DATOS DEL PROYECTO
        ================================ -->
        <?php if ($proyecto != null) { ?>
        <div class="alert alert-info">
            <h4 style="margin-top:0;">
                <strong><?= $proyecto->getNombre(); ?></strong>
            </h4>

            <p><strong>Fecha Inicio:</strong> <?= date("d/m/Y", strtotime($proyecto->getFechaInicio())); ?></p>
            <p><strong>Fecha Fin:</strong> <?= date("d/m/Y", strtotime($proyecto->getFechaFin())); ?></p>
            <p><strong>Costo Total:</strong> S/ <?= $proyecto->getCostoTotal(); ?></p>
            <p><strong>Estado:</strong> <?= $proyecto->getEstado(); ?></p>
        </div>
        <?php } ?>

        <!-- ============================
             TABLA DE ACTIVIDADES
        ================================ -->
		<div class="row">
			<div class="col-md-3">
				<select id="filtroEstado" class="form-control">
					<option value="">-- Filtrar por Estado --</option>
					<option value="Pendiente">Pendiente</option>
					<option value="En Proceso">En Proceso</option>
					<option value="Completada">Completada</option>
				</select>
			</div>
		</div>
		
		<br>
   <div class="hidden-xs">
        <table class="table table-bordered table-striped table-hover">
            <thead>
                <tr>
                    <th>Actividad</th>
                    <th>Fechas</th>
                    <th>Prioridad</th>
                    <th>Estado</th>
                    <th>Progreso</th>
                    <th>Opciones</th>
                </tr>
            </thead>

            <tbody>
<?php
if ($lista != null) {
    foreach ($lista as $a) {

        // ---- Cálculo Progreso ---- //
        $inicio  = strtotime($a['fecha_inicio']);
        $fin     = strtotime($a['fecha_fin']);
        $hoy     = time();

        $total_dias = ($fin - $inicio) / 86400;
        $avance_dias = ($hoy - $inicio) / 86400;

        if ($avance_dias < 0) $avance_dias = 0;
        if ($avance_dias > $total_dias) $avance_dias = $total_dias;

        $progreso = ($total_dias > 0) ? round(($avance_dias / $total_dias) * 100) : 0;

        // ---- COLOR DINÁMICO ---- //
        $color = "progress-bar-default";

        if ($a['estado'] == "Completada") {
            $color = "progress-bar-success";   // VERDE
        } else {
            if ($hoy > $fin) {
                $color = "progress-bar-danger"; // ROJO
            } elseif ($hoy >= $inicio) {
                $color = "progress-bar-info";   // AZUL
            } else {
                $color = "progress-bar-default"; // GRIS
            }
        }

        echo "<tr class='fila-estado' data-estado='".$a['estado']."'>";
        if ($a['actividad'] == "Actividad") {
			echo "<td><strong>".$a['nombre']."</strong></td>";
		} else {
			echo "<td style='padding-left: 30px;'>
            		<span style='font-size:14px;'>&#8226;</span> ".$a['nombre']."
          		  </td>";
		}
        echo "<td>".date("d/m/Y", strtotime($a['fecha_inicio']))."<br>".date("d/m/Y", strtotime($a['fecha_fin']))."</td>";
        echo "<td>".$a['prioridad']."</td>";
        echo "<td>".$a['estado']."</td>";

        echo "<td>
                <div class='progress'>
                    <div class='progress-bar $color'
                         role='progressbar'
                         aria-valuenow='$progreso'
                         aria-valuemin='0'
                         aria-valuemax='100'
                         style='width: ".$progreso."%'>
                         ".$progreso."%
                    </div>
                </div>
              </td>";

        echo "<td>
                <button class='btn btn-warning btn-xs'
                    data-toggle='modal' data-target='#modalActividad'
                    onclick=\"editarActividad(".$a['id'].",'".$a['nombre']."','".$a['fecha_inicio']."',
                    '".$a['fecha_fin']."','".$a['prioridad']."','".$a['estado']."','".$a['actividad']."',".$a['parent_id'].")\">
                    Editar
                </button>

                <a href='controladores/ActividadController.php?id=".$a['id']."&text=E&proyecto_id=$proyecto_id'
                   class='btn btn-danger btn-xs'
                   onclick=\"return confirm('¿Eliminar esta actividad?')\">
                   Eliminar
                </a>
              </td>";

        echo "</tr>";
    }
}
?>
</tbody>

        </table>
		</div>
		
<div class="panel-group visible-xs" id="accordionMobile">
<?php
if ($lista != null) {
    $i = 1;
    foreach ($lista as $a) {

        // ---- Cálculo Progreso ---- //
        $inicio  = strtotime($a['fecha_inicio']);
        $fin     = strtotime($a['fecha_fin']);
        $hoy     = time();

        $total_dias = ($fin - $inicio) / 86400;
        $avance_dias = ($hoy - $inicio) / 86400;

        if ($avance_dias < 0) $avance_dias = 0;
        if ($avance_dias > $total_dias) $avance_dias = $total_dias;

        $progreso = ($total_dias > 0) ? round(($avance_dias / $total_dias) * 100) : 0;

        // COLOR
        $color = "progress-bar-default";
        if ($a['estado'] == "Completada") $color = "progress-bar-success";
        else if ($hoy > $fin) $color = "progress-bar-danger";
        else if ($hoy >= $inicio) $color = "progress-bar-info";

?>
    <div class="panel panel-default fila-estado" data-estado="<?=$a['estado'] ?>">
        <div class="panel-heading">
            <h4 class="panel-title">
                <a data-toggle="collapse" data-parent="#accordionMobile" href="#c<?= $i ?>">
                  <? if ($a['actividad'] == "Actividad") {
							echo "<td><strong>".$a['nombre']."</strong></td>";
						} else {
							echo "<td style='padding-left: 30px;'>
            					  <span style='font-size:14px;'>&#8226;</span> ".$a['nombre']."
          		  				</td>";
						} ?>
                </a>
            </h4>
        </div>

        <div id="c<?=$i ?>" class="panel-collapse collapse">
            <div class="panel-body">
                <strong>Fechas:</strong><br>
                <?=date("d/m/Y", strtotime($a['fecha_inicio'])) ?> - <?=date("d/m/Y", strtotime($a['fecha_fin'])) ?><br><br>

                <strong>Prioridad:</strong> <?= $a['prioridad'] ?><br>
                <strong>Estado:</strong> <?= $a['estado'] ?><br><br>

                <strong>Progreso:</strong>
                <div class="progress">
                    <div class="progress-bar <?= $color ?>"
                        style="width: <?= $progreso ?>%;">
                        <?= $progreso ?>%
                    </div>
                </div>

                <div>
                    <button class='btn btn-warning btn-xs'
                        data-toggle='modal' data-target='#modalActividad'
                        onclick="editarActividad(
                            <?=$a['id'] ?>,
                            '<?=$a['nombre'] ?>',
                            '<?=$a['fecha_inicio'] ?>',
                            '<?=$a['fecha_fin'] ?>',
                            '<?=$a['prioridad'] ?>',
                            '<?=$a['estado'] ?>',
							'<?=$a['actividad']?>',
    						'<?=$a['parent_id']?>'
                        )">
                        Editar
                    </button>

                    <a class="btn btn-danger btn-xs"
                        href="controladores/ActividadController.php?id=<?= $a['id'] ?>&text=E&proyecto_id=<?= $proyecto_id ?>"
                        onclick="return confirm('¿Eliminar?')">
                        Eliminar
                    </a>
                </div>
            </div>
        </div>
    </div>
<?php 
        $i++;
    }
} 
?>
</div>

<!--GANN GOOGLE -->
<style>
    .toolbar-gantt{
        margin-bottom:15px;
    }
    .toolbar-gantt button, .toolbar-gantt select {
        padding:7px 12px;
        margin-right:5px;
        border:1px solid #888;
        background:#f7f7f7;
        border-radius:4px;
        cursor:pointer;
    }
    #gantt-wrapper{
        background:#fff0f0;
        padding:15px;
        border-radius:10px;
    }
</style>

<h3>Diagrama Gantt – Gestión de Actividades</h3>

<div class="toolbar-gantt">
    <button onclick="cambiarVista('semana')">Semana</button>
    <button onclick="cambiarVista('mes')">Mes</button>
    <button onclick="cambiarVista('anio')">Año</button>

    <button onclick="mover(-1)">◀ Anterior</button>
    <button onclick="mover(1)">Siguiente ▶</button>

    <button onclick="exportarPDF()">Exportar PDF</button>
</div>

<div id="gantt-wrapper">
    <div id="gantt" style="width:100%; height:500px;"></div>
</div>

<!-- Google Charts -->
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>

<!-- html2canvas + jsPDF -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>

<script>
google.charts.load('current', {'packages':['gantt']});
google.charts.setOnLoadCallback(drawChart);

let chart;
let data;
let fechaActual = new Date();
let vista = 'mes'; // vista inicial

function drawChart() {

    data = new google.visualization.DataTable();
    data.addColumn('string', 'ID');
    data.addColumn('string', 'Tarea');
    data.addColumn('string', 'Recurso');
    data.addColumn('date', 'Inicio');
    data.addColumn('date', 'Fin');
    data.addColumn('number', 'Duración');
    data.addColumn('number', 'Porcentaje');
    data.addColumn('string', 'Dependencias');

    data.addRows([
        <?php foreach($lista as $a){ 
            if(!$a["fecha_inicio"] || !$a["fecha_fin"]) continue;

            $fi = date("Y, m-1, d", strtotime($a["fecha_inicio"]));
            $ff = date("Y, m-1, d", strtotime($a["fecha_fin"]));
            $prog = ($a["estado"] == "Completada") ? 100 : 0;

            // Asignación de color por estado
            $color = "#428bca"; 
            if ($a["estado"] == "Completada") $color = "#5cb85c";
            if ($a["estado"] == "En proceso") $color = "#f0ad4e";
            if ($a["estado"] == "Pendiente") $color = "#5bc0de";
            if ($a["estado"] == "Retrasada") $color = "#d9534f";
        ?>
        [
            "ID<?= $a['id'] ?>",
            "<?= $a['nombre'] ?>",
            "<?= $color ?>",  // usamos este campo como color
            new Date(<?= $fi ?>),
            new Date(<?= $ff ?>),
            null,
            <?= $prog ?>,
            null
        ],
        <?php } ?>
    ]);

    let options = {
        height: 500,
        gantt: { trackHeight: 35 }
    };

    chart = new google.visualization.Gantt(document.getElementById('gantt'));
    chart.draw(data, options);
}



// --------------------------------
//   CAMBIO DE VISTA (SEMANA/MES/AÑO)
// --------------------------------
function cambiarVista(tipo) {
    vista = tipo;
    mover(0);
}

function mover(direccion) {
    if (vista === "semana") {
        fechaActual.setDate(fechaActual.getDate() + direccion * 7);
    }
    if (vista === "mes") {
        fechaActual.setMonth(fechaActual.getMonth() + direccion);
    }
    if (vista === "anio") {
        fechaActual.setFullYear(fechaActual.getFullYear() + direccion);
    }

    ajustarVentanaTiempo();
}

function ajustarVentanaTiempo() {

    // Google Gantt NO PERMITE vista nativa,
    // pero sí podemos limitar las fechas visibles.

    let inicio = new Date(fechaActual);
    let fin = new Date(fechaActual);

    if (vista === "semana") fin.setDate(inicio.getDate() + 7);
    if (vista === "mes")   fin.setMonth(inicio.getMonth() + 1);
    if (vista === "anio")  fin.setFullYear(inicio.getFullYear() + 1);

    let viewWindow = {
        gantt: {
            criticalPathEnabled: false,
            innerGridTrack: { fill: '#ffffff' },
            innerGridDarkTrack: { fill: '#f7f7f7' }
        }
    };

    chart.draw(data, viewWindow);
}



// --------------------------------
//   EXPORTACIÓN A PDF
// --------------------------------
async function exportarPDF() {
    const { jsPDF } = window.jspdf;

    const pdf = new jsPDF("landscape", "pt", "a4");

    pdf.setFontSize(18);
    pdf.text("Diagrama Gantt – Exportado desde Sistema", 40, 40);

    const canvas = await html2canvas(document.getElementById("gantt-wrapper"));
    const img = canvas.toDataURL("image/png");

    const imgWidth = pdf.internal.pageSize.getWidth() - 40;
    const imgHeight = canvas.height * (imgWidth / canvas.width);

    pdf.addImage(img, "PNG", 20, 60, imgWidth, imgHeight);
    pdf.save("Gantt.pdf");
}
</script>


-->

		<!-- VISTA GANTT-->
		<h3 class="text-primary">Vista Gantt</h3>
<div class="gantt-container">
<?php
// Solo generar vista Gantt si hay actividades
if (!empty($lista) && is_array($lista)) {

    $minDate = null;
    $maxDate = null;

    // Obtener fechas mínimas y máximas
    foreach ($lista as $a) {
        if ($minDate === null || $a["fecha_inicio"] < $minDate) $minDate = $a["fecha_inicio"];
        if ($maxDate === null || $a["fecha_fin"] > $maxDate) $maxDate = $a["fecha_fin"];
    }

    $totalDiasGantt = (strtotime($maxDate) - strtotime($minDate)) / 86400;
?>
    <h3 class="text-primary">Vista Gantt</h3>
    <div class="gantt-container">

<?php
    foreach ($lista as $a) {

        $inicio = strtotime($a['fecha_inicio']);
        $fin = strtotime($a['fecha_fin']);

        $offset = ((strtotime($a["fecha_inicio"]) - strtotime($minDate)) / 86400) / $totalDiasGantt * 100;
        $width = (($fin - $inicio) / 86400) / $totalDiasGantt * 100;

        // Colores
        $color = "#428bca";
        if ($a["estado"] == "Completada") $color = "#5cb85c";
        if (time() > $fin && $a["estado"] != "Completada") $color = "#d9534f";
?>
        <div class="gantt-item">
            <strong><?= $a["nombre"] ?></strong>
            <div class="gantt-bar"
                style="margin-left: <?= $offset ?>%; width: <?= $width ?>%; background: <?= $color ?>;">
                <?= date("d/m/Y", strtotime($a['fecha_inicio'])) ?> AL <?= date("d/m/Y", strtotime($a['fecha_fin'])) ?>
            </div>
        </div>
<?php 
    } // fin foreach
?>
    </div> <!-- fin gantt-container -->

<?php
} else {
    // MENSAJE ELEGANTE CUANDO NO HAY ACTIVIDADES
    echo "<div class='alert alert-warning' style='margin-top:20px;'>
            <strong>No hay actividades registradas para mostrar el diagrama Gantt.</strong>
          </div>";
}
?>
</div>

		
		
    </div>
</div>
<SCRIPT>
$("#filtroEstado").on("change", function () {
    var estado = $(this).val();

    $(".fila-estado").each(function () {
        if (estado === "" || $(this).data("estado") === estado) {
            $(this).show();
        } else {
            $(this).hide();
        }
    });
});

</script>


<!-- ========== MODAL REGISTRO / EDICIÓN ========== -->
<div id="modalActividad" class="modal fade">
    <div class="modal-dialog">
        <form class="modal-content" method="post" action="controladores/ActividadController.php">

            <div class="modal-header">
                <h4 class="modal-title">Registrar Actividad</h4>
            </div>

            <div class="modal-body">

                <input type="hidden" name="id" id="id">
                <input type="hidden" name="proyecto_id" value="<?= $proyecto_id ?>">

                <div class="form-group">
                    <label>Nombre de la Actividad</label>
                    <input type="text" class="form-control" name="nombre" id="nombre" required>
                </div>

                <div class="form-group">
                    <label>Fecha Inicio</label>
                    <input type="date" class="form-control" name="fecha_inicio" id="fecha_inicio" required>
                </div>

                <div class="form-group">
                    <label>Fecha Fin</label>
                    <input type="date" class="form-control" name="fecha_fin" id="fecha_fin" required>
                </div>

                <div class="form-group">
                    <label>Prioridad</label>
                    <select class="form-control" name="prioridad" id="prioridad">
                        <option value="Alta">Alta</option>
                        <option value="Media">Media</option>
                        <option value="Baja">Baja</option>
                    </select>
                </div>

                <div class="form-group">
                    <label>Estado</label>
                    <select class="form-control" name="estado" id="estado">
                        <option value="Pendiente">Pendiente</option>
                        <option value="En Proceso">En Proceso</option>
                        <option value="Completada">Completada</option>
                    </select>
                </div>
				<div class="form-group">
                    <label>Tipo</label>
                    <select class="form-control" name="actividad" id="actividad">
					<option value="">Seleccionar</option>
                        <option value="Actividad">Actividad</option>
                        <option value="Tarea">Tarea</option>
                    </select>
                </div>
				<div class="form-group" id="div_parent">
					<label>Actividad Padre</label>
					<select class="form-control" name="parent_id" id="parent_id" >
						<option value="">-- Seleccione --</option>
						<?php						
						$A = new Actividad();
						$rs = $A->ListarPorProyectoActividad($proyecto_id); // Solo tipo Actividad
						for($i=0;$i<count($rs);$i++){
						  echo '<option value="'.$rs[$i]["id"].'">'.$rs[$i]["nombre"].'</option>';
						}
					
						?>
					</select>
				</div>
            

            <div class="modal-footer">
                <button class="btn btn-primary" type="submit" name="text" value="G">
                    Guardar
                </button>
                <button class="btn btn-default" data-dismiss="modal">
                    Cerrar
                </button>
            </div>
       </div>
        </form>
    </div>
</div>

<!-- JS -->


<script>

window.nuevaActividad = function () {
    $("#id").val("");
    $("#nombre").val("");
    $("#fecha_inicio").val("");
    $("#fecha_fin").val("");
    $("#prioridad").val("Media");
    $("#estado").val("Pendiente");
    $("#actividad").val("Actividad");
    $("#div_parent").hide();
    $("#parent_id").hide();
    $("#parent_id").val("");
};

window.editarActividad = function(id, nombre, fi, ff, prioridad, estado, actividad, parent_id){
    $("#id").val(id);
    $("#nombre").val(nombre);
    $("#fecha_inicio").val(fi);
    $("#fecha_fin").val(ff);
    $("#prioridad").val(prioridad);
    $("#estado").val(estado);
    $("#actividad").val(actividad);

    if (actividad === "Tarea") {
        $("#div_parent").show();
        $("#parent_id").show();
        $("#parent_id").val(parent_id);
    } else {
        $("#div_parent").hide();
        $("#parent_id").hide();
        $("#parent_id").val("");
    }
};


</script>
<script>
$(document).ready(function(){

    $("#actividad").on("change", function(){
        if ($(this).val() === "Tarea") {
            $("#div_parent").show();
            $("#parent_id").show();     // ? IMPORTANTE
        } else {
            $("#div_parent").hide();
            $("#parent_id").hide();     // ? IMPORTANTE
            $("#parent_id").val("");
        }
    });

});

</script>




