@extends('user.layouts.master')
@section('title', __('unlimited'))
@section('contents')

    <!-- Page Content  -->
    <div class="content-wrapper">
        <div class="main-content">
            <!-- Start navbar -->
            @include('user.pages.navbar')
            <!-- End /. navbar -->

            <div class="body-content">
                <div class="decoration blur-2"></div>
                <div class="decoration blur-3"></div>
                <div class="container-xxl">
                    <div class="row g-3 mb-3">
                        <div class="col-sm-6 col-md-6 col-lg-6 d-flex">
                            <div
                                class="card flex-column flex-fill overflow-auto p-4 position-relative shadow w-100 widget-card">
                                <img src="{{ asset('front/user/assets/dist/img/corner.png') }}" alt=""
                                    class="end-0 h-100 position-absolute top-0">
                                <div class="fs-14 text-muted mb-1">Total Points</div>
                                <h3 class="mb-0"><span class="counter">{{ auth()->user()->loyalty_points }}</span><span
                                        class="fs-13 ms-1 text-muted">(Points)</span></h3>
                            </div>
                        </div>
                        <div class="col-sm-6 col-md-6 col-lg-6 d-flex">
                            <div
                                class="card flex-column flex-fill overflow-auto p-4 position-relative shadow w-100 widget-card">
                                <img src="{{ asset('front/user/assets/dist/img/corner.png') }}" alt=""
                                    class="end-0 h-100 position-absolute top-0">
                                <div class="fs-14 text-muted mb-1">Equivalent to</div>
                                <h3 class="mb-0"><span
                                        class="counter">{{ auth()->user()->loyalty_points > 0 ? auth()->user()->loyalty_points / 10 : 0 }}</span><span
                                        class="fs-13 ms-1 text-muted">(AED)</span></h3>
                            </div>
                        </div>
                    </div>
                    <div class="row g-3">
                        <div class="col-xl-12">
                            <div class="card overflow-hidden">
                                <div class="card-header position-relative">
                                    <h6 class="fs-17 fw-semi-bold my-1">Points History</h6>
                                </div>
                                <div class="table-responsive">
                                    <table class="mb-0 table table-borderless table-hover table-striped">
                                        <tbody>
                                            @if (count($users) > 0)
                                                @foreach ($users as $user)
                                                    <tr>
                                                        <td>
                                                            <div class="d-flex">
                                                                <span
                                                                    class="avatar avatar-circle bg-white text-primary flex-shrink-0">
                                                                    <svg xmlns="http://www.w3.org/2000/svg" width="20"
                                                                        height="20" fill="currentColor"
                                                                        class="bi bi-cart2" viewBox="0 0 16 16">
                                                                        <path
                                                                            d="M0 2.5A.5.5 0 0 1 .5 2H2a.5.5 0 0 1 .485.379L2.89 4H14.5a.5.5 0 0 1 .485.621l-1.5 6A.5.5 0 0 1 13 11H4a.5.5 0 0 1-.485-.379L1.61 3H.5a.5.5 0 0 1-.5-.5M3.14 5l1.25 5h8.22l1.25-5H3.14zM5 13a1 1 0 1 0 0 2 1 1 0 0 0 0-2m-2 1a2 2 0 1 1 4 0 2 2 0 0 1-4 0m9-1a1 1 0 1 0 0 2 1 1 0 0 0 0-2m-2 1a2 2 0 1 1 4 0 2 2 0 0 1-4 0" />
                                                                    </svg>
                                                                </span>
                                                                <div class="flex-grow-1 ms-3">
                                                                    <h5 class="fs-17">{{$user->name}}</h5>
                                                                    <ul
                                                                        class="fs-14 fw-medium list-inline list-separator mb-0 mt-2">
                                                                        <li class="list-inline-item text-success">AED 1.00
                                                                        </li>
                                                                        <li class="list-inline-item text-primary"><span
                                                                                class="">Points:</span> 10</li>

                                                                    </ul>
                                                                </div>
                                                            </div>
                                                        </td>
                                                    </tr>
                                                @endforeach
                                            @else
                                                <tr>
                                                    <td colspan="5" class="text-center">
                                                        No Records Found
                                                    </td>
                                                </tr>
                                            @endif

                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!--/.body content-->
        </div>
    </div>
    <!--/.wrapper-->

@endsection