@extends('layouts.app')

@section('content')
    <div class="container">
        <div class="row">
            <div>
                <div class="panel panel-primary">
                    <div class="panel-heading">Clientes</div>
                    <div class="panel-body">
                        <form>
                            <div class="form-group">
                                <label for="nodo">Codigo Cliente:</label>
                                <input type="text" id = "codigo" name = "codigo">
                            </div>
                            <input type="button" class = "btn btn-primary" name="" value="Buscar" id = "buscar">
                        </form>
                        <br>
                        <label id = "cartel">Procesando Información...</label>
                        <br>
                        <table id="tabla" class="table table-striped table-bordered dt-responsive" style="width:100% !important" cellspacing="0">
                            <thead>
                                <tr class="info">
                                    <th>Cliente</th>
                                    <th>Código Cliente</th>
                                    <th>IP</th>
                                    <th>Usuario ONU</th>
                                    <th>Contraseña ONU</th>
                                    <th>Plan (Upload/Download)</th>
                                </tr>
                            </thead>
                            <tbody id = "tablaBody">
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('scripts')
    <script>
        $('#tabla').hide();
        $('#cartel').hide();

        $('#buscar').click(function(event) {
            $('#cartel').show();
            $('#tabla tbody').empty();
            $('#buscar').attr('disabled','disabled');

            var codigo = $('#codigo').val();

            $.ajax({
                url: '/api/fibra/buscar_datos',
                type: "GET",
                data:{codigo:codigo}
            })
            .done(function(resp) {
                $('#cartel').hide();
                $('#buscar').removeAttr('disabled');

                var resp = jQuery.parseJSON(resp);

                if(resp.length > 0){
                    console.log(resp);
                    var fila = '';

                    $.each( resp, function( key, value ) {
                        fila += "<tr>";
                        fila += "<td>"+resp[key].nombre+"</td><td>"+resp[key].codigo+"</td><td>"+resp[key].ip+"</td><td><b>"+resp[key].username+"</b></td><td><b>"+resp[key].password+"</b></td><td>"+resp[key].velocidad+"</td>";
                        fila += "</tr>";

                        $('#tabla').append(fila);
                    });

                    $('#tabla').show();
                } else {
                    bootbox.confirm("El cliente aún no se encuentra en radius.¿ Desea Migrarlo ?", function(result){
                        if(result){
                            $.ajax({
                                url: '/api/fibra/agregar_manual',
                                type: "GET",
                                data:{codigo:codigo}
                            })
                            .done(function(resp) {
                                if(resp == 1){
                                    bootbox.alert('Cliente agregado a radius con éxito.');
                                    $('#buscar' ).click ();
                                } else{
                                    bootbox.alert('El cliente que intenta migrar no existe.');
                                }
                            })
                            .fail(function() {
                                console.log("error");
                            })
                        }
                    });

                    $('#tabla tbody').empty();
                    $('#tabla').hide();
                }
            })
            .fail(function() {
                console.log("error");
            })
        });
    </script>
@endsection