<div id="loading_overlay" class="quickview-loading-overlay"></div>

<script>
    function includeQuickviewAction($) {
        var	$_quickviewBaseUrl = 'aquickview/index/index';
        var	$_baseUrl = '<?= str_replace("index.php/","",$this->getUrl()) ?>';
        var $_quickviewUrl = $_baseUrl + $_quickviewBaseUrl;

        var	$_prdItem = $('.products.list.items.product-items .product-item');
        var	$_prdItemAction = $('.products.list.items.product-items .product-item .actions-secondary');
        var $_listItem = [];

        if ($_prdItem.length > 0 && $_prdItemAction.length > 0) {
            $_prdItem.each(function() {
                var $el = $(this);
                var	$_prdItemId = $el.find('input[name="product"]').val();

                if (typeof $_prdItemId === "undefined") {
                    $_prdItemId = $el.find('[data-role="priceBox"]').attr('data-product-id');
                }
                if ($el.find("a.action.quickview").length <= 0) {
                    if($el.find('a.product-item-photo').length > 0 ) {
                        var $_prdLink = $el.find('a.product-item-photo');

                        if (typeof $_prdLink.attr('href') !== 'undefined' && $_prdLink.attr('href').replace($_baseUrl, "") != '#') {
                            var	$_prdPathLink = $_prdLink.attr('href').replace($_baseUrl, "");

                            $_prdPathLink = $_prdPathLink.indexOf('index.php') >= 0 ? $_prdPathLink.replace('index.php/', '') : $_prdPathLink;

                            var	$quickviewAction = $_quickviewUrl + ("/catalog/product/id/") + $_prdItemId;
                            var	$_buttonHtml = '<li><a data-productid="'+$_prdItemId+'" class="action quickview" aria-label="<?= __('Quickview') ?>" title="<?= __('Quickview') ?>" href="'+$quickviewAction+'"><span><?= __('Quickview') ?></span></a></li>';

                            $_listItem.push($_buttonHtml);
                        }
                    }
                }
            });

            let count = 0;

            $_prdItemAction.each(function() {
                if (typeof $_listItem[count] != 'undefined' && $(this).find("a.action.quickview").length <= 0) {
                    $(this).append($_listItem[count]);
                    count ++;
                }
            });
        }
    }
</script>

<script>
    requirejs(['jquery', 'domReady!', 'aQuickView'], function($) {
        $('#loading_overlay').removeClass('loading');

       if (typeof includeQuickviewAction !== 'undefined') {
            includeQuickviewAction($);
        };

        $(document).off( 'click', '.action.quickview' ).on('click', '.action.quickview', function(e) {
            e.preventDefault();

            if ($('body.catalog-product-view').length > 0) {
                $('body').addClass('origin-catalog-product-view');
            } else {
                $('body').addClass('catalog-product-view');
            }

            $('#loading_overlay').addClass('loading');

            const widgetQv = $(this).aQuickView();
            const url = $(this).attr('href');
            const id = $(this).attr('data-productid');

            // check  widgetQv.aQuickView is not undefined
            if (typeof widgetQv.aQuickView !== 'undefined') {
                widgetQv.aQuickView('productQuickView', url, id);
            }
        } );
    });
</script>
