{% extends "base.html.twig" %}
{% block main %}
    <div class="row">
        <div class="col-md-9">
            <div class="x_panel">
                <div class="x_title">
                    <h2>Partes </h2>
                    <div class="clearfix"></div>
                </div>
                <div class="x_content">
                    <table class="table table-striped DataTable5">
                        <thead>
                            <tr>
                                <th>Nº</th>
                                <th>Proyecto</th>
                                <th>Técnico</th>
                                <th>F. Alta</th>
                                <th>F. Asignacion</th>
                                <th>Establecimiento</th>
                                <th>Estado</th>
                                <th>Duración</th>
                            </tr>
                        <thead>
                        <tbody>
                            {% for proyecto in proyectos %}
                                {% for parte in proyecto.partes if parte.tecnico is not null and parte.fechaFin is null %}
                                    <tr id="parte_{{ parte.id }}">
                                        {% if is_granted("ROLE_CLIENTE_WRITE") or is_granted("ROLE_CLIENTE_READ") %}
                                            <td><a href="{{ path("gestion_parte_cliente_view",{'parte':parte.id})}}">{{ parte.ident }}</a></td>
                                            {% else %}
                                            <td><a href="{{ path("gestion_parte_view",{'parte':parte.id})}}">{{ parte.ident }}</a></td>
                                            {% endif %}
                                        <td>{{ parte.proyecto }}</td>
                                        {% if parte.tecnico is null %}
                                            {% if is_granted("ROLE_CLIENTE_WRITE") or is_granted("ROLE_GESTION")%}
                                                <td id="td_tecnico_{{ parte.id }}">
                                                    <div id="tecnico_parte_{{ parte.id }}">
                                                        <select name="tecnico" onchange="habilitarConfirm('{{ parte.id }}')" class="select2">
                                                            <option>Asignar Técnico</option>
                                                            {% for tec in tecnicos %}
                                                                <option value="{{ tec.id }}">{{ tec }}</option>
                                                            {% endfor %}
                                                        </select>
                                                        {#<button style="visibility: hidden" id="button_{{ parte.id }}" onclick="assign('{{ parte.id }}')"><i class="fas fa-forward"></i></button>#}
                                                    </div>
                                                    <div class="modal fade" id="modal_{{ parte.id }}" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
                                                        <div class="modal-dialog" role="document">
                                                            <div class="modal-content">
                                                                <div class="modal-body">
                                                                    <div class="row text-center">
                                                                        <p>Esta Seguro de asignar el Técnico ?</p>
                                                                    </div>
                                                                </div>
                                                                <div class="modal-footer">
                                                                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Cerrar</button>
                                                                    <button type="button" class="btn btn-primary saveTecnico" onclick="assign('{{ parte.id }}')">Confirmar</button>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div><!-- Modal -->
                                                </td>
                                            {% else %}
                                                <td>
                                                    Sin asignar
                                                </td>
                                            {% endif %}
                                        {% else %}
                                            <td>
                                                {{ parte.tecnico }}
                                            </td>
                                        {% endif %}
                                        <td data-order="{{ parte.fechaAlta.format("U") }}">{{ parte.fechaAlta.format("d-m-Y H:i") }}</td>
                                        <td data-order="{{ parte.fechaAsignacion.format("U") }}">{{ parte.fechaAsignacion.format("d-m-Y H:i") }}</td>
                                        <td>{{ parte.establecimiento}}</td>
                                        {% if (parte.fechaFin is null) and (parte.fechaInicio) is not null %}
                                            <td data-order="2"><i class="fas fa-cog fa-spin"></i></td>
                                            {% elseif (parte.fechaFin is not null) %}
                                            <td data-order="1"><i class="fas fa-check-circle"></i></td>
                                            {% else %}
                                            <td data-order="0"><i class="fas fa-times"></i></td>
                                            {% endif %}
                                        <td data-order="{{ parte.duracion.format('U') }}">{{ parte.duracion|date('%H:%I:%s') }}</td>
                                    {% endfor %}
                                {% endfor %}
                        <tbody>
                    </table>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            {% for proyecto in proyectos %}
                <div class="white-box">
                    <h3 class="box-title">Proyecto {{proyecto}}</h3>
                    <div id="morris-donut-chart-{{proyecto.id}}"></div>
                </div>
                {% set sa = 0 %}
                {% set fin = 0 %}
                {% set can = 0 %}
                {% set proc = 0 %}
                {% for parte in proyecto.partes %}
                    {% if parte.tecnico is null and parte.fechaFin is null %}
                        {% set sa = sa + 1 %}
                    {% elseif parte.fechaInicio is null and parte.fechaFin is null %}
                        {% set proc = proc + 1 %}
                    {% elseif parte.fechaFin is not null %}
                        {% set fin = fin + 1 %}
                    {% elseif parte.fechaInicio is null %}
                    {% endif %}
                {% endfor %}
                <script>
                    $(document).ready(function () {
                    Morris.Donut({
                    element: 'morris-donut-chart-{{proyecto.id}}',
                            data: [
                            {
                            label: "Finalizados",
                                    value:{{fin}},
                            }, {
                            label: "Cancelados",
                                    value:{{can}},
                            }, {
                            label: "Sin Asignar",
                                    value:{{sa}},
                            }, {
                            label: "En proceso",
                                    value:{{proc}}
                            }],
                            resize: true,
                            colors: ['#7ace4c', '#f33155', '#7460ee', '#11a0f8']
                    });
                    });
                </script>
            {% endfor %}
        </div>
    </div>
{% endblock main %}

{% block stylesheets %}
    <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.1/morris.css">
{% endblock stylesheets %}

{% block javascripts %}
    {{ parent() }}
    <script src="//cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.1/morris.min.js"></script>
    <script>
                    function habilitarConfirm(parteId){
                    // document.getElementById("button_"+parteId).style.visibility='visible';
                    $("#modal_" + parteId).modal('show');
                    }
                    function assign(Idparte) {
                    $("#modal_" + Idparte).modal('hide');
                    var IdTecnico = $('#tecnico_parte_' + Idparte).find("select").find(":selected").val();
                    $.ajax({
                    type: "POST",
                            url: "{{ path('gestion_tecnico_update_ajax') }}",
                            data: {parte: Idparte, tecnico: IdTecnico}
                    }).done(function (data) {
                    td_tecnico = document.getElementById('tecnico_parte_' + Idparte);
                    if (!td_tecnico) {
                    new PNotify({
                    type: 'error',
                            text: 'Elemento no Encontrado!'
                    });
                    } else {
                    nombre = data.data["nombre"] + ' ' + data.data["apellidos"];
                    padre = td_tecnico.parentNode;
                    padre.removeChild(td_tecnico);
                    elemento1 = document.createElement('div');
                    elemento1.appendChild(document.createTextNode(nombre));
                    elemento1.id = 'tecnico_asignado_' + IdTecnico;
                    elemento2 = document.getElementById('td_tecnico_' + Idparte);
                    elemento2.appendChild(elemento1);
                    new PNotify({
                    type: 'success',
                            text: 'Técnico Asignado!'
                    });
                    }
                    });
                    }
    </script>
{% endblock javascripts %}