@extends('front.layouts.master')
@section('title', isset($title) ? $title : 'Home')
@section('description', isset($description) ? $description : '')
@section('keywords', isset($keywords) ? $keywords : '')
@section('content')
    <!-- breadcrumb area start here  -->
    <div class="breadcrumb-area">
        <div class="container">
            <div class="breadcrumb-wrap text-center">
                <h2 class="page-title">{{ __('Loyalty Points') }}</h2>
                <ul class="breadcrumb-pages">
                    <li class="page-item"><a class="page-item-link" href="{{ route('front') }}">{{ __('Home') }}</a></li>
                    <li class="page-item">{{ __('Loyalty Points') }}</li>
                </ul>
            </div>
        </div>
    </div>
    <!-- breadcrumb area end here  -->

    <!-- Profile Page area start here  -->
    <div class="profile-page-area section">
        <div class="container">
            <div class="row">
                <div class="col-xl-3 col-lg-4">
                    @include('front.layouts.include.user_profile_sidebar', ['menu' => 'loyaltyPoints'])
                </div>
                <div class="col-xl-9 col-lg-8">
                    <div class="rscnUserPerInfoBox">
                        <div class="d-flex justify-content-between">
                            <h3 class="rscnCardTit">{{ __('Loyalty Points') }}</h3>
                            <button type="button" class="border-0 bg-transparent p-0" data-bs-toggle="modal"
                                data-bs-target="#loyalityInfoModal">
                                <img src="{{ asset('frontend/assets/images/info.svg') }}" alt="info">
                            </button>
                        </div>
                        <div class="rscnUserPerInfoList">
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="rscnLoyalityInnerBox mb-3">
                                        <div class="rscnListItemTit fw-bold mb-2">Active points</div>
                                        <div class="d-flex">
                                            <div class="d-flex rscnListItemTxt fw-bold">
                                                <span class="me-2">{{ $activePoints }}</span>
                                                <span>points</span>
                                            </div>
                                            <span class="mx-2 rscnListItemTxt fw-bold">=</span>
                                            <div class="d-flex rscnListItemTxt fw-bold">
                                                <span class="me-2">{{ $amount }}</span>
                                                <span>JOD</span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="rscnLoyalityInnerBox mb-3">
                                        <div class="rscnListItemTit fw-bold mb-2">Pending points</div>
                                        <div class="d-flex">
                                            <div class="d-flex rscnListItemTxt fw-bold">
                                                <span class="me-2">{{ $pendingPoints }}</span>
                                                <span>points</span>
                                            </div>
                                            <span class="mx-2 rscnListItemTxt fw-bold">=</span>
                                            <div class="d-flex rscnListItemTxt fw-bold">
                                                <span class="me-2">{{ $pendingAmount }}</span>
                                                <span>JOD</span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            {{-- filter --}}
                            @include('front.pages.loyalty_points.partials.filter')
                            {{-- /filter --}}

                            <div class="table-responsive">
                                <table class="table table-striped mb-0 table-bordered rscnLoyalitytable">
                                    <thead>
                                        <tr>
                                            <th scope="col">Source</th>
                                            <th scope="col">Added Date</th>
                                            <th scope="col">Status</th>
                                            <th scope="col">Active Date</th>
                                            <th scope="col">Expiry Date</th>
                                            <th scope="col">Amount</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @foreach ($userPoints as $userPoint)
                                            <tr>
                                                <td>{{ $userPoint->source }}</td>
                                                <td>{{ date('Y-m-d', strtotime($userPoint->created_at)) }}</td>
                                                <td>{{ $userPoint->status }}</td>
                                                <td>{{ $userPoint->activate_date }}</td>
                                                <td>{{ $userPoint->expiry_date }}</td>
                                                <td>{{ $userPoint->points }}</td>
                                            </tr>
                                        @endforeach

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

                            {{-- pagination --}}
                            {{ $userPoints->appends(request()->input())->links('vendor.pagination.careers') }}
                            {{-- / --}}

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

    {{-- Information Modal --}}
    @include('front.pages.loyalty_points.partials.information_modal')
    {{-- /Information Modal --}}

@endsection