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

{% set xdata = 'billing' %}
{% block title p__('title', 'Billing overview')|title %}

{% block template %}
<div class="flex flex-col gap-8">
  <div>
    {% include "snippets/back.twig" with {link: 'app', label: p__('button', 'Dashboard')} %}

    <h1 class="mt-4">
      {{ p__('heading', 'Billing overview') }}
    </h1>
  </div>

  <div class="grid gap-5 md:grid-cols-2">
    <div
      class="flex flex-col gap-6 p-8 box {{ workspace.subscription ? '' : 'border-line' }}">
      <i
        class="flex items-center justify-center w-10 h-10 rounded-full ti ti-refresh bg-button text-button-content"></i>

      {% if workspace.subscription %}
      <div>
        <div class="flex items-center gap-2">
          <h2>{{ workspace.subscription.plan.title }}</h2>
          <span class="badge">{{ __('Recurring') }}</span>
        </div>

        <p class="mt-1 text-sm">
          {{ workspace.subscription.plan.description }}
        </p>
      </div>

      <div class="flex justify-between">
        <div>
          <div class="text-lg font-bold">
            <x-credit
              data-value="{{ workspace.subscription.plan.credit_count }}"></x-credit>
          </div>

          <p class="text-sm text-content-dimmed">
            {{ __('Credits per month') }}
          </p>
        </div>

        {% if workspace.subscription.currency %}
        <div class="text-right">
          <div class="text-lg font-bold">
            <x-money :data-value="$store.workspace.subscription.plan.price"
              :currency="$store.workspace.subscription.currency.code"
              :minor-units="$store.workspace.subscription.currency.fraction_digits"></x-money>
          </div>

          <p class="text-sm text-content-dimmed">
            {{ workspace.subscription.plan.billing_cycle == 'yearly' ? __('Yearly') : __('Monthly') }}
          </p>
        </div>
        {% endif %}
      </div>

      <hr>

      <div>
        <div class="text-lg font-bold">
          <x-credit
            data-value="{{ workspace.subscription.credit_count }}"></x-credit>
        </div>

        <div class="flex items-center justify-between text-sm">
          <span
            class="text-content-dimmed">{{ p__('label', 'Credits left') }}</span>
          <span>{{ workspace.subscription.credit_percentage }}</span>
        </div>

        <div class="mt-4 overflow-hidden rounded-full bg-intermediate">
          {% set style %}
          style="width: {{ workspace.subscription.credit_percentage }};"
          {% endset %}
          <div class="h-2 bg-gradient-to-br from-gradient-from to-gradient-to"
            {{style}}></div>
        </div>
      </div>

      {% if workspace.owner.id == user.id %}
      <div class="mt-2">
        {% if workspace.subscription.plan.price > 0 %}
        <a href="app/billing/plans" class="button button-sm">
          <i class="ti ti-arrows-exchange"></i>
          {{ p__('button', 'Change plan') }}
        </a>
        {% else %}
        <a href="app/billing/plans" class="button button-accent button-sm">
          <i class="ti ti-click"></i>
          {{ p__('button', 'Upgrade plan') }}
        </a>
        {% endif %}
      </div>
      {% endif %}

      {% if workspace.subscription.cancel_at %}
      <p class="mt-2 text-xs text-content-dimmed">
        {{ __("Subscription will be cancelled at %s", '<x-time datetime="' ~ workspace.subscription.cancel_at ~ '"></x-time>')|raw }}
      </p>
      {% elseif workspace.subscription.renew_at %}
      <div class="mt-2">
        <p class="text-xs text-content-dimmed">
          {{ __("Usage renews at %s", '<x-time datetime="' ~ workspace.subscription.renew_at ~ '"></x-time>')|raw }}
        </p>

        {% if workspace.owner.id == user.id and workspace.subscription.currency and workspace.subscription.plan.price > 0 %}
        <div class="text-xs mt-0.5">
          <button class="text-xs font-bold hover:underline text-content"
            @click="modal.open('cancel-subscription')">
            {{ p__('button', 'Cancel subscription')}}
          </button>
        </div>
        {% endif %}
      </div>
      {% endif %}
      {% else %}
      <div>
        <h2>{{ p__('heading', 'No current plan') }}</h2>

        <p class="mt-1 text-sm">
          {{ __('Workspace is currently not subscribed to any plans.') }}
        </p>
      </div>

      <div class="mt-auto"></div>

      {% if workspace.owner.id == user.id %}
      <div class="mt-2">
        <a href="app/billing/plans" class="button button-accent button-sm">
          <i class="ti ti-click"></i>
          {{ p__('button', 'Choose a plan') }}
        </a>
      </div>

      <p class="mt-2 text-xs text-content-dimmed">
        {{ __("Explore our options to find one that suits your needs.") }}
      </p>
      {% else %}
      <p class="mt-2 text-xs text-content-dimmed">
        {{ __("Workspace owner can change the plan") }}
      </p>
      {% endif %}
      {% endif %}
    </div>

    <div
      class="flex flex-col gap-6 p-8 box {{ workspace.subscription ? '' : 'opacity-50 grayscale' }}">
      <i
        class="flex items-center justify-center w-10 h-10 rounded-full ti ti-square-rounded-letter-t text-gradient-content from-gradient-from to-gradient-to bg-gradient-to-br"></i>

      <div>
        <div class="flex items-center gap-2">
          <h2>{{ p__('heading', 'Add-on credits') }}</h2>
          <span class="badge">{{ __('One-time, non-expiring') }}</span>
        </div>

        <p class="mt-1 text-sm">
          {{ __('Permanent, non-renewing extras for your subscription, used only after recurring credits run out.') }}
        </p>
      </div>

      <div class="mt-auto">
        <div class="text-lg font-bold">
          <x-credit data-value="{{ workspace.credit_count }}"></x-credit>
        </div>

        <p class="text-sm text-content-dimmed">{{ __('Credits left') }}</p>
      </div>

      {% if workspace.owner.id == user.id %}
      <div class="mt-2">
        {% if workspace.subscription %}
        <a href="app/billing/packs" class="button button-outline button-sm">
          <i
            class="ti {{ workspace.subscription.plan.price > 0 ? 'ti-click' : 'ti-cube-plus' }}"></i>

          {{ p__('button', 'Buy additional credits') }}
        </a>
        {% else %}
        <button class="button button-outline button-sm" disabled>
          <i class="ti ti-cube-plus"></i>
          {{ p__('button', 'Buy additional credits') }}
        </button>
        {% endif %}
      </div>
      {% endif %}

      {% if workspace.subscription %}
      <p class="mt-2 text-xs text-content-dimmed">
        {% if workspace.owner.id ==  user.id %}
        {{ __('You can purchase additional credits to supplement your existing subscription.') }}
        {% else %}
        {{ __('Workspace owner can purchase additional credits to supplement the existing subscription.') }}
        {% endif %}
      </p>
      {% else %}
      <p class="mt-2 text-xs">
        {{ __('Addon credits reactivate with any plan subscription.') }}
      </p>
      {% endif %}
    </div>

    <template x-if="orders.length > 0">
      <section class="flex flex-col gap-6 md:col-span-2 box"
        data-density="comfortable">
        <div class="flex items-center gap-2">
          <h2>{{ p__('heading', 'Latest orders') }}</h2>

          <a class="badge" :href="`app/billing/orders?sort=created_at:desc`">
            {{ p__('button', 'View all') }}
          </a>
        </div>

        <div>
          <div
            class="hidden md:grid grid-cols-12 gap-3 items-center px-3 py-2 text-content-dimmed text-xs group-data-[state=empty]/list:hidden">
            <div class="col-span-3">{{ p__('label', 'Order') }}</div>
            <div class="col-span-2">{{ p__('label', 'Status') }}</div>
            <div class="col-span-2">{{ p__('label', 'Credits') }}</div>
            <div class="col-span-2">{{ p__('label', 'Total') }}</div>
            <div class="col-span-2">{{ p__('label', 'Created') }}</div>
            <div class="col-span-1"></div>
          </div>

          <ul
            class="text-sm flex flex-col gap-1 group-data-[state=empty]:hidden">
            <template x-for="order in orders" :key="order.id">
              <li
                class="relative grid items-center grid-cols-12 gap-3 p-3 box hover:border-line"
                x-data>
                <a :href="`app/billing/orders/${order.id}`"
                  class="absolute top-0 left-0 w-full h-full cursor-pointer"></a>

                <div class="flex items-center col-span-11 gap-3 md:col-span-3">
                  <div>
                    <div class="flex items-center gap-2">
                      <div class="flex items-center">
                        <span class="font-bold"
                          x-text="order.plan.title"></span>

                        <i
                          class="ti ti-direction-horizontal text-content-dimmed"></i>

                        <template x-if="order.plan.billing_cycle == 'monthly'">
                          <span>{{ p__('billing-cycle', 'Monthly') }}</span>
                        </template>

                        <template x-if="order.plan.billing_cycle == 'yearly'">
                          <span>{{ p__('billing-cycle', 'Yearly') }}</span>
                        </template>

                        <template x-if="order.plan.billing_cycle == 'lifetime'">
                          <span>{{ p__('billing-cycle', 'Lifetime') }}</span>
                        </template>

                        <template x-if="order.plan.billing_cycle == 'one-time'">
                          <span>{{ p__('billing-cycle', 'Add-on credit') }}</span>
                        </template>
                      </div>
                    </div>
                  </div>
                </div>

                <div class="hidden md:block md:col-span-2">
                  <template x-if="order.status == 'completed'">
                    <span>{{ p__('order-status', 'Completed') }}</span>
                  </template>

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

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

                <div class="hidden md:block md:col-span-2">
                  <x-credit :data-value="order.plan.credit_count"></x-credit>
                </div>

                <div class="hidden md:block md:col-span-2">
                  <div class="font-bold">
                    <x-money :data-value="order.total"
                      :currency="order.currency.code"
                      :minor-units="order.currency.fraction_digits"></x-money>
                  </div>

                  <div class="text-xs text-content-dimmed mt-0.5"
                    x-text="order.plan.billing_cycle == 'monthly' ? `{{ __('per month') }}` : order.plan.billing_cycle == 'yearly' ? `{{ __('per year') }}` : `{{ __('one-time') }}`">
                  </div>
                </div>

                <div class="hidden md:block md:col-span-2">
                  <x-time :datetime="order.created_at"
                    data-type="date"></x-time>
                </div>

                <div class="col-span-1 justify-self-end">
                  <div class="relative"
                    @click.outside="$refs.context.removeAttribute('data-open')">

                    <button class="relative z-10"
                      @click="$refs.context.toggleAttribute('data-open')">
                      <i
                        class="ti ti-dots-vertical text-content-dimmed hover:text-intermediate-content"></i>
                    </button>

                    <div class="menu" x-ref="context">
                      <ul>
                        <li>
                          <a :href="`app/billing/orders/${order.id}`"
                            class="flex items-center gap-2 px-4 py-2 hover:no-underline hover:bg-intermediate">
                            {{ p__('button', 'Details') }}
                          </a>
                        </li>
                      </ul>
                    </div>
                  </div>
                </div>
              </li>
            </template>
          </ul>
        </div>
      </section>
    </template>
  </div>
</div>

{% if workspace.subscription %}
<modal-element name="cancel-subscription">
  <form class="modal"
    @submit.prevent="cancelSubscription($store.workspace.id);">
    <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>
        {{ workspace.subscription.plan.title }}
      </strong>
      {% endset %}

      {% set ws %}
      <strong>
        {{ workspace.name }}
      </strong>
      {% endset %}

      {{ __('Do you really want to cancel 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">
        {{ p__('button', 'Yes, cancel sbuscription') }}
      </button>
    </div>
  </form>
</modal-element>
{% endif %}
{% endblock %}