@extends('Admin.'.layout())
@section('pagetitle',__('trans.dashboardTitle'))

@section('content')

<div class="">
	<div class="row">
        @if(hasPermission('show_categories'))
    		<div class="col-lg-3 col-md-4 col-sm-6" style="margin-top: 20px">
    			<div class="card border-rosy">
    				<div class="card-body bg-rosy text-white">
    					<div class="row">
    						<div class="col-3 justify-content-center align-items-center d-flex">
    							<i class="fa-solid fa-layer-group fa-2x"></i>
    						</div>
    						<div class="col-9 text-right text-white">
    							<h1>{{ $categoriesCount }}</h1>
    							<h4>@lang('trans.categories')</h4>
    						</div>
    					</div>
    				</div>
    				<a href="{{ route(activeGuard() . '.categories.index') }}">
    					<div class="card-footer bg-light text-dark">
    						<span class="float-left">@lang('trans.View Details')</span>
    						<span class="float-right"><i class="fa fa-arrow-circle-{{ lang('en') ? 'right' : 'left' }}"></i></span>
    					</div>
    				</a>
    			</div>
    		</div>
		@endif
        @if(hasPermission('show_products'))
    		<div class="col-lg-3 col-md-4 col-sm-6" style="margin-top: 20px">
    			<div class="card border-goldenrod">
    				<div class="card-body bg-goldenrod text-dark">
    					<div class="row">
    						<div class="col-3 justify-content-center align-items-center d-flex">
    							<i class="fa-solid fa-cubes-stacked fa-2x"></i>
    						</div>
    						<div class="col-9 text-right text-dark">
    							<h1>{{ $productsCount }}</h1>
    							<h4>@lang('trans.products')</h4>
    						</div>
    					</div>
    				</div>
    				<a href="{{ route(activeGuard() . '.products.index') }}">
    					<div class="card-footer bg-light text-dark">
    						<span class="float-left">@lang('trans.View Details')</span>
    						<span class="float-right"><i class="fa fa-arrow-circle-{{ lang('en') ? 'right' : 'left' }}"></i></span>
    					</div>
    				</a>
    			</div>
    		</div>
		@endif
        @if(hasPermission('show_orders'))
    		<div class="col-lg-3 col-md-4 col-sm-6" style="margin-top: 20px">
    			<div class="card border-skyblue">
    				<div class="card-body bg-skyblue text-white">
    					<div class="row">
    						<div class="col-3 justify-content-center align-items-center d-flex">
    							<i class="fa-solid fa-box-open fa-2x"></i>
    						</div>
    						<div class="col-9 text-right text-white">
    							<h1>{{ $totalOrdersCount }}</h1>
    							<h4>@lang('trans.orders')</h4>
    						</div>
    					</div>
    				</div>
    				<a href="{{ route(activeGuard() . '.orders.index') }}">
    					<div class="card-footer bg-light text-dark">
    						<span class="float-left">@lang('trans.View Details')</span>
    						<span class="float-right"><i class="fa fa-arrow-circle-{{ lang('en') ? 'right' : 'left' }}"></i></span>
    					</div>
    				</a>
    			</div>
    		</div>
		@endif
        @if(hasPermission('show_clients'))
    		<div class="col-lg-3 col-md-4 col-sm-6" style="margin-top: 20px">
    			<div class="card border-rosy">
    				<div class="card-body bg-rosy text-white">
    					<div class="row">
    						<div class="col-3 justify-content-center align-items-center d-flex">
    							<i class="fa-solid fa-users fa-2x"></i>
    						</div>
    						<div class="col-9 text-right text-white">
    							<h1>{{ $clientsCount }}</h1>
    							<h4>@lang('trans.clients')</h4>
    						</div>
    					</div>
    				</div>
    				<a href="{{ route(activeGuard() . '.clients.index') }}">
    					<div class="card-footer bg-light text-dark">
    						<span class="float-left">@lang('trans.View Details')</span>
    						<span class="float-right"><i class="fa fa-arrow-circle-{{ lang('en') ? 'right' : 'left' }}"></i></span>
    					</div>
    				</a>
    			</div>
    		</div>
		@endif
        @if(hasPermission('show_orders'))
    		<div class="col-lg-3 col-md-4 col-sm-6" style="margin-top: 20px">
    			<div class="card border-goldenrod">
    				<div class="card-body bg-goldenrod text-dark">
    					<div class="row">
    						<div class="col-3 justify-content-center align-items-center d-flex">
    							<i class="fa-solid fa-hourglass-half fa-2x text-dark"></i>
    						</div>
    						<div class="col-9 text-right text-dark">
    							<h1>{{ $pendingOrdersCount }}</h1>
    							<h4>@lang('trans.pending-orders')</h4>
    						</div>
    					</div>
    				</div>
    				<a href="{{ route(activeGuard() . '.orders.index',['filter' => 'pending']) }}">
    					<div class="card-footer bg-light text-dark">
    						<span class="float-left">@lang('trans.View Details')</span>
    						<span class="float-right"><i class="fa fa-arrow-circle-{{ lang('en') ? 'right' : 'left' }}"></i></span>
    					</div>
    				</a>
    			</div>
    		</div>
		@endif
        @if(hasPermission('show_orders'))
    		<div class="col-lg-3 col-md-4 col-sm-6" style="margin-top: 20px">
    			<div class="card border-skyblue">
    				<div class="card-body bg-skyblue text-white">
    					<div class="row">
    						<div class="col-3 justify-content-center align-items-center d-flex">
    							<i class="fa-solid fa-check-double fa-2x"></i>
    						</div>
    						<div class="col-9 text-right text-white">
    							<h1>{{ $acceptedOrdersCount }}</h1>
    							<h4>@lang('trans.accepted-orders')</h4>
    						</div>
    					</div>
    				</div>
    				<a href="{{ route(activeGuard() . '.orders.index',['filter' => 'accepted']) }}">
    					<div class="card-footer bg-light text-dark">
    						<span class="float-left">@lang('trans.View Details')</span>
    						<span class="float-right"><i class="fa fa-arrow-circle-{{ lang('en') ? 'right' : 'left' }}"></i></span>
    					</div>
    				</a>
    			</div>
    		</div>
		@endif
        @if(hasPermission('show_orders'))
    		<div class="col-lg-3 col-md-4 col-sm-6" style="margin-top: 20px">
    			<div class="card border-rosy">
    				<div class="card-body bg-rosy text-white">
    					<div class="row">
    						<div class="col-3 justify-content-center align-items-center d-flex">
    							<i class="fa-solid fa-motorcycle fa-2x"></i>
    						</div>
    						<div class="col-9 text-right text-white">
    							<h1>{{ $onwayOrdersCount }}</h1>
    							<h4>@lang('trans.onway-orders')</h4>
    						</div>
    					</div>
    				</div>
    				<a href="{{ route(activeGuard() . '.orders.index',['filter' => 'onway']) }}">
    					<div class="card-footer bg-light text-dark">
    						<span class="float-left">@lang('trans.View Details')</span>
    						<span class="float-right"><i class="fa fa-arrow-circle-{{ lang('en') ? 'right' : 'left' }}"></i></span>
    					</div>
    				</a>
    			</div>
    		</div>
		@endif
        @if(hasPermission('show_orders'))
    		<div class="col-lg-3 col-md-4 col-sm-6" style="margin-top: 20px">
    			<div class="card border-goldenrod ">
    				<div class="card-body bg-goldenrod text-dark">
    					<div class="row">
    						<div class="col-3 justify-content-center align-items-center d-flex">
    							<i class="fa-solid fa-circle-check fa-2x"></i>
    						</div>
    						<div class="col-9 text-right text-dark">
    							<h1>{{ $deliveredOrdersCount }}</h1>
    							<h4>@lang('trans.delivered-orders')</h4>
    						</div>
    					</div>
    				</div>
    				<a href="{{ route(activeGuard() . '.orders.index',['filter' => 'delivered']) }}">
    					<div class="card-footer bg-light text-dark">
    						<span class="float-left">@lang('trans.View Details')</span>
    						<span class="float-right"><i class="fa fa-arrow-circle-{{ lang('en') ? 'right' : 'left' }}"></i></span>
    					</div>
    				</a>
    			</div>
    		</div>
		@endif
        @if(hasPermission('show_orders'))
    		<div class="col-lg-3 col-md-4 col-sm-6" style="margin-top: 20px">
    			<div class="card border-skyblue">
    				<div class="card-body bg-skyblue text-white">
    					<div class="row">
    						<div class="col-3 justify-content-center align-items-center d-flex">
    							<i class="fa fa-suitcase fa-2x"></i>
    						</div>
    						<div class="col-9 text-right text-white">
    							<h1>{{ $declinedOrdersCount }}</h1>
    							<h4>@lang('trans.declined-orders')</h4>
    						</div>
    					</div>
    				</div>
    				<a href="{{ route(activeGuard() . '.orders.index',['filter' => 'declined']) }}">
    					<div class="card-footer bg-light text-dark">
    						<span class="float-left">@lang('trans.View Details')</span>
    						<span class="float-right"><i class="fa fa-arrow-circle-{{ lang('en') ? 'right' : 'left' }}"></i></span>
    					</div>
    				</a>
    			</div>
    		</div>
		@endif
        @if(hasPermission('show_orders'))
    		<div class="col-lg-3 col-md-4 col-sm-6" style="margin-top: 20px">
    			<div class="card border-rosy">
    				<div class="card-body bg-rosy text-white">
    					<div class="row">
    						<div class="col-3 justify-content-center align-items-center d-flex">
    							<i class="fa-solid fa-spinner fa-2x"></i>
    						</div>
    						<div class="col-9 text-right text-white">
    							<h1>{{ $notCompleteOrdersCount }}</h1>
    							<h4>@lang('trans.notComplet-orders')</h4>
    						</div>
    					</div>
    				</div>
    				<a href="{{ route(activeGuard() . '.orders.index',['filter' => 'not_complete']) }}">
    					<div class="card-footer bg-light text-dark">
    						<span class="float-left">@lang('trans.View Details')</span>
    						<span class="float-right"><i class="fa fa-arrow-circle-{{ lang('en') ? 'right' : 'left' }}"></i></span>
    					</div>
    				</a>
    			</div>
    		</div>
		@endif
        @if(hasPermission('show_branches'))
    		<div class="col-lg-3 col-md-4 col-sm-6" style="margin-top: 20px">
    			<div class="card border-goldenrod">
    				<div class="card-body bg-goldenrod text-dark">
    					<div class="row">
    						<div class="col-3 justify-content-center align-items-center d-flex">
    							<i class="fa-solid fa-code-merge fa-2x"></i>
    						</div>
    						<div class="col-9 text-right text-dark">
    							<h1>{{ $branchesCount }}</h1>
    							<h4>@lang('trans.branches')</h4>
    						</div>
    					</div>
    				</div>
    				<a href="{{ route(activeGuard() . '.branches.index') }}">
    					<div class="card-footer bg-light text-dark">
    						<span class="float-left">@lang('trans.View Details')</span>
    						<span class="float-right"><i class="fa fa-arrow-circle-{{ lang('en') ? 'right' : 'left' }}"></i></span>
    					</div>
    				</a>
    			</div>
    		</div>
		@endif
        @if(hasPermission('show_coupons'))
    		<div class="col-lg-3 col-md-4 col-sm-6" style="margin-top: 20px">
    			<div class="card border-skyblue">
    				<div class="card-body bg-skyblue text-white">
    					<div class="row">
    						<div class="col-3 justify-content-center align-items-center d-flex">
    							<i class="fa-solid fa-receipt fa-2x"></i>
    						</div>
    						<div class="col-9 text-right text-white">
    							<h1>{{ $couponsCount }}</h1>
    							<h4>@lang('trans.coupons')</h4>
    						</div>
    					</div>
    				</div>
    				<a href="{{ route(activeGuard() . '.coupons.index') }}">
    					<div class="card-footer bg-light text-dark">
    						<span class="float-left">@lang('trans.View Details')</span>
    						<span class="float-right"><i class="fa fa-arrow-circle-{{ lang('en') ? 'right' : 'left' }}"></i></span>
    					</div>
    				</a>
    			</div>
    		</div>
		@endif
        @if(hasPermission('show_admins'))
    		<div class="col-lg-3 col-md-4 col-sm-6" style="margin-top: 20px">
    			<div class="card border-rosy">
    				<div class="card-body bg-rosy text-white">
    					<div class="row">
    						<div class="col-3 justify-content-center align-items-center d-flex">
    							<i class="fa-solid fa-user-gear fa-2x"></i>
    						</div>
    						<div class="col-9 text-right text-white">
    							<h1>{{ $adminsCount }}</h1>
    							<h4>@lang('trans.admins')</h4>
    						</div>
    					</div>
    				</div>
    				<a href="{{ route(activeGuard() . '.admins.index') }}">
    					<div class="card-footer bg-light text-dark">
    						<span class="float-left">@lang('trans.View Details')</span>
    						<span class="float-right"><i class="fa fa-arrow-circle-{{ lang('en') ? 'right' : 'left' }}"></i></span>
    					</div>
    				</a>
    			</div>
    		</div>
		@endif
	</div>
