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

{% block extrastyle %}
<style>
.manager-bg { 
    background: radial-gradient(ellipse at center, #0f172a 0%, #1a1a2e 50%, #0f0f1e 100%); 
    min-height: 100vh; 
    padding: 40px 0; 
    position: relative;
}
.manager-bg::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
        radial-gradient(circle at 20% 50%, rgba(245, 158, 11, 0.1) 0%, transparent 50%),
        radial-gradient(circle at 80% 80%, rgba(251, 191, 36, 0.1) 0%, transparent 50%);
    pointer-events: none;
}

.card-glow { 
    background: linear-gradient(145deg, rgba(26, 26, 46, 0.95) 0%, rgba(18, 18, 32, 0.95) 100%); 
    border: 1px solid rgba(245, 158, 11, 0.3); 
    border-radius: 16px; 
    box-shadow: 
        0 8px 32px rgba(0, 0, 0, 0.4),
        0 0 0 1px rgba(245, 158, 11, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);
}

.form-control, .form-select {
    background: rgba(30, 41, 59, 0.8);
    border: 1px solid rgba(245, 158, 11, 0.3);
    color: white;
    border-radius: 10px;
}

.form-control:focus, .form-select:focus {
    background: rgba(30, 41, 59, 0.95);
    border-color: #f59e0b;
    color: white;
    box-shadow: 0 0 0 0.2rem rgba(245, 158, 11, 0.25);
}

