@extends('mobile.layouts.app', ['disableFoot' => true])
@section('title', app_name() . ' | Elite Rewards')
@push('after-styles')
<style>
.popup {
  animation: popup 0.4s forwards;
}

@keyframes popup {
  0% {
    transform: translateY(100%);
  }
  100% {
    transform: translateY(0%);
  }
}
</style>
@endpush
@section('content')
    @include('mobile.includes.app-bar', ['navBarName' => __('mobile.my_rewards'),'backRoute'=>route('mobile.rewards')])
    @include('mobile.includes.qr-card')
    <div class="p-4">
        <div class="flex mb-4 justify-between sm:justify-around">
            <a href="#" tag="active"
                class="inline-flex changeTag text-xs  items-center px-5 py-2 text-blue-900 font-bold bg-blue-200 rounded-lg active w-fit dark:bg-blue-600">
                @lang('mobile.active_rewards')
            </a>
            <a href="#" tag="past"
                class="inline-flex changeTag text-xs items-center px-5 py-2 text-gray-500 bg-white font-bold rounded-lg active w-fit dark:bg-blue-600">
                @lang('mobile.past_rewards')
            </a>
        </div>
        <div class="block rewardHistoryList" tag="active" id="activeList">
            <div id="accordion-collapse" data-accordion="collapse" class="shadow-lg md:max-w-lg md:mx-auto">
                @foreach ($activeRewards as $active)
                    @include('mobile.includes.reward-list-component', [
                        'id' => $active->id,
                        'merchantImg' => optional(optional($active->reward)->client)->logo,
                        'title' => optional($active->reward)->name,
                        'point' => $active->used_points,
                        'coupon' => $active->coupon_code,
                        'couponImg' => optional($active->reward)->image,
                        'description' => optional($active->reward)->description,
                        'expiry' => $active->expiry,
                    ])
                @endforeach
            </div>
            <div class="pt-3">
                {!! $activeRewards->links('mobile-pagination') !!}
            </div>
        </div>
        <div class="block rewardHistoryList hidden" tag="past" id="pastList">
            <ul class="max-w-full md:max-w-lg md:mx-auto shadow-md divide-y divide-gray-400">
                @foreach ($pastRewards as $past)
                    <li class="p-3">
                        <div class="grid grid-cols-3 items-center space-x-4 rtl:space-x-reverse">
                            <div class="inline-flex p-1 md:p-2 rounded-full">
                                @if (optional(optional($past->reward)->client)->logo)
                                    <img class="h-14 max-w-auto me-auto" src="{{ asset('uploads/'.optional(optional($past->reward)->client)->logo) }}" alt="merchant logo">
                                @else
                                    <img class="h-14 max-w-auto me-auto" src="{{ asset('img/mobile/default_merchant.png') }}" alt="merchant logo">
                                @endif
                            </div>
                            <div class="col-span-2">
                                <p class="text-sm">{{ optional($past->reward)->name }}</p>
                                <p class="text-green-500 text-sm">{{$past->used_points}} points</p>
                                <span class="bg-gray-500 text-white text-xs font-light me-2 px-2.5 py-0.5 rounded dark:bg-gray-700 dark:text-white">{{$past->use == 1 ? 'Used': 'Expired'}}</span>
                            </div>
                        </div>
                    </li>
                @endforeach
            </ul>
            <div class="pt-3">
                {{$pastRewards->links('mobile-pagination')}}
            </div>
        </div>
    </div>
@endsection

@push('after-scripts')
    <script src="https://cdn.rawgit.com/davidshimjs/qrcodejs/gh-pages/qrcode.min.js"></script>
    <script>
        // formatCardNumber('.card-number');
        $(document).ready(function() {
            const params = new URLSearchParams(window.location.search);
            const keyArray = Array.from(params.keys());
            if (keyArray.includes('p')) {
                changeTag('past');
            } else {
                changeTag('active');
            }

            $('.changeTag').click(function(e) {
                e.preventDefault();
                const tag = $(this).attr('tag');
                changeTag(tag);
            });

            $('.qr-code-generate').click(function() {
                var couponCode = $(this).data('coupon-code');
                var title = $('#qr-card-modal').find('.text-lg');
                title.html(couponCode);
                $('#qrCard').html('');
                new QRCode(document.getElementById("qrCard"),  {
                    text: couponCode,
                    width: 200,
                    height: 200,
                    correctLevel : QRCode.CorrectLevel.H
                });
            })
        });

        const changeTag = (tag) => {
            $('.changeTag').removeClass('bg-blue-200 text-blue-900').addClass('text-gray-500 bg-white');
            $('.rewardHistoryList').addClass('hidden');
            if (tag == 'active') {
                $('.changeTag[tag="active"]').addClass('bg-blue-200 text-blue-900').removeClass(
                    'text-gray-500 bg-white');
                $('#activeList').removeClass('hidden');
            } else {
                $('.changeTag[tag="past"]').addClass('bg-blue-200 text-blue-900').removeClass('text-gray-500 bg-white');
                $('#pastList').removeClass('hidden');
            }
        }
    </script>
@endpush