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

{% set xdata %}
checkout({{ (plan ?? {})|json_encode() }})
{% endset %}

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

{% block template %}

<div>
  {% include "snippets/back.twig" with {link: 'app/billing', label: p__('button', 'Billing overview')} %}

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

<div class="px-12 py-8 border border-line-dimmed rounded-xl" x-ref="loading">
  <div class="flex flex-col items-center gap-2 text-center">
    {% include "snippets/initializing.twig" %}
  </div>
</div>

<template x-if="state == 'empty'">
  <div class="px-12 py-8 border border-line-dimmed rounded-xl">
    <div class="flex flex-col items-center gap-2 text-center">
      <i class="text-2xl ti ti-square-rounded-x-filled text-failure"></i>

      <span class="text-xs text-content-dimmed">
        {{ __('Checkout is disabled currently.') }}
      </span>
    </div>
  </div>
</template>

<div class="flex flex-col gap-8 group" x-show="state == 'normal'" x-cloak>
  <div class="relative flex flex-col">
    <button type="button"
      class="relative z-10 flex items-center justify-between w-full gap-4 py-8 pr-10 text-left border pl-14 border-line-dimmed rounded-xl hover:border-line disabled:hover:border-line bg-main"
      @click="isVisible = !isVisible" :disabled="total <= 1">
      <div>
        <h2 class="text-xl font-bold" x-text="plan.title"></h2>

        <template x-if="plan.description">
          <div class="mt-1 text-sm text-intermediate-content"
            x-text="plan.description">
          </div>
        </template>

        <template x-if="!plan.description">
          <code is="resource-id" x-text="plan.id"></code>
        </template>
      </div>

      <div class="ml-auto text-right">
        <div class="text-xl font-bold"
          x-text="window.money(plan.price).format({ pattern: `!#`})">
        </div>

        <div class="mt-1 text-sm text-content-dimmed"
          x-text="plan.billing_cycle">
        </div>
      </div>

      <template x-if="total > 1">
        <i class="ml-2 text-2xl transition-all duration-75 ti ti-caret-down-filled"
          :class="{'-rotate-180': isVisible}"></i>
      </template>
    </button>

    <template x-if="total > 1">
      <div>
        <template x-if="showCycleSelector && isVisible">
          <div class="flex items-center gap-1 mt-6">
            <template x-if="plans.monthly.length > 0">
              <label>
                <input type="radio" class="radio-button" name="billing-cycle"
                  value="monthly" x-model="cycle"
                  :checked="cycle == 'monthly'" />

                <span>
                  {{ __('Monthly') }}
                </span>
              </label>
            </template>

            <template x-if="plans.yearly.length > 0">
              <label>
                <input type="radio" class="radio-button" name="billing-cycle"
                  value="yearly" x-model="cycle" :checked="cycle == 'yearly'" />

                <span>
                  {{ __('Yearly') }}
                </span>
              </label>
            </template>

            <template x-if="plans.onetime.length > 0">
              <label>
                <input type="radio" class="radio-button" name="billing-cycle"
                  value="onetime" x-model="cycle"
                  :checked="cycle == 'onetime'" />

                <span>
                  {{ __('One time') }}
                </span>
              </label>
            </template>
          </div>
        </template>

        <ul class="grid grid-cols-1 gap-1 mt-1 group" :class="{
            'absolute': !isVisible,
            'top-0': !isVisible,
            'left-0': !isVisible,
            'w-full': !isVisible,
            'z-0': !isVisible,
            'mt-0': !isVisible,
            'gap-0': !isVisible,
          }">
          <template x-for="(p, index) in plans[cycle]" :key="p.id">
            <li class="overflow-hidden" :class="{
              'absolute': !isVisible && index<=1,
              'top-0': !isVisible && index<=1,
              'left-0': !isVisible && index<=1,
              'w-full': !isVisible && index<=1,
              'scale-95': !isVisible && index==0,
              'z-10': !isVisible && index==0,
              'mt-3': !isVisible && index==0,
              'scale-90': !isVisible && index==1,
              'mt-6': !isVisible && index==1,
              'hidden': !isVisible && index>1,
            }">
              <button type="button"
                class="w-full py-8 text-left border px-14 border-line-dimmed rounded-xl hover:border-line bg-main"
                @click="setPlan(p); isVisible = false">
                <div class="flex items-center justify-between">
                  <div>
                    <h2 class="flex items-center gap-2 text-xl font-bold">
                      <span x-text="p.title"></span>

                      {% if auth_user.subscription.plan.id is defined %}
                      <template
                        x-if="{{ auth_user.subscription.plan.id | json_encode}} == p.id">
                        <span
                          class="font-normal badge">{{ __('Current Plan') }}</span>
                      </template>
                      {% endif %}
                    </h2>

                    <template x-if="p.description">
                      <div class="mt-1 text-sm" x-text="p.description"></div>
                    </template>

                    <template x-if="!p.description">
                      <code is="resource-id" x-text="p.id"></code>
                    </template>
                  </div>

                  <div class="text-right">
                    <div class="text-xl font-bold"
                      x-text="window.money(p.price).format({ pattern: `!#`})">
                    </div>

                    <div class="mt-1 text-sm text-content-dimmed"
                      x-text="p.billing_cycle"></div>
                  </div>
                </div>

                <template x-if="isVisible">
                  <div
                    class="flex items-center gap-8 mt-4 text-xs text-intermediate-content">
                    <div>
                      <span class="block text-sm font-semibold"
                        x-text="p.token_credit == null ? `{{ __('Unlimited') }}` : Intl.NumberFormat(document.documentElement.lang, { notation: 'compact' }).format(p.token_credit)"
                        :title="`${p.token_credit == null ? 'Unlimited' : p.token_credit } tokens`"></span>
                      <span
                        class="text-content-dimmed">{{ __('Token credits') }}</span>
                    </div>

                    <div>
                      <span class="block text-sm font-semibold"
                        x-text="p.image_credit == null ? `{{ __('Unlimited') }}` : Intl.NumberFormat(document.documentElement.lang, { notation: 'compact' }).format(p.image_credit)"
                        :title="`${p.image_credit == null ? 'Unlimited' : p.image_credit } images`"></span>
                      <span
                        class="text-content-dimmed">{{ __('Image credits') }}</span>
                    </div>

                    <div>
                      <span class="block text-sm font-semibold"
                        x-text="p.audio_credit == null ? `{{ __('Unlimited') }}` : Intl.NumberFormat(document.documentElement.lang, { notation: 'compact' }).format(p.audio_credit)"
                        :title="`${p.audio_credit == null ? 'Unlimited' : p.audio_credit } seconds`"></span>
                      <span
                        class="text-content-dimmed">{{ __('Audio credits') }}</span>
                    </div>
                  </div>
                </template>
              </button>
            </li>
          </template>
        </ul>

        <template x-if="isVisible">
          <div class="mt-1 text-right">
            <a href="./#pricing" target="_blank"
              class="text-xs text-content-dimmed">
              <i class="ti ti-external-link"></i>
              {{ __('View detailed pricing table') }}
            </a>
          </div>
        </template>
      </div>
    </template>
  </div>

  <div
    class="relative flex items-center gap-8 py-8 mt-1 text-sm border text-intermediate-content px-14 border-line-dimmed rounded-xl"
    :class="{'grayscale': isVisible, 'opacity-50': isVisible}">
    <div>
      <i class="text-2xl ti ti-square-rounded-letter-t"></i>

      <div class="mt-2">
        <span class="block text-base font-semibold"
          x-text="plan.token_credit == null ? `{{ __('Unlimited') }}` : Intl.NumberFormat(document.documentElement.lang, { notation: 'compact' }).format(plan.token_credit)"
          :title="`${plan.token_credit == null ? 'Unlimited' : plan.token_credit } tokens`"></span>
        <span class="text-content-dimmed">{{ __('Token credits') }}</span>
      </div>
    </div>

    <div>
      <i class="text-2xl ti ti-photo"></i>

      <div class="mt-2">
        <span class="block text-base font-semibold"
          x-text="plan.image_credit == null ? `{{ __('Unlimited') }}` : Intl.NumberFormat(document.documentElement.lang, { notation: 'compact' }).format(plan.image_credit)"
          :title="`${plan.image_credit == null ? 'Unlimited' : plan.image_credit } images`"></span>
        <span class="text-content-dimmed">{{ __('Image credits') }}</span>
      </div>
    </div>

    <div>
      <i class="text-2xl ti ti-volume"></i>

      <div class="mt-2">
        <span class="block text-base font-semibold"
          x-text="plan.audio_credit == null ? `{{ __('Unlimited') }}` : Intl.NumberFormat(document.documentElement.lang, { notation: 'compact' }).format(plan.audio_credit)"
          :title="`${plan.audio_credit == null ? 'Unlimited' : plan.audio_credit } seconds`"></span>
        <span class="text-content-dimmed">{{ __('Audio credits') }}</span>
      </div>
    </div>

    <template x-if="isVisible">
      <div class="absolute top-0 left-0 z-50 w-full h-full"
        @click="isVisible=false"></div>
    </template>
  </div>

  <div
    class="relative z-0 flex flex-col gap-6 py-8 border border-line-dimmed rounded-xl px-14"
    :class="{'grayscale': isVisible, 'opacity-50': isVisible}">
    <h1 class="text-xl font-bold">
      <i class="ti ti-lock"></i>
      {{ __('Checkout') }}
    </h1>

    <div class="flex items-center gap-2" x-show="$store.checkout.error" x-cloak>
      <i class="text-2xl ti ti-square-rounded-x-filled text-failure"></i>

      <span class="font-medium" x-text="$store.checkout.error"></span>
    </div>

    <div x-show="plan.id && plan.price <= 0">
      <template
        x-if="{{ (auth_user.subscription.plan.id ?? '') | json_encode}} == plan.id">
        <button type="submit" class="w-full button" disabled>
          {{ __('Choose a different plan') }}
        </button>
      </template>

      <template
        x-if="{{ (auth_user.subscription.plan.id ?? '') | json_encode}} != plan.id">
        <form @submit.prevent="submitFreeForm($el)">
          <button type="submit" class="w-full button"
            x-text="plan.billing_cycle == 'one-time' ? 'Buy for free' : 'Subscribe for free'">

            {% include "/snippets/spinner.twig" %}
          </button>
        </form>
      </template>
    </div>

    <div x-show="plan.id && plan.price > 0" class="flex flex-col gap-6">
      {% set trial = auth_user.is_elibible_for_trial and option.billing.trial_period_days is defined and option.billing.trial_period_days > 0 %}

      {% if trial %}
      <template x-if="plan.billing_cycle != 'one-time'">
        <div>
          {{ n__(
            'You\'re eligible for %s day free trial.', 
            'You\'re eligible for %s days free trial.', 
            option.billing.trial_period_days, 
            option.billing.trial_period_days
          ) }}
        </div>
      </template>

      {% if option.billing.trial_without_payment is defined and option.billing.trial_without_payment %}
      <template x-if="plan.billing_cycle != 'one-time'">
        <form @submit.prevent="submitFreeForm($el)"
          x-show="plan.billing_cycle != 'one-time'">
          <button type="submit" class="w-full button">
            {{ __('Start free trial') }}

            {% include "/snippets/spinner.twig" %}
          </button>
        </form>
      </template>
      {% endif %}
      {% endif %}

      <div class="flex flex-col gap-6"
        x-show="{{ trial and option.billing.trial_without_payment is defined and option.billing.trial_without_payment ? 'plan.billing_cycle == \'one-time\''  : 'true' }}">

        {% if option.stripe.is_enabled is defined and option.stripe.is_enabled  %}
        {% include "/snippets/checkout/stripe.twig" %}
        {% endif %}

        {% if option.stripe.is_enabled is defined and option.stripe.is_enabled  and option.paypal.is_enabled is defined and option.paypal.is_enabled  %}
        <div
          class="relative flex justify-center text-xs text-content-dimmed before:absolute before:left-0 before:top-1/2 before:w-full before:h-px before:bg-line-dimmed">
          <span class="relative z-10 px-4 bg-main">{{ __('OR') }}</span>
        </div>
        {% endif %}

        {% if option.paypal.is_enabled is defined and option.paypal.is_enabled  %}
        <div id="payment-buttons"></div>

        {% include "/snippets/checkout/paypal.twig" %}
        {% endif %}

      </div>
    </div>

    <template x-if="isVisible">
      <div class="absolute top-0 left-0 z-50 w-full h-full"
        @click="isVisible=false"></div>
    </template>
  </div>
</div>
{% endblock %}