@extends('layouts.app', ['pageSlug' => 'trafficList'])

@section('content')
<div class="splynx_top_nav">
    <div style="float: left">
        <ul class="splynx_breadcrumbs">
            <li><span>Traffic</span></li>
        </ul>
    </div>
</div>
<div class="spl-page-panel">    
    <div class="row">
        <div class="col-lg-12">
            <div class="p-3">                
                <table id="traffics" class="table table-striped table-bordered dttable">
                    <thead>
                        <th>#</th>
                        <th>Name</th>
                        <th>Ip address</th>
                        <th>Interface</th>
                        <th>DNS</th>
                        <th>BandWidth</th>
                        <th>Status</th>
                        <th>Internet Status</th>
                        <th>Port</th>
                        <th>User</th>
                        <th>action</th>
                    </thead>
                    <tbody>
                    @foreach($traffics as $key=>$traf) 
                        <tr>
                            <td>{{$key + 1}}</td>
                            <td><a href="{{url('/')}}/traffic/traffic_logs_for_traffic/{{$traf->id}}">{{$traf->name}}</a></td>
                            <td>{{$traf->ip}}</td>
                            <td>{{$traf->interface}}</td>
                            <td>{{$traf->dns}}</td>
                            <td>{{$traf->bandwidth}}</td>
                            <td>
                                <label class="status-label label-{{$traf->status}}">{{$traf->status}}</label>
                            </td>
                            <td>
                                <label class="status-label label-{{$traf->internet_status}}">{{$traf->internet_status}}</label>
                            </td>
                            <td>{{$traf->port}}</td>
                            <td>{{$traf->user}}</td>
                            <td>
                                <a href="{{route('traffic.edit', $traf->id)}}"><i class="fa fa-edit"></i></a>
                                <a href="#" title="backup" class="backup-btn a-orange" onclick="backup('{{$traf->id}}')"><i class="fa fa-fw fa-hdd"></i></a>
                                <a href="#" onclick="confirmDelete('{{route('traffic.delete', $traf->id)}}')" class="a-red"><i class="fa fa-trash-alt"></i></a>
                            </td>
                        </tr>
                    @endforeach
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

@endsection

@push('js')
<script>
    function confirmDelete(route) {
        var result = confirm( "Do you want to delete this router?" );
        if (result) {
            location.href = route;
        }
    }
    $(document).ready(function(){
        $('.dttable').dataTable();
        
        $(".select2").select2();   
    })
    function backup(trafficId) {
        axios.post('{{route('traffic.backup')}}', {traffic_id: trafficId}).then((res) => {
            console.log(res);
        }) 
    }
    
</script>
    
@endpush