{% extends "fortunaisk/base.html" %}
{% load i18n %}

{% block page_title %}
    {% trans "Lotteries" %}
{% endblock page_title %}

{% block details %}
<div class="container mt-4">
    <div class="text-center mb-4">
        <h2 class="fw-bold">
            <i class="fas fa-gamepad me-2 text-primary"></i>
            {% trans "Current Lotteries" %}
        </h2>
        <p class="text-muted">
            {% trans "Discover all currently active lotteries. Good luck!" %}
        </p>
    </div>

    {% if active_lotteries %}
    <div class="d-flex flex-wrap justify-content-center gap-4">
        {% for info in active_lotteries %}
        <div class="card shadow-lg" style="width: 22rem;">
            <div class="card-header bg-primary text-white">
                <h5 class="mb-0 d-flex justify-content-between align-items-center">
                    <span>
                        <i class="fas fa-ticket-alt me-2"></i>
                        {{ info.lottery.lottery_reference }}
                    </span>
                    <!-- Bouton "Copy ID" ajouté ici -->
                    <button
                        class="btn btn-sm btn-light text-primary copy-id-btn"
                        data-copy="{{ info.lottery.lottery_reference }}"
                        aria-label="{% trans 'Copy ID' %}">
                        {% trans "Copy ID" %}
                    </button>
                </h5>
            </div>
            <div class="card-body">
                <p class="mb-2">
                    <strong>{% trans "Start Date" %}:</strong>
                    <i class="far fa-clock me-1"></i>
                    {{ info.lottery.start_date|date:"Y-m-d H:i" }}
                </p>
                <p class="mb-2">
                    <strong>{% trans "End Date" %}:</strong>
                    <i class="far fa-clock me-1"></i>
                    {{ info.lottery.end_date|date:"Y-m-d H:i" }}
                </p>
                <p class="mb-2">
                    <strong>{% trans "Ticket Price" %}:</strong>
                    <span class="text-warning fw-bold">
                        {{ info.lottery.ticket_price }} ISK
                    </span>
                </p>
                <p class="mb-2">
                    <strong>{% trans "Payment Receiver" %}:</strong>
                    <span class="text-primary fw-bold">
                        {{ info.corporation_name }}
                    </span>
                </p>
                <p class="mb-2">
                    <strong>{% trans "Number of Winners" %}:</strong>
                    <span class="badge bg-success">
                        {{ info.lottery.winner_count }}
                    </span>
                </p>
                <p class="mb-2">
                    <strong>{% trans "Max Tickets/User" %}:</strong>
                    {% if info.lottery.max_tickets_per_user %}
                        {{ info.lottery.max_tickets_per_user }}
                    {% else %}
                        {% trans "Unlimited" %}
                    {% endif %}
                    <small class="text-muted">
                        ( {% trans "You have" %} {{ info.user_ticket_count }} )
                    </small>
                </p>
                <hr>
                <div class="mt-3">
                    <h5 class="fw-bold">
                        <i class="fas fa-question-circle text-info me-2"></i>
                        {% trans "How to Participate" %}
                    </h5>
                    <p>
                        {{ info.instructions }}
                        <span class="ms-1"
                                data-bs-toggle="tooltip"
                                title="{% trans 'Send the ISK in-game via a corp wallet specifying the reference in the reason.' %}">
                            <i class="fas fa-info-circle"></i>
                        </span>
                    </p>
                    <p>
                        <strong>{% trans "Do you have a ticket" %}? </strong>
                        {% if info.has_ticket %}
                            <span class="badge bg-success ms-2">
                                {% trans "Yes" %}
                            </span>
                        {% else %}
                            <span class="badge bg-danger ms-2">
                                {% trans "No" %}
                            </span>
                        {% endif %}
                    </p>
                </div>
            </div>
            <div class="card-footer text-center text-muted">
                <small>
                    <i class="fas fa-hat-wizard me-1"></i>
                    {% trans "Good luck!" %}
                </small>
            </div>
        </div>
        {% endfor %}
    </div>
    {% else %}
    <div class="alert alert-warning text-center">
        <i class="fas fa-exclamation-circle alert-icon me-2"></i>
        {% trans "No lottery is currently available." %}
    </div>
    {% endif %}
</div>

<!-- Toast de confirmation ajouté ici -->
<div class="position-fixed bottom-0 end-0 p-3" style="z-index: 11">
    <div id="copyToast" class="toast align-items-center text-white bg-success border-0" role="alert" aria-live="assertive" aria-atomic="true">
        <div class="d-flex">
            <div class="toast-body">
                {% trans "ID copié dans le presse-papiers !" %}
            </div>
            <button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button>
        </div>
    </div>
</div>

<!-- Script JavaScript pour gérer la copie et les tooltips -->
<script>
    document.addEventListener('DOMContentLoaded', function () {
        // Initialiser les tooltips de Bootstrap
        var tooltipTriggerList = [].slice.call(
            document.querySelectorAll('[data-bs-toggle="tooltip"]')
        );
        var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
            return new bootstrap.Tooltip(tooltipTriggerEl);
        });

        // Sélectionner tous les boutons "Copy ID"
        const copyButtons = document.querySelectorAll('.copy-id-btn');
        const copyToastEl = document.getElementById('copyToast');
        const copyToast = new bootstrap.Toast(copyToastEl);

        copyButtons.forEach(function(button) {
            button.addEventListener('click', function() {
                const textToCopy = this.getAttribute('data-copy');

                // Utiliser l'API Clipboard pour copier le texte
                navigator.clipboard.writeText(textToCopy).then(() => {
                    // Afficher le toast de confirmation
                    copyToast.show();

                    // Changer temporairement le texte et le style du bouton
                    const originalText = button.textContent;
                    button.textContent = '{% trans "Copied!" %}';
                    button.classList.remove('btn-light', 'text-primary');
                    button.classList.add('btn-success');

                    // Réinitialiser après 2 secondes
                    setTimeout(() => {
                        button.textContent = '{% trans "Copy ID" %}';
                        button.classList.remove('btn-success');
                        button.classList.add('btn-light', 'text-primary');
                    }, 2000);
                }).catch(err => {
                    console.error('Échec de la copie : ', err);
                });
            });
        });
    });
</script>
{% endblock details %}
