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

{% set active_menu = 'orders' %}

{% set xdata %}
list("billing/orders")
{% endset %}

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

{% block template %}
{# Header #}
<div class="flex items-center justify-between">
  <div>
    <a href="app/billing"
      class="inline-flex items-center gap-1 text-sm rounded-lg text-content-dimmed hover:text-content">
      <i class="text-lg ti ti-square-rounded-arrow-left-filled"></i>
      {{ __('Billing overview') }}
    </a>

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

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

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

{# Filters #}
{% 
  include "/snippets/filters.twig" with { 
    search: false,
    total: __('Total :count orders'),
    sort: [
      {
        value: null,
        label: p__('label', 'Default')
      },
    
      {
        value: 'created_at',
        label: p__('label', 'Date')
      },
    ],
    filters: [
      {
        label: p__('label', 'Status'),
        model: 'status',
        options: [
          {
            value: 'failed',
            label: p__('order-status', 'Failed')
          },
          {
            value: 'pending',
            label: p__('order-status', 'Pending')
          },
          {
            value: 'completed',
            label: p__('order-status', 'Completed')
          },
        ]
      },
      {
        label: 'Plan',
        model: 'plan',
        options: [
        ]
      },
      {
        label: p__('label', 'Billing cycle'),
        model: 'billing_cycle',
        options: [
          {
            value: 'monthly',
            label: p__('billing-cycle', 'Monthly')
          },
          {
            value: 'yearly',
            label: p__('billing-cycle', 'Yearly')
          },
          {
            value: 'lifetime',
            label: p__('billing-cycle', 'Lifetime')
          },
          {
            value: 'one-time',
            label: p__('billing-cycle', 'Add-on credit')
          },
        ]
      },
      {
        label: p__('label', 'Workspace'),
        model: 'workspace',
        hidden: true,
      },
      {
        label: p__('label', 'Plan snapshot'),
        model: 'plan_snapshot',
        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 order yet.'), reset: __('There are no order 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-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">
    {% 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 items-center col-span-11 gap-3">
        <div class="avatar loading"></div>
        <div class="w-32 h-6 loading"></div>
      </div>

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

    <template x-for="order in resources" :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>
{% endblock %}