{% extends "finance/base.html" %}
{% load static %}
{% load custom_filters %}

{% block content %}
<style>
    .table .table-dark th {
        background-color: rgb(80, 90, 97) !important;
        border-color: rgb(70, 80, 87);
    }

    .add-button {
        background-color: rgb(80, 90, 97);
        color: white;
        border: none;
    }

    .add-button:hover {
        background-color: rgb(70, 80, 87);
        color: white;
    }

    .table-container {
        overflow-x: auto;
        margin-top: 1rem;
    }

    .center-label {
        display: block;
        width: 100%;
        text-align: center;
    }
</style>

<div class="d-flex justify-content-between align-items-center" style="padding: 1rem;">
    <h2 style="font-size: 3rem; font-weight: 500; margin: 0;">WHT Codes</h2>
    <input type="text" id="searchInput" class="form-control" placeholder="Search WHT Code..."
        style="max-width: 300px; margin-right: 1rem;">
    <div>
        <button type="button" class="btn btn-secondary" data-bs-toggle="modal" data-bs-target="#whtModal"
            onclick="resetForm()">
            Add WHT Code
        </button>
        <a href="{% url 'generate_pdf_wht' %}" class="btn btn-secondary">
            Generate PDF Report
        </a>
        <a href="{% url 'export_to_excel_wht' %}" class="btn btn-secondary">Export to Excel</a>
    </div>

</div>

<div class="table-container with-bottom-padding">
    <table class="table table-striped table-hover" id="whtTable">
        <thead class="table-dark">
            <tr>
                <th scope="col" class="align-middle">No</th>
                <th scope="col" class="align-middle">WHT Code</th>
                <th scope="col" class="align-middle">Gov. WHT Code</th>
                <th scope="col" class="align-middle">Description</th>
                <th scope="col" class="align-middle">Base Pctg.</th>
                <th scope="col" class="align-middle">WHT Pctg.</th>
                <th scope="col" class="align-middle">MAP</th>
                <th scope="col" class="align-middle">KJS</th>
                <th scope="col" class="align-middle">Account No</th>
                <th scope="col" class="align-middle">Actions</th>
            </tr>
        </thead>
        <tbody>
            {% if wht %}
            {% for whtcode in wht %}
            <tr data-id="{{ whtcode.id }}" data-whtcode="{{ whtcode.whtcode }}" data-govwht="{{ whtcode.govwht }}"
                data-descript="{{ whtcode.descript }}" data-basepctg="{{ whtcode.basepctg }}"
                data-whtpctg="{{ whtcode.whtpctg }}" data-map="{{ whtcode.map }}" data-kjs="{{ whtcode.kjs }}"
                data-acct_no="{{ whtcode.wht.acct_no }}">

                <td>{{ forloop.counter }}</td> <!-- Added row number -->
                <td>{{ whtcode.whtcode }}</td>
                <td>{{ whtcode.govwht }}</td>
                <td>{{ whtcode.descript }}</td>
                <td>{{ whtcode.basepctg }}</td>
                <td>{{ whtcode.whtpctg }}</td>  
                <td>{{ whtcode.map }}</td>
                <td>{{ whtcode.kjs }}</td>
                <td>
                    {% if whtcode.wht %}
                    {{ whtcode.wht.acct_no|format_acct_no }} - {{ whtcode.wht.acct_name }}
                    {% endif %}
                </td>

                <td>
                    <div class="d-flex gap-1">
                        <button type="button" class="btn btn-sm btn-secondary" onclick="editWht('{{ whtcode.id }}')">
                            <i class="bi bi-pencil-square"></i>
                        </button>
                        <form method="POST" action="{% url 'delete_wht' whtcode.id %}">
                            {% csrf_token %}
                            <button type="submit" class="btn btn-sm btn-danger"
                                onclick="return confirm('Are you sure you want to delete this WHT Code?')">
                                <i class="bi bi-trash"></i>
                            </button>
                        </form>
                    </div>
                </td>
            </tr>
            {% endfor %}
            {% else %}
            <tr>
                <td colspan="7" class="text-center">No WHT Code found</td>
            </tr>
            {% endif %}
        </tbody>
    </table>
