{% extends "scm/base.html" %}
{% load static %}

{% 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;
    }

    .modal-vendordetail {
        width: 80% !important;
        max-width: none;
    }

    .modal-vendordetail .modal-content {
        height: 70vh;
        overflow-y: auto;
    }
</style>

<div class="d-flex justify-content-between align-items-center" style="padding: 1rem;">
    <h2 style="font-size: 3rem; font-weight: 500; margin: 0;">Vendor Detail</h2>
    <input type="text" id="searchInput" class="form-control" placeholder="Search Bank Vendor ..."
        style="max-width: 300px; margin-right: 1rem;">
    <div>
        <button type="button" class="btn btn-secondary" data-bs-toggle="modal" data-bs-target="#vendordtlModal"
            onclick="resetForm('{{ vendorcode }}', '{{ vendorname }}')">
            Add Bank Vendor
        </button>
    </div>
</div>

<div class="table-container with-bottom-padding">
    <table class="table table-striped table-hover" id="vendordtlTable">
        <thead class="table-dark">
            <tr>
                <th scope="col" class="align-middle">No</th>
                <th scope="col" class="align-middle">Vendor#</th>
                <!-- <th scope="col" class="align-middle">Vendor Name</th> -->
                <th scope="col" class="align-middle">Remittance Addr.</th>
                <th scope="col" class="align-middle">Currency</th>
                <th scope="col" class="align-middle">Bank Code</th>
                <th scope="col" class="align-middle">Branch</th>
                <th scope="col" class="align-middle">Address</th>
                <th scope="col" class="align-middle">Bank Acct.#</th>
                <th scope="col" class="align-middle">Swift Code</th>
                <th scope="col" class="align-middle">Actions</th>
            </tr>
        </thead>
        <tbody>
            {% if vendordtl %}
            {% for vendorcode in vendordtl %}
            <tr data-id="{{ vendorcode.id }}" data-vendorcode="{{ vendorcode.vendordtl.vendorcode }}"
                data-rema="{{ vendorcode.rema }}"
                data-currsign="{{ vendorcode.currsigndtl.currsign }}" data-bankcode="{{ vendorcode.bankcodedtl.bankcode }}"
                data-branch="{{ vendorcode.branch }}" data-bankaddress="{{ vendorcode.bankaddress }}"
                data-accountno="{{ vendorcode.accountno }}" data-swiftcode="{{ vendorcode.swiftcode }}">
                <td>{{ forloop.counter }}</td> <!-- Added row number -->
                <td>{{ vendorcode.vendordtl.vendorcode|default_if_none:"" }}</td>
                <!-- <td>{{ vendorcode.vendordtl.vendorname|default_if_none:"" }}</td> -->
                <td>{{ vendorcode.rema|default_if_none:"" }}</td>
                <td>{{ vendorcode.currsigndtl.currsign|default_if_none:"" }}</td>
                <td>{{ vendorcode.bankcodedtl.bankcode|default_if_none:"" }}</td>
                <td>{{ vendorcode.branch|default_if_none:"" }}</td>
                <td>{{ vendorcode.bankaddress|default_if_none:"" }}</td>
                <td>{{ vendorcode.accountno|default_if_none:"" }}</td>
                <td>{{ vendorcode.swiftcode|default_if_none:"" }}</td>
                <td>
                    <div class="d-flex gap-1">
                        <button type="button" class="btn btn-sm btn-secondary"
                            onclick="editVendordtl('{{ vendorcode.id }}')">
                            <i class="bi bi-pencil-square"></i>
                        </button>
                        <form method="POST" action="{% url 'delete_vendordtl' vendorcode.id %}">
                            {% csrf_token %}
                            <button type="submit" class="btn btn-sm btn-danger"
                                onclick="return confirm('Are you sure you want to delete this Bank Vendor ?')">
                                <i class="bi bi-trash"></i>
                            </button>
                        </form>
                    </div>
                </td>
            </tr>
            {% endfor %}
            {% else %}
            <tr>
                <td colspan="7" class="text-center">No Bank Vendor found</td>
            </tr>
            {% endif %}
        </tbody>
    </table>
