@extends('admin.layout.admin')
@section('content')
    <div class="content-page">
        <!-- Start content -->
        <div class="content">

            <div class="container-fluid">
                <div class="page-title-box">

                    <div class="row align-items-center ">
                        <div class="col-md-8">
                            <div class="page-title-box">
                                <h4 class="page-title">Dashboard</h4>
                                <ol class="breadcrumb">
                                    <li class="breadcrumb-item active">Welcome To Marilyn Johnson Admin
                                        Dashboard
                                    </li>
                                </ol>
                            </div>
                        </div>

                    </div>
                </div>
                <!-- end page-title -->

                <!-- start top-Contant -->


                <div class="row">
                    <div class="col-sm-6 col-xl-3">
                        <div class="card">
                            <div class="card-body">
                                <div class="row align-items-center p-1">
                                    <div class="col-lg-10">
                                        <h5 class="font-16">Total Customers</h5>
                                        <h4 class="text-warning pt-1 mb-0">{{ $totalCustomers }}</h4>

                                    </div>

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


                    <div class="col-sm-6 col-xl-3">
                        <div class="card">
                            <div class="card-body">
                                <div class="row align-items-center p-1">
                                    <div class="col-lg-10">
                                        <h5 class="font-16">Total Order</h5>
                                        <h4 class="text-warning pt-1 mb-0">{{ $totalOrders }}</h4>
                                    </div>

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

                    <div class="col-sm-6 col-xl-3">
                        <div class="card">
                            <div class="card-body">
                                <div class="row align-items-center p-1">
                                    <div class="col-lg-10">
                                        <h5 class="font-16 w-100">Total Order Amount</h5>
                                        <h4 class="text-warning pt-1 mb-0">${{ number_format($totalOrderAmount, 2) }}</h4>

                                    </div>

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


                    {{--                    <div class="col-sm-6 col-xl-3">--}}
                    {{--                        <div class="card">--}}
                    {{--                            <div class="card-body">--}}
                    {{--                                <div class="row align-items-center p-1">--}}
                    {{--                                    <div class="col-lg-10">--}}
                    {{--                                        <h5 class="font-16">Total Unpaid Invoices</h5>--}}
                    {{--                                    </div>--}}

                    {{--                                </div>--}}
                    {{--                            </div>--}}
                    {{--                        </div>--}}
                    {{--                    </div>--}}
                </div>
                <!-- end top-Contant -->


                <div class="row">
                    <div class="col-xl-6">
                        <div class="card">
                            <div class="card-body">
                                <h4 class="mt-0 header-title mb-4">New Users</h4>
                                <div class="table-responsive">
                                    <table class="table table-hover mb-0 customTable">
                                        <thead>
                                        <tr>
                                            <th scope="col">Name</th>
                                            <th scope="col">Email</th>
                                            <th scope="col">Account ID</th>
                                            <th scope="col">Phone</th>
                                            <th scope="col">City</th>
                                            <th scope="col">Address</th>

                                        </tr>
                                        </thead>
                                        <tbody>
                                            @foreach($orders as $order)
                                            <tr>
                                                <td>{{ ($order->first_name ?? '') . ' ' . ($order->last_name ?? '') }}</td>
                                                <td>{{ $order->email ?? '-' }}</td>
                                                <td>{{ $order->tracking_no ?? ' - ' }}</td>
                                                <td>{{ $order->phone_number ?? '-' }}</td>
                                                <td>{{ $order->city ?? '-' }}</td>
                                                <td>{{ $order->address ?? '-' }}</td>
                                            </tr>
                                            @endforeach

                                        </tbody>
                                    </table>
                                </div>

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

                    <div class="col-xl-6">
                        <div class="card">
                            <div class="card-body">
                                <h4 class="mt-0 header-title mb-4">Latest Orders</h4>
                                <div class="table-responsive">
                                    <table class="table table-hover mb-0 customTable">
                                        <thead>
                                        <tr>
                                            <th scope="col">Order #</th>
                                            <th scope="col">Customer</th>
                                            <th scope="col">Shipping Address</th>
                                            <th scope="col">Total Items</th>
                                            <th scope="col">Total Price</th>
                                            <th scope="col">Status</th>
                                            <th scope="col">Transaction ID</th>

                                        </tr>
                                        </thead>
                                        <tbody>

                                            @foreach($orders as $order)
                                            <tr>
                                                <td>{{ $order->tracking_no ?? '-' }}</td>
                                                <td>{{ ($order->first_name ?? '') . ' ' . ($order->last_name ?? '') }}</td>
                                                <td>{{ $order->address ?? '-' }}</td>
                                                <td>{{ $order->total_items ?? '-' }}</td>
                                                <td>${{ number_format($order->total_price, 2) ?? '-' }}</td>
                                                <td>{{ $order->order_status ?? '-' }}</td>
                                                <td>{{ $order->payment_id ?? '-' }}</td>
                                            </tr>
                                            @endforeach

                                        </tbody>
                                    </table>
                                </div>

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

                </div>

            </div>
            <!-- container-fluid -->

        </div>
        <!-- content -->

        <footer class="footer">
            © 2023 Marilyn-Johnson <span class="d-none d-sm-inline-block"> - Copyright reserved. </span>.
        </footer>

    </div>
@endsection