@extends('layouts.auth')

@push('js')
<script>
$(document).ready(function() {
    var table = $('#dt').DataTable({
        dom: 'rtip',
        responsive: true,
        pageLength: 50,
        ajax: {
            url: "{{ route('tunnel_data') }}",
            data: function ( d ) {
                $('#updated').text('Last fetched at ' + new Date());
                return $.extend( {}, d, { /* Search Extensions Here */});
            }
        },
        language: {
            paginate: {
                next: '>',
                previous: '<'
            },
            processing: 'Loading Tunnels'
        },
        serverSide: true,
        processing: true,
        paging: true,
        bAutoWidth: false,
        select: {
            style: 'single'
        },
        "ordering": false,
        "columnDefs": [
            { "orderable": false, "targets": [0, 1, 2, 3, 4, 5, 6, 7, 8, 9] },
        ],
        columns: [
            {
                'data': 'name'
            },
            {
                'data': 'type'
            },
            {
                'data': 'remote-ip',
                'render': function(data, type, row) {
                    return data + (row['remote-port'] != '' ? ':' + row['remote-port'] : '');
                }
            },
            {
                'data': 'speed',
                'render': function(data, type, row) {
                    return data + 'mbps'
                }
            },
            {
                'data': 'asn'
            },
            {
                'data': 'region'
            },
            {
                'data': 'state',
                'render': function(data, type, row) {
                    switch(data) {
                        case 'NEW':
                            return 'Entered Queue';
                        case 'CREATING_TUNNEL':
                        case 'CREATING_BGP':
                        case 'CREATE_BGP':
                            return 'Creating';
                        case 'VERIFIED':
                            return 'Verified';
                        case 'FAILED_BGP':
                        case 'FAILED_SPEED':
                        case 'FAILED_TUNNEL':
                        case 'FAILED_VERIFICATION':
                            return 'Failed'; 
                        case 'UP':
                            return 'Up';
                        default:
                            return 'Unknown';
                    }
                }
            },
            {
                'data': 'ping-health',
                'render': function(data, type, row) {
                    var ping = data;
                    var arp = row['arp-health'];
                    var bgp = row['bgp-health'];

                    if(bgp == 'UP') {
                        if(arp > 80) {
                            if(ping > 80) {                        
                                return 'Reachable';
                            }
                            else if(ping > 50) {
                                return 'Degraded';
                            }
                            else if(ping > 0) {
                                return 'Severely Degraded';
                            }
                            else {
                                return 'Unreachable';
                            }
                        }
                        else if(arp > 50) {
                            return 'Degraded';
                        }
                        else if(arp > 0) {
                            return 'Severely Degraded';
                        }
                        else {
                            return 'Unreachable';
                        }
                    }
                    else {
                        return 'Unreachable';
                    }
                    
                }
            },
            {
                'data': 'gsl-device',
                'render': function(data) {
                    return data + '/30';
                }
            },
            {
                'data': 'client-device',
                'render': function(data) {
                    return data + '/30';
                }
            },
            {
                'data': 'id',
                'render': function(data, type, row) {
                    var buttons_to_return = '';

                    {{-- /*Only enable an edit button IF the tunnel is provisioned fully. This is safe client side since there's serverside validation anyhow.*/ --}}
                    
                    if(row['state'] == 'VERIFIED') {
                        buttons_to_return += '<a href="{{route('tunnel_edit')}}?id='+data+'" class="btn btn-primary" role="button" aria-pressed="true">Edit</a>';
                    }
                    else {
                        buttons_to_return += '<span class="btn btn-secondary" style="cursor:not-allowed" "title="Editing is disabled for tunnels that need to finish the provisioning process.">Edit</span>';
                    }
                    
                    buttons_to_return += '<a href="{{route('tunnel_delete')}}?id='+data+'" class="btn btn-danger" role="button" aria-pressed="true">Delete</a>';

                    buttons_to_return += '<a href="{{route('tunnel_chart')}}?id='+data+'" class="btn btn-success" role="button" aria-pressed="true">Charts</a>';

                    return buttons_to_return;
                }
            }
        ]
    });

    setInterval( function () {
        $('#dt_processing').remove();
        table.ajax.reload(null, false);
    }, 40000 );
});
</script>
@endpush

@section('content')
            <div class="card">
                <div class="card-header">Tunnel Dashboard</div>

                <div class="card-body">
                    @error('message')
                        <div class="alert alert-danger" role="alert">
                            {{ $message }}
                        </div>
                    @enderror
                    @if (session('status'))
                        <div class="alert alert-success" role="alert">
                            {{ session('status') }}
                        </div>
                    @endif
                    @see('tunnel-write')
                    <div class="row">
                        <div class="col text-end">
                            <a href="{{ route('tunnel_create') }}" class="btn btn-primary" role="button" aria-pressed="true">Add Tunnel</a>
                        </div>
                    </div>
                    @endsee
                    <div class="row">
                        <div class="col">
                            <h3>Tunnel List</h3>
                            <table id="dt" class="display" style="width:100%">
                                <thead>
                                    <tr>
                                        <th>Name</th>
                                        <th>Type</th>
                                        <th>Endpoint</th>
                                        <th>Speed</th>
                                        <th>ASN</th>
                                        <th>Region</th>
                                        <th>Provisioning</th>
                                        <th>Status</th>
                                        <th>GSL Interface</th>
                                        <th>Client Interface</th>
                                        <th>Options</th>
                                    </tr>
                                </thead>
                                <tbody>
                                </tbody>
                            </table>
                            <small id="updated"></small>
                        </div>
                    </div>                    
                </div>
            </div>
@endsection