</div>
<br>
<br>
<br>

<div class="content-page">
    <h3 class="portlet-title text-dark">@lang('trans.UsersByDay')</h3>
    <div id="UsersByDay" style="height: 370px; width: 100%;"></div>
</div>


<br>
<br>
<br>


<div class="content-page">
    <h3 class="portlet-title text-dark">@lang('trans.ordersByDay')</h3>
    <div id="ordersByDay" style="height: 370px; width: 100%;"></div>
</div>


<br>
<br>
<br>


<div class="content-page">
    <h3 class="portlet-title text-dark">@lang('trans.ordersByMonth')</h3>
    <div id="ordersByMonth" style="height: 370px; width: 100%;"></div>
</div>
                
@endsection

@push('css')
    <style>
        .text-white h1,
        .text-white h4{
            color: white;
        }
        
        .border-rosy{
            border-color: #cc5e77 !important;
            height: 100%;
        }
        .bg-rosy {
            background-color: #cc5e77 !important;
        }
        
        .border-goldenrod{
            border-color: #f3e662 !important;
            height: 100%;
        }
        .bg-goldenrod {
            background-color: #f3e662 !important;
        }
        
        .border-skyblue{
            border-color: #60c3cd !important;
            height: 100%;
        }
        .bg-skyblue {
            background-color: #60c3cd !important;
        }
    </style>
@endpush


@push('js')
    <script src="https://canvasjs.com/assets/script/jquery.canvasjs.min.js"></script>
    <script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
    <script>
        var chartOrders = new CanvasJS.Chart("ordersByDay", {
            animationEnabled: true,
            theme: "light1",
            data: [{
                type: "line",
                indexLabelFontSize: 16,
                dataPoints: <?php echo json_encode($chartOrders, JSON_NUMERIC_CHECK); ?>
            }]
        });
        chartOrders.render();
        
        var chartUsers = new CanvasJS.Chart("UsersByDay", {
            animationEnabled: true,
            theme: "light1",
            data: [{
                type: "line",
                indexLabelFontSize: 16,
                dataPoints: <?php echo json_encode($chartUsers, JSON_NUMERIC_CHECK); ?>
            }]
        });
        chartUsers.render();
        
        var chartChanges = new CanvasJS.Chart("ordersByMonth", {
            animationEnabled: true,
            theme: "light1",
            data: [{
                type: "line",
                indexLabelFontSize: 16,
                dataPoints: <?php echo json_encode($chartChanges, JSON_NUMERIC_CHECK); ?>
            }]
        });
        chartChanges.render();
    </script>
@endpush