.form-label {
    color: white;
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.btn-action {
    background: linear-gradient(135deg, #f59e0b 0%, #fbbf24 100%);
    border: none;
    color: white;
    padding: 12px 24px;
    border-radius: 10px;
    font-weight: 600;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(245, 158, 11, 0.4);
}
.btn-action:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(245, 158, 11, 0.6);
    color: white;
}

.info-box {
    background: rgba(245, 158, 11, 0.1);
    border: 1px solid rgba(245, 158, 11, 0.3);
    border-radius: 10px;
    padding: 1rem;
    margin-bottom: 1.5rem;
    color: rgba(255, 255, 255, 0.9);
}
</style>
{% endblock %}

{% block content %}
<div class="manager-bg">
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-md-8">
                <div class="card card-glow">
                    <div class="card-header text-white">
                        <h3 class="mb-0">
                            <i class="bi bi-plus-circle me-2"></i>{% trans "Criar Nova Premiação" %}
                        </h3>
                    </div>
                    <div class="card-body">
                        <form method="post" id="reward-form">
                            {% csrf_token %}
                            
                            <div class="mb-3">
                                <label class="form-label">{% trans "Tipo de Premiação" %}</label>
                                <select name="tipo" id="tipo" class="form-select" required onchange="updateReferenciaField()">
                                    <option value="">{% trans "Selecione..." %}</option>
                                    <option value="CONQUISTA" {% if request.method == 'POST' and request.POST.tipo == 'CONQUISTA' %}selected{% endif %}>{% trans "Por Conquista" %}</option>
                                    <option value="CONQUISTAS_MULTIPLAS" {% if request.method == 'POST' and request.POST.tipo == 'CONQUISTAS_MULTIPLAS' %}selected{% endif %}>{% trans "Por Quantidade de Conquistas" %}</option>
                                </select>
                                <small class="text-white-50">{% trans "Escolha se a premiação é para uma conquista específica ou baseada na quantidade total de conquistas" %}</small>
                            </div>

                            <div class="mb-3" id="referencia-conquista" style="display: none;">
                                <label class="form-label">{% trans "Conquista" %} <span class="text-danger">*</span></label>
                                <select name="referencia_conquista" id="referencia_conquista" class="form-select">
                                    <option value="">{% trans "Selecione uma conquista..." %}</option>
                                    {% for conquista in conquistas %}
                                    <option value="{{ conquista.codigo }}" {% if request.method == 'POST' and request.POST.referencia_conquista == conquista.codigo or request.method == 'POST' and request.POST.referencia|default:'' == conquista.codigo %}selected{% endif %}>{{ conquista.nome }} ({{ conquista.codigo }})</option>
                                    {% endfor %}
                                </select>
                                <small class="text-white-50">{% trans "Selecione a conquista que dará esta premiação" %}</small>
                            </div>

                            <div class="mb-3" id="referencia-quantidade" style="display: none;">
                                <label class="form-label">{% trans "Quantidade de Conquistas" %} <span class="text-danger">*</span></label>
                                <input type="number" name="referencia_quantidade" id="referencia_quantidade" class="form-control" min="1" placeholder="Ex: 10" value="{% if request.method == 'POST' %}{{ request.POST.referencia_quantidade|default:request.POST.referencia|default:'' }}{% endif %}">
                                <small class="text-white-50">{% trans "Número de conquistas necessárias para receber esta premiação" %}</small>
                            </div>
                            
                            <!-- Campo hidden para enviar o valor correto -->
                            <input type="hidden" name="referencia" id="referencia_hidden" value="">

                            <div class="mb-3">
                                <label class="form-label">{% trans "Item ID" %} <span class="text-danger">*</span></label>
                                <input type="number" name="item_id" id="item_id" class="form-control" required min="1" value="{{ request.POST.item_id|default:'' }}">
                                <small class="text-white-50">{% trans "ID do item no servidor" %}</small>
                            </div>

                            <div class="mb-3">
                                <label class="form-label">{% trans "Nome do Item" %} <span class="text-danger">*</span></label>
                                <input type="text" name="item_name" id="item_name" class="form-control" required value="{{ request.POST.item_name|default:'' }}">
                                <small class="text-white-50">{% trans "Nome do item para exibição" %}</small>
                            </div>

                            <div class="row">
                                <div class="col-md-6 mb-3">
                                    <label class="form-label">{% trans "Quantidade" %}</label>
                                    <input type="number" name="quantity" class="form-control" value="{{ request.POST.quantity|default:'1' }}" min="1" required>
                                </div>
                                <div class="col-md-6 mb-3">
                                    <label class="form-label">{% trans "Encantamento" %}</label>
                                    <input type="number" name="enchant" class="form-control" value="{{ request.POST.enchant|default:'0' }}" min="0">
                                </div>
                            </div>

                            <div class="d-flex gap-2">
                                <button type="submit" class="btn-action">
                                    <i class="bi bi-check-circle me-2"></i>{% trans "Criar" %}
                                </button>
                                <a href="{% url 'games:achievement_rewards_manager_reward_list' %}" class="btn btn-secondary">{% trans "Cancelar" %}</a>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
function updateReferenciaField() {
    const tipo = document.getElementById('tipo').value;
    const conquistaDiv = document.getElementById('referencia-conquista');
    const quantidadeDiv = document.getElementById('referencia-quantidade');
    const referenciaConquista = document.getElementById('referencia_conquista');
    const referenciaQuantidade = document.getElementById('referencia_quantidade');
    
    if (tipo === 'CONQUISTA') {
        conquistaDiv.style.display = 'block';
        quantidadeDiv.style.display = 'none';
        referenciaConquista.required = true;
        referenciaQuantidade.required = false;
        referenciaQuantidade.removeAttribute('required');
        referenciaQuantidade.value = '';
    } else if (tipo === 'CONQUISTAS_MULTIPLAS') {
        conquistaDiv.style.display = 'none';
        quantidadeDiv.style.display = 'block';
        referenciaConquista.required = false;
        referenciaQuantidade.required = true;
        referenciaConquista.removeAttribute('required');
        referenciaConquista.value = '';
    } else {
        conquistaDiv.style.display = 'none';
        quantidadeDiv.style.display = 'none';
        referenciaConquista.required = false;
        referenciaQuantidade.required = false;
        referenciaConquista.removeAttribute('required');
        referenciaQuantidade.removeAttribute('required');
    }
}

// Validação antes de enviar o formulário e inicialização
document.addEventListener('DOMContentLoaded', function() {
    // Inicializa os campos baseado no tipo selecionado (caso haja erro e o formulário seja recarregado)
    const tipo = document.getElementById('tipo').value;
    if (tipo) {
        updateReferenciaField();
    }
    
    const form = document.getElementById('reward-form');
    if (form) {
        form.addEventListener('submit', function(e) {
            const tipo = document.getElementById('tipo').value;
            const referenciaConquista = document.getElementById('referencia_conquista');
            const referenciaQuantidade = document.getElementById('referencia_quantidade');
            const referenciaHidden = document.getElementById('referencia_hidden');
            
            if (!tipo) {
                e.preventDefault();
                return false;
            }
            
            // Define o valor correto no campo hidden baseado no tipo
            if (tipo === 'CONQUISTA') {
                if (!referenciaConquista.value) {
                    e.preventDefault();
                    return false;
                }
                referenciaHidden.value = referenciaConquista.value;
            } else if (tipo === 'CONQUISTAS_MULTIPLAS') {
                if (!referenciaQuantidade.value) {
                    e.preventDefault();
                    return false;
                }
                referenciaHidden.value = referenciaQuantidade.value;
            }
        });
    }
});
</script>
{% endblock %}