@extends('layouts.app')
@section('admin_title')
    {{__('Dashboard')}}
@endsection

@section('content')
    @if(!auth()->user()->hasRole('driver'))
        @include('layouts.headers.cards.general')
    @else
        @include('layouts.headers.cards.driver')
    @endif

    @if(auth()->user()->hasRole('admin'))
        @if (config('app.isft'))
        <div class="container-fluid mt--7 mb-8">
            <div class="row">
                <div class="col-xl-12">
                    @include('drivers.map')
                </div>
            </div>
        </div>  
        @endif
    @endif

    @if(!auth()->user()->hasRole('driver'))
    <div class="container-fluid mt--7">
        <div class="row">
            <div class="col-xl-8 mb-5 mb-xl-0">
                <div class="card bg-gradient-default shadow">
                    <div class="card-header bg-transparent">
                        <div class="row align-items-center">
                            <div class="col">
                                <h6 class="text-uppercase text-light ls-1 mb-1">{{ __('Overview') }}</h6>
                                <h2 class="text-white mb-0">{{ __('Sales value') }}</h2>
                            </div>

                        </div>
                    </div>
                    <script>
                        var salesValue= @json($salesValue);
                        var monthLabels = @json($monthLabels);
                        
                        totalOrders=[];
                        salesValues=[];
                        costValues=[];
                        for (const key in salesValue) {

                            totalOrders.push(salesValue[key].totalPerMonth);
                            salesValues.push(salesValue[key].sumValue);
                            if(salesValue[key].costValue){
                                costValues.push(salesValue[key].costValue);
                            }else{
                                costValues.push(0);
                            }
                            }
                        
                        
                        
                    </script>

                    <div class="card-body">
                        <!-- Chart -->
                        @if(count($salesValue)>0)
                            <div class="chart">
                                <!-- Chart wrapper -->
                                <canvas id="chart-sales" class="chart-canvas"></canvas>
                            </div>
                        @else
                            <p class="text-white">{{ __('No sales right now!') }}</p>
                        @endif
                    </div>
                </div>
            </div>
            <div class="col-xl-4">
                <div class="card shadow">
                    <div class="card-header bg-transparent">
                        <div class="row align-items-center">
                            <div class="col">
                                <h6 class="text-uppercase text-muted ls-1 mb-1">{{ __('Performance') }}</h6>
                                <h2 class="mb-0">{{ __('Total orders') }}</h2>
                            </div>
                        </div>
                    </div>
                    <div class="card-body">
                        <!-- Chart -->
                        @if(count($salesValue)>0)
                            <div class="chart">
                                <canvas id="chart-orders" class="chart-canvas"></canvas>
                            </div>
                        @else
                            <p>{{ __('No orders right now!') }}</p>
                        @endif
                    </div>
                </div>
            </div>
        </div>
        @if ($doWeHaveExpensesApp)
        <script>
           
            var categoriesLabels = {!! json_encode($expenses['last30daysCostPerGroupLabels']) !!};
            var categoriesValues = {!! json_encode($expenses['last30daysCostPerGroupValues']) !!};

            var vendorsLabels = {!! json_encode($expenses['last30daysCostPerVendorLabels']) !!};
            var vendorsValues = {!! json_encode($expenses['last30daysCostPerVendorValues']) !!};
            
        </script>
        <div class="row mt-5">
            <div class="col-xl-6">
                <div class="card shadow">
                    <div class="card-header bg-transparent">
                        <div class="row align-items-center">
                            <div class="col">
                                <h6 class="text-uppercase text-muted ls-1 mb-1">{{ __('Expenses') }} ( 30 {{ __('days') }} )</h6>
                                <h2 class="mb-0">{{ __('By category') }}</h2>
                            </div>
                        </div>
                    </div>
                    <div class="card-body">
                        <!-- Chart -->
                        @if(count($salesValue)>0)
                            <div class="chart">
                                <canvas id="chart-bycategory" class="chart-canvas"></canvas>
                            </div>
                        @else
                            <p>{{ __('No expenses right now!') }}</p>
                        @endif
                    </div>
                </div>
            </div>
            <div class="col-xl-6">
                <div class="card shadow">
                    <div class="card-header bg-transparent">
                        <div class="row align-items-center">
                            <div class="col">
                                <h6 class="text-uppercase text-muted ls-1 mb-1">{{ __('Expenses') }} ( 30 {{ __('days') }} )</h6>
                                <h2 class="mb-0">{{ __('By vendor') }}</h2>
                            </div>
                        </div>
                    </div>
                    <div class="card-body">
                        <!-- Chart -->
                        @if(count($salesValue)>0)
                            <div class="chart">
                                <canvas id="chart-byvendor" class="chart-canvas"></canvas>
                            </div>
                        @else
                            <p>{{ __('No expenses right now!') }}</p>
                        @endif
                    </div>
                </div>
            </div>

        </div>
        @endif

        @if(auth()->user()->hasRole('owner')&&config('settings.enable_pricing'))
            <br /><br />
            @include("plans.info",['planAttribute'=> auth()->user()->restorant->getPlanAttribute(),'showLinkToPlans'=>true])
        @endif
        
        @include('layouts.footers.auth')
    </div>
    @endif
@endsection
@section('topjs')
    <script src="{{ asset('argon') }}/vendor/chart.js/dist/Chart.min.js"></script>
    <script src="{{ asset('argon') }}/vendor/chart.js/dist/Chart.extension.js"></script>
@endsection
@push('js')
  

      

    @if(auth()->user()->hasRole('admin'))
    @if (config('app.isft'))

    <!-- Live orders -->
    <script src="{{ asset('custom') }}/js/liveorders.js"></script>

    <!-- Google Map -->
    <script async defer src= "https://maps.googleapis.com/maps/api/js?libraries=geometry,drawing&callback=initDriverMap&key=