@if(!$member)
    <div {{ $attributes->except('class') }} class="mt-6 format format-sm sm:format-base lg:format-md dark:format-invert {{ $attributes->get('class') }}">
        <h3>
            {!! trans('common.log_in_to_see_history', [
                'log_in' => "<a rel=\"nofollow\" href=\"".route('member.login')."\" class=\"text-link underline\">".trans('common.log_in')."</a>"
            ]) !!}
        </h3>
    </div>
@else
    @if($transactions->count() == 0)
        <div {{ $attributes->except('class') }} class="mt-6 format format-sm sm:format-base lg:format-md dark:format-invert {{ $attributes->get('class') }}">
            <h3>{{ trans('common.no_history_yet') }}</h3>
        </div>
    @else
        <ol {{ $attributes->except('class') }} class="relative border-l border-gray-200 dark:border-gray-700 ml-6 {{ $attributes->get('class') }}">
            @foreach($transactions as $transaction)
                @php
                    $transactionExpired = ($transaction->reward_points === null && ($transaction->expires_at->isPast() || $transaction->points == $transaction->points_used)) ? true : false;
                @endphp
                <li class="mb-10 ml-6">
                    <span class="absolute flex items-center justify-center w-6 h-6 rounded-full -left-3 ring-8 ring-gray-50 dark:ring-gray-900 @if($transactionExpired) bg-gray-100 dark:bg-gray-900 text-gray-800 dark:text-gray-300 @else bg-primary-100 dark:bg-primary-900 text-primary-800 dark:text-primary-300 @endif">
                        @if($transaction->event == 'initial_bonus_points')
                            <x-ui.icon icon="star" class="w-3 h-3" />
                        @elseif(in_array($transaction->event, ['staff_credited_points_for_purchase', 'staff_credited_points']))
                            <x-ui.icon icon="coins" class="w-3 h-3" />
                        @elseif($transaction->event == 'staff_redeemed_points_for_reward')
                            <x-ui.icon icon="gift" class="w-3 h-3" />
                        @endif
                    </span>
                    <div class="flex justify-between w-full">
                        <h3 class="mb-1 text-lg font-semibold @if($transactionExpired) text-gray-400 dark:text-gray-600 @else text-gray-900 dark:text-white @endif">
                            @if($transaction->event == 'initial_bonus_points')
                                {!! trans('common.received_initial_bonus_points', ['points' => '<span class=\'format-number\'>' . $transaction->points . '</span>']) !!}
                            @elseif($transaction->event == 'staff_credited_points_for_purchase')
                                {!! trans('common.purchase') !!}
                                <span class="text-sm font-medium mr-2 px-2.5 py-0.5 rounded ml-1 @if($transactionExpired) bg-gray-200 text-gray-800 dark:bg-gray-800 dark:text-gray-300 @else bg-primary-100 text-primary-800 dark:bg-primary-900 dark:text-primary-300 @endif">{{ $transaction->purchase_amount_formatted }}</span>
                            @elseif($transaction->event == 'staff_credited_points')
                                {!! trans('common.points_issued') !!}
                            @elseif($transaction->event == 'staff_redeemed_points_for_reward')
                                {!! trans('common.reward') !!}
                            @endif
                        </h3>
                        <time class="ml-2 mb-2 text-right text-sm font-normal leading-none mt-2 order-last @if($transactionExpired) text-gray-300 dark:text-gray-600 @else text-gray-400 dark:text-gray-500 @endif">
                            {{ $transaction->created_at->diffForHumans() }}
                        </time>
                    </div>
                    <p class="text-base font-normal @if($transactionExpired) text-gray-300 dark:text-gray-600 @else text-gray-500 dark:text-gray-400 @endif">
                        {{ ($transaction->points > 0) ? '+' : '' }}{!! trans('common.amount_points', ['points' => '<span class=\'format-number\'>' . $transaction->points . '</span>']) !!}
                    </p>
                    <p class="text-sm font-normal @if($transactionExpired) text-gray-300 dark:text-gray-600 @else text-gray-400 dark:text-gray-500 @endif mt-2">
                        @if(in_array($transaction->event, ['staff_redeemed_points_for_reward']))
                            {{ $transaction->reward_title }}
                        @endif
                        @if(in_array($transaction->event, ['initial_bonus_points', 'staff_credited_points_for_purchase', 'staff_credited_points']))
                            @if($transaction->expires_at->isPast() && $transaction->points_used == 0)
                                {!! trans('common.points_expired', ['points' => '<span class=\'format-number\'>' . $transaction->points . '</span>', 'dateDiffFromNow' => $transaction->expires_at->diffForHumans()]) !!}
                            @elseif($transaction->expires_at->isPast() && $transaction->points_used > 0)
                                @if($transaction->points - $transaction->points_used == 0)
                                    {!! trans('common.points_used', ['points_used' => '<span class=\'format-number\'>' . $transaction->points_used . '</span>', 'points' => '<span class=\'format-number\'>' . ($transaction->points - $transaction->points_used) . '</span>']) !!}
                                @else
                                    {!! trans('common.points_used_and_expired', ['points_used' => '<span class=\'format-number\'>' . $transaction->points_used . '</span>', 'points' => '<span class=\'format-number\'>' . ($transaction->points - $transaction->points_used) . '</span>', 'dateDiffFromNow' => $transaction->expires_at->diffForHumans()]) !!}
                                @endif
                            @elseif($transaction->expires_at->isFuture() && $transaction->points_used == 0)
                                {!! trans('common.points_expire', ['points' => '<span class=\'format-number\'>' . $transaction->points . '</span>', 'dateDiffFromNow' => $transaction->expires_at->diffForHumans()]) !!}
                            @elseif($transaction->expires_at->isFuture() && $transaction->points_used > 0)
                                @if($transaction->points - $transaction->points_used == 0)
                                    {!! trans('common.points_used', ['points_used' => '<span class=\'format-number\'>' . $transaction->points_used . '</span>', 'points' => '<span class=\'format-number\'>' . ($transaction->points - $transaction->points_used) . '</span>']) !!}
                                @else
                                    {!! trans('common.points_used_points_expire', ['points_used' => '<span class=\'format-number\'>' . $transaction->points_used . '</span>', 'points' => '<span class=\'format-number\'>' . ($transaction->points - $transaction->points_used) . '</span>', 'dateDiffFromNow' => $transaction->expires_at->diffForHumans()]) !!}
                                @endif
                            @endif
                        @endif
                    </p>

                    @if($showStaff)
                        <x-staff.staff-card class="mt-3" :transaction="$transaction" :staff="$transaction->staff" />
                    @endif

                    @if($showNotes && $transaction->note)
                        <div class="flex p-4 mt-4 text-blue-800 rounded-lg bg-blue-100 dark:bg-blue-950 dark:text-blue-400">
                            <x-ui.icon icon="info" class="flex-shrink-0 w-5 h-5"/>
                            <div class="ml-3 text-sm font-normal">
                                {{ $transaction->note }}
                            </div>
                        </div>
                    @endif

                    @if($showAttachments && $transaction->image)
                        <a target="_blank" href="{{ $transaction->image }}" class="mt-3 flex items-center text-link">
                            <x-ui.icon icon="paper-clip" class="w-5 h-5 mr-1"/>
                            {{ trans('common.attachment') }}
                        </a>
                    @endif
                </li>
            @endforeach
        </ol>
    @endif
@endif