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


    <div class="row">
        <!-- start status and types -->
        <div class="col-lg-12">
            <div class="swiper-container swiper-container-horizontal swiper swiper-card-advance-bg"
                id="swiper-with-pagination-cards">
                <div class="swiper-wrapper">
                    <div class="swiper-slide">
                        <div class="row">
                            <div class="col-12">
                                <h5 class="text-white mb-0">{{ __("messages.Number of orders by status") }}</h5>
                                <small>{{ __("messages.Displays the total number of orders grouped by their current status (e.g., pending, completed, cancelled).") }}</small>
                            </div>
                            <div class="row">
                                <div class="col-lg-7 col-md-9 col-12 order-2 order-md-1 pt-md-9">
                                    <h6 class="text-white mt-0 mt-md-3 mb-4">{{ __("messages.Statistics") }}</h6>
                                    <div class="row">
                                        <div class="col-6">
                                            <ul class="list-unstyled mb-0">
                                                <li class="d-flex mb-4 align-items-center">
                                                    <p class="mb-0 fw-medium me-2 website-analytics-text-bg">{{ $orders_by_status["request"] ?? 0 }}</p>
                                                    <p class="mb-0">{{ __("orderstatus.Waiting") }}</p>
                                                </li>
                                                <li class="d-flex align-items-center mb-4">
                                                    <p class="mb-0 fw-medium me-2 website-analytics-text-bg">{{ $orders_by_status["received"] ?? 0 }}</p>
                                                    <p class="mb-0">{{ __("orderstatus.Accepted") }}</p>
                                                </li>
                                                
                                            </ul>
                                            <ul class="list-unstyled">
                                                <li class="d-flex  align-items-center mb-4">
                                                    <p class="mb-0 fw-medium me-2 website-analytics-text-bg">{{ $orders_by_status["reject"] ?? 0 }}</p>
                                                    <p class="mb-0">{{ __("orderstatus.Rejected") }}</p>
                                                </li>
                                                <li class="d-flex align-items-center">
                                                    <p class="mb-0 fw-medium me-2 website-analytics-text-bg">{{ $orders_by_status["prepared"] ?? 0 }}</p>
                                                    <p class="mb-0">{{ __("orderstatus.Preparing") }}</p>
                                                </li>
                                                
                                            </ul>
                                        </div>
                                        <div class="col-6">
                                            <ul class="list-unstyled ">
                                               
                                                <li class="d-flex align-items-center mb-4">
                                                    <p class="mb-0 fw-medium me-2 website-analytics-text-bg">{{ $orders_by_status["shipped"] ?? 0 }}</p>
                                                    <p class="mb-0">{{ __("orderstatus.On the way") }}</p>
                                                </li>
                                                <li class="d-flex align-items-center mb-4">
                                                    <p class="mb-0 fw-medium me-2 website-analytics-text-bg">{{ $orders_by_status["delivered"] ?? 0 }}</p>
                                                    <p class="mb-0">{{ __("orderstatus.Delivered") }}</p>
                                                </li>
                                            </ul>
                                             <ul class="list-unstyled">
                                                <li class="d-flex align-items-center mb-4">
                                                    <p class="mb-0 fw-medium me-2 website-analytics-text-bg">{{ $orders_by_status["cancelled"] ?? 0 }}</p>
                                                    <p class="mb-0">{{ __("orderstatus.Cancelled") }}</p>
                                                </li>
                                                 <li class="d-flex align-items-center">
                                                    <p class="mb-0 fw-medium me-2 website-analytics-text-bg">{{ $orders_by_status["completed"] ?? 0 }}</p>
                                                    <p class="mb-0">{{ __("orderstatus.Completed") }}</p>
                                                </li>
                                            </ul>
                                        </div>

                                        
                                    </div>
                                </div>
                                <div class="col-lg-5 col-md-3 col-12 order-1 order-md-2 my-4 my-md-0 text-center">
                                    <img src="{{ asset("assets/img/order.png") }}"
                                        alt="Website Analytics" height="220" class="card-website-analytics-img" />
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="swiper-slide">
                        <div class="row">
                            <div class="col-12">
                                <h5 class="text-white mb-0">{{ __("messages.Number of orders by type") }}</h5>
                                <small>{{ __("messages.Displays the total number of orders grouped by their type (e.g., delivery, pickup, dine-in).") }}</small>
                            </div>
                            <div class="col-lg-7 col-md-9 col-12 order-2 order-md-1 pt-md-9">
                                <h6 class="text-white mt-0 mt-md-3 mb-4">{{ __("messages.Statistics") }}</h6>
                                <div class="row">
                                    <div class="col-6">
                                        <ul class="list-unstyled mb-0">
                                            <li class="d-flex mb-4 align-items-center">
                                                <p class="mb-0 fw-medium me-2 website-analytics-text-bg">{{ $orders_by_type["pickup"] ?? 0 }}</p>
                                                <p class="mb-0">{{ __("orderstatus.Pickup") }}</p>
                                            </li>
                                            <li class="d-flex align-items-center">
                                                <p class="mb-0 fw-medium me-2 website-analytics-text-bg">{{ $orders_by_type["reservation"] ?? 0 }}</p>
                                                <p class="mb-0">{{ __("orderstatus.Reservation") }}</p>
                                            </li>
                                        </ul>
                                    </div>
                                    <div class="col-6">
                                        <ul class="list-unstyled mb-0">
                                            <li class="d-flex mb-4 align-items-center">
                                                <p class="mb-0 fw-medium me-2 website-analytics-text-bg">{{ $orders_by_type["delivery"] ?? 0 }}</p>
                                                <p class="mb-0">{{ __("orderstatus.Delivery") }}</p>
                                            </li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                            <div class="col-lg-5 col-md-3 col-12 order-1 order-md-2 my-4 my-md-0 text-center">
                                <img src="{{ asset("assets/img/order-screen.png") }}"
                                    alt="Website Analytics" height="220" class="card-website-analytics-img" />
                            </div>
                        </div>
                    </div>
                </div>
                <div class="swiper-pagination"></div>
            </div>
        </div>
     <!-- end status and types -->

     
    </div>

     <!-- start status by type -->
    <div class="row mt-5">
            <div class="col-xxl-4 col-md-6">
                <div class="card h-100">
                <div class="card-header d-flex justify-content-between">
                    <div class="card-title mb-0">
                    <h5 class="mb-1">{{ __("orderstatus.Pickup") }}</h5>
                    <p class="card-subtitle mt-1">{{ __("messages.Number of order statuses for Pickup") }}</p>
                    </div>
                </div>
                <div class="card-body">
                    <ul class="p-0 m-0">
                        @foreach (App\Enums\OrderStatusEnum::translate_title() as  $status_trans_key =>$status_trans_val)
                        @if(!in_array($status_trans_key , ["delivered", "shipped"]))
                        <li class="mb-3 d-flex justify-content-between align-items-center">
                            <div class="badge bg-label-{{ App\Enums\OrderStatusEnum::get_color($status_trans_key) }} rounded p-1_5"><i class="{{ App\Enums\OrderStatusEnum::icons()[$status_trans_key] }} ti-md"></i></div>
                            <div class="d-flex justify-content-between w-100 flex-wrap">
                            <h6 class="mb-0 ms-4">{{  $status_trans_val }}</h6>
                            <div class="d-flex">
                                <p class="mb-0"> {{ $orders_by_type_status["pickup"][$status_trans_key] ?? 0 }}</p>
                            </div>
                            </div>
                        </li>
                        @endif
                        @endforeach
                    </ul>
                </div>
                </div>
            </div>
            <div class="col-xxl-4 col-md-6">
                <div class="card h-100">
                <div class="card-header d-flex justify-content-between">
                    <div class="card-title mb-0">
                    <h5 class="mb-1">{{ __("orderstatus.Reservation") }}</h5>
                    <p class="card-subtitle mt-1">{{ __("messages.Number of reservation orders by status") }}</p>
                    </div>
                </div>
                <div class="card-body">
                    <ul class="p-0 m-0">
                        @foreach (App\Enums\OrderStatusEnum::translate_title() as  $status_trans_key =>$status_trans_val)
                          @if(!in_array($status_trans_key , ["delivered", "shipped"]))
                            <li class="mb-3 d-flex justify-content-between align-items-center">
                                <div class="badge bg-label-{{ App\Enums\OrderStatusEnum::get_color($status_trans_key) }} rounded p-1_5"><i class="{{ App\Enums\OrderStatusEnum::icons()[$status_trans_key] }} ti-md"></i></div>
                                <div class="d-flex justify-content-between w-100 flex-wrap">
                                <h6 class="mb-0 ms-4">{{  $status_trans_val }}</h6>
                                <div class="d-flex">
                                    <p class="mb-0"> {{ $orders_by_type_status["reservation"][$status_trans_key] ?? 0 }}</p>
                                </div>
                                </div>
                            </li>
                          @endif
                        @endforeach
                    </ul>
                </div>
                </div>
            </div>

             <div class="col-xxl-4 col-md-6">
                <div class="card h-100">
                <div class="card-header d-flex justify-content-between">
                    <div class="card-title mb-0">
                    <h5 class="mb-1">{{ __("orderstatus.Delivery") }}</h5>
                    <p class="card-subtitle mt-1">{{ __("messages.Number of delivery orders by status") }}</p>
                    </div>
                </div>
                <div class="card-body">
                    <ul class="p-0 m-0">
                        @foreach (App\Enums\OrderStatusEnum::translate_title() as  $status_trans_key =>$status_trans_val)
                        <li class="mb-3 d-flex justify-content-between align-items-center">
                            <div class="badge bg-label-{{ App\Enums\OrderStatusEnum::get_color($status_trans_key) }} rounded p-1_5"><i class="{{ App\Enums\OrderStatusEnum::icons()[$status_trans_key] }} ti-md"></i></div>
                            <div class="d-flex justify-content-between w-100 flex-wrap">
                            <h6 class="mb-0 ms-4">{{  $status_trans_val }}</h6>
                            <div class="d-flex">
                                <p class="mb-0"> {{ $orders_by_type_status["delivery"][$status_trans_key] ?? 0 }}</p>
                            </div>
                            </div>
                        </li>
                        @endforeach
                    </ul>
                </div>
                </div>
            </div>

    </div>

     <!-- end status by type -->


     {{-- start  status percentage --}}

     <div class="row mt-5">
        <!-- Assignment Progress -->
            <div class="col-xxl-6 col-md-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.Percentage of each status from total orders") }}</h5>
                    <div class="dropdown">
                    </div>
                </div>
                <div class="card-body">
                    <ul class="p-0 m-0">
                        @foreach (App\Enums\OrderStatusEnum::translate_title() as  $status_trans_key =>$status_trans_val)
                          <li class="d-flex mb-3">
                            <div
                            class="chart-progress me-4"
                            data-color="{{ App\Enums\OrderStatusEnum::get_color($status_trans_key) }}"
                            data-series="{{ $orders_by_status_percentage[$status_trans_key] ?? 0 }}"
                            data-progress_variant="true"></div>
                            <div class="row w-100 align-items-center">
                            <div class="col-9">
                                <div class="me-2">
                                <h6 class="mb-2">{{ $status_trans_val }}</h6>
                                {{-- <small>120 Tasks</small> --}}
                                </div>
                            </div>
                            <div class="col-3 text-end">
                                <a href="{{ route("admin.orders.index") }}?status={{ $status_trans_key }}" type="button" class="btn btn-sm btn-icon btn-label-secondary">
                                <i class="ti ti-chevron-right scaleX-n1-rtl"></i>
                                </a>
                            </div>
                            </div>
                        </li>
                        @endforeach
                      
                    </ul>
                </div>
                </div>
            </div>


            <div class="col-6">
                
                <div class="card">
                    <div class="card-header d-flex justify-content-between">
                        <h4>{{ __('messages.Statistics for') }} {{ date('Y') }}</h4>
                        <div>
                            {{ __('messages.Orders') }}
                        </div>
                    </div>
                    <div class="card-body">
                        <div id="lineAreaChart"></div>
                    </div>
                </div>
            </div>
        <!--/ Assignment Progress -->
     </div>

     {{-- end  status percentage --}}


</div>
@endsection

@section("script")
    @include('home.statistics.orders_script')
   <script src="{{ asset("assets/js/app-academy-dashboard.js") }}"></script>
@endsection