{% extends "base_page.html" %}

{% block title %}Salary Management{% endblock %}

{% block content %}
<div class="main-content">
    <div class="content-header">
        <h1><i class="fas fa-money-bill-wave"></i> Salary Management</h1>
        <p>Manage employee salaries and payroll</p>
    </div>

    <div class="row">
        <!-- Salary Overview Cards -->
        <div class="col-md-3">
            <div class="stat-card">
                <div class="stat-icon">
                    <i class="fas fa-users"></i>
                </div>
                <div class="stat-content">
                    <h3>{{ total_employees or 0 }}</h3>
                    <p>Total Employees</p>
                </div>
            </div>
        </div>
        
        <div class="col-md-3">
            <div class="stat-card">
                <div class="stat-icon">
                    <i class="fas fa-dollar-sign"></i>
                </div>
                <div class="stat-content">
                    <h3>${{ total_payroll or 0 }}</h3>
                    <p>Total Payroll</p>
                </div>
            </div>
        </div>
        
        <div class="col-md-3">
            <div class="stat-card">
                <div class="stat-icon">
                    <i class="fas fa-chart-line"></i>
                </div>
                <div class="stat-content">
                    <h3>${{ avg_salary or 0 }}</h3>
                    <p>Average Salary</p>
                </div>
            </div>
        </div>
        
        <div class="col-md-3">
            <div class="stat-card">
                <div class="stat-icon">
                    <i class="fas fa-calendar-check"></i>
                </div>
                <div class="stat-content">
                    <h3>{{ current_month }}</h3>
                    <p>Current Period</p>
                </div>
            </div>
        </div>
    </div>

    <!-- Salary Management Table -->
    <div class="card">
        <div class="card-header">
            <h5><i class="fas fa-table"></i> Employee Salaries</h5>
            <div class="card-actions">
                <button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#addSalaryModal">
                    <i class="fas fa-plus"></i> Add Salary
                </button>
                <button class="btn btn-success" onclick="exportSalaries()">
                    <i class="fas fa-download"></i> Export
                </button>
            </div>
        </div>
        <div class="card-body">
            <!-- Search and Filter -->
            <div class="row mb-3">
                <div class="col-md-6">
                    <input type="text" class="form-control" id="searchEmployee" placeholder="Search employee...">
                </div>
                <div class="col-md-3">
                    <select class="form-control" id="departmentFilter">
                        <option value="">All Departments</option>
                        <!-- Departments will be populated dynamically -->
                    </select>
                </div>
                <div class="col-md-3">
                    <select class="form-control" id="monthFilter">
                        <option value="">Current Month</option>
                        <!-- Months will be populated dynamically -->
                    </select>
                </div>
            </div>

            <!-- Salary Table -->
            <div class="table-responsive">
                <table class="table table-striped" id="salaryTable">
                    <thead>
                        <tr>
                            <th>Employee</th>
                            <th>Position</th>
                            <th>Base Salary</th>
                            <th>Overtime</th>
                            <th>Bonuses</th>
                            <th>Deductions</th>
                            <th>Net Salary</th>
                            <th>Status</th>
                            <th>Actions</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% if salaries %}
                            {% for salary in salaries %}
                            <tr>
                                <td>
                                    <div class="employee-info">
                                        <strong>{{ salary.name }} {{ salary.last_name }}</strong>
                                        <small class="text-muted d-block">{{ salary.email }}</small>
                                    </div>
                                </td>
                                <td>{{ salary.position }}</td>
                                <td>${{ salary.base_salary }}</td>
                                <td>${{ salary.overtime_pay or 0 }}</td>
                                <td>${{ salary.bonuses or 0 }}</td>
                                <td>${{ salary.deductions or 0 }}</td>
                                <td>
                                    <strong class="text-success">${{ salary.net_salary }}</strong>
                                </td>
                                <td>
                                    <span class="badge badge-{{ salary.status_class }}">
                                        {{ salary.status }}
                                    </span>
                                </td>
                                <td>
                                    <button class="btn btn-sm btn-outline-primary" onclick="editSalary({{ salary.id }})">
                                        <i class="fas fa-edit"></i>
                                    </button>
                                    <button class="btn btn-sm btn-outline-info" onclick="viewPayslip({{ salary.id }})">
                                        <i class="fas fa-file-alt"></i>
                                    </button>
                                </td>
                            </tr>
                            {% endfor %}
                        {% else %}
                        <tr>
                            <td colspan="9" class="text-center text-muted">
                                <i class="fas fa-info-circle"></i> No salary records found
                            </td>
                        </tr>
                        {% endif %}
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

<!-- Add Salary Modal -->
<div class="modal fade" id="addSalaryModal" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Add Employee Salary</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <form id="addSalaryForm">
                <div class="modal-body">
                    <div class="row">
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label class="form-label">Employee</label>
                                <select class="form-control" name="employee_id" required>
                                    <option value="">Select Employee</option>
                                    <!-- Employees will be populated dynamically -->
                                </select>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label class="form-label">Salary Period</label>
                                <input type="month" class="form-control" name="salary_period" required>
                            </div>
                        </div>
                    </div>
                    
                    <div class="row">
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label class="form-label">Base Salary</label>
                                <input type="number" class="form-control" name="base_salary" step="0.01" required>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label class="form-label">Overtime Pay</label>
                                <input type="number" class="form-control" name="overtime_pay" step="0.01" value="0">
                            </div>
                        </div>
                    </div>
                    
                    <div class="row">
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label class="form-label">Bonuses</label>
                                <input type="number" class="form-control" name="bonuses" step="0.01" value="0">
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label class="form-label">Deductions</label>
                                <input type="number" class="form-control" name="deductions" step="0.01" value="0">
                            </div>
                        </div>
                    </div>
                    
                    <div class="mb-3">
                        <label class="form-label">Notes</label>
                        <textarea class="form-control" name="notes" rows="3"></textarea>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                    <button type="submit" class="btn btn-primary">Save Salary</button>
                </div>
            </form>
        </div>
    </div>
</div>

<script>
// Salary management JavaScript functions
function editSalary(salaryId) {
    // Implementation for editing salary
    console.log('Edit salary:', salaryId);
}

function viewPayslip(salaryId) {
    // Implementation for viewing payslip
    console.log('View payslip:', salaryId);
}

function exportSalaries() {
    // Implementation for exporting salaries
    window.location.href = '/salary/export';
}

// Form submission
document.getElementById('addSalaryForm').addEventListener('submit', function(e) {
    e.preventDefault();
    // Implementation for adding salary
    console.log('Add salary form submitted');
});

// Search functionality
document.getElementById('searchEmployee').addEventListener('input', function() {
    // Implementation for search
    console.log('Search:', this.value);
});
</script>
{% endblock %}