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

{% set xdata = 'affiliates' %}
{% block title p__('title', 'Affiliates')|title %}

{% block template %}
<div>
  {% include "snippets/back.twig" with {link: 'app', label: p__('button', 'Dashboard')} %}
  <h1>{{ __('Affiliates') }}</h1>
</div>

<div
  class="relative p-1 bg-gradient-to-br rounded-xl bg-gradient-from from-gradient-from to-gradient-to">
  <div class="flex flex-col gap-4 p-8 rounded-lg bg-main">
    <div>
      <div class="text-lg font-medium">
        {{ __('Invite your friends and earn %s commission from their all purchases', (option.affiliates.commission ?? '0') ~ '%') | raw }}
      </div>
    </div>

    <div
      class="flex flex-col gap-4 justify-between p-4 rounded-xl md:items-center md:flex-row bg-intermediate text-intermediate-content">
      <div>
        <div class="label">{{ __('Your referral link') }}</div>
        <div class="text-sm truncate">
          <x-copy class="text-content-dimmed hover:text-content">
            {{ option.site.is_secure ? 'https://' : 'http://' }}{{ option.site.domain }}/r/{{ user.affiliate.code }}
          </x-copy>
        </div>
      </div>

      <x-copy
        data-copy="{{ option.site.is_secure ? 'https://' : 'http://' }}{{ option.site.domain }}/r/{{ user.affiliate.code }}"
        class="button button-sm button-accent">
        <i class="ti ti-copy"></i>
        {{ p__('button', 'Copy link') }}
      </x-copy>
    </div>
  </div>
</div>

<div class="grid grid-cols-2 gap-4 p-6 md:gap-2 md:grid-cols-5 box">
  <div>
    <div class="text-sm text-content-dimmed">{{ __('Clicks') }}</div>
    <div class="text-lg font-bold">
      <x-credit data-value="{{ user.affiliate.clicks }}"></x-credit>
    </div>
  </div>

  <div>
    <div class="text-sm text-content-dimmed">{{ __('Signups') }}</div>
    <div class="text-lg font-bold">
      <x-credit data-value="{{ user.affiliate.referrals }}"></x-credit>
    </div>
  </div>

  <div>
    <div class="text-sm text-content-dimmed">{{ __('Balance') }}</div>
    <template x-if="affiliate.payout_method == null">
      <div class="flex gap-1 items-center text-lg font-bold">
        <x-money data-value="{{ user.affiliate.balance }}"
          currency="{{ user.affiliate.currency.code }}"
          minor-units="{{ user.affiliate.currency.fraction_digits }}"></x-money>

        <button type="button" class="text-content-dimmed hover:text-content"
          x-tooltip.raw="{{ __('Set payout method') }}"
          @click="modal.open('payout-method-modal')">
          <i class="text-base ti ti-settings"></i>
        </button>
      </div>
    </template>

    <template x-if="affiliate.payout_method">
      {% if option.affiliates.min_payout is defined %}
      {% if user.affiliate.balance >= option.affiliates.min_payout %}
      <button type="button"
        class="flex gap-1 items-center text-lg font-bold group"
        x-tooltip.raw="{{ __('Click to withdraw') }}"
        @click="modal.open('withdraw-modal')">
        <x-money data-value="{{ user.affiliate.balance }}"
          currency="{{ user.affiliate.currency.code }}"
          minor-units="{{ user.affiliate.currency.fraction_digits }}"></x-money>

        <i
          class="text-xl ti ti-credit-card text-content-dimmed group-hover:text-content"></i>
      </button>
      {% else %}
      {% set min %}
      <x-money data-value="{{ option.affiliates.min_payout }}"
        currency="{{ user.affiliate.currency.code }}"
        minor-units="{{ user.affiliate.currency.fraction_digits }}"></x-money>
      {% endset %}

      <div class="flex gap-1 items-center text-lg font-bold"
        x-tooltip.raw.html="{{ __('Minimum payout is %s', min) }}">
        <x-money data-value="{{ user.affiliate.balance }}"
          currency="{{ user.affiliate.currency.code }}"
          minor-units="{{ user.affiliate.currency.fraction_digits }}"></x-money>

        <i class="text-xl ti ti-credit-card text-content-dimmed"></i>
      </div>
      {% endif %}
      {% else %}
      <x-money data-value="{{ user.affiliate.balance }}"
        currency="{{ user.affiliate.currency.code }}"
        minor-units="{{ user.affiliate.currency.fraction_digits }}"></x-money>
      {% endif %}
    </template>
  </div>

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

    <div class="text-lg font-bold">
      <x-money data-value="{{ user.affiliate.pending }}"
        currency="{{ user.affiliate.currency.code }}"
        minor-units="{{ user.affiliate.currency.fraction_digits }}"></x-money>
    </div>
  </div>

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

    <div class="text-lg font-bold">
      <x-money data-value="{{ user.affiliate.withdrawn }}"
        currency="{{ user.affiliate.currency.code }}"
        minor-units="{{ user.affiliate.currency.fraction_digits }}"></x-money>
    </div>
  </div>
