{% extends request.ajax ? 'layout_blank.html.twig' : 'layout_default.html.twig' %}

{% import 'macro_functions.html.twig' as mf %}

{% block meta_title %}{{ 'Subscriptions'|trans }}{% endblock %}

{% set active_menu = 'invoice' %}

{% block content %}
    <ul class="nav nav-tabs" role="tablist">
        <li class="nav-item" role="presentation">
            <a class="nav-link active" href="#tab-index" data-bs-toggle="tab">{{ 'Subscriptions'|trans }}</a>
        </li>
        <li class="nav-item" role="presentation">
            <a class="nav-link" href="#tab-new" data-bs-toggle="tab">
                <svg class="icon">
                    <use xlink:href="#plus" />
                </svg>
                <span class="ms-2">{{ 'New Subscription'|trans }}</span>
            </a>
        </li>
    </ul>

<div class="card">
    <div class="tab-content">
        <div class="tab-pane fade show active" id="tab-index" role="tabpanel">
            {{ include('partial_search.html.twig') }}
            <table class="table card-table table-vcenter table-striped text-nowrap">
                <thead>
                    <tr>
                        <th class="w-1">
                            <input class="form-check-input m-0 align-middle batch-delete-master-checkbox" type="checkbox">
                        </th>
                        <th class="w-1"></th>
                        <th>{{ 'Name'|trans }}</th>
                        <th class="w-1">{{ 'ID'|trans }}</th>
                        <th>{{ 'Amount'|trans }}</th>
                        <th>{{ 'Gateway'|trans }}</th>
                        <th>{{ 'Status'|trans }}</th>
                        <th class="w-1"></th>
                    </tr>
                </thead>
                <tbody>
                    {% set subscriptions = admin.invoice_subscription_get_list({ 'per_page': 30, 'page': request.page }|merge(request)) %}
                    {% for i, subscription in subscriptions.list %}
                    <tr>
                        <td>
                            <input class="form-check-input m-0 align-middle batch-delete-checkbox" type="checkbox" data-item-id="{{ subscription.id }}">
                        </td>
                        <td>
                            <a href="{{ 'client/manage'|alink }}/{{ subscription.client.id }}">
                                <span class="avatar avatar-xs" style="background-image: url({{ subscription.client.email|gravatar }}&size=24"></span>
                            </a>
                        </td>
                        <td>
                            <a href="{{ 'client/manage'|alink }}/{{ subscription.client.id }}">{{ subscription.client.first_name }} {{ subscription.client.last_name }}</a>
                        </td>
                        <td>{{ subscription.sid }}</td>
                        <td>{{ mf.currency_format( subscription.amount, subscription.currency) }} {{ mf.period_name(subscription.period) }}</td>
                        <td>{{ subscription.gateway.title }}</td>
                        <td>
                            {% if subscription.status == 'active' %}
                                <span class="badge bg-success me-1"></span>
                            {% endif %}
                            {% if subscription.status == 'canceled' %}
                                <span class="badge bg-secondary me-1"></span>
                            {% endif %}
                            {{ mf.status_name(subscription.status) }}
                        </td>
                        <td>
                            <a class="btn btn-icon" href="{{ 'invoice/subscription'|alink }}/{{ subscription.id }}">
                                <svg class="icon">
                                    <use xlink:href="#edit" />
                                </svg>
                            </a>
                            <a class="btn btn-icon api-link" href="{{ 'api/admin/invoice/subscription_delete'|link({ 'id': subscription.id, 'CSRFToken': CSRFToken }) }}" data-api-confirm="{{ 'Are you sure?'|trans }}" data-api-reload="1">
                                <svg class="icon">
                                    <use xlink:href="#delete" />
                                </svg>
                            </a>
                        </td>
                    </tr>
                    {% else %}
                    <tr>
                        <td class="text-muted" colspan="6">{{ 'The list is empty'|trans }}</td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>

            <div class="card-footer d-flex align-items-center justify-content-between">
                {{ include('partial_batch_delete.html.twig', { 'action': 'admin/invoice/batch_delete_subscription' }) }}
                {{ include('partial_pagination.html.twig', { 'list': subscriptions, 'url': 'invoice/subscriptions' }) }}
            </div>
        </div>

        <div class="tab-pane fade" id="tab-new" role="tabpanel">
            <div class="card-body">
                <form method="post" action="{{ 'api/admin/invoice/subscription_create'|link }}" class="save api-form" data-api-reload="1">
                    <input type="hidden" name="CSRFToken" value="{{ CSRFToken }}"/>
                    <div class="mb-3 row">
                        <label class="form-label col-3 col-form-label" for="client_id">{{ 'Client'|trans }}</label>
                        <div class="col">
                            {% if not request.client_id %}
                                <select class="form-control autocomplete-selector"
                                        placeholder="{{ 'Start typing the client name or ID'|trans }}"
                                        id="client_id"
                                        name="client_id"
                                        data-resturl="admin/client/get_pairs"
                                        data-csrf="{{ CSRFToken }}">
                                </select>
                            {% else %}
                                {% set client = admin.client_get({ 'id': request.client_id }) %}
                                <input type="text" id="client_id" class="form-control" disabled value="{{ client.first_name }} {{ client.last_name }}" />
                                <input type="hidden" name="client_id" value="{{ request.client_id }}" />
                            {% endif %}
                        </div>
                    </div>
                    <div class="mb-3 row">
                        <label class="form-label col-3 col-form-label">{{ 'Payment Gateway'|trans }}:</label>
                        <div class="col">
                            {{ mf.selectbox('gateway_id', admin.invoice_gateway_get_pairs, request.gateway_id, 0, 'Select payment gateway'|trans) }}
                        </div>
                    </div>
                    <div class="mb-3 row">
                        <label class="form-label col-3 col-form-label">{{ 'Subscription ID on payment gateway'|trans }}:</label>
                        <div class="col">
                            <input class="form-control" type="text" name="sid" value="{{ request.sid }}" required>
                        </div>
                    </div>
                    <div class="mb-3 row">
                        <label class="form-label col-3 col-form-label">{{ 'Status'|trans }}:</label>
                        <div class="col">
                            <div class="form-check form-check-inline">
                                <input class="form-check-input" id="radioStatusActive" type="radio" name="status" value="active" checked>
                                <label class="form-check-label" for="radioStatusActive">{{ 'Active'|trans }}</label>
                            </div>
                            <div class="form-check form-check-inline">
                                <input class="form-check-input" id="radioStatusCanceled" type="radio" name="status" value="canceled">
                                <label class="form-check-label" for="radioStatusCanceled">{{ 'Canceled'|trans }}</label>
                            </div>
                        </div>
                    </div>
                    <div class="mb-3 row">
                        <label class="form-label col-3 col-form-label">{{ 'Period'|trans }}:</label>
                        <div class="col">
                            {{ mf.selectbox('period', guest.system_periods, request.period, 1, 'Select period'|trans) }}
                        </div>
                    </div>
                    <div class="mb-3 row">
                        <label class="form-label col-3 col-form-label">{{ 'Amount'|trans }}:</label>
                        <div class="col">
                            <input class="form-control" type="text" name="amount" value="{{ request.amount }}" required>
                        </div>
                    </div>
                    <div class="mb-3 row">
                        <label class="form-label col-3 col-form-label">{{ 'Currency'|trans }}</label>
                        <div class="col">
                            {{ mf.selectbox('currency', guest.currency_get_pairs, request.currency, 1, 'Select currency'|trans) }}
                        </div>
                    </div>

                    <input type="submit" value="{{ 'Create'|trans }}" class="btn btn-primary w-100">
                </form>
            </div>
        </div>
    </div>
</div>
{% endblock %}
