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

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

    .table {
        width: 100%;
        /* tabel isi menyesuaikan container */
        table-layout: auto;
        /* biarkan kolom menyesuaikan konten */
    }
</style>

<div id="vendorImportPanel" class="card border-secondary mb-3" style="display: none; margin: 1rem;">
    <div class="card-header text-white" style="background-color: rgb(80, 90, 97);">
        Import Vendor from Excel
    </div>
    <div class="card-body">
        <form method="POST" action="{% url 'scm_upload_excel_vendor' %}" enctype="multipart/form-data">
            {% csrf_token %}
            <div class="row align-items-end g-2">
                <div class="col-md-8">
                    <label for="vendorExcelFile" class="form-label">Select Excel file (.xlsx)</label>
                    <input type="file" class="form-control" id="vendorExcelFile" name="excel_file"
                           accept=".xlsx,.xlsm" required>
                    <small class="text-muted">Use the file from Export to Excel. The first row must contain the column headers.</small>
                </div>
                <div class="col-md-4 d-flex gap-2">
                    <button type="submit" class="btn btn-secondary">Upload</button>
                    <button type="button" class="btn btn-outline-secondary" onclick="toggleVendorImportForm()">Close Import</button>
                </div>
            </div>
        </form>
    </div>
</div>

<div class="d-flex justify-content-between align-items-center" style="padding: 1rem;">
    <h2 style="font-size: 3rem; font-weight: 500; margin: 0;">Vendor Codes</h2>
    <input type="text" id="searchInput" class="form-control" placeholder="Search Vendor code..."
        style="max-width: 300px; margin-right: 1rem;">
    <div>
        <button type="button" class="btn btn-secondary" id="toggleVendorForm" onclick="showAddVendorForm()">
            Add Vendor Code
        </button>
        <button type="button" class="btn btn-secondary" id="toggleVendorImport" onclick="toggleVendorImportForm()">
            Import
        </button>
        <a href="{% url 'scm_generate_pdf_vendor' %}" class="btn btn-secondary" target="_blank" rel="noopener noreferrer">
            Generate PDF Report
        </a>
        <a href="{% url 'scm_export_to_excel_vendor' %}" class="btn btn-secondary">Export to Excel</a>
        <form method="POST" action="{% url 'reset_vendor' %}" class="d-inline"
            onsubmit="return confirm('WARNING: This will delete ALL Vendor and Vendor Detail data. Continue?');">

            {% csrf_token %}

            <button type="submit" class="btn btn-danger">

                <i class="bi bi-trash"></i>
                Reset Vendor

            </button>

        </form>
    </div>
</div>

<div id="vendorFormPanel" class="card border-secondary mb-3" style="display:none; margin: 1rem;">
    <div class="card-header text-white" style="background-color: rgb(80, 90, 97);">
        <span id="vendorFormTitle">Add Vendor Code</span>
    </div>
    <div class="card-body">
