{% extends "base.html" %}
{% block content %}
<div class="container mt-4">
    <h3 class="mb-4"><i class="bi bi-table"></i> Salary Structure Overview</h3>

    <!-- Search + Department Filter -->
    <form method="GET" class="row g-2 mb-4">
        <div class="col-md-4">
            <input type="text" name="search" value="{{ search }}" class="form-control" placeholder="Search by employee name">
        </div>
        <div class="col-md-4">
            <select name="department" class="form-select">
                <option value="">All Departments</option>
                {% for dept in departments %}
                    <option value="{{ dept.name }}" {% if dept.name == selected_department %}selected{% endif %}>{{ dept.name }}</option>
                {% endfor %}
            </select>
        </div>
        <div class="col-md-2">
            <button type="submit" class="btn btn-primary w-100"><i class="bi bi-search"></i> Filter</button>
        </div>
        <div class="col-md-2">
            <a href="{{ url_for('payroll.view_salary_structures') }}" class="btn btn-secondary w-100">Reset</a>
        </div>
    </form>

    <!-- Salary Table -->
    <table id="salaryTable" class="table table-bordered table-striped">
        <thead>
            <tr>
                <th>Employee</th>
                <th>Emp Code</th>
                <th>Gross Earnings (₹)</th>
                <th>Total Deductions (₹)</th>
                <th>Net Pay (₹)</th>
                <th>CTC (₹)</th>
                <th>Actions</th>
            </tr>
        </thead>
        <tbody>
            {% for row in data %}
            <tr>
                <td>{{ row.employee.full_name }}</td>
                <td>{{ row.employee.employee_code }}</td>
                <td>{{ "%.2f"|format(row.gross) }}</td>
                <td>{{ "%.2f"|format(row.deductions) }}</td>
                <td>{{ "%.2f"|format(row.net_pay) }}</td>
                <td>{{ "%.2f"|format(row.ctc) }}</td>
                <td>
                    <a href="{{ url_for('payroll.view_salary_structure_detail', employee_id=row.employee.id) }}" class="btn btn-sm btn-info">
                        <i class="bi bi-eye"></i> View
                    </a>
                    <a href="{{ url_for('payroll.salary_structure', employee_id=row.employee.id) }}" class="btn btn-sm btn-warning">
                        <i class="bi bi-pencil-square"></i> Edit
                    </a>
                </td>
            </tr>
            {% endfor %}
        </tbody>
    </table>
</div>

<link rel="stylesheet" href="https://cdn.datatables.net/1.13.4/css/jquery.dataTables.min.css">
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.datatables.net/1.13.4/js/jquery.dataTables.min.js"></script>

<script>
    $(document).ready(function() {
        $('#salaryTable').DataTable();
    });
</script>
{% endblock %}