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

@section('content')
<div class="splynx_top_nav">
    <div style="float: left">
        <ul class="splynx_breadcrumbs">
            <li><span>Networking / Monitoring / Lists</span></li>
        </ul>
    </div>
    <div class="clearfix"></div>
</div>
<div class="spl-page-panel">
    <div class="row">
        <div class="col-lg-12">
            Monitoring devices
        </div>
    </div>
    <br>
    <div class="row">
        <div class="col-lg-12">
            <div class="p-3">                
                <table id="custom_table" class="table table-striped table-bordered">
                    <thead>
                        <th>#</th>
                        <th>Name</th>
                        <th>Parent</th>
                        <th>Group</th>
                        <th>Make</th>
                        <th>Model</th>
                        <th>IP</th>
                        <th>Ping</th>
                        <th>CPU</th>
                        <th>Latency</th>
                        <th>Off Log</th>
                        <th>Status</th>
                        <th>Action</th>
                    </thead>
                    <tbody>
                        
                        @php
                            $num = 1;
                        @endphp
                        @foreach ($devices as $key => $dev)
                        <tr>
                            <td>
                                @php
                                echo $num; $num++;
                                @endphp
                            </td>
                            <td>{!!$dev->name!!}</td>
                            <td>{{$dev->parent}}</td>
                            <td>{{$dev->group}}</td>
                            <td>{{$dev->make}}</td>
                            <td>{{$dev->model}}</td>
                            <td>{{$dev->ip}}</td>
                            <td>{{$dev->ping}}</td>
                            <td>{{$dev->cpu}}</td>
                            <td>{{$dev->latency}}</td>
                            <td><a href="{{url('/admin/networking/device-log?device='.$dev->device_id)}}">{{$dev->off_log}}</a></td>
                            <td>
                                {{$dev->status}}
                                <br><time class="text-muted timeago">{{$dev->down_duration}}</time>
                              
                            </td>
                            <td>
                                <a href="{{route('network.monitor.edit', $dev->device_id)}}"><i class="fa fa-edit"></i></a>
                                <a href="#" title="refresh" class="refresh-btn a-orange" onclick="updateDevice(this)" data-id = "{{$dev->device_id}}"><i class="fa fa-fw fa-redo"></i></a>
                                <a href="#" title="backup" class="refresh-btn a-orange"><i class="fa fa-fw fa-hdd"></i></a>
                                <a href="{{route('network.monitor.reboot', $dev->device_id)}}" title="reboot" onclick="return confirm('Are you sure?')" class="refresh-btn a-blue"><i class="fa fa-fw fa-recycle"></i></a>
                                <a href="#" onclick="confirmDelete('{{route('network.monitor.delete', $dev->device_id)}}')" style="color:red !important;"><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?" );
        if (result) {
            location.href = route;
        }
    }
    $(document).ready(function(){
        $('#custom_table').dataTable({
            stateSave: true
        });
    })

    function updateDevice(ele){
        id = $(ele).data('id');
        axios.post('{{route('network.monitor.update.device.detail')}}', {dev_id: id}).then((res) => {
            console.log(res);
            if (res.data == 'success') {
                toastr.success('Success');
            } else {
                toastr.error('Fail');
            }
        })
    }
</script>
    
@endpush