{% extends request.content_only|yesno:"empty.html,base.html" %}

{% load crispy_forms_filters i18n %}

{% block content %}
    {% if payment.valid is False %}
        <div class="alert alert-info">
            <p>
                {% blocktrans trimmed with amount=payment.amount team=payment.team.trigram tournament=payment.tournament %}
                    You must pay {{ amount }} € for your participation in the team {{ team }}
                    for the tournament {{ tournament }}. This includes the housing and the meals.
                {% endblocktrans %}
                {% if payment.grouped %}
                    {% blocktrans trimmed %}
                        This price includes the registrations of all members of your team.
                    {% endblocktrans %}
                {% else %}
                    {% blocktrans trimmed %}
                        This price includes only your own registration.
                        You are exempt from payment if you have a scholarship,
                        but you must then send us a proof of your scholarship.
                    {% endblocktrans %}
                {% endif %}
            </p>

            <p>
                {% if can_group %}
                    {% if payment.grouped %}
                        {% blocktrans trimmed %}
                            You want finally that each member pays its own registration? Then click on the button:
                        {% endblocktrans %}
                        <div class="text-center">
                            <a href="{% url 'registration:update_payment_group_mode' pk=payment.pk %}" class="btn btn-warning">
                                <i class="fas fa-user"></i> {% trans "Back to single payments" %}
                            </a>
                        </div>
                    {% else %}
                        {% blocktrans trimmed %}
                            You want to pay for the registrations of all members of your team,
                            or your school will pay for all registrations? Then click on the button:
                        {% endblocktrans %}
                        <div class="text-center">
                            <a href="{% url 'registration:update_payment_group_mode' pk=payment.pk %}" class="btn btn-warning">
                                <i class="fas fa-users"></i> {% trans "Group the payments of my team" %}
                            </a>
                        </div>
                    {% endif %}
                {% endif %}
            </p>

            <ul>
                <li>{% trans "team"|capfirst %} : <a href="{% url "participation:team_detail" pk=payment.team.pk %}">{{ payment.team }}</a></li>
                <li>{% trans "tournament"|capfirst %} : <a href="{% url "participation:tournament_detail" pk=payment.tournament.pk %}">{{ payment.tournament }}</a></li>
                <li>
                    {% trans "Concerned students" %} :
                    <ul>
                        {% for reg in payment.registrations.all %}
                            <li><a href="{% url "registration:user_detail" pk=reg.user_id %}">{{ reg }}</a></li>
                        {% endfor %}
                    </ul>
                </li>
            </ul>
        </div>

        <div class="card">
            <div class="card-header">
                <nav>
                    <div class="nav nav-tabs card-header-tabs" id="payment-method-tab" role="tablist">
                        <button class="nav-link active" id="credit-card-tab" data-bs-toggle="tab"
                                data-bs-target="#credit-card" type="button" role="tab"
                                aria-controls="credit-card" aria-selected="true">
                            <i class="fas fa-credit-card"></i> {% trans "Credit card" %}
                        </button>
                        <button class="nav-link" id="bank-transfer-tab" data-bs-toggle="tab"
                                data-bs-target="#bank-transfer" type="button" role="tab"
                                aria-controls="bank-transfer" aria-selected="true">
                            <i class="fas fa-money-check"></i> {% trans "Bank transfer" %}
                        </button>
                        {% if not payment.grouped %}
                            <button class="nav-link" id="scholarship-tab" data-bs-toggle="tab"
                                    data-bs-target="#scholarship" type="button" role="tab"
                                    aria-controls="scholarship" aria-selected="true">
                                <i class="fas fa-file-invoice"></i> {% trans "I have a scholarship" %}
                            </button>
                        {% endif %}
                        <button class="nav-link" id="other-tab" data-bs-toggle="tab"
                                data-bs-target="#other" type="button" role="tab"
                                aria-controls="other" aria-selected="true">
                            <i class="fas fa-question"></i> {% trans "Other" %}
                        </button>
                    </div>
                </nav>
            </div>

            <div class="card-body">
                <div class="tab-content" id="payment-form">
                    <div class="tab-pane fade show active" id="credit-card" role="tabpanel" aria-labelledby="credit-card-tab">
                        <p>
                            {% blocktrans trimmed %}
                                The payment by credit card is made via Hello Asso. To do this, you can click on the
                                button below, which will redirect you to the secure payment page of Hello Asso. The payment
                                validation will then be done automatically, within a few minutes.
                            {% endblocktrans %}
                        </p>

                        <div class="text-center">
                            <a href="{% url "registration:payment_hello_asso" pk=payment.pk %}" class="btn btn-primary">
                                <i class="fas fa-credit-card"></i> {% trans "Go to the Hello Asso page" %}
                            </a>
                        </div>

                        <p>
                            {% blocktrans trimmed %}
                                If a third party must pay for you (parents, school,…), you can send them the link to
                                pay for you:
                            {% endblocktrans %}
                        </p>

                        <div class="text-center border border-1 my-3 p-2 border-danger bg-body-tertiary shadow-lg rounded">
                            {% url "registration:payment_hello_asso" pk=payment.pk as payment_url %}
                            {{ request.scheme }}://{{ request.site.domain }}{{ payment_url }}?token={{ payment.token }}
                            <a id="copyIcon" href="#"
                               data-bs-title="{% trans "Copied!" %}"
                               onclick="event.preventDefault();copyToClipboard('{{ request.scheme }}://{{ request.site.domain }}{{ payment_url }}?token={{ payment.token }}')">
                                <i class="fas fa-copy"></i> Copier
                            </a>
                        </div>

                        <p>
                            {% blocktrans trimmed %}
                                If this is the case and if an invoice is necessary, please contact the tournament
                                organizers by providing the name of the team, the number of participants, the name of the
                                paying establishment, the email address of the establishment and/or the email address of the
                                establishment manager.
                            {% endblocktrans %}
                        </p>
                    </div>

                    <div class="tab-pane fade" id="bank-transfer" role="tabpanel" aria-labelledby="bank-transfer-tab">
                        <p>
                            {% blocktrans trimmed %}
                                You can also pay by bank transfer. To do this, you must put in the reference of
                                the transfer "TFJMpu" followed by the last name and the first name of the student.
                            {% endblocktrans %}
                        </p>
                        <p>
                            {% blocktrans trimmed %}
                                The bank details are as follows:
                            {% endblocktrans %}
                        </p>

                        <p>
                            IBAN : FR76 1027 8065 0000 0206 4290 127<br>
                            BIC : CMCIFR2A
                        </p>

                        <p>
                            {% blocktrans trimmed %}
                                Once your payment done, please send us a proof of your transfer using the below form.
                                The validation of your payment will then be done manually, within a few days.
                            {% endblocktrans %}
                        </p>

                        <form id="bank-transfer-form" method="post" enctype="multipart/form-data">
                            {% csrf_token %}
                            {{ bank_transfer_form|crispy }}
                            <input type="submit" class="btn btn-primary" value="{% trans "Submit" %}" />
                        </form>
                    </div>

                    <div class="tab-pane fade" id="scholarship" role="tabpanel" aria-labelledby="scholarship-tab">
                        <p>
                            {% blocktrans trimmed %}
                                The tournament is free for you if you have a scholarship. However, you must send us a
                                proof of your scholarship. You can do this using the below form.
                            {% endblocktrans %}
                        </p>

                        <form id="scholarship-form" method="post" enctype="multipart/form-data">
                            {% csrf_token %}
                            {{ scholarship_form|crispy }}
                            <input type="submit" class="btn btn-primary" value="{% trans "Submit" %}" />
                        </form>
                    </div>

                    <div class="tab-pane fade" id="other" role="tabpanel" aria-labelledby="other-tab">
                        <p>
                            {% blocktrans trimmed %}
                                If you want to use another payment method, please contact the tournament organizers
                                first. Then, if you need to send a proof or your payment, you can use the below form.
                            {% endblocktrans %}
                        </p>

                        <form id="other-form" method="post" enctype="multipart/form-data">
                            {% csrf_token %}
                            {{ other_form|crispy }}
                            <input type="submit" class="btn btn-primary" value="{% trans "Submit" %}" />
                        </form>
                    </div>
                </div>
            </div>
        </div>
    {% else %}
        {% if user.registration.is_volunteer %}
            <form method="post"  enctype="multipart/form-data">
                <div id="form-content">
                    {% csrf_token %}
                    {{ form|crispy }}
                </div>
                <button class="btn btn-primary" type="submit">{% trans "Update" %}</button>
            </form>
        {% else %}
            {% if payment.type == 'helloasso' %}
                {% if payment.valid is True %}
                    <div class="alert alert-success">
                        {% with order=payment.get_checkout_intent.order %}
                            {% trans "Your payment by credit card via Hello Asso is successfully validated." %}
                            {% trans "The paid amount is" %} {% widthratio order.amount.total 100 1 %} €.
                            {% if grouped %}
                                {% trans "It includes the registrations of all members of the team." %}
                            {% endif %}
                            {% trans "The payer was " %} {{ order.payer.firstName }} {{ order.payer.lastName }}.
                            {% trans "The payment was done on" %} {{ order.date }}.
                        {% endwith %}
                    </div>
                {% elif payment.valid is None %}
                    <div class="alert alert-warning">
                        {% trans "The payment by credit card via Hello Asso is pending validation." %}
                        {% trans "It should takes only few minutes. If it takes longer, please contact us." %}
                    </div>
                {% endif %}
            {% else %}
                {% if payment.valid is True %}
                    <div class="alert alert-success">
                        {% trans "Your payment is successfully validated by the organizers." %}
                        <ul>
                            <li>{% trans "Type:" %} {{ payment.get_type_display }}</li>
                            <li>
                                {% trans "Amount:" %} {{ payment.amount }} €
                                {% if payment.grouped %}
                                    ({% trans "It includes the registrations of all members of the team." %})
                                {% endif %}
                            </li>
                            {% if payment.receipt %}
                                <li>
                                    {% trans "Receipt:" %}
                                    <a href="{{ payment.receipt.url }}"><i class="fas fa-download"></i> {% trans "Download" %}</a>
                                </li>
                            {% endif %}
                            {% if payment.additional_information %}
                                <li>{% trans "Additional information:" %} {{ payment.additional_information }}</li>
                            {% endif %}
                        </ul>
                    </div>
                {% elif payment.valid is None %}
                    <div class="alert alert-warning">
                        {% trans "Your payment is pending validation from the organizers." %}
                        <ul>
                            <li>{% trans "Type:" %} {{ payment.get_type_display }}</li>
                            <li>
                                {% trans "Amount:" %} {{ payment.amount }} €
                                {% if payment.grouped %}
                                    ({% trans "It includes the registrations of all members of the team." %})
                                {% endif %}
                            </li>
                            {% if payment.receipt %}
                                <li>
                                    {% trans "Receipt:" %}
                                    <a href="{{ payment.receipt.url }}"><i class="fas fa-download"></i> {% trans "Download" %}</a>
                                </li>
                            {% endif %}
                            {% if payment.additional_information %}
                                <li>{% trans "Additional information:" %} {{ payment.additional_information }}</li>
                            {% endif %}
                        </ul>
                    </div>
                {% endif %}
            {% endif %}
        {% endif %}
    {% endif %}
{% endblock content %}

