@extends('layouts.dashboard')
@section('content')
    <section id="multiple-column-form">
        <div class="row match-height">
            <div class="col-12">
                <form action="{{ route('router.show', $data->id) }}" method="POST">
                    @csrf
                    @method('PUT')
                    <div class="row">

                        <div class="col-6 col-lg-3 col-md-6">
                            <div class="card">
                                <div class="card-body px-4 py-4-5">
                                    <div class="row">
                                        <div class="col-md-4 col-lg-12 col-xl-12 col-xxl-5 d-flex justify-content-start">
                                            <div class="stats-icon purple mb-2">
                                                <img src="{{ asset('assets/img/uptime.png') }}">
                                            </div>
                                        </div>
                                        <div class="col-md-8 col-lg-12 col-xl-12 col-xxl-7">
                                            <h6 class="text-muted font-semibold">
                                                Uptimes
                                            </h6>
                                            <h6 class="font-extrabold mb-0" id="uptime"></h6>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-6 col-lg-3 col-md-6">
                            <div class="card">
                                <div class="card-body px-4 py-4-5">
                                    <div class="row">
                                        <div class="col-md-4 col-lg-12 col-xl-12 col-xxl-5 d-flex justify-content-start">
                                            <div class="stats-icon blue mb-2">
                                                <img src="{{ asset('assets/img/wifi-router.png') }}">
                                            </div>
                                        </div>
                                        <div class="col-md-8 col-lg-12 col-xl-12 col-xxl-7">
                                            <h6 class="text-muted font-semibold">Tipe Router</h6>
                                            <h6 class="font-extrabold mb-0">{{ $info['0']['board-name'] }}</h6>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-6 col-lg-3 col-md-6">
                            <div class="card">
                                <div class="card-body px-4 py-4-5">
                                    <div class="row">
                                        <div class="col-md-4 col-lg-12 col-xl-12 col-xxl-5 d-flex justify-content-start">
                                            <div class="stats-icon green mb-2">
                                                <img src="{{ asset('assets/img/mikrotik.png') }}">
                                            </div>
                                        </div>
                                        <div class="col-md-8 col-lg-12 col-xl-12 col-xxl-7">
                                            <h6 class="text-muted font-semibold">Versi Router OS</h6>
                                            <h6 class="font-extrabold mb-0">{{ $info['0']['version'] }}</h6>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-6 col-lg-3 col-md-6">
                            <div class="card">
                                <div class="card-body px-4 py-4-5">
                                    <div class="row">
                                        <div class="col-md-4 col-lg-12 col-xl-12 col-xxl-5 d-flex justify-content-start">
                                            <div class="stats-icon red mb-2">
                                                <img src="{{ asset('assets/img/cpu.png') }}">
                                            </div>
                                        </div>
                                        <div class="col-md-8 col-lg-12 col-xl-12 col-xxl-7">
                                            <h6 class="text-muted font-semibold">CPU</h6>
                                            <h6 class="font-extrabold mb-0">{{ $info['0']['cpu'] }}</h6>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="card">

                        <ul class="nav nav-tabs" id="myTab" role="tablist">

                            <li class="nav-item" role="presentation">
                                <a class="nav-link active" id="home-tab" href="{{ route('router.show', $data->id) }}">Router</a>
                            </li>
                            <li class="nav-item" role="presentation">
                                <a class="nav-link" href="{{ route('router.secret',$data->id) }}">PPP Secrets</a>
                            </li>
                            <li class="nav-item" role="presentation">
                                <a class="nav-link" href="{{ route('router.active',$data->id) }}">PPP Active</a>
                            </li>

                        </ul>

                        <div class="card-header">

                            <h4 class="card-title">Lihat Data Router</h4>

                        </div>

                        <div class="card-content">

                            <div class="card-body">

                                <div class="form-body">
                                    <div class="row">

                                        <div class="col-md-4">
                                            <label>Nama Router</label>
                                        </div>
                                        <div class="col-md-8 form-group">
                                            <input type="text" id="cid" class="form-control" name="cid"
                                                value="{{ $data->nama }}" readonly>
                                        </div>
                                        <div class="col-md-4">
                                            <label>IP Address</label>
                                        </div>
                                        <div class="col-md-8 form-group">
                                            <input type="text" id="nama" class="form-control" name="nama"
                                                value="{{ $data->ip }}" readonly>
                                        </div>
                                        <div class="col-md-4">
                                            <label>Username</label>
                                        </div>
                                        <div class="col-md-8 form-group">
                                            <input type="text" id="nama" class="form-control" name="nama"
                                                value="{{ $data->user }}" readonly>
                                        </div>

                                        <div class="col-md-4">
                                            <label>Password</label>
                                        </div>
                                        <div class="col-md-8 form-group">
                                            <input type="text" id="nama" class="form-control" name="nama"
                                                value="{{ $data->password }}" readonly>
                                        </div>
                                        <div class="col-md-4">
                                            <label>Status</label>
                                        </div>
                                        <div class="col-md-8 form-group">
                                            <span class="badge bg-primary">Connect</span>
                                        </div>
                                    </div>
                                </div>
                </form>


            </div>

        </div>

    </section>

@endsection

@push('script')
    <script src="https://code.jquery.com/jquery-3.6.1.min.js"
        integrity="sha256-o88AwQnZB+VDvE9tvIXrMQaPlFFSUTR+nldQm1LuPXQ=" crossorigin="anonymous"></script>
    {{-- <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"></script> --}}

    <script>
        var id = @JSON($data->id);
        console.log('id :>> ', id);
        $(document).ready(function() {
            getTime();


            function getTime() {
                $.ajax({
                    type: "GET",
                    url: "{{ url('/times') }}" + '/' + id,
                    // data: "data",
                    dataType: "JSON",
                    success: function(response) {
                        setTimeout(getTime, 1000);
                        // console.log('response :>> ', response.info[0]['uptime'])
                        $('#uptime').html(response.info[0]['uptime']);
                    }
                });
            }
        });

        // $(document).ready(function() {

        //     var ctx = $('#myChart');
        //     var myChart = new Chart(ctx, {
        //         type: 'bar',
        //         data: {
        //             labels: [],
        //             datasets: [{
        //                 label: 'Traffic Ethernet',
        //                 data: [],
        //                 backgroundColor: 'rgba(75, 192, 192, 1)',

        //             }]
        //         }


        //     });

        //     function getTraffic() {

        //         $.ajax({
        //             type: "GET",
        //             url: "{{ url('/traffic') }}" + '/' + id,
        //             // data: "data",
        //             dataType: "JSON",
        //             success: function(response) {
        //                 // setTimeout(getTraffic, 1000);
        //                 console.log(response);
        //                 // console.log(response.info[0]['rx-packet']);
        //                 var labels = response.info.map(function(e) {
        //                     return e['name']

        //                 })
        //                 // console.log(labels);
        //                 var data = response.info.map(function(e) {
        //                     return e['rx-byte']
        //                 })
        //                 // var data = response.info[0]['rx-packet']

        //                 // console.log(data);

        //                 myChart.data.labels = labels;
        //                 myChart.data.datasets[0].data = data;
        //                 myChart.update();

        //             }

        //         });

        //     }
        //     getTraffic();

        //     setInterval(() => {
        //         getTraffic();
        //     }, 1000);
        // });
    </script>
@endpush