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

{% block menuTop %}{% endblock %}


{% block stylesheets %}
    <link rel="stylesheet" href="{{ asset('datatables/css/dataTables.bootstrap.min.css')}}">
    <link rel="stylesheet" href="{{ asset('datatables/css/buttons.bootstrap.min.css')}}">
{% endblock %}

{% block dashboard %}
    <style>
        .double-scroll {
            width: 100%;
            margin-bottom: 40px;
        }

        /* pager wrapper, div */
        .pager {
            padding-left: 0;
            margin: 0;
            text-align: left;
            list-style: none;
        }

        /* pager wrapper, in thead/tfoot */
        td.pager {
            background-color: #e6eeee;
        }

        /* pager navigation arrows */
        .pager img {
            vertical-align: middle;
            margin-right: 2px;
        }

        /* pager output text */
        .pager .pagedisplay {
            font-size: 14px;
            font-weight: bold;
            padding: 0 5px 0 5px;
            width: 50px;
            text-align: center;
        }

        /*** loading ajax indeterminate progress indicator ***/
        #tablesorterPagerLoading {
            background: rgba(255, 255, 255, 0.8) url(icons/loading.gif) center center no-repeat;
            position: absolute;
            z-index: 1000;
        }

        /*** css used when "updateArrows" option is true ***/
        /* the pager itself gets a disabled class when the number of rows is less than the size */
        .pager.disabled {
            display: none;
        }

        /* hide or fade out pager arrows when the first or last row is visible */
        .pager img.disabled {
            /* visibility: hidden */
            opacity: 0.5;
            filter: alpha(opacity=50);
        }

        .tablesorter-pager select {
            margin: 0;
            padding: 0;
            width: 50px;
        }

        .wrapper {
            padding-bottom: 50px;
        }

        .header {
            background: #000000;
        }

        .header .container {
            padding-bottom: 20px;
        }

        .header .container h1 {
            color: #FFF;
            line-height: 50px;
            margin-top: 30px;
            margin-bottom: 0;
        }

        .header .container h3 {
            color: #E0E0E0;
            font-size: 16px;
            margin-top: -5px;
        }

        .header .container h3 a {
            color: #66aacc;
        }

        .header .container h3 a:hover {
            color: #b3d5e6;
        }

        .top-menu {
            position: absolute;
            z-index: 9999;
        }

        .top-menu .nav-list {
            background: rgba(255, 255, 255, 0.8);
            border: 1px solid #CCC;
            margin: 20px;
            position: fixed;
            right: 0;
        }

        pre, .well {
            background: #FFFFFF;
        }

        .syntax-container {
            background: #FCFCFC;
            -webkit-border-radius: 7px;
            -webkit-background-clip: padding-box;
            -moz-border-radius: 7px;
            -moz-background-clip: padding;
            border-radius: 7px;
            background-clip: padding-box;
            border: 1px solid #e3e3e3;
            margin-bottom: 30px;
            padding-bottom: 20px;
        }

        .isloading-wrapper.isloading-right {
            margin-left: 10px;
        }

        .isloading-overlay {
            position: relative;
            text-align: center;
        }

        .isloading-overlay .isloading-wrapper {
            background: #FFFFFF;
            -webkit-border-radius: 7px;
            -webkit-background-clip: padding-box;
            -moz-border-radius: 7px;
            -moz-background-clip: padding;
            border-radius: 7px;
            background-clip: padding-box;
            display: inline-block;
            margin: 0 auto;
            padding: 10px 20px;
            top: 10%;
            z-index: 9000;
        }

        /*Glyphicon Spinner*/
        .glyphicon-spin {
            -animation: spin .9s infinite linear;
            -webkit-animation: spin2 .9s infinite linear;
        }

        @-webkit-keyframes spin2 {
            from {
                -webkit-transform: rotate(0deg);
            }
            to {
                -webkit-transform: rotate(360deg);
            }
        }

        @keyframes spin {
            from {
                transform: scale(1) rotate(0deg);
            }
            to {
                transform: scale(1) rotate(360deg);
            }
        }

        #menuTop {
            margin-top: 30px;
        }

        body {
             /*margin-top: 80px;*/
        }

        h1 {
            font-size: 36px;
        }

    
        /*color de cabecera de tabla*/
        .tablesorter-header-inner, table.tablesorter thead tr th, .tablesorter-filter {
            color: #fff;
            background-color: #307aba;
            border-color: #dedede;
            font-weight: normal;
        }

        table.tablesorter thead tr th {

            height: 40px;
        }

        .tablesorter-blue .headerSortUp, .tablesorter-blue .tablesorter-headerSortUp, .tablesorter-blue .tablesorter-headerAsc {
            background-color: #307aba;
        }

        .tablesorter-blue .headerSortDown, .tablesorter-blue .tablesorter-headerSortDown, .tablesorter-blue .tablesorter-headerDesc {
            background-color: #307aba;
        }

        .tablesorter-blue .tablesorter-filter-row td {
            background: #307aba;
        }

        input[type="search"] {
            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;
        }
    </style>

    <div class ="container-fluid" id="info">
        <div class="row">
            <div class="col-lg-12 col-md-12 col-sm-12 text-center" >
                <h1>{{title}}</h1>
            </div>
        </div>
    </div>
    <div class="container-fluid">
        <div class="row">
            <div class="col-lg-2" id="parametros">
                <select class="form-control" id="ambientes">
                    <option value="null" id="subseleted" selected>AMBIENTE</option>                   
                    {% for api in apis %}
                        <option value="{{api.company_Id}}/{{api.api_key_a}}/{{api.ambiente}}" >{{api.ambiente}}</option>
                    {% endfor %}
                </select>
            </div>
        </div>
    </div>
    <div class="container-fluid" id="inicio" style="display: none">
        <div class="tab-content" style="margin-top: 20px;">
            <div id="_summary" class="tab-pane fade in active">
                <div class="row">
                    <div class="btn-group pull-right" role="group" aria-label="..." style="margin-right: 50px">
                        <a href="#"
                           onclick="$('#tableSitios').tableExport({type: 'excel', escape: 'false',fileName: 'Distribuidores',ignoreRow: [1]});">
                            <img src={{ asset("images/xls.png") }} width="24px">
                            XLS
                        </a>
                    </div>
                    <div class="pager">
                        <span class="pagedisplay"></span>
                    </div>
                    <a class="reset"><i class="fa fa-eraser" aria-hidden="true"></i></a>
                </div>
                <div class="row double-scroll" id="reporte1">
                </div>
                <div id="pager" class="pager" style="display: none;text-align: center; ">
                    <form>
                        <img src="{{ asset('tablesorter-master/addons/pager/icons/first.png') }}" class="first"/>
                        <img src="{{ asset('tablesorter-master/addons/pager/icons/prev.png') }}" class="prev"/>
                        <img src="{{ asset('tablesorter-master/addons/pager/icons/next.png') }}" class="next"/>
                        <img src="{{ asset('tablesorter-master/addons/pager/icons/last.png') }}" class="last"/>
                        <span class="pagedisplay"></span>
                        <select class="pagesize" title="Select page size">
                            <option selected="selected" value="1000">1000</option>
                            <option value="500">500</option>
                            <option value="100">100</option>
                        </select>
                    </form>
                </div>
            </div>
            <div id="_detail" class="tab-pane fade in">
                <div class="col-lg-6" id="chart3">
                </div>
                <div class="col-lg-6" id="chart4">
                </div>
            </div> <!-- end detail -->
        </div>
    </div>

    <!-- Modal -->
    <div class="modal fade" id="myModal" role="dialog">
        <div class="modal-dialog modal-lg">
        
          <!-- Modal content-->
            <div class="modal-content">
                <div class="modal-header bg-primary">
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                    <h4 class="modal-title"></h4>
                </div>
                <div class="modal-body">
                    <table class="table table-bordered table-hover table-striped table-responsive" id="tableSitios"> 
                        <thead>
                            <tr class="bg-primary">
                            <th style="vertical-align:middle; width: 100px;" class="text-center" >OS</th>
                            <th style="vertical-align:middle; width: 100px;" class="text-center" >OS Version</th>
                            <th style="vertical-align:middle; width: 100px;" class="text-center" >Hardware</th>
                            <th style="vertical-align:middle; width: 100px;" class="text-center" >App Version</th>
                            </tr>
                        </thead>
                        <tbody id="body"></tbody>
                    </table>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                </div>
            </div>
          
        </div>
    </div>
  
