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

{% block content %}
    {% embed 'partial_admin_detail_tabs.html.twig' with {
        title: 'Subscription'|trans ~ ' ' ~ subscription.sid,
        subtitle: 'Review recurring billing details and update the stored gateway subscription record.'|trans
    } %}
        {% block detail_tabs %}
                        <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>
        {% endblock %}

        {% block detail_tab_content %}
            {% import 'macro_functions.html.twig' as mf %}
            <div class="tab-pane fade show active" id="tab-index" role="tabpanel">
                <div class="card-body overflow-auto">
                    {% embed 'partial_admin_summary_card.html.twig' with {
                        title: 'Subscription Details'|trans,
                        subtitle: 'Review the stored recurring billing record, gateway reference, and current subscription state.'|trans,
                        centered_actions: true
                    } %}
                        {% import 'macro_functions.html.twig' as mf %}
                        {% block summary_content %}
                            <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/#{subscription.client.id}"|url }}'>{{ subscription.client.first_name }} {{ subscription.client.last_name }}</a>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td class="text-end">{{ 'Amount'|trans }}:</td>
                                        <td>{{ subscription.amount|format_currency(subscription.currency ?? default_currency) }} {{ subscription.period|period_title }}</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>{{ mf.status_badge(subscription.status, 'subscription') }}</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>
                        {% endblock %}

                        {% block summary_actions %}
                            <a class="btn btn-danger" href="{{ 'invoice/subscription_delete'|api_url(query: { 'id': subscription.id }) }}"
                                {{ fb_api_link({modal: {type: 'confirm', title: 'Are you sure?'|trans}, redirect: 'invoice/subscriptions'|url}) }}>
                                <svg class="icon icon-tabler" width="24" height="24">
                                    <use xlink:href="#delete" />
                                </svg>
                                <span>{{ 'Delete'|trans }}</span>
                            </a>
                        {% endblock %}
                    {% endembed %}
                </div>
            </div>

            <div class="tab-pane fade" id="tab-manage" role="tabpanel">
                <div class="card-body">
                    <form method="post" action="{{ 'invoice/subscription_update'|api_url }}" {{ fb_api_form({reload: true}) }}>
                        {% embed 'partial_admin_form_card.html.twig' with {
                            title: 'Subscription Settings'|trans,
                            subtitle: 'Update the stored recurring billing settings and gateway subscription reference.'|trans
                        } %}
                            {% import 'macro_functions.html.twig' as mf %}
                            {% block form_content %}
                                <div class="row g-3">
                                    <div class="col-xl-6">
                                        <label class="form-label">{{ 'Payment Gateway'|trans }}</label>
                                        {{ mf.selectbox('gateway_id', admin.invoice_gateway_get_pairs, subscription.gateway.id, 0, 'Select Payment Gateway'|trans) }}
                                    </div>
                                    <div class="col-xl-6">
                                        <label class="form-label" for="subscription_sid">{{ 'Subscription ID on Payment Gateway'|trans }}</label>
                                        <input class="form-control" id="subscription_sid" type="text" name="sid" value="{{ subscription.sid }}" required>
                                    </div>
                                    <div class="col-xl-6">
                                        <label class="form-label d-block">{{ 'Status'|trans }}</label>
                                        <div class="d-flex flex-wrap gap-3">
                                            <label class="form-check">
                                                <input class="form-check-input" id="radioStatusActive" type="radio" name="status" value="active"{% if subscription.status == 'active' %} checked{% endif %}>
                                                <span class="form-check-label">{{ 'Active'|trans }}</span>
                                            </label>
                                            <label class="form-check">
                                                <input class="form-check-input" id="radioStatusCanceled" type="radio" name="status" value="canceled"{% if subscription.status == 'canceled' %} checked{% endif %}>
                                                <span class="form-check-label">{{ 'Canceled'|trans }}</span>
                                            </label>
                                        </div>
                                    </div>
                                    <div class="col-xl-6">
                                        <label class="form-label">{{ 'Period'|trans }}</label>
                                        {{ mf.selectbox('period', guest.system_periods, subscription.period, 1, 'Select Period'|trans) }}
                                    </div>
                                    <div class="col-xl-6">
                                        <label class="form-label" for="subscription_amount">{{ 'Amount'|trans }}</label>
                                        <input class="form-control" id="subscription_amount" type="text" name="amount" value="{{ subscription.amount }}" required>
                                    </div>
                                    <div class="col-xl-6">
                                        <label class="form-label">{{ 'Currency'|trans }}</label>
                                        {{ mf.selectbox('currency', guest.currency_get_pairs, subscription.currency, 1, 'Select Currency'|trans) }}
                                    </div>
                                </div>
                            {% endblock %}

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