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

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

{% set active_menu = 'invoice' %}

{% block meta_title %}{{ 'Subscription'|trans }} {{ subscription.sid }}{% endblock %}

{% block breadcrumbs %}
    <ol class="breadcrumb">
        <li class="breadcrumb-item">
            <a href="{{ '/'|alink }}">
                <svg class="icon">
                    <use xlink:href="#home" />
                </svg>
            </a>
        </li>
        <li class="breadcrumb-item">
            <a href="{{ 'invoice/subscriptions'|alink }}">{{ 'Subscriptions'|trans }}</a>
        </li>
        <li class="breadcrumb-item active" aria-current="page">{{ 'Subscription'|trans }} #{{ subscription.id }}</li>
    </ol>
{% endblock %}

{% 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" role="tab">{{ 'Subscription'|trans }}</a>
        </li>
        <li class="nav-item" role="presentation">
            <a class="nav-link" href="#tab-manage" data-bs-toggle="tab" role="tab">{{ 'Manage'|trans }}</a>
        </li>
    </ul>

    <div class="card">
        <div class="tab-content">
            <div class="tab-pane fade show active" id="tab-index" role="tabpanel">
                <div class="card-body overflow-auto">
                    <h3>{{ 'Subscription details'|trans }}</h3>

                    <table class="table card-table table-vcenter table-striped text-nowrap">
                        <tbody>
                            <tr>
                                <td class="text-end">{{ 'Client'|trans }}:</td>
                                <td>
                                    <a href="{{ 'client/manage'|alink }}/{{ subscription.client.id }}">{{ subscription.client.first_name }} {{ subscription.client.last_name }}</a>
                                </td>
                            </tr>
                            <tr>
                                <td class="text-end">{{ 'Amount'|trans }}:</td>
                                <td>{{ mf.currency_format( subscription.amount, subscription.currency) }} {{ mf.period_name(subscription.period) }}</td>
                            </tr>
                            <tr>
                                <td class="text-end">{{ 'Payment gateway'|trans }}:</td>
                                <td>{{ subscription.gateway.title }}</td>
                            </tr>
                            <tr>
                                <td class="text-end d-none d-sm-table-cell">{{ 'Subscription ID on payment gateway'|trans }}:</td>
                                <td class="text-end d-sm-none">{{ 'Subscription ID on PG'|trans }}:</td>
                                <td>{{ subscription.sid|default('-') }}</td>
                            </tr>
                            <tr>
                                <td class="text-end">{{ 'Status'|trans }}:</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>
                            </tr>
                            <tr>
                                <td class="text-end">{{ 'Created at'|trans }}:</td>
                                <td>{{ subscription.created_at|format_date }}</td>
                            </tr>
                            {% if subscription.created_at != subscription.updated_at %}
                            <tr>
                                <td class="text-end">{{ 'Updated at'|trans }}:</td>
                                <td>{{ subscription.updated_at|format_date }}</td>
                            </tr>
                            {% endif %}
                        </tbody>
                    </table>
                </div>

                <div class="body footer text-center">
                    <a class="btn btn-primary api-link"
                        href="{{ 'api/admin/invoice/subscription_delete'|link({ 'id': subscription.id, 'CSRFToken': CSRFToken }) }}"
                        data-api-confirm="{{ 'Are you sure?'|trans }}"
                        data-api-redirect="{{ 'invoice/subscriptions'|alink }}">
                        <svg class="icon icon-tabler" width="24" height="24">
                            <use xlink:href="#delete" />
                        </svg>
                        <span>{{ 'Delete'|trans }}</span>
                    </a>
                </div>
            </div>

            <div class="tab-pane fade" id="tab-manage" role="tabpanel">
                <div class="card-body">
                    <form method="post" action="{{ 'api/admin/invoice/subscription_update'|link }}" class="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">{{ 'Payment Gateway'|trans }}:</label>
                            <div class="col">
                                {{ mf.selectbox('gateway_id', admin.invoice_gateway_get_pairs, subscription.gateway.id, 0, 'Select payment gateway') }}
                            </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="{{subscription.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"{% if subscription.status == 'active' %} checked{% endif %}>
                                    <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"{% if subscription.status == 'canceled' %} checked{% endif %}>
                                    <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, subscription.period, 1, 'Select period') }}
                            </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="{{ subscription.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, subscription.currency, 1, 'Select currency') }}
                            </div>
                        </div>

                        <input type="hidden" name="id" value="{{ subscription.id }}">
                        <button class="btn btn-primary w-100" type="submit">{{ 'Update'|trans }}</button>
                    </form>
                </div>
            </div>
        </div>
    </div>
{% endblock %}
