@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="row">
                                <div class="col-sm-6">
                                    <div class="form-group">
                                        <label for="nodo">IP Anterior:</label>
                                        <input type="text" id="ip_anterior" name="ip_anterior">
                                    </div>
                                </div>

                                <div class="col-sm-6">
                                    <div class="form-group">
                                        <label for="nodo">Nueva IP:</label>
                                        <input type="text" id="ip_nueva" name="ip_nueva">
                                    </div>
                                </div>
                            </div>

                            <div id="datos_cliente">
                                <label>Cliente: </label> <span id="nombre_cliente"></span>
                                <br>
                                <label>Código: </label> <span id="codigo_cliente"></span>
                            </div>
                            <br>
                            <input type="button" class="btn btn-primary" name="" value="Buscar" id="buscar">
                        </form>
                        <br>
                        <label id="cartel">Procesando Información...</label>
                        <br>
                        <div class="row">
                            <div class="col-sm-6">
                                <label id="anterior"> Datos Anteriores</label>
                                <table id="tabla_vieja" class="table table-striped table-bordered dt-responsive" style="width:100% !important" cellspacing="0">
                                    <thead>
                                        <tr class="warning">
                                            <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 class="col-sm-6">
                                <label id="nuevo"> Datos Nuevos</label>
                                <table id="tabla_nueva" class="table table-striped table-bordered dt-responsive" style="width:100% !important" cellspacing="0">
                                    <thead>
                                        <tr class="success">
                                            <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 class="form-group">
                                <div class="row">
                                    <div class="col-sm-1"></div>
                                    <input type="button" class="btn btn-success" name="" value="Actualizar" id="actualizar">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection


@section('scripts')
    <script>
        $.ajaxSetup({
            headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')}
        });

        $(document).bind("ajaxSend", function() {
            $.blockUI({ message: 'Un momento por favor...' });
        }).bind("ajaxComplete", function() {
            $.unblockUI();
        });
    </script>

    <script src="//cdnjs.cloudflare.com/ajax/libs/jquery-confirm/3.3.2/jquery-confirm.min.js"></script>

    <script>
        $('#ip_anterior').val("");
        $('#ip_nueva').val("");
        $('#tabla_vieja').hide();
        $('#tabla_nueva').hide();
        $('#anterior').hide();
        $('#nuevo').hide();
        $('#actualizar').hide();
        $('#datos_cliente').hide();
        $('#cartel').hide();

        $('#buscar').click(function(event) {
            $('#tabla_vieja').hide();
            $('#tabla_nueva').hide();
            $('#actualizar').hide();
            $('#tabla_vieja tbody').empty();
            $('#tabla_nueva tbody').empty();
            $('#anterior').hide();
            $('#nuevo').hide();
            $('#datos_cliente').hide();
            $('#nombre_cliente').val('');
            $('#codigo_cliente').val('');

            var ip_anterior = $('#ip_anterior').val();
            var ip_nueva = $('#ip_nueva').val();

            if(ip_nueva == "" || ip_anterior == "") {
                bootbox.alert("Ingrese valores válidos.");
                return;
            }

            $('#buscar').attr('disabled','disabled');
            $('#cartel').show();

            $.ajax({
                url: '/fibra/buscar_datos_plan',
                type: "GET",
                data: {
                    ip_anterior:ip_anterior,
                    ip_nueva:ip_nueva
                }
            }).done(function(resp) {
                var resp = jQuery.parseJSON(resp);
                console.log(resp);
                $('#cartel').hide();
                $('#buscar').removeAttr('disabled');

                var caso = resp.caso;

                if(caso == 1) {
                    bootbox.alert('No se encuentra cliente cargado en radius con esa IP Anterior.')
                } else if(caso == 2) {
                    bootbox.alert('No se encuentra cliente cargado en Gestion con esa IP Nueva.')
                } else {
                    var fila_vieja = '';
                    fila_vieja += "<tr>";
                    fila_vieja += "<td>"+resp.ip_anterior+"</td><td><b>"+resp.username_anterior+"</b></td><td><b>"+resp.password_anterior+"</b></td><td>"+resp.velocidad_anterior+"</td>";
                    fila_vieja += "</tr>";
                    $('#tabla_vieja').append(fila_vieja);
                    $('#tabla_vieja').show();
                    var fila_nueva = '';
                    fila_nueva += "<tr>";
                    fila_nueva += "<td>"+resp.ip+"</td><td><b>"+resp.username_nueva+"</b></td><td><b>"+resp.password_nueva+"</b></td><td>"+resp.velocidad_nueva+"</td>";
                    fila_nueva += "</tr>";

                    $('#tabla_nueva').append(fila_nueva);
                    $('#tabla_nueva').show();
                    $('#anterior').show();
                    $('#nuevo').show();
                    $('#datos_cliente').show();
                    $('#nombre_cliente').text(resp.nombre);
                    $('#codigo_cliente').text(resp.codigo);
                    $('#actualizar').show();
                }
            }).fail(function() {
                console.log("error");
            })
        });

        $('#actualizar').click(function(event) {
            var ip_anterior = $('#ip_anterior').val();
            var ip_nueva = $('#ip_nueva').val();

            bootbox.confirm("¿ Está seguro que desea actualizar el plan ?", function(result) {
                if(result) {
                    $.ajax({
                        url: '/fibra/actualizar_plan_radius',
                        type: "POST",
                        data: {
                            ip_anterior:ip_anterior,
                            ip_nueva:ip_nueva
                        }
                    }).done(function(resp) {
                        bootbox.alert('Cliente actualizado en Radius con éxito.');
                        $('#buscar').click ();
                    }).fail(function() {
                        console.log("error");
                    })
                }
            });
        });
    </script>
@endsection