{% extends "admin_base.html" %}
{% import "macros/admin_crud_list.html" as crud %}
{% import "macros/user_cell.html" as user_cell %}
{% import "macros/loading_spinner.html" as spinner %}

{% block extra_head %}
<!-- Core Tree Selection Styles -->
<link rel="stylesheet" href="/static/css/tree-selection.css">
<!-- Plugin specific styles -->
<link rel="stylesheet" href="/plugins/vendor/assets/css/vendor.ui.css">
{% endblock %}

{% block page_title %}Vendor Management{% endblock %}

{% block admin_content %}
<div class="vendor-management-container" data-plugin="vendor">
    {{ crud::shell_open(config_url="/plugins/vendor/assets/admin/vendors_list.json", mount_id="vendor-list", custom_mount=true) }}

    <table>
        <thead></thead>
        <tbody>
            {{ spinner::table_skeleton(colspan=6, lines=3, label="Loading vendors…") }}
        </tbody>
            </table>

    {{ crud::shell_close() }}
</div>

<script type="application/json" id="vendor-users-json">{{ users | json_encode | replace(from="</script>", to="<\\/script>") | safe }}</script>

<!-- Add/Edit Vendor Modal -->
<div id="vendorModal" class="crud-modal" aria-hidden="true">
    <div class="modal-content">
        <div class="modal-header">
            <h2 id="modalTitle">Add Vendor</h2>
            <button type="button" class="close-btn" aria-label="Close">&times;</button>
        </div>
        <div class="modal-body">
            <div id="vendor-form-fields"></div>
        </div>
    </div>
</div>

<!-- Product Selection Modal -->
<div id="productModal" class="crud-modal">
    <div class="modal-content">
        <div class="modal-header">
            <h2>Manage Products</h2>
            <button type="button" class="close-btn" aria-label="Close">&times;</button>
        </div>
        <div class="modal-body">
            <p>Select products assigned to <strong id="productModalVendorName"></strong>:</p>
            <!-- Core Tree Selection Component Container -->
            <div id="productTreeSelection">
                <div class="loading">Loading products...</div>
            </div>
        </div>
        <div class="modal-footer">
            <button type="button" class="btn btn-secondary cancel-btn">Cancel</button>
            <button type="button" class="btn btn-primary" onclick="saveAssignedProducts()">Save Assignments</button>
        </div>
    </div>
</div>

<!-- Vendor Prices Modal (admin edits store→vendor cost rates) -->
<div id="vendorPricesModal" class="crud-modal">
    <div class="modal-content">
        <div class="modal-header">
            <h2>Manage Prices</h2>
            <button type="button" class="close-btn" aria-label="Close">&times;</button>
        </div>
        <div class="modal-body">
            <p>Edit what the store pays <strong id="vendorPricesModalVendorName"></strong> for each assigned product. Customer checkout prices stay separate. New orders use the new rate; open order lines keep their frozen rate.</p>
            <div class="vendor-search-row">
                <input type="search" id="vendorPricesSearch" class="form-control" placeholder="Search by product name" autocomplete="off">
            </div>
            <form id="vendorPricesForm">
                <div id="vendorPricesList" class="vendor-product-list">
                    <div class="loading">Loading prices...</div>
                </div>
            </form>
        </div>
        <div class="modal-footer">
            <button type="button" class="btn btn-secondary cancel-btn">Cancel</button>
            <button type="button" class="btn btn-primary" id="vendorPricesSaveBtn" onclick="saveVendorPrices()">Save Prices</button>
        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
<div id="vendor-config" style="display:none;" 
    data-currency-symbol="{{ currency_symbol }}"></div>

<!-- Core Tree Selection Script (Loaded Conditionally) -->
<script src="/static/js/tree-selection.js"></script>
<!-- Plugin specific script -->
<script src="/plugins/vendor/assets/js/vendor_list.js"></script>
<script src="/plugins/vendor/assets/js/vendor-admin.js"></script>
{% endblock %}