{% extends "base.html" %}

{% block content %}

<div class="page-hero">
    <div>
        <h2><i class="bi bi-clipboard-plus text-primary"></i> {{ l('Create Purchase Order', 'নতুন ক্রয় অর্ডার তৈরি') }}</h2>
        <p class="page-subtitle">{{ l('Order items from suppliers before stock arrives', 'সাপ্লায়ারকে নতুন অর্ডারের রিকুয়েস্ট পাঠান') }}</p>
    </div>
    <div class="page-hero-actions">
        <a href="/purchase-orders" class="btn btn-outline-secondary btn-sm fw-semibold"><i class="bi bi-arrow-left me-1"></i>{{ l('Back to Orders', 'অর্ডার তালিকায় ফিরে যান') }}</a>
    </div>
</div>

<div class="card border-0 shadow-sm rounded-4 mb-4">
    <div class="card-header bg-white border-bottom py-3 px-4">
        <h5 class="fw-bold mb-0 text-dark"><i class="bi bi-cart-plus text-primary me-2"></i>{{ l('New Purchase Order Details', 'নতুন ক্রয় অর্ডারের বিবরণ') }}</h5>
    </div>
    <div class="card-body p-4">
        <form method="POST">
        <input type="hidden" name="_csrf_token" value="{{ csrf_token }}">

        <div class="row g-4 mb-4">
            <div class="col-md-6 border-end-md pe-md-4">
                <label class="form-label fw-semibold text-dark small">{{ l('Supplier', 'সরবরাহকারী') }} <span class="text-danger">*</span></label>
                <select class="form-select form-select-lg fs-6" name="supplier_id" required>
                    <option value="">{{ l('-- Select Supplier --', '-- সরবরাহকারী নির্বাচন করুন --') }}</option>
                    {% for s in suppliers %}
                    <option value="{{ s.id }}">{{ s.name }} ({% if s.supplier_code %}{{ s.supplier_code }}{% else %}{{ s.company or 'Supplier' }}{% endif %})</option>
                    {% endfor %}
                </select>
            </div>
            <div class="col-md-6 ps-md-4">
                <label class="form-label fw-semibold text-dark small">{{ l('Note / Reference', 'নোট / রেফারেন্স') }}</label>
                <input class="form-control form-control-lg fs-6" name="note" placeholder="{{ l('Optional reference or delivery notes...', 'ঐচ্ছিক বিবরণ বা রেফারেন্স...') }}">
            </div>
        </div>

        <div class="card border rounded-3 p-3 mb-3 bg-light">
            <div class="d-flex justify-content-between align-items-center mb-2">
                <h6 class="fw-bold text-dark mb-0"><i class="bi bi-list-check text-primary me-1"></i>{{ l('Order Items List', 'অর্ডারকৃত পণ্যের তালিকা') }}</h6>
                <button type="button" class="btn btn-sm btn-primary fw-semibold" id="add-row"><i class="bi bi-plus-circle me-1"></i>{{ l('Add Item', 'নতুন পণ্য যোগ করুন') }}</button>
            </div>

            <div class="table-responsive">
                <table class="table table-hover align-middle mb-0 bg-white rounded-3 border" id="po-items">
                    <thead class="table-light">
                        <tr>
                            <th class="ps-3">{{ l('Product Name', 'পণ্যের নাম') }}</th>
                            <th style="width: 160px;">{{ l('Quantity', 'পরিমাণ') }}</th>
                            <th style="width: 180px;">{{ l('Buy Price (৳)', 'ক্রয় মূল্য (৳)') }}</th>
                            <th style="width: 50px;" class="text-center"></th>
                        </tr>
                    </thead>
                    <tbody id="po-items-body">
                        <tr>
                            <td class="ps-3">
                                <select class="form-select" name="product_id[]" required>
                                    <option value="">{{ l('Select Product', 'পণ্য নির্বাচন করুন') }}</option>
                                    {% for p in products %}
                                    <option value="{{ p.id }}" data-price="{{ '%.2f'|format(p.buy_price or 0) }}">{{ p.name }}</option>
                                    {% endfor %}
                                </select>
                            </td>
                            <td><input type="number" step="0.01" class="form-control" name="quantity[]" placeholder="{{ l('Qty', 'পরিমাণ') }}" required></td>
                            <td><input type="number" step="0.01" class="form-control" name="buy_price[]" placeholder="{{ l('Price', 'দাম') }}"></td>
                            <td class="text-center"><button type="button" class="btn btn-outline-danger btn-sm rounded-circle" onclick="this.closest('tr').remove()"><i class="bi bi-x-lg"></i></button></td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>

        <div class="d-flex justify-content-between align-items-center mt-4 pt-3 border-top">
            <a href="/purchase-orders" class="btn btn-outline-secondary px-4 fw-semibold">{{ l('Cancel', 'বাতিল') }}</a>
            <button type="submit" class="btn btn-primary btn-lg px-5 fw-bold shadow-sm">
                <i class="bi bi-check-circle me-1"></i> {{ l('Create Purchase Order', 'ক্রয় অর্ডার সেভ করুন') }}
            </button>
        </div>

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

<script>
document.getElementById("add-row").addEventListener("click", function () {
    const body = document.getElementById("po-items-body");
    const firstRow = body.querySelector("tr");
    const newRow = firstRow.cloneNode(true);
    newRow.querySelectorAll("input").forEach(i => i.value = "");
    newRow.querySelector("select").selectedIndex = 0;
    body.appendChild(newRow);
});

document.getElementById("po-items-body").addEventListener("change", function (e) {
    if (e.target.tagName === "SELECT") {
        const price = e.target.selectedOptions[0].getAttribute("data-price");
        const row = e.target.closest("tr");
        const priceInput = row.querySelector('input[name="buy_price[]"]');
        if (price && !priceInput.value) {
            priceInput.value = price;
        }
    }
});
</script>

{% endblock %}