aMember (site.php): Add Filter {Active|Expired|All} for invoices on payment history page

site.php

<?php

// Add Filter {Active|Expired|All} for invoices on payment history page
Am_Di::getInstance()->blocks->add(
    'member/payment-history/top',
    new Am_Block_Base(null, 'inv-filter', null, function(Am_View $v) {

        $user = $v->di->user;

        $ids = $v->di->db->selectCol(<<<CUT
            SELECT public_id, MAX(expire_date) AS exp
                FROM ?_invoice i
                LEFT JOIN ?_access a USING (invoice_id)
                WHERE i.user_id = ?
                GROUP BY i.public_id
                HAVING exp < ?
CUT
        , $user->pk(), sqlDate('now'));

        $selector = implode(', ', array_map(function($_){return "#invoice-{$_}";}, $ids));

        $t_head = Am_Html::escape(___('Your Subscriptions'));
        $t_all = Am_Html::escape(___('All'));
        $t_active = Am_Html::escape(___('Active'));
        $t_expired = Am_Html::escape(___('Expired'));
        $t_expired_empty = Am_Html::escape(___('There are no expired invoices'));
        $t_active_empty = Am_Html::escape(___('There are no active invoices'));

        return <<<CUT
<style type="text/css">
<!--
#am-block-active-subscriptions h1 {
    display: none;
}
.inv-filter {
    font-size: 0.8em;
}

.inv-filter__link {
    padding: .2em;
    text-decoration: underline;
}

a.inv-filter__link_active {
    text-decoration: none;
    font-weight: bold;
    color: black;
}
.am-invoice-expired-empty,
.am-invoice-active-empty {
    display: none;
}
-->
</style>
<h1>{$t_head} &mdash; <span class="inv-filter"> <a href="javascript:;" class="inv-filter__link" data-type="active">{$t_active}</a> &middot; <a href="javascript:;" class="inv-filter__link" data-type="expired">{$t_expired}</a> &middot; <a href="javascript:;" class="inv-filter__link" data-type="all">{$t_all}</a></span></h1>
<div class="am-block-nodata am-invoice-expired-empty am-invoice-empty">
    {$t_expired_empty}
</div>
<div class="am-block-nodata am-invoice-active-empty am-invoice-empty">
    {$t_active_empty}
</div>
<script>
    jQuery(function(){
        var expired_selector = '{$selector}';
        
       jQuery('.inv-filter__link').click(function(){
           jQuery('.inv-filter__link').removeClass('inv-filter__link_active');
           jQuery(this).addClass('inv-filter__link_active');
           
           switch (jQuery(this).data('type')) {
                case 'all' :
                    jQuery('.am-active-invoice').show();
                    jQuery('.am-invoice-empty').hide();
                    jQuery('.am-block-nodata').not('.am-invoice-empty').show();
                    break;
                case 'expired' :
                    jQuery('.am-block-nodata').hide();
                    jQuery(expired_selector).show();
                    jQuery('.am-active-invoice').not(expired_selector).hide();
                    jQuery('.am-invoice-expired-empty').toggle(expired_selector.length == 0);
                    break;
                case 'active':
                    jQuery('.am-block-nodata').hide();
                    jQuery(expired_selector).hide();
                    jQuery('.am-active-invoice').not(expired_selector).show();
                    jQuery('.am-invoice-active-empty').toggle(jQuery('.am-active-invoice').not(expired_selector).length == 0);
                    break;
           }
       });
       jQuery('.inv-filter__link[data-type=expired]').click();
    });
</script>
CUT;
    })
);