@php
$tab_items = ['reward'=>'Rewards Available','wallet'=>'Rewards Downloaded'];
$is_show_point = data_get($uiConfigs, 'showPoint', $is_show_point ?? true);
if(!$is_show_point){
    unset($tab_items['reward']);
}
$campaign_status = getCampaignStatus();
@endphp

@once
    @push('script')
        <script>
            var VALIDATE_POSTAL = {{ boolToInt($validate_postal ?? false) }};
            var VALIDATE_NRIC = {{ boolToInt($validate_nric ?? false) }};
        </script>
    @endpush
@endonce

@section('script')
    <script src="{{ mix('js/enterprise/reward.js') }}"></script>
@append

@component(getPopupLayout(),  ['id' => 'popup_rewards'])
    <div class="reward-body-container">

        <h5>{{ $is_show_point ? __('enterprise.titlePointRedemptionCatalogue') : __('enterprise.titleVoucherWallet') }}</h5>
        <div class="status_item" status_id="default">
            <h6 class="{{ $is_show_point ? '' : 'd-none' }}">{{ __('enterprise.labelMyPoints') }}: <span  class="reward_point" name="reward_point"></span></h6>
        </div>

        @if($is_show_point)
        <ul class="rewards_tabs nav nav-fill nav-pills justify-content-around flex-nowrap" role="tablist" style="font-size:0.9rem">

            @foreach($tab_items as $tab=>$name)
                <li class="nav-item">
                    <a class="nav-link {{ $loop->first?'active':''}}" id="{{$tab}}-tab" data-toggle="pill" href="#{{$tab}}-content" role="tab" >{{$name}}</a>
                </li>
            @endforeach
        </ul>
        @endif

        <div class="rewards_content tab-content">
            @foreach($tab_items as $tab=>$name)
                @php
                    $active = $tab==='wallet' && !$is_show_point ? $loop->last : $loop->first;
                @endphp
                <div class="tab-pane fade {{ $active ?'show active':''}}" id="{{$tab}}-content" role="tabpanel">
                    <div class="{{$tab}}-container row text-dark justify-content-around ml-0 mr-0">
                        <div class="p-1 col-12 default-loading default-font-color d-none my-2">
                            @include('components.utility.loading')
                        </div>
                        @include('components.main.voucher-card')
                    </div>
                </div>

            @endforeach
        </div>
    </div>


@endcomponent

@component(getPopupLayout(),  ['id' => 'popup_attempt_plant_reward_not_synced'])

    <div>
        <img alt="voucher image" class="w-100 voucher-image">
        <p><h6>{{ __('heading.title_are_you_sure') }}</h6></p>
        <p>
            {!!
                __(
                    htmlentities(__('enterprise.labelRedemptionConversionDescription')),
                    [
                        'num_point' => $is_show_point ? ('<strong><u><span class="voucher-point">500</span> '
                            . htmlentities(__('enterprise.labelPoint'))
                            . '</u></strong>') : '',
                        'voucher_name' => '<strong><u><span class="voucher-title">30% off selected items at Tomei</span></u></strong>'
                    ]
                )
            !!}
            {{--
            You will convert
            <strong><u> <span class="voucher-point">500</span> token </u></strong>
            to
            <strong><u><span class="voucher-title">30% off selected items at Tomei</span></u></strong>
            --}}
        </p>
    </div>

@endcomponent

@component(getPopupLayout(),  ['id' => 'popup_attempt_plant_reward_no_token'])

    <div>
        <h6>{{ __('heading.title_oops') }}</h6>
        <p>
            {{ __('enterprise.labelRedemptionNotEnoughPointsConversion') }}
        </p>
        <div>
            <button class="btn btn-primary" load_popup="popup_rewards">{{ __('label.btn_okay') }}</button>
        </div>
    </div>

@endcomponent

@component(getPopupLayout(),  ['id' => 'popup_attempt_plant_reward_loading'])
    <div class="my-5">

        <div class="spinner-border" role="status">
            <span class="sr-only">{{ __('label.loading') }}...</span>
        </div>
        <div class="mt-4 h6">{{ __('label.loading') }}...</div>
    </div>

@endcomponent

@component(getPopupLayout(),  ['id' => 'popup_attempt_reward_need_address'])
    @include('components.main.' . getCustomizeViewPath('popup.address_form', 'address-form-global'), ['cta_id'=>'popup_reward-submit-address'])
@endcomponent

