@extends('layouts.default')
{{-- Page title --}}
@section('title')
    Dashboard @parent
@stop
{{-- page level styles --}}
@section('header_styles')
    <!-- page vendors -->
    <link href="{{ asset('css/pages.css') }}" rel="stylesheet">
    <!--end of page vendors -->
@stop
@section('content')

    <!-- Content Header (Page header) -->
    <section class="content-header">
        <div aria-label="breadcrumb" class="card-breadcrumb">
            <h1>Dashboard</h1>

        </div>
        <div class="separator-breadcrumb border-top"></div>
    </section>
    <!-- /.content -->
    <section class="content">
        <div class="row">
<div class="col-md-6 col-xl-3 col-12 mb-20px">
              <div class="card bg-white dashboard-col ps-15px pb-15px pt-15px">
                    <i class="im im-icon-Add-Cart im-icon-set float-end bg-primary"></i>
                    <h3>35K</h3>
                    <p>Number of Sales</p>
<div class="progress meter me-15px">
                        <div id="progress-primary"
                            class=" progress-bar bg-primary progress-bar-striped progress-bar-animated" role="progressbar"
                            aria-valuenow="1" aria-valuemin="0" aria-valuemax="100"></div>
                    </div>
<p class="mb-0 mt-3 "><span>Gained: 655</span> <span class="float-end pe-15px">Lost: 56</span></p>
                </div>
            </div>

<div class="col-md-6 col-xl-3 col-12  mb-20px">
              <div class="card bg-white dashboard-col ps-15px pb-15px pt-15px">
                    <i class="im im-icon-Eye-Scan im-icon-set float-end bg-success"></i>
                    <h3>10K</h3>
                    <p>Page Views</p>
<div class="progress me-15px">
                        <div id="progress-success"
                            class="progress-bar bg-success progress-bar-striped progress-bar-animated" role="progressbar"
                            aria-valuenow="1" aria-valuemin="0" aria-valuemax="100"></div>
                    </div>
<p class="mb-0 mt-3 "><span>Unique Pageviews: </span> <span class="float-end pe-15px">4.7K</span>
                    </p>
                </div>
            </div>

<div class="col-md-6 col-xl-3 col-12  mb-20px">
              <div class="card bg-white dashboard-col ps-15px pb-15px pt-15px">
                    <i class="im im-icon-Love-User im-icon-set float-end bg-info"></i>
                    <h3>23K</h3>
                    <p>Number of Fans</p>
<div class="progress me-15px">
                        <div id="progress-info" class="progress-bar bg-info progress-bar-striped progress-bar-animated"
                            role="progressbar" aria-valuenow="1" aria-valuemin="0" aria-valuemax="100">
                        </div>
                    </div>
<p class="mb-0 mt-3 "><span>Gained: 655</span> <span class="float-end pe-15px">Lost: 56</span></p>
                </div>
            </div>
<div class="col-md-6 col-xl-3 col-12  mb-20px">
              <div class="card bg-white dashboard-col ps-15px pb-15px pt-15px">
                    <i class="im im-icon-Checked-User im-icon-set float-end bg-danger"></i>
                    <h3>400</h3>
                    <p>Total Actions</p>
<div class="progress me-15px">
                        <div id="progress-danger" class="progress-bar bg-danger progress-bar-striped progress-bar-animated"
                            role="progressbar" aria-valuenow="1" aria-valuemin="0" aria-valuemax="100">
                        </div>
                    </div>
<p class="mb-0 mt-3 "><span>To Prev. Period: 655</span> <span class="float-end pe-15px">+72%</span>
                    </p>
                </div>
            </div>
        </div>
        <div class="row">
<div class="col-md-12 col-lg-7 mt-20px col-12 ">
                <div class="card dashboard-col">
                    <h5 class="card-header">Sales Analysis</h5>
                    <hr>
                    <div class="row">
                        <div class="col-12">
                            <canvas id="myChart" width="400" height="300"></canvas>
                        </div>
                    </div>
                </div>

            </div>
<div class="col-md-12 col-lg-5 mt-20px col-12 ">
                <div class="card dashboard-col">

                    <h5 class="card-header">Sales Report</h5>
                    <hr>
                    <div class="row">
                        <div class="col-12">
                            <div class="table-responsive  os-theme-light" id="table-2">
<table class="table">
                                    <tr>
                                        <th>Names</th>
                                        <th>Daily Sales</th>
                                        <th>Monthly Sales</th>
                                        <th>Yearly Sales</th>
                                    </tr>
                                    <tr>
                                        <td>Jan</td>
                                        <td>6</td>
                                        <td>180</td>
                                        <td>1500</td>
                                    </tr>
                                    <tr>
                                        <td>Feb</td>
                                        <td>13</td>
                                        <td>390</td>
                                        <td>4680</td>
                                    </tr>
                                    <tr>
                                        <td>Mar</td>
                                        <td>13</td>
                                        <td>390</td>
                                        <td>4680</td>
                                    </tr>
                                    <tr>
                                        <td>Mar</td>
                                        <td>13</td>
                                        <td>390</td>
                                        <td>4680</td>
                                    </tr>

                                </table>
                            </div>

                        </div>
                    </div>
                </div>

            </div>


        </div>
        <div class="row">
