{% 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" >
        {# if (idproyectos < 1000) #}
            <div class="col-lg-12 col-xs-12" >
                {{ render(controller("PortalBundle:Default:topModule",{'idproyectos':idproyectos,'idmodule':idmodule})) }}
            </div>
        {# else %}
            <div class="col-lg-12 col-xs-12" >
                {{ render(controller("PortalBundle:Default:topModuleMx",{'idproyectos':idproyectosp,'idmodule':idmodule, 'idproyecto':idproyectos})) }}
            </div>
        {% endif #}
    </div>
{%endblock %}

{%block dashboard %}

    <style>
        .modal.modal-wide .modal-dialog {
            width: 90%;
        }
        .modal-wide .modal-body {
            overflow-y: auto;
        }


        .js-example-basic-single{
            width: 100%;
        }
        .js-example-basic-single .select2-arrow {
            background: white !important;
            background-image: none !important;
            border-left: none !important;
            margin-top: 5px !important;
        }
        .js-example-basic-single .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;
        }
        .js-example-basic-single .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)
        }
    </style>


<script>


    $(function () {
        var idproy='{{idproyectos}}';

        var columna = [
            { "data": "ubicacion" },
            { "data": "categoria" },
            { "data": "codigo" },
            { "data": "descripcion" },
            { "data": "serie"},
            { "data": "cantidad" },
        ];

        if (idproy >= 1000){
            var columna = [
                { "data": "ubicacion", visible:false },
                { "data": "categoria" },
                { "data": "codigo" },
                { "data": "descripcion" },
                { "data": "serie", visible:false },
                { "data": "cantidad" },
            ];
        }
        var table = $('#example').DataTable( {
            dom: 'Bfrtip',
            "ajax": {
                "url": "{{ path('showReportAlmacen',{'idproyectos':idproyectos}) }}",
                "type": "POST",
                data:  function( d ) {
                    d.idproveedor= $('#idproveedor').val();
                }
            },
            columns: columna,
            lengthMenu: [
                [  25, 50, -1 ],
                [ '10 rows', '25 rows', '50 rows', 'Show all' ]
            ],
            buttons: [
                {
                    extend:'excel',
                    exportOptions: {
                        columns: [ 0,1,2,3,4 ]
                    }
                }

            ]
        } );

        $('#fileExcel').on('filepreajax', function(event, previewId, index) {
            console.log('File pre ajax triggered');

            $("#cargar").css('display','');
        });

    });
</script>
    <br>
    <br>

    <table id="example" class="display nowrap" cellspacing="0" width="100%">
        <thead>
        <tr>
            <th>UBICACION</th>
            <th>CATEGORIA</th>
            <th>CODIGO</th>
            <th>DESCRIPCION</th>

            {% if (idproyectos < 1000) %}
                <th>SERIE</th>
            {%endif%}

            <th>CANTIDAD</th>
        </tr>
        </thead>
        <tbody id="tbody">
        </tbody>
    </table>
{% endblock %}
{% block javascripts %}

    <link rel="stylesheet" href="{{ asset('css/jquery.dataTables.min.css')}}">
    <link rel="stylesheet" href="{{ asset('css/buttons.dataTables.min.css')}}">
    <!--script src="{{ asset('js/jquery-1.12.4.js') }}"></script-->
    <script src="{{ asset('js/jquery.dataTables.min.js') }}"></script>
    <script src="{{ asset('js/dataTables.buttons.min.js') }}"></script>
    <script src="{{ asset('js/buttons.flash.min.js') }}"></script>
    <script src="{{ asset('js/jszip.min.js') }}"></script>
    <script src="{{ asset('js/pdfmake.min.js') }}"></script>
    <script src="{{ asset('js/vfs_fonts.js') }}"></script>
    <script src="{{ asset('js/buttons.html5.min.js') }}"></script>
    <script src="{{ asset('js/buttons.print.min.js') }}"></script>
{% endblock %}