{% extends "/layouts/main.twig" %}

{% set active_menu = 'subscriptions' %}

{% set xdata %}
subscription({{ subscription|json_encode }})
{% endset %}

{% block title p__('title', 'Subscription details')|title %}

{% block template %}
<div class="flex flex-col gap-8">
  <div>
    {% include "snippets/back.twig" with {link: 'admin/subscriptions', label: 'Subscriptions'} %}

    <h1 class="mt-4">
      {{ p__('heading', 'Subscription') }}:

      <span class="font-normal text-intermediate-content">
        <span x-text="subscription.workspace.name"></span>
        <i class="ti ti-direction-horizontal text-content-dimmed"></i>
        <span x-text="subscription.plan.title"></span>
      </span>
    </h1>

    <div class="mt-2">
      <x-uuid x-text="subscription.id"></x-uuid>
    </div>
  </div>

  <div class="flex flex-col gap-2">
    <section class="flex flex-col gap-6 box " data-density="comfortable">
      <div>
        <div class="flex items-center gap-2">
          <h2>{{ p__('heading', 'Subscription') }}</h2>

          <template x-if="subscription.status == 'active'">
            <span
              class="badge badge-success">{{ p__('subscription-status', 'Active') }}</span>
          </template>

          <template x-if="subscription.status == 'trialing'">
            <span
              class="badge badge-info">{{ p__('subscription-status', 'Trialing') }}</span>
          </template>

          <template x-if="subscription.status == 'canceled'">
            <span
              class="badge">{{ p__('subscription-status', 'Canceled') }}</span>
          </template>

          <template x-if="subscription.status == 'ended'">
            <span
              class="badge badge-failure">{{ p__('subscription-status', 'Ended') }}</span>
          </template>
        </div>

        <p class="text-sm text-content-dimmed">
          {{ __('Subscription created on %s', '<x-time :datetime="subscription.created_at"></x-time>')|raw }}
        </p>
      </div>

      <div class="flex flex-col gap-6">
        <div class="flex flex-wrap items-center gap-6">
          <div class="w-40 min-w-min">
            <div class="label">{{ p__('label', 'Plan') }}</div>
            <div>
              <a :href="`admin/plan-snapshots/${subscription.plan.id}`"
                class="inline-flex items-center gap-1 group">
                <span class="group-hover:underline"
                  x-text="subscription.plan.title"></span>
                <i
                  class="text-base ti ti-corner-right-up text-content-dimmed"></i>
              </a>
            </div>
          </div>

          <div class="w-40 min-w-min">
            <div class="label">
              {{ p__('label', 'Monthly credits') }}
            </div>

            <x-credit :data-value="subscription.plan.credit_count"></x-credit>
          </div>

          <div class="w-40 min-w-min">
            <div class="label">
              {{ p__('label', 'Credits left') }}
            </div>

            <x-credit :data-value="subscription.credit_count"></x-credit>
          </div>

          <div class="w-40 min-w-min">
            <template x-if="subscription.plan.billing_cycle == 'monthly'">
              <div class="label">{{ __('Monthly') }}</div>
            </template>

            <template x-if="subscription.plan.billing_cycle == 'yearly'">
              <div class="label">{{ __('Yearly') }}</div>
            </template>

            <template x-if="subscription.plan.billing_cycle == 'lifetime'">
              <div class="label">{{ __('Lifetime') }}</div>
            </template>

            <div class="flex items-center gap-2">
              <x-money
                :data-value="subscription.order ? subscription.plan.price : 0"
                :currency="subscription.order ? subscription.order.currency.code : `{{ currency.code }}`"
                :minor-units="subscription.order ? subscription.order.currency.fraction_digits : `{{ currency.fraction_digits }}`"></x-money>

              <template x-if="!subscription.order">
                <i class="text-lg ti ti-info-square-rounded"
                  x-tooltip.raw="{{ __('Subscription created with no charge') }}"></i>
              </template>
            </div>
          </div>
        </div>

        <template
          x-if="['active', 'trialing'].includes(subscription.status) && subscription.renew_at">
          <p class="text-xs text-content-dimmed">
            {{ __("Usage renews on %s", '<x-time :datetime="subscription.renew_at"></x-time>')|raw }}
          </p>
        </template>

        <template
          x-if="subscription.status == 'canceled' && subscription.cancel_at">
          <p class="text-xs text-content-dimmed">
            {{ __("Subscription will be cancelled on %s", '<x-time :datetime="subscription.cancel_at"></x-time>')|raw }}
          </p>
        </template>

        <template
          x-if="subscription.status == 'ended' && subscription.ended_at">
          <p class="text-xs text-content-dimmed">
            {{ __("Subscription ended on %s", '<x-time :datetime="subscription.ended_at"></x-time>')|raw }}
          </p>
        </template>


        <template
          x-if="['active', 'trialing'].includes(subscription.status) && subscription.renew_at">
          <div>
            <button type="button" class="button button-sm"
              @click="modal.open('cancel-subscription')">
              {{ p__('button', 'Cancel subscription') }}
            </button>
          </div>
        </template>
      </div>
    </section>

    <section class="flex flex-col gap-6 box " data-density="comfortable">
      <h2>{{ p__('heading', 'Customer') }}</h2>

      <div class="flex flex-col gap-1">
        <div
          class="flex items-center gap-3 p-4 rounded-2xl bg-intermediate text-intermediate-content">
          <div class="avatar bg-main text-content">
            <span
              x-text="subscription.workspace.name.match(/(\b\S)?/g).join('').slice(0, 2)"></span>
          </div>

          <div>
            <div class="label">{{ p__('label', 'Workspace') }}</div>
            <div x-text="subscription.workspace.name"></div>
          </div>

          <a :href="`admin/workspaces/${subscription.workspace.id}`"
            class="flex items-center justify-center w-8 h-8 ml-auto rounded-full bg-main outline-1 outline-line hover:outline outline-offset-0">
            <i class="text-base ti ti-chevron-right"></i>
          </a>
        </div>

        <div
          class="flex items-center gap-3 p-4 rounded-2xl bg-intermediate text-intermediate-content">
          <div class="avatar bg-main text-content">
            <span
              x-text="`${subscription.workspace.owner.first_name} ${subscription.workspace.owner.last_name}`.match(/(\b\S)?/g).join('').slice(0, 2)"></span>

            <template x-if="subscription.workspace.owner.avatar">
              <img :src="subscription.workspace.owner.avatar"
                :alt="`${subscription.workspace.owner.first_name} ${subscription.workspace.owner.last_name}`">
            </template>
          </div>

          <div>
            <div class="label"
              x-text="`${subscription.workspace.owner.first_name} ${subscription.workspace.owner.last_name}`">
            </div>
            <div class="text-sm text-content-dimmed">{{ p__('role', 'Owner') }}
            </div>
          </div>

          <a :href="`admin/users/${subscription.workspace.owner.id}`"
            class="flex items-center justify-center w-8 h-8 ml-auto rounded-full bg-main outline-1 outline-line hover:outline outline-offset-0">
            <i class="text-base ti ti-chevron-right"></i>
          </a>
        </div>
      </div>
    </section>

    <template x-if="subscription.order">
      <section class="flex flex-col gap-6 box " data-density="comfortable">
        <div>
          <div class="flex items-center gap-2">
            <h2>{{ p__('heading', 'Order') }}</h2>

            <template x-if="subscription.order.status == 'completed'">
              <span
                class="badge badge-success">{{ p__('order-status', 'Completed') }}</span>
            </template>

            <template x-if="subscription.order.status == 'pending'">
              <span
                class="badge badge-alert">{{ p__('order-status', 'Pending') }}</span>
            </template>

            <template x-if="subscription.order.status == 'failed'">
              <span
                class="badge badge-failure">{{ p__('order-status', 'Failed') }}</span>
            </template>
          </div>

          <p class="text-sm text-content-dimmed">
            {{ __('Subscription is created based on order') }}
          </p>
        </div>

        <div class="flex flex-col gap-6">
          <div class="flex flex-wrap items-center gap-6">
            <div class="w-40 min-w-min">
              <div class="label">{{ p__('label', 'Plan') }}</div>
              <div>
                <a :href="`admin/plan-snapshots/${subscription.order.plan.id}`"
                  class="inline-flex items-center gap-1 group">
                  <span class="group-hover:underline"
                    x-text="subscription.order.plan.title"></span>
                  <i
                    class="text-base ti ti-corner-right-up text-content-dimmed"></i>
                </a>
              </div>
            </div>

            <div class="w-40 min-w-min">
              <div class="label"
                x-text="subscription.order.plan.billing_cycle == 'one-time' ? `Add-on credits` : `{{ p__('label', 'Monthly credits') }}`">
              </div>

              <x-credit
                :data-value="subscription.order.plan.credit_count"></x-credit>
            </div>

            <div class="w-40 min-w-min">
              <template
                x-if="subscription.order.plan.billing_cycle == 'monthly'">
                <div class="label">{{ __('Monthly') }}</div>
              </template>

              <template
                x-if="subscription.order.plan.billing_cycle == 'yearly'">
                <div class="label">{{ __('Yearly') }}</div>
              </template>

              <template
                x-if="subscription.order.plan.billing_cycle == 'lifetime'">
                <div class="label">{{ __('Lifetime') }}</div>
              </template>

              <template
                x-if="subscription.order.plan.billing_cycle == 'one-time'">
                <div class="label">{{ __('Add-on credits') }}</div>
              </template>

              <div class="flex items-center gap-2">
                <x-money :data-value="subscription.order.total"
                  :currency="subscription.order.currency.code"
                  :minor-units="subscription.order.currency.fraction_digits"></x-money>
              </div>
            </div>

            <div class="w-40 min-w-min">
              <div class="label">{{ p__('label', 'Date') }}</div>
              <div>
                <x-time :datetime="subscription.order.created_at"></x-time>
              </div>
            </div>
          </div>

          <template
            x-if="subscription.order.payment_id || subscription.order.payment_gateway">
            <hr>
          </template>

          <template
            x-if="subscription.order.payment_id || subscription.order.payment_gateway">
            <div>
              <div class="label">{{ p__('label', 'Payment') }}</div>
              <div class="flex mt-1">
                <div>
                  <x-copy class="flex items-center badge"
                    :data-copy="subscription.order.payment_id">

                    <span class="font-bold capitalize"
                      x-text="subscription.order.payment_gateway">
                    </span>

                    <span x-text="subscription.order.external_id"></span>
                  </x-copy>
                </div>
              </div>
            </div>
          </template>

          <div class="flex items-center gap-1">
            <a :href="`admin/orders/${subscription.order.id}`"
              class="button button-outline button-sm">
              {{ p__('button', 'View order')}}
            </a>
          </div>
        </div>
      </section>
    </template>
  </div>
