@once
@push('script')
<script>
    $(function () {
        IS_MEMBER= true;
        function redeemVoucher() {
            console.log('btn-redeem-reward');
            var voucher_code = $(this).data('voucher');
            var token_required = $(this).data('token');
            var need_address = $(this).data('voucher_type') !== 'promo_code';

            console.log(voucher_code);
            console.log(token_required);

            token = $('.reward_point').text();
            // token = 2000;
            // need_address= true;

            $card = $(this).parents('.card');
            console.log($card);
            voucher_image = $card.find('.voucher-image').attr('src')
            voucher_title = $card.find('.voucher-title').text();
            voucher_point = $card.find('.voucher-point').text();
            const tnv = $card.find('.voucher-title').data('tnc');

            console.log(voucher_image);

            if (parseInt(token) >= parseInt(token_required)) {
                if (IS_MEMBER) {
                    // do ajax
                    // console.log('do ajax');

                    $this = $('#popup_attempt_plant_reward_redemption_confirmation');
                    $this.find('.voucher-image').attr('src', voucher_image)
                    $this.find('.voucher-title').text(voucher_title)
                    $this.find('.voucher-point').text(voucher_point)
                    $this.find('.voucher-tnc-txt').html(tnv);
                    const tnc_box = $this.find('.voucher-tnc-box');
                    tnv ? tnc_box.show() : tnc_box.hide();


                    loadPopup('popup_attempt_plant_reward_redemption_confirmation', 'default', function () {
                        function fn_redeem_ajax () {
                            // loadPopup('popup_attempt_plant_reward_loading');
                            window.doAJAX('download/' + voucher_code, 'POST').promise.then(res => {
                                hide_popup();
                                if (res.error) {
                                    $('#popup_attempt_plant_reward_redemption_error #error-title').text(res.error_header);
                                    $('#popup_attempt_plant_reward_redemption_error .error-msg').text(res.error);
                                    loadPopup('popup_attempt_plant_reward_redemption_error', 'error');
                                    return;
                                }
                                // if (res.data.summary) {
                                //     window.plant_summary.summary = res.data.summary;
                                //     window.doUpdatePlantSummaryUi();
                                // }
                                loadPopup('popup_attempt_plant_reward_redemption_success');
                                console.log(res.data);
                            }).catch(err => {
                                $('#popup_attempt_plant_reward_redemption_error #error-title').text(err.error_header || err.error || '');
                                $('#popup_attempt_plant_reward_redemption_error .error-msg').text(err.error_msg || err.error || err.message || err);
                                loadPopup('popup_attempt_plant_reward_redemption_error', 'error');
                                console.log(err);
                            });
                        }
                        if (need_address){
                            loadPopup('popup_attempt_reward_need_address', 'default');



                            $(document).on('click' ,'#popup_reward-submit-address', function (e){
                                $('.input-group').removeClass('text-danger');
                                $('.message').removeClass('text-danger').text('');
                                setButtonToLoading( e.currentTarget );
                                let thispopup =  $(e.currentTarget).parents('.modal-body');
                                console.log(thispopup);

                                let sendForm = true;
                                let filled = false;
                                let required_fields =  $(thispopup).find(".required");

                                let postcode =$(thispopup).find('.delivery-postal-input');
                                let address = $(thispopup).find('.delivery-address-input');
                                let state = $(thispopup).find('.delivery-state-input');
                                let message = $(thispopup).find(".message");

                                var address_val = $.trim($(address).val());
                                var postcode_val = $.trim($(postcode).val());
                                var state_val = $(state).val();

                                $.each(required_fields, (i, input) => {
                                    // console.log(input,$(input).val().trim())
                                    if ( !$.trim ($(input).val()) ) {
                                        // $(input).parents('.input-group').addClass('error');
                                        $(message).text("{!! addslashes(__('label.msg_fill_required_fields')) !!}");
                                        sendForm = false;
                                    }
                                });

                                var max_length = postcode.attr('maxlength') || 5;
                                var postcode_regex = new RegExp('^\\d{'+max_length+'}$');
                                if (postcode_val.match(postcode_regex) == null) {
                                    // console.log(postcode_val,postcode_val.match(/^\d{5}$/) ==null)
                                    // $(address).parents('.input-group').addClass('error');
                                    $(message).text("{!! addslashes(__('label.msg_invalid_postcode')) !!}");
                                    sendForm = false;
                                }
                                if (!sendForm) {
                                    resetLoadingButton();
                                }
                                else {


                                    const data = {
                                        address: address_val,
                                        postcode: postcode_val,
                                        state: state_val,
                                    };
                                    console.log(data);

                                    var settings = {
                                        url: AJAX_URL + "update_user_delivery_address",
                                        type: "POST",
                                        data: data,
                                        cache: false,
                                        headers: {
                                            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                                        },
                                    };

                                    $.ajax(settings).done(function (response) {
                                        console.log(response);
                                        response.error? hide_popup(): fn_redeem_ajax();

                                    }).fail(function (response) {
                                        console.log(res)
                                        hide_popup();
                                        $(message).text(window.error.default);

                                        // $("#popup_error").find(".message").addClass('error').text(window.error.default);
                                    }).always(function(response){
                                        resetLoadingButton();
                                    });

                                }



                            });

                        } else {
                            fn_redeem_ajax();
                        }
                    });

                } else {
                    $this = $('#popup_attempt_plant_reward_not_synced');
                    $this.find('.voucher-image').attr('src', voucher_image)
                    $this.find('.voucher-title').text(voucher_title)
                    $this.find('.voucher-point').text(voucher_point)

                    loadPopup('popup_attempt_plant_reward_not_synced');
                }
            } else {

                loadPopup('popup_attempt_plant_reward_no_token');
            }
        }

        function init_reward() {

            $('.btn-redeem-reward').off('click', redeemVoucher).click(redeemVoucher);
        }

        // do get rewards ajax
        window.doAJAX('get_exclusive_vouchers?length=99', 'GET').promise.then(res => {
            renderVouchers(res.data);
        }).catch(err => {
            console.log(err);
        });

        function renderVouchers(response) {
            $.each(response, function (k, v) {
                var element = $($('.default-card').get(0)).clone();
                element.removeClass('default-card').removeClass('d-none');
                element.find('.voucher-image').attr('src', v.image)
                element.find('.voucher-title').text(v.title).data('tnc', v.tc);
                element.find('.voucher-point').text(v.point_required);
                element.find('.btn-redeem-reward').data('voucher', v.series_id);
                element.find('.btn-redeem-reward').data('token', v.point_required);
                element.find('.btn-redeem-reward').data('voucher_type', v.voucher_type);

                var $container = $('.reward-container').filter(function(){
                    return $(this).attr('tab-tags').split(',').includes(v.voucher_type)
                })
                element.appendTo($container);

                init_reward();
            })
        }



    })
