{% extends 'Application/' ~ settings.get("theme") ~ '/base.html.twig' %}

{% block title %}{{ 'Polecenia'|trans }}{% endblock %}

{% block body %}
<h1 class="mb-4">{{ 'System Poleceń'|trans }}</h1>

<div id="refer-background">
    <div id="refer-logo"><img src="../images/refer.png" width="420px"></div>

    <div id="refer-input">
        {% for label, messages in app.flashes %}
            {% for message in messages %}
                <div id="refer-{{ label }}">
                    <font color="white">{{ message }}</font>
                </div>
            {% endfor %}
        {% endfor %}

        <div class="form-group mb-4">
            <label>{{ 'Twój kod polecający'|trans }}</label>
            <input type="text" class="form-control" readonly value="{{ app.user.referralCode }}">
        </div>

        <div class="form-group mb-4">
            <label>{{ 'Link polecający do udostępnienia'|trans }}</label>
            <input type="text" class="form-control" readonly value="{{ app.request.scheme ~ '://' ~ app.request.host ~ '/pl/register?ref=' ~ app.user.referralCode }}">
        </div>

        <div class="form-group mb-4">
            <label>{{ 'Twoi zaproszeni gracze'|trans }}</label>
            {% if filleuls is empty %}
                <p class="text-muted">{{ 'Brak zaproszonych graczy.'|trans }}</p>
            {% else %}
                <ul class="list-group">
                    {% for f in filleuls %}
                        <li class="list-group-item d-flex justify-content-between align-items-center">
                            {{ f.name }} – Poziom {{ f.level }}
                            <span>
                                <span class="badge bg-{{ f.level >= 20 ? 'success' : 'danger' }} me-1">
                                    {{ f.level >= 20 ? 'Poziom OK' : 'Poziom za niski' }}
                                </span>
                                <span class="badge bg-{{ f.hasPurchased ? 'success' : 'danger' }}">
                                    {{ f.hasPurchased ? 'Zakup zatwierdzony' : 'Brak zakupu' }}
                                </span>
                            </span>
                        </li>
                    {% endfor %}
                </ul>
            {% endif %}
        </div>

        {# Nagrody dla polecającego (referrer) #}
        <div class="form-group mb-4">
            <label>{{ 'Twoje nagrody za polecenia'|trans }}</label>
            <div class="row">
                {% for palier in 1..5 %}
                    <div class="col-md-6 mb-2">
                        <div class="card">
                            <div class="card-body">
                                <strong>{{ 'Próg'|trans }} {{ palier }}</strong><br>
                                <small>{{ paliers[palier].description }}</small>

                                <div class="mt-2">
                                    {% for reward in paliers[palier].rewards %}
                                        <span class="badge bg-info">{{ reward }}</span>
                                    {% endfor %}
                                </div>

                                <div class="mt-3">
                                    {% if paliers[palier].claimed %}
                                        <button class="btn btn-success btn-sm" disabled>{{ 'Nagroda odebrana'|trans }}</button>
                                    {% elseif paliers[palier].reached %}
                                        <form method="post">
                                            <input type="hidden" name="milestone" value="{{ palier }}">
                                            {% if userCharacters|length > 0 %}
                                                <div class="mb-2">
                                                    <label for="character-{{ palier }}">{{ 'Wybierz postać'|trans }}</label>
                                                    <select style="width:200px" name="character" id="character-{{ palier }}" class="form-control" required>
                                                        {% for char in userCharacters %}
                                                            <option value="{{ char.Id }}">{{ char.Name }} (Poz {{ char.Level }})</option>
                                                        {% endfor %}
                                                    </select>
                                                </div>
                                            {% endif %}
                                            <button type="submit" class="btn btn-primary btn-sm">{{ 'Odbierz'|trans }}</button>
                                        </form>
                                    {% else %}
                                        <button class="btn btn-danger btn-sm" disabled>{{ 'Nie można jeszcze odebrać'|trans }}</button>
                                    {% endif %}
                                </div>
                            </div>
                        </div>
                    </div>
                {% endfor %}
            </div>
        </div>

        {# Nagroda dla poleconego (filleul) #}
        <div class="form-group mb-4">
            <label>{{ 'Nagroda za bycie poleconym'|trans }}</label>
            <ul class="list-group mb-2">
                <li class="list-group-item d-flex justify-content-between align-items-center">
                    {{ app.user.username }} – {{ 'Twój status'|trans }}
                    <span>
                        <span class="badge bg-{{ filleulEligible ? 'success' : 'danger' }} me-1">
                            {{ filleulEligible ? 'Poziom OK' : 'Brak postaci na 20 poz.' }}
                        </span>
                        <span class="badge bg-{{ hasPurchased ? 'success' : 'danger' }}">
                            {{ hasPurchased ? 'Zakup zatwierdzony' : 'Brak zakupu' }}
                        </span>
                    </span>
                </li>
            </ul>
            <div class="col-md-6 mb-2 mx-auto">
                <div class="card">
                    <div class="card-body text-start">
                        <strong>{{ 'Nagroda dla poleconego'|trans }}</strong><br>
                        <small>{{ 'Odblokowane na 20 poziomie + pierwszy zakup (5€ lub więcej)'|trans }}</small>

                        <div class="mt-2 mb-2">
                            <span class="badge bg-info">300 Magic Coins</span><br>
                            <span class="badge bg-info">1 SunScroll</span><br>
                            <span class="badge bg-info">1 SunStone</span><br>
                            <span class="badge bg-info">Tytuł: <b>Wanderer Initiate</b></span>
                        </div>

                        <div class="mt-3">
                            {% if filleulRewardClaimed %}
                                <button class="btn btn-success btn-sm" disabled>{{ 'Nagroda odebrana'|trans }}</button>
                            {% elseif filleulEligible and hasPurchased %}
                                <form method="post">
                                    <input type="hidden" name="milestone" value="0">
                                    <label for="character">{{ 'Wybierz postać'|trans }}</label>
                                    <div class="mb-2">
                                        <select name="character" style="width:200px" class="form-control" required>
                                            {% for char in userCharacters %}
                                                <option value="{{ char.Id }}">{{ char.Name }} (Poz {{ char.Level }})</option>
                                            {% else %}
                                                <option disabled>{{ 'Brak dostępnych postaci'|trans }}</option>
                                            {% endfor %}
                                        </select>
                                    </div>
                                    <button type="submit" class="btn btn-primary btn-sm">{{ 'Odbierz moją nagrodę'|trans }}</button>
                                </form>
                            {% else %}
                                <button class="btn btn-danger btn-sm" disabled>{{ 'Nie można jeszcze odebrać'|trans }}</button>
                            {% endif %}
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </div>
</div>
{% endblock %}