@extends('layouts.app')
@section('title')
{{ __('messages.Regions') }}
@endsection
@section('content')
<div class="container-xxl flex-grow-1 container-p-y">
    @include('inc.breadcrumb', [
    'breadcrumb_items' => [
    __('messages.Home') => route('home'),
    __('messages.Area statistics') => 'active',
    ],
    ])

    <div class="row">
        <div class="col-xxl-6 col-lg-6">
            <div class="card h-100">
                <div class="card-header d-flex align-items-center justify-content-between">
                    <h5 class="card-title m-0 me-2">{{ __("messages.Top Cities by Order Volume") }} </h5>
                </div>
                <div class="card-body">
                    <ul class="list-unstyled mb-0">
                        @foreach ($top_cities as $city)
                            <li class="d-flex mb-5 align-items-center">
                                <div class="avatar flex-shrink-0 me-4">
                                    <span class="avatar-initial rounded bg-label-primary">{{ $loop->index +  1 }}</span>
                                </div>
                                <div class="row w-100 align-items-center">
                                    <div class="col-sm-8 mb-1 mb-sm-0 mb-lg-1 mb-xxl-0">
                                        <h6 class="mb-0">{{ $city->name }}</h6>
                                    </div>
                                    <div class="col-sm-4 d-flex justify-content-sm-end">
                                        <div class="badge bg-label-secondary">{{ $city->delivery_orders_completed_count }} {{ __("messages.Order") }}</div>
                                    </div>
                                </div>
                            </li>
                        @endforeach
                       
                    </ul>
                </div>
            </div>
        </div>

         <div class="col-xxl-6 col-lg-6">
            <div class="card h-100">
                <div class="card-header d-flex align-items-center justify-content-between">
                    <h5 class="card-title m-0 me-2">{{ __("messages.Top Regions by Order Volume") }} </h5>
                </div>
                <div class="card-body">
                    <ul class="list-unstyled mb-0">
                        @foreach ($top_regions as $region)
                            <li class="d-flex mb-5 align-items-center">
                                <div class="avatar flex-shrink-0 me-4">
                                    <span class="avatar-initial rounded bg-label-primary">{{ $loop->index +  1 }}</span>
                                </div>
                                <div class="row w-100 align-items-center">
                                    <div class="col-sm-8 mb-1 mb-sm-0 mb-lg-1 mb-xxl-0">
                                        <h6 class="mb-0">{{ $region->name }}</h6>
                                    </div>
                                    <div class="col-sm-4 d-flex justify-content-sm-end">
                                        <div class="badge bg-label-secondary">{{ $region->delivery_orders_completed_count }} {{ __("messages.Order") }}</div>
                                    </div>
                                </div>
                            </li>
                        @endforeach
                       
                    </ul>
                </div>
            </div>
        </div>

    </div>
</div>
@endsection