{% extends "base.html" %}

{% block title %}Criar Solicitação de Movimentação - SGMP{% endblock %}

{% block css %}
<style>
    .conditional-fields { display: none; }
    .conditional-fields.active { display: block; }
</style>
{% endblock %}

{% block content %}
<div class="bg-white border border-slate-200 rounded-lg p-6 max-w-3xl mx-auto">
    <div class="mb-6 pb-4 border-b border-slate-200">
        <h2 class="text-xl font-semibold text-slate-700 m-0">Criar Solicitação de Movimentação</h2>
    </div>

    {% if messages %}
    <div class="mb-6">
        <ul class="list-none p-0 m-0 space-y-2">
            {% for message in messages %}
            <li class="py-3 px-4 rounded-lg text-sm {% if message.tags == 'error' %}bg-red-100 text-red-800 border border-red-200{% elif message.tags == 'success' %}bg-emerald-100 text-emerald-800 border border-emerald-200{% else %}bg-blue-100 text-blue-800 border border-blue-200{% endif %}">{{ message }}</li>
            {% endfor %}
        </ul>
    </div>
    {% endif %}

    <div class="bg-slate-50 border border-slate-200 border-l-4 border-l-primary rounded-lg p-5 mb-6">
        <h3 class="text-base font-semibold text-slate-700 m-0 mb-4">Dados do Colaborador</h3>
        <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-3">
            <div><span class="block text-sm text-slate-500 font-medium">Nome</span><span class="text-slate-700 font-medium">{{ funcionario.nome }}</span></div>
            <div><span class="block text-sm text-slate-500 font-medium">Matrícula</span><span class="text-slate-700 font-medium">{{ funcionario.matricula }}</span></div>
            <div><span class="block text-sm text-slate-500 font-medium">Cargo Atual</span><span class="text-slate-700 font-medium">{{ funcionario.cargo|default:"N/A" }}</span></div>
            <div><span class="block text-sm text-slate-500 font-medium">Setor Atual</span><span class="text-slate-700 font-medium">{{ funcionario.setor|default:"N/A" }}</span></div>
            <div><span class="block text-sm text-slate-500 font-medium">Centro de Custo Atual</span><span class="text-slate-700 font-medium">{{ funcionario.centro_custo|default:"N/A" }}</span></div>
            <div><span class="block text-sm text-slate-500 font-medium">Salário Atual</span><span class="text-slate-700 font-medium">R$ {{ funcionario.salario|default:"N/A" }}</span></div>
        </div>
    </div>

    <form method="post">
        {% csrf_token %}
        <div class="grid grid-cols-1 md:grid-cols-2 gap-5">
            <div class="md:col-span-2">
                <div class="flex items-center gap-3 p-3 bg-slate-50 border border-slate-200 rounded-lg">
                    <input type="checkbox" name="altera_funcao" id="altera_funcao" class="w-[18px] h-[18px] cursor-pointer accent-primary">
                    <label for="altera_funcao" class="text-slate-700 font-medium cursor-pointer m-0">Alterar Função/Cargo</label>
                </div>
                <div id="campos_funcao" class="conditional-fields mt-2 p-4 bg-slate-50 border border-slate-200 rounded-lg">
                    <label for="novo_cod_funcao" class="block text-sm font-medium text-slate-700 mb-1">Nova Função/Cargo</label>
                    <select name="novo_cod_funcao" id="novo_cod_funcao" class="w-full py-2.5 px-4 border border-slate-200 rounded-lg text-base focus:outline-none focus:border-primary focus:ring-2 focus:ring-primary/20">
                        <option value="">Selecione um cargo...</option>
                        {% for cargo in cargos %}<option value="{{ cargo.codigo }}">{{ cargo.nome }}</option>{% endfor %}
                    </select>
                </div>
            </div>
            <div class="md:col-span-2">
                <div class="flex items-center gap-3 p-3 bg-slate-50 border border-slate-200 rounded-lg">
                    <input type="checkbox" name="altera_centro_custo" id="altera_centro_custo" class="w-[18px] h-[18px] cursor-pointer accent-primary">
                    <label for="altera_centro_custo" class="text-slate-700 font-medium cursor-pointer m-0">Alterar Centro de Custo/Setor</label>
                </div>
                <div id="campos_centro_custo" class="conditional-fields mt-2 p-4 bg-slate-50 border border-slate-200 rounded-lg">
                    <label for="novo_cod_secao" class="block text-sm font-medium text-slate-700 mb-1">Nova Seção/Centro de Custo</label>
                    <select name="novo_cod_secao" id="novo_cod_secao" class="w-full py-2.5 px-4 border border-slate-200 rounded-lg text-base focus:outline-none focus:border-primary focus:ring-2 focus:ring-primary/20">
                        <option value="">Selecione uma seção...</option>
                        {% for secao in secoes %}<option value="{{ secao.codigo }}">{{ secao.descricao }}</option>{% endfor %}
                    </select>
                </div>
            </div>
            <div>
                <label for="novo_salario" class="block text-sm font-medium text-slate-700 mb-1">Novo Salário (opcional)</label>
                <input type="number" name="novo_salario" id="novo_salario" step="0.01" min="0" placeholder="0.00" class="w-full py-2.5 px-4 border border-slate-200 rounded-lg text-base focus:outline-none focus:border-primary focus:ring-2 focus:ring-primary/20">
            </div>
            <div>
                <label for="data_efetivacao" class="block text-sm font-medium text-slate-700 mb-1">Data de Efetivação *</label>
                <input type="date" name="data_efetivacao" id="data_efetivacao" class="w-full py-2.5 px-4 border border-slate-200 rounded-lg text-base focus:outline-none focus:border-primary focus:ring-2 focus:ring-primary/20" required>
            </div>
            <div class="md:col-span-2">
                <label for="justificativa" class="block text-sm font-medium text-slate-700 mb-1">Justificativa *</label>
                <textarea name="justificativa" id="justificativa" required placeholder="Descreva o motivo da movimentação..." class="w-full py-2.5 px-4 border border-slate-200 rounded-lg text-base min-h-[120px] resize-y focus:outline-none focus:border-primary focus:ring-2 focus:ring-primary/20"></textarea>
            </div>
        </div>
        <div class="mt-6 pt-6 border-t border-slate-200 flex flex-wrap gap-3">
            <button type="submit" class="py-2.5 px-5 bg-primary text-white border-0 rounded-lg font-medium cursor-pointer hover:bg-primary-hover transition-colors">Criar Solicitação</button>
            <a href="{% url 'solicitacoes:listar_colaboradores' %}" class="py-2.5 px-5 bg-slate-500 text-white no-underline rounded-lg font-medium inline-block hover:bg-slate-600 transition-colors">Cancelar</a>
        </div>
    </form>
</div>

<script>
document.getElementById('altera_funcao').addEventListener('change', function() {
    document.getElementById('campos_funcao').classList.toggle('active', this.checked);
});
document.getElementById('altera_centro_custo').addEventListener('change', function() {
    document.getElementById('campos_centro_custo').classList.toggle('active', this.checked);
});
</script>
{% endblock %}