{% 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>
    .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><style>

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

<script>
    function openModalDeleteActivity() {
        $("#modalDeleteActivity").modal();
    }
    function openModalProcesarInsumos() {
        $("#modalProcessar").modal();
    }
    $(function(){



        var table = $('#example').DataTable( {
            dom: '<"toolbar">Bfrtip',
            "ajax": {
                "url": "{{ path('showInsumosCrudo',{'idproyectos':idproyectos}) }}",
                "type": "POST",
                data:  function( d ) {
                    d.idproveedor= $('#idproveedor').val();
                }
            },
            columns: [
                { "data": "ticket" },
                { "data": "isKit" },
                { "data": "codigo" },
                { "data": "tipo" },
                { "data": "cantidad" },
                { "data": "responsable" },
                { "data": "analista" },
                { "data": "mes" },
                { "data": "ano" }
            ],
            lengthMenu: [
                [  25, 50, -1 ],
                [ '10 rows', '25 rows', '50 rows', 'Show all' ]
            ],
            buttons: [
                'pageLength','copy', 'csv', 'excel', 'pdf', 'print'
            ]
        } );


            $("div.toolbar").html('<center><button class="btn btn-success" id="btnDelete" onclick="openModalProcesarInsumos()">Procesar Insumos</button>' +
                                    '<button class="btn btn-danger" id="btnDelete" onclick="openModalDeleteActivity()">Borrar Todo</button></center>');




        $("#fileExcel").fileinput({
            uploadUrl: "{{ path('uploadFileInsumos',{'idproyectos':idproyectos}) }}", // server upload action
            uploadAsync: false,
            minFileCount: 1,
            maxFileCount: 5,
            overwriteInitial: false,
            uploadExtraData: function() {
                return {
                    idproceso: $("#idproceso").val()
                };
            },
            showPreview: true,
            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('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');
            swal(
                    'Oops...',
                    'Something went wrong!',
                    '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);

            table.ajax.reload(function ( json ) {
                $("#cargar").css('display','none');
            });
            swal(
                    'Good job!',
                    'You clicked the button!',
                    'success'
            )
        });


        $("#btnDeleteAllActivities").click(function () {
            $.ajax({
                type: 'POST',
                url: '{{ path('deleteAllInsumoCrudo',{'idproyectos':idproyectos}) }}'
            }).done(function (json) {

                table.ajax.reload(function ( json ) {
                    $("#cargar").css('display','none');
                });
            });
        });

        $("#btnProcessar").click(function () {
            $.ajax({
                type: 'POST',
                url: '{{ path('processIsumos',{'idproyectos':idproyectos}) }}'
            }).done(function (json) {

                table.ajax.reload(function ( json ) {
                    $("#cargar").css('display','none');
                });
            });

        });

    });
</script>

<div class="col-lg-12">

    <div class="panel panel-default" style="margin: 4%">
        <div class="panel-heading">SUBIR PLANTILLA</div>
        <div class="panel-body">
            <input id="fileExcel" type="file" name="file" class="file-loading">
        </div>
        <table id="example" class="display" cellspacing="0" width="100%">
            <thead>
            <tr>
                <th>TICKET</th>
                <th>ES KIT</th>
                <th>CODIGO</th>
                <th>{{'ticketDetail.email.tipo' | trans | upper}}</th>
                <th>{{'Cantidad' | trans | upper}}</th>
                <th>RESPONSABLE</th>
                <th>ANALISTA</th>
                <th>{{'monitoriii.month' | trans | upper}}</th>
                <th>{{'monitoriii.year' | trans | upper}}</th>

            </tr>
            </thead>
            <tbody id="tbody">
            </tbody>
        </table>
    </div>

</div>


<div class="modal modal-wide fade" id="modalDeleteActivity" tabindex="-1" role="dialog" aria-labelledby="modalDeleteActivity" style="width: 80%" >
    <div class="modal-dialog" role="document">

        <div class="modal-content">
            <div class="modal-header  btn-primary">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="exampleModalLabel">BORRAR TABLA DE INSUMOS</h4>
            </div>
            <div class="modal-body">
                <div class="row">
                    <div class="col-lg-12">
                       <h2>Esta seguro de borrar la tabla...</h2>
                    </div>
                </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-info" data-dismiss="modal" id="btnDeleteAllActivities">{{'ticketDetail.status.continue' | trans}}</button>
            </div>
        </div>
    </div>
</div>
    <div class="modal modal-wide fade" id="modalProcessar" tabindex="-1" role="dialog" aria-labelledby="modalDeleteActivity" style="width: 80%" >
        <div class="modal-dialog" role="document">

            <div class="modal-content">
                <div class="modal-header  btn-primary">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="exampleModalLabel">PROCESAR INSUMOS</h4>
                </div>
                <div class="modal-body">
                    <div class="row">
                        <div class="col-lg-12">
                            <h2>Esta seguro de cargar los insumos, no podra revertir!!</h2>
                        </div>
                    </div>

                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">{{'ticketDetail.cancel' | trans}}</button>
                    <button type="button" class="btn btn-info" data-dismiss="modal" id="btnProcessar">Continuar</button>
                </div>
            </div>
        </div>
    </div>


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