{% extends 'base.html.twig' %}

{% block body_id 'fullmatic' %}

    {% block title %}Fullmatic{% endblock %}

    {% block stylesheets %}
        {{ parent() }}
        <link rel="stylesheet" href="{{ asset('static/c4rg0_themes/assets/js/vendor/datatables/css/dataTables.bootstrap.css') }}">
        <link rel="stylesheet" href="{{ asset('static/c4rg0_themes/assets/js/vendor/datatables/css/ColVis.css') }}">
        <link rel="stylesheet" href="{{ asset('static/c4rg0_themes/assets/js/vendor/datatables/css/TableTools.css') }}">
        <link rel="stylesheet" href="{{ asset('static/DataTables/DataTables-1.10.20/css/jquery.dataTables.min.css') }}">
        <link rel="stylesheet" href="{{ asset('static/c4rg0_themes/assets/js/vendor/datepicker/css/bootstrap-datetimepicker.css') }}">
    {% endblock %}
    {% block modal %}
        {{ parent() }}
        <div class="md-modal md-effect-10 md-hotpink colorize-overlay" id="id-msg-red">
            <div class="md-content">
                <h3>ERROR</h3>   
                <div id="id-msg-err" class="tile-body nopadding rounded-corners">
                </div>
                <button class="md-close btn btn-default">{{ "OK"|trans }}</button>
            </div>
        </div>

    {% endblock %}   
    {% block c4rg0_menuleft %}
    {% endblock %} 
    {% block body %}
        <!-- Page content -->
        <div id="content" class="col-md-12">

            <!-- page header -->
            <div class="pageheader">




            </div>


            <section id="search-result" class="tile transparent">   
                <div id="id-error-msg" class="error-red"></div>
                {% if is_granted('ROLE_SUPERADMIN') %}
                    <section class="tile color transparent-black minimized">
                        <!-- tile header -->
                        <div class="tile-header color transparent-white rounded-corners text-center"> 
                            <!-- <img src="{{ asset('static/c4rg0_themes/assets/images/Consitech_p.png') }}" width="260" height="55" alt=""/><br>-->
                            <div class="controls">
                                <a href="#" class="minimize"><i class="fa fa-chevron-down fa-2x"></i></a>
                                <a href="#" class="refresh"><i class="fa fa-refresh fa-2x"></i></a>
                                <!-- <a href="#" class="remove"><i class="fa fa-times fa-2x"></i></a> -->
                            </div>
                        </div>
                        <div class="tile-body nopadding rounded-corners">
                            <div id="content-weight-area">
                                <div id="weight-area">
                                    <img src="{{ asset('static/images/BG_Weights_BH4.png') }}">
                                </div>
                            </div>
                        </div>
                    </section>
                {% endif %}
                <div class="btn-group btn-group-justified margin-bottom-30 transparent-black no-shadow btn-funzioni funzioni-check" wfd-id="94">
                    <a id="confirm-btn" href="{{ path('monitor_page') }}" class="btn timeline-heading" style="color: #0099FF;" role="button">
                        <div class="border-btn">
                            <span class="glyphicon glyphicon-hand-ok">
                                <i class="fas fa-cogs fa-4x" style="padding: 10px; color: #0099FF;"></i>
                            </span>
                        </div>
                    </a>
                    <a id="confirm-btn" href="javascript:add();" class="btn timeline-heading" style="color: #0099FF;" role="button">
                        <div class="border-btn">
                            <span class="glyphicon glyphicon-hand-ok">
                                <i class="fa fa-plus-circle fa-4x" style="padding: 10px; color: #0099FF;"></i>
                            </span>
                        </div>
                    </a>              
                    {% for item in weights %}
                    <a id="sospendi-menu" href="javascript:zero({{ item }});" class="btn timeline-heading" style="color: #fd7200;" role="button">
                        <div class="border-btn">
                            <span>
                                <i class="fas fa-weight fa-4x" style="padding: 10px; color: #fd7200;"></i>{{ item }}
                            </span>
                        </div>
                    </a>
                    {% endfor %}
                    <a id="confirm-btn" href="javascript:cmddelete(-1);" class="btn timeline-heading" style="color: #0099FF;" role="button">
                        <div class="border-btn">
                            <span class="glyphicon glyphicon-hand-ok">
                                <i class="fa fa-minus-square fa-4x" style="padding: 10px; color: #FF0000;"></i>
                            </span>
                        </div>
                    </a>
                    <a id="delete-btn" href="javascript:cmddelete(-99);" class="btn timeline-heading" style="color: #FF0000;" role="button">
                        <div class="border-btn">
                            <span>
                                <i class="fas fa-trash fa-4x" style="padding: 10px; color: #FF0000;"></i>
                            </span>
                        </div>
                    </a>
                    <a id="confirm-btn" href="javascript:go();" class="btn timeline-heading" style="color: #0099FF;" role="button">
                        <div class="border-btn">
                            <span class="glyphicon glyphicon-hand-ok">
                                <i class="fas fa-fas fa-rocket color-cyan fa-4x" style="padding: 10px; color: #0099FF;"></i>
                            </span>
                        </div>
                    </a>
                </div>                    
                <table id="searchresult" class="display search-result table-datatable" style="width:100%">
                    <thead>

                        <tr>
                            <th>{{ "ID"|trans }}</th>
                            <th>{{ "Items Code"|trans }}</th>
                            <th style="text-align: left;">{{ "Weight"|trans }}</th>
                                {% if is_granted('ROLE_SUPERADMIN') %}
                                <th style="text-align: left;">{{ "Height"|trans }}</th>
                                <th>{{ "Position (x, y)"|trans }}</th> 
                                {% endif %}
                            <th>&nbsp;</th>
                        </tr>
                    </thead>
                </table>            
            </section>     

            <br />

            <br /><br /><br /><br /><br /><br /><br /><br />
            <!-- /tile -->








        </div>
        <!-- Page content end -->
    {% endblock %}
    {% block javascripts %}
        {{ parent() }}
        <script type="text/javascript" src="{{ asset('static/js/base64.js') }}"></script>

        <script type="text/javascript" src="{{ asset('static/c4rg0_themes/assets/js/vendor/datatables/jquery.dataTables.min.js') }}"></script>
        <script type="text/javascript" src="{{ asset('static/c4rg0_themes/assets/js/vendor/datatables/ColReorderWithResize.js') }}"></script>
        <script type="text/javascript" src="{{ asset('static/c4rg0_themes/assets/js/vendor/datatables/colvis/dataTables.colVis.min.js') }}"></script>
        <script type="text/javascript" src="{{ asset('static/c4rg0_themes/assets/js/vendor/datatables/tabletools/ZeroClipboard.js') }}"></script>
        <script type="text/javascript" src="{{ asset('static/c4rg0_themes/assets/js/vendor/datatables/tabletools/dataTables.tableTools.min.js') }}"></script>
        <script type="text/javascript" src="{{ asset('static/c4rg0_themes/assets/js/vendor/datatables/dataTables.bootstrap.js') }}"></script>
        <script type="text/javascript" src="{{ asset('static/c4rg0_themes/assets/js/vendor/chosen/chosen.jquery.min.js') }}"></script>        
        <script type="text/javascript" src="{{ asset('static/js/moment/moment.min.js') }}"></script>
        <script type="text/javascript" src="{{ asset('static/DataTables/DataTables-1.10.20/js/jquery.dataTables.min.js') }}"></script>
        <script type="text/javascript" src="{{ asset('static/DataTables/dataTables.fixedHeader.min.js') }}"></script>


        <script type="text/javascript" src="{{ asset('static/c4rg0_themes/assets/js/vendor/momentjs/moment-with-langs.min.js') }}"></script>

        <script type="text/javascript" src="{{ asset('static/c4rg0_themes/assets/js/vendor/datepicker/bootstrap-datetimepicker.min.js') }}"></script>
        <script type="text/javascript" src="{{ asset('static/js/jquery-dateformat.min.js') }}"></script>
        {{ encore_entry_script_tags('search') }}
        <script>
            var table = null;
            var timeout = null;
            function cmddelete(id) {
                if (confirm("{{ 'Confirm?'|trans }}")) {
                    $.ajax({
                        url: "{{ path('api_delete') }}",
                        data: {
                            'id': id
                        },
                        error: function (err) {
                            var msg = err;
                           // $('#info').html('<p>An error has occurred</p>');
                        },
                        success: function (json) {
                            if (json.err === 0) {
                            }
                        },
                        type: 'PUT'
                    });                
                }
            }
            function add() {
                $.ajax({
                    url: "{{ path('api_add') }}",
                    data: {},
                    error: function (err) {
                        var msg = err;
                       // $('#info').html('<p>An error has occurred</p>');
                    },
                    success: function (json) {
                        if (json.err === 0) {
                        }
                    },
                    type: 'PUT'
                });                
            }
            function zero(p) {
                $.ajax({
                    url: "{{ path('api_zero') }}",
                    data: {
                        'pesa': p
                    },
                    error: function (err) {
                        var msg = err;
                       // $('#info').html('<p>An error has occurred</p>');
                    },
                    success: function (json) {
                        if (json.err === 0) {
                        }
                    },
                    type: 'PUT'
                });                
            }
            $(function () {
                $('#searchresult').on('click', 'td:nth-child(2)', function (e) {
                    var editOk = ($(this).find('.edit-value').length > 0);
                    if (!editOk) {
                        var cur = $(this).find('.cell-value').data('cur_value');
                        $(this).find('.cell-value').html('<div class="edit-value"><input type="text" value="' + cur + '"><i class="fa fa-check-circle fa-3x" aria-hidden="true"></i><i class="fa fa-times-circle-o fa-3x" aria-hidden="true"></i></div>');
                    }
                });
                timeout = setInterval(
                        function () {
                            $.ajax({
                                url: "{{ path('api_getupdatefullmatic') }}",
                                data: {
                                    format: 'json'
                                },
                                error: function (err) {
                                    var msg = err;
                                   // $('#info').html('<p>An error has occurred</p>');
                                },
                                success: function (json) {
                                    if (json.err === 0 && json.data.dirty === 1) {
                                        table.ajax.url("{{ path('api_getfullmatic') }}").load().draw();
                                        $('.dataTables_empty').html('<div id="page-wrapper"><div class="loading">Loading...</div></div>');
                                    }
                                },
                                type: 'GET'
                            });
                        }
                , 10000);
                jQuery.extend(jQuery.fn.dataTableExt.oSort, {
                    "alt-string-pre": function (a) {
                        var valore = a.match(/alt="(.*?)"/);
                        if (valore !== null && valore.length > 1) {
                            return a.match(/alt="(.*?)"/)[1].toLowerCase();
                        } else {
                            return '';
                        }
                    },
                    "alt-string-asc": function (a, b) {
                        return ((a < b) ? -1 : ((a > b) ? 1 : 0));
                    },
                    "alt-string-desc": function (a, b) {
                        return ((a < b) ? 1 : ((a > b) ? -1 : 0));
                    },
                    "items-pre": function (a) {
                        var valore = a.match(/data-value="(.*?)"/);
                        if (valore !== null && valore.length > 1) {
                            var sv = a.match(/data-value="(.*?)"/)[1].toLowerCase();
                            var v = parseInt(sv)
                            if (isNaN(v)) {
                                return 0;
                            } else {
                                return v;
                            }
                        } else {
                            return '';
                        }
                    },
                    "items-asc": function (a, b) {
                        return ((a < b) ? -1 : ((a > b) ? 1 : 0));
                    },
                    "items-desc": function (a, b) {
                        return ((a < b) ? 1 : ((a > b) ? -1 : 0));
                    }
                });
                table = $('#searchresult').DataTable({
                    "paging": false,
                    "ordering": false,
                    "searching": false,
                    "info": false,
                    "ajax": {
                        "type": "GET",
                        "url": "{{ path('api_getfullmatic') }}",
                        "dataSrc": function (json) {
                            $('#search #search-result .error-red').html('');
                            $('#search #search-result .error-red').hide();
                            if (json.err === 0) {
                                if (typeof json.data.acquisitions !== 'undefined') {
                                    tot = json.tot;
                                    for (c = 0; c < json.data.acquisitions.length; ++c)
                                    {
                                        var a = json.data.acquisitions[c];
                                        var x = 1.375 + a.centro.x;
                                        var y = 1.175 + a.centro.y;
                                        var px = (100.0 * x) / 2.75;
                                        var py = (100.0 * y) / 2.35;
                                        var id = a.id
                                        var inbound = a.inbound;
                                        var svg = '';
                                        var xMax = -10000;
                                        var yMax = -10000;
                                        var xMin = 10000;
                                        var yMin = 10000;
                                        var pxMax = -10000;
                                        var pyMax = -10000;
                                        var pxMin = 10000;
                                        var pyMin = 10000;
                                        for (c1 = 0; c1 < inbound.length; ++c1) {
                                            var c2 = ((c1 + 1) >= inbound.length) ? 0 : c1 + 1;
                                            var x1 = 1.375 + inbound[c1].x;
                                            var y1 = 1.175 + inbound[c1].y;
                                            var px1 = (100.0 * x1) / 2.75;
                                            var py1 = (100.0 * y1) / 2.35;
                                            var x2 = 1.375 + inbound[c2].x;
                                            var y2 = 1.175 + inbound[c2].y;
                                            var px2 = (100.0 * x2) / 2.75;
                                            var py2 = (100.0 * y2) / 2.35;
                                            xMax = (x2 >= xMax) ? x2 : xMax;
                                            yMax = (y2 >= yMax) ? y2 : yMax;
                                            xMin = (x2 <= xMin) ? x2 : xMin;
                                            yMin = (y2 <= yMin) ? y2 : yMin;
                                            pxMax = (px2 >= pxMax) ? px2 : pxMax;
                                            pyMax = (py2 >= pyMax) ? py2 : pyMax;
                                            pxMin = (px2 <= pxMin) ? px2 : pxMin;
                                            pyMin = (py2 <= pyMin) ? py2 : pyMin;
                                        }
                                        var v_inbound = new Array();
                                        svg = '';
                                        for (c1 = 0; c1 < inbound.length; ++c1) {
                                            var c2 = ((c1 + 1) >= inbound.length) ? 0 : c1 + 1;
                                            var x1 = 1.375 + inbound[c1].x;
                                            var y1 = 1.175 + inbound[c1].y;
                                            var x2 = 1.375 + inbound[c2].x;
                                            var y2 = 1.175 + inbound[c2].y;
                                            var dx1 = x1 - xMin;
                                            var dy1 = y1 - yMin;
                                            var pdx1 = (100.0 * dx1) / (xMax - xMin);
                                            var pdy1 = (100.0 * dy1) / (yMax - yMin);
                                            var dx2 = x2 - xMin;
                                            var dy2 = y2 - yMin;
                                            var pdx2 = (100.0 * dx2) / (xMax - xMin);
                                            var pdy2 = (100.0 * dy2) / (yMax - yMin);
                                            //                                        v_inbound.push({"x":pdx1,"y":pdy1});
                                            svg = svg
                                                    + '<line x1="' + pdx1 + '%" y1="' + pdy1 + '%" '
                                                    + 'x2="' + pdx2 + '%" y2="' + pdy2 + '%" style="stroke:rgb(255,0,0);stroke-width:16%;" />';
                                        }

                                        svg = '<svg height="100%" width="100%">' + svg + '</svg>';
                                        // <svg height="100%" width="100%"><line x1="0" y1="0" x2="100%" y2="100%" style="stroke:rgb(255,0,0);stroke-width:2" /></svg>
                                        svg = '<div id="inbound-' + id + '" class="inbound">' + svg + '</div>'
                                        $('#weight-area').append('<div id="point-' + id + '" class="marker">' + id + '</div>');
                                        $('#weight-area').append(svg);
                                        $('#weight-area > div#point-' + id).css({'top': px + '%', 'left': py + '%', 'background-image': "url({{ asset('static/images/marker_red_50x25.png') }})"})
                                        $('#weight-area > div#inbound-' + id).css({
                                            'top': pxMin + '%'
                                            , 'left': pyMin + '%'
                                            , 'width': pxMax - pxMin + '%'
                                            , 'height': pyMax - pyMin + '%'
                                        });
                                    }
                                    return json.data.acquisitions;
                                } else {
                                    return new Array();
                                }
                            } else {
                                tot = 0;
                                $('#search #search-result .error-red').html(json.errmsg);
                                $('#search #search-result .error-red').show();
                                return new Array();
                            }

                            $tout = setTimeout(function (v) {
                                table.ajax.url("{{ path('api_getfullmatic') }}").load().draw();
                                $('.dataTables_empty').html('<div id="page-wrapper"><div class="loading">Loading...</div></div>');
                            }
                            , 10000);

                        }
                    },
                    "language": {
                        "search": "{{ 'Filter records'|trans }}:"
                    },
                    "fixedHeader": true,
                    "lengthMenu": [25, 50, 100, 200, 500],
                    "deferRender": true,
                    "order": [[0, "desc"]],
                    "columns": [
                        {"data": "id"}
                        , {"data": "codice"}
                        , {"data": "peso"}
            {% if is_granted('ROLE_SUPERADMIN') %}
                            , {"data": "altezza"}
                            , {"data": "centro"}
            {% endif %}
                            , {"data": "id"}
                        ]
                        , "columnDefs": [
                            {
                                "render": function (data, type, row) {
                                    return '<div class="cell-value" data-ori_value="' + data + '" data-cur_value="' + data + '"><div class="value-view">' + data + '</div></div>';
                                },
                                "targets": 1
                            },
                            
                            
            {% if is_granted('ROLE_SUPERADMIN') %}
                            {
                                "render": function (data, type, row) {
                                    var x = data.x;
                                    var y = data.y;
                                    return '<div class="text-center" data-value="' + x + '-' + y + '">' + x + ' x ' + y + '</div>';
                                },
                                "type": "items",
                                "width": "10%",
                                "targets": 4
                            },
            {% endif %}
                            {
                                "render": function (data, type, row) {
                                    var x = data.x;
                                    var y = data.y;
                                    return '<div class="text-center"><a href="#" onclick="javascript:cmddelete(' + data + ')"><i style="color: red;" class="fa fa-trash fa-2x"></i></a></div>';
                                },
                                "type": "items",
                                "width": "10%",
                                "targets": {% if is_granted('ROLE_SUPERADMIN') %}5{% else %}3{% endif %}
                            }
                        ],
                    });
                    $('.dataTables_empty').html('<div id="page-wrapper"><div class="loading">Loading...</div></div>');
                });
        </script>
    {% endblock %}