{% extends 'layouts/base.html' %}

{% block content %}

<div class="dashboard-header">
    <div>
        <h1>Employee Profiles</h1>
    </div>

    <div class="action-buttons">
        <a class="btn" href="{{ url_for('employees.export', **dict(filters.to_dict(), format='xlsx')) }}">Export XLSX</a>
        <a class="btn" href="{{ url_for('employees.export', **dict(filters.to_dict(), format='csv')) }}">Export CSV</a>
        <a class="btn" href="{{ url_for('employees.bulk_import') }}">Import</a>
        <a class="btn" href="{{ url_for('employees.create') }}">Add Employee</a>
        <a class="btn" href="{{ url_for('admin.users') }}">Manage User Access</a>
    </div>
</div>

<div class="panel">
    <form method="get" class="bulkbar">
        <input name="q" value="{{ filters.get('q', '') }}" placeholder="Name, email, code or designation">
        <select name="department">
            <option value="">All departments</option>
            {% for d in departments %}
            <option value="{{ d.department }}" {% if filters.get('department') == d.department %}selected{% endif %}>{{ d.department }}</option>
            {% endfor %}
        </select>
        <select name="active">
            <option value="">All employees</option>
            <option value="1" {% if filters.get('active') == '1' %}selected{% endif %}>Currently working</option>
            <option value="0" {% if filters.get('active') == '0' %}selected{% endif %}>Left the company</option>
        </select>
        <button class="btn btn-sm" type="submit">Filter</button>
        <a class="btn btn-sm" href="{{ url_for('employees.index') }}">Reset</a>
    </form>
</div>

<div class="stats-grid">
    <div class="stat-card">
        <div class="stat-icon">👥</div>
        <div>
            <h3>{{ employees|length }}</h3>
            <span>Total Employees</span>
        </div>
    </div>

    <div class="stat-card">
        <div class="stat-icon">🏢</div>
        <div>
            <h3>{{ employees|map(attribute='department')|unique|list|length }}</h3>
            <span>Departments</span>
        </div>
    </div>

    <div class="stat-card">
        <div class="stat-icon">👔</div>
        <div>
            <h3>{{ employees|selectattr('manager_id')|list|length }}</h3>
            <span>Managers</span>
        </div>
    </div>

    <div class="stat-card">
        <div class="stat-icon">₹</div>
        <div>
            <h3>{{ employees|map(attribute='salary')|reject('none')|sum }}</h3>
            <span>Payroll</span>
        </div>
    </div>
</div>

<div class="panel employee-panel">
    <div class="panel-header">
        <h2>Employee Directory</h2>
    </div>

    <div class="table-wrap">
        <table class="modern-table">
            <thead>
                <tr>
                    <th>Employee</th>
                    <th>Designation</th>
                    <th>Department</th>
                    <th>Manager</th>
                    <th>Joining</th>
                    <th>Salary</th>
                    <th>User Access</th>
                    <th>Bank / PAN</th>
                    <th>Action</th>
                </tr>
            </thead>
            <tbody>
                {% for e in employees %}
                <tr>
                    <td>
                        <div class="employee-info">
                            <img
                                class="employee-avatar"
                                src="{{ url_for('employees.employee_file', emp_id=e.id, filename=e.photo_path) if e.photo_path else url_for('static', filename='images/logo.png') }}"
                                alt="{{ e.user_name or 'Employee' }}"
                            >
                            <div>
                                <strong>{{ e.user_name or 'Unknown User' }}</strong>
                                <div class="employee-code">{{ e.employee_code }}</div>
                            </div>
                        </div>
                    </td>
                    <td><span class="badge badge-blue">{{ e.designation or '-' }}</span></td>
                    <td><span class="badge badge-purple">{{ e.department or '-' }}</span></td>
                    <td>{{ e.manager_name or '-' }}</td>
                    <td>{{ e.joining_date or '-' }}</td>
                    <td>₹{{ e.salary or 0 }}</td>
                    <td>
                        {% if e.user_id %}
                        <span class="badge">{{ e.user_role|replace('_', ' ')|title }}</span>
                        {% else %}
                        <span class="muted">No login account</span>
                        {% endif %}
                    </td>
                    <td>
                        {{ e.bank_name or '-' }}
                        {% if e.pan_number %}<br><small>PAN: {{ e.pan_number }}</small>{% endif %}
                    </td>
                    <td>
                        <a class="btn btn-sm" href="{{ url_for('employees.edit', emp_id=e.id) }}">Edit</a>
                        {% if e.user_id %}
                        <a class="btn btn-sm" href="{{ url_for('admin.users') }}">Manage Access</a>
                        {% endif %}
                        {% if session.user.role in ['super_admin', 'admin'] %}
                        <form method="post" action="{{ url_for('employees.delete', emp_id=e.id) }}"
                              onsubmit="return confirm('Delete this employee profile?')" style="display:inline;">
                            <button class="btn btn-sm danger" type="submit">Delete</button>
                        </form>
                        {% endif %}
                    </td>
                </tr>
                {% else %}
                <tr><td colspan="9" style="text-align:center;">No employees found.</td></tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
</div>

{% endblock %}