{% extends "base.html" %}
{% block content %}
<div class="container-fluid mt-4">
    <div class="d-flex flex-wrap justify-content-between align-items-center mb-3">
        <div>
            <h3 class="mb-1">Bonus Preview</h3>
            <p class="text-muted mb-0">
                <strong>Policy:</strong> {{ policy.name }} |
                <strong>Type:</strong> {{ policy.bonus_type|title }} |
                <strong>FY:</strong> {{ run.fy_label }} |
                <strong>Payout Month:</strong> {{ run.payout_month }} |
                <strong>Status:</strong>
                <span class="badge bg-{% if run.status == 'draft' %}secondary{% elif run.status == 'frozen' %}warning text-dark{% elif run.status == 'posted' %}success{% else %}info{% endif %}">
                    {{ run.status|title }}
                </span>
            </p>
        </div>

        <div class="mt-2 mt-md-0 d-flex flex-wrap gap-2">
            {% if run.status == 'draft' %}
                <a href="{{ url_for('bonus.generate_bonus_preview', run_id=run.id) }}" class="btn btn-primary">
                    <i class="fas fa-sync-alt"></i> Regenerate Preview
                </a>
                <a href="{{ url_for('bonus.download_bonus_preview_excel', run_id=run.id) }}" class="btn btn-outline-success">
                    <i class="fas fa-file-excel"></i> Download Preview Excel
                </a>
                <button class="btn btn-warning" id="freezeBtn">
                    <i class="fas fa-lock"></i> Freeze Run
                </button>
            {% elif run.status == 'frozen' %}
                <a href="{{ url_for('bonus.download_frozen_bonus_excel', run_id=run.id) }}" class="btn btn-outline-success">
                    <i class="fas fa-file-excel"></i> Download Frozen Excel
                </a>
                <button class="btn btn-success" id="postBtn">
                    <i class="fas fa-paper-plane"></i> Post to Payroll
                </button>
            {% elif run.status == 'posted' %}
                <a href="{{ url_for('bonus.download_frozen_bonus_excel', run_id=run.id) }}" class="btn btn-outline-success">
                    <i class="fas fa-file-excel"></i> Download Frozen Excel
                </a>
                <button class="btn btn-danger" id="undoPostBtn">
                    <i class="fas fa-undo"></i> Undo Post to Payroll
                </button>
            {% endif %}
        </div>
    </div>

    <div class="card shadow-sm border-0">
        <div class="card-body">
            <div class="row g-2 mb-3">
                <div class="col-md-4">
                    <input type="text" id="searchInput" class="form-control" placeholder="Search employee...">
                </div>
            </div>

            <div class="table-responsive">
                <table class="table table-bordered table-hover align-middle" id="bonusTable">
                    <thead class="table-dark">
                        <tr>
                            <th style="width: 60px;">#</th>
                            <th>Employee Name</th>
                            <th>DOJ</th>
                            <th>Worked Days</th>
                            <th>Tenure</th>
                            <th>Slab</th>
                            <th>Base Amount</th>
                            <th>Override Amount</th>
                            <th>Final Amount</th>
                            <th style="width: 180px;">Action</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for entry in entries %}
                        <tr>
                            <td>{{ loop.index }}</td>
                            <td class="employee-name">{{ entry.employee_name }}</td>
                            <td>
                                {% if entry.doj %}
                                    {{ entry.doj.strftime('%d-%m-%Y') }}
                                {% endif %}
                            </td>
                            <td>{{ entry.worked_days }}</td>
                            <td>{{ entry.tenure_years }} years</td>
                            <td>{{ entry.slab_label or '-' }}</td>
                            <td>₹ {{ '%.2f'|format(entry.base_amount or 0) }}</td>
                            <td>
                                <input
                                    type="number"
                                    step="0.01"
                                    class="form-control override-input"
                                    value="{{ entry.override_amount if entry.override_amount is not none else '' }}"
                                    {% if run.status != 'draft' %}disabled{% endif %}
                                >
                            </td>
                            <td>
                                <span class="final-amount fw-bold text-success">
                                    ₹ {{ '%.2f'|format(entry.final_amount or 0) }}
                                </span>
                            </td>
                            <td>
                                {% if run.status == 'draft' %}
                                <button
                                    class="btn btn-sm btn-primary save-override-btn"
                                    data-entry-id="{{ entry.id }}">
                                    Save
                                </button>
                                {% else %}
                                <span class="text-muted">Locked</span>
                                {% endif %}
                            </td>
                        </tr>
                        {% else %}
                        <tr>
                            <td colspan="10" class="text-center text-muted py-4">
                                No bonus entries found. Generate preview first.
                            </td>
                        </tr>
                        {% endfor %}
                    </tbody>
                    {% if entries %}
                    <tfoot class="table-light">
                        <tr>
                            <th colspan="8" class="text-end">Total</th>
                            <th id="grandTotal">
                                ₹ {{ '%.2f'|format(entries|sum(attribute='final_amount')) }}
                            </th>
                            <th></th>
                        </tr>
                    </tfoot>
                    {% endif %}
                </table>
            </div>
        </div>
    </div>
