{% extends "base.html" %}
{% block title %}Employee Simulator{% endblock %}
{% block page_title %}Employee Simulator{% endblock %}
{% block content %}
<script>window.CURRENCY_SYMBOL = "{{ currency_symbol }}";</script>
<div class="glass-card p-4">
    <h5 class="mb-3" style="font-weight: 600;">Employee Simulator</h5>
    <div class="row g-4">
        <div class="col-lg-6">
            <div class="glass-card p-4">
                <h6 class="mb-3" style="font-weight: 600;">Hiring Impact Calculator</h6>
                <form onsubmit="event.preventDefault(); runHiringSim();">
                    <div class="mb-3"><label class="form-label">Role</label><input type="text" class="form-control-glass" id="role" placeholder="e.g. Software Engineer"></div>
                    <div class="mb-3"><label class="form-label">Annual Salary ({{ currency_symbol }})</label><input type="number" class="form-control-glass" id="salary" value="75000"></div>
                    <div class="mb-3"><label class="form-label">Benefits ({{ currency_symbol }})</label><input type="number" class="form-control-glass" id="benefits" value="15000"></div>
                    <div class="mb-3"><label class="form-label">Department</label><select class="form-control-glass" id="dept">
                        {% for d in departments %}<option value="{{ d.id }}">{{ d.name }}</option>{% endfor %}
                    </select></div>
                    <button type="submit" class="btn-glass w-100"><i class="fas fa-calculator me-2"></i>Calculate Impact</button>
                </form>
                <div id="hiringResult" class="mt-3" style="display: none;"></div>
            </div>
        </div>
        <div class="col-lg-6">
            <div class="glass-card p-4">
                <h6 class="mb-3" style="font-weight: 600;">Workforce Overview</h6>
                <!-- FIX: Use total_employee_count from company settings instead of employees|length -->
                <div class="mb-3"><small style="color: var(--text-secondary);">Total Employees</small><div style="font-size: 24px; font-weight: 700;">{{ total_employee_count }}</div></div>
                <div class="mb-3"><small style="color: var(--text-secondary);">Departments</small><div style="font-size: 24px; font-weight: 700; color: var(--accent-primary);">{{ departments|length }}</div></div>
                <!-- FIX: Show company name and employee count from settings for clarity -->
                {% if company %}
                <div class="mb-3"><small style="color: var(--text-secondary);">Company</small><div style="font-size: 16px; font-weight: 600;">{{ company.company_name }}</div></div>
                <div class="mb-3"><small style="color: var(--text-secondary);">Company Size</small><div style="font-size: 14px;">{{ company.company_size }}</div></div>
                {% endif %}
            </div>
        </div>
    </div>
</div>
{% endblock %}
{% block extra_js %}
<script>
window.CURRENCY_SYMBOL = "{{ currency_symbol }}";
function runHiringSim() {
    const salary = parseFloat(document.getElementById('salary').value);
    const benefits = parseFloat(document.getElementById('benefits').value);
    const total = salary + benefits;
    const roi = total * 2.5;
    document.getElementById('hiringResult').innerHTML = `
        <div class="p-3" style="background: rgba(0,212,255,0.05); border: 1px solid var(--accent-primary); border-radius: 10px;">
            <div class="row g-2">
                <div class="col-6"><small style="color: var(--text-secondary);">Total Cost</small><div style="font-weight: 700;">${window.CURRENCY_SYMBOL}${total.toLocaleString()}</div></div>
                <div class="col-6"><small style="color: var(--text-secondary);">Expected ROI</small><div style="font-weight: 700; color: #10B981;">${window.CURRENCY_SYMBOL}${roi.toLocaleString()}</div></div>
            </div>
        </div>`;
    document.getElementById('hiringResult').style.display = 'block';
}
</script>
{% endblock %}