{% extends "base.html" %}
{% block title %}{{ sim_label }}{% endblock %}
{% block page_title %}{{ sim_label }}{% endblock %}
{% block content %}
<div class="row g-4">
    <div class="col-lg-5">
        <div class="glass-card p-4">
            <h5 class="mb-4" style="font-weight: 600;">Layoff Parameters</h5>
            <form method="POST" id="simForm">
                <input type="hidden" name="name" value="{{ sim_label }} - {{ now }}">
                <div class="mb-3">
                    <label class="form-label">Headcount Reduction</label>
                    <input type="number" class="form-control-glass" name="headcount_reduction" value="10" min="1" max="{{ baseline.employees }}" required>
                    <small style="color: var(--text-secondary);">Current employees: {{ baseline.employees }}</small>
                </div>
                <div class="mb-3">
                    <label class="form-label">Average Severance per Employee ({{ currency_symbol }})</label>
                    <input type="number" class="form-control-glass" name="avg_severance" value="{{ (real_data.avg_salary * 0.5)|round|int if real_data.avg_salary else 20000 }}" required>
                </div>
                <div class="mb-3">
                    <label class="form-label">Departments Affected</label>
                    <select class="form-control-glass" name="departments" multiple>
                        {% if real_data.departments %}
                            {% for d in real_data.departments %}
                            <option value="{{ d }}">{{ d }}</option>
                            {% endfor %}
                        {% else %}
                            <option value="Sales">Sales</option>
                            <option value="Marketing">Marketing</option>
                            <option value="Engineering">Engineering</option>
                            <option value="Operations">Operations</option>
                        {% endif %}
                    </select>
                </div>
                <div class="mb-3">
                    <label class="form-label">Notice Period (weeks)</label>
                    <input type="number" class="form-control-glass" name="notice_period" value="4">
                </div>
                <button type="submit" class="btn-glass w-100"><i class="fas fa-play me-2"></i>Run Simulation</button>
            </form>
        </div>
    </div>
    <div class="col-lg-7">
        <div class="glass-card p-4" id="resultsCard" style="display: none;"><h5 class="mb-3" style="font-weight: 600;">Results</h5><div id="resultsContent"></div></div>
        <div class="glass-card p-4" id="placeholderCard">
            <div class="text-center py-5"><i class="fas fa-user-minus mb-3" style="font-size: 48px; color: var(--accent-primary); opacity: 0.5;"></i><p style="color: var(--text-secondary);">Run simulation to see layoff impact</p></div>
        </div>
    </div>
</div>
{% endblock %}
{% block extra_js %}
<script>window.CURRENCY_SYMBOL = "{{ currency_symbol }}";</script>
<script src="{{ url_for('static', filename='js/simulation_formatter.js') }}"></script>
<script>
document.getElementById('simForm').addEventListener('submit', function(e) {
    e.preventDefault();
    fetch(window.location.pathname, {method: 'POST', body: new FormData(this), headers: {'X-Requested-With': 'XMLHttpRequest'}})
    .then(r => r.json()).then(data => {
        if(data.success && data.simulation) {
            const s = data.simulation;
            document.getElementById('placeholderCard').style.display = 'none';
            document.getElementById('resultsCard').style.display = 'block';

            const annualSavings = getSimValue(s, 'annual_savings');
            const severanceCost = getSimValue(s, 'severance_cost');
            const netFirst = getSimValue(s, 'net_first_year');
            const morale = getSimValue(s, 'morale_impact');
            const profBefore = getSimValue(s, 'profit_before') || 0;
            const profAfter = getSimValue(s, 'profit_after') || 0;
            const riskScore = getSimValue(s, 'risk_score') || 0;

            document.getElementById('resultsContent').innerHTML = `
                <div class="row g-3 mb-4">
                    <div class="col-md-4"><div class="p-3" style="background: rgba(255,255,255,0.03); border-radius: 10px;"><small style="color: var(--text-secondary);">Annual Savings</small><div style="font-size: 18px; font-weight: 700; color: #10B981;">${fmtMoney(annualSavings)}</div></div></div>
                    <div class="col-md-4"><div class="p-3" style="background: rgba(255,255,255,0.03); border-radius: 10px;"><small style="color: var(--text-secondary);">Severance Cost</small><div style="font-size: 18px; font-weight: 700; color: #F59E0B;">${fmtMoney(severanceCost)}</div></div></div>
                    <div class="col-md-4"><div class="p-3" style="background: rgba(255,255,255,0.03); border-radius: 10px;"><small style="color: var(--text-secondary);">Net First Year</small><div style="font-size: 18px; font-weight: 700; color: ${(netFirst || 0) > 0 ? '#10B981' : '#EF4444'};">${(netFirst || 0) > 0 ? '+' : ''}${fmtMoney(netFirst)}</div></div></div>
                </div>
                <div class="row g-3 mb-4">
                    <div class="col-md-6"><div class="p-3" style="background: rgba(255,255,255,0.03); border-radius: 10px;"><small style="color: var(--text-secondary);">Morale Impact</small><div style="font-size: 18px; font-weight: 700; color: ${(morale || 0) > 15 ? '#EF4444' : '#F59E0B'};">${fmtNum(morale, 1)}%</div></div></div>
                    <div class="col-md-6"><div class="p-3" style="background: rgba(255,255,255,0.03); border-radius: 10px;"><small style="color: var(--text-secondary);">Profit Impact</small><div style="font-size: 18px; font-weight: 700; color: ${profAfter > profBefore ? '#10B981' : '#EF4444'};">${profAfter > profBefore ? '+' : ''}${fmtMoney(profAfter - profBefore)}</div></div></div>
                </div>
                <div class="mb-3"><span style="color: var(--text-secondary);">Risk Score:</span> <span class="badge-glass ${riskScore >= 70 ? 'badge-danger' : riskScore >= 40 ? 'badge-warning' : 'badge-success'}">${fmtNum(riskScore, 0)}</span></div>
                <div class="p-3 mb-3" style="background: rgba(255,255,255,0.02); border-radius: 8px;"><small style="color: var(--text-secondary); display: block; margin-bottom: 4px;">Analysis</small><p style="color: var(--text-primary); font-size: 13px; margin: 0;">${s.recommendations || ''}</p></div>
                <a href="/simulation/" class="btn btn-outline-glass">Back to Center</a>
            `;
        }
    });
});
</script>
{% endblock %}