@extends('backend.layouts.main')
@section('title', 'Dashboard')
@section('main-container')


    <div class="pcoded-content">
        <div class="pcoded-inner-content">
            <div class="main-body">
                <div class="page-wrapper">

                    <div class="page-body">
                        <div class="row">
                            <!-- task, page, download counter  start -->
                            @can('manage users')


                                <div class="col-xl-3 col-md-6">
                                    <div class="card bg-c-yellow update-card">
                                        <div class="card-block">
                                            <div class="row align-items-end">
                                                <div class="col-9">

                                                    <h4 class="text-white">12</h4>

                                                    <h6 class="text-white m-b-0">Users</h6>
                                                </div>
                                                <div class="col-3 text-right">
                                                    <i class="fa fa-users font-2"></i>
                                                    <canvas id="update-chart-1" height="50" class="d-none"></canvas>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="card-footer">
                                            <a href="{{ route('users.index') }}" class="text-white"> View </a>
                                        </div>
                                    </div>
                                </div>
                            @endcan

                            <div class="col-xl-3 col-md-6">
                                <div class="card">
                                    <div class="card-block">
                                        <div class="row align-items-center">
                                            <div class="col-8">
                                                <h4 class="text-c-yellow f-w-600">$30200</h4>
                                                <h6 class="text-muted m-b-0">All Earnings</h6>
                                            </div>
                                            <div class="col-4 text-right">
                                                <i class="feather icon-bar-chart f-28"></i>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="card-footer bg-c-yellow">
                                        <div class="row align-items-center">
                                            <div class="col-9">
                                                <p class="text-white m-b-0">% change</p>
                                            </div>
                                            <div class="col-3 text-right">
                                                <i class="feather icon-trending-up text-white f-16"></i>
                                            </div>
                                        </div>

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


                            <div class="col-xl-3 col-md-6">
                                <div class="card">
                                    <div class="card-block">
                                        <div class="row align-items-center">
                                            <div class="col-8">
                                                <h4 class="text-c-green f-w-600">290+</h4>
                                                <h6 class="text-muted m-b-0">Page Views</h6>
                                            </div>
                                            <div class="col-4 text-right">
                                                <i class="feather icon-file-text f-28"></i>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="card-footer bg-c-green">
                                        <div class="row align-items-center">
                                            <div class="col-9">
                                                <p class="text-white m-b-0">% change</p>
                                            </div>
                                            <div class="col-3 text-right">
                                                <i class="feather icon-trending-up text-white f-16"></i>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="col-xl-3 col-md-6">
                                <div class="card">
                                    <div class="card-block">
                                        <div class="row align-items-center">
                                            <div class="col-8">
                                                <h4 class="text-c-pink f-w-600">145</h4>
                                                <h6 class="text-muted m-b-0">Task Completed</h6>
                                            </div>
                                            <div class="col-4 text-right">
                                                <i class="feather icon-calendar f-28"></i>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="card-footer bg-c-pink">
                                        <div class="row align-items-center">
                                            <div class="col-9">
                                                <p class="text-white m-b-0">% change</p>
                                            </div>
                                            <div class="col-3 text-right">
                                                <i class="feather icon-trending-up text-white f-16"></i>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>


                            <div class="col-xl-3 col-md-6">
                                <div class="card">
                                    <div class="card-block">
                                        <div class="row align-items-center">
                                            <div class="col-8">
                                                <h4 class="text-c-blue f-w-600">500</h4>
                                                <h6 class="text-muted m-b-0">Downloads</h6>
                                            </div>
                                            <div class="col-4 text-right">
                                                <i class="feather icon-download f-28"></i>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="card-footer bg-c-blue">
                                        <div class="row align-items-center">
                                            <div class="col-9">
                                                <p class="text-white m-b-0">% change</p>
                                            </div>
                                            <div class="col-3 text-right">
                                                <i class="feather icon-trending-up text-white f-16"></i>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <!-- task, page, download counter  end -->

                            <!--  booking table start-->

                            <div class="col-xl-9 col-md-12">
                                <div class="card table-card">
                                    <div class="card-header">
                                        <h5>Latest Bookings</h5>
                                        <div class="card-header-right">
                                            <ul class="list-unstyled card-option">
                                                <li><i class="feather icon-maximize full-card"></i></li>
                                                <li><i class="feather icon-minus minimize-card"></i></li>
                                                <li><i class="feather icon-trash-2 close-card"></i></li>
                                            </ul>
                                        </div>
                                    </div>
                                    <div class="card-block">
                                        <div class="table-responsive">
                                            <table class="table table-hover  table-borderless">
                                                <thead>
                                                    <tr>
                                                        <th>Details</th>
                                                        <th>Ref-Id</th>
                                                        <th>Booking Status</th>
                                                        <th>Booking Type</th>
                                                        <th>Price</th>
                                                    </tr>
                                                </thead>
                                                <tbody>


                                                </tbody>
                                            </table>


                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!--  booking table end -->

                            <div class="col-xl-3 col-md-12">
                                <div class="card user-card2">
                                    <div class="card-block text-center">
                                        <h6 class="m-b-15">Total Bookings</h6>
                                        <div class="risk-rate">
                                            <span><b></b></span>
                                        </div>
                                        <h6 class="m-b-10 m-t-10"></h6>
                                        <a href="{{route('/booking-list')}}" class="text-c-yellow b-b-warning">View</a>
                                        <div class="row justify-content-center m-t-10 b-t-default m-l-0 m-r-0">
                                            <div class="col m-t-15 b-r-default">
                                                <h6 class="text-muted">Last On</h6>
                                                <h6>

                                                </h6>
                                            </div>
                                            <div class="col m-t-15">
                                                <h6 class="text-muted">Ref-Id</h6>
                                                <h6>

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

                                </div>
                            </div>
                            <!--  sale analytics end -->



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


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

@endsection