</script>
@endpush
@endonce

@php
    /*
    $tabs = [
        [
            "title"=> "Suu Balm Products",
            "tags" => "online,adult,kids,hair_scalp",
        ],
        [
            "title"=> "E Vouchers",
            "tags" => "promo_code",
        ],
    ];
    */
    $tabs = \App\Models\VoucherSeries::GetRewardMarketplaceTags(
        config('stampcard.reward_marketplace.display_type'), 
        config('stampcard.client_name')
    );
    $num_tab = count($tabs);
@endphp

@component('components.stampcard.popup.template',  ['id' => 'popup_rewards'])

    <div class="reward-body-container">
        <h5>{{ __('stampcard.titlePointRedemptionCatalogue') }}</h5>
        <div class="status_item" status_id="default">
            <h6>{{ __('stampcard.labelMyPoints') }}: <span  class="reward_point"></span></h6>
        </div>

        <div x-data="{ tab: '{{ $tabs[0] ? $tabs[0]['title'] : '' }}' }" >

            @if($num_tab > 1)
                <ul class="tabs-list">
                    @foreach($tabs as $tab)
                        <li :class="{ 'active': tab === '{{$tab['title']}}' }"
                            @click.prevent="tab = '{{$tab['title']}}'">
                            {{ $tab['title'] }}
                        </li>
                    @endforeach
                </ul>
            @endif

            @foreach($tabs as $tab)
                <div x-show="tab=== '{{$tab['title'] }}'" tab-tags="{{ implode(',', $tab['tags']) }}"
                     class="reward-container row text-dark justify-content-around ml-0 mr-0">
                    <div class="p-1 col-6 text-left default-card d-none" style="display: flex">
                        <div class="p-1 card rounded bg-white justify-content-between">
                            <div class="row mx-auto">
                                <div class="col-12 px-0"><img class="voucher-image w-100" alt="voucher-image" src=""></div>
                                <div class="text-center col-12 px-0 my-1" style="line-height: 1">
                                    <small class="m-0 font-weight-bold text-dark voucher-title"></small>
                                </div>
                                <div class="col-12 px-0 text-right" style="line-height:1">
                                    <small class="m-0 font-weight-bold text-secondary text-right"><span class="voucher-point"></span>
                                        <span style="white-space: nowrap; float:right; margin-left:2px">{{ __('label.pts') }}</span></small>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-12 ">
                                    <small class="m-0 text-muted text-left" style="font-size:8px">{{ __('label.term_and_conditions_apply') }}</small>
                                </div>
                                <div class="col-12">
                                    <button class="w-100 btn btn-primary btn-sm p-1 btn-redeem-reward mb-0" type="button" data-token=""
                                            data-voucher="">{{ __('label.btn_click_to_redeem') }}
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

            @endforeach
        </div>
    </div>

