<?php
/** @var \Autogedal\PayPo\Block\Product\PayPoBanner $block */
$product = $block->getProduct();
if (!$block->isPayPoActive() || !$product || !$product->isSaleable()) {
    return;
}
?>
<div class="paypo-product-banner">
    <div class="paypo-logo-box">
        <img src="<?= $block->escapeUrl($block->getViewFileUrl('Autogedal_PayPo::images/paypo-logo.svg')) ?>"
             alt="PayPo" width="70" height="20" loading="lazy"/>
    </div>
    <span class="paypo-cta-text">
        <?= $block->escapeHtml(__('Cumpără acum, verifică produsul și plătești la 30 de zile.')) ?>
    </span>
    <button type="button" class="paypo-info-btn" data-paypo-info aria-label="<?= $block->escapeHtml(__('Află mai multe despre PayPo')) ?>">?</button>
</div>

<div id="paypo-modal" class="paypo-modal" aria-hidden="true">
    <div class="paypo-modal-overlay" data-paypo-close></div>
    <div class="paypo-modal-box">
        <button type="button" class="paypo-modal-close" data-paypo-close aria-label="<?= $block->escapeHtml(__('Close')) ?>">&#x2715;</button>
        <iframe src="https://start.paypo.ro/popup/" width="100%" height="480" frameborder="0" loading="lazy"></iframe>
    </div>
</div>

<script>
(function () {
    var modal = document.getElementById('paypo-modal');
    if (!modal) return;

    document.querySelectorAll('[data-paypo-info]').forEach(function (btn) {
        btn.addEventListener('click', function () {
            modal.classList.add('paypo-modal--open');
            modal.setAttribute('aria-hidden', 'false');
        });
    });

    document.querySelectorAll('[data-paypo-close]').forEach(function (el) {
        el.addEventListener('click', function () {
            modal.classList.remove('paypo-modal--open');
            modal.setAttribute('aria-hidden', 'true');
        });
    });

    document.addEventListener('keydown', function (e) {
        if (e.key === 'Escape') {
            modal.classList.remove('paypo-modal--open');
            modal.setAttribute('aria-hidden', 'true');
        }
    });
})();
</script>
