@extends('layouts.app')

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.4/css/bootstrap-select.min.css">

@section('content')
<div class="container">
    <div class="row">
        <div>
            <div class="panel panel-primary">
                <div class="panel-heading">Aparatos</div>
                <div class="panel-body">
                    
                    <div class="row">
                        <div class="col-sm-10">
                            <a href="/aparato_nuevo"><button type="button" class="btn btn-success pull-right">Nuevo Aparato</button></a>
                        </div>
                        
                    </div>
                    <hr>
                        <span> Filtros </span>
                    <div class="row">
                        <form action="aparato/filtrar" method="get" accept-charset="utf-8">
                        <div class="row">
                            <div class="col-sm-2">
                            </div>  
                            <div class="col-sm-4">
                            <span>Nodo: </span>
                            <select class="selectpicker" data-live-search="true" id = 'nodoId'>
                                <option value=''>Seleccione una opcion...</option>                            </select>
                           </div>
                            <div class="col-sm-4">
                            <span>Rol: </span>
                            <select class="selectpicker" data-live-search="true" id = "rolId">
                                <option value=''>Seleccione una opcion...</option>                            </select>
                         </div>     
                         </div>  
                         <div class="row">
                            <div class="col-sm-8"></div>  
                            <div class="col-sm-2">
                                <input type="button" class="btn btn-info pull-right" id = "filtrar" value="Filtrar"> 
                            </div>  
                            
                         </div>
                            
                        </form>
                    </div> 
                    <hr>

                    <div id = "seccionTablaSpinner"></div>                                                
                    
                    <div class="row">                                            
                        <table id="record_list" class="table table-striped table-bordered dt-responsive" style="width:100% !important" cellspacing="0">
                            <thead>
                                <tr>
                                    <th>&nbsp;</th>
                                    <th>Nombre</th>
                                    <th>IP</th>
                                    <th>Rol</th>
                                    <th>Nodo</th>
                                    <th>Modelo</th>
                                    <th>&nbsp;</th>
                                </tr>
                            </thead>
                        </table>
                    </div>

                    <input type="hidden" id = "itemCopiar">

                </div>
            </div>
        </div>
    </div>
</div>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.1/js/bootstrap-select.js"></script>
@endsection


@section('scripts')

<script src="/js/dataTables-buttons.min.js"></script>
    <script src="/js/buttons-html5.min.js"></script>  
    <script src="/js/jszip.min.js"></script>
    <script src="/js/pdfmake.min.js"></script> 
    <script src="/js/buttons.print.min.js"></script> 
    <script src="/js/vfs_fonts.js"></script>

    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.2.0/dist/leaflet.css" 
          integrity="sha512-M2wvCLH6DSRazYeZRIm1JnYyh22purTM+FDB5CsyxtQJYeKq83arPe5wgbNmcFXGqiSH2XR8dT/fJISVA1r/zQ==" 
          crossorigin=""/>

     <link rel="stylesheet" type="text/css" href="/css/buttons-dataTables.min.css"/> 
           
    <!-- Make sure you put this AFTER Leaflet's CSS -->
    <script src="https://unpkg.com/leaflet@1.2.0/dist/leaflet.js" 
        integrity="sha512-lInM/apFSqyy1o6s89K4iQUKg6ppXEgsVxT35HbzUupEVRh2Eu9Wdl4tHj7dZO0s1uvplcYGmt3498TtHq+log==" 
        crossorigin=""></script>


<script>


var nuevo=false;
nagios = '{{ env('NAGIOS_WEB') }}';
nagvis = '{{ env('NAGVIS_WEB') }}';