@endcomponent

@component('components.stampcard.popup.template',  ['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(__('stampcard.labelRedemptionConversionDescription')),
                    [
                        'num_point' => '<strong><u><span class="voucher-point">500</span> ' 
                            . htmlentities(__('stampcard.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('components.stampcard.popup.template',  ['id' => 'popup_attempt_plant_reward_no_token'])

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

@endcomponent

@component('components.stampcard.popup.template',  ['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('components.stampcard.popup.template',  ['id' => 'popup_attempt_reward_need_address'])
    @include('components.stampcard.address-form', ['cta_id'=>'popup_reward-submit-address'])
@endcomponent

@component('components.stampcard.popup.template',  ['id' => 'popup_attempt_plant_reward_redemption_confirmation'])

    <div class="reward-body-container">
        @if(config('stampcard.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">
                            <span class="voucher-point">500</span>
                            {{ __('label.pts') }}
                        </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(__('stampcard.labelRedemptionConversionDescription')),
                        [
                            'num_point' => '<strong><u><span class="voucher-point">500</span> ' 
                                . htmlentities(__('stampcard.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_redeem') }}</button>
        </div>
    </div>

@endcomponent

@component('components.stampcard.popup.template',  ['id' => 'popup_attempt_plant_reward_redemption_success'])

    <div class="my-5">
        <p>
            <h6>{!! 
                __(
                    htmlentities(__('stampcard.titleRedemptionSuccess')), 
                    [
                        'voucher_name' => '<span id="voucher-type">voucher</span>'
                    ]
                )
            !!}
            {{-- Congratulations on completeing your Suu balm <span id="voucher-type">voucher</span> redemption. --}}
            </h6>
        </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>{{ __('stampcard.labelRedemptionSuccessDescription') }}</p>
    </div>
    <button class="btn btn-primary" data-dismiss="modal">{{ __('stampcard.labelUploadReceipt') }}</button>

@endcomponent


@component('components.stampcard.popup.template',  ['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