{**
 * Copyright 2024-2025 Simply.IN Sp. z o.o.
 *
 * NOTICE OF LICENSE
 *
 * Licensed under the EUPL-1.2 or later.
 * You may not use this work except in compliance with the Licence.
 *
 * Copy of the Licence is available at:
 * https://joinup.ec.europa.eu/software/page/eupl
 * It is bundled with this package in the file LICENSE.txt
 *
 * Unless required by applicable law or agreed to in writing,
 * software distributed under the Licence is distributed on an as is basis,
 * without warranties or conditions of any kind, either express or implied.
 * Check the Licence for the specific language governing permissions
 * and limitations under the License.
 *
 * @author    Simply.IN Sp. z o.o.
 * @copyright 2024-2025 Simply.IN Sp. z o.o.
 * @license   https://joinup.ec.europa.eu/software/page/eupl
 *}
<div id="simplyin-payment" data-provider-image="{$provider_logo_url|escape:'htmlall':'UTF-8'}">
    <ul class="simplyin-group-main">
        {assign var='data_index' value=0}
        {if $cards}
            {foreach $cards as $card}
                <li class="simplyin-payment-option-item simplyin-payment-option-item-saved-card">
                    <label class="simplyin-payment-option-label simplyin-saved-card" for="simplyin-payment-option-{$card->paymentMethodId|escape:'htmlall':'UTF-8'}">
                        <input
                            id="simplyin-payment-option-{$card->paymentMethodId|escape:'htmlall':'UTF-8'}"
                            type="radio"
                            name="simplyin-payment-option"
                            value="{$card->paymentMethodId|escape:'htmlall':'UTF-8'}"
                            data-provider-image="{$card->paymentProvider->logoUrl|escape:'htmlall':'UTF-8'}"
                            data-logo="{$card->logoThumbnailUrl|escape:'htmlall':'UTF-8'}"
                            data-index="{$data_index|escape:'htmlall':'UTF-8'}"
                            data-last-digits="{$card->card->lastDigitsOfCardNumber|escape:'htmlall':'UTF-8'}"
                            data-card-name="{$card->name|escape:'htmlall':'UTF-8'}"
                            data-card-provider="{$card->card->provider|escape:'htmlall':'UTF-8'}"
                            data-payment-type="card"
                            data-payment-provider="{$card->paymentProvider->id|escape:'htmlall':'UTF-8'}"
                            data-payment-provider-name="{$card->paymentProvider->name|escape:'htmlall':'UTF-8'}"
                            data-regulationsurl="{$card->paymentProvider->regulationsUrl|escape:'htmlall':'UTF-8'}"
                            data-gdprurl="{$card->paymentProvider->gdprUrl|escape:'htmlall':'UTF-8'}"
                            >
                        <img src="{$card->logoThumbnailUrl|escape:'htmlall':'UTF-8'}" class="simplyin-payment-option-logo">
                        <span class="simplyin-payment-option-name">{$card->name|escape:'htmlall':'UTF-8'} (**{$card->card->lastDigitsOfCardNumber|escape:'htmlall':'UTF-8'})
                        </span>
                    </label>
                    <span class="simplyin-payment-option-desc"></span>
                </li>
                {assign var='data_index' value=$data_index+1}
            {/foreach}
        {/if}
        {if $add_card}
        <li id="simplyin-add-card-payment-method" class="simplyin-payment-option-item ">
            <label class="simplyin-payment-option-label simplyin-add-card-label" for="simplyin-payment-option-{$add_card->paymentMethodId|escape:'htmlall':'UTF-8'}">
                <input
                    id="simplyin-payment-option-{$add_card->paymentMethodId|escape:'htmlall':'UTF-8'}"
                    type="radio"
                    class=" simplyin-hidden-radio"
                    name="simplyin-payment-option"
                    value="{$add_card->paymentMethodId|escape:'htmlall':'UTF-8'}"
                    data-provider-image="{$add_card->paymentProvider->logoUrl|escape:'htmlall':'UTF-8'}"
                    data-index="{$data_index}"
                    data-integrator-id="{$add_card->addCard->integratorId|escape:'htmlall':'UTF-8'}"
                    data-iframe-url="{$add_card->addCard->iframeUrl|escape:'htmlall':'UTF-8'}"
                    data-item-id="{$add_card->paymentMethodId|escape:'htmlall':'UTF-8'}"
                    data-payment-type="add-card"
                    data-payment-provider="{$add_card->paymentProvider->id|escape:'htmlall':'UTF-8'}"
                    data-payment-provider-name="{$add_card->paymentProvider->name|escape:'htmlall':'UTF-8'}"
                    data-regulationsurl="{$add_card->paymentProvider->regulationsUrl|escape:'htmlall':'UTF-8'}"
                    data-gdprurl="{$add_card->paymentProvider->gdprUrl|escape:'htmlall':'UTF-8'}"
                >
                <span class="simplyin-plus-icon">
                    <svg width="18" height="18" viewBox="0 0 18 18" fill="none">
                        <path d="M9 4.5V13.5" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
                        <path d="M4.5 9H13.5" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
                    </svg>
                </span>
                <span class="simplyin-payment-option-name">{$add_card->name|escape:'htmlall':'UTF-8'}</span>
            </label>
            <div class="simplyin-add-card-iframe-container">
                <div id="card-form-wrapper">
                    <div class="form-group" style="display: none;">
                        <label for="card-holder">{l s='Firstname and lastname' mod='simplyin'}</label>
                        <div id="card-holder" class="card-field"></div>
                    </div>
                    <div class="form-group simplyin-card-name">
                        <label for="card-name">{l s='Card name' mod='simplyin'}</label>
                        <input type="text" id="card-name" name="card-name" class="form-control" placeholder="{l s='Card name' mod='simplyin'}">
                    </div>
                    <div class="form-group">
                        <label for="card-number">{l s='Card number' mod='simplyin'}</label>
                        <div id="card-number" class="card-field"></div>
                    </div>
                    <div class="form-row-simplyin">
                        <div class="form-group">
                            <label for="expiry-date">{l s='Expiry date' mod='simplyin'}</label>
                            <div id="expiry-date" class="card-field"></div>
                        </div>
                        <div class="form-group">
                            <label for="verification-code">{l s='Code CVV/CVC' mod='simplyin'}</label>
                            <div id="verification-code" class="card-field"></div>
                        </div>
                    </div>
                    {if $show_save_card}
                    <div class="form-group">
                      <div class="float-xs-left">
                          <span class="custom-checkbox">
                            <input
                                id = "simplyin-save-card"
                                name = "simplyin-save-card"
                                type  = "checkbox"
                                value = "1"
                                class = "ps-shown-by-js"
                            >
                            <span><i class="material-icons rtl-no-flip checkbox-checked">&#xE5CA;</i></span>
                          </span>
                        </div>
                        <div class="condition-label">
                          <label class="js-terms" for="simplyin-save-card">
                            {l s='Save card' mod='simplyin'}
                          </label>
                        </div>
                    </div>
                    {/if}


                    <div id="card-success-message-1" class="simplyin-card-success" style="display:none;">
                        ✓ {l s='Card data is correct' mod='simplyin'}
                    </div>
                    <div id="form-error-1" class="field-error" style="display:none;"></div>
                    <input type="hidden" name="simplyin_organization">
                    <input type="hidden" name="simplyin_last_digits">
                    <input type="hidden" name="simplyin_first_digits">
                    <input type="hidden" name="simplyin_ott">
                </div>
            </div>
        </li>
        {assign var='data_index' value=$data_index+1}
        {/if}
        {if $blik}
        <li class="simplyin-payment-option-item" style="transition: 0.2s;">
            <label class="simplyin-payment-option-label" for="simplyin-payment-option-{$blik->paymentMethodId|escape:'htmlall':'UTF-8'}">
                <input
                    id="simplyin-payment-option-{$blik->paymentMethodId|escape:'htmlall':'UTF-8'}"
                    type="radio"
                    name="simplyin-payment-option"
                    value="{$blik->paymentMethodId|escape:'htmlall':'UTF-8'}"
                    data-provider-image="{$blik->paymentProvider->logoUrl|escape:'htmlall':'UTF-8'}"
                    data-logo="{$blik->logoThumbnailUrl|escape:'htmlall':'UTF-8'}"
                    data-index="{$data_index|escape:'htmlall':'UTF-8'}"
                    data-payment-type="blik"
                    data-payment-provider="{$blik->paymentProvider->id|escape:'htmlall':'UTF-8'}"
                    data-payment-provider-name="{$blik->paymentProvider->name|escape:'htmlall':'UTF-8'}"
                    data-regulationsurl="{$blik->paymentProvider->regulationsUrl|escape:'htmlall':'UTF-8'}"
                    data-gdprurl="{$blik->paymentProvider->gdprUrl|escape:'htmlall':'UTF-8'}"
                >
                <input type="hidden" name="simplyin-blik-code" value="">
                <img src="{$blik->logoThumbnailUrl|escape:'htmlall':'UTF-8'}" class="simplyin-payment-option-logo">
                <span class="simplyin-payment-option-name">{$blik->name|escape:'htmlall':'UTF-8'}</span>
            </label>
            <div class="simplyin-blik-container">
                <span class="simplyin-payment-option-desc"></span>
                <div class="simplyin-blik-field-container active" data-payment-id="{$blik->paymentMethodId|escape:'htmlall':'UTF-8'}">
                    <div class="simplyin-blik-input-wrapper">
                        <div class="simplyin-blik-inputs-grid">
                            <input type="tel" class="simplyin-blik-digit-input" maxlength="1" autocomplete="off" inputmode="numeric" pattern="[0-9]" data-digit="1" data-payment-id="{$blik->paymentMethodId|escape:'htmlall':'UTF-8'}" aria-label="Cyfra 1 kodu BLIK" data-blik-initialized="true">
                            <input type="tel" class="simplyin-blik-digit-input" maxlength="1" autocomplete="off" inputmode="numeric" pattern="[0-9]" data-digit="2" data-payment-id="{$blik->paymentMethodId|escape:'htmlall':'UTF-8'}" aria-label="Cyfra 2 kodu BLIK" data-blik-initialized="true">
                            <input type="tel" class="simplyin-blik-digit-input" maxlength="1" autocomplete="off" inputmode="numeric" pattern="[0-9]" data-digit="3" data-payment-id="{$blik->paymentMethodId|escape:'htmlall':'UTF-8'}" aria-label="Cyfra 3 kodu BLIK" data-blik-initialized="true">
                            <input type="tel" class="simplyin-blik-digit-input" maxlength="1" autocomplete="off" inputmode="numeric" pattern="[0-9]" data-digit="4" data-payment-id="{$blik->paymentMethodId|escape:'htmlall':'UTF-8'}" aria-label="Cyfra 4 kodu BLIK" data-blik-initialized="true">
                            <input type="tel" class="simplyin-blik-digit-input" maxlength="1" autocomplete="off" inputmode="numeric" pattern="[0-9]" data-digit="5" data-payment-id="{$blik->paymentMethodId|escape:'htmlall':'UTF-8'}" aria-label="Cyfra 5 kodu BLIK" data-blik-initialized="true">
                            <input type="tel" class="simplyin-blik-digit-input" maxlength="1" autocomplete="off" inputmode="numeric" pattern="[0-9]" data-digit="6" data-payment-id="{$blik->paymentMethodId|escape:'htmlall':'UTF-8'}" aria-label="Cyfra 6 kodu BLIK" data-blik-initialized="true">
                        </div>
                        <div class="simplyin-blik-error"  id="blik-form-error-1" style="display: none;">
                            {l s='Blik code must be 6 digits' mod='simplyin'}
                        </div>
                        <div id="blik-success-message-1" class="simplyin-card-success" style="display:none;">
                            ✓ {l s='BLIK code is correct' mod='simplyin'}
                        </div>
                    </div>
                </div>
            </div>
        </li>
        {assign var='data_index' value=$data_index+1}
        {/if}
    </ul>
    <div class="simplyin-payment-provider-footer">

    </div>
    <div id="simplyin-payment-error" class="alert alert-info" style="display: none;"></div>
</div>