@extends('admin.layout.master')
@section('title', __('admin.dashboard'))
@section('styles')
    <link rel="stylesheet" href="{{ asset('admin') }}/assets/vendor/libs/apex-charts/apex-charts.css" />


@endsection
@section('scripts')
    <script src="{{ asset('admin') }}/assets/vendor/libs/chartjs/chartjs.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>

    // order chart
    <script>
        let orderData = @json($orderAnalysis);
        let orderChartEl = document.querySelector('#orderChart');
        donutChartConfig = {
            chart: {
                height: 350,
                type: 'donut'
            },
            labels: [
                "{{ __('admin.cancel') }}",
                "{{ __('admin.rejected') }}",
                "{{ __('admin.pending') }}",
                "{{ __('admin.currently') }}",
                "{{ __('admin.completed') }}"
            ],
            series: [
                orderData.cancel || 0,
                orderData.rejected || 0,
                orderData.pending || 0,
                orderData.currently || 0,
                orderData.completed || 0
            ],
            colors: [
                '#c0392b',
                '#e74c3c',
                '#e67e22',
                '#1abc9c',
                '#2ecc71'
            ],
            plotOptions: {
                pie: {
                    donut: {
                        labels: {
                            show: true,
                            name: {
                                fontSize: '24px',
                            },
                            value: {
                                fontSize: '24px',
                            },
                            total: {
                                show: true,
                                label: "{{ __('admin.total') }}",
                                fontSize: '24px',
                            }
                        }
                    }
                }
            }

        };
        if (typeof orderChartEl !== undefined && orderChartEl !== null) {
            const donutChart = new ApexCharts(orderChartEl, donutChartConfig);
            donutChart.render();
        }
    </script>

    <script>
        let reservationAnalysis = @json($reservationAnalysis);
        let reservationChartEl = document.querySelector('#reservationChart');
        reservationChartConfig = {
            chart: {
                height: 350,
                type: 'donut'
            },
            labels: [
                "{{ __('admin.rejected') }}",
                "{{ __('admin.pending') }}",
                "{{ __('admin.accepted') }}",
                "{{ __('admin.finished') }}"
            ],
            series: [
                reservationAnalysis.rejected || 0,
                reservationAnalysis.pending || 0,
                reservationAnalysis.accepted || 0,
                reservationAnalysis.finished || 0,
            ],
            colors: [
                '#c0392b',
                '#e67e22',
                '#1abc9c',
                '#2ecc71',
            ],
            plotOptions: {
                pie: {
                    donut: {
                        labels: {
                            show: true,
                            name: {
                                fontSize: '24px',
                            },
                            value: {
                                fontSize: '24px',
                            },
                            total: {
                                show: true,
                                label: "{{ __('admin.total') }}",
                                fontSize: '24px',
                            }
                        }
                    }
                }
            }

        };
        if (typeof reservationChartEl !== undefined && reservationChartEl !== null) {
            const reservationDonutChart = new ApexCharts(reservationChartEl, reservationChartConfig);
            reservationDonutChart.render();
        }
    </script>


