{% extends 'base.html' %}
{% load branch_tags %}
{% block title %}Salary Sheet{% endblock %}
{% block content %}
<div class="d-flex justify-content-between align-items-center mb-3 flex-wrap gap-2">
    <div><h4 class="text-white fw-bold mb-1">Monthly Salary Sheet</h4>
        <div class="text-secondary small">{{ month_label }} &middot; {{ branch_ctx.active_label }}</div></div>
    <div class="d-flex gap-2 align-items-center flex-wrap">
        <a href="?month={{ prev_month }}" class="btn btn-outline-light btn-sm"><i class="fas fa-chevron-left"></i></a>
        <form method="get" class="m-0"><input type="month" name="month" value="{{ month_value }}" class="form-control form-control-sm" onchange="this.form.submit()"></form>
        <a href="?month={{ next_month }}" class="btn btn-outline-light btn-sm"><i class="fas fa-chevron-right"></i></a>
        <a href="{% url 'salary_sheet_export' 'csv' %}?month={{ month_value }}" class="btn btn-outline-success btn-sm"><i class="fas fa-file-csv"></i> CSV</a>
        <a href="{% url 'salary_sheet_export' 'pdf' %}?month={{ month_value }}" class="btn btn-outline-danger btn-sm"><i class="fas fa-file-pdf"></i> PDF</a>
    </div>
</div>
{% include 'partials/scope_banner.html' %}

<div class="row g-3 mb-3">
    <div class="col-xl-3 col-md-6"><div class="stat-card"><div class="stat-icon" style="background:linear-gradient(135deg,#6366f1,#4f46e5)"><i class="fas fa-sack-dollar"></i></div><div class="stat-info"><small>Total Gross</small><h4>{{ totals.gross|floatformat:2 }}</h4></div></div></div>
    <div class="col-xl-3 col-md-6"><div class="stat-card"><div class="stat-icon" style="background:linear-gradient(135deg,#ef4444,#dc2626)"><i class="fas fa-scissors"></i></div><div class="stat-info"><small>Deductions (absence + advance + other)</small><h4>{{ totals.absence|add:totals.advance|add:totals.other|floatformat:2 }}</h4></div></div></div>
    <div class="col-xl-3 col-md-6"><div class="stat-card"><div class="stat-icon" style="background:linear-gradient(135deg,#8b5cf6,#7c3aed)"><i class="fas fa-file-invoice-dollar"></i></div><div class="stat-info"><small>Net Payable</small><h4>{{ totals.net|floatformat:2 }}</h4></div></div></div>
    <div class="col-xl-3 col-md-6"><div class="stat-card"><div class="stat-icon" style="background:linear-gradient(135deg,#10b981,#059669)"><i class="fas fa-circle-check"></i></div><div class="stat-info"><small>Paid / Pending</small><h4>{{ totals.paid|floatformat:0 }} <span class="text-secondary fs-6">/ {{ totals.pending|floatformat:0 }}</span></h4></div></div></div>
</div>

<div class="content-card mb-3"><div class="content-card-body d-flex flex-wrap gap-2 align-items-center justify-content-between">
    <form method="post" action="{% url 'salary_generate' %}" class="m-0">{% csrf_token %}<input type="hidden" name="month" value="{{ month_value }}">
        <button class="btn btn-primary btn-sm"><i class="fas fa-rotate"></i> {% if payslips %}Refresh{% else %}Generate{% endif %} Salary Sheet</button>
        {% if missing_count and payslips %}<span class="text-warning small ms-2">{{ missing_count }} employee(s) not on the sheet yet</span>{% endif %}
    </form>
    {% if payslips %}
    <div class="d-flex gap-2 flex-wrap">
        {% if counts.draft %}
        <form method="post" action="{% url 'salary_bulk' %}" class="m-0" onsubmit="return confirm('Approve all {{ counts.draft }} draft payslip(s)? They can no longer be edited.');">{% csrf_token %}
            <input type="hidden" name="month" value="{{ month_value }}"><input type="hidden" name="action" value="approve_all">
            <button class="btn btn-outline-info btn-sm"><i class="fas fa-check"></i> Approve All ({{ counts.draft }})</button></form>
        {% endif %}
        {% if counts.draft or counts.approved %}
        <button class="btn btn-success btn-sm" data-bs-toggle="modal" data-bs-target="#payAllModal"><i class="fas fa-money-bill-wave"></i> Mark All Paid</button>
        {% endif %}
    </div>
    {% endif %}
</div></div>

