{% extends "base.html.twig" %}
{% block menuTop %}

{% endblock %}


{% block dashboard %}
    <link rel="stylesheet" href="{{ asset('css/jquery.dataTables.min.css')}}">
    <link rel="stylesheet" href="{{ asset('css/buttons.dataTables.min.css')}}">
    <style>
        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;
        }
        .dataTables_length select {
            width: 60px;
        }
        .dataTables_length label {
            font-weight: normal;
        }
        div.dt-buttons {
            position: relative !important;
            float: right !important;
            margin-right: -5px !important;
        }
        .dt-body-center{
            text-align: center !important;
        }
        .dt-body-right{
            text-align: right !important;
        }
    </style>

    <div class="row" style="margin-top: -40px;">
        <div class="form-group col-md-3 col-md-offset-9">
            <select class="form-control pull-right" id="tipoReporte">
                <option value="MATERIAL-CONVERSION">Material Conversion</option>
                <option value="MATERIAL-CODE-UNION">Material Code Union</option>
            </select>
        </div>
    </div>
    <div class="row">
        <div class="col-md-12">
            <h2 class="text-center text-primary">
                <b id="titleReport"><i class="fa fa-file-text-o"></i> MATERIAL CONVERSION</b>
            </h2>
        </div>
    </div>
    <div class="row" style="padding-bottom: 10px;">
        <div class="col-sm-12 text-right">
            <button id="btnAdd" type="button" class="btn btn-primary"  aria-label="Add records" title="Add Records">
                <span class="fa fa-plus" aria-hidden="true"></span>  Add Conversion
            </button>
        </div>
    </div>
    <div class="row">
        <div id="datatable" class="col-sm-12">
            <table id="example" class="display nowrap" width="100%">
                <thead>
                <tr>
                </tr>
                </thead>
                <tbody id="tableRecords">

                </tbody>
            </table>
        </div>
    </div>

    <div class="modal fade bs-example-modal-lg" id="modalAddRecord" tabindex="-1" role="dialog" aria-labelledby="modal Add Record">
        <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content">
                <div class="modal-header  bg-primary">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                    <h2 class="modal-title" id="myModalLabel">
                        <i class="fa fa-plus"></i> Add Records
                    </h2>
                </div>

                <div class="modal-body">
                    <div class="row">
                        <input type="hidden" id="txtId" value="">
                        <div class="col-md-6">
                            <div class="form-group">
                                <label for="cmbProyecto">Project</label>
                                <select class="form-control" id="cmbProyecto">
                                    <option value="">ANY PROJECT</option>
                                    {#{%for p in proyectos%}
                                        <option value="{{p.id}}">{{p.nombre}}</option>
                                    {%endfor%}#}
                                </select>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-6" id="productoStock">
                            <div class="form-group">
                                <label for="cmbCodProducto">Product Number</label>
                                <select class="form-control" id="cmbCodProducto">
                                    <option value="">Select Product</option>
                                    {%for p in productos%}
                                        <option value="{{p.id}}"
                                                data-descripcion="{{p.descripcion}}">{{p.nombre}}</option>
                                    {%endfor%}
                                </select>
                                <select class="form-control" id="cmbCodProducto2">
                                    <option value="">Select Product</option>
                                    {%for p in productosSupply%}
                                        <option value="{{p.id}}"
                                                data-descripcion="{{p.descripcion}}">{{p.nombre}}</option>
                                    {%endfor%}
                                </select>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-12">
                            <div class="form-group">
                                <label for="txtNomProducto">Product Name</label>
                                <input type="text" class="form-control" id="txtNomProducto"
                                       maxlength="255" readonly>
                            </div>
                        </div>
                    </div>
                    <div id="formMaterial-Conversion">
                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="txtFactor">Factor</label>
                                    <input type="number" class="form-control" id="txtFactor"
                                           maxlength="15" min="0.01">
                                </div>
                            </div>
                        </div>
                    </div>
                    <div id="formMaterial-Code-Union">
                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="txtCodeNew">Replacement Product Code</label>
                                    <input type="text" class="form-control" id="txtCodeNew"
                                           maxlength="50">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="modal-footer">
                    <button id="btnSaveEdit" type="button" class="btn btn-primary"
                            aria-label="Save Changes" title="Save Changes">
                        <span class="fa fa-save" aria-hidden="true"></span>  Save Changes
                    </button>
                    <button id="btnSaveContinue" type="button" class="btn btn-primary"
                            aria-label="Save and Continue" title="Save and Continue">
                        <span class="fa fa-save" aria-hidden="true"></span>  Save and Continue
                    </button>
                    <button id="btnSaveExit" type="button" class="btn btn-info"
                            aria-label="Save and Exit" title="Save and Exit">
                        <span class="fa fa-save" aria-hidden="true"></span>  Save and Exit
                    </button>
                    <button id="closemodal" type="button" class="btn btn-default" data-dismiss="modal">
                        <i class="fa  fa-times text-danger"></i> Cancel
                    </button>
                </div>

            </div>
        </div>
    </div>
    <script>
        var table;
        var colsMaterialConversion = [
            { "data": "id", visible:false }, { "data": "codigo_proyecto" }, { "data": "codigo_material" },
            { "data": "nombre_material" }, { "data": "factor_conversion" }, { "data": null}
        ];
        var colsMaterialCodeUnion = [
            { "data": "id", visible:false }, { "data": "codigo_proyecto" }, { "data": "codigo_actual" },
            { "data": "codigo_sustituto" }, { "data": "nombre_sustituto" }, { "data": null}
        ];
        function resetAddRecordDialog(type, data){
            var dialog = $('#modalAddRecord');
            var tipoReporte = $('#tipoReporte').val();
            $('#cmbProyecto').change();
            switch (tipoReporte){
                case 'MATERIAL-CONVERSION':
                    dialog.find('#cmbCodProducto2').hide();
                    dialog.find('#cmbCodProducto').show();
                    dialog.find('#formMaterial-Code-Union').hide();
                    dialog.find('#formMaterial-Conversion').show();
                    break;
                case 'MATERIAL-CODE-UNION':
                    dialog.find('#cmbCodProducto').hide();
                    dialog.find('#cmbCodProducto2').show();
                    dialog.find('#formMaterial-Conversion').hide();
                    dialog.find('#formMaterial-Code-Union').show();
                    break;
            }
            switch (type){
                case 0: //new
                    dialog.find('#myModalLabel').html('<i class="fa fa-plus"></i> Add Records');
                    dialog.find('input').val('');
                    dialog.find('#txtId').val('');
                    dialog.find('#cmbProyecto').val('');
                    dialog.find('#cmbCodProducto').val('');
                    dialog.find('#cmbCodProducto2').val('');
                    dialog.find('#txtFactor').val('');
                    dialog.find('#btnSaveEdit').prop('disabled', true);
                    dialog.find('#btnSaveEdit').hide();
                    dialog.find('#btnSaveContinue').show();
                    dialog.find('#btnSaveContinue').prop('disabled', false);
                    dialog.find('#btnSaveExit').show();
                    dialog.find('#btnSaveExit').prop('disabled', false);
                    break;
                case 1: //edit
                    dialog.find('#myModalLabel').html('<i class="fa fa-edit"></i> Edit Records');
                    dialog.find('#btnSaveEdit').prop('disabled', false);
                    dialog.find('#btnSaveEdit').show();
                    dialog.find('#btnSaveContinue').hide();
                    dialog.find('#btnSaveContinue').prop('disabled', true);
                    dialog.find('#btnSaveExit').hide();
                    dialog.find('#btnSaveExit').prop('disabled', true);
                    break;
            }
            // Empty form fields.

        }

        function showModal(type,id){
            var dialog = $('#modalAddRecord');
            var tipoReporte = $('#tipoReporte').val();
            resetAddRecordDialog(type,id);
            switch (type){
                case 0: //New
                    dialog.modal('show');
                    break;
                case 1: //Edit
                    var postUrl = "{{path('getConversionMaterialById')}}";
                    var postData = {
                        id: id,
                        tipoReporte : tipoReporte
                    };
                    $.ajax({
                        type: 'POST',
                        url: postUrl,
                        data: postData,
                        dataType: 'json',
                        global: false,
                        success: function (response) {
                            if (response.status = 'ok'){
                                var d = response.data[0];
                                switch (tipoReporte){
                                    case 'MATERIAL-CONVERSION':
                                        dialog.find('#txtId').val(d.id);
                                        dialog.find('#cmbProyecto').val(d.codigo_proyecto);
                                        dialog.find('#cmbCodProducto').val(d.codigo_material);
                                        dialog.find('#txtNomProducto').val(d.nombre_material);
                                        dialog.find('#txtFactor').val(d.factor_conversion);
                                        break;
                                    case 'MATERIAL-CODE-UNION':
                                        dialog.find('#txtId').val(d.id);
                                        dialog.find('#cmbProyecto').val(d.codigo_proyecto);
                                        dialog.find('#cmbCodProducto2').val(d.codigo_actual);
                                        dialog.find('#cmbCodProducto').change();
                                        dialog.find('#txtCodeNew').val(d.codigo_sustituto);
                                        break;
                                }
                                dialog.modal('show');
                            }else{
                            }
                        },
                        error: function (jqXHR, textStatus, errorThrown) {
                        }
                    });
                    break;
                case 2: //delete
                    if (confirm("Are you sure to delete the record?")){
                        var tipoReporte = $('#tipoReporte').val();
                        var postUrl = "{{path('deleteConversionMaterialRecord')}}";
                        var postData = {
                            id: id,
                            tipoReporte: tipoReporte
                        };
                        $.ajax({
                            type: 'POST',
                            url: postUrl,
                            data: postData,
                            dataType: 'json',
                            global: false,
                            success: function (response) {
                                //table = $('#example').DataTable();
                                table.ajax.reload();
                            },
                            error: function (jqXHR, textStatus, errorThrown) {

                            }
                        });
                    }
            }
        }

        function dataValidation(){
            var tipoReporte = $('#tipoReporte').val();
            var data;
            switch (tipoReporte){
                case 'MATERIAL-CONVERSION':
                    data = {
                        project: $('#cmbProyecto').val(),
                        cod    : $('#cmbCodProducto').val(),
                        prod   : $('#txtNomProducto').val(),
                        factor : $('#txtFactor').val()
                    };
                    if (data.factor.length ==0){
                        alert('Enter numeric value for Factor field!');
                        $('#txtFactor').focus();
                        return false;
                    }
                    if (data.cod.length ==0){
                        alert('Select an option for Product Number field!');
                        $('#cmbCodProducto').focus();
                        return false;
                    }
                    if ($.trim(data.prod)==''){
                        alert('Enter alfanumeric value for Product Name field!');
                        $('#txtNomProducto').focus();
                        return false;
                    }
                    return true;
                    break;
                case 'MATERIAL-CODE-UNION':
                    data = {
                        project: $('#cmbProyecto').val(),
                        cod    : $('#cmbCodProducto2').val(),
                        codNew : $('#txtCodeNew').val()
                    };
                    if (data.cod.length ==0){
                        alert('Select an option for Product Number field!');
                        $('#cmbCodProducto2').focus();
                        return false;
                    }
                    if ($.trim(data.codNew)==''){
                        alert('Enter alfanumeric value for Replacement Product Code field!');
                        $('#txtCodeNew').focus();
                        return false;
                    }
                    return true;
                    break;
            }


        }
        function saveConversion(){
            var tipoReporte = $('#tipoReporte').val();
            var dataConversion;
            switch (tipoReporte){
                case 'MATERIAL-CONVERSION':
                    dataConversion = {
                        id     : $('#txtId').val(),
                        project: $('#cmbProyecto').val(),
                        cod    : $('#cmbCodProducto').val(),
                        prod   : $.trim($('#txtNomProducto').val()),
                        factor : $('#txtFactor').val(),
                        tipoReporte : tipoReporte,
                        idproyectos: {{ idproyectos }}
                    };
                    break;
                case 'MATERIAL-CODE-UNION':
                    dataConversion = {
                        id       : $('#txtId').val(),
                        project  : $('#cmbProyecto').val(),
                        cod_old  : $('#cmbCodProducto2').val(),
                        cod_new  : $.trim($('#txtCodeNew').val()),
                        name_new : $('#txtNomProducto').val(),
                        tipoReporte : tipoReporte,
                        idproyectos: {{ idproyectos }}
                    };
                    break;
            }

            var postUrl = "{{path('saveConversionMaterialRecord')}}";
            $.ajax({
                type: 'POST',
                url: postUrl,
                data: dataConversion,
                dataType: 'json',
                global: false,
                success: function (response) {
                    table.ajax.reload();
                    if (response.status == 'ok'){
                        return true;
                    }else{
                        alert(response.msj);
                        return false;
                    }
                },
                error: function (jqXHR, textStatus, errorThrown) {
                    return false;
                }
            });
        }

        $(document).ready(function(){
            $('#btnAdd').on("click", function () {
                showModal(0,0);
            });

            $('#tipoReporte').change(function() {
                var tipoReporte = $('#tipoReporte').val();
                var html = '<i class="fa fa-file-text-o"></i> '
                        + $('#tipoReporte option:selected').text().toUpperCase();
                $('#titleReport').html(html);
                createTable(tipoReporte);
                switch (tipoReporte){
                    case 'MATERIAL-CONVERSION':
                        $('#btnAdd').html('<i class="fa fa-file-text-o"></i> Add Conversion');
                        buildDatatable(colsMaterialConversion);
                        break;
                    case 'MATERIAL-CODE-UNION':
                        $('#btnAdd').html('<i class="fa fa-file-text-o"></i> Add Code Union');
                        buildDatatable(colsMaterialCodeUnion);
                        break;
                }
            });

            $('#cmbCodProducto').change(function() {
                var tipoReporte = $('#tipoReporte').val();
                var item = $(this).val();
                var abc = $('option:selected',this).data("descripcion");
                $('#txtNomProducto').val(abc);

            });

            $('#cmbCodProducto2').change(function() {
                var tipoReporte = $('#tipoReporte').val();
                var item = $(this).val();
                var abc = $('option:selected',this).data("descripcion");
                $('#txtNomProducto').val(abc);

            });

            $('#btnSaveContinue').on("click", function () {
                if (dataValidation()){
                    saveConversion();
                    resetAddRecordDialog(0, 1);
                }
            });
            $('#btnSaveExit').on("click", function () {
                if (dataValidation()){
                    saveConversion();
                    resetAddRecordDialog(0, 1);
                    var dialog = $('#modalAddRecord');
                    dialog.modal('hide');
                }
            });

            $('#btnSaveEdit').on("click", function () {
                if (dataValidation()) {
                    saveConversion();
                    resetAddRecordDialog(0, 1);
                    var dialog = $('#modalAddRecord');
                    dialog.modal('hide');
                }
            });

            //buildDatatable(columnaStock);
            $('#tipoReporte').change();
        });

        function createTable(tipoReporte){
            var strHeader = '';
            var strTable = '<table id="example" class="display nowrap" width="100%"><thead><tr>';
            switch (tipoReporte){
                case 'MATERIAL-CONVERSION':
                    strHeader = '<th>Id</th><th>Project</th><th>Product Number</th><th>Product Name</th>' +
                            '<th>Factor</th><th>Actions</th>';
                    break;
                case 'MATERIAL-CODE-UNION':
                    strHeader = '<th>Id</th><th>Project</th><th>Current Product Number</th><th>Replacement Product Code</th>' +
                            '<th>Product Name</th><th>Actions</th>';
                    break;
            }
            strTable += strHeader + '</tr></thead><tbody id="tableRecords"></tbody></table>';
            $('#datatable').empty();
            $('#datatable').html(strTable);
            $('#example thead tr').clone(true).appendTo( '#example thead' );
            $('#example thead tr:eq(1) th').each( function (i) {
                var title = $(this).text();
                if (i!==5){
                    $(this).html( '<input type="text" style="width: 100%; margin: 0px; padding: 0px;"/>' );
                }else{
                    $(this).html( '<input disabled readonly 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();
                    }
                } );
            } );
        }

        function buildDatatable(columnas){
            var clase;
            var tipoReporte = $('#tipoReporte').val();

            if (tipoReporte == 'MATERIAL-CONVERSION'){
                clase =[{ "className": "dt-body-right","width": "100px", "targets": -2 }];
            }else{
                clase ={ "className": "dt-body-center","width": "100px", "targets": -2 };
            }

            table = $('#example').DataTable( {
                dom: '<"row" <"col-md-12 text-right"B>> <"row" <"col-md-6 "l> <"col-md-6"f>>rtip',
                scrollY: '60vh',
                scrollX: true,
                scrollCollapse: true,
                orderCellsTop: true,
                "ajax": {
                    "url": "{{ path('showInlineMaterialConversion',{'idproyectos':idproyectos}) }}",
                    "type": "POST",
                    data:  function( d ) {
                        d.tipoReporte= $("#tipoReporte").val(),
                        d.proyecto   = $("#cmbProyecto").val()
                    }
                },
                "order": [[ 0, "desc" ]],
                columns: columnas,
                columnDefs: [ {
                    "targets": -1,
                    "data": null,
                    "searchable": false,
                    "orderable": false,
                    "className": 'dt-body-center',
                    "render": function ( data, type, row ) {
                        //return htmlSql;
                        return '<div class="btn-group"> ' +
                                '<a href="javascript:showModal(1,' + row['id'] + ');" class="btn btn-info edit" data-toggle="tooltip" ' +
                                'data-title="Edit" title="Edit">'+
                                '<span class="glyphicon glyphicon-pencil" aria-hidden="true"></span></a>' +
                                '<a href="javascript:showModal(2,' + row['id'] + ');" class="btn btn-danger delete" data-toggle="tooltip" ' +
                                'data-title="Delete" title="Delete" data-container="body">'+
                                '<span class="glyphicon glyphicon-trash" aria-hidden="true"></span></a>' +
                                '</div>';
                    }
                },
                    { "width": "90px", "targets": -1 },
                    { "className": {"className": "dt-body-right","width": "100px", "targets": -2 } }
                ],
                lengthMenu: [[10, 25, 50, 100, 250, 500], [10, 25, 50, 100, 250, 500]],
                buttons: [
                    {
                        extend:'excel',
                    }
                ]
            } );
        }
    </script>
{% endblock %}
{% block javascripts %}
    <!--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 %}