@extends('adminlte::page')

@section('title', 'Dashboard')

@section('content_header')
    <h1>Dashboard</h1>
@stop

@section('content')
    @if(session()->has('success'))
        <div class="alert alert-success">
            {{ session()->get('success') }}
        </div>
    @endif
    @if(session()->has('fail'))
        <div class="alert alert-danger">
            {{ session()->get('fail') }}
        </div>
    @endif
    <div class="card-body">
        <table id="example2" class="table table-bordered table-hover">
            <thead>
            <tr>
                <th>ID Sepeda</th>
                <th>Level Baterai</th>
                <th>Status Sepeda</th>
                <th>Detail</th>
            </tr>
            </thead>
            <tbody>
            @forelse($bikes as $index => $bike)
                <tr>
                    <td>{{$bike->bike_id}}</td>
                    <td>{{$bike->battery_level}}%</td>
                    <td>{{$bike->status}}</td>
                    <td>
                        <form role="form" action="/bikes/{{$bike->bike_id}}" method="GET">
                            {{ csrf_field() }}
                            <button type="submit" class="btn btn-primary">Show</button>
                        </form>
                    </td>
                </tr>
            @empty

            @endforelse
            </tbody>
        </table>
    </div>
@stop
@section('css')
    <link rel="stylesheet" href="/css/admin_custom.css">

    <link rel="stylesheet" href="/vendor/datatables/css/dataTables.bootstrap4.css">
@stop
@section('js')
    <script src="/vendor/datatables/js/jquery.dataTables.js"></script>
    <script src="/vendor/datatables/js/dataTables.bootstrap4.js"></script>
    <script>
        $(function () {
            $('#example2').DataTable();
        });
    </script>
@stop