@extends('layouts.main')

@section('title', 'Übersicht')

@section('content')
<div class="container dashboard">
		<div class="col-xl-9 w-xl-76">
			<div class="row">
	
				<div class="container-header text-center container-title mb-3 mt-2">
					<h2 class="mb-0">
						@php $aWeekdayNamesDE = ['Sonntag', 'Montag', 'Dienstag', 'Mittwoch', 'Donnerstag', 'Freitag', 'Samstag']; @endphp
						@php $aYearNamesDE = 	['Jan', 'Feb', 'März', 'Apr', 'Mai', 'Juni', 'Juli', 'Aug', 'Sep', 'Okt', 'Nov', 'Dez']; @endphp
						<span class="fs-6">{{ $aWeekdayNamesDE[date('w')] }}{{ date(', d') }} {{ $aYearNamesDE[date('n')-1] }}.</span>

						<br>

						@if(date('G') >= 3 	&& date('G') < 11) 	Guten Morgen, 	@endif
						@if(date('G') >= 11 && date('G') < 13) 	Mahlzeit, 		@endif
						@if(date('G') >= 13 && date('G') < 16) 	Guten Tag, 		@endif
						@if(date('G') >= 0 	&& date('G') < 3) 	Guten Abend, 	@endif
						@if(date('G') >= 16) 					Guten Abend, 	@endif
						
						{{ Auth::user()->first_name }}

					</h2>

						<br>

						<div class="btn-group btn-group-sm" role="group" aria-label="Basic outlined example">
							<button type="button" class="btn btn-secondary collapsed" data-bs-selected="collapse"
									data-bs-target="#collapseDashboard" aria-expanded="true" aria-controls="collapseDashboard">
								Funktionen
							</button>
							<button type="button" class="btn btn-outline-secondary" data-bs-selected="collapse"
									data-bs-target="#collapseOverview" aria-expanded="true" aria-controls="collapseOverview">
								Übersicht
							</button>
							<button type="button" class="btn btn-outline-secondary" data-bs-selected="collapse"
									data-bs-target="#collapseNews" aria-expanded="true" aria-controls="collapseNews">
								Neues
							</button>
							<button type="button" class="btn btn-outline-secondary" data-bs-selected="collapse"
									data-bs-target="#collapseStatistic" aria-expanded="true" aria-controls="collapseStatistic">
								Statistik
							</button>
					  	</div>
				</div>
				
					@include('flash_message')

			</div>

			<div class="collapse show text-center" id="collapseDashboard">

				<div class="d-flex flex-wrap justify-content-center mt-4">

					<div class="m-2 icon-container">
						<a class="btn btn-outline-success pt-3" href="{{ route('orders.create') }}">
							<span class="rounded icon py-5 px-2 mt-2 bg-light bg-gradient">
								@includeIf('layouts.components.icon', [ 'name' => 'dentist (3)', 'width' => 100 ])
							</span>
							<br>
							<p class="mt-3">neuen Auftrag erfassen</p>
						</a>
					</div>
					
					<div class="m-2 icon-container">
						<a href="{{ route('orders.scan_order') }}" class="btn btn-outline-secondary pt-3">
							<span class="rounded icon py-5 px-2 mt-2 bg-light bg-gradient">
								@includeIf('layouts.components.icon', [ 'name' => 'qr-code', 'width' => 100 ])
							</span>
							<br>
							<p class="mt-3">Auftrag weiter verarbeiten</p>
						</a>
					</div>

				</div>

				

			</div>

			<div class="collapse" id="collapseOverview">

				{{-- ROW 1 --}}
				<div class="row"> 
					<div class="col-xl-4 mb-4">
						<div class="card">
							<div class="card-header textcolor-blue">
								<i class="fa-solid fa-upload"></i>
								<br>
								neu eingegangene Uploads
							</div>

							<div class="card-body vh-30">
								
								

							</div>
						</div>
					</div>

					<div class="col-xl-4 mb-4">
						<div class="card">
							<div class="card-header textcolor-grey">
								<i class="fa-solid fa-clipboard-list"></i>
								<br>
								Shipping Notice
							</div>

							<div class="card-body vh-30">
								
								

							</div>
						</div>
					</div>

					<div class="col-xl-4 mb-4">
						<div class="card">
							<div class="card-header textcolor-red">
								<i class="fa-solid fa-retweet"></i>
								<br>
								gemeldete Reklamationen
							</div>

							<div class="card-body vh-30">
								
								

							</div>
						</div>
					</div>
				</div>

				{{-- ROW 2 --}}
				<div class="row">
					<div class="col-xl-4 mb-4">
						<div class="card">
							<div class="card-header textcolor-red">
								<i class="fa-solid fa-person-circle-question"></i>
								<br>
								offene Fragen
							</div>

							<div class="card-body vh-30">
								
								

							</div>
						</div>
					</div>

					<div class="col-xl-4 mb-4">
						<div class="card">
							<div class="card-header textcolor-green">
								<i class="fa-solid fa-bars-progress"></i>
								<br>
								Aufträge in Bearbeitung
							</div>

							<div class="card-body vh-30">
								
								

							</div>
						</div>
					</div>

					<div class="col-xl-4 mb-4">
						<div class="card">
							<div class="card-header textcolor-yellow">
								<i class="fa-solid fa-calendar-week"></i>
								<br>
								Wochenendspecial
							</div>

							<div class="card-body vh-30">
								
								

							</div>
						</div>
					</div>
				</div>

			</div>

		</div>

	</div>
</div>


@endsection


@section('js-scripts')

	<script>
		$('button[data-bs-selected="collapse"]').on('click', function(){
			$(this).parent().children('button[data-bs-selected="collapse"]').removeClass('btn-secondary').addClass('btn-outline-secondary');
			$(this).addClass('btn-secondary').removeClass('btn-outline-secondary');
			$('.collapse').removeClass('show');
			$( $(this).attr('data-bs-target') ).addClass('show');
		})
	</script>

@endsection