@extends('admin.layouts.main')

@section('content')
<div class="page-wrapper">
    <!-- ============================================================== -->
    <!-- Container fluid  -->
    <!-- ============================================================== -->
    <div class="container-fluid">
        <!-- ============================================================== -->
        <!-- Bread crumb and right sidebar toggle -->
        <!-- ============================================================== -->
        <div class="row page-titles">
            <div class="col-md-5 align-self-center">
                <h4 class="text-themecolor font-bold">Dashboard</h4>
            </div>
        </div>

        @include('admin.includes.alert')
        <!-- ============================================================== -->
        <!-- End Bread crumb and right sidebar toggle -->
        <!-- ============================================================== -->
        <!-- ============================================================== -->
        <!-- Info box Content -->
        <!-- ============================================================== -->

        @if( @auth()->user()->account->status === 0 )
        <div class="alert alert-danger">
            <i class="ti-info-alt mr-2"></i> In order to receive payments, please configure your account.
            <a href="{{ url('/accounts') }}">Click here</a>
        </div>
        @endif

        <div class="row">
            @if( @$stats['revenue'] )
            <div class="col-lg-3 col-md-6">
                    <div class="card">
                        <div class="card-body">
                            <h4 class="card-title">REVENUE</h4>
                            <div class="text-right"> <span class="text-muted">Total</span>
                                <h1 class="font-light">{{ $stats['revenue']['all'] }}</h1>
                            </div>
                            <div class="d-flex">
                                <span class="flex text-muted">Current Month</span>
                                <span class="ml-auto">{{ $stats['revenue']['recent'] }}</span>
                            </div>
                        </div>
                    </div>
            </div>
            @endif
            
            <div class="col-lg-3 col-md-6">
                <a href="{{ url('/bookings') }}">
                    <div class="card">
                        <div class="card-body">
                            <h4 class="card-title">BOOKINGS</h4>
                            <div class="text-right"> <span class="text-muted">Total Booking</span>
                                <h1 class="font-light">Total</h1>
                            </div>
                            <div class="d-flex">
                                <span class="flex text-muted">Pending</span>
                                <span class="ml-auto">booking</span>
                            </div>
                        </div>
                    </div>
                </a>
            </div>

            <div class="col-lg-3 col-md-6">
                <a href="{{ url('/services') }}">
                    <div class="card">
                        <div class="card-body">
                            <h4 class="card-title">SERVICE PROVIDERS</h4>
                            <div class="text-right"> <span class="text-muted">Total</span>
                                <h1 class="font-light">service</h1>
                            </div>
                            <div class="d-flex">
                                <span class="flex text-muted">Pending</span>
                                <span class="ml-auto">0</span>
                            </div>
                        </div>
                    </div>
                </a>
            </div>

            <div class="col-lg-3 col-md-6">
                <a href="{{ url('/invoices') }}">
                    <div class="card">
                        <div class="card-body">
                            <h4 class="card-title">INVOICES</h4>
                            <div class="text-right"> <span class="text-muted">Total</span>
                                <h1 class="font-light">Invoice</h1>
                            </div>
                            <div class="d-flex">
                                <span class="flex text-muted">Pending</span>
                                <span class="ml-auto">0</span>
                            </div>
                        </div>
                    </div>
                </a>
            </div>

            <div class="col-lg-3 col-md-6">
                <a href="{{ url('/users') }}">
                    <div class="card">
                        <div class="card-body">
                            <h4 class="card-title">USERS</h4>
                            <div class="text-right"> <span class="text-muted">Total</span>
                                <h1 class="font-light">user</h1>
                            </div>
                            <div class="d-flex">
                                <span class="flex text-muted">Pending</span>
                                <span class="ml-auto">0</span>
                            </div>
                        </div>
                    </div>
                </a>
            </div>

        </div>
        <!-- ============================================================== -->
        <!-- charts -->
        <!-- ============================================================== -->
        <div class="row">
            <!-- Column -->
            <div class="col-lg-12 col-md-12">
                <div class="card">
                    <div class="card-body">
                        <div class="d-flex m-b-40 align-items-center no-block">
                            <h5 class="card-title ">TRANSACTIONS</h5>
                            <div class="ml-auto">
                                <ul class="list-inline font-12">
                                    <li><i class="fa fa-circle text-cyan"></i> Complete</li>
                                    <li><i class="fa fa-circle text-danger"></i> Refund</li>
                                </ul>
                            </div>
                        </div>
                        <div id="morris-area-chart2" style="height: 300px;"></div>
                    </div>
                </div>
            </div>

        </div>
        <!-- ============================================================== -->
        <!-- charts -->
        <!-- ============================================================== -->
        <div class="row">
                    <!-- Column -->
                    <div class="col-lg-4">
                        <div class="card">
                            <div class="card-body">
                                <h5 class="card-title m-b-0">WEATHER</h5>
                            </div>
                            <div class="card-body bg-light">
                                <div class="d-flex no-block align-items-center">
                                    <span><h2 class="">Monday</h2><small>7th May 2017</small></span>
                                    <div class="ml-auto">
                                        <canvas class="sleet" width="44" height="44"></canvas> <span class="display-6">32<sup>°F</sup></span> </div>
                                </div>
                            </div>
                            <div class="card-body">
                                <div class="row pb-1">
                                    <div class="col-md-6">
                                        <div class="row">
                                            <div class="col-6 py-2">
                                                <span>Wind</span>
                                            </div>
                                            <div class="col-6 py-2 text-truncate">
                                                <span class="font-medium">ESE 17 mph</span>
                                            </div>
                                        </div>
                                        <div class="row">
                                            <div class="col-6 py-2">
                                                <span>Humidity</span>
                                            </div>
                                            <div class="col-6 py-2">
                                                <span class="font-medium">83%</span>
                                            </div>
                                        </div>
                                        <div class="row">
                                            <div class="col-6 py-2">
                                                <span>Pressure</span>
                                            </div>
                                            <div class="col-6 py-2">
                                                <span class="font-medium">28.56 in</span>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="row">
                                            <div class="col-6 py-2 text-truncate">
                                                <span>Cloud Cover</span>
                                            </div>
                                            <div class="col-6 py-2">
                                                <span class="font-medium">78%</span>
                                            </div>
                                        </div>
                                        <div class="row">
                                            <div class="col-6 py-2">
                                                <span>Ceiling</span>
                                            </div>
                                            <div class="col-6 py-2">
                                                <span class="font-medium">25760 ft</span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="row mt-4 pt-3">
                                    <!-- Column -->
                                    <div class="col-lg-2 col-md-4 col-4 text-center">
                                        <h5>Tue</h5>
                                        <div class="m-t-10 m-b-10">
                                            <canvas class="sleet" width="30" height="30"></canvas>
                                        </div>
                                        <h5>32<sup>°F</sup></h5>
                                    </div>
                                    <!-- Column -->
                                    <div class="col-lg-2 col-md-4 col-4 text-center">
                                        <h5 class="text-nowrap">Wed</h5>
                                        <div class="m-t-10 m-b-10">
                                            <canvas class="clear-day" width="30" height="30"></canvas>
                                        </div>
                                        <h5>34<sup>°F</sup></h5>
                                    </div>
                                    <!-- Column -->
                                    <div class="col-lg-2 col-md-4 col-4 text-center">
                                        <h5>Thu</h5>
                                        <div class="m-t-10 m-b-10">
                                            <canvas class="partly-cloudy-day" width="30" height="30"></canvas>
                                        </div>
                                        <h5>31<sup>°F</sup></h5>
                                    </div>
                                    <!-- Column -->
                                    <div class="col-lg-2 col-md-4 col-4 text-center">
                                        <h5>Fri</h5>
                                        <div class="m-t-10 m-b-10">
                                            <canvas class="cloudy" width="30" height="30"></canvas>
                                        </div>
                                        <h5>32<sup>°F</sup></h5>
                                    </div>
                                    <!-- Column -->
                                    <div class="col-lg-2 col-md-4 col-4 text-center">
                                        <h5>Sat</h5>
                                        <div class="m-t-10 m-b-10">
                                            <canvas class="snow" width="30" height="30"></canvas>
                                        </div>
                                        <h5>12<sup>°F</sup></h5>
                                    </div>
                                    <!-- Column -->
                                    <div class="col-lg-2 col-md-4 col-4 text-center">
                                        <h5>Sun</h5>
                                        <div class="m-t-10 m-b-10">
                                            <canvas class="wind" width="30" height="30"></canvas>
                                        </div>
                                        <h5>32<sup>°F</sup></h5>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- Column -->
                    <div class="col-lg-4">
                        <div class="card">
                            <div class="card-body">
                                <h5 class="card-title">USER ACTIVITY</h5>
                                <div class="steamline m-t-40">
                                    <div class="sl-item">
                                        <div class="sl-left bg-success"> <i class="ti-user"></i></div>
                                        <div class="sl-right">
                                            <div class="font-medium">Meeting today <span class="sl-date"> 5pm</span></div>
                                            <div class="desc">you can write anything </div>
                                        </div>
                                    </div>
                                    <div class="sl-item">
                                        <div class="sl-left bg-info"><i class="fa fa-image"></i></div>
                                        <div class="sl-right">
                                            <div class="font-medium">Send documents to Clark</div>
                                            <div class="desc">Lorem Ipsum is simply </div>
                                        </div>
                                    </div>
                                    <div class="sl-item">
                                        <div class="sl-left"> <img class="img-circle" alt="user" src="../assets/images/users/2.jpg"> </div>
                                        <div class="sl-right">
                                            <div class="font-medium">Go to the Doctor <span class="sl-date">5 minutes ago</span></div>
                                            <div class="desc">Contrary to popular belief</div>
                                        </div>
                                    </div>
                                    <div class="sl-item mb-0">
                                        <div class="sl-left"> <img class="img-circle" alt="user" src="../assets/images/users/3.jpg"> </div>
                                        <div class="sl-right">
                                            <div><a href="javascript:void(0)">Tiger Sroff</a> <span class="sl-date">5 minutes ago</span></div>
                                            <div class="desc">Approve meeting with tiger
                                                <br><a href="javascript:void(0)" class="btn m-t-10 m-r-5 btn-rounded btn-outline-success">Apporve</a> <a href="javascript:void(0)" class="btn m-t-10 btn-rounded btn-outline-danger">Refuse</a> </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- Column -->
                    <div class="col-lg-4">
                        <div class="card">
                            <div class="card-body">
                                <h5 class="card-title">FEEDS</h5>
                                <ul class="feeds mt-3">
                                    <li>
                                        <div class="bg-info"><i class="far fa-bell"></i></div> You have 4 pending tasks. <span class="text-muted ml-auto">Just Now</span></li>
                                    <li>
                                        <div class="bg-success"><i class="ti-server"></i></div> Server #1 overloaded.<span class="text-muted ml-auto">2 Hours ago</span></li>
                                    <li>
                                        <div class="bg-warning"><i class="ti-shopping-cart"></i></div> New order received.<span class="text-muted ml-auto">31 May</span></li>
                                    <li>
                                        <div class="bg-danger"><i class="ti-user"></i></div> New user registered.<span class="text-muted ml-auto">30 May</span></li>
                                    <li>
                                        <div class="bg-dark"><i class="far fa-bell"></i></div> New Version just arrived. <span class="text-muted ml-auto">27 May</span></li>
                                    <li>
                                        <div class="bg-info"><i class="far fa-bell"></i></div> You have 4 pending tasks. <span class="text-muted ml-auto">Just Now</span></li>
                                    <li class="py-1">
                                        <div class="bg-danger"><i class="ti-user"></i></div> New user registered.<span class="text-muted ml-auto">30 May</span>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
        <!-- <div class="row">
            <div class="col-sm-6">
                <div class="card">
                    <div class="card-body">
                        <h5 class="card-title">Recent Users</h5>
                        <div class="message-box" style="height: 380px;position: relative;">
                            <div class="message-widget">
                            
                                <a href="javascript:void(0)">
                                    <div class="user-img">
                                        <img src="{{ $user->profile_image_url ?? url('assets/images/logo_icon.png') }}" alt="user" class="img-circle" width='45' height='45'>
                                    </div>
                                    <div class="mail-contnet">
                                        <h5> username</h5> 
                                        <span class="mail-desc">UserType</span> 
                                    </div>
                                </a>
                            
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-sm-6">
                <div class="card">
                    <div class="card-body">
                        <h5 class="card-title">Recent Bookings</h5>
                        <div class="message-box" style="height: 380px;position: relative;">
                            <div class="message-widget">
                            
                                <a href="{{ url('jobs') }}">
                                    <div class="mail-contnet">
                                        <h6>servicename</h6> 
                                        <small class="time">status</small> 
                                    </div>
                                </a>
                            
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div> -->
        <!-- ============================================================== -->
        <!-- End PAge Content -->
        <!-- ============================================================== -->
        <!-- ============================================================== -->
        <!-- Right sidebar -->
        <!-- ============================================================== -->
        <!-- .right-sidebar -->
        <div class="right-sidebar">
            <div class="slimscrollright">
                <div class="rpanel-title"> Service Panel <span><i class="ti-close right-side-toggle"></i></span> </div>
                <div class="r-panel-body">
                    <ul id="themecolors" class="m-t-20">
                        <li><b>With Light sidebar</b></li>
                        <li><a href="javascript:void(0)" data-skin="skin-default" class="default-theme working">1</a></li>
                        <li><a href="javascript:void(0)" data-skin="skin-green" class="green-theme">2</a></li>
                        <li><a href="javascript:void(0)" data-skin="skin-red" class="red-theme">3</a></li>
                        <li><a href="javascript:void(0)" data-skin="skin-blue" class="blue-theme">4</a></li>
                        <li><a href="javascript:void(0)" data-skin="skin-purple" class="purple-theme">5</a></li>
                        <li><a href="javascript:void(0)" data-skin="skin-megna" class="megna-theme">6</a></li>
                        <li class="d-block m-t-30"><b>With Dark sidebar</b></li>
                        <li><a href="javascript:void(0)" data-skin="skin-default-dark" class="default-dark-theme ">7</a></li>
                        <li><a href="javascript:void(0)" data-skin="skin-green-dark" class="green-dark-theme">8</a></li>
                        <li><a href="javascript:void(0)" data-skin="skin-red-dark" class="red-dark-theme">9</a></li>
                        <li><a href="javascript:void(0)" data-skin="skin-blue-dark" class="blue-dark-theme">10</a></li>
                        <li><a href="javascript:void(0)" data-skin="skin-purple-dark" class="purple-dark-theme">11</a></li>
                        <li><a href="javascript:void(0)" data-skin="skin-megna-dark" class="megna-dark-theme ">12</a></li>
                    </ul>
                    <ul class="m-t-20 chatonline">
                        <li><b>Chat option</b></li>
                        <li>
                            <a href="javascript:void(0)"><img src="../assets/images/users/1.jpg" alt="user-img" class="img-circle"> <span>Varun Dhavan <small class="text-success">online</small></span></a>
                        </li>
                        <li>
                            <a href="javascript:void(0)"><img src="../assets/images/users/2.jpg" alt="user-img" class="img-circle"> <span>Genelia Deshmukh <small class="text-warning">Away</small></span></a>
                        </li>
                        <li>
                            <a href="javascript:void(0)"><img src="../assets/images/users/3.jpg" alt="user-img" class="img-circle"> <span>Ritesh Deshmukh <small class="text-danger">Busy</small></span></a>
                        </li>
                        <li>
                            <a href="javascript:void(0)"><img src="../assets/images/users/4.jpg" alt="user-img" class="img-circle"> <span>Arijit Sinh <small class="text-muted">Offline</small></span></a>
                        </li>
                        <li>
                            <a href="javascript:void(0)"><img src="../assets/images/users/5.jpg" alt="user-img" class="img-circle"> <span>Govinda Star <small class="text-success">online</small></span></a>
                        </li>
                        <li>
                            <a href="javascript:void(0)"><img src="../assets/images/users/6.jpg" alt="user-img" class="img-circle"> <span>John Abraham<small class="text-success">online</small></span></a>
                        </li>
                        <li>
                            <a href="javascript:void(0)"><img src="../assets/images/users/7.jpg" alt="user-img" class="img-circle"> <span>Hritik Roshan<small class="text-success">online</small></span></a>
                        </li>
                        <li>
                            <a href="javascript:void(0)"><img src="../assets/images/users/8.jpg" alt="user-img" class="img-circle"> <span>Pwandeep rajan <small class="text-success">online</small></span></a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        <!-- ============================================================== -->
        <!-- End Right sidebar -->
        <!-- ============================================================== -->
    </div>
    <!-- ============================================================== -->
    <!-- End Container fluid  -->
    <!-- ============================================================== -->
</div>

@endsection

@push('script')
<script>
    Morris.Area({
        element: 'morris-area-chart2',
       
        xkey: 'key',
        ykeys: ['completed', 'refunded'],
        labels: ['Completed', 'Refunded'],
        lineColors: ['#17bf9b', '#e46a76'],
        pointSize: 0,
        lineWidth: 0,
        resize: true,
        fillOpacity: 0.8,
        behaveLikeLine: true,
        gridLineColor: '#e0e0e0',
        hideHover: 'auto'
    });
</script>
@endpush