@extends('layouts.app')
@section('admin_title')
    {{ __('Dashboard') }}
@endsection
{{-- @dd("here") --}}
@section('content')

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

    @if (
        (auth()->user()->hasRole('admin') && config('app.isft')) ||
            (auth()->user()->hasRole('owner') && in_array('drivers', config('global.modules', []))))
        <div class="container-fluid mt--7 mb-8">
            <div class="row">
                <div class="col-xl-12">
                    @include('drivers.map')
                </div>
            </div>
        </div>
    @endif
@php
    use Carbon\Carbon;

    $currentYearMonth = now()->format('Y-m'); // Example: "2025-02"

    // Convert sales data into a Laravel collection
    $filteredSalesValue = collect($salesValueRaw)
    ->filter(function ($item) use ($currentYearMonth) {
            
    $monthYear = now()->year . '-' . str_pad($item['month'], 2, '0', STR_PAD_LEFT);
    return $monthYear === $currentYearMonth;
    })
    ->values(); // Reindex the array

    $monthLabels = collect($salesValueRaw)->map(function ($item) {
    return Carbon::createFromFormat('m', $item['month'])->format('F');
})->unique()->values();
    
                                @endphp
                                
    @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($filteredSalesValue);
    var monthLabels = @json($monthLabels);

    var totalOrders = [];
    var salesValues = [];
    var costValues = [];

    for (const key in salesValue) {
        totalOrders.push(salesValue[key].totalPerMonth);
        salesValues.push(salesValue[key].sumValue);
    }
</script>

                        <div class="card-body">
                            <!-- Chart -->
                            @if (count($filteredSalesValue) > 0)
                                <div class="chart">
                                    <!-- Chart wrapper -->
                                    <canvas id="chart-sales" class="chart-canvas"></canvas>
                                </div>
                            @else
                                <p class="text-white">{{ __('No sales this month!') }}</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($filteredSalesValue) > 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">{{ __('Orders') }} ( 30
                                            {{ __('days') }} )</h6>
                                        <h2 class="mb-0">{{ __('By category') }}</h2>
                                    </div>
                                </div>
                            </div>
                            <div class="card-body">
                                <!-- Chart -->
                                @if (count($filteredSalesValue) > 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">{{ __('Orders') }} ( 30
                                            {{ __('days') }} )</h6>
                                        <h2 class="mb-0">{{ __('By Food') }}</h2>
                                    </div>
                                </div>
                            </div>
                            <div class="card-body">
                                <!-- Chart -->
                                @if (count($filteredSalesValue) > 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') && config('app.isft')) ||
            (auth()->user()->hasRole('owner') && in_array('drivers', config('global.modules', []))))
        <!-- 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=