@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 style="text-align: center;">
            <h5>MAX. 3 REDEMPTIONS PER USER</h5>
            *<a href="https://qr1.be/OZ01"
               target="_blank" style="font-size: 15px; color: whitesmoke; text-decoration: underline; cursor: pointer;">Terms & Conditions</a> apply, while stocks last.
        </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>
            </p> --}}
        @endif
        <div class="text-center mt-3">
        <span id="popup_rewards_cta">
            Have another voucher? <br> Click here and head onto <a href="javascript:void(0)"
                onclick="loadPopup('popup_rewards')" style="text-decoration: underline;">Reward Marketplace</a> to redeem
        </span>
        </div>

        <div>
            <br><br>
            <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 style="background: yellow; color: black; padding: 10px;">{!! __('enterprise.titleRewardDownloaded') !!}</h4></p>
        <div class="col-12" style="padding: 0px 40px;">
            <img alt="voucher image" class="w-100 voucher-image">
        </div>
        {{--        <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>

    {{-- variant combination details (location, colour, size) + reservation date --}}
    <div class="variant-details-container text-left mt-2" style="display: none; margin-left: 50px; margin-right: 50px;">
        <div class="variant-location mb-1">
            <strong>Outlet:</strong> <span class="variant-location-val" style="color: yellow; font-weight: bold;"></span>
        </div>
        <div class="variant-colour mb-1">
            <strong>Colour:</strong> <span class="variant-colour-val" style="color: yellow; font-weight: bold;"></span>
        </div>
        <div class="variant-size mb-1">
            <strong>Size:</strong> <span class="variant-size-val" style="color: yellow; font-weight: bold;"></span>
        </div>
        <div class="variant-date mb-1">
            <strong>Date:</strong> <span class="variant-date-val" style="color: yellow; font-weight: bold;"></span>
        </div>
    </div>

    <div class="text-center mt-3" style="color: yellow;">
        <p>{!! __('enterprise.titleRewardDownloadedDesc') !!}</p>
    </div>
    <br>
    <button class="btn btn-primary" onclick="hide_popup(); loadPopup('popup_rewards'); $('#wallet-tab').tab('show');" >{{ 'Complete' /* ?? __('enterprise.labelUploadReceipt')*/ }}</button>
    <div class="text-center mt-3">
            <span id="popup_rewards_cta">
                Have another voucher? <br> Click here and head onto <a href="javascript:void(0)"
                    onclick="loadPopup('popup_rewards')"
                    style="text-decoration: underline;">Reward Marketplace</a> to redeem
            </span>
    </div>
@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_variant_download'])
    <div id="voucher_variant-section" class="d-none">
{{--        <h6 style="padding:10px;">{{ __('heading.select_variant_title') }}</h6>--}}

        <div id="variant-options-container">
            @foreach($voucher_series['combinations'] ?? [] as $combination)
                <div class="form-group" style="position: relative;">
                    <label for="{{ $combination['label'] }}-options" style="display: block; text-align: center; margin-bottom: 5px;">
                        {{ $combination['label'] }}
                    </label>
                    <select id="{{ Str::slug($combination['label']) }}-options"
                            class="form-control"
                            data-variant-id="{{ $combination['id'] }}"
                            data-variant-type="{{ Str::slug($combination['label']) }}">
                        <option value="" disabled selected>Select {{ $combination['label'] }}</option>
                        @foreach($combination['options'] as $option)
                            <option value="{{ $option['id'] }}"
                                    data-variant-id="{{ $combination['id'] }}"
                                    data-value-id="{{ $option['id'] }}">
                                {{ $option['label'] }}
                            </option>
                        @endforeach
                    </select>
                </div>
            @endforeach
        </div>

        <div id="reservation-date-container" class="form-group" style="padding:0 10px;margin-top:10px;display:none;">
            <label for="reservation_date_select">{{ __('heading.reservation_date_select_title') }}</label>
            <span class="form-text" style="margin-bottom: 7px; text-align: right; font-size: 15px;">
                <a href="https://qr1.be/TYVF" target="_blank" style="text-decoration: underline; cursor:pointer;">
                    VIEW</a>
            </span>
            <select id="reservation_date_select" class="form-control"></select>
            {{-- dropdown options will be populated here --}}
            <div id="date-error" class="text-danger small"></div>
        </div>

{{--        <div class="col-12 text-left">--}}
{{--            <small>--}}
{{--                <span class="voucher-tnc-txt"></span>--}}
{{--            </small>--}}
{{--        </div>--}}

        <h5 class="variant_download_warning text-center" style="padding-top: 10px; padding-bottom: 5px; color: yellow;">{!! __('messages.variant_download_warning') !!}</h5>
        <div class="form-check" style="font-size: 0.7rem; background-color: rgba(0, 0, 0, 0.29);">
            <input type="checkbox" class="form-check-input d-none variant_download_tou" id="variant_download_tou">
            <label class="form-check-label d-flex text-justify" for="variant_download_tou">
                <span class="my-auto" style="font-size: 12px;">
                    {!! __('messages.variant_download_checkbox') !!}
                </span>
            </label>
            <small id="tou-error" class="text-danger" style="display:none; margin-top:5px;"></small>
        </div>

        <button type="button" id="submit-variant-selection" class="btn btn-primary" style="margin-top: 10px;">
            {{ __('heading.submit_variant') }}
        </button>

        <small class="error text-danger" style="padding:10px"></small>
    </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