{% extends 'layout.twig' %}
{% import '/macro/iptw_macro.twig' as main_macro %}
{% set title = ('Statistics'|trans ~ ': ' ~ 'TV statistics'|trans) | trans %}

{% block content %}
    <div id="iptv_list">
        <div class="row">
            <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
                {{ main_macro.get_filter('user_locale', "User's language"|trans, 'id', 'title', app['allTVLocale'], 3, 7) }}
                {{ main_macro.get_datepicker_double_input() }}
            </div>
        </div>

        <div class="row">
            <div class="box">
                {% if attribute(app, 'dropdownAttribute') is defined %}
                    {{ main_macro.get_dropdown_attribute(app['dropdownAttribute']) }}
                {% endif %}
                <div class="box-content">
                    <div class="box-content no-padding">
                        <div class=" ">
                            <div class=" ">
                                <div class="dataTables_processing"></div>
                                <table class="table  table-hover table-datatable" id="datatable-1">
                                    {% if attribute(app, 'dropdownAttribute') is defined %}
                                        {{ main_macro.get_datatable_head(app['dropdownAttribute']) }}
                                    {% endif %}
                                    <tbody>

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

    <script type="text/javascript" defer>

        function TestTable1() {
            $('#datatable-1').on('xhr.dt', function (e, settings, json) {
                if (typeof (json.data) == 'object') {
                    for (var i in json.data) {
                        var row = json.data[i];
                        for (var key in row) {
                            if (key == 'name') {
                                var val = row[key];
                                json.data[i][key] = '<a href="{{app.request.baseUrl}}/tv-channels/edit-channel?id=' + row.itv_id + '">'+ val +'</a>';
                            }
                        }    
                    }
                }
            }).dataTable({
                "processing": true,
                "serverSide": true,
                "ajax": {
                    "url": "{{ app.request.baseUrl }}/{{ app.controller_alias }}/stat-tv-list-json",
                    "data": function (d) {
                        d = dataTableDataPrepare(d);
                        $('input[id^="datepicker_"]').each(function () {
                            d['filters[' + $(this).attr("id").replace("datepicker_", "interval_") + ']'] = $(this).val();
                        });
                    }
                },
                "language": {
                    "url": "{{ app.datatable_lang_file }}"
                },
                {% if attribute(app, 'dropdownAttribute') is defined %}
                {{ main_macro.get_datatable_column(app['dropdownAttribute']) }}
                {% endif %}
                "bFilter": true,
                "bPaginate": true,
                "bInfo": true,
				"columnDefs": [ {"searchable": false, "targets": [2]} ]
            }).prev('.dataTables_processing').hide('');
        }

        function yelp() {
            $(document).ready(function () {
                {{ main_macro.get_datepicker_js_script() }}
                LoadDataTablesScripts(TestTable1);
            });
        }

        document.addEventListener("DOMContentLoaded", yelp, false);
        
    </script>
{% endblock %}