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

{% block extrastyle %}
<style>
  @import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;600;700;900&display=swap');
  @keyframes pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.02); }
  }

  @keyframes glow {
    0%, 100% { 
      box-shadow: 0 0 20px rgba(111, 66, 193, 0.4), 
                  0 0 30px rgba(13, 202, 240, 0.3),
                  0 0 40px rgba(232, 62, 140, 0.2); 
    }
    50% { 
      box-shadow: 0 0 30px rgba(111, 66, 193, 0.6), 
                  0 0 50px rgba(13, 202, 240, 0.5),
                  0 0 70px rgba(232, 62, 140, 0.4); 
    }
  }

  @keyframes slideInUp {
    from {
      opacity: 0;
      transform: translateY(40px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  .purchase-slots-container {
    background: radial-gradient(ellipse at center, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
    min-height: 100vh;
    padding: 2rem 0;
    color: #ffffff;
    position: relative;
    overflow-x: hidden;
    font-family: 'Orbitron', sans-serif;
  }

  .purchase-slots-container::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: 
      radial-gradient(2px 2px at 20px 30px, rgba(255,255,255,0.1), transparent),
      radial-gradient(2px 2px at 40px 70px, rgba(255,255,255,0.1), transparent),
      radial-gradient(1px 1px at 90px 40px, rgba(255,255,255,0.1), transparent);
    background-repeat: repeat;
    background-size: 200px 100px;
    animation: sparkle 20s linear infinite;
    z-index: 0;
  }

  @keyframes sparkle {
    0% { transform: translateY(0px); }
    100% { transform: translateY(-100px); }
  }

  .purchase-content {
    position: relative;
    z-index: 1;
  }

  .gamer-card {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.05) 100%);
    backdrop-filter: blur(15px);
    border: 2px solid rgba(111, 66, 193, 0.4);
    border-radius: 25px;
    padding: 2rem;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3),
                0 0 20px rgba(111, 66, 193, 0.2),
                0 0 40px rgba(13, 202, 240, 0.1);
    animation: slideInUp 0.6s ease-out;
    transition: all 0.3s ease;
  }

  .gamer-card:hover {
    border-color: rgba(13, 202, 240, 0.6);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4),
                0 0 30px rgba(111, 66, 193, 0.4),
                0 0 60px rgba(13, 202, 240, 0.3);
    transform: translateY(-5px);
  }

  .gamer-card-header {
    background: linear-gradient(135deg, rgba(111, 66, 193, 0.3) 0%, rgba(232, 62, 140, 0.3) 100%);
    border: none;
    border-radius: 20px 20px 0 0;
    padding: 1.5rem;
    margin: -2rem -2rem 2rem -2rem;
    border-bottom: 2px solid rgba(13, 202, 240, 0.3);
  }

  .gamer-card-header h5 {
    color: #ffffff;
    font-weight: 700;
    font-size: 1.5rem;
    text-shadow: 0 0 10px rgba(13, 202, 240, 0.5),
                 0 0 20px rgba(111, 66, 193, 0.3);
    margin: 0;
    font-family: 'Orbitron', sans-serif;
  }

  .gamer-card-header i {
    color: #0dcaf0;
    text-shadow: 0 0 10px rgba(13, 202, 240, 0.8);
  }

  .stat-box-gamer {
    background: linear-gradient(135deg, rgba(26, 26, 46, 0.8) 0%, rgba(22, 33, 62, 0.8) 100%);
    border: 2px solid rgba(111, 66, 193, 0.3);
    border-radius: 15px;
    padding: 1.5rem;
    text-align: center;
    transition: all 0.3s ease;
    animation: pulse 3s ease-in-out infinite;
  }

  .stat-box-gamer:nth-child(1) { animation-delay: 0s; }
  .stat-box-gamer:nth-child(2) { animation-delay: 0.5s; }
  .stat-box-gamer:nth-child(3) { animation-delay: 1s; }

  .stat-box-gamer:hover {
    border-color: rgba(13, 202, 240, 0.6);
    box-shadow: 0 0 20px rgba(13, 202, 240, 0.4);
    transform: translateY(-5px);
  }

  .stat-label-gamer {
    color: #94a3b8;
    font-size: 0.85rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 0.5rem;
    font-family: 'Orbitron', sans-serif;
  }

  .stat-value-gamer {
    font-size: 2.5rem;
    font-weight: 900;
    font-family: 'Orbitron', sans-serif;
    text-shadow: 0 0 15px currentColor;
  }

  .stat-value-gamer.text-primary {
    color: #0dcaf0 !important;
    text-shadow: 0 0 10px rgba(13, 202, 240, 0.8),
                 0 0 20px rgba(13, 202, 240, 0.6),
                 0 0 30px rgba(13, 202, 240, 0.4),
                 0 0 40px rgba(13, 202, 240, 0.2) !important;
  }

  .stat-value-gamer.text-warning {
    color: #ffc107 !important;
    text-shadow: 0 0 10px rgba(255, 193, 7, 0.8),
                 0 0 20px rgba(255, 193, 7, 0.6),
                 0 0 30px rgba(255, 193, 7, 0.4),
                 0 0 40px rgba(255, 193, 7, 0.2) !important;
  }

  .stat-value-gamer.text-success {
    color: #10b981 !important;
    text-shadow: 0 0 10px rgba(16, 185, 129, 0.8),
                 0 0 20px rgba(16, 185, 129, 0.6),
                 0 0 30px rgba(16, 185, 129, 0.4),
                 0 0 40px rgba(16, 185, 129, 0.2) !important;
  }

  .alert-gamer {
    background: linear-gradient(135deg, rgba(13, 202, 240, 0.15) 0%, rgba(111, 66, 193, 0.15) 100%);
    border: 2px solid rgba(13, 202, 240, 0.4);
    border-radius: 15px;
    padding: 1.25rem;
    color: #cbd5e1;
    backdrop-filter: blur(10px);
  }

  .alert-gamer i {
    color: #0dcaf0;
    text-shadow: 0 0 10px rgba(13, 202, 240, 0.5);
  }

  .alert-gamer strong {
    color: #ffffff;
    font-family: 'Orbitron', sans-serif;
  }

  .wallet-info {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.15) 0%, rgba(5, 150, 105, 0.15) 100%);
    border: 2px solid rgba(16, 185, 129, 0.4);
    border-radius: 15px;
    padding: 1.25rem;
    color: #cbd5e1;
    backdrop-filter: blur(10px);
  }

  .wallet-info i {
    color: #10b981;
    text-shadow: 0 0 10px rgba(16, 185, 129, 0.5);
  }

  .wallet-info strong {
    color: #ffffff;
    font-family: 'Orbitron', sans-serif;
  }

  .form-label-gamer {
    color: #cbd5e1;
    font-family: 'Orbitron', sans-serif;
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.85rem;
    letter-spacing: 1px;
    margin-bottom: 0.75rem;
  }

  .form-select-gamer {
    background: rgba(26, 26, 46, 0.8) !important;
    color: #ffffff !important;
    border: 2px solid rgba(111, 66, 193, 0.4) !important;
    border-radius: 12px !important;
    padding: 0.875rem 1.25rem !important;
    font-size: 1rem !important;
    font-family: 'Orbitron', sans-serif !important;
    transition: all 0.3s ease !important;
  }

  .form-select-gamer:focus {
    background: rgba(26, 26, 46, 0.9) !important;
    border-color: #0dcaf0 !important;
    box-shadow: 0 0 20px rgba(13, 202, 240, 0.4), 0 0 30px rgba(111, 66, 193, 0.3) !important;
    color: #ffffff !important;
  }

  .form-select-gamer option {
    background: #1a1a2e;
    color: #ffffff;
  }

  .text-muted-gamer {
    color: #94a3b8 !important;
    font-family: 'Orbitron', sans-serif;
    font-size: 0.85rem;
    margin-top: 0.5rem;
    display: block;
  }

  .btn-gamer-primary {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    border: none;
    border-radius: 15px;
    padding: 1rem 2rem;
    color: #ffffff;
    font-weight: 700;
    font-size: 1.1rem;
    font-family: 'Orbitron', sans-serif;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(16, 185, 129, 0.3);
    width: 100%;
  }

  .btn-gamer-primary:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(16, 185, 129, 0.5);
    background: linear-gradient(135deg, #059669 0%, #047857 100%);
    color: #ffffff;
  }

  .btn-gamer-secondary {
    background: transparent;
    border: 2px solid rgba(111, 66, 193, 0.4);
    border-radius: 15px;
    padding: 0.75rem 1.5rem;
    color: #cbd5e1;
    font-weight: 600;
    font-family: 'Orbitron', sans-serif;
    transition: all 0.3s ease;
  }

  .btn-gamer-secondary:hover {
    border-color: rgba(13, 202, 240, 0.6);
    color: #0dcaf0;
    box-shadow: 0 0 20px rgba(13, 202, 240, 0.3);
    transform: translateY(-2px);
  }

  .history-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
  }

  .history-item {
    background: linear-gradient(135deg, rgba(26, 26, 46, 0.6) 0%, rgba(22, 33, 62, 0.6) 100%);
    border: 2px solid rgba(111, 66, 193, 0.3);
    border-radius: 15px;
    padding: 1.25rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
  }

  .history-item:hover {
    border-color: rgba(13, 202, 240, 0.5);
    box-shadow: 0 0 20px rgba(13, 202, 240, 0.2);
    transform: translateX(5px);
  }

  .history-icon {
    width: 50px;
    height: 50px;
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(111, 66, 193, 0.3) 0%, rgba(232, 62, 140, 0.3) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border: 2px solid rgba(13, 202, 240, 0.3);
  }

  .history-icon i {
    color: #0dcaf0;
    font-size: 1.25rem;
    text-shadow: 0 0 10px rgba(13, 202, 240, 0.5);
  }

  .history-content {
    flex: 1;
    min-width: 0;
  }

  .history-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
    flex-wrap: wrap;
    gap: 0.5rem;
  }

  .history-title {
    color: #ffffff;
    font-weight: 700;
    font-family: 'Orbitron', sans-serif;
    font-size: 1rem;
  }

  .history-date {
    color: #94a3b8;
    font-size: 0.85rem;
    font-family: 'Orbitron', sans-serif;
  }

  .history-details {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
  }

  .history-price {
    color: #10b981;
    font-weight: 700;
    font-family: 'Orbitron', sans-serif;
    font-size: 1.1rem;
    text-shadow: 0 0 10px rgba(16, 185, 129, 0.5);
  }

  .history-notes {
    color: #cbd5e1;
    font-size: 0.85rem;
    font-style: italic;
  }

  .empty-history {
    text-align: center;
    padding: 3rem 1rem;
    color: #94a3b8;
  }

  .empty-history i {
    color: rgba(111, 66, 193, 0.5);
    margin-bottom: 1rem;
  }

  .empty-history p {
    font-family: 'Orbitron', sans-serif;
    font-size: 1rem;
    margin: 0;
  }
