@extends('layout')

@section('title', 'VPS Statistics')

@push('styles')
    {{ Html::style('js/libs/DataTables/jquery.dataTables.css') }}
    {{ Html::style('js/libs/DataTables/extensions/dataTables.colVis.css') }}
    {{ Html::style('js/libs/DataTables/extensions/dataTables.tableTools.css') }}
    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/highcharts/5.0.7/css/highcharts.css">
    <style>
        .hbox-xs {
            padding: 1em 0;
        }

        .dial {
            font-size: 24px !important;
        }
    </style>
@endpush

@section('content')
    <section class="no-banner">
        <div class="section-header">
            <div class="container">
                <h1 class="text-uppercase text-light">{{ $vps->name }} Control Panel</h1>
            </div>
        </div>
        <div class="section-body" id="stats-app">
            <div class="container">
                <!-- Overview -->
                <div class="row">
                    <div class="col-sm-6">
                        <div class="card">
                            <div class="card-head card-head-sm">
                                <header>
                                    Overview
                                </header>
                            </div>
                            <div class="card-body">
                                <div class="col-xs-12">
                                    <div class="row">
                                        <div class="col-sm-2">
                                            <img class="img-responsive pull-left" src="{{ thumbnail(200,$vps->detected_operating_system) }}" alt="os_image" :title="vps.operating_system" />
                                        </div>
                                        <div class="col-sm-10">
                                            <div class="clearfix opacity-75">
                                                <div class="col-sm-5">
                                                    <div class="row">
                                                        <div class="col-xs-12">
                                                            <span class="md md-memory"></span>&nbsp;CPU:<span id="total-download-usage">@{{ vps.cpu }}</span>
                                                        </div>
                                                        <div class="col-xs-12">
                                                            <span class="md md-local-movies"></span>&nbsp;RAM:<span id="total-download-usage">@{{ vps.ram }}</span>
                                                        </div>
                                                        <div class="col-xs-12">
                                                            <span class="md md-storage"></span>&nbsp;DISK:<span id="total-download-usage">@{{ vps.disk }}</span>
                                                        </div>
                                                        <div class="col-xs-12">
                                                            <span class="md md-traffic"></span>&nbsp;Traffic:<span id="total-download-usage">@{{ vps.traffic }}</span>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="col-sm-7">
                                                    <div class="row">
                                                        <div class="col-md-12">
                                                            <span class="md md-label text-accent"></span>&nbsp;ID:@{{ vps.server_id }}</span>
                                                        </div>
                                                        <div class="col-md-12">
                                                            <span class="md md-cloud-upload text-accent"></span>&nbsp;Total Upload:<span id="total-upload-usage">{{ $traffic->upload }} GB</span>
                                                        </div>
                                                        <div class="col-md-12">
                                                            <span class="md md-cloud-download text-primary"></span>&nbsp;Total Download:<span id="total-download-usage">{{ $traffic->download }} GB</span>
                                                        </div>
                                                        <div class="col-md-12">
                                                            <span class="md md-event"></span>&nbsp;Last Update:<span id="total-download-usage">{{ $traffic->date }}</span>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-sm-6">
                        <div class="card card-head-sm">
                            <div class="card-head">
                                <header>Actions</header>
                            </div>
                            <div class="card-body text-center" style="padding-top: 0;">
                                <a href="{{ route('customer.index') }}"
                                    class="btn-tile btn ink-reaction margin-1 btn-default-light btn-raised">
                                    <h4>Home</h4>
                                    <i class="fa fa-home fa-2x"></i>
                                </a>
                                <a href="#"
                                    class="btn-tile disabled btn ink-reaction margin-1 btn-default-light btn-raised btn-prompt-post"
                                    data-url=""
                                    data-action="rename the vm"
                                    data-name="@{{ vps.name }}">
                                    <h4>Rename</h4>
                                    <i class="fa fa-edit fa-2x"></i>
                                </a>
                                <a href="#"
                                    class="btn-tile disabled btn ink-reaction margin-1 btn-default-light btn-raised request-renew-service"
                                    data-url=""
                                    data-type="VPS">
                                    <h4>Renew</h4>
                                    <i class="fa fa-refresh fa-2x"></i>
                                </a>
                                <a href="#"
                                    class="btn-tile disabled btn ink-reaction margin-1 btn-default-light btn-raised request-delete-service"
                                    data-type="vps"
                                    data-url="">
                                    <h4>Delete</h4>
                                    <i class="fa fa-trash fa-2x"></i>
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-sm-6">
                        <div class="card">
                            <div class="card-body">
                                <div class="row">
                                    <div class="row" style="margin-top:12px;">
                                        <div class="col-sm-12 text-center">
                                            <div id="realtime-cpu-chart" class="flot height-6" data-title="CPU Stat"></div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-sm-6">
                        <div class="card">
                            <div class="card-body">
                                <div class="row">
                                    <div class="row" style="margin-top:12px;">
                                        <div class="col-sm-12 text-center">
                                            <div id="realtime-ram-chart" class="flot height-6" data-title="RAM Stat"></div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                {{--
                <!-- Graph -->
                <div class="row" id="monthly-card">
                    <div class="col-sm-6">
                        <div class="card">
                            <div class="card-head">
                                <header>
                                    Monthly Usage Graph <span class="display-usage-date"></span>
                                </header>
                            </div>
                            <div class="card-body height-11">
                                <div id="monthly-graph" class="height-8 flot" data-title="Monthly Usage" data-color="#2196F3,#e91e63,#313335"></div>
                            </div>
                        </div>
                    </div>
                    <div class="col-sm-6">
                        <div class="card">
                            <div class="card-head">
                                <header>
                                    Monthly Usage <span class="display-usage-date"></span>
                                </header>
                                <div class="tools">
                                    <select class="form-control" v-model="monthly.year">
                                        <option value="2014">2014</option>
                                        <option value="2015">2015</option>
                                        <option value="2016">2016</option>
                                        <option value="2017">2017</option>
                                    </select>
                                </div>
                            </div>
                            <div class="card-body height-11 scroll">
                                <div class="table-responsive">
                                    <table id="vps-monthly-datatable" class="table table-hover table-striped table-condensed" data-source="{{route('customer.api.vps.monthly', $vps->id)}}"
                                           data-swftools="/vendor/DataTables/extensions/TableTools/swf/copy_csv_xls_pdf.swf">
                                        <thead>
                                            <tr>
                                                <td>Month</td>
                                                <td>Download (GB)</td>
                                                <td>Upload (GB)</td>
                                                <td>Total</td>
                                            </tr>
                                        </thead>
                                        <tbody v-if="monthly.data.length == 0">
                                            <tr>
                                                <td colspan="4">No Data</td>
                                            </tr>
                                        </tbody>
                                        <tbody v-if="monthly.data.length != 0">
                                            <tr v-for="row in monthly.data">
                                                <td>@{{ row.month }}</td>
                                                <td>@{{ row.download }}</td>
                                                <td>@{{ row.upload }}</td>
                                                <td>@{{ row.total }}</td>
                                            </tr>
                                        </tbody>
                                        <tfoot v-if="monthly.data.length != 0">
                                            <tr>
                                                <th>Total</th>
                                                <th>@{{ sum(monthly.data, 'download') }}</th>
                                                <th>@{{ sum(monthly.data, 'upload') }}</th>
                                                <th>@{{ sum(monthly.data, 'total') }}</th>
                                            </tr>
                                        </tfoot>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- DataTable -->
                <div class="row" id="daily-card">
                    <div class="col-sm-6">
                        <div class="card">
                            <div class="card-head">
                                <header>Daily Usage Graph <span class="display-usage-date"></span>
                                </header>
                            </div>
                            <div class="card-body height-12">
                                <div id="daily-graph" class="flot height-9" data-title="Daily Usage" data-color="#2196F3,#e91e63,#313335"></div>
                            </div>
                        </div>
                    </div>
                    <div class="col-sm-6">
                        <div class="card">
                            <div class="card-head">
                                <header>Daily Usage <span class="display-usage-date"></span></header>
                                <div class="tools">
                                    <div class="form-group">
                                        <select class="form-control" v-model="daily.year">
                                            <option value="2014">2014</option>
                                            <option value="2015">2015</option>
                                            <option value="2016">2016</option>
                                            <option value="2017">2017</option>
                                        </select>
                                        <select class="form-control" v-model="daily.month">
                                            <option value="01">January</option>
                                            <option value="02">February</option>
                                            <option value="03">March</option>
                                            <option value="04">April</option>
                                            <option value="05">May</option>
                                            <option value="06">June</option>
                                            <option value="07">July</option>
                                            <option value="08">August</option>
                                            <option value="09">September</option>
                                            <option value="10">October</option>
                                            <option value="11">November</option>
                                            <option value="12">December</option>
                                        </select>
                                    </div>
                                </div>
                            </div>
                            <div class="card-body height-12 scroll">
                                <div class="table-responsive">
                                    <table id="vps-daily-datatable" class="table table-hover table-striped table-condensed" data-source="{{route('customer.api.vps.daily', $vps->id)}}"
                                           data-swftools="/vendor/DataTables/extensions/TableTools/swf/copy_csv_xls_pdf.swf">
                                        <thead>
                                        <th>Day</th>
                                        <th>Download (GB)</th>
                                        <th>Upload (GB)</th>
                                        <th>Total</th>
                                        </thead>
                                        <tbody v-if="daily.data.length == 0">
                                            <tr>
                                                <td colspan="4">No Data</td>
                                            </tr>
                                        </tbody>
                                        <tbody v-if="daily.data.length != 0">
                                            <tr v-for="row in daily.data">
                                                <td>@{{ row.day }}</td>
                                                <td>@{{ row.download }}</td>
                                                <td>@{{ row.upload }}</td>
                                                <td>@{{ row.total }}</td>
                                            </tr>
                                        </tbody>
                                        <tfoot v-if="daily.data.length != 0">
                                            <tr>
                                                <th>Total</th>
                                                <th>@{{ sum(daily.data, 'download') }}</th>
                                                <th>@{{ sum(daily.data, 'upload') }}</th>
                                                <th>@{{ sum(daily.data, 'total') }}</th>
                                            </tr>
                                        </tfoot>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                --}}
            </div>
        </div>
    </section>
@stop

@push('scripts')
    {{ Html::script('js/libs/DataTables/jquery.dataTables.min.js') }}
    {{ Html::script('js/libs/DataTables/extensions/ColVis/js/dataTables.colVis.min.js') }}
    {{ Html::script('js/libs/DataTables/extensions/TableTools/js/dataTables.tableTools.min.js') }}
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/highcharts/5.0.7/highcharts.js"></script>
    <script>
        var monthlyURL = "{{ route('customer.api.vps.monthly', $vps->id) }}";
        var dailyURL = "{{ route('customer.api.vps.daily', $vps->id) }}";
        var statURL = "{{ route('customer.api.vps.stat', $vps->id) }}";
        var vps = JSON.parse('{!! $vps !!}');
    </script>
    <script src="{{ asset('js/pages/stats.min.js?1224') }}"></script>
@endpush