@extends('layouts.app')

@section('content')
    <div class="container">
        <div class="row">
            <div>
                <div class="panel panel-primary">
                    <h2 class="panel-heading">Clientes Gestion vs Radius</h2>
                    <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>IP Radius</th>
                                    <th>Velocidad Radius</th>
                                    <th>Estado</th>
                                </tr>
                            </thead>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
@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" type="text/css" href="/css/buttons-dataTables.min.css"/>
    <script>
        $(document).ready(function() {
            $('#tabla').DataTable({
                "aLengthMenu": [[10, 25, 50, -1], [10, 25, 50, "Todos"]],
                "order": [[ 1, "asc" ]],
                stateSave: true,
                "ajax":{
                    "url": "/fibra/comparar",
                    "type": "GET"
                },
                "initComplete": function (settings, json) {
                    console.log(json);
                },
            "columns": [
                { data: 'codigo', name: 'codigo' },
                { data: 'cliente', name: 'cliente' },
                { data: 'plan', name: 'plan' },
                { data: 'ip', name: 'ip' },
                { data: 'velocidad_contratada', name: 'velocidad_contratada' },
                { data: 'ip_radius', name: 'ip_radius' },
                { data: 'velocidad_radius', name: 'velocidad_radius' },
                { data: 'estado', name: 'estado' }
            ],
            "responsive": true,
            "language": {
                "url":"/js/Spanish.json"
            },
            dom: "<'row'<'col-sm-4'l><'col-sm-4 text-center'B><'col-sm-4'f>>" +
                "<'row'<'col-sm-12'tr>>" +
                "<'row'<'col-sm-5'i><'col-sm-7'p>>",
            })
        })
    </script>
@endsection