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

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

{% block body %}
<h1 class="mb-4">{{ 'Referral System'|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>{{ 'Your referral code'|trans }}</label>
            <input type="text" class="form-control" readonly value="{{ app.user.referralCode }}">
        </div>

        <div class="form-group mb-4">
            <label>{{ 'Referral link to share'|trans }}</label>
            <input type="text" class="form-control" readonly value="{{ app.request.scheme ~ '://' ~ app.request.host ~ '/en/register?ref=' ~ app.user.referralCode }}">
        </div>

        <div class="form-group mb-4">
            <label>{{ 'Your invited players'|trans }}</label>
            {% if filleuls is empty %}
                <p class="text-muted">{{ 'No invites yet.'|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 }} – Level {{ f.level }}
                            <span>
                                <span class="badge bg-{{ f.level >= 20 ? 'success' : 'danger' }} me-1">
                                    {{ f.level >= 20 ? 'Level OK' : 'Level too low' }}
                                </span>
                                <span class="badge bg-{{ f.hasPurchased ? 'success' : 'danger' }}">
                                    {{ f.hasPurchased ? 'Purchase validated' : 'No purchase' }}
                                </span>
                            </span>
                        </li>
                    {% endfor %}
                </ul>
            {% endif %}
        </div>

        {# Referral rewards (referrer) #}
        <div class="form-group mb-4">
            <label>{{ 'Your referral rewards'|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>{{ 'Tier'|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>{{ 'Reward claimed'|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 }}">{{ 'Choose a character'|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 }} (Lv {{ char.Level }})</option>
                                                        {% endfor %}
                                                    </select>
                                                </div>
                                            {% endif %}
                                            <button type="submit" class="btn btn-primary btn-sm">{{ 'Claim'|trans }}</button>
                                        </form>
                                    {% else %}
                                        <button class="btn btn-danger btn-sm" disabled>{{ 'Cannot claim yet'|trans }}</button>
                                    {% endif %}
                                </div>
                            </div>
                        </div>
                    </div>
                {% endfor %}
            </div>
        </div>

        {# Referral reward (filleul) #}
        <div class="form-group mb-4">
            <label>{{ 'Referral reward'|trans }}</label>
 <ul class="list-group mb-2">
                            <li class="list-group-item d-flex justify-content-between align-items-center">
                                {{ app.user.username }} – {{ 'Your status'|trans }}
                                <span>
                                    <span class="badge bg-{{ filleulEligible ? 'success' : 'danger' }} me-1">
                                        {{ filleulEligible ? 'Level OK' : 'No character lvl 20' }}
                                    </span>
                                    <span class="badge bg-{{ hasPurchased ? 'success' : 'danger' }}">
                                        {{ hasPurchased ? 'Purchase validated' : 'No purchase' }}
                                    </span>
                                </span>
                            </li>
                        </ul>
            <div class="col-md-6 mb-2 mx-auto">
                <div class="card">
                    <div class="card-body text-start">
                        <strong>{{ 'Filleul reward'|trans }}</strong><br>
                        <small>{{ 'Unlocked at level 20 + first purchase (5€ or more)'|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">Title : <b>Wanderer Initiate</b></span>
                        </div>

                       

                        <div class="mt-3">
                            {% if filleulRewardClaimed %}
                                <button class="btn btn-success btn-sm" disabled>{{ 'Reward claimed'|trans }}</button>
                            {% elseif filleulEligible and hasPurchased %}
                                <form method="post">
                                    <input type="hidden" name="milestone" value="0">
                                    <label for="character">{{ 'Choose a character'|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 }} (Lv {{ char.Level }})</option>
                                            {% else %}
                                                <option disabled>{{ 'No character available'|trans }}</option>
                                            {% endfor %}
                                        </select>
                                    </div>
                                    <button type="submit" class="btn btn-primary btn-sm">{{ 'Claim my reward'|trans }}</button>
                                </form>
                            {% else %}
                                <button class="btn btn-danger btn-sm" disabled>{{ 'Cannot claim yet'|trans }}</button>
                            {% endif %}
                        </div>
                    </div>
                </div>
            </div>
        </div>

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