</div>

<template
  x-if="['active', 'trialing'].includes(subscription.status) && subscription.renew_at">
  <modal-element name="cancel-subscription">
    <form class="modal" @submit.prevent="cancelSubscription()">
      <div
        class="relative flex items-center justify-center w-24 h-24 mx-auto rounded-full text-failure/25">

        <svg class="absolute top-0 left-0 w-full h-full" width="112"
          height="112" viewBox="0 0 112 112" fill="none"
          xmlns="http://www.w3.org/2000/svg">
          <circle cx="56" cy="56" r="55.5" stroke="currentColor"
            stroke-dasharray="8 8" />
        </svg>

        <div
          class="flex items-center justify-center w-20 h-20 text-4xl transition-all rounded-full bg-failure/25 text-failure">
          <i class="text-4xl ti ti-trash"></i>
        </div>
      </div>

      <div class="mt-4 text-lg text-center">
        {% set plan %}
        <strong x-text="subscription.plan.title"></strong>
        {% endset %}

        {% set ws %}
        <strong x-text="subscription.workspace.name"></strong>
        {% endset %}

        {{ __('Do you really want to cancel the subscription to :plan for :workspace workspace?')|replace({':plan': plan, ':workspace': ws})|raw }}
      </div>

      <div class="flex items-center justify-center gap-4 mt-10">
        <button class="button button-outline" @click="modal.close()"
          type="button">
          {{ p__('button', 'No') }}
        </button>

        <button class="button button-failure" type="submit"
          :processing="isProcessing" :disabled="isProcessing">
          {% include "/snippets/spinner.twig" %}

          {{ p__('button', 'Cancel subscription') }}
        </button>
      </div>
    </form>
  </modal-element>
</template>
{% endblock %}