{% 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 class="col-lg-12 col-xs-12" >
                {{ render(controller("PortalBundle:Default:topModule",{'idproyectos':idproyectos,'idmodule':idmodule})) }}
            </div>
    </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;
        }
    </style>


<script>


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


        var table = $('#example').DataTable( {
            dom: 'Bfrtip',
            "ajax": {
                "url": "{{ path('showReportInventary',{'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: columna2
                    }
                }

            ]
        } );



        $("#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%">
            <thead>
            <tr>
            <th>ID</th>
            <th>CODIGO</th>
            <th>NOMBRE</th>
            <th>MARCA</th>
            <th>MODELO</th>
            <th>SERIE</th>  
            <th>CALIBRACION</th>
            <th>CANTIDAD</th>
            <th>COSTO</th>
            <th>ALMACEN</th>
            <th>CODIGO SITIO</th>
            <th>CORREO</th>
            <th>TECNICO</th>
            <th>CEDULA</th>
            </tr>    
            </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 %}