{% block extrajavascript %}
    <script>
        document.addEventListener('DOMContentLoaded', () => {
          if (document.location.hash) {
            // Open the tab of the tournament that is present in the hash
            document.querySelectorAll('button[data-bs-toggle="tab"]').forEach(elem => {
              if ('#' + elem.getAttribute('aria-controls') === document.location.hash.toLowerCase()) {
                elem.click()
              }
            })
          }

          // When a tab is opened, add the tournament name in the hash
          document.querySelectorAll('button[data-bs-toggle="tab"]').forEach(
            elem => elem.addEventListener(
              'click', () => document.location.hash = '#' + elem.getAttribute('aria-controls')))
        })

        function copyToClipboard(text) {
          const copyIcon = document.getElementById('copyIcon')
          if (navigator.clipboard) {
            navigator.clipboard.writeText(text).then(() => {
                const tooltip = bootstrap.Tooltip.getOrCreateInstance(copyIcon)
                tooltip.setContent('Copied!')
                tooltip.show()
              }
            )
          } else {
            const input = document.createElement('input')
            input.value = text
            document.body.appendChild(input)
            input.select()
            document.execCommand('copy')
            document.body.removeChild(input)
            const tooltip = bootstrap.Tooltip.getOrCreateInstance(copyIcon)
            tooltip.enable()
            tooltip.show()
            setTimeout(() => {tooltip.disable(); tooltip.hide()}, 2000)
          }
        }
    </script>
{% endblock %}
