@extends('admin.layouts.app')
@section('contentSection')
    {{--    @include('admin.layouts.widgets')--}}
    <div class="row mt-3">
        <div class="col-12 col-lg-6 col-xl-4">
            <div class="card">
                <div class="card-body">
                    <p class="mb-0 ">Listings <span class="float-right badge badge-primary">Monthly</span></p>
                    <div class="">
                        <h4 class="mb-0 py-3 text-primary">92,403 <span class="float-right"><i
                                    class="fa fa-home"></i></span></h4>
                    </div>
                    <div class="progress-wrapper">
                        <div class="progress" style="height:5px;">
                            <div class="progress-bar bg-primary" style="width:60%"></div>
                        </div>
                    </div>
                    <p class="mb-0 mt-2 small-font">Compare to last month <span class="float-right">+15% <i
                                class="fa fa-long-arrow-up"></i></span></p>
                </div>
            </div>
        </div>


        <div class="col-12 col-lg-6 col-xl-4">
            <div class="card">
                <div class="card-body">
                    <p class="text-success mb-0">Calling Database <span
                            class="float-right badge badge-success">Today</span></p>
                    <div class="">
                        <h4 class="mb-0 py-3 text-success">5,70,803 <span class="float-right"><i
                                    class="fa fa-phone"></i></span></h4>
                    </div>
                    <div class="progress-wrapper">
                        <div class="progress" style="height:5px;">
                            <div class="progress-bar bg-success" style="width:80%"></div>
                        </div>
                    </div>
                    <p class="mb-0 mt-2 small-font">Compare to yesterday <span class="float-right">+43% <i
                                class="fa fa-long-arrow-up"></i></span></p>
                </div>
            </div>
        </div>

        <div class="col-12 col-lg-6 col-xl-4">
            <div class="card">
                <div class="card-body">
                    <p class="text-danger mb-0">Leads <span
                            class="float-right badge badge-danger">Weekly</span></p>
                    <div class="">
                        <h4 class="mb-0 py-3 text-danger">8,456 <span class="float-right"><i
                                    class="fa fa-phone-square"></i></span></h4>
                    </div>
                    <div class="progress-wrapper">
                        <div class="progress" style="height:5px;">
                            <div class="progress-bar bg-danger" style="width:45%"></div>
                        </div>
                    </div>
                    <p class="mb-0 mt-2 small-font">Compare to last week <span class="float-right">+32% <i
                                class="fa fa-long-arrow-up"></i></span></p>
                </div>
            </div>
        </div>

    </div><!--End Row-->

    <div class="card">
        <div class="card-header">Tasks status
            <div class="btn-group group-round btn-group-sm float-right">
                <button type="button" class="btn btn-info waves-effect waves-light">Monthly</button>
                <button type="button" class="btn btn-info waves-effect waves-light">Weekly</button>
                <button type="button" class="btn btn-info waves-effect waves-light">Daily</button>
            </div>
        </div>
        <div class="card-body">
            <div class="row">
                <div class="col-12 col-lg-3 text-center">
                    <p class="mt-4">Pending Tasks</p>
                    <h4 class="mb-0">4,350</h4>
                    <hr>
                    <p>Total Tasks</p>
                    <h4 class="mb-0 text-info">80,520</h4>
                </div>
                <div class="col-12 col-lg-9">
                    <canvas id="dash2-chart1" height="100"></canvas>
                </div>
            </div><!--End Row-->
        </div>
    </div><!--End Card-->

    <div class="row">
        <div class="col-lg-6">
            <div class="card">
                <div class="card-header">WIP Listings
                    <div class="card-action">
                        <div class="dropdown">
                            <a href="javascript:void();" class="dropdown-toggle dropdown-toggle-nocaret"
                               data-toggle="dropdown">
                                <i class="icon-options"></i>
                            </a>
                            <div class="dropdown-menu dropdown-menu-right">
                                <a class="dropdown-item" href="javascript:void();">Action</a>
                                <a class="dropdown-item" href="javascript:void();">Another action</a>
                                <a class="dropdown-item" href="javascript:void();">Something else here</a>
                                <div class="dropdown-divider"></div>
                                <a class="dropdown-item" href="javascript:void();">Separated link</a>
                            </div>
                        </div>
                    </div>
                </div>

                <ul class="list-group list-group-flush shadow-none">
                    <li class="list-group-item">
                        <div class="media align-items-center">
                            <img src="/back_assets/assets/images/products/property01.jpg" alt="user avatar"
                                 class="customer-img rounded">
                            <div class="media-body ml-3">
                                <h6 class="mb-0">Lorem ipsum dolor sitamet consectetur adipiscing</h6>
                                <small class="small-font">$810,000 . 04 Beds . 03 Baths</small>
                            </div>
                        </div>
                    </li>
                    <li class="list-group-item">
                        <div class="media align-items-center">
                            <img src="/back_assets/assets/images/products/property02.jpg" alt="user avatar"
                                 class="customer-img rounded">
                            <div class="media-body ml-3">
                                <h6 class="mb-0">Lorem ipsum dolor sitamet consectetur adipiscing</h6>
                                <small class="small-font">$2,560,000 . 08 Beds . 07 Baths</small>
                            </div>
                        </div>
                    </li>
                    <li class="list-group-item">
                        <div class="media align-items-center">
                            <img src="/back_assets/assets/images/products/property03.jpg" alt="user avatar"
                                 class="customer-img rounded">
                            <div class="media-body ml-3">
                                <h6 class="mb-0">Lorem ipsum dolor sitamet consectetur adipiscing</h6>
                                <small class="small-font">$910,300 . 03 Beds . 02 Baths</small>
                            </div>
                        </div>
                    </li>
                    <li class="list-group-item">
                        <div class="media align-items-center">
                            <img src="/back_assets/assets/images/products/property04.jpg" alt="user avatar"
                                 class="customer-img rounded">
                            <div class="media-body ml-3">
                                <h6 class="mb-0">Lorem ipsum dolor sitamet consectetur adipiscing</h6>
                                <small class="small-font">$1,140,650 . 06 Beds . 03 Baths</small>
                            </div>
                        </div>
                    </li>
                    <li class="list-group-item">
                        <div class="media align-items-center">
                            <img src="/back_assets/assets/images/products/property05.jpg" alt="user avatar"
                                 class="customer-img rounded">
                            <div class="media-body ml-3">
                                <h6 class="mb-0">Lorem ipsum dolor sitamet consectetur adipiscing</h6>
                                <small class="small-font">$1,140,650 . 06 Beds . 03 Baths</small>
                            </div>
                        </div>
                    </li>
                    <li class="list-group-item">
                        <div class="media align-items-center">
                            <img src="/back_assets/assets/images/products/property03.jpg" alt="user avatar"
                                 class="customer-img rounded">
                            <div class="media-body ml-3">
                                <h6 class="mb-0">Lorem ipsum dolor sitamet consectetur adipiscing</h6>
                                <small class="small-font">$910,300 . 03 Beds . 02 Baths</small>
                            </div>
                        </div>
                    </li>
                </ul>
                <div class="card-footer text-center bg-transparent border-0">
                    <a href="javascript:void();">View all listings</a>
                </div>

            </div>
        </div>

        <div class="col-lg-6">
            <div class="card">
                <div class="card-header">Listings
                    <div class="card-action">
                        <div class="dropdown">
                            <a href="javascript:void();" class="dropdown-toggle dropdown-toggle-nocaret"
                               data-toggle="dropdown">
                                <i class="icon-options"></i>
                            </a>
                            <div class="dropdown-menu dropdown-menu-right">
                                <a class="dropdown-item" href="javascript:void();">Action</a>
                                <a class="dropdown-item" href="javascript:void();">Another action</a>
                                <a class="dropdown-item" href="javascript:void();">Something else here</a>
                                <div class="dropdown-divider"></div>
                                <a class="dropdown-item" href="javascript:void();">Separated link</a>
                            </div>
                        </div>
                    </div>
                </div>

                <ul class="list-group list-group-flush shadow-none">
                    <li class="list-group-item">
                        <div class="media align-items-center">
                            <img src="/back_assets/assets/images/products/property01.jpg" alt="user avatar"
                                 class="customer-img rounded">
                            <div class="media-body ml-3">
                                <h6 class="mb-0">Lorem ipsum dolor sitamet consectetur adipiscing</h6>
                                <small class="small-font">$810,000 . 04 Beds . 03 Baths</small>
                            </div>
                        </div>
                    </li>
                    <li class="list-group-item">
                        <div class="media align-items-center">
                            <img src="/back_assets/assets/images/products/property02.jpg" alt="user avatar"
                                 class="customer-img rounded">
                            <div class="media-body ml-3">
                                <h6 class="mb-0">Lorem ipsum dolor sitamet consectetur adipiscing</h6>
                                <small class="small-font">$2,560,000 . 08 Beds . 07 Baths</small>
                            </div>
                        </div>
                    </li>
                    <li class="list-group-item">
                        <div class="media align-items-center">
                            <img src="/back_assets/assets/images/products/property03.jpg" alt="user avatar"
                                 class="customer-img rounded">
                            <div class="media-body ml-3">
                                <h6 class="mb-0">Lorem ipsum dolor sitamet consectetur adipiscing</h6>
                                <small class="small-font">$910,300 . 03 Beds . 02 Baths</small>
                            </div>
                        </div>
                    </li>
                    <li class="list-group-item">
                        <div class="media align-items-center">
                            <img src="/back_assets/assets/images/products/property04.jpg" alt="user avatar"
                                 class="customer-img rounded">
                            <div class="media-body ml-3">
                                <h6 class="mb-0">Lorem ipsum dolor sitamet consectetur adipiscing</h6>
                                <small class="small-font">$1,140,650 . 06 Beds . 03 Baths</small>
                            </div>
                        </div>
                    </li>
                    <li class="list-group-item">
                        <div class="media align-items-center">
                            <img src="/back_assets/assets/images/products/property05.jpg" alt="user avatar"
                                 class="customer-img rounded">
                            <div class="media-body ml-3">
                                <h6 class="mb-0">Lorem ipsum dolor sitamet consectetur adipiscing</h6>
                                <small class="small-font">$1,140,650 . 06 Beds . 03 Baths</small>
                            </div>
                        </div>
                    </li>
                    <li class="list-group-item">
                        <div class="media align-items-center">
                            <img src="/back_assets/assets/images/products/property03.jpg" alt="user avatar"
                                 class="customer-img rounded">
                            <div class="media-body ml-3">
                                <h6 class="mb-0">Lorem ipsum dolor sitamet consectetur adipiscing</h6>
                                <small class="small-font">$910,300 . 03 Beds . 02 Baths</small>
                            </div>
                        </div>
                    </li>
                </ul>
                <div class="card-footer text-center bg-transparent border-0">
                    <a href="javascript:void();">View all listings</a>
                </div>

            </div>
        </div>
    </div><!--End Row-->
@endsection
@section('pageSpecificScripts')
    <script src="{{ asset('back_assets/assets/plugins/Chart.js/Chart.min.js')}}"></script>
    <script src="{{ asset('back_assets/assets/js/index2.js')}}"></script>
@endsection