@extends('adminlte::page')

@section('title', 'Dashboard')

@section('content')
    @foreach($bikes as $bike)
        <div class="row">
            <div class="col"><div class="card">
                    <div class="card-header">
                        <h3 class="card-title">ID SEPEDA : {{$bike->bike_id}}</h3>
                    </div>
                    <!-- /.card-header -->
                    <div class="card-body p-0">
                        <table class="table table-striped">
                            <tbody>
                            <tr>
                                <td>Lokasi</td>
                                <td>: {{$bike->terminals->name}}, {{$bike->terminals->city}}
                                </td>
                            </tr>
                            <tr>
                                <td>Status</td>
                                <td>: @if($bike->status == 'active')
                                        <span class="badge bg-success">Aktif</span>
                                    @else
                                        <span class="badge bg-danger">Diperbaiki</span>
                                    @endif
                                </td>
                            </tr>
                            <tr>
                                <td>Level Baterai </td>
                                <td>:   @if($bike->battery_level >=70)
                                        <span class="badge bg-success">{{$bike->battery_level}}%</span>
                                    @elseif($bike->battery_level >=40)
                                        <span class="badge bg-success">{{$bike->battery_level}}%</span>
                                    @else
                                        <span class="badge bg-success">{{$bike->battery_level}}%</span>
                                    @endif
                                </td>
                            </tr>
                            </tbody>
                        </table>
                    </div>
                    <!-- /.card-body -->
                </div>
                <!-- /.card --></div>
            <div class="col-7"><div class="card">
                    <div class="card-header">
                        <h3 class="card-title">HISTORI BATERAI</h3>
                    </div>
                    <!-- /.card-header -->
                    <div class="card-body p-0">
                        <div class="container">
                            <div class="col">
                                <div id="chartdiv"></div>
                            </div>
                        </div>
                    </div>
                    <!-- /.card-body -->
                </div>
                <!-- /.card --></div>
        </div>



    @endforeach
@stop
@section('css')
    <link rel="stylesheet" href="/css/admin_custom.css">
    <style>
        #chartdiv {
            width	: 100%;
            height	: 300px;
        }
    </style>
    <!-- Resources -->
    <script src="https://www.amcharts.com/lib/3/amcharts.js"></script>
    <script src="https://www.amcharts.com/lib/3/serial.js"></script>
    <script src="https://www.amcharts.com/lib/3/plugins/export/export.min.js"></script>
    <script src="https://www.amcharts.com/lib/3/pie.js"></script>
    <link rel="stylesheet" href="https://www.amcharts.com/lib/3/plugins/export/export.css" type="text/css" media="all" />
@stop
@section('js')
    @include('transaction.script.chart')
@stop