{% extends 'base.html.twig' %}

{% block title %}Proyecto {{ proyecto.proyecto }}{% endblock %}
{% block bread %}
<nav aria-label="breadcrumb">
    <ol class="breadcrumb">
        <li class="breadcrumb-item"><a href="{{ path('home') }}">Inicio</a></li>
        <li class="breadcrumb-item"><a href="{{ path('radar') }}">Proyectos en el radar</a></li>
        <li class="breadcrumb-item"><a href="{{ path('sector_show', {'id': proyecto.sector.id}) }}">{{ proyecto.sector.nombre }}</a></li>
        <li class="breadcrumb-item"><a href="#">{{ proyecto.proyecto }}</a></li>
    </ol>
</nav>
{% endblock %}
{% block body %}
<center><h3>{{ proyecto.proyecto }}</h3></center>
<br>
<br>
<div class="row">
    <div class="col-lg-6">
        <table class="table table-bordered">
            <tr>
                <td><b>Lugar:</b> {{ proyecto.municipio.nombre }} {{ proyecto.municipio.departamento.nombre }} </td>
                <td><b>Responsable Contratación:</b>  {{ proyecto.responsableContratacion }}</td>
            </tr>
            <tr>
                <td><b>Contratista:</b> {{ proyecto.contratista }}</td>
                <td><b>Interventor:</b> {{ proyecto.interventoria }}</td>
            </tr>
            <tr>
                <td><b>Fecha Inicio:</b> {{ proyecto.fechaInicio | date("Y-m-d") }}</td>
                <td><b>Fecha Fin:</b> {{ proyecto.fechaTerminacionActual | date("Y-m-d") }}</td>
            </tr>
            {% if proyecto.sector.nombre == "Vivienda" %}
            <tr>
                <td><b>Viviendas contratadas:</b> {{ proyecto.proyectoVivienda.viviendasContratadas }}</td>
                <td><b>Viviendas Entregadas:</b> {{ proyecto.proyectoVivienda.totalViviendasEntregadas }}</td>
            </tr>
            <tr>
                <td><b>Viviendas Terminadas sin Habitabilidad:</b> {{ proyecto.proyectoVivienda.terminadasSinHabitalidad }}</td>
                <td><b>Viviendas en Ejecución:</b> {{ proyecto.proyectoVivienda.ejecucion }}</td>
            </tr>
            {% endif %}
            <tr>
                <td><b>Estado Contrato:</b> {{ proyecto.estadoContrato }}</td> 
                <td><b>Estado en el radar:</b> <li style="list-style:none;"><i class="fa fa-check" aria-hidden="true" style="background-color: {{proyecto.proyectoEstado.color}} ; color: #fff;padding: 5px;border-radius: 50%;margin-right: 0.5rem;"></i>{{ proyecto.proyectoEstado.nombre }}</td>
            </tr>
        </table>
        
    </div>
    <div class="col-lg-6">
        
        <center><h3> Último porcentaje de avance </h3></center>
        <canvas id="myPieChart" width="100%" ></canvas>
    </div>
    <div class="col-lg-12">
        <br>
        <h3> <center>Situación encontrada</center>  </h3>
        <br>
        <p>
            {{ proyecto.situacionEncontrada|raw|nl2br }}
        </p>
    </div>
    <div class="col-lg-12"> 
        <br>
        <center><h3>Acciones emprendidas para la reactivación del proyecto</h3></center>
        <br>
        <ul class="nav nav-pills" id="pills-tab" role="tablist">
            {% for key, anio in anios %}
                {% if key == 0 %}
                    <li class="nav-item" role="presentation">
                        <button class="nav-link active" id="pills-{{ anio["anio"] }}-tab" data-bs-toggle="pill" data-bs-target="#pills-{{ anio["anio"] }}" type="button" role="tab" aria-controls="pills-{{ anio["anio"] }}" aria-selected="false">Año {{ anio["anio"] }}</button>
                    </li>
                    {% else %}
                    <li class="nav-item" role="presentation">
                        <button class="nav-link" id="pills-{{ anio["anio"] }}-tab" data-bs-toggle="pill" data-bs-target="#pills-{{ anio["anio"] }}" type="button" role="tab" aria-controls="pills-{{ anio["anio"] }}" aria-selected="false">Año {{ anio["anio"] }}</button>
                    </li>
                {% endif %}
            {% endfor %}
        </ul>
        <div class="tab-content" id="pills-tabContent">
            {% for key, anio in anios %}
                {% if key == 0 %}
                    <div class="tab-pane show active" id="pills-{{ anio["anio"] }}" role="tabpanel" aria-labelledby="pills-{{ anio["anio"] }}-tab">
                        <ul class="timeline">
                            {% for seg in seguimientos %}
                                {% if seg.fecha|date("Y") ==  anio["anio"] %}
                                <li>
                                    <a><b>{{ seg.fecha|date("Y-M") }}</b></a>
                                    <p>{{seg.descripcion|raw|nl2br}}</p>
                                </li>
                                {% endif %}
                            {% endfor %}
                        </ul>
                    </div>
                    {% else %}
                    <div class="tab-pane show" id="pills-{{ anio["anio"] }}" role="tabpanel" aria-labelledby="pills-{{ anio["anio"] }}-tab">
                        <ul class="timeline">
                            {% for seg in seguimientos %}
                                {% if seg.fecha|date("Y") ==  anio["anio"] %}
                                <li>
                                    <a><b>{{ seg.fecha|date("Y-M") }}</b></a>
                                    <p>{{seg.descripcion|raw|nl2br}}</p>
                                </li>
                                {% endif %}
                            {% endfor %}
                        </ul>
                    </div>
                {% endif %}
            {% endfor %}
        </div>
    </div>
</div>

{% endblock %}
{% block javascripts %}
<script type="text/javascript" charset="utf8" src="https://cdn.jsdelivr.net/npm/chart.js@2.9.4/dist/Chart.min.js"></script>
<script>
var ctx = document.getElementById('myPieChart').getContext('2d');
data = {
    datasets: [{
        data: [ {{ proyecto.porcentajeEjecucion }},{{ 100 - proyecto.porcentajeEjecucion }} ],
        backgroundColor: [
            'rgba(77, 181, 60, 1)',
            'rgba(210, 5, 24, 1)',
        ]
    }],

    // These labels appear in the legend and in the tooltips when hovering different arcs
    labels: [
        'Completado',
        'Restante',
    ]
};
var myPieChart = new Chart(ctx, {
    type: 'pie',
    data: data,
});
</script>

{% endblock %}