@extends('layouts.app')
@section('content')
    <div class="content-heading">
        <div>
            Tables
            <small>A showcase of different components inside tables</small>
        </div>
    </div>
    <!-- START card-->
    <div class="card card-default">
        <div class="card-header">Demo Table #1</div>
        <!-- START table-responsive-->
        <div class="table-responsive">
            <table class="table table-bordered table-hover" id="table-ext-1">
                <thead>
                    <tr>
                        <th>UID</th>
                        <th>Picture</th>
                        <th>Username</th>
                        <th>First Name</th>
                        <th>Last Name</th>
                        <th>Email</th>
                        <th>Profile</th>
                        <th>Last Login</th>
                        <th data-check-all="data-check-all">
                            <div class="checkbox c-checkbox" data-toggle="tooltip" data-title="Check All">
                                <label>
                                    <input type="checkbox" />
                                    <span class="fa fa-check"></span>
                                </label>
                            </div>
                        </th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>1</td>
                        <td>
                            <div class="media"><img class="img-fluid circle" src="/img/user/01.jpg" alt="Image" /></div>
                        </td>
                        <td>@twitter</td>
                        <td>Larry</td>
                        <td>the Bird</td>
                        <td>mail@example.com</td>
                        <td class="text-center">
                            <div class="radial-bar radial-bar-25 radial-bar-xs" data-label="25%"></div>
                        </td>
                        <td>1 week</td>
                        <td>
                            <div class="checkbox c-checkbox">
                                <label>
                                    <input type="checkbox" />
                                    <span class="fa fa-check"></span>
                                </label>
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <td>2</td>
                        <td>
                            <div class="media"><img class="img-fluid circle" src="/img/user/02.jpg" alt="Image" /></div>
                        </td>
                        <td>@mdo</td>
                        <td>Mark</td>
                        <td>Otto</td>
                        <td>mail@example.com</td>
                        <td class="text-center">
                            <div class="radial-bar radial-bar-50 radial-bar-xs" data-label="50%"></div>
                        </td>
                        <td>25 minutes</td>
                        <td>
                            <div class="checkbox c-checkbox">
                                <label>
                                    <input type="checkbox" />
                                    <span class="fa fa-check"></span>
                                </label>
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <td>3</td>
                        <td>
                            <div class="media"><img class="img-fluid circle" src="/img/user/03.jpg" alt="Image" /></div>
                        </td>
                        <td>@fat</td>
                        <td>Jacob</td>
                        <td>Thornton</td>
                        <td>mail@example.com</td>
                        <td class="text-center">
                            <div class="radial-bar radial-bar-80 radial-bar-xs" data-label="80%"></div>
                        </td>
                        <td>10 hours</td>
                        <td>
                            <div class="checkbox c-checkbox">
                                <label>
                                    <input type="checkbox" />
                                    <span class="fa fa-check"></span>
                                </label>
                            </div>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
        <!-- END table-responsive-->
        <div class="card-footer">
            <div class="d-flex">
                <div>
                    <div class="input-group">
                        <input class="form-control" type="text" placeholder="Search" />
                        <div class="input-group-append"><button class="btn btn-secondary" type="button">Button</button></div>
                    </div>
                </div>
                <div class="ml-auto">
                    <div class="input-group float-right">
                        <select class="custom-select" id="inputGroupSelect01">
                            <option value="0">Bulk action</option>
                            <option value="1">Delete</option>
                            <option value="2">Clone</option>
                            <option value="3">Export</option>
                        </select>
                        <div class="input-group-append"><button class="btn btn-secondary" type="button">Apply</button></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- START card-->
    <div class="card card-default">
        <div class="card-header">Demo Table #2</div>
        <!-- START table-responsive-->
        <div class="table-responsive">
            <table class="table table-striped table-bordered table-hover" id="table-ext-2">
                <thead>
                    <tr>
                        <th data-check-all="data-check-all">
                            <div class="checkbox c-checkbox" data-toggle="tooltip" data-title="Check All">
                                <label>
                                    <input type="checkbox" />
                                    <span class="fa fa-check"></span>
                                </label>
                            </div>
                        </th>
                        <th>Description</th>
                        <th>Active</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>
                            <div class="checkbox c-checkbox">
                                <label>
                                    <input type="checkbox" />
                                    <span class="fa fa-check"></span>
                                </label>
                            </div>
                        </td>
                        <td>
                            <div class="media">
                                <a class="float-left" href="#"><img class="img-fluid circle" src="/img/user/01.jpg" alt="" /></a>
                                <div class="media-body">
                                    <div class="float-right badge badge-info">admin</div>
                                    <h4>Holly Wallace</h4>
                                    <p>Username: holly123</p>
                                    Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra
                                    turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
                                </div>
                            </div>
                        </td>
                        <td class="text-center">
                            <label class="switch">
                                <input type="checkbox" />
                                <span></span>
                            </label>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <div class="checkbox c-checkbox">
                                <label>
                                    <input type="checkbox" />
                                    <span class="fa fa-check"></span>
                                </label>
                            </div>
                        </td>
                        <td>
                            <div class="media">
                                <a class="float-left" href="#"><img class="img-fluid circle" src="/img/user/03.jpg" alt="" /></a>
                                <div class="media-body">
                                    <div class="float-right badge badge-info">writer</div>
                                    <h4>Alexis Foster</h4>
                                    <p>Username: ali89</p>
                                    Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra
                                    turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
                                </div>
                            </div>
                        </td>
                        <td class="text-center">
                            <label class="switch">
                                <input type="checkbox" checked="checked" />
                                <span></span>
                            </label>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <div class="checkbox c-checkbox">
                                <label>
                                    <input type="checkbox" />
                                    <span class="fa fa-check"></span>
                                </label>
                            </div>
                        </td>
                        <td>
                            <div class="media">
                                <a class="float-left" href="#"><img class="img-fluid circle" src="/img/user/05.jpg" alt="" /></a>
                                <div class="media-body">
                                    <div class="float-right badge badge-info">editor</div>
                                    <h4>Mario Miles</h4>
                                    <p>Username: mariomiles</p>
                                    Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra
                                    turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
                                </div>
                            </div>
                        </td>
                        <td class="text-center">
                            <label class="switch">
                                <input type="checkbox" checked="checked" />
                                <span></span>
                            </label>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
        <!-- END table-responsive-->
        <div class="card-footer">
            <div class="d-flex">
                <div>
                    <div class="input-group">
                        <select class="custom-select" id="inputGroupSelect02">
                            <option value="0">Bulk action</option>
                            <option value="1">Delete</option>
                            <option value="2">Clone</option>
                            <option value="3">Export</option>
                        </select>
                        <div class="input-group-append"><button class="btn btn-secondary" type="button">Apply</button></div>
                    </div>
                </div>
                <div class="ml-auto">
                    <ul class="pagination pagination-sm">
                        <li class="page-item active"><a class="page-link" href="#">1</a></li>
                        <li class="page-item"><a class="page-link" href="#">2</a></li>
                        <li class="page-item"><a class="page-link" href="#">3</a></li>
                        <li class="page-item"><a class="page-link" href="#">»</a></li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
    <!-- END card-->
    <!-- START row-->
    <div class="row">
        <div class="col-xl-6">
            <!-- START card-->
            <div class="card card-default">
                <div class="card-header">
                    Demo Table #3
                    <!-- START table-responsive-->
                    <div class="table-responsive">
                        <table class="table table-striped table-bordered table-hover" id="table-ext-3">
                            <thead>
                                <tr>
                                    <th>Task name</th>
                                    <th>Progress</th>
                                    <th>Deadline</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td>Nunc luctus, quam non condimentum ornare</td>
                                    <td>
                                        <div class="progress progress-xs">
                                            <div class="progress-bar progress-bar-striped bg-success" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%">
                                                <span class="sr-only">80% Complete</span>
                                            </div>
                                        </div>
                                    </td>
                                    <td>05/05/2014</td>
                                </tr>
                                <tr>
                                    <td>Integer in convallis felis.</td>
                                    <td>
                                        <div class="progress progress-xs">
                                            <div class="progress-bar progress-bar-striped bg-danger" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%">
                                                <span class="sr-only">20% Complete</span>
                                            </div>
                                        </div>
                                    </td>
                                    <td>15/05/2014</td>
                                </tr>
                                <tr>
                                    <td>Nullam sit amet magna vestibulum libero dapibus iaculis.</td>
                                    <td>
                                        <div class="progress progress-xs">
                                            <div class="progress-bar progress-bar-striped bg-info" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" style="width: 50%">
                                                <span class="sr-only">50% Complete</span>
                                            </div>
                                        </div>
                                    </td>
                                    <td>05/10/2014</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                    <!-- END table-responsive-->
                </div>
            </div>
            <!-- END card-->
        </div>
        <div class="col-xl-6">
            <!-- START card-->
            <div class="card card-default">
                <div class="card-header">Demo Table #4</div>
                <!-- START table-responsive-->
                <div class="table-responsive">
                    <table class="table table-striped table-bordered table-hover">
                        <thead>
                            <tr>
                                <th>Project</th>
                                <th>Activity</th>
                                <th>Completion</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td>Bootstrap 5.x</td>
                                <td>
                                    <div data-sparkline="" data-bar-color="#5d9cec" data-height="20" data-bar-width="5" data-bar-spacing="2" data-values="1,4,4,7,5,9,10" data-resize="true"></div>
                                </td>
                                <td>
                                    <div class="badge badge-danger">Canceled</div>
                                </td>
                            </tr>
                            <tr>
                                <td>Web Engine</td>
                                <td>
                                    <div data-sparkline="" data-bar-color="#7266ba" data-height="20" data-bar-width="5" data-bar-spacing="2" data-values="1,4,4,10,5,9,2" data-resize="true"></div>
                                </td>
                                <td>
                                    <div class="badge badge-success">Complete</div>
                                </td>
                            </tr>
                            <tr>
                                <td>Nullam sit amet</td>
                                <td>
                                    <div data-sparkline="" data-bar-color="#23b7e5" data-height="20" data-bar-width="5" data-bar-spacing="2" data-values="1,4,4,7,5,9,4" data-resize="true"></div>
                                </td>
                                <td>
                                    <div class="badge badge-warning">Delayed</div>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
                <!-- END table-responsive-->
            </div>
            <!-- END card-->
        </div>
    </div>
    <!-- END row-->
@endsection
@section('styles')@endsection
@section('scripts')
    <script src="{{ mix('/js/sparkline.js') }}"></script>
@endsection
