@extends('mobile.layouts.app')
@section('title', app_name() . ' | Elite Rewards')
@php
    $customer = auth()->user()->customer;
    $totalReward = $customer->used_point + $customer->balance_point;
    $totalReward = $totalReward > 0 ? $totalReward : 1;
    $date = '';
@endphp
@push('after-styles')
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css" />
    <style>
        .gradient_div {
            height: 5px;
            width: 100%;
            margin-bottom: 16px;
            border-radius: 5px;
            background: linear-gradient(to right,
                    #4DF1A1 0%,
                    #4DF1A1 {{ number_format(($customer->balance_point / $totalReward) * 100, 2) }}%,
                    #F24750 {{ number_format(($customer->used_point / $totalReward) * 100, 2) }}%,
                    #F24750 100%);
        }
    </style>
@endpush
@section('content')
    @include('mobile.includes.app-bar', ['navBarName' => __('mobile.wallet')])
    <div class="px-3 my-2">
        <i class="fa-regular fa-credit-card text-2xl float-right"></i>
        <div>
            <span class="text-gray-500">for</span> <span class="text-md font-bold text-blue-800">Award
               </span><span class="text-gray-500"> Card</span>
        </div>
    </div>
    <div class=" overflow-x-scroll no-scrollbar">
        <div class="flex">
            <div class="w-5/6 md:w-3/6 px-5 pt-3 pb-4 bg-blue-900 mx-3 rounded-2xl flex-shrink-0 flex-grow-0 border">
                <img src="{{ asset('img/logo_h.png') }}" alt="" class="w-28" srcset="">
                <span class=" mt-1 text-blue-900 block card-number font-bold">{{ $customer->card->card_no }}</span>
                <span class="text-blue-900 block mt-1 font-bold">Name- {{ $customer->name }}</span>
            </div>
            <div class="w-5/6 md:w-3/6 p-5 bg-blue-900 me-2 justify-center rounded-2xl flex-shrink-0 flex-grow-0 border">
                @php
                    $qrCode = base64_encode(
                        QrCode::format('png')
                            ->size(150)
                            ->generate($customer->card->encrypted_data)
                    );
                @endphp
                <img class="mx-auto w-2/5" src="data:image/png;base64,
                 {!! $qrCode !!}">
                <span class="text-blue-900 text-center block mt-2 font-bold">Pin Number: {{ $customer->card->user_pin }}</span>
            </div>
        </div>
    </div>
    <div class="px-3 mt-4">
        <section>
            <div class="mb-1">
                <span class=" float-right text-sm font-bold">+{{ $customer->balance_point }}</span>
                <span class="font-bold">@lang('mobile.remaining_points')</span>
            </div>
            <div class="gradient_div"></div>
            <div class="grid grid-cols-2">
                <div class="flex flex items-center">
                    <div
                        class="bg-green-100 text-green-500 text-xl font-medium me-3 px-3 py-2 flex items-center justify-center  rounded dark:bg-green-900 dark:text-green-300">
                        <i class="fa-solid fa-arrow-up"></i>
                    </div>
                    <div class="text-sm">
                        <span class=" text-gray-500 block">@lang('mobile.point_balance')</span>
                        <span class="font-bold">{{ $customer->balance_point }}</span>
                    </div>
                </div>
                <div class="flex flex items-center">
                    <div
                        class="bg-red-100 text-red-500 text-xl font-medium me-3 px-3 py-2 flex items-center justify-center  rounded dark:bg-red-900 dark:text-red-300">
                        <i class="fa-solid fa-arrow-down"></i>
                    </div>
                    <div class="text-sm">
                        <span class="text-gray-500 block">@lang('mobile.claim')</span>
                        <span class="font-bold">{{ $customer->used_point }}</span>
                    </div>
                </div>
            </div>
        </section>
        <!-- Transactions -->
        <section>
            <h5 class="font-bold my-4">@lang('mobile.transactions')</h5>
            <div class="flex justify-between sm:justify-around mb-10">
                <a href="#" tag="received"
                    class="inline-flex changeTag text-xs  items-center px-4 py-2 text-blue-900 font-bold bg-blue-200 rounded-lg active w-fit dark:bg-blue-600">
                    @lang('mobile.received_points')
                </a>
                <a href="#" tag="used"
                    class="inline-flex changeTag text-xs items-center px-4 py-2 text-gray-500 bg-white font-bold rounded-lg active w-fit dark:bg-blue-600">
                    @lang('mobile.used_points')
                </a>
            </div>
            <div>
                <div class="block pointHistoryList" id="receivedPointsList" tag="received">
                    <ul class="divide-y divide-gray-200 dark:divide-gray-700 mt-3 shadow-md">
                        <!-- Received Poinsts List -->
                        @foreach ($points as $key => $point)
                            @php
                                if ($key == 0) {
                                    $date = $point->created_date;
                                } elseif (!$point->created_at->isSameDay($points[$key - 1]->created_at)) {
                                    $date = $point->created_date;
                                } else {
                                    $date = '';
                                }
                            @endphp

                            @include('mobile.includes.wallet-point-component', [
                                'date' => $date,
                                'time' => $point->created_time,
                                'user' => $point->user,
                                'point' => $point->point,
                                'invoice_no' => $point->invoice_no
    ? ($point->remark ? $point->invoice_no . ' , ' . $point->remark : $point->invoice_no)
    : $point->remark,
                                'ref_no' => $point->ref_no,
                                'status' => 'received',
                            ])
                        @endforeach
                    </ul>
                    <div class="pt-3">
                        {{ $points->links('mobile-pagination') }}
                    </div>
                </div>
                <div class="block pointHistoryList  hidden" id="usedPointsList" tag="used">
                    <ul class="divide-y  divide-gray-200 dark:divide-gray-700 mt-3 shadow-md ">
                        <!-- Used Poinsts List -->
                        @foreach ($coupons as $key => $coupon)
                            @php
                                if ($key == 0) {
                                    $date = $coupon->created_date;
                                } elseif (!$coupon->created_at->isSameDay($coupons[$key - 1]->created_at)) {
                                    $date = $coupon->created_date;
                                } else {
                                    $date = '';
                                }
                            @endphp
                            @include('mobile.includes.wallet-point-component', [
                                'time' => $coupon->created_time,
                                'user' => $coupon->reward->client->user,
                                'point' => $coupon->used_points,
                                'reward' => $coupon->reward->name,
                                'status' => 'used',
                            ])
                        @endforeach

                    </ul>
                    <div class="pt-3">
                        {{ $coupons->links('mobile-pagination') }}
                    </div>
                </div>

            </div>
        </section>
    </div>
@endsection

@push('after-scripts')
    @if (session('require_data'))
        <script>
            localStorage.setItem('callBackUrl', "{{ data_get(session('require_data'), 'callback_url') }}")
        </script>
    @endif
    <script>
        formatCardNumber('.card-number');
        $(document).ready(function() {
            const params = new URLSearchParams(window.location.search);
            const keyArray = Array.from(params.keys());
            if (keyArray.includes('up')) {
                changeTag('used');
            } else {
                changeTag('received');
            }

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

        const changeTag = (tag) => {
            $('.changeTag').removeClass('bg-blue-200 text-blue-900').addClass('text-gray-500 bg-white');
            $('.pointHistoryList').addClass('hidden');
            if (tag == 'received') {
                $('.changeTag[tag="received"]').addClass('bg-blue-200 text-blue-900').removeClass(
                    'text-gray-500 bg-white');
                $('#receivedPointsList').removeClass('hidden');
            } else {
                $('.changeTag[tag="used"]').addClass('bg-blue-200 text-blue-900').removeClass('text-gray-500 bg-white');
                $('#usedPointsList').removeClass('hidden');
            }
        }
    </script>
@endpush