@extends('layout')

@section('css')
<style>
.scroll-name {
  white-space: nowrap;
  overflow: hidden;
  position: relative;
}

.scroll-name::after {
  content: '';
  position: absolute;
  right: 0;
  width: 10px;
  height: 100%;
  background: linear-gradient(to right, transparent, white);
}

.item {
  background: #eee;
  padding: 20px;
  border-radius: 8px;
  text-align: center;
}

.item-container {
  display: grid;
  grid-auto-flow: column;
  grid-template-rows: repeat(2, 1fr); /* exactly 2 rows */
  grid-auto-columns: minmax(150px, 1fr); /* fill top row first, then bottom */
  gap: 20px;
  justify-content: center;
}

@media (max-width: 500px) {
  .item-container {
    grid-auto-flow: row; /* reset to normal flow */
    grid-template-rows: auto; 
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  }
}

	</style>
@endsection

@section('content')

	<!-- Page header -->
	{{-- <div class="page-header page-header-light">
		<div class="page-header-content header-elements-md-inline">
			<div class="page-title d-flex">
				<h3 class="font-weight-bold"><span class="font-weight-light">Home -</span> Dashboard</h3>
				<a href="#" class="header-elements-toggle text-default d-md-none"><i class="icon-more"></i></a>
			</div>
		</div>
	</div> --}}
	<!-- /page header -->

	<!-- Content area -->
	@php
		$asset = null;
		if (in_array(\Auth::user()->role, [51, 52])) {
			$asset = 'global_assets/images/bg-dashboard.jpg';
		} 
		if (in_array(\Auth::user()->role,[53])) {	
			$asset = 'global_assets/images/bg-dashboard-mte.jpg';
		}
	@endphp
	<div class="content" 
	style="background-image: url('{{ asset($asset) }}');
		background-repeat: no-repeat;
		background-size: cover;
		background-position: center;
		background-attachment: fixed;
		"
	>


		<!-- Quick stats boxes -->
		<div class="row">

			{{-- role customer --}}
			@if (\Auth::user()->role == 99 && $receipt)
			
			<div class="col-md-6 card border-top-success">
				<div class="card-header">
					<h5 class="card-title">
						<i class="icon-file-text2 mr-1"></i> Resi Terakhir
					</h5>
				</div>
				<div class="card-body">
					
					<ul class="list-group list-group-flush border-top">
						<li class="list-group-item">
							<span class="font-weight-semibold">No. Resi</span>
							<div class="ml-auto">{{$receipt->no_resi}}</div>
						</li>
						<li class="list-group-item">
							<span class="font-weight-semibold">Tanggal & Waktu dibuat</span>
							<div class="ml-auto">{{$receipt->created_at}}</div>
						</li>
						<li class="list-group-item">
							<span class="font-weight-semibold">No. China Local Express</span>
							<div class="ml-auto">{{$receipt->no_local_cina}}</div>
						</li>
						<li class="list-group-item">
							<span class="font-weight-semibold">Shipping Marks</span>
							<div class="ml-auto">{{$receipt->shipping_mark}}</div>
						</li>

						<li class="list-group-item">
							<span class="font-weight-semibold">Shipping Instruction</span>
							<div class="ml-auto">{{$receipt->shipping_to}}</div>
						</li>

						<li class="list-group-item">
							<span class="font-weight-semibold">Status</span>
							<div class="ml-auto">{{config('custom.status_carton.'.$receipt->status_karton)}}</div>
						</li>
					</ul>

				</div>
			</div>

			@if (\Auth::user()->coload_id != 3)
				<div class="col-md-6">
					<div class="card border-top-success">
						<div class="card-body text-center">
							<a href="{{config('custom.url_tracking_coload')[\Auth::user()->coload_id]}}/?r={{$receipt->no_resi}}" class="btn btn-success" target="_blank">
								<i class="fas fa-map-marked-alt"></i> Track Resi
							</a>
						</div>
					</div>
				</div>
			@endif
			
			@endif

		</div>
		<!-- /quick stats boxes -->

		{{-- Role Dashboard --}}
		@if (in_array(\Auth::user()->role,[51, 52, 53]))

			<div class="row mb-4">
				<div class="col-md-2 text-center">
					@if (in_array(\Auth::user()->role,[51, 52]))						
						<img src="{{ asset('global_assets/images/logo_antara_2.png') }}" style="width: 180px" alt="">
					@endif
					@if (in_array(\Auth::user()->role,[53]))						
						<img src="{{ asset('global_assets/images/logo_mte_white.png') }}" style="width: 180px" alt="">
					@endif
				</div>
				<div class="col">
					<h1 class="font-weight-semibold text-white" style="font-style: italic">SALES TEAM LEADERBOARD</h1>
				</div>
				<div class="col text-right">
					<h1 class="font-weight-semibold text-white" style="font-style: italic">
						@if (in_array(\Auth::user()->role,[51, 52]))						
							@if (\Auth::user()->role == 51)
								JAKARTA
							@endif
							@if (\Auth::user()->role == 52)
								SEMARANG
							@endif
						@endif
						@if (in_array(\Auth::user()->role,[53]))						
							JAKARTA
						@endif
					</h1>
					<h3 class="font-weight-semibold text-white">{{\Carbon\Carbon::now()->locale('id_ID')->translatedFormat('l, j F Y')}}</h3>
				</div>
			</div>
			
			<br>
			
			{{-- <div class="row">
				<div class="col-lg-3 col-md-4"> --}}
					<div style="
						display: flex;
						gap: 30px;
						justify-content: space-between;
						flex-wrap: wrap;
						">
						@php
							$loops = 0;
							$color = null;
							$bgcolor = null;
							if (in_array(\Auth::user()->role,[51, 52]))	{
								$color = '#033060';
								$bgcolor = '#0f7afe';
							}
							if (in_array(\Auth::user()->role,[53]))	{
								$color = '#320f3a';
								$bgcolor = '#320f3a';
							}
						@endphp
						@foreach ($dashboards[0] as $key => $dash)


							{{--hardcode exclude sales  --}}
							@php
							// restusales
							// rekkamte
							// lukaseast
							// lukaseastexpress
							// heruexim
							// hafivahafiva
							// pittonmarketing
							// lukasLSP
							// yogaantara
							// andrewandrew
							// Andrewjo
							// fitrieka
							// sherinaantara
							// hendihendi
							// benonessales
							// yuliodp
							// registerantara
							// registereast
								$exclude_id = [
									254,
									2382,
									611,
									691,
									3809,
									7590,
									7855,
									3,
									2980,
									44,
									2991,
									9284,
									1435,
									1021,
									301,
									10647,
									2001,
									2002,
									20922,
									20923
								];
							@endphp
							@if (in_array($key,$exclude_id))
								@continue
							@endif

							@if ($loop->iteration == 5)
								@break
							@endif

							@php
								$loops++;
							@endphp
							
							<div class="card mb-3 mt-1" style="width: 300px;height: 300px;border-radius: 20px;box-shadow: 1px 1px 5px;word-wrap: normal;color: {{$color}}">
								<div class="card-body" style="padding: 15px">
									
									<div class="row" style="margin-bottom: -40px">
										<div class="col-md-5">
											
											<h3 style="margin-top: -20px">
												<span class="px-2 py-2" style="background-color: {{$bgcolor}};
												color: white;
												font-weight: bold;
												border-radius: 8px">
													{{number_rank($loops)}}
												</span>
											</h3>
										</div>
									</div>
		
									<div>
										<table style="width: 100%;border-collapse: collapse">
											<tr>
												<td style="width: 40%">
													<span>
														{{config('custom.role.'.$dash['role'])}}
													</span>
													<br>
													<div class="scroll-name">
														@php
															$maxLength = 9; // max characters you want to show
															$name = $dash['nama'];
		
															$shortName = substr($name, 0, $maxLength);
														@endphp
		
														<h3 class="font-weight-semibold text-ellipsis">{{$shortName}}</h3>
													</div>
												</td>
												<td>
													@if ($dash['foto_user'] != null)
													<img src="{{asset($dash['foto_user'])}}" style="object-fit: contain;width: 100%;height: 200px" alt="">
													@else
														@if (in_array(\Auth::user()->role,[51, 52]))						
															<img src="{{asset('/global_assets/images/logo_antara.png')}}" style="object-fit: contain;width: 100%;height: 200px" alt="">
														@endif
														@if (in_array(\Auth::user()->role,[53]))																			
															<img src="{{asset('/global_assets/images/logo_mte_2.png')}}" style="object-fit: contain;width: 90%;height: 200px" alt="">
														@endif
													@endif
												</td>
											</tr>
		
										</table>
										<table style="width: 100%;border-collapse: collapse;font-weight: bold">
		
											<tr>
												<td style="width: 20%"><i class="icon icon-box"></i></td>
												<td style="width: 55%">LAUT / CBM</td>
												<td class="text-right text-danger" style="width: 25%">{{$dash['cbm']}}</td>
											</tr>
											<tr>
												<td><i class="icon icon-airplane3"></i></td>
												<td>UDARA / KG</td>
												<td class="text-right text-danger">{{$dash['kg']}}</td>
											</tr>
											<tr>
												<td><i class="icon icon-cart5"></i></td>
												<td>ALL JASTIP</td>
												<td class="text-right text-danger">{{ribuan($dash['all_jastip'])}}</td>
											</tr>
											<tr>
												<td><i class="icon icon-user-plus"></i></td>
												<td>NEW CUSTOMER</td>
												<td class="text-right text-danger">{{ribuan($dash['new_customer'])}}</td>
											</tr>
		
										</table>
									</div>
		
								</div>
							</div>
								
						@endforeach
					</div>

					<div style="
						display: flex;
						gap: 30px;
						justify-content: space-between;
						flex-wrap: wrap;
						">
						@foreach ($dashboards[1] as $key => $dash)

							@if ($loop->iteration == 5)
								@break
							@endif
							
							@php
								$loops++;
							@endphp
							
							<div class="card mb-3 mt-1" style="width: 300px;height: 300px;border-radius: 20px;box-shadow: 1px 1px 5px;word-wrap: normal;color: {{$color}}">
								<div class="card-body" style="padding: 15px">
									
									<div class="row" style="margin-bottom: -40px">
										<div class="col-md-5">
											
											<h3 style="margin-top: -20px">
												<span class="px-2 py-2" style="background-color: {{$bgcolor}};
												color: white;
												font-weight: bold;
												border-radius: 8px">
													{{number_rank($loops)}}
												</span>
											</h3>
										</div>
									</div>
		
									<div>
										<table style="width: 100%;border-collapse: collapse">
											<tr>
												<td style="width: 40%">
													<span>
														{{config('custom.role.'.$dash['role'])}}
													</span>
													<br>
													<div class="scroll-name">
														@php
															$maxLength = 9; // max characters you want to show
															$name = $dash['nama'];
		
															$shortName = substr($name, 0, $maxLength);
														@endphp
		
														<h3 class="font-weight-semibold text-ellipsis">{{$shortName}}</h3>
													</div>
												</td>
												<td>
													@if ($dash['foto_user'] != null)
													<img src="{{asset($dash['foto_user'])}}" style="object-fit: contain;width: 100%;height: 200px" alt="">
													@else
														@if (in_array(\Auth::user()->role,[51, 52]))						
															<img src="{{asset('/global_assets/images/logo_antara.png')}}" style="object-fit: contain;width: 100%;height: 200px" alt="">
														@endif
														@if (in_array(\Auth::user()->role,[53]))																			
															<img src="{{asset('/global_assets/images/logo_mte_2.png')}}" style="object-fit: contain;width: 90%;height: 200px" alt="">
														@endif
													@endif
												</td>
											</tr>
		
										</table>
										<table style="width: 100%;border-collapse: collapse;font-weight: bold">
		
											<tr>
												<td style="width: 20%"><i class="icon icon-box"></i></td>
												<td style="width: 55%">LAUT / CBM</td>
												<td class="text-right text-danger" style="width: 25%">{{$dash['cbm']}}</td>
											</tr>
											<tr>
												<td><i class="icon icon-airplane3"></i></td>
												<td>UDARA / KG</td>
												<td class="text-right text-danger">{{$dash['kg']}}</td>
											</tr>
											<tr>
												<td><i class="icon icon-cart5"></i></td>
												<td>ALL JASTIP</td>
												<td class="text-right text-danger">{{ribuan($dash['all_jastip'])}}</td>
											</tr>
											<tr>
												<td><i class="icon icon-user-plus"></i></td>
												<td>NEW CUSTOMER</td>
												<td class="text-right text-danger">{{ribuan($dash['new_customer'])}}</td>
											</tr>
		
										</table>
									</div>
		
								</div>
							</div>
								
						@endforeach
					</div>
					{{-- </div>
			</div> --}}
		@endif

		@if (in_array(\Auth::user()->role,[51, 52, 53]))
			<div class="row mt-5" style="bottom: 0">
				<div class="col text-right">
					<a href="{{ url('/logout') }}" class="btn btn-sm btn-icon btn-danger"><i class="icon-switch2"></i></a>
				</div>
			</div>
		@endif

	</div>

@endsection

@section('js')

<!-- Theme JS files -->
<script src="{{asset('global_assets/js/plugins/visualization/d3/d3.min.js') }}"></script>
<script src="{{asset('global_assets/js/plugins/visualization/d3/d3_tooltip.js') }}"></script>
<script src="{{asset('global_assets/js/plugins/forms/styling/switchery.min.js') }}"></script>
<script src="{{asset('global_assets/js/plugins/forms/selects/bootstrap_multiselect.js') }}"></script>
<script src="{{asset('global_assets/js/plugins/ui/moment/moment.min.js') }}"></script>

<script src="{{asset('assets/js/app.js') }}"></script>
<script src="{{asset('global_assets/js/demo_pages/dashboard.js') }}"></script>
<!-- /theme JS files -->

@endsection