</div>

<div class="flex flex-col gap-4">
  <h2>{{ p__('heading', 'How it works?') }}</h2>

  <div class="grid grid-cols-1 gap-1 md:grid-cols-3">
    <div class="flex flex-col gap-4 box">
      <span class="avatar bg-button text-button-content">
        <i class="ti ti-mail-fast"></i>
      </span>

      <div>
        <h3>1. {{ p__('heading', 'Invite your friend') }}</h3>
        <p class="text-sm text-content-dimmed">
          {{ __('Share your referral link with friends and followers.') }}
        </p>
      </div>
    </div>

    <div class="flex flex-col gap-4 box">
      <span class="avatar bg-button text-button-content">
        <i class="ti ti-user-circle"></i>
      </span>

      <div>
        <h3>2. {{ p__('heading', 'Registration') }}</h3>
        <p class="text-sm text-content-dimmed">
          {{ __('Your friend signs up using your referral link.') }}
        </p>
      </div>
    </div>

    <div class="flex flex-col gap-4 box">
      <span class="avatar bg-button text-button-content">
        <i class="ti ti-currency-dollar"></i>
      </span>

      <div>
        <h3>3. {{ p__('heading', 'Earn comission') }}</h3>
        <p class="text-sm text-content-dimmed">
          {{ __('You will receive comission for every purchase of your referrals.') }}
        </p>
      </div>
    </div>
  </div>
</div>

<section class="flex flex-col gap-6 box" data-density="comfortable">
  <div class="flex gap-2 items-center">
    <h2>
      {{ p__('heading', 'Payouts') }}
    </h2>

    <a href="app/payouts" class="badge">
      {{ p__('button', 'View all') }}
    </a>

    <button type="button" class="ml-auto text-content-dimmed hover:text-content"
      @click="modal.open('payout-method-modal')"
      x-tooltip.raw="{{ __('Payout settings') }}">
      <i class="ti ti-settings"></i>
    </button>
  </div>

  <div>
    <template x-if="payoutsFetched && payouts.length === 0">
      <p class="text-sm text-content-dimmed">
        {{ __('Your payouts will appear here.') }}
      </p>
    </template>

    <template x-if="!payoutsFetched || payouts.length > 0">
      <ul class="flex flex-col gap-1 text-sm">
        {% for i in range(1,3) %}
        <template x-if="!payoutsFetched">
          <li class="grid relative grid-cols-12 gap-3 items-center p-3 box">
            <div class="col-span-6 md:col-span-2">
              <div class="py-1 w-20">
                <div class="h-4 loading"></div>
              </div>

              <div class="md:hidden">
                <div class="py-1 w-32">
                  <div class="h-4 loading"></div>
                </div>
              </div>
            </div>

            <div class="col-span-6 md:col-span-7">
              <div class="py-1 w-32">
                <div class="h-4 loading"></div>
              </div>
            </div>

            <div class="hidden col-span-3 md:block">
              <div class="py-1 w-32">
                <div class="h-4 loading"></div>
              </div>
            </div>
          </li>
        </template>
        {% endfor %}

        <template x-for="p in payouts" :key="p.id">
          <li
            class="grid relative grid-cols-12 gap-3 items-center p-3 box hover:border-line"
            x-data>
            <div class="col-span-6 md:col-span-2">
              <x-money :data-value="p.amount" :currency="p.currency.code"
                :minor-units="p.currency.fraction_digits"
                class="font-bold"></x-money>

              <div class="md:hidden">
                <x-time :datetime="p.created_at" data-type="date"></x-time>
              </div>
            </div>

            <div class="flex col-span-6 md:col-span-7">
              <template x-if="p.status == 'pending'">
                <span class="badge">{{ __('Pending') }}</span>
              </template>

              <template x-if="p.status == 'approved'">
                <span class="badge badge-success">{{ __('Approved') }}</span>
              </template>

              <template x-if="p.status == 'rejected'">
                <span class="badge badge-failure">{{ __('Rejected') }}</span>
              </template>
            </div>

            <div class="hidden col-span-3 md:block">
              <x-time :datetime="p.created_at" data-type="date"></x-time>
            </div>
          </li>
        </template>
      </ul>
    </template>
  </div>
