@extends('demand.layouts.main')

@section('content')

@push('css')
<link rel="stylesheet" type="text/css" href="{{ asset('app-assets/vendors/css/charts/apexcharts.css') }}">
@endpush

    <!-- Scroll - horizontal and vertical table -->
{{--    <h5><b>Dashboard</b></h5> <br />--}}
    <section id="horizontal-vertical">
        <div class="content-body">
            <div class="row">
                <div class="col-md-6">
                    @role('admin')
                    <label for="">Select Shop</label>
                    <select name="" id="filterByType" onchange="filterOrder('{{env('APP_URL')}}')" class="form-control select2">
                            <option value="all" {{request()->type == null  ? 'selected' : ''}}>All</option>
                        @forelse($shops as $shop)
                            <option value="{{$shop->id}}" {{request()->shop == $shop->id  ? 'selected' : ''}}>{{$shop->name}}</option>
                        @empty
                        @endforelse
                    </select>

                    @endrole
                </div>
                @push('scripts')
                    <script>
                        function filterOrder(url){
                            var month = $("#selectMonth").val();
                            var shop = $("#filterByType").val();
                            var year = $("#selectYear").val();
                            window.location.href = url+'demand/dashboard/'+shop+'/'+year+'/'+month;
                        }
                    </script>
                @endpush
            </div>
            <div class="row">
                <div class="col-md-3">
                    <div class="card border text-center my-1">
                        <div class="card-body p-1">
                        <p class="text-muted">Total Bookings Completed <br> <b>{{ $completed }}</b></p>
                        </div>
                      </div>
                </div>
                <div class="col-md-3">
                    <div class="card border text-center my-1">
                        <div class="card-body p-1">
                        <p class="text-muted">Total Earnings <br> <b>{{ $tot_earnings }} ₹</b></p>
                        </div>
                      </div>
                </div>
                <div class="col-md-3">
                    <div class="card border text-center my-1">
                        <div class="card-body p-1">
                        <p class="text-muted">Total Bookings Pending <br> <b>{{ $pending }}</b></p>
                        </div>
                      </div>
                </div>
                <div class="col-md-3">
                    <div class="card border text-center my-1">
                        <div class="card-body p-1">
                        <p class="text-muted"> {{ config('app.name') }} Customers <br> <b>{{ $users }}</b></p>
                        </div>
                      </div>
                </div>
                <!-- Column Chart -->
                <div class="col-lg-12 col-md-12 pt-5" id="monthlyChart">
                    <div class="card">
                        <div class="card-header">
                            <div class="d-flex w-100 justify-content-between">
                                <h4 class="card-title">Monthly Chart</h4>
                                <div class="form-group w-25">
                                    <label for="exampleFormControlSelect1">Select Year:</label>