@php $id = 'popup_singpost_reward_voucher' @endphp
@component(getPopupLayout(), ['id' => $id])
    <div class="status_item my-4 text-center" status_id="default">
        <h5 class="title">Hi {!! \Illuminate\Support\Facades\Auth::user()->name !!}</h5>

        <!-- Redeem Points Section -->
        <p class="redeem-title">{!! __('messages.singpost_reward_popup_claim_points') !!}</p>
        <div class="star-points-box">
            <span id="singpost-star-points" class="singpost-star-points"></span>
        </div>

        <!-- Promo Code Section -->
        <p class="redeem-title">{!! __('messages.singpost_reward_popup_claim_code') !!}</p>
        <div class="promo-code-box">
            <span id="singpost-reward-voucher" class="promo-code"></span>
        </div>
        <br>
        <p class="redeem-title">{!! __('messages.singpost_reward_popup_description') !!}</p>
        <!-- Okay Button -->
        <button class="btn btn-primary mt-3" id="singpost-qr-modal-okay" data-dismiss="modal">Okay</button>
    </div>
@endcomponent

<style>
    .title {
        font-size: 1.5rem;
        font-weight: bold;
    }
    .subtitle {
         font-size: 1rem;
         color: #333;
         margin-top: 1rem;
         margin-bottom: 1.5rem;
     }

    .redeem-title {
         font-size: 1rem;
         font-weight: bold;
         color: #333;
         margin-bottom: 0.5rem;
     }
    .star-points-box {
         background-color: #fff;
         border-radius: 8px;
         padding: 10px 20px;
         display: inline-block;
         margin-bottom: 1.5rem;
     }

    .singpost-star-points {
         font-size: 1.2rem;
         font-weight: bold;
         color: #333;
     }

    .promo-code-box {
         background-color: #fff;
         border-radius: 8px;
         padding: 10px 20px;
         display: inline-block;
         margin-bottom: 1.5rem;
     }
    .promo-code {
         font-size: 1.5rem;
         font-weight: bold;
         color: #000;
     }
</style>