@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">Filtro CPEs</div>
                    <div class="panel-body">
                    	<div class="row">
                            <form action="pesoControler/filtrar" method="get" accept-charset="utf-8">
                                <div class="row">
                                    <div class="col-sm-2">
                                    </div>
                                    <div class="col-sm-4">
                                        <span>MAC: </span>
                                        <input type="text" id = "mac">
                                    </div>
                                    <div class="col-sm-4">
                                        <span>IP: </span>
                                        <input type="text" id = "ip">
                                    </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>
    	                <div class="col-sm-2"></div>
	                    <div class="col-sm-8">
		    				<table id="tabla" class="table table-striped table-bordered dt-responsive" style="width:100% !important" cellspacing="0">
			    				<thead>
				    				<tr>
					    				<th>IP CPE</th>
						    			<th>MAC</th>
							    		<th>Nombre AP</th>
								    	<th>Nro Cliente</th>
									    <th>Cliente</th>
									    <th>Coordenada</th>
									    <th>Mapa</th>
								    </tr>
							    </thead>
    							<tbody id =bodyLista>
	    						</tbody>
						    </table>
					    </div>
                    </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>
        $('#tabla').hide();

        $('#filtrar').click(function(event) {
    		$('#mac').text('');
	    	$('#ip').text('');

		    if (($('#mac').val() == "") && ($('#ip').val() == "")) {
			    alert('Ingrese un valor');
		    } else {
    	    	var parametros = {
	        		'mac' : $('#mac').val(),
	        		'ip' : $('#ip').val(),
    	    	}

    	        $.ajax({
	                url: '/finder/filtrar',
	                type: "GET",
	                dataType: "json",
	                contentType: "application/json",
	                data: parametros,
	                success: function(data) {
    	            	if (data.length == 0) {
                            $("#bodyLista tr").remove();
						    $('#tabla').hide();
	            		    alert('No se encontraron registros.');
	            	    } else {
                            $("#bodyLista tr").remove();
                            var fila = "<tr><td>"+data.ip+"</td><td>"+data.mac+"</td><td>"+data.AP+"</td><td>"+data.nro+"</td><td>"+data.cliente+"</td><td>"+data.coordenada+"</td><td><a href='https://www.google.com/maps/?q="+data.coordenada+"' target='_blank'><i class='fa fa-map-marker'></i></a></td></tr>";
		                    $('#tabla').append(fila);
                            $('#tabla').show();
    	            	}
    	            },
	                error: function(e) {
	                    alert("Error 003");
	                }
	            });
    		}
    	});
    </script>
@endsection