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

{% block extrastyle %}
{% include 'battle_pass/manager/_base_styles.html' %}
<style>
    .btn-success:hover {
        background: linear-gradient(135deg, #059669 0%, #047857 100%) !important;
        transform: translateY(-2px);
        box-shadow: 0 6px 20px rgba(16, 185, 129, 0.6) !important;
        color: white !important;
    }
</style>
{% endblock %}

{% block title %}{% trans "Editar Quest" %} - {% trans "Battle Pass Manager" %}{% 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">
                        <h3 class="text-white mb-0">{% trans "Editar Quest" %}</h3>
                    </div>
                    <div class="card-body">
                        <form method="post">
                            {% csrf_token %}
                            <div class="mb-3">
                                <label class="form-label text-white">{% trans "Título" %}</label>
                                <input type="text" name="title" class="form-control" value="{{ quest.title }}" required>
                            </div>
                            <div class="mb-3">
                                <label class="form-label text-white">{% trans "Descrição" %}</label>
                                <textarea name="description" class="form-control" rows="3" required>{{ quest.description }}</textarea>
                            </div>
                            <div class="mb-3">
                                <label class="form-label text-white">{% trans "Tipo" %}</label>
                                <select name="quest_type" class="form-select" required>
                                    <option value="daily" {% if quest.quest_type == 'daily' %}selected{% endif %}>{% trans "Diária" %}</option>
                                    <option value="weekly" {% if quest.quest_type == 'weekly' %}selected{% endif %}>{% trans "Semanal" %}</option>
                                    <option value="seasonal" {% if quest.quest_type == 'seasonal' %}selected{% endif %}>{% trans "Temporada" %}</option>
                                    <option value="special" {% if quest.quest_type == 'special' %}selected{% endif %}>{% trans "Especial" %}</option>
                                </select>
                            </div>
                            <div class="mb-3">
                                <label class="form-label text-white">{% trans "XP de Recompensa" %}</label>
                                <input type="number" name="xp_reward" class="form-control" value="{{ quest.xp_reward }}" min="1" required>
                            </div>
                            
                            <hr class="text-white my-4">
                            <h5 class="text-white mb-3">{% trans "Sistema de Objetivos" %}</h5>
                            
                            <div class="mb-3">
                                <label class="form-label text-white">{% trans "Tipo de Objetivo" %}</label>
                                <select name="objective_type" id="objective_type" class="form-select" required>
                                    <option value="xp" {% if quest.objective_type == 'xp' %}selected{% endif %}>{% trans "Ganhar XP" %}</option>
                                    <option value="roulette_items" {% if quest.objective_type == 'roulette_items' %}selected{% endif %}>{% trans "Adquirir itens pela Roleta" %}</option>
                                    <option value="box_items" {% if quest.objective_type == 'box_items' %}selected{% endif %}>{% trans "Adquirir itens em uma Box" %}</option>
                                    <option value="slot_items" {% if quest.objective_type == 'slot_items' %}selected{% endif %}>{% trans "Adquirir itens no Slot Machine" %}</option>
                                    <option value="fishing_rod_level" {% if quest.objective_type == 'fishing_rod_level' %}selected{% endif %}>{% trans "Adquirir vara de pesca nível X" %}</option>
                                    <option value="dice_number" {% if quest.objective_type == 'dice_number' %}selected{% endif %}>{% trans "Adquirir número no Dice Game" %}</option>
                                    <option value="game_item" {% if quest.objective_type == 'game_item' %}selected{% endif %}>{% trans "Adquirir item específico" %}</option>
                                </select>
                            </div>
                            
                            <div class="mb-3">
                                <label class="form-label text-white">{% trans "Meta do Objetivo" %}</label>
                                <input type="number" name="objective_target" id="objective_target" class="form-control" value="{{ quest.objective_target }}" min="1" required>
                                <small class="text-muted">{% trans "Quantidade/valor necessário (ex: 5 itens, nível 3, etc)" %}</small>
                            </div>
                            
                            <!-- Campos específicos por tipo de objetivo -->
                            <div id="dice_number_fields" class="mb-3" style="display: none;">
                                <label class="form-label text-white">{% trans "Número do Dado (1-6)" %}</label>
                                <input type="number" name="dice_number" class="form-control" min="1" max="6" value="{% if quest.objective_metadata.dice_number %}{{ quest.objective_metadata.dice_number }}{% endif %}">
                            </div>
                            
                            <div id="fishing_rod_level_fields" class="mb-3" style="display: none;">
                                <label class="form-label text-white">{% trans "Nível da Vara" %}</label>
                                <input type="number" name="rod_level" class="form-control" min="1" value="{% if quest.objective_metadata.rod_level %}{{ quest.objective_metadata.rod_level }}{% endif %}">
                                <small class="text-muted">{% trans "O objetivo será completado quando o usuário alcançar este nível" %}</small>
                            </div>
                            
                            <div id="game_item_fields" class="mb-3" style="display: none;">
                                <div class="row">
                                    <div class="col-md-6">
                                        <label class="form-label text-white">{% trans "Item ID" %}</label>
                                        <input type="number" name="game_item_id" class="form-control" min="0" value="{% if quest.objective_metadata.item_id %}{{ quest.objective_metadata.item_id }}{% endif %}">
                                    </div>
                                    <div class="col-md-6">
                                        <label class="form-label text-white">{% trans "Nome do Item" %}</label>
                                        <input type="text" name="game_item_name" class="form-control" value="{% if quest.objective_metadata.item_name %}{{ quest.objective_metadata.item_name }}{% endif %}">
                                    </div>
                                </div>
                            </div>
                            
                            <input type="hidden" name="objective_metadata" id="objective_metadata" value='{{ quest.objective_metadata|default:"{}" }}'>
                            
                            <hr class="text-white my-4">
                            <h5 class="text-white mb-3">{% trans "Item Requerido (Opcional)" %}</h5>
                            <small class="text-muted d-block mb-3">{% trans "Item que será REMOVIDO da bag quando a quest for completada (para objetivos que cobram itens)" %}</small>
                            
                            <div class="row">
                                <div class="col-md-6 mb-3">
                                    <label class="form-label text-white">{% trans "Item ID Requerido" %}</label>
                                    <input type="number" name="required_item_id" class="form-control" min="0" value="{% if quest.required_item_id %}{{ quest.required_item_id }}{% endif %}">
                                </div>
                                <div class="col-md-6 mb-3">
                                    <label class="form-label text-white">{% trans "Nome do Item" %}</label>
                                    <input type="text" name="required_item_name" class="form-control" value="{% if quest.required_item_name %}{{ quest.required_item_name }}{% endif %}">
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-md-6 mb-3">
                                    <label class="form-label text-white">{% trans "Encantamento" %}</label>
                                    <input type="number" name="required_item_enchant" class="form-control" value="{{ quest.required_item_enchant }}" min="0">
                                </div>
                                <div class="col-md-6 mb-3">
                                    <label class="form-label text-white">{% trans "Quantidade" %}</label>
                                    <input type="number" name="required_item_amount" class="form-control" value="{{ quest.required_item_amount }}" min="1">
                                </div>
                            </div>
                            
                            <div class="mb-3">
                                <label class="form-label text-white">{% trans "Temporada" %}</label>
                                <select name="season" class="form-select">
                                    <option value="">{% trans "Geral (todas as temporadas)" %}</option>
                                    {% for s in seasons %}
                                    <option value="{{ s.id }}" {% if quest.season and quest.season.id == s.id %}selected{% endif %}>{{ s.name }}</option>
                                    {% endfor %}
                                </select>
                            </div>
                            <div class="mb-3">
                                <label class="form-label text-white">{% trans "Ordem" %}</label>
                                <input type="number" name="order" class="form-control" value="{{ quest.order }}" min="0">
                            </div>
                            <div class="mb-3 form-check">
                                <input type="checkbox" name="is_active" class="form-check-input" {% if quest.is_active %}checked{% endif %}>
                                <label class="form-check-label text-white">{% trans "Ativa" %}</label>
                            </div>
                            <div class="mb-3 form-check">
                                <input type="checkbox" name="is_premium" class="form-check-input" {% if quest.is_premium %}checked{% endif %}>
                                <label class="form-check-label text-white">{% trans "Premium" %}</label>
                            </div>
                            <div class="mb-3 form-check">
                                <input type="checkbox" name="reset_daily" class="form-check-input" {% if quest.reset_daily %}checked{% endif %}>
                                <label class="form-check-label text-white">{% trans "Reset Diário" %}</label>
                            </div>
                            <div class="mb-3 form-check">
                                <input type="checkbox" name="reset_weekly" class="form-check-input" {% if quest.reset_weekly %}checked{% endif %}>
                                <label class="form-check-label text-white">{% trans "Reset Semanal" %}</label>
                            </div>
                            <div class="d-flex gap-2">
                                <button type="submit" class="btn btn-success" style="background: linear-gradient(135deg, #10b981 0%, #059669 100%); border: none; padding: 12px 24px; border-radius: 10px; font-weight: 600; transition: all 0.3s ease; box-shadow: 0 4px 15px rgba(16, 185, 129, 0.4); color: white;">
                                    <i class="bi bi-check-circle me-2"></i>{% trans "Salvar" %}
                                </button>
                                <a href="{% url 'games:battle_pass_manager_quest_list' %}" class="btn btn-secondary">{% trans "Cancelar" %}</a>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    const objectiveTypeSelect = document.getElementById('objective_type');
    const diceNumberFields = document.getElementById('dice_number_fields');
    const fishingRodFields = document.getElementById('fishing_rod_level_fields');
    const gameItemFields = document.getElementById('game_item_fields');
    
    function updateFields() {
        const selectedType = objectiveTypeSelect.value;
        
        // Ocultar todos os campos específicos
        diceNumberFields.style.display = 'none';
        fishingRodFields.style.display = 'none';
        gameItemFields.style.display = 'none';
        
        // Mostrar campos relevantes
        if (selectedType === 'dice_number') {
            diceNumberFields.style.display = 'block';
        } else if (selectedType === 'fishing_rod_level') {
            fishingRodFields.style.display = 'block';
        } else if (selectedType === 'game_item') {
            gameItemFields.style.display = 'block';
        }
    }
    
    objectiveTypeSelect.addEventListener('change', updateFields);
    updateFields(); // Inicializar na carga da página
});
</script>
{% endblock %}