<form id="vendorForm" method="POST" action="{% url 'scm_save_vendor' %}">
                    {% csrf_token %}
                    <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>
                    </div>
                    <div class="mb-3">
                        <label for="address1" class="form-label">Address1</label>
                        <input type="text" class="form-control" id="address1" name="address1" required>
                    </div>
                    <div class="mb-3">
                        <label for="address2" class="form-label">Address2</label>
                        <input type="text" class="form-control" id="address2" name="address2" required>
                    </div>
                    <div class="mb-3">
                        <label for="city" class="form-label">City</label>
                        <input type="text" class="form-control" id="city" name="city" required>
                    </div>
                    <div class="mb-3">
                        <label for="zipcode" class="form-label">Zip Code</label>
                        <input type="text" class="form-control" id="zipcode" name="zipcode" required>
                    </div>
                    <div class="mb-3">
                        <label for="telp" class="form-label">Phone</label>
                        <input type="text" class="form-control" id="telp" name="telp" required>
                    </div>
                    <div class="mb-3">
                        <label for="fax" class="form-label">Fax</label>
                        <input type="text" class="form-control" id="fax" name="fax" required>
                    </div>
                    <div class="mb-3">
                        <label for="npwp" class="form-label">NPWP</label>
                        <input type="text" class="form-control" id="npwp" name="npwp" required>
                    </div>
                    <div class="mb-3">
                        <label for="picname" class="form-label">PIC Name</label>
                        <input type="text" class="form-control" id="picname" name="picname" required>
                    </div>
                    <div class="mb-3">
                        <label for="email" class="form-label">Email</label>
                        <input type="email" class="form-control" id="email" name="email" required>
                    </div>
                    <div class="mb-3">
                        <label for="taxvendor" class="form-label">Tax Vendor</label>
                        <input type="text" class="form-control" id="taxvendor" name="taxvendor" required>
                    </div>
                    <div class="mb-3">
                        <label for="taxaddress" class="form-label">Tax Address</label>
                        <input type="text" class="form-control" id="taxaddress" name="taxaddress" required>
                    </div>
                    <div class="mb-3">
                        <label for="taxcity" class="form-label">Tax City</label>
                        <input type="text" class="form-control" id="taxcity" name="taxcity" required>
                    </div>
                    <div class="mb-3">
                        <label for="taxnpwp" class="form-label">Tax NPWP</label>
                        <input type="text" class="form-control" id="taxnpwp" name="taxnpwp" required>
                    </div>
                    <div class="d-flex gap-2 mt-3">
                        <button type="submit" class="btn btn-primary">Save</button>
                        <button type="button" class="btn btn-secondary" onclick="hideVendorForm()">Cancel</button>
                    </div>
                </form>
    </div>
</div>

<div class="table-container with-bottom-padding">
    <table class="table table-striped table-hover" id="vendorTable">
        <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">Address</th>
                <th scope="col" class="align-middle"> </th>
                <th scope="col" class="align-middle">City</th>
                <th scope="col" class="align-middle">Zip Code</th>
                <th scope="col" class="align-middle">Phone</th>
                <th scope="col" class="align-middle">Fax</th>
                <th scope="col" class="align-middle">NPWP</th>
                <th scope="col" class="align-middle">PIC</th>
                <th scope="col" class="align-middle">Email</th>
                <th scope="col" class="align-middle">Tax Vendor</th>
                <th scope="col" class="align-middle">Tax Address</th>
                <th scope="col" class="align-middle">Tax City</th>
                <th scope="col" class="align-middle">Tax NPWP</th>
                <!-- <th scope="col" class="align-middle">Detail</th> -->
                <th scope="col" class="align-middle">Actions</th>
            </tr>
        </thead>
        <tbody>
            {% if vendor %}
            {% for vendorcode in vendor %}
            <tr data-id="{{ vendorcode.id }}" data-vendorcode="{{ vendorcode.vendorcode }}"
                data-vendorname="{{ vendorcode.vendorname }}" data-address1="{{ vendorcode.address1 }}"
                data-address2="{{ vendorcode.address2 }}" data-city="{{ vendorcode.city }}"
                data-zipcode="{{ vendorcode.zipcode }}" data-telp="{{ vendorcode.telp }}"
                data-fax="{{ vendorcode.fax }}" data-npwp="{{ vendorcode.npwp }}"
                data-picname="{{ vendorcode.picname }}" data-email="{{ vendorcode.email }}"
                data-taxvendor="{{ vendorcode.taxvendor }}" data-taxaddress="{{ vendorcode.taxaddress }}"
                data-taxcity="{{ vendorcode.taxcity }}" data-taxnpwp="{{ vendorcode.taxnpwp }}">
                <td>{{ forloop.counter }}</td> <!-- Added row number -->
                <td>{{ vendorcode.vendorcode|default_if_none:"" }}</td>
                <td>{{ vendorcode.vendorname|default_if_none:"" }}</td>
                <td>{{ vendorcode.address1|default_if_none:"" }}</td>
                <td>{{ vendorcode.address2|default_if_none:"" }}</td>
                <td>{{ vendorcode.city|default_if_none:"" }}</td>
                <td>{{ vendorcode.zipcode|default_if_none:"" }}</td>
                <td>{{ vendorcode.telp|default_if_none:"" }}</td>
                <td>{{ vendorcode.fax|default_if_none:"" }}</td>
                <td>{{ vendorcode.npwp|default_if_none:"" }}</td>
                <td>{{ vendorcode.picname|default_if_none:"" }}</td>
                <td>{{ vendorcode.email|default_if_none:"" }}</td>
                <td>{{ vendorcode.taxvendor|default_if_none:"" }}</td>
                <td>{{ vendorcode.taxaddress|default_if_none:"" }}</td>
                <td>{{ vendorcode.taxcity|default_if_none:"" }}</td>
                <td>{{ vendorcode.taxnpwp|default_if_none:"" }}</td>
                <!-- <td>
                    <button class="btn btn-sm btn-sm border" onclick="detail('{{ vendorcode.vendorcode }}')"
                        title="Lihat detail">
                        <i class="bi bi-file-earmark-text-fill" style="font-size: 1rem;"></i>
                    </button>

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

