{% 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;
}
</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-pencil me-2"></i>{% trans "Editar Premiação" %}
                        </h3>
                    </div>
                    <div class="card-body">
                        <form method="post">
                            {% 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="CONQUISTA" {% if recompensa.tipo == 'CONQUISTA' %}selected{% endif %}>{% trans "Por Conquista" %}</option>
                                    <option value="CONQUISTAS_MULTIPLAS" {% if recompensa.tipo == 'CONQUISTAS_MULTIPLAS' %}selected{% endif %}>{% trans "Por Quantidade de Conquistas" %}</option>
                                </select>
                            </div>

                            <div class="mb-3" id="referencia-conquista" style="display: {% if recompensa.tipo == 'CONQUISTA' %}block{% else %}none{% endif %};">
                                <label class="form-label">{% trans "Conquista" %}</label>
                                <select name="referencia" id="referencia_conquista" class="form-select">
                                    <option value="">{% trans "Selecione uma conquista..." %}</option>
                                    {% for conquista in conquistas %}
                                    <option value="{{ conquista.codigo }}" {% if recompensa.tipo == 'CONQUISTA' and recompensa.referencia == conquista.codigo %}selected{% endif %}>
                                        {{ conquista.nome }} ({{ conquista.codigo }})
                                    </option>
                                    {% endfor %}
                                </select>
                            </div>

                            <div class="mb-3" id="referencia-quantidade" style="display: {% if recompensa.tipo == 'CONQUISTAS_MULTIPLAS' %}block{% else %}none{% endif %};">
                                <label class="form-label">{% trans "Quantidade de Conquistas" %}</label>
                                <input type="number" name="referencia" id="referencia_quantidade" class="form-control" min="1" value="{% if recompensa.tipo == 'CONQUISTAS_MULTIPLAS' %}{{ recompensa.referencia }}{% endif %}">
                            </div>

                            <div class="mb-3">
                                <label class="form-label">{% trans "Item ID" %}</label>
                                <input type="number" name="item_id" class="form-control" value="{{ recompensa.item_id }}" required min="1">
                            </div>

                            <div class="mb-3">
                                <label class="form-label">{% trans "Nome do Item" %}</label>
                                <input type="text" name="item_name" class="form-control" value="{{ recompensa.item_name }}" required>
                            </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="{{ recompensa.quantity }}" 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="{{ recompensa.enchant }}" 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 "Salvar" %}
                                </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.value = '';
    } else if (tipo === 'CONQUISTAS_MULTIPLAS') {
        conquistaDiv.style.display = 'none';
        quantidadeDiv.style.display = 'block';
        referenciaConquista.required = false;
        referenciaQuantidade.required = true;
        referenciaConquista.value = '';
    }
}
</script>
{% endblock %}