</style>
{% endblock extrastyle %}

{% block breadcrumbs %}
<li class="breadcrumb-item"><a href="{% url 'dashboard' %}">{% trans "Dashboard" %}</a></li>
<li class="breadcrumb-item"><a href="{% url 'server:account_dashboard' %}">{% trans "Conta L2" %}</a></li>
<li class="breadcrumb-item active" aria-current="page">{% trans "Comprar Slots de Vinculação" %}</li>
{% endblock breadcrumbs %}

{% block page_header %}
<h5 class="display-5">{% trans "Comprar Slots de Vinculação" %}</h5>
{% endblock page_header %}

{% block content %}
<div class="purchase-slots-container">
  <div class="container purchase-content">
    <div class="row justify-content-center">
      <div class="col-lg-8">
        <div class="gamer-card">
          <div class="gamer-card-header">
            <h5 class="mb-0">
              <i class="fas fa-link me-2"></i>
              {% trans "Slots de Vinculação de Contas" %}
            </h5>
          </div>
          
          <div class="row mb-4">
            <div class="col-md-4 mb-3">
              <div class="stat-box-gamer">
                <div class="stat-label-gamer">{% trans "Slots Totais" %}</div>
                <div class="stat-value-gamer text-primary">{{ total_slots }}</div>
              </div>
            </div>
            <div class="col-md-4 mb-3">
              <div class="stat-box-gamer">
                <div class="stat-label-gamer">{% trans "Slots Usados" %}</div>
                <div class="stat-value-gamer text-warning">{{ used_slots }}</div>
              </div>
            </div>
            <div class="col-md-4 mb-3">
              <div class="stat-box-gamer">
                <div class="stat-label-gamer">{% trans "Slots Disponíveis" %}</div>
                <div class="stat-value-gamer text-success">{{ available_slots }}</div>
              </div>
            </div>
          </div>

          <div class="alert-gamer mb-4">
            <i class="fas fa-info-circle me-2"></i>
            <strong>{% trans "Como funciona:" %}</strong><br>
            {% blocktrans %}
            Por padrão, cada conta pode vincular até <strong>3 contas</strong> do Lineage 2 gratuitamente.
            A partir da 4ª conta, é necessário comprar slots adicionais. Cada slot permite vincular uma conta extra.
            {% endblocktrans %}
          </div>

          {% if wallet %}
          <div class="wallet-info mb-4">
            <i class="fas fa-wallet me-2"></i>
            <strong>{% trans "Saldo disponível:" %}</strong> R$ {{ wallet.saldo|floatformat:2 }}
          </div>
          {% endif %}

          <form method="post" class="mt-4">
            {% csrf_token %}
            <div class="mb-4">
              <label for="quantity" class="form-label-gamer">{% trans "Quantidade de Slots" %}</label>
              <select class="form-select form-select-gamer" name="quantity" id="quantity" required>
                <option value="1">1 slot - R$ {{ prices.1|floatformat:2 }}</option>
                <option value="2">2 slots - R$ {{ prices.2|floatformat:2 }}</option>
                <option value="3">3 slots - R$ {{ prices.3|floatformat:2 }}</option>
                <option value="5">5 slots - R$ {{ prices.5|floatformat:2 }}</option>
                <option value="10">10 slots - R$ {{ prices.10|floatformat:2 }}</option>
              </select>
              <small class="text-muted-gamer">{% trans "Preço por slot: R$" %} {{ slot_price|floatformat:2 }}</small>
            </div>

            <div class="d-grid mb-4">
              <button type="submit" class="btn btn-gamer-primary">
                <i class="fas fa-shopping-cart me-2"></i>
                {% trans "Comprar Slots" %}
              </button>
            </div>
          </form>

          <div class="text-center mb-4">
            <a href="{% url 'server:account_dashboard' %}" class="btn btn-gamer-secondary">
              <i class="fas fa-arrow-left me-2"></i>
              {% trans "Voltar ao Dashboard" %}
            </a>
          </div>
        </div>

        <!-- Histórico de Compras -->
        <div class="gamer-card mt-4">
          <div class="gamer-card-header">
            <h5 class="mb-0">
              <i class="fas fa-history me-2"></i>
              {% trans "Histórico de Compras" %}
            </h5>
          </div>
          
          <div class="p-3">
            {% if purchase_history %}
            <div class="history-list">
              {% for purchase in purchase_history %}
              <div class="history-item">
                <div class="history-icon">
                  <i class="fas fa-shopping-cart"></i>
                </div>
                <div class="history-content">
                  <div class="history-header">
                    <span class="history-title">{% trans "Compra de" %} {{ purchase.slots_purchased }} {% trans "slot(s)" %}</span>
                    <span class="history-date">{{ purchase.purchase_date|date:"d/m/Y H:i" }}</span>
                  </div>
                  <div class="history-details">
                    <span class="history-price">R$ {{ purchase.purchase_price|floatformat:2 }}</span>
                    {% if purchase.notes %}
                    <span class="history-notes">{{ purchase.notes }}</span>
                    {% endif %}
                  </div>
                </div>
              </div>
              {% endfor %}
            </div>
            {% else %}
            <div class="empty-history">
              <i class="fas fa-inbox fa-3x mb-3"></i>
              <p>{% trans "Nenhuma compra realizada ainda." %}</p>
            </div>
            {% endif %}
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
{% endblock %}