<?php
session_start();
require("clases/Proyecto.class.php");
$obj = new Proyecto();

$accion = "R";  // Registrar por defecto
$titulo = "Registrar Proyecto";

// Si viene desde editar
if(isset($_GET["id"])){
    if($obj->BuscarPorCodigo($_GET["id"])){
        $accion = "M";
        $titulo = "Modificar Proyecto";
        $idproyecto = $obj->getIdproyecto();
        $nombre     = $obj->getNombre();
        $finicio    = $obj->getFechaInicio();
        $ffinal     = $obj->getFechaFin();
        $costo      = $obj->getCostoTotal();
        $estado     = $obj->getEstado();
    }
}
?>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Mantenimiento de Proyectos</title>

    <!-- BOOTSTRAP 3 -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
	<link rel="stylesheet" href="https://cdn.datatables.net/1.10.25/css/dataTables.bootstrap.min.css">


    <style>
        body { background: #f5f5f5; }
        .panel { border-radius: 10px; }
        .panel-heading { font-size: 18px; font-weight: bold; }
        .table th { background: #000000; color: #fff; }
        .btn-primary { border-radius: 20px; }
        .btn-success { border-radius: 20px; }
        .btn-warning { border-radius: 20px; }
        .btn-danger { border-radius: 20px; }
    </style>

</head>
<body>

<div class="container">

    <!-- T�TULO -->
    <div class="row">
        <div class="col-md-12 text-center">
            <h2 style="margin-top:20px;">Gesti&oacute;n de Proyectos</h2>
            <hr>
        </div>
    </div>



   

        <!-- LISTADO -->
        <div class="col-md-15">

            <div class="panel panel-default">
                <div class="panel-heading">Listado de Proyectos
				
					<button class="btn btn-success" data-toggle="modal" data-target="#modalProyecto">
						<i class="glyphicon glyphicon-plus"></i> Nuevo Proyecto
					</button>
				
				</div>
				
                <div class="panel-body">

                    <!-- Vista modo PC (tabla normal) -->
					<style>
    /* Estilo general de la tabla */
    .table-modern {
        background: #fff;
        border-radius: 6px;
        overflow: hidden;
        box-shadow: 0 2px 6px rgba(0,0,0,0.1);
    }

    /* Encabezado elegante */
    .table-modern thead {
        background: #2c3e50;
        color: #fff;
        font-size: 14px;
        text-transform: uppercase;
        letter-spacing: 0.03em;
    }

    /* Filas */
    .table-modern tbody tr:hover {
        background: #f4f7f9 !important;
        cursor: pointer;
    }

    /* Celdas */
    .table-modern td, 
    .table-modern th {
        vertical-align: middle !important;
        padding: 10px 12px !important;
    }

    /* Badge para estados */
    .estado-badge {
        padding: 4px 8px;
        border-radius: 4px;
        color: #fff;
        font-size: 12px;
    }
    .estado-activo { background: #27ae60; }
    .estado-pendiente { background: #f39c12; }
    .estado-cerrado { background: #c0392b; }
</style>

<div class="table-responsive hidden-xs">
    <table class="table table-modern table-bordered table-hover">
        <thead>
            <tr>
                <th>Proyecto</th>
                <th>Inicio</th>
                <th>Fin</th>
                <th>Costo</th>
                <th>Estado</th>
                <th colspan="3">Opciones</th>
            </tr>
        </thead>
        <tbody>
        <?php
        $lista = $obj->Listar("");
        if($lista != null){
            foreach($lista as $d){

                // Determinar badge según estado
                $estado = strtolower($d['estado']);
                $badgeClass = "estado-pendiente";

                if($estado == "activo" || $estado == "en proceso") $badgeClass = "estado-activo";
                if($estado == "cerrado" || $estado == "finalizado") $badgeClass = "estado-cerrado";

                echo "<tr>";
                
                echo "<td><strong>".$d['nombre']."</strong></td>";
                echo "<td>".date("d/m/Y", strtotime($d['fecha_inicio']))."</td>";
                echo "<td>".date("d/m/Y", strtotime($d['fecha_fin']))."</td>";
                echo "<td><strong>S/. ".$d['costo_total']."</strong></td>";
                echo "<td><span class='estado-badge $badgeClass'>".$d['estado']."</span></td>";
                echo "<td>
                        <a href='#' class='btn btn-warning btn-xs btnEditar'
						   data-id='".$d['id']."'
						   data-nombre='".$d['nombre']."'
						   data-inicio='".$d['fecha_inicio']."'
						   data-fin='".$d['fecha_fin']."'
						   data-costo='".$d['costo_total']."'
						   data-estado='".$d['estado']."'>
						   <i class='glyphicon glyphicon-pencil'></i>
						</a>
						</td>";
				echo "<td>
                        <a href='controladores/ProyectoController.php?id=".$d['id']."&text=E' 
                           class='btn btn-danger btn-xs'
                           onclick=\"return confirm('¿Seguro de eliminar este proyecto?');\">
                            <i class='glyphicon glyphicon-trash'></i> 
                        </a>
						</td>";
				echo "<td>			
                        <a href='listaractividad.php?proyecto_id=".$d['id']."' 
                           class='btn btn-primary btn-xs'>
                            <i class='glyphicon glyphicon-list-alt'></i> 
                        </a>
                      </td>";
                echo "</tr>";
            }
        }
        ?>
        </tbody>
    </table>
</div>



<!-- Vista modo m�vil (acordeones) -->
<div class="visible-xs">
    <div class="panel-group" id="accordionMobile">
        <?php
        if($lista != null){
            foreach($lista as $d){
                $idAcc = "proj".$d['id'];
                echo "
                <div class='panel panel-default'>
                    <div class='panel-heading'>
                        <h4 class='panel-title'>
                            <a data-toggle='collapse' data-parent='#accordionMobile'
                                href='#$idAcc'><span class='glyphicon glyphicon-file' aria-hidden='true'></span>
                              ".$d['nombre']."
                            </a>
                        </h4>
                    </div>

                    <div id='$idAcc' class='panel-collapse collapse'>
                        <div class='panel-body'>
                            <p><strong>ID:</strong> ".$d['id']."</p>
                            <p><strong>Inicio:</strong> ".date("d/m/Y", strtotime($d['fecha_inicio']))."</p>
                            <p><strong>Fin:</strong> ".date("d/m/Y", strtotime($d['fecha_fin']))."</p>
                            <p><strong>Costo:</strong> S/. ".$d['costo_total']."</p>
                            <p><strong>Estado:</strong> ".$d['estado']."</p>

                            <div class='text-center'>
                                <a href='#' class='btn btn-warning btn-xs btnEditar'
								   data-id='".$d['id']."'
								   data-nombre='".$d['nombre']."'
								   data-inicio='".$d['fecha_inicio']."'
								   data-fin='".$d['fecha_fin']."'
								   data-costo='".$d['costo_total']."'
								   data-estado='".$d['estado']."'>
								   <i class='glyphicon glyphicon-pencil'></i> Editar
								</a>
                                <a href='controladores/ProyectoController.php?id=".$d['id']."&text=E' class='btn btn-danger btn-sm' onclick=\"return confirm('Seguro de eliminar este proyecto?');\">Eliminar</a>
								<a href='listaractividad.php?proyecto_id=".$d['id']."' class='btn btn-primary btn-sm'>Actividades</a>
                            </div>
                        </div>
                    </div>
                </div>";
            }
        }
        ?>
    </div>
</div>



                </div>
            </div>

        </div>

    </div> <!-- row -->

</div> <!-- container -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>

<script src="https://cdn.datatables.net/1.10.25/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.25/js/dataTables.bootstrap.min.js"></script>

<script>
$(document).ready(function() {
    $('#tablaProyectos').DataTable({
        "language": {
            "url": "//cdn.datatables.net/plug-ins/1.10.25/i18n/Spanish.json"
        },
        "pageLength": 5
    });
});
</script>

<script>
$(document).on("click", ".btnEditar", function() {

    $("#tituloModal").text("Modificar Proyecto");
    $("#accion").val("M");

    $("#idproyecto").val($(this).data("id"));
    $("#nombre").val($(this).data("nombre"));
    $("#finicio").val($(this).data("inicio"));
    $("#ffinal").val($(this).data("fin"));
    $("#costo").val($(this).data("costo"));
    $("#estado").val($(this).data("estado"));

    $("#modalProyecto").modal("show");
});

// Cuando se abre para registrar
$("[data-target='#modalProyecto']").on("click", function(){
    $("#tituloModal").text("Registrar Proyecto");
    $("#accion").val("R");
    $("#formProyecto")[0].reset();
});
</script>

<!-- =================== MODAL PROYECTO =================== -->
<div id="modalProyecto" class="modal fade" role="dialog">
  <div class="modal-dialog modal-lg">

    <!-- Modal contenido -->
    <div class="modal-content">
      <div class="modal-header bg-success" style="color:white;">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title" id="tituloModal">Registrar Proyecto</h4>
      </div>

      <div class="modal-body">

        <form id="formProyecto" method="POST" action="controladores/ProyectoController.php">

            <input type="hidden" name="text" id="accion" value="R">
            <input type="hidden" name="idproyecto" id="idproyecto">

            <div class="row">
                <div class="col-md-6">
                    <div class="form-group">
                        <label>Nombre del Proyecto</label>
                        <input type="text" class="form-control" name="nombre" id="nombre" onkeyup="this.value = this.value.toUpperCase();" required>
                    </div>
                </div>

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

                <div class="col-md-3">
                    <div class="form-group">
                        <label>Fecha Finalización</label>
                        <input type="date" class="form-control" name="ffinal" id="ffinal" required>
                    </div>
                </div>

                <div class="col-md-4">
                    <div class="form-group">
                        <label>Costo Total (S/.)</label>
                        <input type="number" class="form-control" name="costo" id="costo" step="0.01" required>
                    </div>
                </div>

                <div class="col-md-4">
                    <div class="form-group">
                        <label>Estado</label>
                        <select class="form-control" name="estado" id="estado" required>
                            <option value="PENDIENTE">PENDIENTE</option>
                            <option value="ACTIVO">ACTIVO</option>
                            <option value="FINALIZADO">FINALIZADO</option>
                        </select>
                    </div>
                </div>
            </div>

        </form>

      </div>

      <div class="modal-footer">
        <button type="submit" form="formProyecto" class="btn btn-success">
            Guardar
        </button>
        <button type="button" class="btn btn-default" data-dismiss="modal">Cerrar</button>
      </div>

    </div>
  </div>
</div>
<!-- =================== FIN MODAL =================== -->

</body>
</html>
