@php $id = 'popup_completed' @endphp
@component(getPopupLayout(), ['id'=>$id])
<div class="status_item" status_id="default">
    <!-- Image Title Description -->
    <div class="my-4">
        <h5 class="title">{!! __('stampcard.titleCompleteGrid') !!}</h5>
        <h1 class="text-warning reward-title"></h1>
        <p class="subtitle">{!! __('stampcard.labelCompleteGridDescription') !!}</p>
    </div>

    @include('components.main.multi_reward')

    <p class="status_message"></p>

    <div class="position-relative" style="max-height: 500px; overflow: scroll;">
        <img style="object-fit: contain; display: none"
             src="/" class="receipt-preview mx-auto w-100" alt=""/>
    </div>

    <p class="receipt_uid_message"></p>

    <!-- CTA BUTTONS -->
    <div class="btn-wrap">
        <button class='btn btn-primary' load_popup="popup_rewards">View Rewards</button>
{{--        @include('components.main.btn-receipt-reupload')--}}
        @include('components.main.btn-receipt-okay')
    </div>

</div>

<!-- Seems to be not used coz status rewards comes before completed-->
<div class="status_item" status_id="reward">
    <!-- Title Description -->
    <h5>{!! __('stampcard.titleCompleteGrid') !!}</h5>
    <p>{!! __('stampcard.labelCompleteGridDescription') !!}</p>

    <!-- CTA BUTTONS -->
    <div class="btn-wrap">
        <button id="" class='btn btn-primary' onclick="loadPopup('popup_reward')">
            {{ __('stampcard.btnClaimYourPrizeNow') }}
        </button>
    </div>
</div>

<div class="status_item" status_id="last">
<!-- Title Description -->
    <h6>{!! __('stampcard.titleCompleteLastGrid') !!}</h6>
    <p>{!! __('stampcard.labelCompleteLastGridDescription') !!}</p>

    <!-- CTA BUTTONS -->
    <div class="btn-wrap">
{{--        @include('components.stampcard.dropdown-directory')--}}
        @include('components.stampcard.btn-view-receipt')
    </div>
</div>


<div class="status_item" status_id="address">
    @include('components.stampcard.address-form', ['cta_id'=>'popup_completed-submit-address'])
</div>



@endcomponent