{% extends "base.html" %}
{% block title %}Dashboard · WageWise Neo{% endblock %}
{% block content %}

<!-- Company banner -->
<div style="background:var(--color-ink);color:var(--color-paper);border-radius:8px;padding:20px 28px;margin-bottom:24px;">
    <div style="display:flex;justify-content:space-between;align-items:flex-start;flex-wrap:wrap;gap:12px;">
        <div style="display:flex;align-items:center;gap:14px;">
            {% if has_logo %}
            <div style="background:var(--color-paper); border-radius:6px; padding:6px 10px; flex-shrink:0;">
                <img src="{{ url_for('company_logo_image') }}?v={{ logo_version }}" alt="{{ co_info.name if co_info else 'Company' }} logo"
                     style="max-height:44px; max-width:100px; display:block;">
            </div>
            {% endif %}
            <div>
                <div style="font-family:var(--font-display);font-size:22px;font-weight:700;margin-bottom:4px;">
                    {{ co_info.name if co_info and co_info.name else 'Your Company' }}
                </div>
                {% if co_info and co_info.address %}
                <div style="font-size:13px;color:rgba(250,247,239,0.65);margin-bottom:2px;">{{ co_info.address }}</div>
                {% endif %}
                {% if co_info and co_info.state %}
                <div style="font-size:12px;color:rgba(250,247,239,0.45);">{{ co_info.state }}</div>
                {% endif %}
            </div>
        </div>
        <div style="text-align:right;">
            <div style="font-size:11px;color:rgba(250,247,239,0.4);font-family:var(--font-data);">WageWise Neo v{{ wagewise_version }}</div>
            {% if license_info %}
            <div style="font-size:12px;color:rgba(250,247,239,0.7);margin-top:3px;">
                Licensed · <strong>{{ license_info.max_users }}</strong> users
            </div>
            <div style="font-size:12px;margin-top:2px;color:{{ 'rgba(250,247,239,0.5)' if license_info.days_left > 60 else '#f4c26a' }};">
                Valid until {{ license_info.valid_until }}
            </div>
            {% else %}
            <div style="font-size:12px;color:#f8b4a8;margin-top:4px;">
                &#9888; <a href="{{ url_for('license_settings') }}" style="color:#f8b4a8;text-decoration:underline;">Activate license</a>
            </div>
            {% endif %}
        </div>
    </div>
</div>

<div class="page-header" style="margin-bottom:16px;">
    <div>
        <div class="eyebrow">{{ today }}</div>
        <h1>Dashboard</h1>
    </div>
</div>

<!-- Top stat cards -->
<div class="card-grid" style="margin-bottom:20px;">
    <div class="stat-card">
        <div class="label">ACTIVE EMPLOYEES</div>
        <div class="value">{{ active_count }}</div>
        <div class="sub">{{ total_count }} total on record</div>
    </div>
    <div class="stat-card">
        <div class="label">MALE EMPLOYEES</div>
        <div class="value">{{ male_count }}</div>
        <div class="sub">active, gender = Male</div>
    </div>
    <div class="stat-card">
        <div class="label">FEMALE EMPLOYEES</div>
        <div class="value">{{ female_count }}</div>
        <div class="sub">active, gender = Female</div>
    </div>
    <div class="stat-card">
        <div class="label">MONTHLY GROSS PAYROLL</div>
        <div class="value">&#8377;{{ "{:,.0f}".format(total_gross) }}</div>
        <div class="sub">Basic + DA + HRA + Other</div>
    </div>
</div>

<!-- Attendance today -->
<div class="card-grid" style="margin-bottom:20px;">
    <div class="stat-card" style="border-left:3px solid var(--color-paid);">
        <div class="label">PRESENT TODAY</div>
        <div class="value" style="color:var(--color-paid);">{{ present_today }}</div>
        <div class="sub">attendance marked P or HD</div>
    </div>
    <div class="stat-card" style="border-left:3px solid var(--color-due);">
        <div class="label">ABSENT / NOT MARKED</div>
        <div class="value" style="color:var(--color-due);">{{ absent_employees | length }}</div>
        <div class="sub">of {{ active_count }} active employees</div>
    </div>
</div>

<!-- Two column layout -->
<div style="display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:16px;">

    <!-- Absent today -->
    <div class="panel" style="margin:0;">
        <div class="panel-title">
            <h2>Absent / Not Marked Today</h2>
            <a href="{{ url_for('attendance') }}" style="font-size:12px;">Mark attendance &rarr;</a>
        </div>
        {% if absent_employees %}
        <table class="ledger-table">
            <thead><tr><th>Name</th><th>Code</th><th>Designation</th></tr></thead>
            <tbody>
                {% for e in absent_employees %}
                <tr>
                    <td class="name-cell">{{ e.full_name }}</td>
                    <td class="meta">{{ e.employee_code or '—' }}</td>
                    <td class="meta">{{ e.designation or '—' }}</td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
        {% else %}
        <p class="meta" style="padding:12px 0;">All employees marked present today &#10003;</p>
        {% endif %}
    </div>

    <!-- OT opted employees -->
    <div class="panel" style="margin:0;">
        <div class="panel-title">
            <h2>OT Opted Employees</h2>
            <a href="{{ url_for('ot_attendance') }}" style="font-size:12px;">OT Attendance &rarr;</a>
        </div>
        {% if ot_employees %}
        <table class="ledger-table">
            <thead><tr><th>Name</th><th>Code</th><th>Rate/Hr</th></tr></thead>
            <tbody>
                {% for e in ot_employees %}
                <tr>
                    <td class="name-cell">{{ e.full_name }}</td>
                    <td class="meta">{{ e.employee_code or '—' }}</td>
                    <td class="meta">&#8377;{{ "{:,.0f}".format(e.overtime_rate_per_hour or 0) }}</td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
        {% else %}
        <p class="meta" style="padding:12px 0;">No employees have opted for OT.</p>
        {% endif %}
    </div>

</div>

<!-- Leave in next 15 days -->
<div class="panel">
    <div class="panel-title">
        <h2>Leave Applications — Next 15 Days</h2>
        <a href="{{ url_for('leave_register', employee_id=0) if False else url_for('employees') }}" style="font-size:12px;">Leave Register &rarr;</a>
    </div>
    {% if leave_upcoming %}
    <table class="ledger-table">
        <thead>
            <tr><th>Employee</th><th>Code</th><th>Type</th><th>From</th><th>To</th><th>Days</th></tr>
        </thead>
        <tbody>
            {% for lv in leave_upcoming %}
            <tr>
                <td class="name-cell">{{ lv.full_name }}</td>
                <td class="meta">{{ lv.employee_code or '—' }}</td>
                <td><span class="stamp">{{ lv.leave_type }}</span></td>
                <td class="meta">{{ lv.from_date }}</td>
                <td class="meta">{{ lv.to_date }}</td>
                <td class="meta">{{ lv.days }}</td>
            </tr>
            {% endfor %}
        </tbody>
    </table>
    {% else %}
    <p class="meta" style="padding:12px 0;">No leave applications for the next 15 days.</p>
    {% endif %}
</div>

{% endblock %}