{% extends 'base.html' %}
{% load static %}

{% block title %}Generate Payslips - HR - Optinet Global Links{% endblock %}

{% block content %}
<div class="container-fluid">
    <div class="row">
        <div class="col-12">
            <div class="d-flex justify-content-between align-items-center mb-4">
                <h1 class="h3">Generate Payslips</h1>
                <a href="{% url 'hr:payslip_list' %}" class="btn btn-secondary">
                    <i class="fas fa-arrow-left"></i> Back to Payslips
                </a>
            </div>
        </div>
    </div>

    <!-- HR Navigation -->
    {% include 'hr/hr_nav.html' %}

    <div class="card">
        <div class="card-header bg-success text-white">
            <h5 class="card-title mb-0">
                <i class="fas fa-calculator"></i> Generate Monthly Payslips
            </h5>
        </div>
        <div class="card-body">
            <div class="alert alert-info">
                <i class="fas fa-info-circle"></i>
                <strong>Information:</strong> This will generate payslips for all active employees for the current month. 
                Existing payslips for the current period will not be duplicated.
            </div>

            <div class="mb-4">
                <h6>Current Month Details:</h6>
                <ul class="list-unstyled">
                    <li><strong>Period:</strong> {{ "now"|date:"F Y" }}</li>
                    <li><strong>Pay Date:</strong> {{ "now"|date:"Y-m-t" }}</li>
                    <li><strong>Active Employees:</strong> Will be calculated during generation</li>
                </ul>
            </div>

            <div class="alert alert-warning">
                <i class="fas fa-exclamation-triangle"></i>
                <strong>Note:</strong> Make sure all bonuses and deductions for this month have been properly configured 
                before generating payslips.
            </div>

            <form method="POST">
                {% csrf_token %}
                <div class="row mb-4">
                    <div class="col-md-6">
                        <label for="month" class="form-label">Month</label>
                        <select name="month" id="month" class="form-select" required>
                            {% for value, name in months %}
                                <option value="{{ value }}" {% if value == current_month %}selected{% endif %}>
                                    {{ name }}
                                </option>
                            {% endfor %}
                        </select>
                    </div>
                    <div class="col-md-6">
                        <label for="year" class="form-label">Year</label>
                        <select name="year" id="year" class="form-select" required>
                            {% for year in years %}
                                <option value="{{ year }}" {% if year == current_year %}selected{% endif %}>{{ year }}</option>
                            {% endfor %}
                        </select>
                    </div>
                </div>

                <div class="mb-3">
                    <label for="employee_id" class="form-label">
                        Individual Employee (optional)
                        <small class="text-muted">Leave blank to process all active employees</small>
                    </label>
                    <select name="employee_id" id="employee_id" class="form-select">
                        <option value="">Process All Active Employees</option>
                        {% for employee in employees %}
                            <option value="{{ employee.employee_id }}">
                                {{ employee.employee_id }} - {{ employee.full_name }}
                                {% if employee.employment_status == 'terminated' %}(Terminated){% endif %}
                            </option>
                        {% endfor %}
                    </select>
                </div>

                <div class="d-flex justify-content-end">
                    <a href="{% url 'hr:payslip_list' %}" class="btn btn-secondary me-2">Cancel</a>
                    <button type="submit" class="btn btn-success" onclick="return confirm('Are you sure you want to generate payslips for the selected period?')">
                        <i class="fas fa-calculator"></i> Generate Payslips
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>
{% endblock %}