@extends('../backend/layout/' . $layout)

@section('subhead')
    <title>Dashboard | {{ config('app.name') }}</title>
@endsection

@section('subcontent')
    <div class="grid grid-cols-6 gap-6">
        <div class="col-span-12 2xl:col-span-9">
            <div class="grid grid-cols-12 gap-6">
                <!-- BEGIN: General Report -->
                <div class="col-span-12 mt-8">
                    <div class="intro-y flex items-center h-10">
                        <h2 class="text-lg font-medium truncate mr-5">General Report</h2>
                    </div>
                    <div class="grid grid-cols-12 gap-6 mt-5">
                        <div class="col-span-12 sm:col-span-6 xl:col-span-3 intro-y">
                            <div class="report-box zoom-in ">
                                <div class="box p-5  ">
                                    <div class="flex">
                                        <i data-lucide="shopping-cart" class="report-box__icon text-primary"></i>
                                    </div>
                                    <div class="text-3xl font-medium leading-8 mt-6">{{ $itemSales }}</div>
                                    <div class="text-base text-slate-500 mt-1">Total Product Sales</div>
                                </div>
                            </div>
                        </div>
                        <a class="col-span-12 sm:col-span-6 xl:col-span-3 intro-y" href='{{ route('order.index') }}'>
                            <div class="report-box zoom-in  ">
                                <div class="box p-5">
                                    <div class="flex">
                                        <i data-lucide="credit-card" class="report-box__icon text-pending"></i>
                                    </div>
                                    <div class="text-3xl font-medium leading-8 mt-6">{{ $totalOrders }}</div>
                                    <div class="text-base text-slate-500 mt-1">Total Orders </div>
                                </div>
                            </div>
                        </a>
                        <a class="col-span-12 sm:col-span-6 xl:col-span-3 intro-y" href='{{ route('products.index') }}'>
                            <div class="report-box zoom-in ">
                                <div class="box p-5">
                                    <div class="flex">
                                        <i data-lucide="box" class="report-box__icon text-warning"></i>
                                    </div>
                                    <div class="text-3xl font-medium leading-8 mt-6">{{ $totalProducts }}</div>
                                    <div class="text-base text-slate-500 mt-1">Total Products</div>
                                </div>
                            </div>
                        </a>
                        <a class="col-span-12 sm:col-span-12 xl:col-span-3 intro-y " href='{{ route('customers.index') }}'>
                            <div class="report-box zoom-in">
                                <div class="box p-5">
                                    <div class="flex">
                                        <i data-lucide="user" class="report-box__icon text-success"></i>
                                    </div>
                                    <div class="text-3xl font-medium leading-8 mt-6">{{$newCustomers}}</div>
                                    <div class="text-base text-slate-500 mt-1">New Customers in last 30 Days</div>
                                </div>
                            </div>
                        </a>
                        <a class="col-span-12 sm:col-span-6 xl:col-span-3 intro-y" href='{{ route('customers.index') }}'>
                            <div class="report-box zoom-in ">
                                <div class="box p-5">
                                    <div class="flex">
                                        <i data-lucide="users" class="report-box__icon text-success"></i>
                                    </div>
                                    <div class="text-3xl font-medium leading-8 mt-6">{{ $totalCustomers }}</div>
                                    <div class="text-base text-slate-500 mt-1">Total Customers</div>
                                </div>
                            </div>
                        </a>
                        <a class="col-span-12 sm:col-span-6 xl:col-span-3 intro-y">
                            <div class="report-box zoom-in ">
                                <div class="box p-5">
                                    <div class="flex">
                                        <i data-lucide="calendar" class="report-box__icon text-warning"></i>
                                    </div>
                                    <div  class="text-xl font-medium leading-8 mt-6">{{ $monthlySales }}/@currency($monthlySalesCurrency)</div>
                                    <div class="text-base text-slate-500 mt-1">This Month Sales</div>
                                </div>
                            </div>
                        </a>
                        <a class="col-span-12 sm:col-span-6 xl:col-span-3 intro-y">
                            <div class="report-box zoom-in ">
                                <div class="box p-5">
                                    <div class="flex">
                                        <i data-lucide="shopping-bag" class="report-box__icon text-primary"></i>
                                    </div>
                                    <div class="text-xl font-medium leading-8 mt-6">{{ $yearlySales }}/@currency($yearlySalesCurrency)</div>
                                    <div class="text-base text-slate-500 mt-1">This Year Sales</div>
                                </div>
                            </div>
                        </a>
                    </div><br><br>
                        <div class="intro-y flex items-center h-10">
                            <h2 class="text-lg font-medium truncate mr-5">Order Report</h2>
                        </div>
                    <div class="grid grid-cols-12 gap-6 mt-5" >
                        <a class="col-span-12 sm:col-span-6 xl:col-span-3 intro-y" href='{{ route('order.index',['order_status'=>'process']) }}'>
                            <div class="report-box zoom-in">
                                <div class="box p-5">
                                    <div class="flex">
                                        <i data-lucide="fast-forward" class="report-box__icon text-primary"></i>
                                    </div>
                                    <div class="text-3xl font-medium leading-8 mt-6">{{ $processOrders  }}</div>
                                    <div class="text-base text-slate-500 mt-1">Process Orders</div>
                                </div>
                            </div>
                        </a>
                        <a class="col-span-12 sm:col-span-6 xl:col-span-3 intro-y" href='{{ route('order.index',['order_status'=>'ready']) }}'>
                            <div class="report-box zoom-in">
                                <div class="box p-5">
                                    <div class="flex">
                                        <i data-lucide="truck" class="report-box__icon text-warning"></i>
                                    </div>
                                    <div class="text-3xl font-medium leading-8 mt-6">{{ $readyOrders  }}</div>
                                    <div class="text-base text-slate-500 mt-1">Ready to Ship</div>
                                </div>
                            </div>
                        </a>
                        <a class="col-span-12 sm:col-span-6 xl:col-span-3 intro-y" href='{{ route('order.index',['order_status'=>'deliver']) }}'>
                            <div class="report-box zoom-in">
                                <div class="box p-5">
                                    <div class="flex">
                                        <i data-lucide="package" class="report-box__icon text-success"></i>
                                    </div>
                                    <div class="text-3xl font-medium leading-8 mt-6">{{ $deliveredOrders }}</div>
                                    <div class="text-base text-slate-500 mt-1">Delivered Orders</div>
                                </div>
                            </div>
                        </a>
                        <a class="col-span-12 sm:col-span-6 xl:col-span-3 intro-y" href='{{ route('order.index',['order_status'=>'cancel']) }}'>
                            <div class="report-box zoom-in">
                                <div class="box p-5">
                                    <div class="flex">
                                        <i data-lucide="slash" class="report-box__icon text-danger"></i>
                                    </div>
                                    <div class="text-3xl font-medium leading-8 mt-6">{{ $cancelOrders }}</div>
                                    <div class="text-base text-slate-500 mt-1">Cancelled Orders</div>
                                </div>
                            </div>
                        </a>
                    </div>
                </div>
                <!-- END: General Report -->
            </div>
        </div>
    </div>
@endsection