</div>

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

        rows.forEach(row => {
            let text = row.textContent.toLowerCase();
            row.style.display = text.includes(filter) ? '' : 'none';
        });
    });
    function editVendordtl(vendordtlId) {
        document.getElementById('vendordtlModalLabel').innerText = 'Edit Bank Vendor';
        document.getElementById('vendordtlForm').action = "{% url 'save_vendordtl_with_id' 0 %}".replace('0', vendordtlId);

        const row = document.querySelector(`tr[data-id="${vendordtlId}"]`);
        if (row) {
            document.getElementById('vendorcode').value = row.dataset.vendorcode;
            document.getElementById('rema').value = row.dataset.rema;
            document.getElementById('currsign').value = row.dataset.currsign;
            document.getElementById('bankcode').value = row.dataset.bankcode;
            document.getElementById('branch').value = row.dataset.branch;
            document.getElementById('bankaddress').value = row.dataset.bankaddress;
            document.getElementById('accountno').value = row.dataset.accountno;
            document.getElementById('swiftcode').value = row.dataset.swiftcode;
        }

        const vendordtlModal = new bootstrap.Modal(document.getElementById('vendordtlModal'));
        vendordtlModal.show();
    }

    function resetForm(vendorcode = '', vendorname = '') {
        document.getElementById('vendordtlForm').reset();

        // Isi dan set readonly untuk vendorcode dan vendorname
        document.getElementById('vendorcode').value = vendorcode;
        document.getElementById('vendorcode').readOnly = true;

        // Kosongkan field lain jika perlu
        document.getElementById('rema').value = '';
        document.getElementById('currsign').value = '';
        document.getElementById('bankcode').value = '';
        document.getElementById('branch').value = '';
        document.getElementById('bankaddress').value = '';
        document.getElementById('accountno').value = '';
        document.getElementById('swiftcode').value = '';
    }
</script>

<!-- vendordtl Modal -->
<div class="modal fade" id="vendordtlModal" tabindex="-1" aria-labelledby="vendordtlModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="vendordtlModalLabel">Add Bank Vendor</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>

                <!-- <button type="button" class="btn btn-secondary" data-bs-toggle="modal" data-bs-target="#vendordtlModal"
                    onclick="resetForm('{{ vendorcode }}', '{{ vendorname }}')">
                    Add Bank Vendor -->
                </button>

            </div>
            <div class="modal-body">
                <form id="vendordtlForm" method="POST" action="{% url 'save_vendordtl' %}">
                    {% csrf_token %}
                    <input type="hidden" id="vendordtl_id" name="vendordtl_id">
                    <div class="mb-3">
                        <label for="vendorcode" class="form-label">Vendor Code</label>
                        <input type="text" maxlength="3" class="form-control" id="vendorcode" name="vendorcode" required
                            readonly>
                    </div>
                    <!-- <div class="mb-3">
                        <label for="vendorname" class="form-label">Name</label>
                        <input type="text" class="form-control" id="vendorname" name="vendorname" required readonly>
                    </div> -->
                    <div class="mb-3">
                        <label for="rema" class="form-label">Remittance Addr.</label>
                        <input type="text" class="form-control" id="rema" name="rema" required>
                    </div>
                    <div class="mb-3">
                        <label for="currsign" class="form-label">Currency</label>
                        <select class="form-control" id="currsign" name="currsign" required>
                            <option value="">-- Select Currency --</option>
                            {% for m in matauangs %}
                            <option value="{{ m.currsign }}">{{ m.currsign }} - {{ m.currname }}</option>
                            {% endfor %}
                        </select>

                    </div>
                    <div class="mb-3">
                        <label for="bankcode" class="form-label">Bank Code</label>
                        <select class="form-control" id="bankcode" name="bankcode" required>
                            <option value="">-- Select Bank --</option>
                            {% for b in banks %}
                            <option value="{{ b.bankcode }}">{{ b.bankcode }} - {{ b.bankname }}</option>
                            {% endfor %}
                        </select>

                    </div>
                    <div class="mb-3">
                        <label for="branch" class="form-label">Branch</label>
                        <input type="text" class="form-control" id="branch" name="branch">
                    </div>
                    <div class="mb-3">
                        <label for="bankaddress" class="form-label">Address</label>
                        <input type="text" class="form-control" id="bankaddress" name="bankaddress">
                    </div>
                    <div class="mb-3">
                        <label for="accountno" class="form-label">Bank Acct.#</label>
                        <input type="text" class="form-control" id="accountno" name="accountno" required>
                    </div>
                    <div class="mb-3">
                        <label for="swiftcode" class="form-label">Swift Code</label>
                        <input type="text" class="form-control" id="swiftcode" name="swiftcode">
                    </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 %}