@extends('layouts.admin-layout')

@section('content')


<div class="container-xxl flex-grow-1 container-p-y">
    <div class="row g-6 mb-6">
        <div class="col-sm-6 col-xl-3">
            <div class="card">
                <div class="card-body">
                    <div class="d-flex align-items-start justify-content-between">
                        <div class="content-left">
                            <span class="text-heading">Session</span>
                            <div class="d-flex align-items-center my-1">
                                <h4 class="mb-0 me-2">21,459</h4>
                                <p class="text-success mb-0">(+29%)</p>
                            </div>
                            <small class="mb-0">Total Users</small>
                        </div>
                        <div class="avatar">
                          <span class="avatar-initial rounded bg-label-primary">
                            <i class="bx bx-group bx-lg"></i>
                          </span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-sm-6 col-xl-3">
            <div class="card">
                <div class="card-body">
                    <div class="d-flex align-items-start justify-content-between">
                        <div class="content-left">
                            <span class="text-heading">Paid Users</span>
                            <div class="d-flex align-items-center my-1">
                                <h4 class="mb-0 me-2">4,567</h4>
                                <p class="text-success mb-0">(+18%)</p>
                            </div>
                            <small class="mb-0">Last week analytics </small>
                        </div>
                        <div class="avatar">
                          <span class="avatar-initial rounded bg-label-danger">
                            <i class="bx bx-user-plus bx-lg"></i>
                          </span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-sm-6 col-xl-3">
            <div class="card">
                <div class="card-body">
                    <div class="d-flex align-items-start justify-content-between">
                        <div class="content-left">
                            <span class="text-heading">Active Users</span>
                            <div class="d-flex align-items-center my-1">
                                <h4 class="mb-0 me-2">19,860</h4>
                                <p class="text-danger mb-0">(-14%)</p>
                            </div>
                            <small class="mb-0">Last week analytics</small>
                        </div>
                        <div class="avatar">
                          <span class="avatar-initial rounded bg-label-success">
                            <i class="bx bx-user-check bx-lg"></i>
                          </span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-sm-6 col-xl-3">
            <div class="card">
                <div class="card-body">
                    <div class="d-flex align-items-start justify-content-between">
                        <div class="content-left">
                            <span class="text-heading">Pending Users</span>
                            <div class="d-flex align-items-center my-1">
                                <h4 class="mb-0 me-2">237</h4>
                                <p class="text-success mb-0">(+42%)</p>
                            </div>
                            <small class="mb-0">Last week analytics</small>
                        </div>
                        <div class="avatar">
                          <span class="avatar-initial rounded bg-label-warning">
                            <i class="bx bx-user-voice bx-lg"></i>
                          </span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- Users List Table -->
    <div class="card">
        <div class="card-header border-bottom">
            <h5 class="card-title mb-0">Search Filters</h5>
            <div class="d-flex justify-content-between align-items-center row pt-4 gap-4 gap-md-0 g-6">
                <div class="col-md-4 user_role"><select id="UserRole" class="form-select text-capitalize"><option value=""> Select Role </option><option value="Admin">Admin</option><option value="Author">Author</option><option value="Editor">Editor</option><option value="Maintainer">Maintainer</option><option value="Subscriber">Subscriber</option></select></div>
                <div class="col-md-4 user_plan"><select id="UserPlan" class="form-select text-capitalize"><option value=""> Select Plan </option><option value="Basic">Basic</option><option value="Company">Company</option><option value="Enterprise">Enterprise</option><option value="Team">Team</option></select></div>
                <div class="col-md-4 user_status"><select id="FilterTransaction" class="form-select text-capitalize"><option value=""> Select Status </option><option value="Pending" class="text-capitalize">Pending</option><option value="Active" class="text-capitalize">Active</option><option value="Inactive" class="text-capitalize">Inactive</option></select></div>
            </div>
        </div>
            <div class="card-body">
                <table class="datatables-basic-inquiry cell-border table border-top">
    <thead>
        <tr>
            <th>Order ID</th>
            <th>Order No</th>
            <th>User ID</th>
            <th>Plan ID</th>
            <th>Expiry Date</th>
            <th>Amount</th>
            <th>Discount</th>
            <th>Total</th>
            <!--<th>Payment Object</th>-->
            <th>Order Type</th>
            <th>Payment Status</th>
            <th>Status</th>
        </tr>
    </thead>
    <tbody>
        @foreach($latestOrder as $order)
        <tr>
            <td>{{$order->order_id}}</td>
            <td>{{$order->order_no}}</td>
            <td>{{$order->order_user_id}}</td>
            <td>{{$order->order_plan_id}}</td>
            <td>{{$order->order_expiry_date}}
            @php
            //<!--use Carbon\Carbon;-->
        
            $expiryDate = Carbon\Carbon::parse($order->order_expiry_date);
            $today = Carbon\Carbon::today();
            $diffInDays = $today->diffInDays($expiryDate, false); // false means negative values allowed
        @endphp
        
        @if ($diffInDays > 0)
            {{ $diffInDays }} day(s) remaining
        @elseif ($diffInDays <= 0)
            Expired
        @else
            {{ $diffInDays }} days remaining
        @endif
            </td>
            <td>${{$order->order_amount}}</td>
            <td>${{$order->order_discount}}</td>
            <td>${{$order->order_total}}</td>
            <!--<td>{{$order->order_payment_object}}</td>-->
            <td> @if($order->order_type == 1)
        <span class="badge bg-warning">Web</span>
    @else
        <span class="badge bg-dark">Mobile</span>
    @endif</td>
            <td>@if ($order->order_payment_status == 1)
        <span class="badge bg-success">Success</span>
    @else
        <span class="badge bg-danger">Failed</span>
    @endif</td>
            <td> @if ($order->order_status == 1)
        <span class="badge bg-success">Success</span>
    @else
        <span class="badge bg-danger">Failed</span>
    @endif</td>
        </tr>
        @endforeach
        
    </tbody>
</table>

            
 </div>
        <!-- Offcanvas to add new user -->
      
    </div>
</div>
@endsection

@push('scripts')

    <script>
        var table = $('.datatables-basic-inquiry').DataTable({
             "responsive":true
        });
    </script>
@endpush