@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">Control de Velocidad de Clientes de Fibra Óptica (Comparativa Gestión/Radius)</div>
                    <div class="panel panel-default">
                        <div class="panel-body">
                            <div class="row">
                                <div class="col-md-4 text-center">
                                    <button class="btn btn-default" type="button" onclick="filtrar('')">CLIENTES TOTALES</button>
                                </div>
                                <div class="col-md-4 text-center">
                                    <button class="btn btn-success" type="button" onclick="filtrar('IGUALES')">IGUALES</button>
                                </div>
                                <div class="col-md-4 text-center">
                                    <button class="btn btn-danger" type="button" onclick="filtrar('DISTINTOS')">DISTINTOS</button>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="panel-body">
                        <table id="tabla" class="table table-striped table-bordered dt-responsive" style="width:100% !important" cellspacing="0">
                            <thead>
                                <tr>
                                    <th>Código</th>
                                    <th>Cliente</th>
                                    <th>Plan</th>
                                    <th>IP</th>
                                    <th>Velocidad Contratada</th>
                                    <th>Velocidad en Radius</th>
                                    <th>Estado</th>
                                    <th>Acciones</th>
                                </tr>
                            </thead>
                            <tbody id="tablaBody">
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('scripts')
    <style>
        .botonera {
            display: none;
        }
    </style>
    <script>
        $('#tabla').DataTable({
            "aLengthMenu": [[10, 25, 50, -1], [10, 25, 50, "Todos"]],
            "order": [[ 1, "asc" ]],
            stateSave: true,
            "ajax": {
                "url": "/fibra/comparar",
                "type": "GET"
            },
            "columns": [
                {"data":"codigo"},
                {"data":"cliente"},
                {"data":"plan"},
                {"data":"ip"},
                {
                    "orderable":true,
                    "render": function ( data, type, row ) {
                        return '<div align="center" id="velCon-'+row.codigo+'">'+row.velocidad_contratada+'</div>';
                    }
                },
                {
                    "orderable":true,
                    "render": function ( data, type, row ) {
                        return '<div align="center" id="velRad-'+row.codigo+'">'+row.velocidad_radius+'</div>';
                    }
                },
                {
                    "orderable":true,
                    "render": function ( data, type, row ) {
                        if (row.estado == 'DESACTUALIZADO')
                            return '<div align="center" id="stateOf-'+row.codigo+'"><span class="label label-danger distintos">DISTINTOS</span></div>';
                        else if (row.estado == 'ACTUALIZADO')
                            return '<div align="center" id="stateOf-'+row.codigo+'"><span class="label label-success iguales">IGUALES</span></div>';
                        else
                            return '<div align="center" id="stateOf-'+row.codigo+'"><span class="label label-info no-cargado">NO CARGADO EN RADIUS</span></div>';
                    }
                },
                {
                    "orderable":true,
                    "render": function ( data, type, row ) {
                        if (row.estado == 'DESACTUALIZADO') {
                            return '<div align="center" id='+row.codigo+'><input type="button" class="btn btn-success" value="Actualizar" onclick=actualizar("'+row.ip+'","'+row.codigo+'")></div>';
                        }
                        else return '';
                    }
                }
            ],
            "language": {
                "url":"/js/Spanish.json"
            }
        });

        var tabla = $('#tabla').DataTable();

        function filtrar(filtro) {
            $('.tabla_search input').val(filtro);
            tabla.search(filtro).draw();
        }

        function actualizar(ip, cod) {
            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,
                                ip_nueva:ip
                            }
                    })
                    .done(function(resp) {
                        $("#" + cod).html('<span class="label label-info">ACTUALIZADO</span>')
                        $("#stateOf-" + cod).html('<span class="label label-success ">IGUALES</span>');
                        $("#velRad-" + cod).text($("#velCon-" + cod).text());
                    })
                    .fail(function() {
                        console.log("error");
                    })
                }
            });
        }
    </script>
@endsection