@component(getPopupLayout(),  ['id' => 'popup_attempt_plant_reward_redemption_confirmation'])

    <div class="reward-body-container">
        @if(config('sys.reward_marketplace.confirmation_ui_type') === 'type2')
            <div class="row">
                <div class="col-12">
                    <p><h6>{{ __('heading.title_are_you_sure') }}</h6></p>
                </div>

                <div class="col-12" style="padding: 0px 40px;">
                    <img alt="voucher image" class="w-100 voucher-image">
                </div>

                <div class="col-12">
                    <div class="row font-weight-bold" style="padding: 0px 25px;">
                        <div class="col-8 text-left">
                            <span class="voucher-title">30% off selected items at Tomei</span>
                        </div>

                        <div class="col-4 text-right">
                            @if ($is_show_point)
                                <span class="voucher-point">500</span>
                                {{ __('label.pts') }}
                            @endif
                        </div>

                        <div class="col-12 text-left">
                            <small>
                                <span class="voucher-tnc-txt"></span>
                            </small>
                        </div>
                    </div>
                </div>
                <br>
                <br>
            </div>
        @else
            <img alt="voucher image" class="w-100 voucher-image">
            <p><h6>{{ __('heading.title_are_you_sure') }}</h6></p>
            <p>
                {!!
                    __(
                        htmlentities(__('enterprise.labelRedemptionConversionDescription')),
                        [
                            'num_point' => $is_show_point ? ('<strong><u><span class="voucher-point">500</span> '
                                . htmlentities(__('enterprise.labelPoint'))
                                . '</u></strong>') : '',
                            'voucher_name' => '<strong><u><span class="voucher-title">30% off selected items at Tomei</span></u></strong>'
                        ]
                    )
                !!}
                {{--
                You will convert
                <strong><u> <span class="voucher-point">500</span> points </u></strong>
                for
                <strong><u><span class="voucher-title">30% off selected items at Tomei</span></u></strong>
                --}}
            </p>
            <p class="voucher-tnc-box">
                {{-- <span class="font-weight-bold">Terms and Conditions:</span><br> --}}
                <span class="voucher-tnc-txt"></span>
            </p>
        @endif

        <div>
            <button class="btn btn-primary btn-continue" type="button" data-voucher="APP-20211027-007">{{ __('label.btn_download') }}</button>
        </div>
    </div>

@endcomponent

@component(getPopupLayout(),  ['id' => 'popup_attempt_plant_reward_redemption_success'])

    <div class="my-4">
        <img src="{{asset('/assets/images/generic/icons/ico-gold-check.svg')}}" width="100" height="100" class="mx-auto mb-2"/>
        <p><h4>{!! __('enterprise.titleRewardDownloaded') !!}</h4></p>
        {{--        <p>Please find the voucher in &quot;My Voucher&quot; tab on your CapitaStar App.</p>--}}
        {{--        --}}{{-- <p><u>How to find voucher</u></p> --}}
        {{--        <div>--}}
        {{--            <a href="https://cstar.sg/ul/oM1rrQ2Ueknm" target="_blank">--}}
        {{--                <img src='{{ asset(config('stampcard.client_app_logo')) }}'>--}}
        {{--            </a>--}}
        {{--        </div>--}}
        <p>{{ __('enterprise.labelRedemptionSuccessDescription')}}</p>
        <div class="voucher-code my-1" style="display: none">
            <div class="form-group mb-0">
                <div class="input-group input-group-sm">
                    <input class="bg-white border-right-0 border form-control" type="text" value="" onclick="copyInput(this)" readonly="">
                    <div class="rounded-right input-group-append bg-white" onclick="copyInput(this)">
                        <button class="btn border-left-0 border " type="button"><i class="fas fa-copy"></i></button>
                    </div>
                </div>
                <div class="copy-txt d-none small text-muted text-center"></div>
            </div>
        </div>
    </div>
    <button class="btn btn-primary" data-dismiss="modal">{{ 'Okay' /* ?? __('enterprise.labelUploadReceipt')*/ }}</button>

@endcomponent


@component(getPopupLayout(),  ['id' => 'popup_attempt_plant_reward_redemption_error'])

    <div class="status_item" status_id="error">
        <div class="my-4">
            <h5 class="mb-4" id="error-title"></h5>
            <p class="error-msg"></p>
            <button class="btn btn-primary" data-dismiss="modal">{{ __('label.btn_okay') }}</button>
        </div>
    </div>

@endcomponent

@component(getPopupLayout(),  ['id' => 'popup_attempt_use_digital_voucher'])

    <div class="status_item" status_id="default">
        <div class="my-4">
            <h5 class="mb-4">Redeem this reward</h5>
            @include('components.main.6-digit-pin', ['id'=> 'reward_digital_voucher_pin'])
            <p class="error-msg"></p>
            <div class="message mb-3"></div>
            <button class="btn btn-primary" id="submit_digital_voucher_pin">Redeem Voucher</button>
        </div>
    </div>

@endcomponent

@component(getPopupLayout(),  ['id' => 'congrats_popup'])
    @include('components.spinandwin.popup.congrats')
@endcomponent

@component(getPopupLayout(),  ['id' => 'popup_attempt_reward_need_fund_transfer_details'])
    @include('components.main.' . getCustomizeViewPath('popup.cash_voucher_form', 'cash-voucher-form-global'), ['cta_id'=>'popup_reward-submit-fund-details'])
@endcomponent

@component(getPopupLayout(),  ['id' => 'fund_transfer_congrats_popup'])
    @include('components.spinandwin.popup.fund_transfer_congrats')
@endcomponent