@extends('cityadmin.layout.app')

@section('preload-section')
{{-- <link href="{{url('assets/theme_assets/plugins/bootstrap-daterangepicker/daterangepicker.css')}}" rel="stylesheet" />
    
    <link href="{{url('assets/theme_assets/plugins/datatables.net-bs4/css/dataTables.bootstrap4.min.css')}}" rel="stylesheet" />
    <link href="{{url('assets/theme_assets/plugins/datatables.net-responsive-bs4/css/responsive.bootstrap4.min.css')}}" rel="stylesheet" />
    <link href="{{url('assets/theme_assets/plugins/datatables.net-buttons-bs4/css/buttons.bootstrap4.min.css')}}" rel="stylesheet" />
    <link href="{{url('assets/theme_assets/plugins/bootstrap-table/dist/bootstrap-table.min.css')}}" rel="stylesheet" /> --}}
    <style>
     body {
          font-family: 'Nunito', sans-serif;
      }
      .card-header.card-header-primary {
        padding: 10px !important;
      }
      .alert {
        padding: 6px !important;
      }
    .dataTables_info{
        display:none;
    }
    .page-item.active .page-link {
        color: #fff!important;
        background-color: gray;
        border-color: gray;
        z-index: 0 !important;
    }
    .app-footer-fixed .app-footer {
        z-index: 999 !important;
    }
    .app-sidebar .menu .menu-item.active:not(.has-sub)>.menu-link {
      color: #1f6bff;
      background-color: white !important;
      font-weight: 600;
      background: 0 0;
    }
    .material-icons{
      margin-top:0px !important;
      margin-bottom:0px !important;
    }
    </style>
@endsection

@section('content')
<div class="row">
  <div class="col-md-7">
    <h1 class="page-header mb-3">
        Hi, {{$cityadmin->name}}. <small>{{ __('keywords.Cityadmin panel greeting')}}.</small>
    </h1>
  </div>
	<div class="col-md-5" align="right">
    <div class="col-md-4" align="right">
      <select class="form-control changeLang">
        <option value="en" {{ session()->get('locale') == 'en'||config('app.locale')=="en" ? 'selected' : '' }}>English</option>
        <option value="bu" {{ session()->get('locale') == 'bu'||config('app.locale')=="bu" ? 'selected' : '' }}>Bulgarian</option>
        <option value="in" {{ session()->get('locale') == 'in'||config('app.locale')=="in" ? 'selected' : '' }}>Hindi</option>
        <option value="ch" {{ session()->get('locale') == 'ch'||config('app.locale')=="ch" ? 'selected' : '' }}>Chinese</option>
      </select>
    </div>
  </div>
