@extends('sales.layout.guest-layout')
@section('main')
    <section>
        <div class="container mt-5 pt-4">
            <div class="row">

                <div class="col-lg-12 col-md-12 col-sm-12">
                    <div class="row">
                        <!-- Total Sales Amount -->
                        <div class="col-lg-3 col-md-6">
                            <div class="panel dark-blue">
                                <div class="panel-heading">
                                    <div class="row">
                                        <div class="col-lg-3"><i class="fas fa-database"></i></div>
                                        <div class="col-lg-9 text-end">
                                            <p>Total Orders Amount</p>
                                            <h3>${{ number_format($totalSalesAmount, 2) }}</h3>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Total Order Products -->
                        <div class="col-lg-3 col-md-6">
                            <div class="panel dark-blue">
                                <div class="panel-heading">
                                    <div class="row">
                                        <div class="col-lg-3"><i class="fab fa-product-hunt"></i></div>
                                        <div class="col-lg-9 text-end">
                                            <p>Total Order Products</p>
                                            <h3>{{ $totalOrderProductsCount }}</h3>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Total Orders -->
                        <div class="col-lg-3 col-md-6">
                            <div class="panel dark-blue">
                                <div class="panel-heading">
                                    <div class="row">
                                        <div class="col-lg-3"><i class="fal fa-cart-plus"></i></div>
                                        <div class="col-lg-9 text-end">
                                            <p>Total Orders</p>
                                            <h3>{{ $totalOrdersCount }}</h3>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Total Customers -->
                        <div class="col-lg-3 col-md-6">
                            <div class="panel dark-blue">
                                <div class="panel-heading">
                                    <div class="row">
                                        <div class="col-lg-3"><i class="fal fa-users"></i></div>
                                        <div class="col-lg-9 text-end">
                                            <p>Customers</p>
                                            <h3>{{ $totalCustomersCount }}</h3>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Current Month Orders -->
                        <div class="col-lg-3 col-md-6">
                            <div class="panel dark-blue">
                                <div class="panel-heading">
                                    <div class="row">
                                        <div class="col-lg-3"><i class="far fa-calendar-alt"></i></div>
                                        <div class="col-lg-9 text-end">
                                            <p>Current Month Orders</p>
                                            <h3>{{ $currentMonthOrdersCount }}</h3>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </section>
@endsection