@extends('app.app')
@section('title', '')
@section('content')
    <div class="container-xxl flex-grow-1 container-p-y">
        <div class="row">

            <div class="col-xl-2 col-md-4 col-6 mb-4">
                <div class="card">
                    <div class="card-body">
                        <div class="badge p-2 bg-label-danger mb-2 rounded">
                            <i class="ti ti-currency-dollar ti-md"></i>
                        </div>
                        <h5 class="card-title mb-1 pt-2">{{ __('titles.total_invested') }}</h5>
                        <small>{{ __('titles.investors') }}</small>
                        <p class="mb-2 mt-1">{{ $Tab['total_deals'] }} <img src="{{ asset('assets/img/riyal.svg') }}"
                                width="12"></p>
                        <div class="pt-1">
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-xl-2 col-md-4 col-6 mb-4">
                <div class="card">
                    <div class="card-body">
                        <div class="badge p-2 bg-label-info mb-2 rounded"><i class="ti ti-chart-bar ti-md"></i></div>
                        <h5 class="card-title mb-1 pt-2">{{ __('titles.total_profit') }} </h5>
                        <small>{{ __('titles.investors') }}</small>
                        <p class="mb-2 mt-1">{{ $Tab['total_profits'] }} <img src="{{ asset('assets/img/riyal.svg') }}"
                                width="12"></p>
                        <div class="pt-1">
                        </div>
                    </div>
                </div>
            </div>
            <!-- Statistics -->
            <div class="col-xl-8 mb-4 col-lg-12 col-12">
                <div class="card h-100">
                    <div class="card-header">
                        <div class="d-flex justify-content-between mb-3">
                            <h5 class="card-title mb-0">{{ __('titles.statistics') }}</h5>
                        </div>
                    </div>
                    <div class="card-body">
                        <div class="row gy-3">
                            <div class="col-md-3 col-6">
                                <div class="d-flex align-items-center">
                                    <div class="badge rounded-pill bg-label-primary me-3 p-2">
                                        <i class="ti ti-users ti-sm"></i>
                                    </div>
                                    <div class="card-info">
                                        <h5 class="mb-0">{{ $Tab['merchants'] }}</h5>
                                        <small>{{ __('titles.merchants') }}</small>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-3 col-6">
                                <div class="d-flex align-items-center">
                                    <div class="badge rounded-pill bg-label-info me-3 p-2">
                                        <i class="ti ti-users ti-sm"></i>
                                    </div>
                                    <div class="card-info">
                                        <h5 class="mb-0">{{ $Tab['investors'] }}</h5>
                                        <small>{{ __('titles.investors') }}</small>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-3 col-6">
                                <div class="d-flex align-items-center">
                                    <div class="badge rounded-pill bg-label-danger me-3 p-2">
                                        <i class="ti ti-users ti-sm"></i>
                                    </div>
                                    <div class="card-info">
                                        <h5 class="mb-0">{{ $Tab['customers'] }}</h5>
                                        <small>{{ __('titles.customers') }}</small>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-3 col-6">
                                <div class="d-flex align-items-center">
                                    <div class="badge rounded-pill bg-label-success me-3 p-2">
                                        <i class="ti ti-shopping-cart ti-sm"></i>
                                    </div>
                                    <div class="card-info">
                                        <h5 class="mb-0">{{ $Tab['products'] }} </h5>
                                        <small>{{ __('titles.products') }}</small>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!--/ Statistics -->
            <div class="col-12 col-xl-8  mb-4">
                  <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">{{ __('titles.status_deals') }} </h5>
                      <small>{{$total}} {{ __('titles.deal') }}</small>
                    </div>
                    <div class="card-body row g-3">
                      <div class="col-md-6">
                        <div id="StatusDeals"></div>
                      </div>
                      <div class="col-md-6 d-flex justify-content-around align-items-center">
                        @foreach ($colors as $key=>$color)
                          @php if($key==0 || $key==3) echo "<div>"; @endphp
                            <div class="d-flex align-items-baseline">
                            <span class="text-{{$color}} me-2"><i class="ti ti-circle-filled fs-6"></i></span>
                            <div>
                              <p class="mb-2">{{$labels[$key]}}</p>
                              <h5>{{$counts[$key]}}%</h5>
                            </div>
                          </div>
                        @php if($key==2 || $key==5) echo "</div>"; @endphp
                        @endforeach

                      </div>
                    </div>
                  </div>
                </div>
            <div class="col-xl-4 col-12">
                <div class="row">
                    <!-- Expenses -->
                    <div class="col-xl-6 mb-4 col-md-3 col-6">
                        <div class="card">
                            <div class="card-header pb-0">
                                <h5 class="card-title mb-0">{{$Tab['investors_pending']}}<small>/{{$Tab['investors']}}</small></h5>
                                <small class="text-muted">{{__('titles.investor')}}</small>
                            </div>
                            <div class="card-body">
                                <div id="pendingInvestors"></div>
                                <div class="mt-md-2 text-center mt-lg-3 mt-3">
                                    <small class="text-muted mt-3">{{__('titles.pending_review')}}</small>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-xl-6 mb-4 col-md-3 col-6">
                        <div class="card">
                            <div class="card-header pb-0">
                                <h5 class="card-title mb-0">{{$Tab['merchants_pending']}}<small>/{{$Tab['merchants']}}</small></h5>
                                <small class="text-muted">{{__('titles.merchant')}}</small>
                            </div>
                            <div class="card-body">
                                <div id="pendingMerchants"></div>
                                <div class="mt-md-2 text-center mt-lg-3 mt-3">
                                    <small class="text-muted mt-3">{{__('titles.pending_review')}}</small>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!--/ Expenses -->

                    <!-- Generated Leads -->
                    <div class="col-xl-12 mb-4 col-md-6">
                        <div class="card">
                            <div class="card-body">
                                <div class="d-flex justify-content-between">
                                    <div class="d-flex flex-column">
                                        <div class="card-title mb-auto">
                                            <h5 class="mb-1 text-nowrap">المسجلين في المنصة</h5>
                                            <small></small>
                                        </div>
                                        <div class="chart-statistics">
                                            <h3 class="card-title mb-1">{{ $Tab['merchants']+$Tab['investors']+$Tab['customers'] }}</h3>
                                            <small class="text-success text-nowrap fw-medium">صاحب حساب </small>
                                        </div>
                                    </div>
                                    <div id="UsersChart"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!--/ Generated Leads -->
                </div>
            </div>
              <div class="col-12 mb-4">
                  <div class="card">
                    <div class="card-header d-flex justify-content-between">
                      <div>
                        <h5 class="card-title mb-0">آخر أسبوع </h5>
                        <small class="text-muted">{{__('titles.count')}} {{__('titles.offers')}} / {{__('titles.count')}} {{__('titles.the')}}{{__('titles.investments')}}</small>
                      </div>
                      <!--
                      <div class="dropdown">
                        <button
                          type="button"
                          class="btn dropdown-toggle px-0"
                          data-bs-toggle="dropdown"
                          aria-expanded="false">
                          <i class="ti ti-calendar"></i>
                        </button>
                        <ul class="dropdown-menu dropdown-menu-end">
                          <li>
                            <a href="javascript:void(0);" class="dropdown-item d-flex align-items-center">Today</a>
                          </li>
                          <li>
                            <a href="javascript:void(0);" class="dropdown-item d-flex align-items-center">Yesterday</a>
                          </li>
                          <li>
                            <a href="javascript:void(0);" class="dropdown-item d-flex align-items-center"
                              >Last 7 Days</a
                            >
                          </li>
                          <li>
                            <a href="javascript:void(0);" class="dropdown-item d-flex align-items-center"
                              >Last 30 Days</a
                            >
                          </li>
                          <li>
                            <hr class="dropdown-divider" />
                          </li>
                          <li>
                            <a href="javascript:void(0);" class="dropdown-item d-flex align-items-center"
                              >Current Month</a
                            >
                          </li>
                          <li>
                            <a href="javascript:void(0);" class="dropdown-item d-flex align-items-center">Last Month</a>
                          </li>
                        </ul>
                      </div>-->
                    </div>
                    <div class="card-body">
                      <div id="lineAreaChart"></div>
                    </div>
                  </div>
                </div>

            <!-- Popular Product -->
            <div class="col-md-6 col-xl-6 mb-4">
                <div class="card h-100">
                    <div class="card-header d-flex justify-content-between">
                        <div class="card-title m-0 me-2">
                            <h5 class="m-0 me-2">{{__('titles.popular_products')}}</h5>
                            <small class="text-muted">{{__('titles.from')}} {{__('titles.total')}} {{ $Tab['products'] }} {{__('titles.product')}}</small>
                        </div>
                        <!--<div class="dropdown">
                            <button class="btn p-0" type="button" id="popularProduct" data-bs-toggle="dropdown"
                                aria-haspopup="true" aria-expanded="false">
                                <i class="ti ti-dots-vertical ti-sm text-muted"></i>
                            </button>
                            <div class="dropdown-menu dropdown-menu-end" aria-labelledby="popularProduct">
                                <a class="dropdown-item" href="javascript:void(0);">Last 28 Days</a>
                                <a class="dropdown-item" href="javascript:void(0);">Last Month</a>
                                <a class="dropdown-item" href="javascript:void(0);">Last Year</a>
                            </div>
                        </div>-->
                    </div>
                    <div class="card-body">
                        <ul class="p-0 m-0">
                            @foreach ($PopolarProducts as $key=>$prod)
                                <li class="d-flex mb-4 pb-1">
                                    <div class="me-3">
                                        <img src="{{ count($prod->product_pictures)>0 ? URL::asset($prod->product_pictures[0]->picture) : '' }}" alt="User" class="rounded"
                                        onerror="this.onerror=null;this.src='{{ URL::asset('users/avatar.png') }}';"
                                            width="46" />
                                    </div>
                                    <div class="d-flex w-100 flex-wrap align-items-center justify-content-between gap-2">
                                        <div class="me-2">
                                            <h6 class="mb-0">{{$prod->name}}</h6>
                                            <small class="text-muted d-block">SKU: {{$prod->sku}}</small>
                                        </div>
                                        <div class="user-progress d-flex align-items-center gap-1">
                                            <p class="mb-0 fw-medium">{{$prod->merchant->company_name}}</p>
                                        </div>
                                    </div>
                                </li>
                                @php if($key==5) break; @endphp
                            @endforeach
                            
                        </ul>
                    </div>
                </div>
            </div>
            <!--/ Popular Product -->
            <!-- Popular Product -->
            <div class="col-md-6 col-xl-4 mb-4">
                <div class="card h-100">
                    <div class="card-header d-flex justify-content-between">
                        <div class="card-title m-0 me-2">
                            <h5 class="m-0 me-2">{{__('titles.investors')}} </h5>
                            <small class="text-muted">{{__('titles.investor')}} {{__('titles.by')}} {{__('titles.city')}}</small>
                        </div>
                    </div>
                    <div class="card-body">
                        <ul class="timeline timeline-advance timeline-advance mb-2 pb-1">
                            @foreach ($InvestorsCities as $inv)
                                <li class="timeline-item ps-4 border-transparent">
                                            <span class="timeline-indicator timeline-indicator-danger">
                                                <i class="ti ti-map-pin "></i>
                                            </span>
                                            <div class="timeline-event ps-0 pb-0">
                                                <div class="timeline-header">
                                                    <small class="text-success text-uppercase fw-medium">{{$inv['city_name']}}</small>
                                                </div>
                                                <h6 class="mb-0">{{$inv['count_investor']}} {{__('titles.investor')}}</h6>
                                                <p class="text-muted mb-0 text-nowrap">{{__('titles.total_invested')}} :  {{$inv['total_invested']}}</p>
                                            </div>
                                        </li>
                            @endforeach
                            
                        </ul>
                    </div>
                </div>
            </div>
            <!--/ Popular Product -->
        </div>
    </div>

@endsection