{% extends 'Admin/admin.html.twig' %}

{% block title %}{{ 'Gestion des coupons'|trans }}{% endblock %}

{% block body %}
<div class="card shadow mb-4">
    <div class="card-header py-3">
        <h6 class="m-0 font-weight-bold text-primary">{{ 'Créer un coupon'|trans }}</h6>
    </div>
    <div class="card-body">
	{% for label, messages in app.flashes %}
    {% for message in messages %}
        <div class="alert alert-{{ label }} mt-2">
            {{ message }}
        </div>
    {% endfor %}
{% endfor %}
        <form method="post" action="{{ path('admin.coupons.create') }}">
            <div class="form-group">
                <label for="code">Code</label>
                <input type="text" name="code" class="form-control" required>
            </div>

            <div class="form-group">
                <label for="description">Description</label>
                <input type="text" name="description" class="form-control">
            </div>
			
			<div class="form-group">
    <label for="groups">Groupes</label>
    <input type="text" name="groups" id="groups" class="form-control" placeholder="Ex: VIP,ALL,NOOB">
</div>

            <div class="form-group">
                <label for="type">Type de récompense</label>
                <select name="type" class="form-control">
                    <option value="item">Objet</option>
                    <option value="money">Argent</option>
                </select>
            </div>

            <div class="form-group">
                <label for="value">Objet (si type = item)</label>
               <select name="value" class="form-control">
    <option value="" disabled selected>Rechercher un objet...</option>
    {% for item in items %}
        <option value="{{ item.id }}">{{ item.name }}</option>
    {% endfor %}
</select>
            </div>

            <div class="form-group">
                <label for="quantity">Quantité</label>
                <input type="number" name="quantity" value="1" min="1" class="form-control">
            </div>

            <div class="form-group">
                <label for="global">Type de code</label>
                <select name="global" class="form-control">
                    <option value="1">Global – utilisable une fois par chaque joueur</option>
                    <option value="0">Unique – utilisable une seule fois par un joueur</option>
                </select>
            </div>

            <button type="submit" class="btn btn-success">Créer le code</button>
        </form>
    </div>
</div>

<div class="card shadow mb-4 mt-4">
    <div class="card-header py-3">
        <h6 class="m-0 font-weight-bold text-primary">Codes actifs</h6>
    </div>
    <div class="card-body">
        <div class="table-responsive">
            <table class="table table-striped">
                <thead>
                    <tr>
                        <th>Code</th>
                        <th>Description</th>
                        <th>Type</th>
                        <th>Valeur</th>
                        <th>Quantité</th>
                        <th>Type de code</th>
                        <th>Groupes</th>
                        <th>Date création</th>
                        <th>Action</th>
                    </tr>
                </thead>
                <tbody>
                {% for code in activeCodes %}
                    <tr>
                        <td>{{ code.code }}</td>
                        <td>{{ code.description }}</td>
                        <td>
                            {% if code.type == 'item' %}
                                Item
                            {% elseif code.type == 'money' %}
                                Magic Coin
                            {% else %}
                                {{ code.type }}
                            {% endif %}
                        </td>
<td>
    {% if code.type == 'money' %}
        Pas d'objet (Magic Coin)
    {% elseif code.type == 'item' %}
        {{ code.item_name ?? code.value }}
    {% else %}
        {{ code.value }}
    {% endif %}
</td>
                        <td>{{ code.quantity }}</td>
                        <td>{{ code.global ? 'Global (une fois par joueur)' : 'Unique (une fois en tout)' }}</td>
                        <td>{{ code.groups }}</td>
                        <td>{{ code.created_at|date('d/m/Y H:i') }}</td>
                        <td>
                            <form method="post" action="{{ path('admin_coupon_delete', { id: code.id }) }}"
                                  onsubmit="return confirm('Supprimer ce code ?');">
                                <input type="hidden" name="_token" value="{{ csrf_token('delete_coupon_' ~ code.id) }}">
                                <button class="btn btn-danger btn-sm">
                                    <i class="fas fa-trash-alt"></i>
                                </button>
                            </form>
                        </td>
                    </tr>
                {% else %}
                    <tr>
                        <td colspan="9" class="text-center">Aucun code actif.</td>
                    </tr>
                {% endfor %}
                </tbody>
            </table>
        </div>
    </div>
</div>

<div class="card shadow mb-4 mt-4">
    <div class="card-header py-3">
        <h6 class="m-0 font-weight-bold text-primary">Codes utilisés</h6>
    </div>
    <div class="card-body">
        <div class="table-responsive">
            <table class="table table-striped">
<thead>
    <tr>
        <th>Code</th>
        <th>Description</th>
        <th>Type</th>
        <th>Valeur</th>
        <th>Quantité</th>
        <th>Type de code</th>
        <th>Groupes</th>
        <th>Utilisateur</th>
        <th>Personnage</th>
        <th>Date</th>
    </tr>
</thead>
<tbody>
    {% for usage in codeUsages %}
        <tr class="text-muted">
            <td>{{ usage.coupon_code }}</td>
            <td>
                {# Optionnel : afficher la description si tu la charges dans la requête, sinon supprimer cette colonne #}
                -
            </td>
            <td>
                {% if usage.type == 'item' %}
                    Item
                {% elseif usage.type == 'money' %}
                    Magic Coin
                {% else %}
                    {{ usage.type }}
                {% endif %}
            </td>
<td>
    {% if usage.type == 'money' %}
        {{ usage.value }} (Magic Coin)
    {% elseif usage.type == 'item' %}
        {{ usage.item_name ?? usage.value }}
    {% else %}
        {{ usage.value }}
    {% endif %}
</td>
            <td>{{ usage.quantity }}</td>
            <td>{{ usage.global ? 'Global (une fois par joueur)' : 'Unique (une fois en tout)' }}</td>
            <td>{{ usage.groups }}</td>
            <td>{{ usage.account_name }}</td>
            <td>{{ usage.character_name ?? '—' }}</td>
            <td>{{ usage.date|date('d/m/Y H:i') }}</td>
        </tr>
    {% else %}
        <tr>
            <td colspan="10" class="text-center">Aucune utilisation de code pour le moment.</td>
        </tr>
    {% endfor %}
</tbody>
            </table>
        </div>
    </div>
</div>

{% block javascripts %}
    {{ parent() }}
    <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
    <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
	<link href="https://cdn.jsdelivr.net/npm/tom-select@2.2.2/dist/css/tom-select.bootstrap5.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/tom-select@2.2.2/dist/js/tom-select.complete.min.js"></script>
<script>
document.addEventListener("DOMContentLoaded", function () {
    const valueSelect = document.querySelector('select[name="value"]');
    const typeSelect = document.querySelector('select[name="type"]');
    const valueGroup = valueSelect.closest('.form-group');

    const tom = new TomSelect(valueSelect, {
    create: false,
    placeholder: "Rechercher un objet...",
    allowEmptyOption: true
});

    function toggleValueField() {
        if (typeSelect.value === 'money') {
            valueGroup.style.display = 'none';
            tom.setValue('1');
        } else {
            valueGroup.style.display = 'block';
            if (!tom.getValue()) {
                tom.setValue(valueSelect.querySelector('option:not([value="1"])')?.value || '1');
            }
        }
    }

    typeSelect.addEventListener('change', toggleValueField);
    toggleValueField(); // Appel initial
});
</script>

{% endblock %}
{% endblock %}