{% extends "_layouts/cp" %}

{% set selectedSubnavItem = "subscriptions" %}
{% set bodyClass = (bodyClass is defined ? bodyClass~' ' : '') ~ "commercesubscriptions commercesubscriptionsedit" %}

{% set title = subscription %}

{% set crumbs = [
    { label: "Subscriptions"|t('commerce'), url: url('commerce/subscriptions') }
] %}

{% import "_includes/forms" as forms %}

{% block header %}
    {{ block('pageTitle') }}
    <div class="flex-grow"></div>

    {% block actionButton %}
    <div class="btngroup">
            <input type="button" id="saveCustomFieldsSubmit" class="btn submit" value="{{ 'Update Subscription'|t('app') }}">
    </div>
    {% endblock %}

{% endblock %}



{% block content %}
    <div id="subscriptionManageTab">
        <div class="pane">

            <h2>{{ 'Manage subscription'|t('commerce') }}</h2>

            {% if subscription.gateway.supportsPlanSwitch and not subscription.isCanceled and not subscription.isExpired %}
                {% set plans = subscription.alternativePlans %}
                {% set planOptions = [{label: 'Pick a plan'|t('commerce'), value: ''}] %}

                {% for plan in plans %}
                    {% set planOptions = planOptions|merge([{label: plan.name, value:plan.id}]) %}
                {% endfor %}

                {{ forms.selectField({
                    label: 'Switch plan'|t('commerce'),
                    options: planOptions,
                    id: 'switchPlans'
                }) }}

                {% for plan in plans %}
                    <div id="switch-{{ plan.id }}" class="hidden switchPlansForm">
                        <form method="POST">
                            <input type="hidden" name="action" value="commerce/subscriptions/switch">
                            <input type="hidden" name="planUid" value="{{ plan.uid|hash }}">
                            <input type="hidden" name="subscriptionUid" value="{{ subscription.uid|hash }}">
                            {{ redirectInput(continueEditingUrl) }}
                            {{ csrfInput() }}

                            {{ plan.gateway.getSwitchPlansFormHtml(subscription.plan, plan)|raw }}

                            <div class="field">
                                <div class="btngrp"><input type="submit" class="btn submit" value="{{ 'Switch'|t('commerce') }}"></div>
                            </div>
                        </form>
                    </div>
                {% endfor %}
            {% else %}
                <div>{{ 'Cannot switch plans for this subscription.'|t('commerce') }}</div>
            {% endif %}

            {% if subscription.canReactivate() %}
                <form method="POST">
                    <input type="hidden" name="action" value="commerce/subscriptions/reactivate">
                    <input type="hidden" name="subscriptionUid" value="{{ subscription.uid|hash }}">
                    {{ redirectInput(continueEditingUrl) }}
                    {{ csrfInput() }}

                    <button type="submit" class="button link">{{ "Reactivate"|t }}</button>
                </form>
            {% endif %}

        </div>

        {% if not subscription.isCanceled and not subscription.isExpired %}
            <div class="pane">
                <h2>{{ 'Cancel subscription'|t('commerce') }}</h2>

                <form method="POST">
                    <input type="hidden" name="action" value="commerce/subscriptions/cancel">
                    <input type="hidden" name="subscriptionUid" value="{{ subscription.uid|hash }}" />
                    {{ redirectInput(continueEditingUrl) }}
                    {{ csrfInput() }}

                    {{ subscription.plan.getGateway().getCancelSubscriptionFormHtml(subscription)|raw }}

                    <div class="field">
                        <div class="btngrp"><input type="submit" class="btn submit" value="{{ 'Unsubscribe'|t('commerce') }}"></div>
                    </div>

                </form>
            </div>
        {% endif %}

        <div class="pane">
            <h2>Payment history</h2>
            {% set payments = subscription.getAllPayments() %}

            <table id="" class="data fullwidth collapsible">
                <thead>
                <tr>
                    <th scope="col">{{ 'Invoice date'|t('commerce') }}</th>
                    <th scope="col">{{ 'Invoice amount'|t('commerce') }}</th>
                    <th scope="col">{{ 'Status'|t('commerce') }}</th>
                    <th scope="col">{{ 'Info'|t('commerce') }}s</th>
                </tr>
                </thead>
                <tbody>
                {% for payment in payments %}
                    {% set info = [
                        { label: "Reference", type: 'code', value: payment.paymentReference },
                        { label: "Gateway response", type: 'response', value: payment.response|raw },
                    ] %}
                    <tr class="infoRow" data-info="{{ info|json_encode }}">
                        <td>{{ payment.paymentDate|datetime }}</td>
                        <td>{{ payment.paymentCurrency }} {{ payment.paymentAmount }}</td>
                        <td class="payment-status-{{ payment.paid ? 'paid' : 'unpaid' }}">
                            {{ payment.paid ? 'Paid'|t('commerce') : 'Unpaid'|t('commerce') }}
                        </td>
                        <td><span class="tableRowInfo" data-icon="info" href="#"></span></td>
                    </tr>
                {% endfor %}

                </tbody>
            </table>

            {% if not subscription.isCanceled and not subscription.isExpired %}
                <form method="POST">
                    <input type="hidden" name="action" value="commerce/subscriptions/refresh-payments">
                    <input type="hidden" name="subscriptionId" value="{{ subscription.id }}" />
                    {{ redirectInput(continueEditingUrl) }}
                    {{ csrfInput() }}

                    <div class="field">
                        <div class="btngrp"><input type="submit" class="btn submit" value="{{ 'Refresh payment history'|t('commerce') }}"></div>
                    </div>
                </form>
            {% endif %}
        </div>

        {% hook 'cp.commerce.subscriptions.edit.content' %}
    </div>

    <form id="customFields" method="POST">

    <input type="hidden" name="action" value="commerce/subscriptions/save">
    <input type="hidden" name="subscriptionId" value="{{ subscription.id }}">
    {{ redirectInput('commerce/subscriptions') }}
    {{ csrfInput() }}

    {% if fieldLayout is not null and fieldLayout.getTabs()|length %}
    {% for tab in fieldLayout.getTabs() %}
    <div id="tab{{ loop.index }}" class="hidden">
        {% include "_includes/fields" with {
        fields: tab.getFields(),
        element: subscription,
        } only %}
    </div>
    {% endfor %}
    {% endif %}
    </form>