$(document).ready(function() {
    $('#record_list').hide();
});
  
  $('#filtrar').click(function(event) {

    $('#filtrar').prop("disabled",true);
    $('#record_list').hide();


     var parametros = {
        'rolId' : $('#rolId').val(),
        'nodoId' : $('#nodoId').val(),
      }  


    $('#record_list').DataTable({
        destroy: true,
        "order": [[ 1, "asc" ]],
        stateSave: true,
        dom: 'Bfrtip',
        buttons: [
            'csv', 'excel', 'pdf'
        ],
        "ajax":{
        "url": "/aparatos/filtrar",
        "type": "GET",
        "data": parametros,
            'beforeSend': function (request) {
                $('#seccionTablaSpinner').html('<div class="col-sm-5"></div>Cargando...<i class="fa fa-circle-o-notch fa-spin" style="font-size:24px"></i>');         
            }
        },

        'initComplete':function(settings, json){
                $('#seccionTablaSpinner').html('');         
                $('#record_list').show();
                $('#filtrar').prop("disabled",false);
        },

        "columns": [
            {"data":"id"},
            {"data":"nombre"},
            {"data":"ip"},
            {"data":"rol"},
            {"data":"nodo.nombre"}, 
            {"data":"modelo"},
            {"data":"puerto"},
            
        ],
        "language": {
            "url":"/js/Spanish.json"
        },

        "columnDefs": [
            {
                "orderable":false,
                "targets" : 0,
                "render": function ( data, type, row ) {
                    return '<a href="http://'+nagvis+'/nagvis/frontend/nagvis-js/index.php?mod=Map&act=view&show='+row.nodo.nombre.replace(/ /g,"_")+'&search='+row.nombre.replace(/ /g,"_")+'" target="_blank"><i class="fa fa-sitemap" title="Mapa Nagvis"></i></a> <a href="http://'+nagios+'/nagios/cgi-bin/cmd.cgi?cmd_typ=55&host='+row.nombre.replace(/ /g,"+")+'" target="_blank"><i class="fa fa-gear" title="Programar mantenimiento"></i></a>';
                }
            },
            {
                "orderable":true,
                "targets" : 1,
                "render": function ( data, type, row ) {
                    return '<a href="/aparato/'+row.id+'" title="Formulario Aparato">'+row.nombre+'</a>';
                }
            },
            {
                "orderable":false,
                "targets" : 2,
                "render": function ( data, type, row ) {
                    if(row.puerto==80)
                        return '<a href="http://'+row.ip+':'+row.puerto+'" title="Acceso Web" target="_blank">'+row.ip+'</a><i class="fa fa-files-o pull-right" style="cursor:pointer;" title = "Copiar IP"  onClick = copiar("'+row.ip+'") ></i> ';
                    else if(row.puerto == 443)
                        return '<a href="https://'+row.ip+':'+row.puerto+'" title="Acceso Web" target="_blank">'+row.ip+'</a><i class="fa fa-files-o pull-right" style="cursor:pointer;" title = "Copiar IP"  onClick = copiar("'+row.ip+'")></i>';
                    else
                        return row.ip+'<i class="fa fa-files-o pull-right" style="cursor:pointer;" title = "Copiar IP"  onClick = copiar("'+row.ip+'")></i>';


                }
            },
            {
//                "orderable":false,
                "targets" : 3,
                "render": function ( data, type, row ) {
                    if(row.rol==1)
                        return 'PTP';
                    else if(row.rol==2)
                        return 'Router';
                    else if(row.rol==3)
                        return 'Switch';
                    else if(row.rol==4)
                        return 'AP';    
                    else if(row.rol==5)
                        return 'Test220';
                    else if(row.rol==6)
                        return 'Servidor';
                    else if(row.rol==7)
                        return 'Otro';
                }
            }, 
            {
                "orderable":true,
                "targets" : 4,
                "render": function ( data, type, row ) {
                    return ' <a href="http://'+nagios+'/nagios/cgi-bin/status.cgi?hostgroup='+row.nodo.nombre.replace(/ /g,"_")+'&style=detail" target="_blank"><i class="fa fa-object-group" title="Nagios Hostgroup"></i></a> <a href="http://'+nagvis+'/nagvis/frontend/nagvis-js/index.php?mod=Map&act=view&show=1_Global&search='+row.nodo.nombre.replace(/ /g,"_")+'" target="_blank"><i class="fa fa-sitemap" title="Mapa Nagvis"></i></a> <a href="/nodo/'+row.nodo.id+'" title="Formulario Nodo">'+row.nodo.nombre+'</a>';
                }
            },

            {
                "orderable":true,
                "targets" : 5,
                "render": function ( data, type, row ) {
                    return row.modelo;
                }
            },  
            {
                "orderable":false,
                "targets" : 6,
                "render": function ( data, type, row ) {
                    return '<a href=# onClick="delete_record($(this).parents(\'tr\'))"><i class="fa fa-trash-o" title="Eliminar"></i></a>';
                }
            }   

        ]
    });
    

  });  

 function copiar(ip){

      $('#itemCopiar').val(ip);      
      var $temp = $("<input>");
      $("body").append($temp);
      var pepe = $temp.val($('#itemCopiar').val()).select();
      document.execCommand("copy");
      $temp.remove();  
      alert('copiado');    

 } 

function delete_record(dom_row) {
   var dt_row=$('#record_list').DataTable().row(dom_row);
   var data = dt_row.data();
    bootbox.confirm("Est&aacute; seguro de borrar este aparato? No hay deshacer!",function(answer) {
            if(answer) {
                $.ajax({
                    url: '/aparato/'+data.id,
                    type: "DELETE",
                    dataType: "json",
                    contentType: "application/json",
                    success: function(result) {
                        if(result.status=='ok') {
                            $('#record_list').DataTable().ajax.reload();
                        }
                    },
                    error: function(e) {
                        alert("Error 003 " + e);
                    }

             });
            }
        });
}
</script>
@endsection