</div>
{% endblock %}

{% block javascripts %}
	<script src="{{ asset('js/jquery.form.js') }}"></script>
    <script src="{{ asset('js/jquery.isloading.js') }}" type="text/javascript"></script>
    <script src="{{ asset('js/jquery.doubleScroll.js') }}" type="text/javascript"></script>
    <script src="{{ asset('js/tableExport.js') }}"></script>
    <script src="{{ asset('js/jquery.base64.js') }}"></script>
    <script>
        $(function(){
            // llamada al modal
            $("#myBtn").live('click',function(){
                var userId = $(this).attr('data-id');
                var company_Id = $(this).attr('data-company');
                var key = $(this).attr('data-key');
                var url = `https://secure.appenate.com:443/api/v2/user?Id=${userId}&CompanyId=${company_Id}&IntegrationKey=${key}`;
                
                $.getJSON(url, function(res){
                    var fullName = `Información de dispositivo de: ${res.User.FirstName} ${res.User.LastName}`;
                    var devices = res.User.UserDevices;
                    var len = devices.length;
                    
                    $('#body').empty();
                    $('.modal-title').empty().append(fullName);

                    for (var i = 0 ; i < len; i++) {
                        $('#body')
                            .append(`<tr class=text-center >
                                    <td>${devices[i].OS}</td>
                                    <td>${devices[i].OSVersion}</td>
                                    <td>${devices[i].Hardware}</td>
                                    <td>${devices[i].AppVersion}</td>
                                    </tr>`);
                    }

                    $("#myModal").modal();
                });
                
            });
            
            $("select#ambientes").change(function(){
                $.isLoading({
                    text: 'Loading',
                });
                
                var value = $(this).attr('value');

                if(value != "null"){
                    var split = value.split("/");
                    var id = split[0];
                    var key = split[1];
                    var ambiente = split[2];
                                     
                    getReporte(id, key, ambiente);
                }else{
                    $.isLoading('hide');
                    $('.pager').hide();
                    $('#inicio').hide();
                }

            });


            function getReporte(id, key, ambiente){

                var url = `https://secure.appenate.com:443/api/v2/user/search?CompanyId=${id}&IntegrationKey=${key}&&&&&&&`;


                $.getJSON(url, function(data){

                    $.getJSON( url, function(data){
                        var objectType = {"9": 1, "10": 2, "11": 3, "12": 4, "13": 5, "14": 6};
                        $('#reporte1')
                            .empty()
                            .append(
                                createTable(data, undefined, undefined, objectType, ambiente, id, key)
                            );

                        $('.double-scroll').doubleScroll();

                        var pagerOptions = {
                            container: $('.pager'),
                            output: 'Rows : {endRow}',
                            fixedHeight: false,
                            removeRows: true,
                            cssGoto: '.gotoPage',
                        };

                        $('.table1').tablesorter({
                            theme: 'blue',
                            widgets: ['zebra', 'filter'],
                            widgetOptions: {
                                filter_cssFilter: '',
                                filter_childRows: false,
                                filter_hideFilters: false,
                                filter_ignoreCase: true,
                                filter_reset: '.reset',
                                filter_saveFilters: true,
                            },
                        }).tablesorterPager(pagerOptions);

                        $('.pager').show();
                        $('#inicio').show();
                        $('#autoload').attr('disabled', false);
                        $.isLoading('hide');

                    }).fail(function() {
                        $.isLoading('hide');
                    });// fin getJSON

                });
            }

            function createTable(data, total, nombreColTotal, type, ambiente, companyId, key){
                
                var monitor = data.Users;

                var table = '<table class="table table-bordered table-hover table-striped table-responsive table1 bg-primary" id="tableSitios" > <thead>';
                table += '<tr class="bg-primary">';
                table += '<th style="vertical-align:middle; width: 100px;" class="text-center" >AMBIENTE</th>'
                table += '<th style="vertical-align:middle; width: 100px;" class="text-center" >EMAIL</th>'
                table += '<th style="vertical-align:middle; width: 100px;" class="text-center" >APELLIDO</th>'
                table += '<th style="vertical-align:middle; width: 100px;" class="text-center" >NOMBRE</th>'
                table += '<th style="vertical-align:middle; width: 100px;" class="text-center" >HARDWARE</th>'
                table += '<th style="vertical-align:middle; width: 100px;" class="text-center" >SISTEMA OPERATIVO</th>'
                table += '<th style="vertical-align:middle; width: 100px;" class="text-center" >APP VERSION</th>'

                table += '</tr></thead><tbody>'

                for (var i in monitor) {
                    var data = monitor[i];

                    var len = data.UserDevices.len;
                    var devices = data.UserDevices;
                    

                    for (var i in devices) {
                        table += '<tr class="text-center">';
                        table += '<td>' + ambiente + '</td>';
                        table += '<td>' + data.Email + '</td>';
                        table += '<td>' + data.LastName + '</td>';
                        table += '<td>' + data.FirstName + '</td>';
                        table += '<td>' + devices[i].Hardware + '</td>';
                        table += '<td>' + devices[i].OS + '</td>';
                        table += '<td>' + devices[i].AppVersion + '</td>';
                        table += '</tr>';   
                    }

                }

                table += '</tbody></table>';
                return table;

            }// end create table

            
        });
    </script>
{% endblock %}