@extends('crudbooster::admin_template')
@section('content')
    <div class="box">
        <section class="content">
            <div class="container-fluid">
                <div class="row">
                    <div class="col-md-3">
                        <div class="card card-primary card-outline">
                            <div class="card-body box-profile">
                                <div class="text-center">
                                    <img class="profile-user-img img-fluid img-circle" src="http://localhost/adminlte/dist/img/user4-128x128.jpg" alt="User profile picture">
                                </div>
                                <h3 class="profile-username text-center">Nina Mcintire</h3>
                                <ul class="list-group list-group-unbordered mb-3">
                                    <li class="list-group-item">
                                        <b>Email</b> <a style="float:right;">1,322</a>
                                    </li>
                                    <li class="list-group-item">
                                        <b>Mobile No</b> <a style="float:right;">543</a>
                                    </li>
                                    <li class="list-group-item">
                                        <b>Status</b> <a style="float:right;">13,287</a>
                                    </li>
                                    <li class="list-group-item">
                                        <b>Total Earning</b> <a style="float:right;">13,287</a>
                                    </li>
                                    <li class="list-group-item">
                                        <b>Total Spending</b> <a style="float:right;">13,287</a>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-9">
                        <div class="card">
                            <div class="card-header p-2">
                                <ul class="nav nav-pills">
                                    <li class="nav-item active"><a class="nav-link" href="#activity" role="tab" data-toggle="tab">Shipments</a></li>
                                    <li class="nav-item"><a class="nav-link" href="#timeline" data-toggle="tab">Interstate Rides</a></li>
                                    <li class="nav-item"><a class="nav-link" href="#settings" data-toggle="tab">Trips</a></li>
                                </ul>
                            </div>
                            <div class="card-body">
                                <div class="tab-content">
                                    <div class="active tab-pane fade in" id="activity">
                                        <div class="card">
                                            <div class="card-header">
                                                <h3 class="card-title">Striped Full Width Table</h3>
                                            </div>
                                            <div class="card-body p-0">
                                                <table class="table table-striped">
                                                    <thead>
                                                    <tr>
                                                        <th style="width: 10px">#</th>
                                                        <th>Task</th>
                                                        <th>Progress</th>
                                                        <th style="width: 40px">Label</th>
                                                    </tr>
                                                    </thead>
                                                    <tbody>
                                                    <tr>
                                                        <td>1.</td>
                                                        <td>Update software</td>
                                                        <td>
                                                            <div class="progress progress-xs">
                                                                <div class="progress-bar progress-bar-danger" style="width: 55%"></div>
                                                            </div>
                                                        </td>
                                                        <td><span class="badge bg-danger">55%</span></td>
                                                    </tr>
                                                    <tr>
                                                        <td>2.</td>
                                                        <td>Clean database</td>
                                                        <td>
                                                            <div class="progress progress-xs">
                                                                <div class="progress-bar bg-warning" style="width: 70%"></div>
                                                            </div>
                                                        </td>
                                                        <td><span class="badge bg-warning">70%</span></td>
                                                    </tr>
                                                    <tr>
                                                        <td>3.</td>
                                                        <td>Cron job running</td>
                                                        <td>
                                                            <div class="progress progress-xs progress-striped active">
                                                                <div class="progress-bar bg-primary" style="width: 30%"></div>
                                                            </div>
                                                        </td>
                                                        <td><span class="badge bg-primary">30%</span></td>
                                                    </tr>
                                                    <tr>
                                                        <td>4.</td>
                                                        <td>Fix and squish bugs</td>
                                                        <td>
                                                            <div class="progress progress-xs progress-striped active">
                                                                <div class="progress-bar bg-success" style="width: 90%"></div>
                                                            </div>
                                                        </td>
                                                        <td><span class="badge bg-success">90%</span></td>
                                                    </tr>
                                                    </tbody>
                                                </table>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="tab-pane fade" id="timeline">
                                        <div class="card">
                                            <div class="card-header">
                                                <h3 class="card-title">Striped Full Width Table</h3>
                                            </div>
                                            <div class="card-body p-0">
                                                <table class="table table-striped">
                                                    <thead>
                                                    <tr>
                                                        <th style="width: 10px">#</th>
                                                        <th>Task</th>
                                                        <th>Progress</th>
                                                        <th style="width: 40px">Label</th>
                                                    </tr>
                                                    </thead>
                                                    <tbody>
                                                    <tr>
                                                        <td>1.</td>
                                                        <td>Update software</td>
                                                        <td>
                                                            <div class="progress progress-xs">
                                                                <div class="progress-bar progress-bar-danger" style="width: 55%"></div>
                                                            </div>
                                                        </td>
                                                        <td><span class="badge bg-danger">55%</span></td>
                                                    </tr>
                                                    <tr>
                                                        <td>2.</td>
                                                        <td>Clean database</td>
                                                        <td>
                                                            <div class="progress progress-xs">
                                                                <div class="progress-bar bg-warning" style="width: 70%"></div>
                                                            </div>
                                                        </td>
                                                        <td><span class="badge bg-warning">70%</span></td>
                                                    </tr>
                                                    <tr>
                                                        <td>3.</td>
                                                        <td>Cron job running</td>
                                                        <td>
                                                            <div class="progress progress-xs progress-striped active">
                                                                <div class="progress-bar bg-primary" style="width: 30%"></div>
                                                            </div>
                                                        </td>
                                                        <td><span class="badge bg-primary">30%</span></td>
                                                    </tr>
                                                    <tr>
                                                        <td>4.</td>
                                                        <td>Fix and squish bugs</td>
                                                        <td>
                                                            <div class="progress progress-xs progress-striped active">
                                                                <div class="progress-bar bg-success" style="width: 90%"></div>
                                                            </div>
                                                        </td>
                                                        <td><span class="badge bg-success">90%</span></td>
                                                    </tr>
                                                    </tbody>
                                                </table>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="tab-pane fade" id="settings">
                                        <div class="card">
                                            <div class="card-header">
                                                <h3 class="card-title">Striped Full Width Table</h3>
                                            </div>
                                            <div class="card-body p-0">
                                                <table class="table table-striped">
                                                    <thead>
                                                    <tr>
                                                        <th style="width: 10px">#</th>
                                                        <th>Task</th>
                                                        <th>Progress</th>
                                                        <th style="width: 40px">Label</th>
                                                    </tr>
                                                    </thead>
                                                    <tbody>
                                                    <tr>
                                                        <td>1.</td>
                                                        <td>Update software</td>
                                                        <td>
                                                            <div class="progress progress-xs">
                                                                <div class="progress-bar progress-bar-danger" style="width: 55%"></div>
                                                            </div>
                                                        </td>
                                                        <td><span class="badge bg-danger">55%</span></td>
                                                    </tr>
                                                    <tr>
                                                        <td>2.</td>
                                                        <td>Clean database</td>
                                                        <td>
                                                            <div class="progress progress-xs">
                                                                <div class="progress-bar bg-warning" style="width: 70%"></div>
                                                            </div>
                                                        </td>
                                                        <td><span class="badge bg-warning">70%</span></td>
                                                    </tr>
                                                    <tr>
                                                        <td>3.</td>
                                                        <td>Cron job running</td>
                                                        <td>
                                                            <div class="progress progress-xs progress-striped active">
                                                                <div class="progress-bar bg-primary" style="width: 30%"></div>
                                                            </div>
                                                        </td>
                                                        <td><span class="badge bg-primary">30%</span></td>
                                                    </tr>
                                                    <tr>
                                                        <td>4.</td>
                                                        <td>Fix and squish bugs</td>
                                                        <td>
                                                            <div class="progress progress-xs progress-striped active">
                                                                <div class="progress-bar bg-success" style="width: 90%"></div>
                                                            </div>
                                                        </td>
                                                        <td><span class="badge bg-success">90%</span></td>
                                                    </tr>
                                                    </tbody>
                                                </table>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </div>
@endsection