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

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

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

{% block template %}
{% if workspace.owner.id == user.id %}
<div>
  {% include "snippets/back.twig" with {link: 'app/billing/plans', label: p__('button', 'Plans')} %}
  <h1 class="mt-4">{{ p__('heading', 'Checkout') }}</h1>
</div>

<div class="flex gap-10">
  {% set canTrial = plan.price > 0 and plan.billing_cycle in ['monthly', 'yearly'] and workspace.is_eligible_for_trial and option.billing.trial_period_days is defined and option.billing.trial_period_days > 0 %}

  <div class="w-96 shrink-0">
    <div class="flex flex-col gap-4 p-8 box">
      <h2>
        {% if plan.billing_cycle in ['monthly', 'yearly'] %}
        {{ __('Subscription') }}
        {% if canTrial and option.billing.trial_without_payment is defined and option.billing.trial_without_payment %}
        <span class="font-normal text-content-dimmed">
          ({{ __('Trail only') }})
        </span>
        {% endif %}
        {% else %}
        {{ __('Credit add-on') }}
        {% endif %}
      </h2>

      <div class="flex justify-between mt-2">
        <div>
          <h3 class="text-xl">{{ plan.title }}</h3>

          <div class="text-sm text-content-dimmed">
            <x-credit data-value="{{ plan.credit_count }}"
              format="{{ plan.credit_count is same as null ? __('Unlimited credits') : n__(":count credit", ":count credits", plan.credit_count, plan.credit_count) }}"></x-credit>
          </div>
        </div>

        <div class="text-right">
          <div class="text-xl font-bold">
            <x-money :data-value="plan.price" currency="{{ currency.code }}"
              minor-units="{{ currency.fraction_digits }}"
              fraction="auto"></x-money>
          </div>

          <div class="text-sm text-content-dimmed">
            {% if plan.billing_cycle == 'monthly' %}
            {{ p__('billing-cycle', 'Per month') }}
            {% elseif plan.billing_cycle == 'yearly' %}
            {{ p__('billing-cycle', 'Per year') }}
            {% else %}
            {{ p__('billing-cycle', 'One time') }}
            {% endif %}
          </div>
        </div>
      </div>

      {% if plan.price > 0 and (canTrial and option.billing.trial_without_payment is defined and option.billing.trial_without_payment) == false %}
      <form action="#" class="hidden my-2">
        <div class="flex gap-1">
          <input type="text" class="input"
            placeholder="{{ p__('label', 'Coupon code')|e('html_attr') }}">

          <button type="submit" class="button" disabled>
            {{ p__('button', 'Apply') }}
          </button>
        </div>
      </form>
      {% endif %}

      <hr>

      <div>
        <div class="flex justify-between">
          <div>{{ __('Subtotal') }}</div>
          <div>
            <x-money :data-value="plan.price" currency="{{ currency.code }}"
              minor-units="{{ currency.fraction_digits }}"
              fraction="auto"></x-money>
          </div>
        </div>

        <div class="flex justify-between">
          <div>{{ __('Discount') }}</div>
          {% if canTrial and option.billing.trial_without_payment is defined and option.billing.trial_without_payment %}
          <div>
            <x-money :data-value="plan.price" currency="{{ currency.code }}"
              minor-units="{{ currency.fraction_digits }}"
              fraction="auto"></x-money>
          </div>
          {% else %}
          <div>
            <x-money :data-value="0" currency="{{ currency.code }}"
              minor-units="{{ currency.fraction_digits }}"
              fraction="auto"></x-money>
          </div>
          {% endif %}
        </div>
      </div>

      <hr>

      <div class="flex justify-between text-xl">
        <div>{{ __('Total') }}</div>

        {% if canTrial and option.billing.trial_without_payment is defined and option.billing.trial_without_payment %}
        <div class="font-bold">
          <x-money :data-value="0" currency="{{ currency.code }}"
            minor-units="{{ currency.fraction_digits }}"
            fraction="auto"></x-money>
        </div>
        {% else %}
        <div class="font-bold">
          <x-money :data-value="plan.price" currency="{{ currency.code }}"
            minor-units="{{ currency.fraction_digits }}"
            fraction="auto"></x-money>
        </div>
        {% endif %}
      </div>
    </div>
  </div>

  <div class="flex flex-col gap-6 py-8 grow"
    x-init="showAddressForm = !$store.workspace.address" x-cloak>
    <div class="flex flex-col gap-6">
      <h2>
        <span class="font-mono text-content-dimmed">1.</span>
        {{ p__('text', 'Billing address') }}
      </h2>

      <template x-if="!showAddressForm">
        <div class="flex items-center justify-between gap-6">
          <address class="text-sm not-italic font-medium font-primary">
            <div>
              <span x-text="$store.workspace.address.line1"></span>

              <template x-if="$store.workspace.address.line2">
                <span x-text="`, ${$store.workspace.address.line2}`"></span>
              </template>
            </div>

            <div>
              <span x-text="$store.workspace.address.city"></span>

              <template x-if="$store.workspace.address.state">
                <span x-text="`, ${$store.workspace.address.state}`"></span>
              </template>
              <span x-text="`, ${$store.workspace.address.zip}`"></span>
              , <span x-text="$store.workspace.address.country"></span>
            </div>
          </address>

          <button type="button" class="button button-sm button-outline"
            @click="showAddressForm=true">
            {{ p__('button', 'Change address') }}
          </button>
        </div>
      </template>

      <template x-if="showAddressForm">
        <x-form>
          <form class="flex flex-col gap-6"
            @submit.prevent="saveAddress($store.workspace.id, $el);"
            x-data="{country: $store.workspace.address?.country}">
            <div>
              <label for="line1">{{ p__('label', 'Address line 1') }}</label>
              <input type="text" class="mt-2 input" id="line1"
                name="address[line1]" required
                placeholder="{{ __('Street address') }}"
                :value="$store.workspace.address?.line1">
            </div>

            <div>
              <label for="line2">{{ p__('label', 'Address line 2') }}</label>
              <input type="text" class="mt-2 input" id="line2"
                name="address[line2]"
                placeholder="{{ __('Apt., suite, unit number etc.') }}"
                :value="$store.workspace.address?.line2">
            </div>

            <div class="flex gap-6">
              <div class="grow">
                <label for="country">{{ p__('label', 'Country') }}</label>

                <select name="address[country]" id="country" required
                  class="mt-2 input" @change="country=$el.value">
                  <option value="" disabled selected>{{ __('Select country') }}
                  </option>
                  {% for code,name in countries %}
                  <option value="{{ code }}"
                    :selected="'{{ code }}' == $store.workspace.address?.country">
                    {{ name }}</option>
                  {% endfor %}
                </select>
              </div>

              <template x-if="country == 'US'">
                <div class="grow">
                  <label for="state">{{ p__('label', 'State') }}</label>

                  <select name="address[state]" id="state" required
                    class="mt-2 input">
                    <option value="" disabled selected>
                      {{ __('Select state') }}
                    </option>

                    {% for code,name in states %}
                    <option value="{{ code }}"
                      :selected="'{{ code }}' == $store.workspace.address?.state">
                      {{ name }}
                    </option>
                    {% endfor %}
                  </select>
                </div>
              </template>
            </div>

            <div class="grid grid-cols-2 gap-6">
              <div>
                <label for="city">{{ p__('label', 'City') }}</label>
                <input type="text" class="mt-2 input" id="city"
                  name="address[city]" required
                  :value="$store.workspace.address?.city">
              </div>

              <div class="grow">
                <label for="zip">{{ p__('label', 'Zip') }}</label>

                <input type="text" class="mt-2 input" id="zip"
                  name="address[zip]" required
                  :value="$store.workspace.address?.zip">
              </div>
            </div>

            <div>
              <label
                for="phone_number">{{ p__('label', 'Phone number') }}</label>
              <input type="text" class="mt-2 input" id="phone_number"
                name="address[phone_number]" required
                :value="$store.workspace.address?.phone_number">
            </div>

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

                {{ p__('button', 'Next') }}
              </button>
            </div>
          </form>
        </x-form>
      </template>
    </div>

    <hr x-show="!showAddressForm">

    <div class="flex flex-col gap-6" x-show="!showAddressForm">
      <h2>
        <span class="font-mono text-content-dimmed">2.</span>
        {{ p__('text', 'Payment') }}
      </h2>

      {% if plan.price > 0 %}
      {% if canTrial and option.billing.trial_without_payment is defined and option.billing.trial_without_payment %}
      <form @submit.prevent="purchase()">
        <button type="submit" class="w-full button" :processing="processing">
          {% include "/snippets/spinner.twig" %}

          {{ p__('button', 'Start free trial') }}
        </button>
      </form>
      {% else %}
      {% if card_gateway %}
      {% include card_gateway.name|lower == 'stripe' ? '/sections/checkout/stripe.twig' : "/sections/checkout/card-form.twig" %}
      {% endif %}

      {% if card_gateway and gateways|length > 0 %}
      <hr>
      {% endif %}

      {% if gateways|length > 0 %}
      <div class="flex flex-col gap-4">
        <label
          for="">{{ card_gateway ? p__('label', 'Or, pay with 3rd party provider') : p__('label', 'Pay with 3rd party provider') }}</label>

        <div
          class="grid items-center gap-3 {{ gateways|length > 1 ? 'grid-cols-2' : 'grid-cols-1' }}">
          {% for key, gateway in gateways %}
          {% set style %}
          {% if gateway.buttonBackgroundColor %}
          style="background-color: {{ gateway.buttonBackgroundColor }};
          outline-color: {{ gateway.buttonBackgroundColor }};
          color: {{ gateway.buttonTextColor }};"
          {% endif %}
          {% endset %}

          <button type="button" class="button" {{ style }}
            @click="purchase(`{{ key }}`)" :disabled="processing"
            :processing="processing == `{{ key }}`">

            {% if gateway.logo %}
            <span class="[&_svg]:h-4 [&_svg]:w-auto [&_img]:h-4 [&_img]:w-auto">
              {% if gateway.logo|slice(0,4) == "<svg" %}
              {{ gateway.logo|raw }}
              {% else %}
              <img src="{{ gateway.logo }}" alt="{{ gateway.name }}" />
              {% endif %}
            </span>
            {% else %}
            <h3>{{ gateway.name }}</h3>
            {% endif %}

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

        <template x-if="error">
          <p
            class="flex items-start gap-1 text-xs list-disc list-inside text-failure">
            <i class="-mt-1 text-base ti ti-square-rounded-x-filled"></i>
            <span x-text="error"></span>
          </p>
        </template>

        <template x-if="!error">
          <p
            class="flex items-center gap-1 text-xs list-disc list-inside text-content-dimmed">
            <i class="text-base ti ti-info-square-rounded"></i>
            {{ __('You will be redirected to the chosen provider to finalize your purchase.') }}
          </p>
        </template>
      </div>
      {% endif %}
      {% endif %}

      {% if canTrial %}
      <p class="text-sm">
        {{ 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
          ) }}

        {% if option.billing.trial_without_payment is defined and option.billing.trial_without_payment %}
        {{ __('After trial expires your subscription will be stopped. You won\'t be charged.') }}
        {% else %}
        {{ __('You\'ll be charged after your trial expires.') }}
        {% endif %}
      </p>
      {% endif %}

      {% else %}
      <form @submit.prevent="purchase()">
        <button type="submit" class="w-full button" :processing="processing">
          {% include "/snippets/spinner.twig" %}

          {{ p__('button', 'Subscribe for free')}}
        </button>
      </form>
      {% endif %}
    </div>
  </div>
</div>
{% else %}
<div class="flex flex-col gap-6 my-20">
  <i class="text-5xl ti ti-lock"></i>

  <div>
    <h2>{{ p__('heading', 'Permission denied') }}</h2>

    <p class="mt-1 text-sm">
      {{ __('You don\'t have an access to this page.') }}
    </p>
  </div>

  <div>
    <a href="app" class="button button-sm button-outline">
      <i class="ti ti-arrow-left"></i>
      {{ p__('button', 'Go home page') }}
    </a>
  </div>
</div>
{% endif %}
{% endblock %}