@extends('layouts.app')
@section('content')
    <div class="content-heading">Widgets</div>
    <!-- START row-->
    <div class="row">
        <div class="col-xl-4">
            <!-- START card-->
            <div class="card">
                <div class="card-body">
                    <div class="text-right text-muted"><em class="fa fa-gamepad fa-2x"></em></div>
                    <h3 class="mt-0">99.999</h3>
                    <p class="text-muted">Games played last month</p>
                    <div class="progress progress-xs mb-3">
                        <div class="progress-bar progress-bar-striped bg-warning" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="70" style="width: 60%">
                            <span class="sr-only">60% Complete</span>
                        </div>
                    </div>
                </div>
            </div>
            <!-- END card-->
        </div>
        <div class="col-xl-4">
            <!-- START card-->
            <div class="card">
                <div class="card-body">
                    <div class="text-right text-muted"><em class="fa fa-coffee fa-2x"></em></div>
                    <h3 class="mt-0">300</h3>
                    <p class="text-muted">Coffee cups per day</p>
                    <div class="progress progress-xs mb-3">
                        <div class="progress-bar progress-bar-striped bg-green" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%">
                            <span class="sr-only">80% Complete</span>
                        </div>
                    </div>
                </div>
            </div>
            <!-- END card-->
        </div>
        <div class="col-xl-4">
            <!-- START card-->
            <div class="card">
                <div class="card-body">
                    <div class="text-right text-muted"><em class="fa fa-upload fa-2x"></em></div>
                    <h3 class="mt-0">1000 Gb</h3>
                    <p class="text-muted">Average Monthly Uploads</p>
                    <div class="progress progress-xs mb-3">
                        <div class="progress-bar progress-bar-striped bg-info" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%">
                            <span class="sr-only">40% Complete</span>
                        </div>
                    </div>
                </div>
            </div>
            <!-- END card-->
        </div>
    </div>
    <!-- END row-->
    <!-- START row-->
    <div class="row">
        <div class="col-xl-4">
            <!-- START card-->
            <div class="card">
                <div class="d-flex">
                    <div class="w-50 bb br px-3">
                        <div class="d-flex align-items-center">
                            <em class="fa fa-users fa-2x text-info"></em>
                            <div class="ml-auto">
                                <div class="card-body text-right">
                                    <h4 class="mt-0">10k</h4>
                                    <p class="mb-0 text-muted">VISITORS</p>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="w-50 bb px-3">
                        <div class="d-flex align-items-center">
                            <em class="fa fa-music fa-2x text-danger"></em>
                            <div class="ml-auto">
                                <div class="card-body text-right">
                                    <h4 class="mt-0">100%</h4>
                                    <p class="mb-0 text-muted">VOLUME</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="d-flex">
                    <div class="w-50 br px-3">
                        <div class="d-flex align-items-center">
                            <em class="fas fa-code-branch fa-2x text-inverse"></em>
                            <div class="ml-auto">
                                <div class="card-body text-right">
                                    <h4 class="mt-0">150</h4>
                                    <p class="mb-0 text-muted">FORKS</p>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="w-50 px-3">
                        <div class="d-flex align-items-center">
                            <em class="fa fa-inbox fa-2x text-success"></em>
                            <div class="ml-auto">
                                <div class="card-body text-right">
                                    <h4 class="mt-0">10</h4>
                                    <p class="mb-0 text-muted">MESSAGES</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- END card-->
            <!-- START card-->
            <div class="card">
                <div class="d-flex">
                    <div class="w-50 bb br px-3">
                        <div class="d-flex align-items-center">
                            <!-- Bar chart-->
                            <div data-sparkline="" data-bar-color="#5d9cec" data-height="20" data-bar-width="3" data-bar-spacing="2" data-values="5,9,4,1,3,4,7,5"></div>
                            <div class="ml-auto">
                                <div class="card-body text-right">
                                    <h4 class="mt-0">10k</h4>
                                    <p class="mb-0 text-muted">VISITORS</p>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="w-50 bb px-3">
                        <div class="d-flex align-items-center">
                            <!-- Bar chart-->
                            <div data-sparkline="" data-bar-color="#5d9cec" data-height="20" data-bar-width="3" data-bar-spacing="2" data-values="1,2,3,4,5,6,7,8,9"></div>
                            <div class="ml-auto">
                                <div class="card-body text-right">
                                    <h4 class="mt-0">100%</h4>
                                    <p class="mb-0 text-muted">CONVERSIONS</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="d-flex">
                    <div class="w-50 br px-3">
                        <div class="d-flex align-items-center">
                            <!-- Bar chart-->
                            <div data-sparkline="" data-bar-color="#5d9cec" data-height="20" data-bar-width="3" data-bar-spacing="2" data-values="1,0,4,9,5,7,8,4,7"></div>
                            <div class="ml-auto">
                                <div class="card-body text-right">
                                    <h4 class="mt-0">150</h4>
                                    <p class="mb-0 text-muted">RETURNS</p>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="w-50 px-3">
                        <div class="d-flex align-items-center">
                            <!-- Bar chart-->
                            <div data-sparkline="" data-bar-color="#5d9cec" data-height="20" data-bar-width="3" data-bar-spacing="2" data-values="1,5,2,2,8,4,4,8"></div>
                            <div class="ml-auto">
                                <div class="card-body text-right">
                                    <h4 class="mt-0">10</h4>
                                    <p class="mb-0 text-muted">UNIQUES</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-xl-4">
            <!-- START card-->
            <div class="card">
                <div class="half-float ie-fix-flex">
                    <img class="img-fluid" src="img/bg3.jpg" alt="" />
                    <div class="half-float-bottom"><img class="img-thumbnail circle thumb128" src="img/user/09.jpg" alt="Image" /></div>
                </div>
                <div class="card-body text-center">
                    <h3 class="m-0">Ted Berry</h3>
                    <p class="text-muted">Lead director</p>
                    <p>Proin metus justo, commodo in ultrices at, lobortis sit amet dui. Fusce dolor purus, adipiscing a tempus at, gravida vel purus.</p>
                </div>
                <div class="card-body text-center bg-gray-dark">
                    <div class="row">
                        <div class="col-4">
                            <h3 class="m-0">400</h3>
                            <p class="m-0">Photos</p>
                        </div>
                        <div class="col-4">
                            <h3 class="m-0">2000</h3>
                            <p class="m-0">Likes</p>
                        </div>
                        <div class="col-4">
                            <h3 class="m-0">500</h3>
                            <p class="m-0">Following</p>
                        </div>
                    </div>
                </div>
            </div>
            <!-- END card-->
        </div>
        <div class="col-xl-4">
            <!-- START card-->
            <div class="card">
                <div class="card-body text-center bg-center" style="background-image: url('img/bg4.jpg')">
                    <div class="row">
                        <div class="col-12 text-white">
                            <img class="img-thumbnail circle thumb128" src="img/user/06.jpg" alt="Image" />
                            <h3 class="m-0">Chris</h3>
                            <p class="m-0">
                                <em class="fab fa-twitter fa-fw"></em>
                                @chris
                            </p>
                        </div>
                    </div>
                </div>
                <div class="card-body text-center bg-gray-darker">
                    <div class="row">
                        <div class="col-4">
                            <a class="text-white" href="#"><em class="fab fa-twitter fa-2x"></em></a>
                        </div>
                        <div class="col-4">
                            <a class="text-white" href="#"><em class="fab fa-facebook-f fa-2x"></em></a>
                        </div>
                        <div class="col-4">
                            <a class="text-white" href="#"><em class="fa fa-comments fa-2x"></em></a>
                        </div>
                    </div>
                </div>
                <div class="list-group">
                    <a class="list-group-item" href="#">
                        <span class="badge badge-primary float-right">15</span>
                        <em class="fa-fw far fa-clock text-muted"></em>
                        Recent Activity
                    </a>
                    <a class="list-group-item" href="#">
                        <span class="badge badge-primary float-right">100</span>
                        <em class="fa-fw fa fa-user text-muted"></em>
                        Following
                    </a>
                    <a class="list-group-item" href="#">
                        <span class="badge badge-primary float-right">300</span>
                        <em class="fa-fw far fa-folder-open text-muted"></em>
                        Photos
                    </a>
                </div>
            </div>
            <!-- END card-->
        </div>
    </div>
    <!-- END row-->
    <!-- START row-->
    <div class="row">
        <div class="col-xl-4 col-lg-6">
            <!-- START card-->
            <div class="card bg-success-dark border-0">
                <div class="row align-items-center mx-0">
                    <div class="col-4 text-center"><em class="icon-share fa-3x"></em></div>
                    <div class="col-8 py-4 bg-success rounded-right">
                        <div class="h1 m-0 text-bold">150</div>
                        <div class="text-uppercase">New connections</div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-xl-4 col-lg-6">
            <!-- START card-->
            <div class="card bg-danger-dark border-0">
                <div class="row align-items-center mx-0">
                    <div class="col-4 text-center"><em class="icon-star fa-3x"></em></div>
                    <div class="col-8 py-4 bg-danger rounded-right">
                        <div class="h1 m-0 text-bold">7000</div>
                        <div class="text-uppercase">Ratings received</div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-xl-4 col-lg-12">
            <!-- START card-->
            <div class="card bg-warning-dark border-0">
                <div class="row align-items-center mx-0">
                    <div class="col-4 text-center"><em class="icon-trophy fa-3x"></em></div>
                    <div class="col-8 py-4 bg-warning rounded-right">
                        <div class="h1 m-0 text-bold">10</div>
                        <div class="text-uppercase">Achievements</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- END row-->
    <!-- START row-->
    <div class="row">
        <div class="col-xl-4">
            <!-- START card-->
            <div class="card border-0">
                <div class="card-body bg-success">
                    <div class="h5 mt-0">Received all time</div>
                    <!-- Line chart-->
                    <div
                        data-sparkline=""
                        data-values="1,3,4,7,5,9,4,4,7,5,9,6,4"
                        data-type="line"
                        data-height="80"
                        data-width="100%"
                        data-line-width="2"
                        data-line-color="#dddddd"
                        data-spot-color="#bbbbbb"
                        data-fill-color=""
                        data-highlight-line-color="#fff"
                        data-spot-radius="3"
                        data-resize="true"
                    ></div>
                    <!-- Bar chart-->
                    <div class="text-center">
                        <div data-sparkline="" data-bar-color="#fff" data-height="50" data-bar-width="6" data-bar-spacing="6" data-values="1,3,4,7,5,9,4,4,7,5,9,6,4"></div>
                    </div>
                </div>
                <div class="card-body bg-inverse">
                    <div class="row text-center">
                        <div class="col-4">
                            <p class="m-0 h3">15080</p>
                            <p class="m-0 text-muted">Shots</p>
                        </div>
                        <div class="col-4">
                            <p class="m-0 h3">12000</p>
                            <p class="m-0 text-muted">Likes</p>
                        </div>
                        <div class="col-4">
                            <p class="m-0 h3">5100</p>
                            <p class="m-0 text-muted">Comments</p>
                        </div>
                    </div>
                </div>
            </div>
            <!-- END card-->
        </div>
        <div class="col-xl-4">
            <!-- START card-->
            <div class="card">
                <div class="card-body bg-primary">
                    <div class="h5 mt-0">Monthly incomes</div>
                    <!-- Line chart-->
                    <div
                        data-sparkline=""
                        data-type="line"
                        data-height="80"
                        data-width="100%"
                        data-line-width="2"
                        data-line-color="#dddddd"
                        data-spot-color="#bbbbbb"
                        data-fill-color=""
                        data-highlight-line-color="#fff"
                        data-spot-radius="3"
                        data-resize="true"
                        data-values="1,3,4,7,5,9,4,4,7,5,9,6,4"
                    ></div>
                </div>
                <div class="card-body bg-inverse">
                    <div class="row text-center">
                        <div class="col-6">
                            <!-- Bar chart-->
                            <div data-sparkline="" data-bar-color="#5d9cec" data-height="30" data-bar-width="6" data-bar-spacing="6" data-values="1,3,4,7,5,9,4,4,7,5,9,6,4"></div>
                        </div>
                        <div class="col-6">
                            <h4 class="m-0">+150</h4>
                            <p class="m-0 text-muted"><small>From last month</small></p>
                        </div>
                    </div>
                </div>
                <div class="card-body">
                    <div class="row text-center">
                        <div class="col-6">
                            <p class="m-0 text-muted">Gross income</p>
                            <h4 class="m-0">12000</h4>
                        </div>
                        <div class="col-6">
                            <p class="m-0 text-muted">Net income</p>
                            <h4 class="m-0">5100</h4>
                        </div>
                    </div>
                </div>
            </div>
            <!-- END card-->
        </div>
        <div class="col-xl-4">
            <!-- START card-->
            <div class="card">
                <div class="row row-flush" style="min-height: 100%">
                    <div class="col-8"><img class="img-fluid" src="img/bg1.jpg" alt="" /></div>
                    <div class="col-4 bg-info d-flex align-items-center justify-content-center">
                        <div class="text-center">
                            <div class="text-lg mt-0">11&deg;</div>
                            <p>Cold</p>
                            <em class="far fa-sun fa-2x"></em>
                        </div>
                    </div>
                </div>
            </div>
            <!-- END card-->
        </div>
    </div>
    <!-- END row-->
    <!-- START row-->
    <div class="row">
        <div class="col-xl-3">
            <!-- START card-->
            <div class="card border-0">
                <div class="row row-flush">
                    <div class="col-4 bg-info text-center d-flex align-items-center justify-content-center rounded-left"><em class="fa fa-users fa-2x"></em></div>
                    <div class="col-8">
                        <div class="card-body text-center">
                            <h4 class="mt-0">10k</h4>
                            <p class="mb-0 text-muted">VISITORS</p>
                        </div>
                    </div>
                </div>
            </div>
            <!-- END card-->
        </div>
        <div class="col-xl-3">
            <!-- START card-->
            <div class="card border-0">
                <div class="row row-flush">
                    <div class="col-4 bg-danger text-center d-flex align-items-center justify-content-center rounded-left"><em class="fa fa-music fa-2x"></em></div>
                    <div class="col-8">
                        <div class="card-body text-center">
                            <h4 class="mt-0">100%</h4>
                            <p class="mb-0 text-muted">VOLUME</p>
                        </div>
                    </div>
                </div>
            </div>
            <!-- END card-->
        </div>
        <div class="col-xl-3">
            <!-- START card-->
            <div class="card border-0">
                <div class="row row-flush">
                    <div class="col-4 bg-inverse text-center d-flex align-items-center justify-content-center rounded-left"><em class="fas fa-code-branch fa-2x"></em></div>
                    <div class="col-8">
                        <div class="card-body text-center">
                            <h4 class="mt-0">150</h4>
                            <p class="mb-0 text-muted">FORKS</p>
                        </div>
                    </div>
                </div>
            </div>
            <!-- END card-->
        </div>
        <div class="col-xl-3">
            <!-- START card-->
            <div class="card border-0">
                <div class="row row-flush">
                    <div class="col-4 bg-green text-center d-flex align-items-center justify-content-center rounded-left"><em class="fa fa-inbox fa-2x"></em></div>
                    <div class="col-8">
                        <div class="card-body text-center">
                            <h4 class="mt-0">10</h4>
                            <p class="mb-0 text-muted">NEW MESSAGES</p>
                        </div>
                    </div>
                </div>
            </div>
            <!-- END card-->
        </div>
    </div>
    <!-- END row-->
    <!-- START row-->
    <div class="row">
        <div class="col-xl-4">
            <!-- START card-->
            <div class="card">
                <div class="row row-flush">
                    <div class="col-5 d-flex align-items-center justify-content-center" style="background: url('img/bg2.jpg');background-size: cover;"></div>
                    <div class="col-7">
                        <div class="p-3">
                            <div class="float-right"><a class="btn btn-primary btn-sm" href="#">Register</a></div>
                            <p>
                                <span class="text-lg">16</span>
                                Aug
                            </p>
                            <p><strong>EVENT INVITATION</strong></p>
                            <p>Donec posuere neque in elit luctus tempor consequat enim egestas. Nulla dictum egestas leo at lobortis.</p>
                        </div>
                    </div>
                </div>
                <!-- END card-->
            </div>
        </div>
        <div class="col-xl-4">
            <!-- START card-->
            <div class="card">
                <div class="card-body bg-danger text-center">
                    <div class="d-flex">
                        <div>200 Following</div>
                        <div class="ml-auto">150 Followers</div>
                    </div>
                    <img class="img-thumbnail circle thumb96" src="img/user/06.jpg" alt="Image" />
                    <h4 class="mt-0">Lois Berry</h4>
                    <p class="m-0">
                        <em class="fa-fw fas fa-map-marker-alt"></em>
                        San Francisco, California
                    </p>
                    <div class="d-flex">
                        <div>15k Likes</div>
                        <div class="ml-auto">100 Feeds</div>
                    </div>
                </div>
            </div>
            <!-- END card-->
        </div>
        <div class="col-xl-4">
            <!-- START card-->
            <div class="card">
                <div class="gmap gmap-sm" data-gmap="" data-zoom="14" data-address="276 N TUSTIN ST, ORANGE, CA 92867" data-toggle="gmap"></div>
                <div class="card-body bg-inverse">
                    <div class="d-flex justify-content-center align-items-center">
                        <div class="h2 m-0">Find Us!</div>
                        <div class="ml-auto">
                            <div class="d-flex">
                                <em class="fas fa-map-marker-alt fa-3x mr-3"></em>
                                <p class="m-0">
                                    Street 123
                                    <br />
                                    Location, Unknow
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- END card-->
        </div>
    </div>
    <!-- END row-->
    <!-- START row-->
    <div class="row">
        <div class="col-xl-4">
            <!-- START card-->
            <div class="card">
                <img class="img-fluid ie-fix-flex" src="img/bg1.jpg" alt="Image" />
                <div class="card-body">
                    <div class="row text-center">
                        <div class="col-4">
                            <p>Comments</p>
                            <h3 class="m-0 text-primary">700</h3>
                        </div>
                        <div class="col-4">
                            <p>Likes</p>
                            <h3 class="m-0 text-primary">1500</h3>
                        </div>
                        <div class="col-4">
                            <p>Shots</p>
                            <h3 class="m-0 text-primary">300</h3>
                        </div>
                    </div>
                </div>
            </div>
            <!-- END card-->
        </div>
        <div class="col-xl-4">
            <!-- START card-->
            <div class="card">
                <div class="card-body">
                    <div class="row">
                        <div class="col-6 text-center"><img class="circle thumb96" src="img/user/09.jpg" alt="Image" /></div>
                        <div class="col-6">
                            <h3 class="mt-0">Peggy Peters</h3>
                            <ul class="list-unstyled mb-0">
                                <li class="mb-1">
                                    <em class="fas fa-map-marker-alt fa-fw"></em>
                                    ASD, Qwerty
                                </li>
                                <li class="mb-1">
                                    <em class="fab fa-twitter fa-fw"></em>
                                    @asdasd
                                </li>
                                <li class="mb-1">
                                    <em class="fa fa-envelope fa-fw"></em>
                                    asdasd@mail.com
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
                <div class="card-body bg-inverse">
                    <div class="row text-center">
                        <div class="col-4">
                            <p class="m-0 h3">700</p>
                            <p class="m-0 text-muted">Followers</p>
                        </div>
                        <div class="col-4">
                            <p class="m-0 h3">1500</p>
                            <p class="m-0 text-muted">Following</p>
                        </div>
                        <div class="col-4">
                            <p class="m-0 h3">510</p>
                            <p class="m-0 text-muted">Loved</p>
                        </div>
                    </div>
                </div>
            </div>
            <!-- END card-->
            <!-- START card-->
            <div class="card">
                <div class="card-body">
                    <div class="row align-items-center">
                        <div class="col-5 text-center"><img class="img-thumbnail circle img-fluid thumb96" src="img/user/06.jpg" alt="Image" /></div>
                        <div class="col-7">
                            <div class="text-right"><a class="btn btn-success btn-sm" href="#">Follow</a></div>
                            <div class="d-flex">
                                <div class="text-left">
                                    <h3 class="mt-0">Sarah Pierce</h3>
                                    <p class="text-muted">150 Following / 100 Followers</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- END card-->
        </div>
        <div class="col-xl-4">
            <div class="row">
                <div class="col-md-6">
                    <!-- START card-->
                    <div class="card bg-info">
                        <div class="card-body text-center">
                            <div class="text-lg m-0">300</div>
                            <p>Re-Tweets</p>
                            <div class="mb-3"></div>
                            <em class="fab fa-twitter text-alpha"></em>
                        </div>
                    </div>
                    <!-- END card-->
                </div>
                <div class="col-md-6">
                    <!-- START card-->
                    <div class="card bg-primary">
                        <div class="card-body text-center">
                            <div class="text-lg m-0">12&deg;</div>
                            <p>Bariloche</p>
                            <div class="mb-3"></div>
                            <em class="far fa-sun"></em>
                        </div>
                    </div>
                    <!-- END card-->
                </div>
            </div>
            <div class="row">
                <div class="col-md-6">
                    <!-- START card-->
                    <div class="card bg-danger">
                        <div class="card-body text-center">
                            <div class="radial-bar radial-bar-40 radial-bar radial-bar-danger m-0"><img src="img/user/03.jpg" alt="" /></div>
                            <p>
                                <strong>40%</strong>
                                <span>complete</span>
                            </p>
                        </div>
                    </div>
                    <!-- END card-->
                </div>
                <div class="col-md-6">
                    <!-- START card-->
                    <div class="card bg-purple">
                        <div class="card-body text-center">
                            <p class="mb-3"><img class="rounded thumb64" src="img/user/08.jpg" alt="" /></p>
                            <p class="m-0">
                                <strong>Mika</strong>
                                <span>is now following you</span>
                            </p>
                        </div>
                    </div>
                    <!-- END card-->
                </div>
            </div>
            <div class="row"></div>
            <!-- START card-->
            <div class="card">
                <div class="card-body">
                    <div class="d-flex align-items-center">
                        <div class="text-center"><img class="img-thumbnail circle img-fluid thumb64" src="img/user/06.jpg" alt="Image" /></div>
                        <div class="text-center">
                            <h3 class="m-0">Sylvia Morris</h3>
                        </div>
                        <div class="ml-auto align-self-start">
                            <a class="btn btn-purple btn-sm" href="#">
                                <em class="far fa-hand-point-right"></em>
                                <span>Touch</span>
                            </a>
                        </div>
                    </div>
                </div>
            </div>
            <!-- END card-->
        </div>
    </div>
    <!-- END row-->
    <!-- START row-->
    <div class="row">
        <div class="col-xl-3 col-lg-6">
            <!-- START card-->
            <div class="card bg-primary border-0">
                <div class="card-header">
                    <div class="row align-items-center">
                        <div class="col-3"><em class="fa fa-comments fa-5x"></em></div>
                        <div class="col-9 text-right">
                            <div class="text-lg">26</div>
                            <p class="m-0">New Comments!</p>
                        </div>
                    </div>
                </div>
                <a class="card-footer bg-gray-dark bt0 clearfix btn-block d-flex" href="#">
                    <span>View Details</span>
                    <span class="ml-auto"><em class="fa fa-chevron-circle-right"></em></span>
                </a>
                <!-- END card-->
            </div>
        </div>
        <div class="col-xl-3 col-lg-6">
            <!-- START card-->
            <div class="card bg-green border-0">
                <div class="card-header">
                    <div class="row align-items-center">
                        <div class="col-3"><em class="fa fa-tasks fa-5x"></em></div>
                        <div class="col-9 text-right">
                            <div class="text-lg">12</div>
                            <p class="m-0">New Tasks!</p>
                        </div>
                    </div>
                </div>
                <a class="card-footer bg-gray-dark bt0 clearfix btn-block d-flex" href="#">
                    <span>View Details</span>
                    <span class="ml-auto"><em class="fa fa-chevron-circle-right"></em></span>
                </a>
            </div>
            <!-- END card-->
        </div>
        <div class="col-xl-3 col-lg-6">
            <!-- START card-->
            <div class="card bg-warning border-0">
                <div class="card-header">
                    <div class="row align-items-center">
                        <div class="col-3"><em class="fa fa-shopping-cart fa-5x"></em></div>
                        <div class="col-9 text-right">
                            <div class="text-lg">124</div>
                            <p class="m-0">New Orders!</p>
                        </div>
                    </div>
                </div>
                <a class="card-footer bg-gray-dark bt0 clearfix btn-block d-flex" href="#">
                    <span>View Details</span>
                    <span class="ml-auto"><em class="fa fa-chevron-circle-right"></em></span>
                </a>
            </div>
            <!-- END card-->
        </div>
        <div class="col-xl-3 col-lg-6">
            <!-- START card-->
            <div class="card bg-danger border-0">
                <div class="card-header">
                    <div class="row align-items-center">
                        <div class="col-3"><em class="far fa-life-ring fa-5x"></em></div>
                        <div class="col-9 text-right">
                            <div class="text-lg">13</div>
                            <p class="m-0">Support Tickets!</p>
                        </div>
                    </div>
                </div>
                <a class="card-footer bg-gray-dark bt0 clearfix btn-block d-flex" href="#">
                    <span>View Details</span>
                    <span class="ml-auto"><em class="fa fa-chevron-circle-right"></em></span>
                </a>
            </div>
            <!-- END card-->
        </div>
    </div>
    <!-- END row-->
    <!-- START card tab-->
    <div class="card" role="tabpanel">
        <!-- Nav tabs-->
        <ul class="nav nav-tabs nav-fill" role="tablist">
            <li class="nav-item" role="presentation">
                <a class="nav-link active" href="#home" aria-controls="home" role="tab" data-toggle="tab">
                    <em class="far fa-clock fa-fw"></em>
                    Tasks Card
                </a>
            </li>
            <li class="nav-item" role="presentation">
                <a class="nav-link" href="#profile" aria-controls="profile" role="tab" data-toggle="tab">
                    <em class="far fa-money-bill-alt fa-fw"></em>
                    Transactions Card
                </a>
            </li>
        </ul>
        <!-- Tab panes-->
        <div class="tab-content p-0">
            <div class="tab-pane active" id="home" role="tabpanel">
                <!-- START list group-->
                <div class="list-group mb-0">
                    <a class="list-group-item list-group-item-action" href="#">
                        <span class="badge badge-purple float-right">just now</span>
                        <em class="fa-fw fas fa-calendar-alt mr-2"></em>
                        Calendar updated
                    </a>
                    <a class="list-group-item list-group-item-action" href="#">
                        <span class="badge badge-purple float-right">4 minutes ago</span>
                        <em class="fa-fw fa fa-comment mr-2"></em>
                        Commented on a post
                    </a>
                    <a class="list-group-item list-group-item-action" href="#">
                        <span class="badge badge-purple float-right">23 minutes ago</span>
                        <em class="fa-fw fa fa-truck mr-2"></em>
                        Order 392 shipped
                    </a>
                    <a class="list-group-item list-group-item-action" href="#">
                        <span class="badge badge-purple float-right">46 minutes ago</span>
                        <em class="fa-fw far fa-money-bill-alt mr-2"></em>
                        Invoice 653 has been paid
                    </a>
                    <a class="list-group-item list-group-item-action" href="#">
                        <span class="badge badge-purple float-right">1 hour ago</span>
                        <em class="fa-fw fa fa-user mr-2"></em>
                        A new user has been added
                    </a>
                    <a class="list-group-item list-group-item-action" href="#">
                        <span class="badge badge-purple float-right">2 hours ago</span>
                        <em class="fa-fw fa fa-check mr-2"></em>
                        Completed task: "pick up dry cleaning"
                    </a>
                    <a class="list-group-item list-group-item-action" href="#">
                        <span class="badge badge-purple float-right">yesterday</span>
                        <em class="fa-fw fa fa-globe mr-2"></em>
                        Saved the world
                    </a>
                    <a class="list-group-item list-group-item-action" href="#">
                        <span class="badge badge-purple float-right">two days ago</span>
                        <em class="fa-fw fa fa-check mr-2"></em>
                        Completed task: "fix error on sales page"
                    </a>
                    <a class="list-group-item list-group-item-action" href="#">
                        <span class="badge badge-purple float-right">two days ago</span>
                        <em class="fa-fw fa fa-check mr-2"></em>
                        Completed task: "fix error on sales page"
                    </a>
                </div>
                <!-- END list group-->
                <div class="card-footer text-right"><a class="btn btn-secondary btn-sm" href="#">View All Activity</a></div>
            </div>
            <div class="tab-pane" id="profile" role="tabpanel">
                <!-- START table responsive-->
                <div class="table-responsive">
                    <table class="table table-bordered table-hover table-striped">
                        <thead>
                            <tr>
                                <th>Order #</th>
                                <th>Order Date</th>
                                <th>Order Time</th>
                                <th>Amount (USD)</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td>3326</td>
                                <td>10/21/2013</td>
                                <td>3:29 PM</td>
                                <td>$321.33</td>
                            </tr>
                            <tr>
                                <td>3325</td>
                                <td>10/21/2013</td>
                                <td>3:20 PM</td>
                                <td>$234.34</td>
                            </tr>
                            <tr>
                                <td>3324</td>
                                <td>10/21/2013</td>
                                <td>3:03 PM</td>
                                <td>$724.17</td>
                            </tr>
                            <tr>
                                <td>3323</td>
                                <td>10/21/2013</td>
                                <td>3:00 PM</td>
                                <td>$23.71</td>
                            </tr>
                            <tr>
                                <td>3322</td>
                                <td>10/21/2013</td>
                                <td>2:49 PM</td>
                                <td>$8345.23</td>
                            </tr>
                            <tr>
                                <td>3321</td>
                                <td>10/21/2013</td>
                                <td>2:23 PM</td>
                                <td>$245.12</td>
                            </tr>
                            <tr>
                                <td>3320</td>
                                <td>10/21/2013</td>
                                <td>2:15 PM</td>
                                <td>$5663.54</td>
                            </tr>
                            <tr>
                                <td>3319</td>
                                <td>10/21/2013</td>
                                <td>2:13 PM</td>
                                <td>$943.45</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
                <!-- END table responsive-->
                <div class="card-footer text-right"><a class="btn btn-secondary btn-sm" href="#">View All Transactions</a></div>
            </div>
        </div>
    </div>
    <!-- END card tab-->
@endsection
@section('styles')@endsection
@section('scripts')
    <!-- SPARKLINE-->
    <script src="{{ mix('/js/sparkline.js') }}"></script>
    <!-- GOOGLE MAPS -->
    <script src="//maps.google.com/maps/api/js"></script>
    <script src="{{ mix('/js/gmap.js') }}"></script>
@endsection
