<style>
.img-thumb-path{
    width:100px;
    height:80px;
    object-fit:scale-down;
    object-position:center center;
}
</style>

<div class="card card-outline card-primary rounded-0 shadow">

    <div class="card-header">
        <h3 class="card-title">Lista de Proyectos</h3>

        <?php if (in_array($_settings->userdata('role'), ['ADMIN','SUPERVISOR','GESTOR'])): ?>
        <div class="card-tools">
            <a href="javascript:void(0)"
               id="create_new"
               class="btn btn-sm btn-light text-danger font-weight-bold">
                <span class="fas fa-plus"></span>
                Agregar Nuevo Proyecto
            </a>
        </div>
        <?php endif; ?>
    </div>

    <div class="card-body">
        <div class="container-fluid">

            <table class="table table-bordered table-hover table-striped">
                <thead class="bg-gradient-primary text-light">
                    <tr>
                        <th>#</th>
                        <th>Fecha</th>
                        <th>Proyecto</th>
                        <th>Líder PO</th>
                        <th>Periodo</th>
                        <th>Estado PMO</th>
                        <th>Acción</th>
                    </tr>
                </thead>

                <tbody>
                <?php
                $i = 1;
                $qry = $conn->query("
                    SELECT
                        id,
                        project_name,
                        leader_project,
                        commitment_period,
                        approval_status,
                        created_at
                    FROM projects
                    ORDER BY created_at DESC
                ");

                while($row = $qry->fetch_assoc()):
                ?>
                    <tr>
                        <td class="text-center"><?= $i++ ?></td>

                        <td>
                            <?= !empty($row['created_at'])
                                ? date('Y-m-d', strtotime($row['created_at']))
                                : '—' ?>
                        </td>

                        <td><?= htmlspecialchars($row['project_name']) ?></td>

                        <td><?= $row['leader_project'] ?: '—' ?></td>

                        <td><?= $row['commitment_period'] ?: '—' ?></td>

                        <td class="text-center">
                        <?php
                        switch ((int)$row['approval_status']) {
                            case -1:
                                echo '<span class="badge badge-dark">Cancelado</span>';
                                break;
                            case 0:
                                echo '<span class="badge badge-secondary">Borrador (PO)</span>';
                                break;
                            case 1:
                                echo '<span class="badge badge-primary">Revisión PMO</span>';
                                break;
                            case 2:
                                echo '<span class="badge badge-warning">Observado PMO</span>';
                                break;
                            case 3:
                                echo '<span class="badge badge-info">Coordinación PMO</span>';
                                break;
                            case 4:
                                echo '<span class="badge badge-warning">Observado Coordinador</span>';
                                break;
                            case 5:
                                echo '<span class="badge badge-success">VB Subgerencia</span>';
                                break;
                            case 7:
                                echo '<span class="badge badge-dark">Listo Comité</span>';
                                break;
                            default:
                                echo '<span class="badge badge-light">—</span>';
                        }
                        ?>
                        </td>

                        <td class="text-center">
                            <a class="btn btn-sm btn-outline-dark"
                               href="../?page=projects/view_project&id=<?= $row['id'] ?>">
                                <i class="fas fa-eye"></i> Ver
                            </a>
                        </td>
                    </tr>
                <?php endwhile; ?>
                </tbody>
            </table>

        </div>
    </div>
</div>

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

    $('#create_new').click(function(){
        uni_modal(
            "Nuevo Proyecto",
            "projects/manage_project.php"
        );
    });

    $('.table').DataTable({
        columnDefs: [{ orderable:false, targets: 6 }]
    });
});
</script>