</div>
<!-- BEGIN row -->
      <div class="row">
        <!-- BEGIN col-6 -->
        <div class="col-xl-6">
          <!-- BEGIN card -->
          <div class="card text-white-transparent-7 mb-3 overflow-hidden">
            <!-- BEGIN card-img-overlay -->
            <div class="card-img-overlay d-block d-lg-none bg-blue rounded"></div>
            <!-- END card-img-overlay -->
            
            <!-- BEGIN card-img-overlay -->
            <div class="card-img-overlay d-none d-md-block bg-blue rounded" style="background-image: url({{url('assets/theme_assets/img/bg/wave-bg.png')}}); background-position: right bottom; background-repeat: no-repeat; background-size: 100%;"></div>
            <!-- END card-img-overlay -->
            
            <!-- BEGIN card-img-overlay -->
            <div class="card-img-overlay d-none d-md-block bottom-0 top-auto">
              <div class="row">
                <div class="col-md-8 col-xl-6"></div>
                <div class="col-md-4 col-xl-6 mb-n2">
                  <img src="{{url('assets/theme_assets/img/page/dashboard.svg')}}" alt="" class="d-block ml-n3 mb-5" style="max-height: 310px" />
                </div>
              </div>
            </div>
            <!-- END card-img-overlay -->
            
            <!-- BEGIN card-body -->
            <div class="card-body position-relative">
              <!-- BEGIN row -->
              <div class="row">
                <!-- BEGIN col-8 -->
                <div class="col-md-8">
                  <!-- stat-top -->
                  <div class="d-flex">
                    <div class="mr-auto">
                      <h5 class="text-white-transparent-8 mb-3">{{ __('keywords.This Week Earning')}}</h5>
                      <h3 class="text-white mt-n1 mb-1">{{round($this_week,2)}}</h3>
                      <p class="mb-1 text-white-transparent-6 text-truncate">
                       @if($difference >= 0) <i class="fa fa-caret-up"></i>@else<i class="fa fa-caret-down"></i>@endif <b>{{round($difference,2)}} %</b>  @if($difference >= 0) {{ __('keywords.increase')}}@else {{ __('keywords.decrease')}} @endif {{ __('keywords.compare to last week')}}
                      </p>
                    </div>
                  </div>
                  
                  <hr class="hr-transparent bg-white-transparent-2 mt-3 mb-3" />
                  
                  <!-- stat-bottom -->
                  <div class="row">
                    <div class="col-6 col-lg-5">
                      <div class="mt-1">
                        <i class="fa fa-fw fa-shopping-bag fs-28px text-black-transparent-5"></i>
                      </div>
                      <div class="mt-1">
                        <div>{{ __('keywords.Store Earnings')}}</div>
                        <div class="font-weight-600 text-white">{{round($store_earnings,2)}}</div>
                      </div>
                    </div>
                    <div class="col-6 col-lg-5">
                      <div class="mt-1">
                        <i class="fa fa-fw fa-retweet fs-28px text-black-transparent-5"></i>
                      </div>
                      <div class="mt-1">
                        <div>{{ __('keywords.Admin Earnings')}}</div>
                        <div class="font-weight-600 text-white">{{round($admin_earnings,2)}}</div>
                      </div>
                    </div>
                  </div>
                  
                  <hr class="hr-transparent bg-white-transparent-2 mt-3 mb-3" />
                  
                  <div class="mt-3 mb-2">
                    <a href="{{route('finance')}}" class="btn btn-yellow btn-rounded btn-sm pl-5 pr-5 pt-2 pb-2 fs-14px font-weight-600"><i class="fa fa-wallet mr-2 ml-n2"></i>{{ __('keywords.Go To Store Earnings')}}</a>
                  </div>
                  <p class="fs-12px">
                    {{ __('keywords.It Takes You To The Store Earnings Section')}}.
                  </p>
                </div>
                <!-- END col-8 -->
                
                <!-- BEGIN col-4 -->
                <div class="col-md-4 d-none d-md-block" style="min-height: 380px;"></div>
                <!-- END col-4 -->
              </div>
              <!-- END row -->
            </div>
            <!-- END card-body -->
          </div>
          <!-- END card -->
        </div>
        <!-- END col-6 -->
        
        <!-- BEGIN col-6 -->
        <div class="col-xl-6">
          <!-- BEGIN row -->
          <div class="row">
            <!-- BEGIN col-6 -->
            <div class="col-sm-6">
              <!-- BEGIN card -->
              <div class="card mb-3 overflow-hidden fs-13px border-0 bg-gradient-custom-orange" style="min-height: 202px;">
                <!-- BEGIN card-img-overlay -->
                <div class="card-img-overlay mb-n4 mr-n4 d-flex" style="bottom: 0; top: auto;">
                  <img src="assets/img/icon/order.svg" alt="" class="ml-auto d-block mb-n3" style="max-height: 105px" />
                </div>
                <!-- END card-img-overlay -->
                
                <!-- BEGIN card-body -->
                <div class="card-body position-relative">
                  <h5 class="text-white-transparent-8 mb-3 fs-16px">{{ __('keywords.New Orders')}}</h5>
                  <h3 class="text-white mt-n1">{{$this_week_ord}}</h3>
                  <div class="progress bg-black-transparent-5 mb-2" style="height: 6px">
                       @if($diff_ord >= 0)
                   <div class="progrss-bar progress-bar-striped bg-white" style="width:0%" ></div>
                    @else
                     <div class="progrss-bar progress-bar-striped bg-red" style="width:0%"></div>
                     @endif
                  </div>
                  <div><div class="text-white-transparent-8 mb-4">  @if($diff_ord >= 0) <i class="fa fa-caret-up"></i>@else<i class="fa fa-caret-down"></i>@endif{{round($diff_ord,2)}} %  @if($diff_ord >= 0) {{ __('keywords.increase')}}@else {{ __('keywords.decrease')}} @endif<br />{{ __('keywords.compare to last week')}}</div>
                      </div>
                </div>
                <!-- BEGIN card-body -->
              </div>
              <!-- END card -->
              
              <!-- BEGIN card -->
              <div class="card mb-3 overflow-hidden fs-13px border-0 bg-gradient-custom-teal" style="min-height: 202px;">
                <!-- BEGIN card-img-overlay -->
                <div class="card-img-overlay mb-n4 mr-n4 d-flex" style="bottom: 0; top: auto;">
                  <img src="assets/img/icon/visitor.svg" alt="" class="ml-auto d-block mb-n3" style="max-height: 105px" />
                </div>
                <!-- END card-img-overlay -->
                
                <!-- BEGIN card-body -->
                <div class="card-body position-relative">
                  <h5 class="text-white-transparent-8 mb-3 fs-16px">{{ __('keywords.Cancelled Orders')}}</h5>
                  <h3 class="text-white mt-n1">{{$this_week_can}}</h3>
                  <div class="progress bg-black-transparent-5 mb-2" style="height: 6px">
                    @if($diff_can >= 0)
                   <div class="progrss-bar progress-bar-striped bg-white" style="width:0%" ></div>
                    @else
                     <div class="progrss-bar progress-bar-striped bg-red" style="width:0%"></div>
                     @endif
                  </div>
                  <div><div class="text-white-transparent-8 mb-4">  @if($diff_can >= 0) <i class="fa fa-caret-up"></i>@else<i class="fa fa-caret-down"></i>@endif{{round($diff_can,2)}} %  @if($diff_can >= 0) {{ __('keywords.increase')}}@else {{ __('keywords.decrease')}} @endif<br />{{ __('keywords.compare to last week')}}</div></div>
                </div>
                <!-- END card-body -->
              </div>
              <!-- END card -->
            </div>
            <!-- END col-6 -->
            
            <!-- BEGIN col-6 -->
            <div class="col-sm-6">
              <!-- BEGIN card -->
              <div class="card mb-3 overflow-hidden fs-13px border-0 bg-gradient-custom-pink" style="min-height: 202px;">
                <!-- BEGIN card-img-overlay -->
                <div class="card-img-overlay mb-n4 mr-n4 d-flex" style="bottom: 0; top: auto;">
                  <img src="assets/img/icon/email.svg" alt="" class="ml-auto d-block mb-n3" style="max-height: 105px" />
                </div>
                <!-- END card-img-overlay -->
                
                <!-- BEGIN card-body -->
                <div class="card-body position-relative">
                  <h5 class="text-white-transparent-8 mb-3 fs-16px">{{ __('keywords.Pending Orders')}}</h5>
                  <h3 class="text-white mt-n1">{{$this_week_pen}}</h3>
                  <div class="progress bg-black-transparent-5 mb-2" style="height: 6px">
                    @if($diff_pen >= 0)
                   <div class="progrss-bar progress-bar-striped bg-white" style="width:0%" ></div>
                    @else
                     <div class="progrss-bar progress-bar-striped bg-red" style="width:0%"></div>
                     @endif
                  </div>
                
                  <div><div class="text-white-transparent-8 mb-4">  @if($diff_pen >= 0) <i class="fa fa-caret-up"></i>@else<i class="fa fa-caret-down"></i>@endif{{round($diff_pen, 2)}} %  @if($diff_pen >= 0) {{ __('keywords.increase')}}@else {{ __('keywords.decrease')}} @endif<br />{{ __('keywords.compare to last week')}}</div></div>
                </div>
                <!-- END card-body -->
              </div>
              <!-- END card -->
              
              <!-- BEGIN card -->
              <div class="card mb-3 overflow-hidden fs-13px border-0 bg-gradient-custom-indigo" style="min-height: 202px;">
                <!-- BEGIN card-img-overlay -->
                <div class="card-img-overlay mb-n4 mr-n4 d-flex" style="bottom: 0; top: auto;">
                  <img src="assets/img/icon/browser.svg" alt="" class="ml-auto d-block mb-n3" style="max-height: 105px" />
                </div>
                <!-- end card-img-overlay -->
                
                <!-- BEGIN card-body -->
                <div class="card-body position-relative">
                  <h5 class="text-white-transparent-8 mb-3 fs-16px">{{ __('keywords.This Week')}} {{ __('keywords.App Users')}}</h5>
                  <h3 class="text-white mt-n1">{{$this_week_usr}}</h3>
                  <div class="progress bg-black-transparent-5 mb-2" style="height: 6px">
                    @if($diff_usr >= 0)
                   <div class="progrss-bar progress-bar-striped bg-white" style="width:0%" ></div>
                    @else
                     <div class="progrss-bar progress-bar-striped bg-red" style="width:0%"></div>
                     @endif
                  </div>
                  <div><div class="text-white-transparent-8 mb-4">  @if($diff_usr >= 0) <i class="fa fa-caret-up"></i>@else<i class="fa fa-caret-down"></i>@endif{{round($diff_usr,2)}} %  @if($diff_usr >= 0) {{ __('keywords.increase')}}@else {{ __('keywords.decrease')}} @endif<br />{{ __('keywords.compare to last week')}}</div></div>
                </div>
                <!-- END card-body -->
              </div>
              <!-- END card -->
            </div>
            <!-- BEGIN col-6 -->
          </div>
          <!-- END row -->
        </div>
        <!-- END col-6 -->


         
      </div>
      <!-- END row -->
      	<!-- BEGIN row -->
			<div class="row">
				<!-- BEGIN col-6 -->
				<div class="col-xl-6">
					<!-- BEGIN card -->
					<div class="card mb-3">
						<!-- BEGIN card-body -->
						<div class="card-body">
							<div class="d-flex align-items-center mb-4">
								<div class="flex-grow-1">
									<h5 class="mb-1">{{ __('keywords.Bestseller')}}</h5>
									<div class="fs-13px">{{ __('keywords.Top product sales this week')}}</div>
								</div>
							
							</div>
							@if(count($topselling)>0)
                               @php $i=1; @endphp
							@foreach($topselling as $topsellings)