@section('style')
@parent

@if(!config($k = 'view.css.is_promocard_css_loaded', false) && (config([$k => true]) || 1))
<style>
    .promocard .promocard_cta.claimable {
        {!! extractCssBackgroundColor(config('digital_voucher.color_scheme_hex.btn_download'), true) !!}
        {!! extractCssFontColor(config('digital_voucher.color_scheme_hex.font.btn_download'), true) !!}
    }
    .promocard a.promocard_copy_tnc {
        {!! extractCssFontColor(config('digital_voucher.color_scheme_hex.theme'), true) !!}
    }
</style>
@endif
@endsection

@php
    $placeholder = $is_load ? 'placeholder' : '';
@endphp
<div class="promocard p-2 mt-0 col-lg-3 col-sm-4 col">
    <div class="promocard_wrapper h-100">
        <a class="promo-page-link" data-ajax="false">
            <div class="imageblur">
                <div class="imageblur-main {{ $placeholder }}">
                </div>
                <div class="imageblur-blur {{ $placeholder }}">
                </div>
            </div>
        </a>

        <div class="promocard_copy h-100">
            <a class="promo-page-link" data-ajax="false">
                <label class="promocard_copy_title mb-1 {{ $placeholder }}"></label>
            </a>
            <label class="promocard_copy_detail mb-0 {{ $placeholder }}"></label>
        </div>

        <div class="promocard_tnc">
            <a class="promocard_copy_tnc flex-shrink-0 w-100 btn ml-0 pl-0 {{ $placeholder }}" href="javascript: void(0);" data-ajax="false">
                {{ $placeholder ? '' : __('label.term_and_condition') }}
            </a>
            <label class="promocard_copy_tnc d-none"></label>
        </div>

        @if($isShowExpiryDate)
        <div class="promocard_expiry_date">
            <label class="promocard_expiry_date_label {{ $placeholder }}">{{ __('heading.label_valid_until') }}</label>
        </div>
        @endif

        <div class="promocard_cta_container">
            <button class="promocard_cta w-100 claimable">{{ $placeholder ? '' : __('heading.button_claim') }}</button>
        </div>
    </div>
</div>

@if(!config($k = 'view.js.is_card_js_loaded') && (config([$k => true]) || 1))
    @section('script')
        @parent

        <script>
        var PROMO_CARD_CTA_TYPE = {!! json_encode([
            'active'            => [ 'class' => 'claimable', 'title' => __('heading.button_claim') ],
            'expired'           => [ 'class' => 'unclaimable', 'title' => __('heading.button_voucher_expired') ],
            'fully_used'        => [ 'class' => 'unclaimable', 'title' => __('heading.button_voucher_fully_used') ],
            'fully_redeemed'    => [ 'class' => 'unclaimable', 'title' => __('heading.btn_fully_redeemed')],
            'downloaded'        => [ 'class' => 'unclaimable', 'title' => __('heading.btn_redeemed') ],

            'burnt'             => [ 'class' => 'unclaimable', 'title' => __('heading.use_voucher_button_claimed') ],
            'unuse'             => [ 'class' => 'redeem', 'title' => __('heading.use_voucher_button_redeem_voucher') ],
            'unuse_redeem'      => [ 'class' => 'claimable', 'title' => __('label.btn_wallet_redeem_voucher') ],
        ]) !!};
        var URL_MY_WALLET = '{{ route('my') }}';
        var DEFAULT_CARD_CONFIG = {
            bg_color: '{!! addslashes(config('digital_voucher.promocard.default.background_color')) !!}',
            img_path: '{!! addslashes(config('digital_voucher.promocard.default.image_path')) !!}'
        };
        </script>

    @endsection
@endif