{% extends "admin/partial/layout_logged_in.html.twig" %}

{% block title %}{{ ta('manage_payment_subscriptions', 'Manage Payment Subscriptions') }}{% endblock %}
{% block selected_page %}users{% endblock %}
{% block selected_sub_page %}payment_subscription_manage{% endblock %}

{% block body %}
    <script>
        oTable = null;
        gPaymentId = null;
        $(document).ready(function () {
            // datatable
            oTable = $('#paymentsTable').dataTable($.extend(dataTableOpts, {
                "sAjaxSource": 'ajax/payment_subscription_manage',
                "aaSorting": [[1, "desc"]],
                "aoColumns": [
                    {bSortable: false, sWidth: '3%', sName: 'file_icon', sClass: "center adminResponsiveHide"},
                    {sName: 'payment_date', sWidth: '15%', sClass: "center"},
                    {sName: 'user_name', sWidth: '18%', sClass: "center adminResponsiveHide"},
                    {sName: 'period', bSortable: false, sClass: "center adminResponsiveHide"},
                    {sName: 'amount', bSortable: false, sWidth: '12%', sClass: "center"},
                    {sName: 'gateway', sWidth: '12%', sClass: "center"},
                    {bSortable: false, sWidth: '10%', sClass: "center adminResponsiveHide"}
                ],
                "fnServerData": function (sSource, aoData, fnCallback) {
                    aoData.push({"name": "filterText", "value": $('#filterText').val()});
                    $.ajax({
                        "dataType": 'json',
                        "type": "GET",
                        "url": sSource,
                        "data": aoData,
                        "success": fnCallback
                    });
                },
                'oLanguage': $.extend(dataTableOpts.oLanguage, {
                    'sEmptyTable': {{ ta('there_are_no_subscriptions_in_the_current_filters', 'There are no subscriptions in the current filters.')|json_encode()|raw }}
                })
            }));

            // update custom filter
            $('.dataTables_filter').html($('#customFilter').html());
        });

        function reloadTable()
        {
            oTable.fnDraw(false);
        }
    </script>

    <!-- page content -->
    <div class="right_col" role="main">
        <div class="">
            <div class="page-title">
                <div class="title_left">
                    <h3>{{ block('title') }}</h3>
                </div>
            </div>
            <div class="clearfix"></div>

            {{ msg_page_notifications|raw }}

            <div class="row">
                <div class="col-md-12 col-sm-12 col-xs-12">
                    <div class="x_panel">
                        <div class="x_title">
                            <h2>{{ ta('list_of_subscribers', 'List Of Subscribers') }}</h2>
                            <div class="clearfix"></div>
                        </div>
                        <div class="x_content">
                            <p>
                                {{ ta('note_not_all_payment_gateways_will_support_subscriptions', 'Note: Not all payment gateways will support subscriptions. Please check the payment gateway plugin settings page for the option to enable or disable subscriptions. If it is not available, the gateway plugin does not yet have built in support for it.') }}
                            </p>
                            <table id="paymentsTable" class="table table-striped table-only-border dtLoading bulk_action">
                                <thead>
                                    <tr>
                                        <th></th>
                                        <th class="align-left">{{ ta("date_added", "Date Added") }}</th>
                                        <th class="align-left">{{ ta("username", "Username") }}</th>
                                        <th class="align-left">{{ ta("period", "Period") }}</th>
                                        <th class="align-left">{{ ta("amount", "Amount") }}</th>
                                        <th class="align-left">{{ ta("gateway", "Gateway") }}</th>
                                        <th class="align-left">{{ ta("status", "Status") }}</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr>
                                        <td colspan="20">{{ ta('admin_loading_data', 'Loading data...') }}</td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>

                </div>
            </div>
        </div>
    </div>

    <div class="customFilter" id="customFilter" style="display: none;">
        <label>
            {{ ta('filter_results', 'Filter Results') }}:
            <input name="filterText" id="filterText" type="text" onKeyUp="reloadTable(); return false;" style="width: 160px;"/>
        </label>
    </div>
{% endblock %}