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

{% set active_menu = '/admin/subscriptions' %}

{% set xdata %}
list("subscriptions")
{% endset %}

{% block title p__('title', 'Subscriptions')|title %}

{% block template %}
	{# Header #}
	<div class="flex justify-between items-center">
		<div>
			<h1>{{ p__('heading', 'Subscriptions') }}</h1>

			<template x-if="total !== null">
				<div class="text-sm text-content-dimmed md:hidden">
					{{ __('Total :count subscriptions')|replace({':count': '<span x-text="total"></span>'})|raw }}
				</div>
			</template>
		</div>

		<div class="flex gap-2 items-center md:hidden">
			<button type="button" class="hidden w-8 h-8 avatar">
				<i class="text-lg ti ti-adjustments-horizontal"></i>
			</button>
		</div>

		<div class="hidden gap-2 items-center md:flex">
			<button type="button" class="button button-outline button-sm" @click="exportData" :processing="isExporting">
				{% include "/snippets/spinner.twig" %}

				{{ p__('button', 'Export') }}
			</button>
		</div>
	</div>

	{# Filters #}
	{% 
  include "/snippets/filters.twig" with { 
    search: false,
    total: __('Total :count subscriptions'),
    sort: [
      {
        value: null,
        label: p__('label', 'Default')
      },
    
      {
        value: 'created_at',
        label: p__('label', 'Date')
      },
    
      {
        value: 'usage_count',
        label: p__('label', 'Usage count')
      }
    ],
    filters: [
      {
        label: p__('label', 'Status'),
        model: 'status',
        options: [
          {
            value: 'trialing',
            label: p__('subscription-status', 'Trialing')
          },
          {
            value: 'active',
            label: p__('subscription-status', 'Active')
          },
          {
            value: 'canceled',
            label: p__('subscription-status', 'Cancelled')
          },
          {
            value: 'ended',
            label: p__('subscription-status', 'Ended')
          },
        ]
      },
      {
        label: p__('label', 'Plan'),
        model: 'plan',
        billing_cycle: ['monthly', 'yearly', 'lifetime'],
        options: [
        ]
      },
      {
        label: p__('label', 'Workspace'),
        model: 'workspace',
        hidden: true,
      },
    ]
  } 
%}

	{# List #}
	<div class="group/list" :data-state="state">
		<div class="hidden group-data-[state=empty]/list:block">
			{% include "sections/empty.twig" with { title: p__('heading', 'Empty result set'), message: __('There are no subscription yet.'), reset: __('There are no subscription matching your search.') } %}
		</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-5">{{ p__('label', 'Subscription') }}</div>
			<div class="col-span-2">{{ p__('label', 'Plan') }}</div>
			<div class="col-span-2">{{ p__('label', 'Price') }}</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">
			{% for i in range(1,5) %}
				<li class="hidden grid-cols-12 gap-3 items-center md:p-3 box animate-pulse group-data-[state=initial]/list:grid">
					<div class="flex col-span-11 gap-3 items-center">
						<div class="avatar loading"></div>
						<div class="w-32 h-6 loading"></div>
					</div>

					<div class="col-span-1 justify-self-end">
						<i class="text-2xl animate-pulse ti ti-dots-vertical text-content-dimmed"></i>
					</div>
				</li>
			{% endfor %}

			<template x-for="sub in resources" :key="sub.id">
				<li class="grid relative grid-cols-12 gap-3 items-center p-3 box hover:border-line" x-data>
					<a :href="`admin/subscriptions/${sub.id}`" class="absolute top-0 left-0 w-full h-full cursor-pointer"></a>

					<div class="flex col-span-11 gap-3 items-center md:col-span-5">
						<x-avatar :title="sub.plan.title" :length="1"></x-avatar>

						<div>
							<div class="flex gap-2 items-center">
								<div class="font-bold" x-text="sub.plan.title"></div>

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

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

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

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

							<div class="mt-0.5 text-xs text-content-dimmed">
								{% set name %}
								<a :href="`admin/workspaces/${sub.workspace.id}`" x-text="sub.workspace.name" class="relative hover:underline text-content"></a>
								{% endset %}

								{{ __('Workspace: :name')|replace({':name' : name})|raw }}
							</div>
						</div>
					</div>

					<div class="hidden md:block md:col-span-2">
						<div>
							<div x-text="sub.plan.title"></div>

							<template x-if="sub.plan.billing_cycle == 'monthly'">
								<div class="mt-0.5 text-xs text-content-dimmed">
									{{ p__('billing-cycle', 'Monthly') }}</div>
							</template>

							<template x-if="sub.plan.billing_cycle == 'yearly'">
								<div class="mt-0.5 text-xs text-content-dimmed">
									{{ p__('billing-cycle', 'Yearly') }}</div>
							</template>

							<template x-if="sub.plan.billing_cycle == 'lifetime'">
								<div class="mt-0.5 text-xs text-content-dimmed">
									{{ p__('billing-cycle', 'Lifetime') }}</div>
							</template>
						</div>
					</div>

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

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

						<template x-if="!sub.order">
							<span>-</span>
						</template>
					</div>

					<div class="hidden md:block md:col-span-2">
						<x-time :datetime="sub.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="text-2xl ti ti-dots-vertical text-content-dimmed hover:text-intermediate-content"></i>
							</button>

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