{% extends "default.html" %}

{% block title %}Referral{% endblock %}
{% set active_page = "setting" %}
{% block default_content %}

  <div class="col">
    <h1 class="h3 mb-5">
      Referrals
      <a class="ml-3 text-info"
         style="font-size: 12px"
         data-toggle="collapse"
         href="#howtouse"
         role="button"
         aria-expanded="false"
         aria-controls="collapseExample">
        How to use <i class="fe fe-chevrons-down"></i>
      </a>
    </h1>
    <div class="alert alert-primary collapse" id="howtouse" role="alert">
      On this page, you can create a <b>referral code</b> that you can use when referring people to SimpleLogin.
      For every user who <b>upgrades</b> and stays with us at least 3 months, you'll get $5 :).
      <br />
      The payout can be initiated any time, just send us an email at
      <a href="mailto:hi@simplelogin.io" target="_blank">hi@simplelogin.io</a>
      when you want to receive the payout.
    </div>
    {% if referrals|length == 0 %}

      <div class="alert alert-info">
        You don't have any referral code yet. Let's create the first one and start inviting your friends!
        <br />
      </div>
    {% endif %}
    {% for referral in referrals %}

      <div class="card p-4 shadow-sm {% if referral.id == highlight_id %} highlight-row{% endif %}">
        <form method="post">
          <input type="hidden" name="form-name" value="update">
          <input type="hidden" name="referral-id" value="{{ referral.id }}">
          <div class="d-flex mb-3">
            <div class="mr-2">
              <input name="name"
                     class="form-control"
                     required
                     value="{{ referral.name or '' }}">
            </div>
            <div>
              <button class="btn btn-outline-success">Update</button>
            </div>
          </div>
        </form>
        {% set nb_user = referral.nb_user %}
        {% set nb_paid_user = referral.nb_paid_user %}
        {% if nb_user > 0 %}

          <div class="mb-3">
            <b class="h1">{{ nb_user }}</b>
            {% if nb_user == 1 %}

              person
            {% else %}
              people
            {% endif %}
            has their online privacy protected thanks to you!
            <br />
            Among them, <b class="h1">{{ nb_paid_user }}</b>
            {% if nb_paid_user == 1 %}

              person
            {% else %}
              people
            {% endif %}
            has upgraded their accounts.
          </div>
        {% endif %}
        <div class="mt-2">
          Please use this referral link to invite your friends trying out SimpleLogin:
          <br />
          <div class="d-flex mb-5 mt-2" style="max-width: 40em">
            <div class="flex-grow-1 mr-2">
              <input class="form-control"
                     id="referral-{{ referral.id }}"
                     readonly
                     value="{{ referral.link() }}">
            </div>
            <div>
              <button class="clipboard btn btn-outline-primary"
                      data-clipboard-action="copy"
                      data-clipboard-text="{{ referral.link() }}"
                      data-clipboard-target="#referral-{{ referral.id }}">
                Copy <i class="fe fe-clipboard"></i>
              </button>
            </div>
          </div>
        </div>
        <div class="mb-3">
          You can also use the referral code <b>{{ referral.code }}</b> when sharing any link on SimpleLogin.
          <br />
          Just append
          <em data-toggle="tooltip"
              title="Click to copy"
              class="clipboard"
              data-clipboard-text="{{ '?slref=' + referral.code }}"
              style="overflow-wrap: break-word">
            ?slref={{ referral.code }}
          </em>
          to any link on SimpleLogin website.
        </div>
        <div>
          <form method="post">
            <input type="hidden" name="form-name" value="delete">
            <input type="hidden" name="referral-id" value="{{ referral.id }}">
            <span class="delete-referral  float-right btn btn-outline-danger">Delete</span>
          </form>
        </div>
      </div>
    {% endfor %}
    <form method="post" class="mt-6 card p-4 shadow">
      <input type="hidden" name="form-name" value="create">
      <div class="form-group">
        <input name="code"
               class="form-control"
               pattern="[0-9a-z-_]{3,}"
               placeholder="Referral Code"
               title="At least 3 characters. Only lowercase letters, numbers, dashes (-) and underscores (_) are currently supported.">
        <div class="small-text">
          At least 3 characters. Only lowercase letters, numbers,
          dashes (-) and underscores (_) are currently supported.
        </div>
      </div>
      <div class="form-group">
        <input name="name"
               class="form-control"
               required
               placeholder="Referral name, something to help you remember why you create it :)">
      </div>
      <button class="btn btn-success mb-5">Create</button>
    </form>
    {% if payouts|length > 0 %}

      <div class="mt-6 card p-4 shadow">
        <h3 class="h4">Payouts</h3>
        <table class="table">
          <thead>
            <tr>
              <th>Sent at</th>
              <th>Amount</th>
              <th>Payment Method</th>
              <th>Number of upgraded accounts</th>
            </tr>
          </thead>
          <tbody>
            {% for payout in payouts %}

              <tr>
                <td>{{ payout.created_at | dt }}</td>
                <td>${{ payout.amount }}</td>
                <td>{{ payout.payment_method }}</td>
                <td>{{ payout.number_upgraded_account }}</td>
              </tr>
            {% endfor %}
          </tbody>
        </table>
      </div>
    {% endif %}
  </div>
{% endblock %}
{% block script %}

  <script>
    $(".delete-referral").on("click", function (e) {
      let that = $(this);

      bootbox.confirm({
        message: "This operation is irreversible, please confirm.",
        buttons: {
          confirm: {
            label: 'Yes, delete it',
            className: 'btn-danger'
          },
          cancel: {
            label: 'Cancel',
            className: 'btn-outline-primary'
          }
        },
        callback: function (result) {
          if (result) {
            that.closest("form").submit();
          }
        }
      })


    });
  </script>
{% endblock %}