</div>

<script>
    document.getElementById('searchInput').addEventListener('keyup', function () {
        let filter = this.value.toLowerCase();
        let rows = document.querySelectorAll('#whtTable tbody tr');

        rows.forEach(row => {
            let text = row.textContent.toLowerCase();
            row.style.display = text.includes(filter) ? '' : 'none';
        });
    });
    function editWht(whtId) {
        document.getElementById('whtModalLabel').innerText = 'Edit WHT Code';
        document.getElementById('whtForm').action = "{% url 'edit_wht' 0 %}".replace('0', whtId);

        const row = document.querySelector(`tr[data-id="${whtId}"]`);
        if (row) {
            document.getElementById('whtcode').value = row.dataset.whtcode;
            document.getElementById('govwht').value = row.dataset.govwht;
            document.getElementById('descript').value = row.dataset.descript;
            document.getElementById('basepctg').value = row.dataset.basepctg;
            document.getElementById('whtpctg').value = row.dataset.whtpctg;
            document.getElementById('map').value = row.dataset.map;
            document.getElementById('kjs').value = row.dataset.kjs;
            document.getElementById('acct_no').value = row.dataset.acct_no;
        }

        const whtModal = new bootstrap.Modal(document.getElementById('whtModal'));
        whtModal.show();
    }       
</script>

<!-- wht Modal -->
<div class="modal fade" id="whtModal" tabindex="-1" aria-labelledby="whtModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="whtModalLabel">Add WHT</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <form id="whtForm" method="POST" action="{% url 'save_wht' %}">
                    {% csrf_token %}
                    <div class="mb-3">
                        <label for="whtcode" class="form-label">WHT Code</label>
                        <input type="text" class="form-control" id="whtcode" name="whtcode" required>
                    </div>
                    <div class="mb-3">
                        <label for="govwht" class="form-label">Gov. WHT Code</label>
                        <input type="govwht" class="form-control" id="govwht" name="govwht" required>
                    </div>
                    <div class="mb-3">
                        <label for="descript" class="form-label">Description</label>
                        <input type="descript" class="form-control" id="descript" name="descript" required>
                    </div>
                    <div class="mb-3">
                        <label for="basepctg" class="form-label">Base Pctg.</label>
                        <input type="basepctg" class="form-control" id="basepctg" name="basepctg" required>
                    </div>
                    <div class="mb-3">
                        <label for="whtpctg" class="form-label">WHT Pctg.</label>
                        <input type="whtpctg" class="form-control" id="whtpctg" name="whtpctg" required>
                    </div>
                    <div class="mb-3">
                        <label for="map" class="form-label">MAP</label>
                        <input type="map" class="form-control" id="map" name="map" required>
                    </div>
                    <div class="mb-3">
                        <label for="kjs" class="form-label">KJS</label>
                        <input type="kjs" class="form-control" id="kjs" name="kjs" required>
                    </div>
                    <div class="mb-3">
                        <label for="acct_no" class="form-label">Account No</label>
                        <select class="form-control" id="acct_no" name="acct_no" required>
                            <option value="">-- Select Account No --</option>
                            {% for wht in accounts %}
                            <!-- <option value="{{ wht.acct_no }}">{{ wht.acct_no }} - {{ wht.acct_name }}</option> -->
                            <option value="{{ wht.acct_no }}">{{ wht.acct_no|format_acct_no }} - {{ wht.acct_name }}
                            </option>
                            {% endfor %}
                        </select>

                    </div>
                    <div class="modal-footer">
                        <button type="submit" class="btn btn-primary">Save</button>
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

{% endblock %}