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

    {%block menuTop%}
        {{ render(controller("PortalBundle:Default:topModule",{'idproyectos':idproyectos,'idmodule':idmodule})) }}

    {%endblock%}
        {% block dashboard %}
            <script>
                $(function () {
                    var iddashboard;
                    $('#modalAlert').modal('hide');
                    $("#newDashboardBtn").click(function () {
                        $("#newDashboard").load("{{ path('newDashboard',{'idproyectos':idproyectos}) }}",{$opc:1});
                    });
                    $(".dashboardRoles").click(function () {
                        $("#dashboardRoles").load("{{ path('dashboardRoles',{'idproyectos':idproyectos}) }}",{$iddashboard: $(this).attr('iddashboard') });
                    });
                    $(".BtnDashboardEdit").click(function () {
                        $("#dashboardEdit").load("{{ path('dashboardEdit',{'idproyectos':idproyectos}) }}",{$opc:1, $iddashboard: $(this).attr('iddashboard')});

                    });
                    $(".setDashboardPrimary").click(function () {
                        iddashboard = $(this).attr('iddashboard');
                        $("#alertModal").text("Se definira el Dashboard como principal y se mostrar en la bandeja de entrada, Desea Continua?")
                        $('#modalAlert').modal('toggle');

                    });
                    $("#BtnSetDashboardPrimary").click(function () {
                        $.ajax({
                            type: "POST",
                            url:"{{ path('setDashboardPrimary',{'idproyectos':idproyectos}) }}",
                            data:{$iddashboard :iddashboard}

                        }).done(function (mjs) {
                            if(mjs=='bien') {
                                location.reload();
                            }
                        });

                    });


                })
            </script>
            <div class=" col-lg-10 col-md-12 col-xs-12 col-lg-offset-1 table-bordered">
                <div class=" col-lg-2 col-md-2 col-xs-12 col-lg-offset-10 col-md-offset-10">
                    <button class="btn btn-success" id="newDashboardBtn" data-toggle="tooltip" title="Crear nuevo Dashboard">
                        <span class=" glyphicon glyphicon-plus-sign"></span>
                    </button>
                </div>
                <table class="table-bordered tablesorter-blue  col-lg-10 col-md-12 col-xs-12 col-lg-offset-1 ">
                    <thead>
                    <th>
                        Dashboard
                    </th>
                    <th>
                        Fecha Creacion
                    </th>
                    <th>
                        Accion
                    </th>
                    </thead>
                    <tbody>
                    {%  for dashboard in dashboards %}
                    <tr>
                        <td>{{ dashboard.dashboard }}</td>
                        <td>{{ dashboard.fechaCreacion|date('d/m/Y') }}</td>
                        <td>
                            <div style="text-align: left;" class="col-lg-10">
                            <a href="{{ path('dashboardPreliminar',{'idproyectos':idproyectos, 'iddashboard':dashboard.iddashboard }) }}">
                            <button class="btn btn-info">
                                <span class="glyphicon glyphicon-search" data-toggle="tooltip" title="Ver Estructura del Dashboard"></span>
                            </button>
                                </a>
                            <button  iddashboard="{{ dashboard.iddashboard }}" data-toggle="tooltip" title="Editar Estructura Dashboard" class="btn btn-warning BtnDashboardEdit">
                                <span class=" glyphicon glyphicon-edit"></span>
                            </button>
                            <a href="{{ path('dashboardReporte',{'idproyectos':idproyectos, 'iddashboard':dashboard.iddashboard }) }}">
                            <button class="btn btn-primary">
                                <span class=" glyphicon glyphicon-refresh" data-toggle="tooltip" title="Agregar Reportes o graficas al Dashboard"></span>
                            </button>
                            </a>
                                    <button class="btn btn-info dashboardRoles"iddashboard="{{ dashboard.iddashboard }}">
                                        <span class="glyphicon glyphicon-eye-close" data-toggle="tooltip" title="Dashboard Seguridad"></span>
                                    </button>
                            </div>
                            <div style="text-align: right;" class="col-lg-1">
                                {% if  dashboard.primario == 1%}
                                    <button class="btn btn-success">
                                        <span class="glyphicon glyphicon-ok"></span>
                                    </button>
                                {% else  %}
                                    <button class="btn btn-danger setDashboardPrimary" data-toggle="tooltip" title="Definir Dashboard Principal" iddashboard="{{ dashboard.iddashboard }}">
                                        <span class="glyphicon glyphicon-hand-left"></span>
                                    </button>
                                {% endif %}


                            </div>
                        </td>
                    </tr>
                        {% endfor %}
                    </tbody>
                </table>

            </div>
            <div id="newDashboard"></div>
            <div id="dashboardEdit"></div>
            <div id="dashboardRoles"></div>

            <div class="modal fade" id="modalAlert" tabindex="-1" role="dialog">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                            <h4 class="modal-title">{{'dialog.alerta' | trans}}</h4>
                        </div>
                        <div class="modal-body">
                            <div class="form-group">
                                <p id="alertModal"></p>

                            </div>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-default" data-dismiss="modal">{{'ticketDetail.status.cancel' | trans}}</button>
                            <button type="button" class="btn btn-primary" id="BtnSetDashboardPrimary">{{'ticketDetail.continue' | trans}}</button>

                        </div>
                    </div><!-- /.modal-content -->
                </div><!-- /.modal-dialog -->
            </div><!-- /.modal -->

        {% endblock %}