<div class="content-card"><div class="content-card-body p-0"><div class="table-responsive">
<table class="table mb-0">
    <thead><tr><th>Employee</th>{% if branch_ctx.is_multi %}<th>Branch</th>{% endif %}<th class="text-center">Days</th><th class="text-end">Gross</th><th class="text-end">Absence</th><th class="text-end">OT</th><th class="text-end">Bonus</th><th class="text-end">Advance</th><th class="text-end">Other</th><th class="text-end">Net Salary</th><th>Status</th><th></th></tr></thead>
    <tbody>
    {% for p in payslips %}
    <tr>
        <td class="text-white"><a href="{% url 'payslip_detail' p.pk %}" class="text-decoration-none" style="color:#10b981">{{ p.employee.full_name }}</a><div class="text-secondary" style="font-size:11px">{{ p.employee.employee_code }}</div></td>
        {% if branch_ctx.is_multi %}<td><span class="branch-chip">{{ p.branch_id|branch_label:branch_map }}</span></td>{% endif %}
        <td class="text-center" title="Present {{ p.present_days }} · Late {{ p.late_days }} · Half {{ p.half_days }} · Absent {{ p.absent_days }} · Leave {{ p.paid_leave_days }}+{{ p.unpaid_leave_days }} · Not marked {{ p.unmarked_days }}">
            <span class="text-success">{{ p.present_days|add:p.late_days }}</span> / <span class="text-danger">{{ p.deduction_days|floatformat:"-1" }}</span>
            {% if p.unmarked_days %}<i class="fas fa-circle-question text-warning ms-1" title="{{ p.unmarked_days }} working day(s) have no attendance"></i>{% endif %}</td>
        <td class="text-end">{{ p.gross_salary|floatformat:2 }}</td>
        <td class="text-end text-danger">{{ p.absence_deduction|floatformat:2 }}</td>
        <td class="text-end">{{ p.overtime_amount|floatformat:2 }}</td>
        <td class="text-end">{{ p.bonus|floatformat:2 }}</td>
        <td class="text-end text-warning">{{ p.advance_deduction|floatformat:2 }}</td>
        <td class="text-end">{{ p.other_deduction|floatformat:2 }}</td>
        <td class="text-end fw-bold text-white">{{ p.net_salary|floatformat:2 }}</td>
        <td><span class="pill pill-{{ p.status }}">{{ p.get_status_display }}</span></td>
        <td class="text-nowrap">
            <a href="{% url 'payslip_detail' p.pk %}" class="btn btn-outline-light btn-sm" title="View / print"><i class="fas fa-eye"></i></a>
            {% if not p.is_locked %}<a href="{% url 'payslip_edit' p.pk %}" class="btn btn-outline-light btn-sm" title="Bonus / deductions"><i class="fas fa-pen"></i></a>{% endif %}
        </td>
    </tr>
    {% empty %}<tr><td colspan="12" class="text-center text-secondary py-5">No salary sheet for {{ month_label }} yet. Click <strong>Generate Salary Sheet</strong> above.</td></tr>{% endfor %}
    </tbody>
    {% if payslips %}<tfoot><tr class="fw-bold text-white">
        <td colspan="{% if branch_ctx.is_multi %}3{% else %}2{% endif %}">TOTAL</td><td class="text-end">{{ totals.gross|floatformat:2 }}</td><td class="text-end">{{ totals.absence|floatformat:2 }}</td>
        <td class="text-end">{{ totals.overtime|floatformat:2 }}</td><td class="text-end">{{ totals.bonus|floatformat:2 }}</td><td class="text-end">{{ totals.advance|floatformat:2 }}</td>
        <td class="text-end">{{ totals.other|floatformat:2 }}</td><td class="text-end">{{ totals.net|floatformat:2 }}</td><td colspan="2"></td></tr></tfoot>{% endif %}
</table></div></div></div>
<div class="text-secondary small mt-2">Days = attended / deducted. <i class="fas fa-circle-question text-warning"></i> means some working days have no attendance record (counted as present unless you change this in Holidays &amp; Rules).</div>

<div class="modal fade" id="payAllModal" tabindex="-1"><div class="modal-dialog"><form method="post" action="{% url 'salary_bulk' %}" class="modal-content" style="background:#111827">
    {% csrf_token %}<input type="hidden" name="month" value="{{ month_value }}"><input type="hidden" name="action" value="pay_all">
    <div class="modal-header border-secondary"><h5 class="modal-title text-white">Mark all payslips as paid</h5><button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button></div>
    <div class="modal-body">
        <p class="text-secondary small">Records salary payment for every unpaid payslip on this sheet and recovers any salary advance.</p>
        <div class="mb-3"><label class="form-label">Payment date</label>{{ pay_form.paid_date }}</div>
        <div class="mb-3"><label class="form-label">Method</label>{{ pay_form.payment_method }}</div>
        <div class="mb-1"><label class="form-label">Reference</label>{{ pay_form.reference }}</div>
    </div>
    <div class="modal-footer border-secondary"><button type="button" class="btn btn-outline-light" data-bs-dismiss="modal">Cancel</button><button class="btn btn-success">Confirm payment</button></div>
</form></div></div>
{% endblock %}