{% extends "base.html" %}

{% block content %}

<div class="page-hero">
    <div>
        <h2><i class="bi bi-truck text-primary"></i> {{ t('purchase') }}</h2>
        <p class="page-subtitle">{{ l('Record a new stock purchase from a supplier', 'সরবরাহকারীর কাছ থেকে নতুন স্টক ক্রয় নথিবদ্ধ করুন') }}</p>
    </div>
    <div class="page-hero-actions">
        <a href="{{ url_for('purchase_history') }}" class="btn btn-outline-secondary btn-sm fw-semibold">
            <i class="bi bi-clock-history me-1"></i> {{ t('purchase_history') }}
        </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 Entry', 'নতুন ক্রয় এন্ট্রি') }}</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">
            <!-- LEFT COLUMN: Product & Supplier Selection -->
            <div class="col-md-6 border-end-md pe-md-4">
                <div class="d-flex align-items-center mb-3 text-primary fw-bold">
                    <i class="bi bi-box-seam me-2 fs-5"></i>
                    <span>{{ l('1. Item & Supplier Selection', '১. সরবরাহকারী ও পণ্য নির্বাচন') }}</span>
                </div>

                <div class="mb-3">
                    <label class="form-label fw-semibold text-dark small">{{ l('Supplier', 'সরবরাহকারী') }}</label>
                    <select name="supplier_id" class="form-select form-select-lg fs-6">
                        <option value="">{{ l('Select Supplier', 'সরবরাহকারী নির্বাচন করুন') }}</option>
                        {% for supplier in suppliers %}
                        <option value="{{ supplier.id }}">
                            {{ supplier.name }}{% if supplier.company %} - {{ supplier.company }}{% endif %}
                        </option>
                        {% endfor %}
                    </select>
                </div>

                <div class="mb-3">
                    <label class="form-label fw-semibold text-dark small">{{ l('Product', 'পণ্য') }} <span class="text-danger">*</span></label>
                    <select name="product_id" class="form-select form-select-lg fs-6" id="productSelect" required>
                        {% for p in products %}
                        <option value="{{ p.id }}"
                                data-stock="{{ "%.2f"|format(p.stock or 0) }}"
                                data-price="{{ "%.2f"|format(p.buy_price or 0) }}">
                            {{ p.name }}
                        </option>
                        {% endfor %}
                    </select>
                </div>

                <div class="row g-2 mb-3">
                    <div class="col-6">
                        <label class="form-label fw-semibold text-dark small">{{ l('Current Stock', 'বর্তমান স্টক') }}</label>
                        <input type="text" id="currentStock" class="form-control bg-light fw-bold text-secondary" readonly>
                    </div>
                    <div class="col-6">
                        <label class="form-label fw-semibold text-dark small">{{ l('Previous Buy Price', 'পূর্বের ক্রয় মূল্য') }}</label>
                        <input type="text" id="previousPrice" class="form-control bg-light fw-bold text-secondary" readonly>
                    </div>
                </div>

                <div class="mb-3">
                    <label class="form-label fw-semibold text-dark small">{{ l('Purchase Quantity', 'ক্রয় পরিমাণ') }} <span class="text-danger">*</span></label>
                    <input type="number" step="0.01" name="quantity" id="quantity" class="form-control form-control-lg fs-6" placeholder="0" required>
                </div>
            </div>

            <!-- RIGHT COLUMN: Pricing & Payment Information -->
            <div class="col-md-6 ps-md-4">
                <div class="d-flex align-items-center mb-3 text-success fw-bold">
                    <i class="bi bi-credit-card me-2 fs-5"></i>
                    <span>{{ l('2. Pricing & Payment Info', '২. মূল্য ও পেমেন্টের তথ্য') }}</span>
                </div>

                <div class="mb-3">
                    <label class="form-label fw-semibold text-dark small">{{ l('Unit Buy Price (৳)', 'প্রতি এককের ক্রয় মূল্য') }} <span class="text-danger">*</span></label>
                    <input type="number" step="0.01" name="buy_price" id="buyPrice" class="form-control form-control-lg fs-6" placeholder="0.00" required>
                </div>

                <div class="mb-3">
                    <label class="form-label fw-semibold text-dark small">{{ l('Total Purchase Amount (৳)', 'মোট ক্রয় মূল্য') }}</label>
                    <input type="text" id="totalAmount" class="form-control form-control-lg bg-primary-subtle text-primary fw-bold fs-5" readonly placeholder="৳ 0.00">
                </div>

                <div class="mb-3">
                    <label class="form-label fw-semibold text-dark small">{{ l('Payment Status', 'পেমেন্ট অবস্থা') }}</label>
                    <select name="payment_status" class="form-select form-select-lg fs-6">
                        <option value="Paid">{{ l('Paid', 'পরিশোধিত') }}</option>
                        <option value="Due">{{ l('Due', 'বাকি') }}</option>
                        <option value="Partial">{{ l('Partial Payment', 'আংশিক পরিশোধ') }}</option>
                    </select>
                </div>

                <div class="row g-2 mb-3">
                    <div class="col-6">
                        <label class="form-label fw-semibold text-dark small">{{ l('Paid Amount (৳)', 'পরিশোধিত পরিমাণ') }}</label>
                        <input type="number" step="0.01" name="paid_amount" id="paidAmount" class="form-control form-control-lg fs-6" value="0">
                    </div>
                    <div class="col-6">
                        <label class="form-label fw-semibold text-dark small">{{ l('Due Amount (৳)', 'বাকি পরিমাণ') }}</label>
                        <input type="text" id="dueAmount" class="form-control form-control-lg bg-light text-danger fw-bold fs-6" readonly placeholder="৳ 0.00">
                    </div>
                </div>
            </div>
        </div>

        <div class="d-flex justify-content-between align-items-center mt-4 pt-3 border-top">
            <a href="{{ url_for('purchase_history') }}" class="btn btn-outline-secondary px-4 fw-semibold">
                <i class="bi bi-clock-history me-1"></i> {{ t('purchase_history') }}
            </a>
            <button type="submit" class="btn btn-success btn-lg px-5 fw-bold shadow-sm">
                <i class="bi bi-plus-circle me-1"></i> {{ l('Add Purchase', 'ক্রয় সাবমিট করুন') }}
            </button>
        </div>

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

<script>
function calculateTotal(){
    let qty = parseFloat(document.getElementById("quantity").value) || 0;
    let price = parseFloat(document.getElementById("buyPrice").value) || 0;
    let total = qty * price;
    document.getElementById("totalAmount").value = "৳ " + total.toFixed(2);

    let paid = parseFloat(document.getElementById("paidAmount").value) || 0;
    let due = total - paid;
    document.getElementById("dueAmount").value = "৳ " + (due > 0 ? due.toFixed(2) : "0.00");
}

document.getElementById("quantity").addEventListener("input", calculateTotal);
document.getElementById("buyPrice").addEventListener("input", calculateTotal);
document.getElementById("paidAmount").addEventListener("input", calculateTotal);

function loadProductInfo(){
    let select = document.getElementById("productSelect");
    if (!select || !select.options.length) return;
    let option = select.options[select.selectedIndex];
    document.getElementById("currentStock").value = option.dataset.stock;
    document.getElementById("previousPrice").value = "৳ " + option.dataset.price;
    document.getElementById("buyPrice").value = option.dataset.price;
    calculateTotal();
}

document.getElementById("productSelect").addEventListener("change", loadProductInfo);
window.onload = loadProductInfo;
</script>

{% endblock %}