<div class="row mb-10">
    <div class="col-xl-4">
        <!--begin::Stats Widget 32-->
        <div class="card card-custom bg-warning card-stretch gutter-b">
            <!--begin::Body-->
            
            <div class="card-body">
                
                <span
                    class="card-title font-weight-bolder text-white font-size-h2 mb-0 mt-6 text-hover-primary d-block">{{ count_status_dashboard(1) }}</span> 
                <span class="font-weight-bold text-white  font-size-sm">New Order</span>
            </div>
            <!--end::Body-->
        </div>
        <!--end::Stats Widget 32-->
    </div>

    <div class="col-xl-4">
        <!--begin::Stats Widget 32-->
        <div class="card card-custom bg-success card-stretch gutter-b">
            <!--begin::Body-->
            <div class="card-body">
                
                <span
                    class="card-title font-weight-bolder text-white font-size-h2 mb-0 mt-6 text-hover-primary d-block">{{ count_status_dashboard(2) }}</span>
                <span class="font-weight-bold text-white  font-size-sm">Approved</span>
            </div>
            <!--end::Body-->
        </div>
        <!--end::Stats Widget 32-->
    </div>
    <div class="col-xl-4">
        <!--begin::Stats Widget 32-->
        <div class="card card-custom bg-danger card-stretch gutter-b">
            <!--begin::Body-->
            <div class="card-body">
                
                <span
                    class="card-title font-weight-bolder text-white font-size-h2 mb-0 mt-6 text-hover-primary d-block">{{ count_status_dashboard(3) }}</span>
                <span class="font-weight-bold text-white  font-size-sm">Rejected</span>
            </div>
            <!--end::Body-->
        </div>
        <!--end::Stats Widget 32-->
    </div>
</div>

<!--begin::Tables Widget 11-->
<div class="card mb-5 mb-xl-8">
    <!--begin::Header-->
    <div class="card-header border-0 pt-5">
        <h3 class="card-title align-items-start flex-column">
            <span class="card-label fw-bold fs-3 mb-1">Pending Orders</span>
            <span class="text-muted mt-1 fw-semibold fs-7">Please approve the orders</span>
        </h3>
       
    </div>
    <!--end::Header-->
    <!--begin::Body-->
    <div class="card-body py-3">
        <!--begin::Table container-->
        <div class="table-responsive">
            <!--begin::Table-->
            <table class="table align-middle gs-0 gy-4">
                <!--begin::Table head-->
                <thead>
                    <tr class="fw-bold text-muted bg-light">
                        <th width="10%" class="ps-4 rounded-start">ORDER ID</th>
                        <th class="min-w-125px">AGENT</th>
                        <th width="15%">TOTAL</th>
                        <th width="10%" >DATE ADDED</th>
                        <th width="10%" class="text-end rounded-end"></th>
                    </tr>
                </thead>
                <!--end::Table head-->
                <!--begin::Table body-->
                <tbody>
                    @foreach($pending_orders as $pending)
                        <tr>
                            <td>
                                <span class="text-gray-800 text-hover-primary fw-bold">{{$pending->code}}</span>
                            </td>
                            <td>
                                <div class="d-flex align-items-center">
                                    <div class="symbol symbol-50px me-5">
                                        <img src="{{ asset('media/avatars/'.$pending->user->avatar) }}" class="" alt="" />
                                    </div>
                                    <div class="d-flex justify-content-start flex-column">
                                        <a href="#" class="text-dark fw-bold text-hover-primary mb-1 fs-6">{{ $pending->user->name }}</a>
                                        <span class="text-muted fw-semibold text-muted d-block fs-7">{{ $pending->user->phone_number }}</span>
                                    </div>
                                </div>
                            </td>
                            
                            <td>
                                <a href="#" class="text-dark fw-bold text-hover-primary d-block fs-6">RM {{ $pending->total_rm }}</a>
                            </td>
                            <td>
                                <a href="#" class="text-dark fw-bold text-hover-primary d-block fs-6">{{ date('d/m/Y', strtotime($pending->created_at)) }}</a>
                            </td>
                         
                            <td class="text-end">
                                <a href="{{ route('show-order', $pending->id) }}" class="btn btn-icon btn-bg-light btn-active-color-primary btn-sm me-1">
                                    <!--begin::Svg Icon | path: icons/duotune/general/gen019.svg-->
                                    <span class="svg-icon svg-icon-3">
                                        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                            <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                                                <rect x="0" y="0" width="24" height="24"/>
                                                <path d="M3,12 C3,12 5.45454545,6 12,6 C16.9090909,6 21,12 21,12 C21,12 16.9090909,18 12,18 C5.45454545,18 3,12 3,12 Z" fill="#000000" fill-rule="nonzero" opacity="0.3"/>
                                                <path d="M12,15 C10.3431458,15 9,13.6568542 9,12 C9,10.3431458 10.3431458,9 12,9 C13.6568542,9 15,10.3431458 15,12 C15,13.6568542 13.6568542,15 12,15 Z" fill="#000000" opacity="0.3"/>
                                            </g>
                                        </svg>
                                    </span>
                                    <!--end::Svg Icon-->
                                </a>
                         
                            </td>
                        </tr>
                    @endforeach
               
                </tbody>
                <!--end::Table body-->
            </table>
            <!--end::Table-->
        </div>
        <!--end::Table container-->
    </div>
    <!--begin::Body-->
</div>
<!--end::Tables Widget 11-->