{% extends "base.html" %}

{% block title %}Criar Admissão por Aumento de Quadro - SGMP{% endblock %}

{% block css %}
<style>
    .form-group-filial input[type="number"] { max-width: 6em; -moz-appearance: textfield; }
    .form-group-filial input[type="number"]::-webkit-outer-spin-button,
    .form-group-filial input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
</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 Admissão por Aumento de Quadro</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 %}
    <form method="post">
        {% csrf_token %}
        <div class="grid grid-cols-1 md:grid-cols-2 gap-5">
            <div>
                <label for="data_previsao" class="block text-sm font-medium text-slate-700 mb-1">Data Prevista de Contratação *</label>
                <input type="date" name="data_previsao" id="data_previsao" 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>
                <label for="cod_coligada" class="block text-sm font-medium text-slate-700 mb-1">Código Coligada Destino *</label>
                <select name="cod_coligada" id="cod_coligada" 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>
                    <option value="">Selecione a coligada...</option>
                    {% for col in coligadas %}<option value="{{ col.codigo }}">{{ col.nome }}</option>{% endfor %}
                </select>
            </div>
            <div class="form-group-filial">
                <label for="cod_filial" class="block text-sm font-medium text-slate-700 mb-1">Código Filial Destino *</label>
                <input type="number" name="cod_filial" id="cod_filial" min="1" max="13" step="1" required placeholder="1 a 13" inputmode="numeric" autocomplete="off" aria-describedby="cod_filial_help" 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">
                <small id="cod_filial_help" class="block mt-1 text-xs text-slate-500">Informe o código da filial (entre 1 e 13).</small>
            </div>
            <div>
                <label for="cod_secao" class="block text-sm font-medium text-slate-700 mb-1">Seção/Centro de Custo Destino *</label>
                <select name="cod_secao" id="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" required>
                    <option value="">Selecione uma seção...</option>
                    {% for secao in secoes %}<option value="{{ secao.codigo }}">{{ secao.descricao }}</option>{% endfor %}
                </select>
            </div>
            <div>
                <label for="cod_funcao" class="block text-sm font-medium text-slate-700 mb-1">Função/Cargo Destino *</label>
                <select name="cod_funcao" id="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" required>
                    <option value="">Selecione um cargo...</option>
                    {% for cargo in cargos %}<option value="{{ cargo.codigo }}">{{ cargo.nome }}</option>{% endfor %}
                </select>
            </div>
            <div class="md:col-span-2">
                <label for="justificativa" class="block text-sm font-medium text-slate-700 mb-1">Justificativa Estratégica *</label>
                <textarea name="justificativa" id="justificativa" required placeholder="Descreva a justificativa estratégica para o aumento de quadro..." 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:dashboard' %}" 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>
{% endblock %}