@extends('layouts.horizontal')
@section('content')
    <div class="content-heading">
        <div>
            Dashboard
            <small data-localize="dashboard.WELCOME">@lang('default.dashboard.WELCOME')</small>
        </div>
        <!-- START Language list-->
        <div class="ml-auto">
            <div class="btn-group">
                <button class="btn btn-secondary dropdown-toggle dropdown-toggle-nocaret" type="button" data-toggle="dropdown">English</button>
                <div class="dropdown-menu dropdown-menu-right-forced animated fadeInUpShort" role="menu">
                    <a class="dropdown-item" href="#" data-set-lang="en">English</a>
                    <a class="dropdown-item" href="#" data-set-lang="es">Spanish</a>
                </div>
            </div>
        </div>
        <!-- END Language list-->
    </div>
    <!-- START cards box-->
    <div class="row">
        <div class="col-xl-3 col-md-6">
            <!-- START card-->
            <div class="card bg-info-light pt-2 b0">
                <div class="px-2">
                    <em class="icon-cloud-upload fa-lg float-right"></em>
                    <div class="h2 mt-0">1700</div>
                    <div class="text-uppercase">Uploads</div>
                </div>
                <div
                    data-sparkline=""
                    data-type="line"
                    data-width="100%"
                    data-height="75px"
                    data-line-color="#23b7e5"
                    data-chart-range-min="0"
                    data-fill-color="#23b7e5"
                    data-spot-color="#23b7e5"
                    data-min-spot-color="#23b7e5"
                    data-max-spot-color="#23b7e5"
                    data-highlight-spot-color="#23b7e5"
                    data-highlight-line-color="#23b7e5"
                    data-values="2,5,3,7,4,5"
                    style="margin-bottom: -2px"
                    data-resize="true"
                ></div>
            </div>
        </div>
        <div class="col-xl-3 col-md-6">
            <!-- START card-->
            <div class="card bg-purple-light pt-2 b0">
                <div class="px-2">
                    <em class="icon-globe fa-lg float-right"></em>
                    <div class="h2 mt-0">
                        700
                        <span class="text-sm text-white">GB</span>
                    </div>
                    <div class="text-uppercase">Quota</div>
                </div>
                <div
                    data-sparkline=""
                    data-type="line"
                    data-width="100%"
                    data-height="75px"
                    data-line-color="#7266ba"
                    data-chart-range-min="0"
                    data-fill-color="#7266ba"
                    data-spot-color="#7266ba"
                    data-min-spot-color="#7266ba"
                    data-max-spot-color="#7266ba"
                    data-highlight-spot-color="#7266ba"
                    data-highlight-line-color="#7266ba"
                    data-values="1,4,5,4,8,7,10"
                    style="margin-bottom: -2px"
                    data-resize="true"
                ></div>
            </div>
        </div>
        <div class="col-xl-3 col-lg-6 col-md-12">
            <!-- START card-->
            <div class="card bg-info-light pt-2 b0">
                <div class="px-2">
                    <em class="icon-bubbles fa-lg float-right"></em>
                    <div class="h2 mt-0">500</div>
                    <div class="text-uppercase">Reviews</div>
                </div>
                <div
                    data-sparkline=""
                    data-type="line"
                    data-width="100%"
                    data-height="75px"
                    data-line-color="#23b7e5"
                    data-chart-range-min="0"
                    data-fill-color="#23b7e5"
                    data-spot-color="#23b7e5"
                    data-min-spot-color="#23b7e5"
                    data-max-spot-color="#23b7e5"
                    data-highlight-spot-color="#23b7e5"
                    data-highlight-line-color="#23b7e5"
                    data-values="4,5,3,10,7,15"
                    style="margin-bottom: -2px"
                    data-resize="true"
                ></div>
            </div>
        </div>
        <div class="col-xl-3 col-lg-6 col-md-12">
            <!-- START card-->
            <div class="card bg-purple-light pt-2 b0">
                <div class="px-2">
                    <em class="icon-pencil fa-lg float-right"></em>
                    <div class="h2 mt-0">35</div>
                    <div class="text-uppercase">Annotations</div>
                </div>
                <div
                    data-sparkline=""
                    data-type="line"
                    data-width="100%"
                    data-height="75px"
                    data-line-color="#7266ba"
                    data-chart-range-min="0"
                    data-fill-color="#7266ba"
                    data-spot-color="#7266ba"
                    data-min-spot-color="#7266ba"
                    data-max-spot-color="#7266ba"
                    data-highlight-spot-color="#7266ba"
                    data-highlight-line-color="#7266ba"
                    data-values="1,3,4,5,7,8"
                    style="margin-bottom: -2px"
                    data-resize="true"
                ></div>
            </div>
        </div>
    </div>
    <!-- END cards box-->
    <!-- START chart-->
    <div class="row">
        <div class="col-xl-12">
            <!-- START card-->
            <div class="card card-default" id="cardChart9">
                <div class="card-header">
                    <div class="card-title">Website Performance</div>
                </div>
                <div class="card-wrapper">
                    <div class="card-body">
                        <div class="chart-splinev3 flot-chart"></div>
                    </div>
                </div>
            </div>
            <!-- END card-->
        </div>
    </div>
    <!-- END chart-->
    <div class="row">
        <div class="col-xl-6">
            <!-- START card tab-->
            <div class="card card-transparent" role="tabpanel">
                <!-- Nav tabs-->
                <ul class="nav nav-tabs nav-fill" role="tablist">
                    <li class="nav-item" role="presentation">
                        <a class="nav-link active bb0" 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 bb0" 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 bg-white">
                    <div class="tab-pane active" id="home" role="tabpanel">
                        <!-- START list group-->
                        <div class="list-group mb-0">
                            <a class="list-group-item bt0" 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" 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" 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" 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" 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" 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" 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" 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" 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"><button class="btn btn-secondary btn-sm" type="button">View All Activity</button></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-->
        </div>
        <div class="col-xl-6">
            <div class="card card-transparent">
                <div data-vector-map="" data-height="450" data-scale="0" data-map-name="world_mill_en"></div>
            </div>
        </div>
    </div>
    <!-- START cards-->
    <div class="row">
        <div class="col-xl-3">
            <!-- START loader widget-->
            <div class="card card-default">
                <div class="card-body">
                    <a class="text-muted float-right" href="#"><em class="fa fa-arrow-right"></em></a>
                    <div class="text-info">Average Monthly Uploads</div>
                    <div class="text-center py-4">
                        <div
                            class="easypie-chart easypie-chart-lg"
                            data-easypiechart="data-easypiechart"
                            data-percent="70"
                            data-animate='{"duration": "800", "enabled": "true"}'
                            data-bar-color="#23b7e5"
                            data-track-Color="rgba(200,200,200,0.4)"
                            data-scale-Color="false"
                            data-line-width="10"
                            data-line-cap="round"
                            data-size="145"
                        >
                            <span>70%</span>
                        </div>
                    </div>
                    <div
                        class="text-center"
                        data-sparkline=""
                        data-bar-color="#23b7e5"
                        data-height="30"
                        data-bar-width="5"
                        data-bar-spacing="2"
                        data-values="5,4,8,7,8,5,4,6,5,5,9,4,6,3,4,7,5,4,7"
                    ></div>
                </div>
                <div class="card-footer">
                    <p class="text-muted">
                        <em class="fa fa-upload fa-fw"></em>
                        <span>This Month</span>
                        <span class="text-dark">1000 Gb</span>
                    </p>
                </div>
            </div>
            <!-- END loader widget-->
        </div>
        <div class="col-xl-3">
            <!-- START messages and activity-->
            <div class="card card-default">
                <div class="card-header">
                    <div class="card-title">Latest activities</div>
                </div>
                <!-- START list group-->
                <div class="list-group">
                    <!-- START list group item-->
                    <div class="list-group-item">
                        <div class="media">
                            <div class="align-self-start mr-2">
                                <span class="fa-stack">
                                    <em class="fa fa-circle fa-stack-2x text-purple"></em>
                                    <em class="fas fa-cloud-upload-alt fa-stack-1x fa-inverse text-white"></em>
                                </span>
                            </div>
                            <div class="media-body text-truncate">
                                <p class="mb-1"><a class="text-purple m-0" href="#">NEW FILE</a></p>
                                <p class="m-0">
                                    <small><a href="#">Bootstrap.xls</a></small>
                                </p>
                            </div>
                            <div class="ml-auto"><small class="text-muted ml-2">15m</small></div>
                        </div>
                    </div>
                    <!-- END list group item-->
                    <!-- START list group item-->
                    <div class="list-group-item">
                        <div class="media">
                            <div class="align-self-start mr-2">
                                <span class="fa-stack">
                                    <em class="fa fa-circle fa-stack-2x text-info"></em>
                                    <em class="far fa-file-alt fa-stack-1x fa-inverse text-white"></em>
                                </span>
                            </div>
                            <div class="media-body text-truncate">
                                <p class="mb-1"><a class="text-info m-0" href="#">NEW DOCUMENT</a></p>
                                <p class="m-0">
                                    <small><a href="#">Bootstrap.doc</a></small>
                                </p>
                            </div>
                            <div class="ml-auto"><small class="text-muted ml-2">2h</small></div>
                        </div>
                    </div>
                    <!-- END list group item-->
                    <!-- START list group item-->
                    <div class="list-group-item">
                        <div class="media">
                            <div class="align-self-start mr-2">
                                <span class="fa-stack">
                                    <em class="fa fa-circle fa-stack-2x text-danger"></em>
                                    <em class="fa fa-exclamation fa-stack-1x fa-inverse text-white"></em>
                                </span>
                            </div>
                            <div class="media-body text-truncate">
                                <p class="mb-1"><a class="text-danger m-0" href="#">BROADCAST</a></p>
                                <p class="m-0"><a href="#">Read</a></p>
                            </div>
                            <div class="ml-auto"><small class="text-muted ml-2">5h</small></div>
                        </div>
                    </div>
                    <!-- END list group item-->
                    <!-- START list group item-->
                    <div class="list-group-item">
                        <div class="media">
                            <div class="align-self-start mr-2">
                                <span class="fa-stack">
                                    <em class="fa fa-circle fa-stack-2x text-success"></em>
                                    <em class="far fa-clock fa-stack-1x fa-inverse text-white"></em>
                                </span>
                            </div>
                            <div class="media-body text-truncate">
                                <p class="mb-1"><a class="text-success m-0" href="#">NEW MEETING</a></p>
                                <p class="m-0">
                                    <small>
                                        On
                                        <em>10/12/2015 09:00 am</em>
                                    </small>
                                </p>
                            </div>
                            <div class="ml-auto"><small class="text-muted ml-2">15h</small></div>
                        </div>
                    </div>
                    <!-- END list group item-->
                </div>
                <!-- END list group-->
                <!-- START card footer-->
                <div class="card-footer"><a class="text-sm" href="#">Load more</a></div>
                <!-- END card-footer-->
            </div>
            <!-- END messages and activity-->
        </div>
        <div class="col-xl-6">
            <div class="card card-default">
                <div class="card-header">
                    <div class="px-2 float-right badge badge-danger">5</div>
                    <div class="px-2 mr-2 float-right badge badge-success">12</div>
                    <div class="card-title">Team messages</div>
                </div>
                <!-- START list group-->
                <div class="list-group" data-height="230" data-scrollable="">
                    <!-- START list group item-->
                    <div class="list-group-item list-group-item-action">
                        <div class="media">
                            <img class="align-self-start mx-2 circle thumb32" src="/img/user/02.jpg" alt="Image" />
                            <div class="media-body text-truncate">
                                <p class="mb-1">
                                    <strong class="text-primary">
                                        <span class="circle bg-success circle-lg text-left"></span>
                                        <span>Catherine Ellis</span>
                                    </strong>
                                </p>
                                <p class="mb-1 text-sm">Cras sit amet nibh libero, in gravida nulla. Nulla...</p>
                            </div>
                            <div class="ml-auto"><small class="text-muted ml-2">2h</small></div>
                        </div>
                    </div>
                    <!-- END list group item-->
                    <!-- START list group item-->
                    <div class="list-group-item list-group-item-action">
                        <div class="media">
                            <img class="align-self-start mx-2 circle thumb32" src="/img/user/03.jpg" alt="Image" />
                            <div class="media-body text-truncate">
                                <p class="mb-1">
                                    <strong class="text-primary">
                                        <span class="circle bg-success circle-lg text-left"></span>
                                        <span>Jessica Silva</span>
                                    </strong>
                                </p>
                                <p class="mb-1 text-sm">Cras sit amet nibh libero, in gravida nulla. Nulla...</p>
                            </div>
                            <div class="ml-auto"><small class="text-muted ml-2">3h</small></div>
                        </div>
                    </div>
                    <!-- END list group item-->
                    <!-- START list group item-->
                    <div class="list-group-item list-group-item-action">
                        <div class="media">
                            <img class="align-self-start mx-2 circle thumb32" src="/img/user/09.jpg" alt="Image" />
                            <div class="media-body text-truncate">
                                <p class="mb-1">
                                    <strong class="text-primary">
                                        <span class="circle bg-danger circle-lg text-left"></span>
                                        <span>Jessie Wells</span>
                                    </strong>
                                </p>
                                <p class="mb-1 text-sm">Cras sit amet nibh libero, in gravida nulla. Nulla...</p>
                            </div>
                            <div class="ml-auto"><small class="text-muted ml-2">4h</small></div>
                        </div>
                    </div>
                    <!-- END list group item-->
                    <!-- START list group item-->
                    <div class="list-group-item list-group-item-action">
                        <div class="media">
                            <img class="align-self-start mx-2 circle thumb32" src="/img/user/12.jpg" alt="Image" />
                            <div class="media-body text-truncate">
                                <p class="mb-1">
                                    <strong class="text-primary">
                                        <span class="circle bg-danger circle-lg text-left"></span>
                                        <span>Rosa Burke</span>
                                    </strong>
                                </p>
                                <p class="mb-1 text-sm">Cras sit amet nibh libero, in gravida nulla. Nulla...</p>
                            </div>
                            <div class="ml-auto"><small class="text-muted ml-2">1d</small></div>
                        </div>
                    </div>
                    <!-- END list group item-->
                    <!-- START list group item-->
                    <div class="list-group-item list-group-item-action">
                        <div class="media">
                            <img class="align-self-start mx-2 circle thumb32" src="/img/user/10.jpg" alt="Image" />
                            <div class="media-body text-truncate">
                                <p class="mb-1">
                                    <strong class="text-primary">
                                        <span class="circle bg-danger circle-lg text-left"></span>
                                        <span>Michelle Lane</span>
                                    </strong>
                                </p>
                                <p class="mb-1 text-sm">Mauris eleifend, libero nec cursus lacinia...</p>
                            </div>
                            <div class="ml-auto"><small class="text-muted ml-2">2d</small></div>
                        </div>
                    </div>
                    <!-- END list group item-->
                </div>
                <!-- END list group-->
                <!-- START card footer-->
                <div class="card-footer">
                    <div class="input-group">
                        <input class="form-control form-control-sm" type="text" placeholder="Search message .." />
                        <span class="input-group-btn">
                            <button class="btn btn-secondary btn-sm" type="submit"><i class="fa fa-search"></i></button>
                        </span>
                    </div>
                </div>
                <!-- END card-footer-->
            </div>
        </div>
        <!-- END dashboard sidebar-->
    </div>
    <!-- END cards-->
@endsection
@section('scripts')
    <script src="{{ mix('/js/sparkline.js') }}"></script>
    <script src="{{ mix('/js/easypiechart.js') }}"></script>
    <script src="{{ mix('/js/flot.js') }}"></script>
    <script src="{{ mix('/js/vector.map.js') }}"></script>
    <script src="{{ mix('/js/vector.map.demo.js') }}"></script>
@endsection