</section>

<modal-element name="payout-method-modal">
  <x-form>
    <form class="flex flex-col gap-8 modal" @submit.prevent="setPayoutMethod">
      <div class="flex justify-between items-center">
        <h2 class="text-xl">{{ p__('heading', 'Payout settings') }}</h2>

        <button
          class="flex justify-center items-center w-8 h-8 rounded-full border border-transparent bg-line-dimmed hover:border-line"
          @click="modal.close()" type="button">
          <i class="text-xl ti ti-x"></i>
        </button>
      </div>

      <div class="flex flex-col gap-6">
        <div>
          <label for="method">{{ p__('label', 'Payout method') }}</label>

          <select id="method" class="mt-2 input" required
            x-model="affiliate.payout_method">
            <option value="">{{ __('Select payout method') }}</option>

            {% if option.affiliates.payout_methods.paypal.is_enabled %}
            <option value="paypal">{{ __('PayPal') }}</option>
            {% endif %}

            {% if  option.affiliates.payout_methods.bank_transfer.is_enabled %}
            <option value="bank_transfer">{{ __('Bank transfer') }}</option>
            {% endif %}
          </select>
        </div>

        <template x-if="affiliate.payout_method === 'paypal'">
          <div>
            <label for="paypal_email">{{ p__('label', 'PayPal email') }}</label>
            <input type="email" id="paypal_email" class="mt-2 input" required
              x-model="affiliate.paypal_email" />
          </div>
        </template>

        <template x-if="affiliate.payout_method === 'bank_transfer'">
          <div>
            <label for="bank_name">{{ p__('label', 'Bank requisites') }}</label>
            <textarea id="bank_name" class="mt-2 input" rows="8" required
              x-model="affiliate.bank_requisites"></textarea>
          </div>
        </template>
      </div>

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

          {{ p__('button', 'Save') }}
        </button>
      </div>
    </form>
  </x-form>
</modal-element>

<modal-element name="withdraw-modal">
  <x-form>
    <form class="flex flex-col gap-8 modal"
      @submit.prevent="sendWithdrawalRequest">
      <div class="flex justify-between items-center">
        <h2 class="text-xl">{{ p__('heading', 'Withdrawal request') }}</h2>

        <button
          class="flex justify-center items-center w-8 h-8 rounded-full border border-transparent bg-line-dimmed hover:border-line"
          @click="modal.close()" type="button">
          <i class="text-xl ti ti-x"></i>
        </button>
      </div>

      <div>
        <div class="flex gap-1 items-center text-sm font-bold">
          <i class="text-lg ti ti-info-square-rounded"></i>
          {{ __('Important') }}
        </div>

        <p class="mt-2 text-sm">
          {{ __('Withdrawal takes few business days. Make sure you have set correct payout details.') }}

          <button type="button" class="font-bold hover:underline"
            @click="modal.open('payout-method-modal')">{{ __('View payout details') }}</button>
        </p>
      </div>

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

          {{ p__('button', 'Send request') }}
        </button>
      </div>
    </form>
  </x-form>
</modal-element>
{% endblock %}