<div class="col-xl-7 col-12 mt-20px ">
                <div class="card bg-white dashboard-col">
                    <h5 class="card-header">Registered Users</h5>
                    <div class="table-responsive os-theme-light" id="table-1">
                        <table class="table table-bordered table-top">
                            <thead>
                                <tr>
<th scope="col">Name</th>
                                    <th scope="col">Picture</th>
                                    <th scope="col">Email Address</th>
                                    <th scope="col">Data and time</th>
                                    <th scope="col">Status</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td>Stiphen Mark</td>
                                    <td><img src="{{ asset('img/authors/avatar9.jpg') }}" alt="image missing"
class="rounded-circle img-fluid"></td>
                                    <td>stiphen@mail.com</td>
                                    <td>Mar 25,2019</td>
<td class="align-middle"><span class="badge bg-success float-start">Approved</span></td>


                                </tr>
                                <tr>
                                    <td>James Marle</td>
                                    <td><img src="{{ asset('img/authors/avatar1.jpg') }}" alt="image missing"
class="rounded-circle img-fluid"></td>
                                    <td>marle@mail.com</td>
                                    <td>Mar 25,2019</td>
<td class="align-middle">
                                        <span class="badge bg-warning float-start">Pending</span>
                                    </td>
                                </tr>
                                <tr>
                                    <td>Lois Mark</td>
                                    <td><img src="{{ asset('img/authors/avatar2.jpg') }}" alt="image missing"
class="rounded-circle img-fluid"></td>
                                    <td>loismark@mail.com</td>
                                    <td>Mar 25,2019</td>
<td class="align-middle"><span class="badge bg-danger float-start">Rejected</span></td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
<div class="col-xl-5 col-12 mt-20px ">
                <div class="card p-0 bg-white dashboard-col">
                    <div class="card-header bg-primary">
                        <h5 class="text-white my-0">Blog Report</h5>
                    </div>
                    <div class="col-12">
                        <ul class="list-group">
                            <li class="list-group-item border-bottom-1 border-0">
                                <div class="row">
                                    <div class="col-sm-4 col-12 align-self-center">
                                        <img src="{{ asset('img/images/blog3.jpg') }}" alt="images missing"
                                            class="img-fluid img-thumbnail">
                                    </div>
                                    <div class="col-sm-5 col-12">
                                        <h6>Technology</h6>
                                        <p>It is the modern technology description</p>
                                    </div>
                                    <div class="col-sm-3 col-12 align-self-center">
                                        <a href="" class="btn btn-secondary">View</a>
                                    </div>
                                </div>
                                <hr>
                            </li>

                            <li class="list-group-item  border-0">
                                <div class="row">
                                    <div class="col-sm-4 col-12 align-self-center">
                                        <img src="{{ asset('img/images/blog1.jpg') }}" alt="images missing"
                                            class="img-fluid img-thumbnail">
                                    </div>
                                    <div class="col-sm-5 col-12">
                                        <h6>Happy Holi 2019</h6>
                                        <p>It is the Full of colors with happyness...</p>
                                    </div>
                                    <div class="col-sm-3 col-12 align-self-center">
                                        <a href="" class="btn btn-secondary">View</a>
                                    </div>
                                </div>
                                <hr>
                            </li>
                            <li class="list-group-item  border-0">
                                <div class="row">
                                    <div class="col-sm-4 col-12 align-self-center">
                                        <img src="{{ asset('img/images/blog2.jpg') }}" alt="images missing"
                                            class="img-fluid img-thumbnail">
                                    </div>
                                    <div class="col-sm-5 col-12">
                                        <h6 class="card-title">Political news</h6>

                                        <p class="col-10 px-0 text-truncate">It is provides political news information
                                        </p>
                                        <p class="text-muted">created:2 days ago</p>
                                    </div>
                                    <div class="col-sm-3 col-12 align-self-center">
                                        <a href="" class="btn btn-secondary">View</a>
                                    </div>
                                </div>
                            </li>
                        </ul>
                    </div>
                    <a href="" class="card-footer text-center bg-white d-block ">View All Blogs</a>
                </div>
            </div>

        </div>
    </section>

@stop
@section('footer_scripts')
    <!--   page level js ----------->
    <script language="javascript" type="text/javascript" src="{{ asset('vendors/chartjs/js/chart.umd.js') }}"></script>
    <script src="{{ asset('js/pages/dashboard.js') }}"></script>
    <!-- end of page level js -->
@stop