{% extends "base.html" %}

{% block title %}Criar Desligamento - SGMP{% endblock %}

{% block css %}
<style>
    .stability-item.blocked { border-left-color: #ef4444; }
    .stability-item.warning { border-left-color: #f59e0b; }
    .btn-blocked { background-color: #94a3b8; color: white; cursor: not-allowed; opacity: 0.8; }
    .btn-blocked:hover { background-color: #94a3b8; }
</style>
{% endblock %}

{% block content %}
<div class="mb-6 flex items-center gap-3">
    <span class="text-3xl">🚫</span>
    <h1 class="text-2xl font-bold text-slate-800">Solicitação de Desligamento</h1>
</div>

{% if messages %}
<div class="mb-6 space-y-2">
    {% for message in messages %}
    <div class="py-3 px-4 rounded-lg flex items-center gap-2 text-sm {% if message.tags == 'error' %}bg-red-50 text-red-800 border border-red-200{% else %}bg-emerald-50 text-emerald-800 border border-emerald-200{% endif %}">
        {% if message.tags == 'error' %}⚠️{% else %}✅{% endif %} {{ message }}
    </div>
    {% endfor %}
</div>
{% endif %}

<!-- Dados do Colaborador -->
<div class="bg-white rounded-xl border border-slate-200 shadow-sm overflow-hidden mb-6">
    <div class="px-5 py-4 bg-slate-50 border-b border-slate-200 flex items-center gap-2">
        <span class="text-xl">👤</span>
        <h3 class="text-base font-semibold text-slate-700 m-0">Dados do Colaborador</h3>
    </div>
    <div class="p-5">
        <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-5 gap-4">
            <div><span class="block text-xs uppercase text-slate-500 font-semibold mb-0.5">Nome</span><strong class="text-slate-800">{{ funcionario.nome }}</strong></div>
            <div><span class="block text-xs uppercase text-slate-500 font-semibold mb-0.5">Matrícula</span><span class="text-slate-800 font-medium">{{ funcionario.matricula }}</span></div>
            <div><span class="block text-xs uppercase text-slate-500 font-semibold mb-0.5">Cargo</span><span class="text-slate-800 font-medium">{{ funcionario.cargo|default:"N/A" }}</span></div>
            <div><span class="block text-xs uppercase text-slate-500 font-semibold mb-0.5">Setor</span><span class="text-slate-800 font-medium">{{ funcionario.setor|default:"N/A" }}</span></div>
            <div><span class="block text-xs uppercase text-slate-500 font-semibold mb-0.5">Admissão</span><span class="text-slate-800 font-medium">{{ funcionario.data_admissao|date:"d/m/Y"|default:"N/A" }}</span></div>
            {% if funcionario.saldo_banco_horas_minutos %}
            <div>
                <span class="block text-xs uppercase text-slate-500 font-semibold mb-0.5">Banco de Horas <span class="cursor-help text-slate-500 ml-0.5" title="Valores negativos serão descontados na rescisão.">ℹ️</span></span>
                <span class="font-bold {% if funcionario.saldo_banco_horas_minutos < 0 %}text-red-500{% else %}text-emerald-600{% endif %}">{{ funcionario.saldo_banco_horas_minutos }} min</span>
                {% if funcionario.saldo_banco_horas_minutos < 0 %}<div class="text-xs text-red-500 mt-0.5">Saldo negativo a descontar.</div>{% endif %}
            </div>
            {% endif %}
        </div>
    </div>
</div>

{% if estabilidades_bloqueantes %}
<div class="rounded-xl overflow-hidden border border-red-200 bg-red-50 mb-6">
    <div class="px-5 py-4 bg-red-100 text-red-800 font-bold flex items-center gap-2 border-b border-red-200">
        <span class="text-xl">⛔</span> DESLIGAMENTO BLOQUEADO
    </div>
    <div class="px-5 pt-4 text-red-900">O colaborador possui estabilidade ativa que impede o desligamento.</div>
    <ul class="list-none p-5 m-0">
        {% for estabilidade in estabilidades_bloqueantes %}
        <li class="stability-item blocked bg-white p-4 rounded-lg border-l-4 mb-3 last:mb-0 shadow-sm">
            <span class="block font-semibold text-red-800 mb-1">
                {% if estabilidade.tipo == "MATERNIDADE" %}Licença Maternidade{% elif estabilidade.tipo == "PREVIDENCIARIO" %}Afastamento Previdenciário{% elif estabilidade.tipo == "ACIDENTE_TRABALHO" %}Acidente de Trabalho{% elif estabilidade.tipo == "CIPA" %}Membro da CIPA{% else %}{{ estabilidade.tipo }}{% endif %}
            </span>
            <div class="text-red-900">{{ estabilidade.mensagem }}</div>
            {% if estabilidade.detalhes %}
            <div class="text-sm text-slate-500 mt-2 pt-2 border-t border-dashed border-slate-200">
                {% if estabilidade.detalhes.dt_inicio %}Início: {{ estabilidade.detalhes.dt_inicio|date:"d/m/Y" }} | {% endif %}
                {% if estabilidade.detalhes.dt_final %}Fim: <strong>{{ estabilidade.detalhes.dt_final|date:"d/m/Y" }}</strong>{% endif %}
                {% if estabilidade.detalhes.observacao %}<br>Obs: {{ estabilidade.detalhes.observacao }}{% endif %}
            </div>
            {% endif %}
        </li>
        {% endfor %}
    </ul>
</div>
{% elif estabilidades %}
<div class="rounded-xl overflow-hidden border border-amber-200 bg-amber-50 mb-6">
    <div class="px-5 py-4 bg-amber-100 text-amber-800 font-bold flex items-center gap-2 border-b border-amber-200">
        <span class="text-xl">⚠️</span> Atenção: Estabilidades Identificadas
    </div>
    <ul class="list-none p-5 m-0">
        {% for estabilidade in estabilidades %}
        {% if not estabilidade.bloqueado %}
        <li class="stability-item warning bg-white p-4 rounded-lg border-l-4 mb-3 last:mb-0 shadow-sm">
            <span class="block font-semibold text-amber-800 mb-1">Estabilidade (Não Bloqueante)</span>
            <div class="text-amber-900">{{ estabilidade.mensagem }}</div>
        </li>
        {% endif %}
        {% endfor %}
    </ul>
</div>
{% endif %}

<form method="post" enctype="multipart/form-data" id="form-desligamento">
    {% csrf_token %}
    <div class="bg-white rounded-xl border border-slate-200 shadow-sm overflow-hidden mb-6">
        <div class="px-5 py-4 bg-slate-50 border-b border-slate-200 flex items-center gap-2">
            <span class="text-xl">📉</span>
            <h3 class="text-base font-semibold text-slate-700 m-0">Detalhes do Desligamento</h3>
        </div>
        <div class="p-5 grid grid-cols-1 md:grid-cols-2 gap-4">
            <div class="md:col-span-2">
                <label for="tipo_desligamento" class="block text-sm font-medium text-slate-700 mb-1">Tipo de Desligamento <span class="text-red-500">*</span></label>
                <select name="tipo_desligamento" id="tipo_desligamento" class="w-full py-2.5 px-3 border border-slate-200 rounded-md focus:outline-none focus:border-primary focus:ring-2 focus:ring-primary/20" required onchange="toggleAnexo(this.value)">
                    <option value="">Selecione o tipo...</option>
                    <option value="PEDIDO_DEMISSAO">Pedido de Demissão</option>
                    <option value="SEM_JUSTA_CAUSA">Demissão sem Justa Causa</option>
                    <option value="COM_JUSTA_CAUSA">Demissão por Justa Causa</option>
                    <option value="TERMINO_CONTRATO">Término de Contrato de Experiência</option>
                    <option value="OUTROS">Outros</option>
                </select>
            </div>
            <div>
                <label for="aviso_previo" class="block text-sm font-medium text-slate-700 mb-1">Aviso Prévio <span class="text-red-500">*</span></label>
                <select name="aviso_previo" id="aviso_previo" class="w-full py-2.5 px-3 border border-slate-200 rounded-md focus:outline-none focus:border-primary focus:ring-2 focus:ring-primary/20" required>
                    <option value="">Selecione...</option>
                    <option value="TRABALHADO">Trabalhado</option>
                    <option value="INDENIZADO">Indenizado (Dispensa imediata)</option>
                    <option value="DISPENSADO">Dispensado (Pedido de demissão)</option>
                </select>
            </div>
            <div>
                <label for="data_prevista_desligamento" class="block text-sm font-medium text-slate-700 mb-1">Data Prevista de Saída <span class="text-red-500">*</span></label>
                <input type="date" name="data_prevista_desligamento" id="data_prevista_desligamento" class="w-full py-2.5 px-3 border border-slate-200 rounded-md focus:outline-none focus:border-primary focus:ring-2 focus:ring-primary/20" required>
            </div>
            <div class="md:col-span-2">
                <label for="motivo" class="block text-sm font-medium text-slate-700 mb-1">Detalhamento / Justificativa <span class="text-red-500">*</span></label>
                <textarea name="motivo" id="motivo" class="w-full py-2.5 px-3 border border-slate-200 rounded-md focus:outline-none focus:border-primary focus:ring-2 focus:ring-primary/20" rows="3" required placeholder="Descreva os detalhes da decisão..."></textarea>
            </div>
            <div class="md:col-span-2 hidden bg-slate-50 p-4 border border-dashed border-slate-300 rounded-md" id="div-carta-demissao">
                <label for="arquivo_pedido" class="block text-sm font-medium text-slate-700 mb-1">Carta de Pedido de Demissão <span class="text-red-500">*</span></label>
                <input type="file" name="arquivo_pedido" id="arquivo_pedido" class="w-full py-2 px-3 border border-slate-200 rounded-md focus:outline-none focus:border-primary" accept=".pdf,.jpg,.jpeg,.png,.doc,.docx">
                <small class="block text-slate-500 mt-1 text-sm">Anexe a carta de próprio punho digitalizada ou e-mail formal do colaborador.</small>
            </div>
            <div class="md:col-span-2">
                <label for="observacoes" class="block text-sm font-medium text-slate-700 mb-1">Observações Adicionais (Opcional)</label>
                <textarea name="observacoes" id="observacoes" class="w-full py-2.5 px-3 border border-slate-200 rounded-md focus:outline-none focus:border-primary focus:ring-2 focus:ring-primary/20" rows="2" placeholder="Informações extras para o Depto Pessoal..."></textarea>
            </div>
        </div>
    </div>

    <div class="flex flex-wrap gap-3">
        <button type="button" onclick="confirmarEnvio()" class="py-2.5 px-5 rounded-md font-semibold transition-colors {% if desligamento_bloqueado %}btn-blocked{% else %}bg-red-600 text-white hover:bg-red-700{% endif %}" {% if desligamento_bloqueado %}disabled{% endif %}>
            {% if desligamento_bloqueado %}🚫 Ação Bloqueada{% else %}🗑️ Confirmar Solicitação{% endif %}
        </button>
        <a href="{% url 'solicitacoes:listar_colaboradores' %}" class="py-2.5 px-5 rounded-md font-semibold border border-slate-200 bg-white text-slate-700 hover:bg-slate-50 no-underline">Cancelar</a>
    </div>
</form>

<script>
function toggleAnexo(valor) {
    const divAnexo = document.getElementById('div-carta-demissao');
    const inputAnexo = document.getElementById('arquivo_pedido');
    if (valor === 'PEDIDO_DEMISSAO') {
        divAnexo.classList.remove('hidden');
        inputAnexo.setAttribute('required', 'required');
    } else {
        divAnexo.classList.add('hidden');
        inputAnexo.removeAttribute('required');
    }
}
function confirmarEnvio() {
    if (confirm("⚠️ Tem certeza que deseja solicitar o desligamento deste colaborador?\n\nEsta ação notificará o RH e iniciará o processo de desligamento.")) {
        document.getElementById('form-desligamento').submit();
    }
}
</script>
{% endblock %}