{% extends "base/module_base.html" %}
{% set active_page = 'purchase' %}
{% set sidebar_bgtrigger = 'po_home' %}
{% block pagehead %}<title>PO #{{ po.id }}</title>{% endblock %}
{% block sidebar %}{% include 'purchase/blocks/sidebar.html' %}{% endblock %}
{% block content %}
<br>
<div class="card">
    <div class="card-body">
        <h2>Purchase Order #{{ po.id }} <span class="badge badge-{{ 'secondary' if po.status=='draft' else 'primary' if po.status=='ordered' else 'success' if po.status=='received' else 'danger' }}">{{ po.status }}</span></h2>
        <a class="btn btn-primary mb-3" href="{{ url_for('shopyo_ecommerce.purchase.dashboard') }}">< BACK</a>

        <form method="POST">
            <input type="hidden" name="csrf_token" value="{{ csrf_token() }}" />
            <div class="form-group">
                <label>Vendor</label>
                {{ form.vendor_id(class="form-control") }}
            </div>
            <div class="form-group">
                <label>Notes</label>
                {{ form.notes(class="form-control", rows=3) }}
            </div>
            {% if po.status == 'draft' %}
            {{ form.submit(class="btn btn-info") }}
            {% endif %}
        </form>
    </div>
</div>

{% if po.status == 'draft' %}
<br>
<div class="card">
    <div class="card-body">
        <h4>Add Item</h4>
        <form action="{{ url_for('shopyo_ecommerce.purchase.add_item', po_id=po.id) }}" method="POST" style="display:flex;gap:8px;align-items:center;">
            <input type="hidden" name="csrf_token" value="{{ csrf_token() }}" />
            <input type="text" name="barcode" class="form-control" style="width:150px;" placeholder="Barcode" id="item-barcode" required>
            <input type="number" name="quantity" class="form-control" style="width:80px;" placeholder="Qty" value="1" min="1">
            <button type="submit" class="btn btn-success">Add</button>
        </form>
        <small class="text-muted" id="product-preview"></small>
    </div>
</div>
<script>
$('#item-barcode').on('input', function() {
    var bc = $(this).val();
    if (bc.length > 2) {
        $.getJSON('/purchase/product/' + bc + '/info', function(data) {
            $('#product-preview').text(data.name + ' | In stock: ' + data.in_stock + ' | Price: $' + data.price);
        }).fail(function() {
            $('#product-preview').text('Product not found');
        });
    } else {
        $('#product-preview').text('');
    }
});
</script>
{% endif %}

<br>
<div class="card">
    <div class="card-body">
        <h4>Items ({{ po.items|length }})</h4>
        <table class="table table-striped">
            <thead><tr><th>Barcode</th><th>Product</th><th>Ordered</th><th>Received</th><th>Unit Price</th><th>Subtotal</th>{% if po.status == 'draft' %}<th></th>{% endif %}</tr></thead>
            <tbody>
                {% for item in po.items %}
                <tr>
                    <td>{{ item.product_barcode }}</td>
                    <td>{{ item.product_name }}</td>
                    <td>{{ item.quantity_ordered }}</td>
                    <td>{{ item.quantity_received }}</td>
                    <td>${{ '%.2f'|format(item.unit_price|float) }}</td>
                    <td>${{ '%.2f'|format((item.quantity_received or 0) * (item.unit_price|float)) }}</td>
                    {% if po.status == 'draft' %}
                    <td>
                        <form action="{{ url_for('shopyo_ecommerce.purchase.delete_item', item_id=item.id) }}" method="POST" style="display:inline;">
                            <input type="hidden" name="csrf_token" value="{{ csrf_token() }}" />
                            <button class="btn btn-danger btn-sm">Remove</button>
                        </form>
                    </td>
                    {% endif %}
                </tr>
                {% else %}
                <tr><td colspan="7" class="text-muted">No items. Add items above.</td></tr>
                {% endfor %}
            </tbody>
        </table>

        {% if po.status == 'draft' and po.items %}
        <form action="{{ url_for('shopyo_ecommerce.purchase.place_order', po_id=po.id) }}" method="POST" style="display:inline;">
            <input type="hidden" name="csrf_token" value="{{ csrf_token() }}" />
            <button class="btn btn-primary">Place Order</button>
        </form>
        {% endif %}

        {% if po.status == 'ordered' %}
        <h4 class="mt-3">Receive Items</h4>
        <form action="{{ url_for('shopyo_ecommerce.purchase.receive', po_id=po.id) }}" method="POST">
            <input type="hidden" name="csrf_token" value="{{ csrf_token() }}" />
            <table class="table table-sm">
                <thead><tr><th>Product</th><th>Ordered</th><th>Receive Qty</th></tr></thead>
                <tbody>
                    {% for item in po.items %}
                    <tr>
                        <td>{{ item.product_name }}</td>
                        <td>{{ item.quantity_ordered }}</td>
                        <td><input type="number" name="qty_received_{{ item.id }}" value="{{ item.quantity_ordered }}" class="form-control" style="width:100px;" min="0"></td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
            <button class="btn btn-success">Receive All</button>
        </form>
        {% endif %}

        {% if po.status in ('draft', 'cancelled') %}
        <form action="{{ url_for('shopyo_ecommerce.purchase.delete', po_id=po.id) }}" method="POST" style="display:inline;" class="mt-3">
            <input type="hidden" name="csrf_token" value="{{ csrf_token() }}" />
            <button class="btn btn-danger" onclick="return confirm('Delete PO #{{ po.id }}?')">Delete PO</button>
        </form>
        {% endif %}
    </div>
</div>
{% endblock %}