<script>
    function toggleVendorImportForm() {
        const panel = document.getElementById('vendorImportPanel');
        const button = document.getElementById('toggleVendorImport');
        const isHidden = panel.style.display === 'none' || panel.style.display === '';
        panel.style.display = isHidden ? 'block' : 'none';
        if (button) button.textContent = isHidden ? 'Close Import' : 'Import';
    }

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

        rows.forEach(row => {
            let text = row.textContent.toLowerCase();
            row.style.display = text.includes(filter) ? '' : 'none';
        });
    });
    function showAddVendorForm() {
        const panel = document.getElementById('vendorFormPanel');
        const form = document.getElementById('vendorForm');
        form.reset();
        form.action = "{% url 'scm_save_vendor' %}";
        document.getElementById('vendorFormTitle').textContent = 'Add Vendor Code';
        document.getElementById('vendorcode').readOnly = true;
        panel.style.display = 'block';
        fetch("{% url 'scm_get_next_vendor_code' %}")
            .then(response => {
                if (!response.ok) throw new Error('Failed to get next vendor code');
                return response.json();
            })
            .then(data => { document.getElementById('vendorcode').value = data.next_vendorcode || ''; })
            .catch(error => { console.error(error); document.getElementById('vendorcode').value = ''; });
        panel.scrollIntoView({ behavior: 'smooth', block: 'start' });
    }

    function hideVendorForm() {
        document.getElementById('vendorFormPanel').style.display = 'none';
    }

    function editVendor(vendorId) {
        const form = document.getElementById('vendorForm');
        document.getElementById('vendorFormTitle').textContent = 'Edit Vendor Code';
        form.action = "{% url 'scm_edit_vendor' 0 %}".replace('/0/', '/' + vendorId + '/');
        const row = document.querySelector(`tr[data-id="${vendorId}"]`);
        if (row) {
            document.getElementById('vendorcode').value = row.dataset.vendorcode || '';
            document.getElementById('vendorname').value = row.dataset.vendorname || '';
            document.getElementById('address1').value = row.dataset.address1 || '';
            document.getElementById('address2').value = row.dataset.address2 || '';
            document.getElementById('city').value = row.dataset.city || '';
            document.getElementById('zipcode').value = row.dataset.zipcode || '';
            document.getElementById('telp').value = row.dataset.telp || '';
            document.getElementById('fax').value = row.dataset.fax || '';
            document.getElementById('npwp').value = row.dataset.npwp || '';
            document.getElementById('picname').value = row.dataset.picname || '';
            document.getElementById('email').value = row.dataset.email || '';
            document.getElementById('taxvendor').value = row.dataset.taxvendor || '';
            document.getElementById('taxaddress').value = row.dataset.taxaddress || '';
            document.getElementById('taxcity').value = row.dataset.taxcity || '';
            document.getElementById('taxnpwp').value = row.dataset.taxnpwp || '';
        }
        document.getElementById('vendorcode').readOnly = true;
        document.getElementById('vendorFormPanel').style.display = 'block';
        document.getElementById('vendorFormPanel').scrollIntoView({ behavior: 'smooth', block: 'start' });
    }

</script>

<!-- <script>
    function detail(vendorcode) {
        window.location.href = "/vendor/detailcode/" + vendorcode + "/";
    }
</script> -->

{% endblock %}