@endsection
@section('content')

    <div class="container-xxl flex-grow-1 container-p-y">
        <div class="row g-6">
            <!-- Statistics -->
            <div class="col-xl-12 col-md-12">
                <div class="card h-100">
                    <div class="card-header d-flex justify-content-between">
                        <h5 class="mb-0 card-title">{{ __('admin.statistics') }}</h5>
                        <small class="text-muted"></small>
                    </div>
                    <div class="card-body d-flex align-items-end">
                        <div class="w-100">
                            <div class="row gy-3">
                                <div class="col-md-2 col-6">
                                    <div class="d-flex align-items-center">
                                        <div class="p-2 rounded badge bg-label-primary me-4">
                                            <i class="ti ti-chart-pie-2 ti-lg"></i>
                                        </div>
                                        <div class="card-info">
                                            <h5 class="mb-0">{{ $providerByMainCategory->count() }}</h5>
                                            <small>{{ __('admin.total_main_category') }}</small>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-2 col-6">
                                    <div class="d-flex align-items-center">
                                        <div class="p-2 rounded badge bg-label-primary me-4">
                                            <i class="ti ti-chart-pie-2 ti-lg"></i>
                                        </div>
                                        <div class="card-info">
                                            <h5 class="mb-0">{{ $orderAnalysis['total'] }}</h5>
                                            <small>{{ __('admin.total_order') }}</small>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-2 col-6">
                                    <div class="d-flex align-items-center">
                                        <div class="p-2 rounded badge bg-label-primary me-4">
                                            <i class="ti ti-chart-pie-2 ti-lg"></i>
                                        </div>
                                        <div class="card-info">
                                            <h5 class="mb-0">{{ $reservationAnalysis['total'] }}</h5>
                                            <small>{{ __('admin.total_reservation') }}</small>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-2 col-6">
                                    <div class="d-flex align-items-center">
                                        <div class="p-2 rounded badge bg-label-info me-4"><i class="ti ti-users ti-lg"></i>
                                        </div>
                                        <div class="card-info">
                                            <h5 class="mb-0">{{ $userCount['allUser'] }}</h5>
                                            <small>{{ __('admin.total_user') }}</small>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-2 col-6">
                                    <div class="d-flex align-items-center">
                                        <div class="p-2 rounded badge bg-label-danger me-4">
                                            <i class="ti ti-shopping-cart ti-lg"></i>
                                        </div>
                                        <div class="card-info">
                                            <h5 class="mb-0">{{ $userCount['allProvider'] }}</h5>
                                            <small>{{ __('admin.total_provider') }}</small>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-2 col-6">
                                    <div class="d-flex align-items-center">
                                        <div class="p-2 rounded badge bg-label-success me-4">
                                            <i class="ti ti-currency-dollar ti-lg"></i>
                                        </div>
                                        <div class="card-info">
                                            <h5 class="mb-0">{{ $userCount['AllDriver'] }}</h5>
                                            <small>{{ __('admin.total_driver') }}</small>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-md-12">
                <div class="mb-4 card">
                    <div class="card-header d-flex justify-content-between align-items-center">
                        <h5 class="mb-0">{{ __('admin.filter') }}</h5>
                    </div>
                    <div class="card-body">
                        <form method="get" action="{{ route('admin.dashboard') }}">
                            <div class="row">
                                <div class="col-md-4">
                                    <div class="mb-3">
                                        <label for="startDate" class="form-label">{{ __('admin.start_date') }}</label>
                                        <input type="date" value="{{ date('Y-m-d', strtotime($startDate)) }}"
                                            class="form-control" id="startDate" name="startDate"
                                            placeholder="{{ __('admin.start_date') }}">
                                    </div>
                                </div>
                                <div class="col-md-4">
                                    <div class="mb-3">
                                        <label for="endDate" class="form-label">{{ __('admin.end_date') }}</label>
                                        <input type="date" value="{{ date('Y-m-d', strtotime($endDate)) }}"
                                            class="form-control" id="endDate" name="endDate"
                                            placeholder="{{ __('admin.end_date') }}">
                                    </div>
                                </div>


                            </div>
                            <div class="row justify-content-end">
                                <div class="col-md-4 text-end">
                                    <button type="submit" class="btn btn-primary"><i class="fa fa-search"></i></button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>

            <div class="col-xl-9 col-12">
                <div class="card">
                    <div class="card-header d-flex justify-content-between">
                        <div class="m-0 card-title">
                            <h5 class="mb-1">{{ __('admin.report') }}</h5>
                            <p class="card-subtitle">
                                {{ __('admin.from') . ' ' . date('d-m-Y', strtotime($startDate)) . ' ' . __('admin.to') . ' ' . date('d-m-Y', strtotime($endDate)) }}
                            </p>
                        </div>
                    </div>
                    <div class="card-body">
                        <ul class="gap-4 pb-8 mx-1 nav nav-tabs widget-nav-tabs d-flex flex-nowrap" role="tablist">
                            <li class="nav-item" role="presentation">
                                <a href="javascript:void(0);"
                                    class="nav-link btn active d-flex flex-column align-items-center justify-content-center waves-effect"
                                    role="tab" data-bs-toggle="tab" data-bs-target="#navs-orders-id"
                                    aria-controls="navs-orders-id" aria-selected="true">
                                    <div class="p-2 rounded badge bg-label-secondary"><i
                                            class="ti ti-shopping-cart ti-md"></i></div>
                                    <h6 class="mt-2 mb-0 tab-widget-title">{{ __('admin.order') }}</h6>
                                </a>
                            </li>
                            <li class="nav-item" role="presentation">
                                <a href="javascript:void(0);"
                                    class="nav-link btn d-flex flex-column align-items-center justify-content-center waves-effect"
                                    role="tab" data-bs-toggle="tab" data-bs-target="#navs-reservation-id"
                                    aria-controls="navs-reservation-id" aria-selected="false" tabindex="-1">
                                    <div class="p-2 rounded badge bg-label-secondary"><i
                                            class="ti ti-chart-bar ti-md"></i></div>
                                    <h6 class="mt-2 mb-0 tab-widget-title"> {{ __('admin.reservation') }}</h6>
                                </a>
                            </li>
                            <li class="nav-item" role="presentation">
                                <a href="javascript:void(0);"
                                    class="nav-link btn d-flex flex-column align-items-center justify-content-center waves-effect"
                                    role="tab" data-bs-toggle="tab" data-bs-target="#navs-profit-id"
                                    aria-controls="navs-profit-id" aria-selected="false" tabindex="-1">
                                    <div class="p-2 rounded badge bg-label-secondary"><i
                                            class="ti ti-currency-dollar ti-md"></i></div>
                                    <h6 class="mt-2 mb-0 tab-widget-title">{{ __('admin.finance') }}</h6>
                                </a>
                            </li>
                        </ul>
                        <div class="p-0 tab-content ms-0 ms-sm-2">
                            <div class="tab-pane fade show active" id="navs-orders-id" role="tabpanel"
                                style="position: relative;">
                                <div id="orderChart" style="min-height: 231px;">

                                </div>
                            </div>



                            <div class="tab-pane fade" id="navs-reservation-id" role="tabpanel"
                                style="position: relative;">
                                <div id="reservationChart" style="min-height: 231px;">

                                </div>
                            </div>

                            <div class="tab-pane fade" id="navs-profit-id" role="tabpanel" style="position: relative;">
                                <div class="p-5 mt-5 rounded">
                                    <div class="gap-4 row gap-sm-0">

                                        <div class="col-12 col-sm-4 mb-4">
                                            <div class="gap-2 d-flex align-items-center">
                                                <div class="p-1 rounded badge bg-label-primary"><i
                                                        class="ti ti-currency-dollar ti-sm"></i></div>
                                                <h6 class="mb-0 fw-normal">{{ __('admin.order') }}</h6>
                                            </div>
                                            <h4 class="my-2">
                                                {{  number_format($financreAnalysis['order'],2).' '.__('admin.currency') }}
                                            </h4>
                                            {{-- <div class="progress w-75" style="height:4px">
                                                <div class="progress-bar" role="progressbar" style="width: 100%"
                                                    aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
                                            </div> --}}
                                        </div>

                                        <div class="col-12 col-sm-4 mb-4">
                                            <div class="gap-2 d-flex align-items-center">
                                                <div class="p-1 rounded badge bg-label-primary"><i
                                                        class="ti ti-currency-dollar ti-sm"></i></div>
                                                <h6 class="mb-0 fw-normal">{{ __('admin.reservation') }}</h6>
                                            </div>
                                            <h4 class="my-2">
                                                {{ number_format($financreAnalysis['reservation'], 2) .' '. __('admin.currency') }}
                                            </h4>
                                            {{-- <div class="progress w-75" style="height:4px">
                                                <div class="progress-bar" role="progressbar" style="width: 100%"
                                                    aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
                                            </div> --}}
                                        </div>

                                        <div class="col-12 col-sm-4 mb-4">
                                            <div class="gap-2 d-flex align-items-center">
                                                <div class="p-1 rounded badge bg-label-primary"><i
                                                        class="ti ti-currency-dollar ti-sm"></i></div>
                                                <h6 class="mb-0 fw-normal">{{ __('admin.total') }}</h6>
                                            </div>
                                            <h4 class="my-2">
                                                {{ number_format($financreAnalysis['total'],2) .' '. __('admin.currency') }}
                                            </h4>
                                            {{-- <div class="progress w-75" style="height:4px">
                                                <div class="progress-bar" role="progressbar" style="width: 100%"
                                                    aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
                                            </div> --}}
                                        </div>

                                        <div class="col-12 col-sm-4 mb-4">
                                            <div class="gap-2 d-flex align-items-center">
                                                <div class="p-1 rounded badge bg-label-primary"><i
                                                        class="ti ti-currency-dollar ti-sm"></i></div>
                                                <h6 class="mb-0 fw-normal">{{ __('admin.thisDay') }}</h6>
                                            </div>
                                            <h4 class="my-2">
                                                {{ number_format($financreAnalysis['thisDay'],2) .' '. __('admin.currency') }}
                                            </h4>
                                            {{-- <div class="progress w-75" style="height:4px">
                                                <div class="progress-bar" role="progressbar" style="width: 100%"
                                                    aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
                                            </div> --}}
                                        </div>

                                        <div class="col-12 col-sm-4 mb-4">
                                            <div class="gap-2 d-flex align-items-center">
                                                <div class="p-1 rounded badge bg-label-primary"><i
                                                        class="ti ti-currency-dollar ti-sm"></i></div>
                                                <h6 class="mb-0 fw-normal">{{ __('admin.totalComplete') }}</h6>
                                            </div>
                                            <h4 class="my-2">
                                                {{ number_format($financreAnalysis['totalComplete'],2) .' '. __('admin.currency') }}
                                            </h4>
                                            {{-- <div class="progress w-75" style="height:4px">
                                                <div class="progress-bar" role="progressbar" style="width: 100%"
                                                    aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
                                            </div> --}}
                                        </div>

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



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

            <div class="col-xl-3 col-md-12">
                <div class="card">
                    <div class="card-header">
                        <h5>{{ __('admin.user statistics') }}</h5>
                    </div>
                    <div class="card-body">
                        <ul class="p-0 m-0">
                            <li class="mb-4 d-flex">
                                <div class="d-flex w-50 align-items-center me-4">
                                    <div>
                                        <h6 class="mb-0">{{ __('admin.users') }}</h6>
                                        <small class="text-body">{{ __('admin.new') . ':' . $userCount['user'] }}</small>
                                        <small class="text-body">{{ __('admin.all') . ':' . $userCount['allUser'] }}
                                    </div>
                                </div>
                                <div class="d-flex flex-grow-1 align-items-center">
                                    <div class="progress w-100 me-4" style="height:8px;">
                                        <div class="progress-bar bg-danger" role="progressbar"
                                            style="width: {{ $userCount['allUser'] == 0 ? 0 : round(($userCount['user'] / $userCount['allUser']) * 100) }}%"
                                            aria-valuenow="{{ $userCount['allUser'] == 0 ? 0 : round(($userCount['user'] / $userCount['allUser']) * 100) }}"
                                            aria-valuemin="0" aria-valuemax="100">
                                        </div>
                                    </div>
                                    <span
                                        class="text-muted">{{ $userCount['allUser'] == 0 ? 0 : round(($userCount['user'] / $userCount['allUser']) * 100) }}%</span>
                                </div>
                            </li>

                            <li class="mb-4 d-flex">
                                <div class="d-flex w-50 align-items-center me-4">
                                    <div>
                                        <h6 class="mb-0">{{ __('admin.provider') }}</h6>
                                        <small
                                            class="text-body">{{ __('admin.new') . ':' . $userCount['provider'] }}</small>
                                        <small class="text-body">{{ __('admin.all') . ':' . $userCount['allProvider'] }}
                                    </div>
                                </div>
                                <div class="d-flex flex-grow-1 align-items-center">
                                    <div class="progress w-100 me-4" style="height:8px;">
                                        <div class="progress-bar bg-danger" role="progressbar"
                                            style="width: {{ $userCount['allProvider'] == 0 ? 0 : round(($userCount['provider'] / $userCount['allProvider']) * 100) }}%"
                                            aria-valuenow="{{ $userCount['allProvider'] == 0 ? 0 : round(($userCount['provider'] / $userCount['allProvider']) * 100) }}"
                                            aria-valuemin="0" aria-valuemax="100">
                                        </div>
                                    </div>
                                    <span
                                        class="text-muted">{{ $userCount['allProvider'] == 0 ? 0 : round(($userCount['provider'] / $userCount['allProvider']) * 100) }}%</span>
                                </div>
                            </li>

                            <li class="mb-4 d-flex">
                                <div class="d-flex w-50 align-items-center me-4">
                                    <div>
                                        <h6 class="mb-0">{{ __('admin.users') }}</h6>
                                        <small
                                            class="text-body">{{ __('admin.new') . ':' . $userCount['driver'] }}</small>
                                        <small class="text-body">{{ __('admin.all') . ':' . $userCount['AllDriver'] }}
                                    </div>
                                </div>
                                <div class="d-flex flex-grow-1 align-items-center">
                                    <div class="progress w-100 me-4" style="height:8px;">
                                        <div class="progress-bar bg-danger" role="progressbar"
                                            style="width: {{ $userCount['AllDriver'] == 0 ? 0 : round(($userCount['driver'] / $userCount['AllDriver']) * 100) }}%"
                                            aria-valuenow="{{ $userCount['AllDriver'] == 0 ? 0 : round(($userCount['driver'] / $userCount['AllDriver']) * 100) }}"
                                            aria-valuemin="0" aria-valuemax="100">
                                        </div>
                                    </div>
                                    <span
                                        class="text-muted">{{ $userCount['AllDriver'] == 0 ? 0 : round(($userCount['driver'] / $userCount['AllDriver']) * 100) }}%</span>
                                </div>
                            </li>

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

            <div class="row g-6">
                <div class=" col-lg-3 col-md-6 col-sm-12">
                    <div class="card h-100">
                        <div class="card-header d-flex justify-content-between">
                            <div class="mb-0 card-title">
                                <h5 class="mb-1">{{ __('admin.main_category') }}</h5>
                                <p class="card-subtitle">{{ __('admin.count_provider_in_category') }} </p>
                            </div>
                        </div>
                        <div class="card-body">
                            <ul class="mb-0 list-unstyled">
                                @foreach ($providerByMainCategory as $category)
                                    <li class="mb-6">
                                        <div class="d-flex align-items-center">
                                            <div class="flex-wrap gap-2 d-flex justify-content-between w-100">
                                                <div class="me-2">
                                                    <h6 class="mb-0">{{ $category->name }}</h6>
                                                </div>
                                                <div class="d-flex align-items-center">
                                                    <p class="mb-0">{{ $category->providers_count }}</p>
                                                </div>
                                            </div>
                                        </div>
                                    </li>
                                @endforeach
                            </ul>
                        </div>
                    </div>
                </div>

                <div class="col-lg-3 col-md-6 col-sm-12">
                    <div class="card h-100">
                        <div class="card-header d-flex justify-content-between">
                            <div class="mb-0 card-title">
                                <h5 class="mb-1">{{ __('admin.main_category') }}</h5>
                                <p class="card-subtitle">
                                    {{ __('admin.new_count_provider_in_category') . ' ' . __('admin.from') . ' ' .  date('d-m-Y', strtotime($startDate)) . ' ' . __('admin.to') . ' ' . date('d-m-Y', strtotime($endDate)) }}
                                </p>
                            </div>
                        </div>
                        <div class="card-body">
                            <ul class="mb-0 list-unstyled">
                                @foreach ($providerByMainCategoryWithDate as $category)
                                    <li class="mb-6">
                                        <div class="d-flex align-items-center">
                                            {{-- <div class="p-2 rounded badge bg-label-secondary text-body me-4"><img
                                                    src="{{ $category->image }}"></div> --}}
                                            <div class="flex-wrap gap-2 d-flex justify-content-between w-100">
                                                <div class="me-2">
                                                    <h6 class="mb-0">{{ $category->name }}</h6>
                                                </div>
                                                <div class="d-flex align-items-center">
                                                    <p class="mb-0">{{ $category->providers_count }}</p>
                                                </div>
                                            </div>
                                        </div>
                                    </li>
                                @endforeach


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

                <div class="col-lg-3 col-md-6 col-sm-12">
                    <div class="card h-100">
                        <div class="card-header d-flex justify-content-between">
                            <div class="mb-0 card-title">
                                <h5 class="mb-1">{{ __('admin.Most_product_sales') }}</h5>
                            </div>
                        </div>
                        <div class="card-body">
                            <ul class="mb-0 list-unstyled">
                                @foreach ($productWithMostOrder as $product)
                                    <li class="mb-6">
                                        <div class="d-flex align-items-center">
                                            <div class="flex-wrap gap-2 d-flex justify-content-between w-100">
                                                <div class="me-2">
                                                    <h6 class="mb-0">{{ $product->name }}</h6>
                                                    <small>{{ __('admin.price') . ':' . $product->price . ' ' . __('admin.currency') }}</small>
                                                </div>
                                                <div class="d-flex align-items-center">
                                                    <p class="mb-0">{{ $product->orders_count }}</p>
                                                </div>
                                            </div>
                                        </div>
                                    </li>
                                @endforeach
                            </ul>
                        </div>
                    </div>

                </div>

                <div class="col-lg-3 col-md-6 col-sm-12">
                    <div class="card h-100">
                        <div class="card-header d-flex justify-content-between">
                            <div class="mb-0 card-title">
                                <h5 class="mb-1">{{ __('admin.most_product_not_order') }}</h5>
                            </div>
                        </div>
                        <div class="card-body">
                            <ul class="mb-0 list-unstyled">
                                @foreach ($productNotPutInCart as $product)
                                    <li class="mb-6">
                                        <div class="d-flex align-items-center">
                                            <div class="flex-wrap gap-2 d-flex justify-content-between w-100">
                                                <div class="me-2">
                                                    <h6 class="mb-0">{{ $product->name }}</h6>
                                                    <small
                                                        class="text-mute">{{ __('admin.price') . ':' . $product->price . ' ' . __('admin.currency') }}</small>
                                                </div>
                                            </div>
                                        </div>
                                    </li>
                                @endforeach
                            </ul>
                        </div>
                    </div>

                </div>

            </div>
            <div class="row g-6 my-4">
                <div class=" col-lg-4 col-md-4 col-sm-12">
                    <div class="card h-100">
                        <div class="card-header d-flex justify-content-between">
                            <div class="mb-0 card-title">
                                <h5 class="mb-1">{{ __('admin.most_provider_order') }}</h5>
                            </div>
                        </div>
                        <div class="card-body">
                            <ul class="mb-0 list-unstyled">
                                @foreach ($mostOrderProvider as $provider)
                                    <li class="mb-6">
                                        <div class="d-flex align-items-center">
                                            <div class="flex-wrap gap-2 d-flex justify-content-between w-100">
                                                <div class="me-2">
                                                    <h6 class="mb-0">{{ $provider->name }}</h6>
                                                </div>
                                                <div class="d-flex align-items-center">
                                                    <p class="mb-0">{{ $provider->orders_count }}</p>
                                                </div>
                                            </div>
                                        </div>
                                    </li>
                                @endforeach
                            </ul>
                        </div>
                    </div>
                </div>

                <div class="col-lg-4 col-md-4 col-sm-12">
                    <div class="card h-100">
                        <div class="card-header d-flex justify-content-between">
                            <div class="mb-0 card-title">
                                <h5 class="mb-1">{{ __('admin.most_provider_reservation') }}</h5>
                            </div>
                        </div>
                        <div class="card-body">
                            <ul class="mb-0 list-unstyled">
                                @foreach ($mostReservationProvider as $provider)
                                    <li class="mb-6">
                                        <div class="d-flex align-items-center">
                                            {{-- <div class="p-2 rounded badge bg-label-secondary text-body me-4"><img
                                                    src="{{ $category->image }}"></div> --}}
                                            <div class="flex-wrap gap-2 d-flex justify-content-between w-100">
                                                <div class="me-2">
                                                    <h6 class="mb-0">{{ $provider->name }}</h6>
                                                </div>
                                                <div class="d-flex align-items-center">
                                                    <p class="mb-0">{{ $provider->reservations_count }}</p>
                                                </div>
                                            </div>
                                        </div>
                                    </li>
                                @endforeach


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

                <div class="col-lg-4 col-md-4 col-sm-12">
                    <div class="card h-100">
                        <div class="card-header d-flex justify-content-between">
                            <div class="mb-0 card-title">
                                <h5 class="mb-1">{{ __('admin.most_driver') }}</h5>
                            </div>
                        </div>
                        <div class="card-body">
                            <ul class="mb-0 list-unstyled">
                                @foreach ($mostDriver as $driver)
                                    <li class="mb-6">
                                        <div class="d-flex align-items-center">
                                            <div class="flex-wrap gap-2 d-flex justify-content-between w-100">
                                                <div class="me-2">
                                                    <h6 class="mb-0">{{ $driver->name }}</h6>
                                                </div>
                                                <div class="d-flex align-items-center">
                                                    <p class="mb-0">{{ $driver->orders_count }}</p>
                                                </div>
                                            </div>
                                        </div>
                                    </li>
                                @endforeach
                            </ul>
                        </div>
                    </div>

                </div>
            </div>


            <div class="my-4 row g-6">
                <div class="col-md-6 col-sm-12">
                    <div class="card h-100">
                        <div class="card-header d-flex justify-content-between">
                            <div class="mb-0 card-title">
                                <h5 class="mb-1">{{ __('admin.order') }}</h5>
                            </div>
                        </div>
                        <div class="card-body">
                            <div class="card-datatable table-responsive">
                                <div id="DataTables_Table_0_wrapper" class="dataTables_wrapper dt-bootstrap5 no-footer">
                                    <table
                                        class="table datatables-order border-top dataTable no-footer dtr-column collapsed"
                                        id="DataTables_Table_0" aria-describedby="DataTables_Table_0_info"
                                        style="width: 1215px;">
                                        <thead>
                                            <tr>
                                                <th class="sorting" tabindex="0" aria-controls="DataTables_Table_0"
                                                    rowspan="1" colspan="1" style="width: 50px;"
                                                    aria-label="order: activate to sort column ascending">
                                                    {{ __('admin.order') }}</th>
                                                <th class="sorting sorting_asc" tabindex="0"
                                                    aria-controls="DataTables_Table_0" rowspan="1" colspan="1"
                                                    style="width: 124px;"
                                                    aria-label="date: activate to sort column descending"
                                                    aria-sort="ascending">{{ __('admin.date') }}</th>
                                                <th class="sorting" tabindex="0" aria-controls="DataTables_Table_0"
                                                    rowspan="1" colspan="1" style="width: 256px;"
                                                    aria-label="customers: activate to sort column ascending">
                                                    {{ __('admin.customer') }}</th>

                                                <th class="sorting dtr-hidden" tabindex="0"
                                                    aria-controls="DataTables_Table_0" rowspan="1" colspan="1"
                                                    style="width: 113px; "
                                                    aria-label="status: activate to sort column ascending">
                                                    {{ __('admin.status') }}</th>

                                                <th class="sorting dtr-hidden" tabindex="0"
                                                    aria-controls="DataTables_Table_0" rowspan="1" colspan="1"
                                                    style="width: 139px; "
                                                    aria-label="provider: activate to sort column ascending">
                                                    {{ __('admin.provider') }}</th>
                                                <th class="sorting_disabled dtr-hidden" rowspan="1" colspan="1"
                                                    style="width: 63px;" aria-label="Actions">{{ __('admin.actions') }}
                                                </th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            {{-- odd or even --}}
                                            @foreach ($latestOrder as $order)
                                                <tr class="{{ $loop->odd ? 'odd' : 'even' }}">

                                                    {{-- order id id 00001 --}}
                                                    <td><a
                                                            href="{{ route('admin.order.show', $order->id) }}"><span>#{{ $order->id }}</span></a>
                                                    </td>
                                                    <td class="sorting_1"><span class="text-nowrap">
                                                            {{ date('M d, Y h:i A', strtotime($order->created_at)) }}</span>
                                                    </td>
                                                    <td>
                                                        <div
                                                            class="d-flex justify-content-start align-items-center order-name text-nowrap">
                                                            <div class="avatar-wrapper">
                                                                <div class="avatar avatar-sm me-3"><img
                                                                        src="{{ $order->user->image }}" alt="Avatar"
                                                                        class="rounded-circle"></div>
                                                            </div>
                                                            <div class="d-flex flex-column">
                                                                <h6 class="m-0"><a href="pages-profile-user.html"
                                                                        class="text-heading">{{ $order->user->name }}</a>
                                                                </h6>
                                                                <small>{{ $order->user->email }}</small>
                                                            </div>
                                                        </div>
                                                    </td>

                                                    <td class="dtr-hidden"><span
                                                            class="px-2 badge bg-label-{{ getOrderStatusClass($order->status) }}"
                                                            text-capitalized="">{{ __('admin.order_status_arr.' . $order->status) }}</span>
                                                    </td>

                                                    <td>
                                                        <div
                                                            class="d-flex justify-content-start align-items-center order-name text-nowrap">
                                                            <div class="avatar-wrapper">
                                                                <div class="avatar avatar-sm me-3"><img
                                                                        src="{{ $order->provider->image }}"
                                                                        alt="Avatar" class="rounded-circle"></div>
                                                            </div>
                                                            <div class="d-flex flex-column">
                                                                <h6 class="m-0"><a href="pages-profile-user.html"
                                                                        class="text-heading">{{ $order->provider->name }}</a>
                                                                </h6>
                                                                <small>{{ $order->provider->email }}</small>
                                                            </div>
                                                        </div>
                                                    </td>
                                                    <td class="dtr-hidden">
                                                        <div class="d-flex justify-content-sm-start align-items-sm-center">
                                                            <button
                                                                class="btn btn-icon btn-text-secondary waves-effect waves-light rounded-pill dropdown-toggle hide-arrow"
                                                                data-bs-toggle="dropdown"><i
                                                                    class="ti ti-dots-vertical"></i></button>
                                                            <div class="m-0 dropdown-menu dropdown-menu-end"><a
                                                                    href="{{ route('admin.order.show', $order->id) }}"
                                                                    class="dropdown-item"><i
                                                                        class="ti ti-eye me-2"></i>{{ __('admin.view') }}</a>
                                                            </div>
                                                        </div>
                                                    </td>
                                                </tr>
                                            @endforeach

                                        </tbody>
                                    </table>
                                    <div class="card-footer d-flex justify-content-end align-items-center">
                                        <div class="d-flex justify-content-start align-items-center">
                                            <a href="{{ route('admin.order.index') }}"
                                                class="btn btn-text-secondary waves-effect waves">{{ __('admin.view_all') }}</a>
                                        </div>
                                    </div>
                                </div>
                            </div>

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

                <div class="col-md-6 col-sm-12">
                    <div class="card h-100">
                        <div class="card-header d-flex justify-content-between">
                            <div class="mb-0 card-title">
                                <h5 class="mb-1">{{ __('admin.reservation') }}</h5>
                            </div>
                        </div>
                        <div class="card-body">
                            <div class="card-datatable table-responsive">
                                <div id="DataTables_Table_0_wrapper" class="dataTables_wrapper dt-bootstrap5 no-footer">
                                    <table
                                        class="table datatables-reservation breservation-top dataTable no-footer dtr-column collapsed"
                                        id="DataTables_Table_0" aria-describedby="DataTables_Table_0_info"
                                        style="width: 1215px;">
                                        <thead>
                                            <tr>
                                                <th class="sorting" tabindex="0" aria-controls="DataTables_Table_0"
                                                    rowspan="1" colspan="1" style="width: 50px;"
                                                    aria-label="reservation: activate to sort column ascending">
                                                    {{ __('admin.reservation') }}</th>
                                                <th class="sorting sorting_asc" tabindex="0"
                                                    aria-controls="DataTables_Table_0" rowspan="1" colspan="1"
                                                    style="width: 124px;"
                                                    aria-label="date: activate to sort column descending"
                                                    aria-sort="ascending">{{ __('admin.date') }}</th>
                                                <th class="sorting" tabindex="0" aria-controls="DataTables_Table_0"
                                                    rowspan="1" colspan="1" style="width: 256px;"
                                                    aria-label="customers: activate to sort column ascending">
                                                    {{ __('admin.customer') }}</th>
                                                <th class="sorting dtr-hidden" tabindex="0"
                                                    aria-controls="DataTables_Table_0" rowspan="1" colspan="1"
                                                    style="width: 113px; "
                                                    aria-label="status: activate to sort column ascending">
                                                    {{ __('admin.status') }}</th>
                                                <th class="sorting dtr-hidden" tabindex="0"
                                                    aria-controls="DataTables_Table_0" rowspan="1" colspan="1"
                                                    style="width: 139px; "
                                                    aria-label="provider: activate to sort column ascending">
                                                    {{ __('admin.provider') }}</th>
                                                <th class="sorting_disabled dtr-hidden" rowspan="1" colspan="1"
                                                    style="width: 63px;" aria-label="Actions">{{ __('admin.actions') }}
                                                </th>

                                            </tr>
                                        </thead>
                                        <tbody>
                                            {{-- odd or even --}}
                                            @foreach ($latestReservation as $reservation)
                                                <tr class="{{ $loop->odd ? 'odd' : 'even' }}">

                                                    {{-- reservation id id 00001 --}}
                                                    <td><a
                                                            href="{{ route('admin.reservation.show', $reservation->id) }}"><span>#{{ $reservation->id }}</span></a>
                                                    </td>
                                                    <td class="sorting_1"><span class="text-nowrap">
                                                            {{ date('M d, Y h:i A', strtotime($reservation->day . ' ' . $reservation->time)) }}</span>
                                                    </td>
                                                    <td>
                                                        <div
                                                            class="d-flex justify-content-start align-items-center reservation-name text-nowrap">
                                                            <div class="avatar-wrapper">
                                                                <div class="avatar avatar-sm me-3"><img
                                                                        src="{{ $reservation->user->image }}"
                                                                        alt="Avatar" class="rounded-circle"></div>
                                                            </div>
                                                            <div class="d-flex flex-column">
                                                                <h6 class="m-0"><a href="pages-profile-user.html"
                                                                        class="text-heading">{{ $reservation->user->name }}</a>
                                                                </h6>
                                                                <small>{{ $reservation->user->email }}</small>
                                                            </div>
                                                        </div>
                                                    </td>

                                                    <td class="dtr-hidden"><span class="px-2"
                                                            text-capitalized="">{{ __($reservation->status) }}</span>
                                                    </td>

                                                    <td>
                                                        <div
                                                            class="d-flex justify-content-start align-items-center reservation-name text-nowrap">
                                                            <div class="avatar-wrapper">
                                                                <div class="avatar avatar-sm me-3"><img
                                                                        src="{{ $reservation->provider->image }}"
                                                                        alt="Avatar" class="rounded-circle"></div>
                                                            </div>
                                                            <div class="d-flex flex-column">
                                                                <h6 class="m-0"><a href="pages-profile-user.html"
                                                                        class="text-heading">{{ $reservation->provider->name }}</a>
                                                                </h6>
                                                                <small>{{ $reservation->provider->email }}</small>
                                                            </div>
                                                        </div>
                                                    </td>
                                                    <td class="dtr-hidden">
                                                        <div class="d-flex justify-content-sm-start align-items-sm-center">
                                                            <button
                                                                class="btn btn-icon btn-text-secondary waves-effect waves-light rounded-pill dropdown-toggle hide-arrow"
                                                                data-bs-toggle="dropdown"><i
                                                                    class="ti ti-dots-vertical"></i></button>
                                                            <div class="m-0 dropdown-menu dropdown-menu-end"><a
                                                                    href="{{ route('admin.reservation.show', $reservation->id) }}"
                                                                    class="dropdown-item"><i
                                                                        class="ti ti-eye me-2"></i>{{ __('admin.view') }}</a>
                                                            </div>
                                                        </div>
                                                    </td>
                                                </tr>
                                            @endforeach

                                        </tbody>
                                    </table>
                                    <div class="card-footer d-flex justify-content-end align-items-center">
                                        <div class="d-flex justify-content-start align-items-center">
                                            <a href="{{ route('admin.reservation.index') }}"
                                                class="btn btn-text-secondary waves-effect waves">{{ __('admin.view_all') }}</a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        </div>
    @endsection