</div>

<script>
document.addEventListener("DOMContentLoaded", function () {
    const searchInput = document.getElementById("searchInput");
    const tableRows = document.querySelectorAll("#bonusTable tbody tr");

    if (searchInput) {
        searchInput.addEventListener("keyup", function () {
            const value = this.value.toLowerCase();
            tableRows.forEach(row => {
                const empNameEl = row.querySelector(".employee-name");
                if (!empNameEl) return;
                const name = empNameEl.innerText.toLowerCase();
                row.style.display = name.includes(value) ? "" : "none";
            });
        });
    }

    document.querySelectorAll(".save-override-btn").forEach(button => {
        button.addEventListener("click", function () {
            const row = this.closest("tr");
            const entryId = this.dataset.entryId;
            const overrideInput = row.querySelector(".override-input");
            const finalAmountSpan = row.querySelector(".final-amount");
            const overrideAmount = overrideInput.value;

            fetch(`/bonus/entry/${entryId}/override`, {
                method: "POST",
                headers: {
                    "Content-Type": "application/json"
                },
                body: JSON.stringify({
                    override_amount: overrideAmount
                })
            })
            .then(response => response.json())
            .then(data => {
                if (data.error) {
                    alert(data.error);
                    return;
                }

                finalAmountSpan.innerText = `₹ ${parseFloat(data.final_amount).toFixed(2)}`;
                recalculateGrandTotal();
                alert("Override saved successfully.");
            })
            .catch(error => {
                console.error(error);
                alert("Something went wrong while saving override.");
            });
        });
    });

    const undoPostBtn = document.getElementById("undoPostBtn");
    if (undoPostBtn) {
        undoPostBtn.addEventListener("click", function () {
            if (!confirm("This will reverse the posted bonus from payroll and move the run back to Draft. Continue?")) return;

            fetch(`/bonus/run/{{ run.id }}/undo-post-to-payroll`, {
                method: "POST",
                headers: {
                    "Content-Type": "application/json"
                }
            })
            .then(response => response.json())
            .then(data => {
                if (data.error) {
                    alert(data.error);
                    return;
                }

                alert(`Undo completed. Reversed entries: ${data.undone_count}`);
                window.location.reload();
            })
            .catch(error => {
                console.error(error);
                alert("Unable to undo post to payroll.");
            });
        });
    }

    const freezeBtn = document.getElementById("freezeBtn");
    if (freezeBtn) {
        freezeBtn.addEventListener("click", function () {
            if (!confirm("Are you sure you want to freeze this bonus run?")) return;

            fetch(`/bonus/run/{{ run.id }}/freeze`, {
                method: "POST",
                headers: {
                    "Content-Type": "application/json"
                }
            })
            .then(response => response.json())
            .then(data => {
                if (data.error) {
                    alert(data.error);
                    return;
                }
                alert("Bonus run frozen successfully.");
                window.location.reload();
            })
            .catch(error => {
                console.error(error);
                alert("Unable to freeze bonus run.");
            });
        });
    }

    const postBtn = document.getElementById("postBtn");
    if (postBtn) {
        postBtn.addEventListener("click", function () {
            if (!confirm("Post this bonus run to payroll?")) return;

            fetch(`/bonus/run/{{ run.id }}/post-to-payroll`, {
                method: "POST",
                headers: {
                    "Content-Type": "application/json"
                }
            })
            .then(response => response.json())
            .then(data => {
                if (data.error) {
                    alert(data.error);
                    return;
                }

                let msg = `Posted count: ${data.posted_count}`;
                if (data.skipped && data.skipped.length > 0) {
                    msg += `\nSkipped: ${data.skipped.length}`;
                }

                alert(msg);
                window.location.reload();
            })
            .catch(error => {
                console.error(error);
                alert("Unable to post bonus to payroll.");
            });
        });
    }

    function recalculateGrandTotal() {
        let total = 0;
        document.querySelectorAll(".final-amount").forEach(el => {
            const amt = parseFloat(el.innerText.replace("₹", "").replace(/,/g, "").trim()) || 0;
            total += amt;
        });

        const grandTotal = document.getElementById("grandTotal");
        if (grandTotal) {
            grandTotal.innerText = `₹ ${total.toFixed(2)}`;
        }
    }
});
</script>
{% endblock %}