{% extends "base.html.twig"%}
{% block stylesheets %}
    <link rel="stylesheet" href="{{ asset('css/templateOneBlock.css')}}">
{% endblock %}
{% block titulo %} - <a href="{{path('projectInitial',{ 'idproyectos':idproyectos})}}">{{proyectos.proyecto}}</a> - <a href="{{path(modulo.path,{ 'idproyectos':idproyectos,'idmodule':idmodule})}}">{{modulo.modulo}}</a>{% endblock %}
{% block menuTop %}
    <div class="col-lg-12 col-xs-12" >
        <div>
            {{ render(controller("PortalBundle:Default:topModule",{'idproyectos':idproyectos,'idmodule':idmodule})) }}
        </div>
    </div>
{%endblock %}        

{%block dashboard %}
    <style>
        @media (max-width: 767px) {
            .xs-m-t-0 {
                margin-top:54px;
            }
        }
        #s2id_siteOwner, #s2id_estacion{
            width: 100%;
        }
        #s2id_siteOwner .select2-arrow, #s2id_estacion .select2-arrow{
            background: white !important;
            background-image: none !important;
            border-left: none !important;
            margin-top: 5px !important;
        }
        #s2id_siteOwner .select2-choice, #s2id_estacion .select2-choice{
            display: block;
            width: 100%;
            height: 34px;
            padding: 6px 12px;
            font-size: 14px;
            line-height: 1.42857143;
            color: #555;
            background-color: #fff;
            background-image: none;
            border: 1px solid #ccc;
            border-radius: 4px;
            -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
            box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
            -webkit-transition: border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;
            -o-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
            transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
        }
        #s2id_siteOwner .select2-choice:focus, #s2id_estacion .select2-choice:focus{
            border-color:#66afe9;
            outline:0;
            -webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6);
            box-shadow:inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6)
        }
        #tableMP input[type='text'][readonly]{
            cursor: default !important;
            background-color: white !important;
        }
    </style>
    <script>
        $(function() {
            $(".js-example-basic-single").select2({
                placeholder: "Elegir...",
                allowClear: true
            });

            var meses = ['ENERO', 'FEBRERO', 'MARZO', 'ABRIL', 'MAYO', 'JUNIO', 'JULIO', 'AGOSTO', 'SEPTIEMBRE', 'OCTUBRE', 'NOVIEMBRE', 'DICIEMBRE'];
            var fecha = new Date();
            var m = fecha.getMonth();
            var mes = meses[m];

            $('#cronograma').val(mes + ' ' + fecha.getFullYear());

            $("#cargar").css('display', '');
            $("#showMPS").load("{{ path('showMPS',{'idproyectos':idproyectos}) }}", {cronograma: $('#cronograma').val(), estado: $('#estado').val()});

            $('#btnShowCronograma').click(function(){
                $("#cargar").css('display', '');
                $("#showMPS").load("{{ path('showMPS',{'idproyectos':idproyectos}) }}", {cronograma: $('#cronograma').val(), lider: $('#lider').val(), estado: $('#estado').val()});
            });
        });
    </script>

    <div class="col-sm-12  col-md-12 col-lg-12 col-xs-12   main">

        <div class="col-lg-12 col-xs-12" style="min-height: 300px">
            <div id="div1" class="col-lg-6 col-xs-12 table-bordered" style="height: 250px; border-radius: 5px 0px 0px 0px">
                Lo que debe ejecutar por día para llegar a la meta
            </div>
            <div id="div2" class="col-lg-6 col-xs-12 table-bordered" style="height: 250px; border-radius: 0px 5px 0px 0px">
                Total de ejecución al día vs total que deberia llevar al día
            </div>

            <div class="col-lg-12 col-xs-12  table-bordered" style="min-height: 300px">
                <br>
                <div class="row">
                    <div class="col-md-1"><label>Seleccione Cronograma</label></div>
                    <div class="col-md-2">
                        <select class="form-control" id="cronograma" name="cronograma">
                            <option></option>
                            {% for cronograma in cronograma %}
                                <option value="{{ cronograma.valor }}">{{ cronograma.nombre }}</option>
                            {% endfor %}
                        </select>
                    </div>

                    {% if is_granted("ROLE_PREVENTIVO") %}
                    <div class="col-md-1"><label>Lider</label></div>
                    <div class="col-md-2">
                        <select class="js-example-basic-single" id="lider">
                            <option></option>
                            {% for lider in lideres %}
                                <option value="{{ lider.nombre }}">{{ lider.nombre }}</option>
                            {% endfor %}
                        </select>
                    </div>
                    {% endif %}

                    <div class="col-md-1"><label>{{'ticketDetail.status' | trans | capitalize}}</label></div>
                    <div class="col-md-2">
                        <select class="form-control" id="estado" name="estado">
                            <option></option>
                            {% for estado in estados %}
                                <option value="{{ estado }}">{{ estado }}</option>
                            {% endfor %}
                        </select>
                    </div>

                    <div class="col-md-1 text-center">
                        <button class="btn btn-info" id="btnShowCronograma">Consultar</button>
                    </div>

                    <!--<div class="col-md-1 text-center">
                        <form id="frmExport" action="{{ path('exportarReporte', {idproyectos: idproyectos})}}" method="POST">
                            <input type="hidden" name="cronograma" id="cronograma" />
                            <input type="hidden" name="lider" id="lider" />
                            <input type="hidden" name="estado" id="estado" />


                        </form>

                        <a id="downloadExcel" class="btn btn-info">
                            <span class=" glyphicon glyphicon-download"></span><span> Descargar</span>
                        </a>
                    </div>-->
                </div>
                <div  id="showMPS" class="col-lg-12">
                </div>
            </div>
        </div>
    </div>
{% endblock %}