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

{% block content %}
<div class="container mt-4">
    <h2>{% trans "Suas Caixas" %}</h2>
    <p class="text-muted">{% trans "Abaixo estão todas as caixas que você comprou e ainda não abriu." %}</p>

    {% if boxes %}
        <table class="table table-bordered table-striped mt-3">
            <thead>
                <tr>
                    <th>{% trans "ID" %}</th>
                    <th>{% trans "Tipo" %}</th>
                    <th>{% trans "Aberta?" %}</th>
                    <th>{% trans "Ação" %}</th>
                </tr>
            </thead>
            <tbody>
                {% for box in boxes %}
                    <tr>
                        <td>{{ box.id }}</td>
                        <td>{{ box.box_type.name }}</td>
                        <td>{{ box.opened|yesno:"Sim,Não" }}</td>
                        <td>
                            {% if not box.opened %}
                                <button onclick="openBoxAjax({{ box.id }})" class="btn btn-sm btn-success">
                                    {% trans "Abrir" %}
                                </button>
                            {% else %}
                                <span class="badge bg-secondary">{% trans "Aberta" %}</span>
                            {% endif %}
                        </td>
                    </tr>
                {% endfor %}
            </tbody>
        </table>
    {% else %}
        <p class="text-warning">{% trans "Você ainda não possui nenhuma caixa para abrir." %}</p>
    {% endif %}
</div>

{% block extrascripts %}
<script>
  function getCookie(name) {
    let cookieValue = null;
    if (document.cookie && document.cookie !== "") {
      const cookies = document.cookie.split(";");
      for (let cookie of cookies) {
        cookie = cookie.trim();
        if (cookie.startsWith(name + "=")) {
          cookieValue = decodeURIComponent(cookie.slice(name.length + 1));
          break;
        }
      }
    }
    return cookieValue;
  }

  function openBoxAjax(boxId) {
    const btn = event.target;
    const originalText = btn.innerHTML;
    
    btn.disabled = true;
    btn.innerHTML = '{% trans "Abrindo..." %}';
    
    const csrfToken = getCookie('csrftoken');
    const url = `/app/game/box/open-ajax/${boxId}/`;
    
    fetch(url, {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
        'X-CSRFToken': csrfToken,
        'X-Requested-With': 'XMLHttpRequest'
      }
    })
    .then(res => res.json())
    .then(data => {
      if (data.success) {
        window.location.href = data.redirect_url || '/app/game/box/result/';
      } else {
        alert(data.error || 'Erro ao abrir a caixa.');
        btn.innerHTML = originalText;
        btn.disabled = false;
      }
    })
    .catch(error => {
      console.error('Erro:', error);
      alert('Erro de conexão com o servidor.');
      btn.innerHTML = originalText;
      btn.disabled = false;
    });
  }
</script>
{% endblock %}