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

{% 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 body_id 'search-container' %}

{% block title %}{{ nome }}{% endblock %}
{% block body %}

    <div class="contenitori mm-page">
        <div id="wrap">

            <div class="row">
                
                <div id="content" class="col-md-12">
                    
                <div class="col-md-12">    
    <div class="titotlo-pagina">
        <a class="add-container-btn" href="{{ path('contenitori_new', {'tipologia':tipologia}) }}" title="Add user"><div class="user-add"><i class="fas fa-plus-circle"></i></div></a>        
        <h1>{{ nome|trans }}</h1>
        </div>
        {{ form_start(form) }}
        {{ form_row(form._token) }}
        {# ... #}
        {{ form_end(form, {'render_rest': true}) }}    
        

    <section id="search-result" class="tile transparent">   
        <div id="id-error-msg" class="error-red"></div>
        <table id="searchresult" class="display search-result table-datatable" style="width:100%">
            <thead>
                <tr>
                    <th>&nbsp;</th>
                    <th>&nbsp;</th>
                    <th>{{ "Name"|trans }}</th>
                    <th>{{ "Weight Capacity [g]"|trans }}</th>
                    <th>{{ "External Vol. [cm2]"|trans }}</th>
                    {#   <th>{{ "Volume"|trans }}</th> #}
                    <th>{{ "H [cm]"|trans }}</th>
                    <th>{{ "L [cm]"|trans }}</th>
                    <th>{{ "W [cm]"|trans }}</th>
                    {#  <th style="text-align: center;">{{ "N. Box"|trans }}</th>#}
                    <th>{{ "Status"|trans }}</th>
                    <th>{{ "Internal Vol."|trans }}</th>
                    <th>{{ "Modify Date"|trans }}</th>
                    <th>&nbsp;</th>
                </tr>
            </thead>
        </table>            
    </section>     

    </div>
    </div>
    </div>
    </div>
    </div>




{% 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/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-1.11/datatables.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>
    <script>



    table = $('#searchresult').DataTable({
        "ajax": {
            "type": "GET",
            "url": "{{ path('api_contenitore_get', {'tipologia':tipologia}) }}",
            "dataSrc": function (json) {
                $('#search #search-result .error-red').html('');
                $('#search #search-result .error-red').hide();
                if (json.err === 0) {
                    tot = json.tot;
                    return json.data;
                } else {
                    tot = 0;
                    $('#search #search-result .error-red').html(json.errmsg);
                    $('#search #search-result .error-red').show();
                    return new Array();
                }
            }
        }
        , "language": {
            "search": "{{ 'Filter records'|trans }}:"
        }
        , "lengthMenu": [25, 50, 100, 200, 500]
        , "deferRender": true
        , "order": [[0, "desc"]]
        , "columns": [
            {
                "data": "Id", 
                "visible": false,
                "searchable": false
            },
            {"data": null},
            {"data": "Nome"},
            {"data": "Portata"},
            {"data": "EstVolume"},
            {"data": "EstH"},
            {"data": "EstL"},
            {"data": "EstW"},
            {"data": "Tipo"},
            {"data": "IntVolume"},
            {"data": "ModifyDate"},
            {
                "className":      'dt-command text-center delete-order no-link',
                "orderable":      false,
                "data":           null,
				"defaultContent":  
				' <h3>'
                + '  <i class="fa fa-pencil fa-2x cmd-edit" style="color: green;"></i>'
                + '  <i class="fa fa-trash fa-2x cmd-delete" style="color: red;"></i>'
                + ' </h3>'
			}
        ]
        , "columnDefs": [

            {
                "render": function(data, type, row) {
                    let _imgUrl = row.ImmaginePrincipale;
                    if (_imgUrl === null || _imgUrl === '') {
						_imgUrl = "{{ asset('/static/c4rg0_themes/assets/images/icons/DDP-ML_ICO.png') }}";
                    }
                    return '<div class="first-col image-col" id="send-cmd-' + row.Id + '"><img src="' + _imgUrl + '"></div>';
                },
                "targets": 1
            },        
            {
                "render": function(data, type, row) {
                    let url = "{{ path('configuratore_mo', {op:'emo',code:':::MO'}) }}".replace(':::MO', row.codice);
                    return '<div class="nome-col" id="send-cmd-' + row.Id + '">'+ row.Nome + '</div>';
                },
                "targets": 2
            }
        ]
        , "createdRow": function(row, data, index) {
            $(row).addClass("tab-row");
            $(row).addClass("tab-row-new");
            $(row).addClass("index-" + index);
            $(row).attr('id', 'id-' +  data.Id);
            row.setAttribute("data-id", data.Id);
        }
        
    });

    $(function() {
        $('#searchresult').on('click', 'td:not(.no-link)', function () {
            let _tr = $(this).closest('tr');
            let _id = _tr.data('id');
            let _url = "{{ path('contenitori_show', {'tipologia':tipologia,'id':':::ID'}) }}"
                    .replace(':::ID', _id);
            location.href = _url;
        });
        $('#searchresult').on('click', 'td i.cmd-edit', function () {
            let _tr = $(this).closest('tr');
            let _id = _tr.data('id');
            let _url = "{{ path('contenitori_edit', {'id':':::ID'}) }}"
                    .replace(':::ID', _id);
            location.href = _url;
        });
        $('#searchresult').on('click', 'td i.cmd-delete', function () {
            let _tr = $(this).closest('tr');
            let _id = _tr.data('id');
            let _url = "{{ path('api_contenitori_delete') }}";
            if (confirm("{{ 'Are you sure you want to delete this item?'|trans }}")) {
                $.ajax({
                    method: "DELETE",
                    url: _url,
                    data: { "id": _id }
                })
                .error(function(msg) {
                })
                .done(function(msg) {
                    if (msg.err === 0) {
                        table.ajax.reload();
                    }
                });                
            }
        });


    });



    </script>
{% endblock %}