{% extends "base.html" %}

{% block title %}Criar Admissão por Substituição - SGMP{% 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 Substituiçã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">Colaborador a ser Substituído</h3>
        <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 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</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</span><span class="text-slate-700 font-medium">{{ funcionario.setor|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>
                <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>
                <input type="number" 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>
            </div>
            <div>
                <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" 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_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 *</label>
                <textarea name="justificativa" id="justificativa" required placeholder="Descreva a justificativa para a substituiçã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>
{% endblock %}