{% endblock %}


{% block details %}

<div id="meta" class="meta read-only">

<div class="data">
    <h5 class="heading">{{ 'User'|t('commerce') }}</h5>
    <p class="value"><a href="{{ subscription.subscriber.cpEditUrl}}">{{subscription.subscriber.fullName ? subscription.subscriber.fullName : subscription.subscriber.friendlyName}}</a></p>
</div>

<div class="data">
    <h5 class="heading">{{ 'Plan'|t('commerce') }}</h5>
    <p class="value">{{ subscription.getPlan().name }}</p>
</div>

<div class="data">
    <h5 class="heading">{{ 'Reference'|t('commerce') }}</h5>
    <p class="value">{{ subscription.reference }}</p>
</div>

<div class="data">
    <h5 class="heading">{{ 'Created'|t('commerce') }}</h5>
    <p class="value">{{ subscription.dateCreated|datetime }}</p>
</div>

<div class="data">
    <h5 class="heading">{{ 'Trial days credited'|t('commerce') }}</h5>
    <p class="value">{{ subscription.trialDays }}</p>
</div>

{% if subscription.trialDays %}
<div class="data">
    <h5 class="heading">{{ 'Trial expiration'|t('commerce') }}</h5>
    <p class="value">{{ subscription.trialExpires|datetime }}</p>
</div>
{% endif %}

<div class="data">
    <h5 class="heading">{{ 'Next payment'|t('commerce') }}</h5>
    <p class="value">{{ subscription.nextPaymentDate|datetime }}</p>
</div>

<div class="data">
    <h5 class="heading">{{ 'Expiry'|t('commerce') }}</h5>
    <p class="value">{{ subscription.nextPaymentDate|datetime }}</p>
</div>

<div class="data">
    <h5 class="heading">{{ 'Expiry'|t('commerce') }}</h5>
    <p class="value">{{ subscription.dateExpired ? subscription.dateExpired|datetime : '' }}</p>
</div>

<div class="data">
    <h5 class="heading">{{ 'Cancellation'|t('commerce') }}</h5>
    <p class="value">{{ subscription.dateCanceled ? subscription.dateCanceled|datetime : '' }}</p>
</div>

<div class="data">
    <h5 class="heading">{{ 'Billing issues'|t('commerce') }}</h5>
    <p class="value">{{ subscription.getBillingIssueDescription() }}</p>
</div>

</div>
{% hook 'cp.commerce.subscriptions.edit.meta' %}
{% endblock %}

{% js %}
    $(document).ready(function () {
        $('#switchPlans').on('change', function (ev) {
            $('.switchPlansForm').addClass('hidden');
            $('#switch-'+ev.currentTarget.value).removeClass('hidden');
        });

        $.each($('.tableRowInfo'), function () {
            new Craft.Commerce.TableRowAdditionalInfoIcon(this);
        });

        $('#saveCustomFieldsSubmit').click(function(){
            $('form#customFields').submit();
        });
    });

{% endjs %}

{% do view.registerAssetBundle("craft\\web\\assets\\prismjs\\PrismJsAsset") %}