{% 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)
        }

        /*#example {
             overflow:scroll;
             height:200px;
             width:500px;
        }

        #example table {
            width:500px;
            background-color:lightgray;
        }*/

        input {
            -webkit-appearance: textfield;
            background-color: white;
            -webkit-rtl-ordering: logical;
            cursor: text;
            padding: 0px;
            border-width: 1px;
            border-style: solid;
            border-color: black !important;
            border-image: initial;
        }

    </style>


<script>


    $(document).ready(function(){
        var columna = [
                    { "data": "id", visible:false },
                    { "data": "codigo" },
                    { "data": "categoria" },
                    { "data": "detalle" },
                    { "data": "marca" },
                    { "data": "modelo" },
                    { "data": "serie" },
                    { "data": "calibracion" },
                    { "data": "cantidad" },
                    { "data": "cantidadArribo" },
                    { "data": "costo" },
                    { "data": "idubicacion"},
                    { "data": "codigoSitio"},
                    { "data": "email", visible:false,},
                    { "data": "nombre"},
                    { "data": "proveedor"},
                    { "data": "cedula", visible:false,}
                ];
            var columna2 = [ 0,1,2,3,4,5,6,7,8,9,10,11,12,13 ]

        {%if idproyectos == 36 or idproyectos == 37 or  idproyectos == 31 or idproyectos == 32 or idproyectos == 35 or idproyectos == 30 or idproyectos == 38 or idproyectos == 39 or idproyectos == 57 or idproyectos >= 1000 %} // Proyectos Maple/Maya CA

            var columna = [
                    { "data": "id", visible:false },
                    { "data": "codigo" },
                    { "data": "categoria" },
                    { "data": "detalle" },
                    { "data": "marca", visible:false},
                    { "data": "modelo", visible:false},
                    { "data": "serie" },
                    { "data": "calibracion", visible:false},
                    { "data": "cantidad" },
                    { "data": "cantidadArribo" },
                    { "data": "costo", visible:false},
                    { "data": "idubicacion"},
                    { "data": "codigoSitio"},
                    { "data": "email", visible:false,},
                    { "data": "nombre"},
                    { "data": "proveedor"},
                    { "data": "cedula", visible:false,}
                ];
            var columna2 = [ 0,1,2,3,4,5,6,7,8,9,10,11,12,13 ]; // Para descargar en el excel
        {%elseif idproyectos >=1000%} //Proyectos MX
               var columna = [
                { "data": "id", visible:false },
                { "data": "codigo" },
                { "data": "categoria" },
                { "data": "detalle" },
                { "data": "cantidad" },
                { "data": "costo" },
                { "data": "ubicacion"},
                { "data": "location"},
                { "data": "codigoSitio"},
                { "data": "email", visible:false,},
                { "data": "nombre"},  // muestra el nombre del tecnico
                { "data": "proveedor"},
                { "data": "cedula", visible:false,}
            ];

            var columna2 = [ 0,1,2,3,4,5,6,7,8,9,10];
        {%endif%}

        $('#example thead tr').clone(true).appendTo( '#example thead' );
        $('#example thead tr:eq(1) th').each( function (i) {
            var title = $(this).text();
            $(this).html( '<input type="text" style="width: 100%; margin: 0px; padding: 0px;"/>' );

            $( 'input', this ).on( 'keyup change', function () {
                if ( table.column(i).search() !== this.value ) {
                    table
                            .column(i)
                            .search( this.value )
                            .draw();
                }
            } );
        } );

        var table = $('#example').DataTable( {
            dom: 'Bfrtip',
            scrollY: '60vh',
            scrollX: true,
            scrollCollapse: true,
            orderCellsTop: true,
            "ajax": {
                "url": "{{ path('showReportInventary2',{'idproyectos':idproyectos,'idmodule':idmodule}) }}",
                "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',

                }

            ]
        } );



        $("#fileExcel").fileinput({
            uploadUrl: "{{ path("uploadUpdateInvCLAROCO",{'idproyectos':idproyectos}) }}", // server upload action
            uploadAsync: false,
            minFileCount: 1,
            maxFileCount: 1,
            overwriteInitial: false,
            uploadExtraData: function() {
                return {
                    idproceso: $("#idproceso").val()
                };
            },
            showPreview: false,
            previewFileExtSettings: {
                'doc': function (ext) {
                    return ext.match(/(doc|docx)$/i);
                },
                'xls': function (ext) {
                    return ext.match(/(xls|xlsx)$/i);
                },
                'ppt': function (ext) {
                    return ext.match(/(ppt|pptx)$/i);
                }
            }
        });
        $('#fileExcel').on('filepreajax', function(event, previewId, index) {
            console.log('File pre ajax triggered');

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

        $('#fileExcel').on('filebatchuploaderror', function(event, data, previewId, index) {
            var form = data.form, files = data.files, extra = data.extra,
                    response = data.response, reader = data.reader;
            console.log('File batch upload success');
            $("#cargar").css('display','none');
            swal("Error!", "Please contact the administrator", "error");

        });


        $('#fileExcel').on('filebatchuploadsuccess', function(event, data, previewId, index) {
            var form = data.form, files = data.files, extra = data.extra,
                    response = data.response, reader = data.reader;
            console.log(response.consulta);

            swal("Good Job!", "Update success", "success");
            table.ajax.reload(function ( json ) {
                $("#cargar").css('display','none');
            });
            // alert ( response.nada );
        });
    });
</script>
    <br>
    <br>

    <div class="col-lg-10 col-lg-offset-1">
     <div class="panel panel-default " >
        <div class="panel-heading">UPLOAD TEMPLATE</div>
        <div class="panel-body">
            <input id="fileExcel" type="file" name="file" class="file-loading">
        </div>
        </div>
    </div>
    {#<div style="width:100%; height:700px; overflow:auto;">#}
        {#<table id="example" class="display nowrap" cellspacing="0" width="100%">#}
        <table id="example" class="display nowrap" width="100%">
            <thead>
    {%if idproyectos == 36 or idproyectos == 37 or idproyectos == 31 or idproyectos == 32 or idproyectos == 35 or idproyectos == 30 or idproyectos == 38 or idproyectos == 39 or idproyectos == 57 or idproyectos >= 1000 %}
            <tr>
                <th>ID</th>
                <th>CODIGO</th>
                <th>CATEGORIA</th>
                <th>NOMBRE</th>
                <th>MARCA</th>
                <th>MODELO</th>
                <th>SERIE</th>
                <th>CALIBRACION</th>
                <th>CANTIDAD</th>
                <th>CANTIDAD EN ARRIBO</th>
                <th>COSTO</th>
                <th>ALMACEN</th>
                <th>CODIGO SITIO</th>
                <th>CORREO</th>
                <th>TECNICO</th>
                <th>PROVEEDOR</th>
                <th>CEDULA</th>
            </tr>
        {%else%}
            <tr>
                <th>ID</th>
                <th>CODIGO</th>
                <th>CATEGORIA</th>
                <th>NOMBRE</th>
                {% if idproyectosp == null %}
                    <th>MARCA</th>
                    <th>MODELO</th>
                    <th>SERIE</th>
                    <th>CALIBRACION</th>
                {% endif %}
                <th>CANTIDAD</th>
                <!--<th>CANTIDAD EN ARRIBO</th>-->
                <th>COSTO</th>
                <th>ALMACEN</th>
                <th>LOCATION</th>
                <th>CODIGO SITIO</th>
                <th>CORREO</th>
                <th>TECNICO</th>
                <th>PROVEEDOR</th>
                <th>CEDULA</th>
            </tr>
        {%endif%}
            </thead>
            <tbody id="tbody">
            </tbody>
        </table>
    {#</div>#}


{% 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 %}