{% extends "base.html" %}
{% block content %}

<!-- PAGE HERO -->
<div class="page-hero">
    <div>
        <h2><i class="bi bi-pencil-square"></i> {{ l('Edit Purchase', 'ক্রয় সম্পাদনা করুন') }}</h2>
        <p class="page-subtitle">{{ l('Update product, supplier, quantity and purchase price', 'পণ্য, সরবরাহকারী, পরিমাণ ও ক্রয় মূল্য পরিবর্তন করুন') }}</p>
    </div>
    <div class="page-hero-actions">
        <a href="{{ url_for('purchase_history') }}" class="btn-back-nav">
            <i class="bi bi-arrow-left"></i> {{ l('Back to Purchase History', 'ক্রয় ইতিহাসে ফিরুন') }}
        </a>
    </div>
</div>

<!-- FORM PANEL -->
<div class="panel" style="max-width: 780px;">
    <div class="panel-title">
        <i class="bi bi-truck"></i> {{ l('Purchase Details', 'ক্রয়ের বিবরণ') }}
    </div>

    <form method="POST" id="editPurchaseForm" novalidate>
        <input type="hidden" name="_csrf_token" value="{{ csrf_token }}">

        <div class="row g-4">

            <!-- Product -->
            <div class="col-md-6">
                <label class="form-label-sm">{{ l('Product', 'পণ্য') }} <span class="text-danger">*</span></label>
                <select name="product_id" class="form-select" required id="productSelect">
                    <option value="">— {{ l('Select Product', 'পণ্য নির্বাচন করুন') }} —</option>
                    {% for product in products %}
                    <option value="{{ product.id }}" {% if product.id == purchase.product_id %}selected{% endif %}>
                        {{ product.name }}{% if product.sku %} ({{ product.sku }}){% endif %}
                    </option>
                    {% endfor %}
                </select>
                <div class="invalid-feedback">{{ l('Please select a product.', 'একটি পণ্য নির্বাচন করুন।') }}</div>
            </div>

            <!-- Supplier -->
            <div class="col-md-6">
                <label class="form-label-sm">{{ l('Supplier', 'সরবরাহকারী') }}</label>
                <select name="supplier_id" class="form-select">
                    <option value="">— {{ l('No Supplier', 'সরবরাহকারী নেই') }} —</option>
                    {% for supplier in suppliers %}
                    <option value="{{ supplier.id }}" {% if purchase.supplier_id == supplier.id %}selected{% endif %}>
                        {{ supplier.name }}{% if supplier.company %} — {{ supplier.company }}{% endif %}
                    </option>
                    {% endfor %}
                </select>
            </div>

            <!-- Quantity -->
            <div class="col-md-6">
                <label class="form-label-sm">{{ l('Quantity', 'পরিমাণ') }} <span class="text-danger">*</span></label>
                <div class="input-group">
                    <input type="number" step="0.01" min="0.01" name="quantity"
                           class="form-control" id="quantityInput"
                           value="{{ "%.2f"|format(purchase.quantity or 0) }}" required>
                    <span class="input-group-text bg-light text-muted" id="unitLabel">
                        {{ purchase.product.unit if purchase.product and purchase.product.unit else l('Unit', 'ইউনিট') }}
                    </span>
                </div>
                <div class="invalid-feedback">{{ l('Quantity must be greater than 0.', 'পরিমাণ ০ এর বেশি হতে হবে।') }}</div>
            </div>

            <!-- Buy Price -->
            <div class="col-md-6">
                <label class="form-label-sm">{{ l('Buy Price (per unit)', 'ক্রয় মূল্য (প্রতি ইউনিট)') }} <span class="text-danger">*</span></label>
                <div class="input-group">
                    <span class="input-group-text bg-light">৳</span>
                    <input type="number" step="0.01" min="0" name="buy_price"
                           class="form-control" id="priceInput"
                           value="{{ "%.2f"|format(purchase.buy_price or 0) }}" required>
                </div>
                <div class="invalid-feedback">{{ l('Please enter a valid price.', 'একটি সঠিক মূল্য দিন।') }}</div>
            </div>

            <!-- Total Preview -->
            <div class="col-md-12">
                <div class="d-flex align-items-center gap-2 p-3 rounded-3" style="background:#f0fdf4;border:1px solid #bbf7d0;">
                    <i class="bi bi-calculator text-success fs-5"></i>
                    <span class="text-muted fw-semibold">{{ l('Calculated Total', 'হিসাবকৃত মোট') }}:</span>
                    <span class="fw-bold text-success fs-5" id="totalPreview">৳ {{ "%.2f"|format((purchase.quantity or 0) * (purchase.buy_price or 0)) }}</span>
                </div>
            </div>

            <!-- Notes (optional) -->
            {% if purchase.notes is defined %}
            <div class="col-md-12">
                <label class="form-label-sm">{{ l('Notes', 'নোট') }} <span class="text-muted">({{ l('optional', 'ঐচ্ছিক') }})</span></label>
                <textarea name="notes" class="form-control" rows="2" placeholder="{{ l('Any note about this purchase...', 'এই ক্রয় সম্পর্কে কোনো নোট...') }}">{{ purchase.notes or '' }}</textarea>
            </div>
            {% endif %}
        </div>

        <!-- FORM ACTIONS -->
        <div class="d-flex align-items-center gap-3 mt-4 pt-3 border-top">
            <button type="submit" class="btn btn-primary fw-bold px-5 py-2" id="submitBtn">
                <i class="bi bi-check-circle me-1"></i>{{ l('Update Purchase', 'ক্রয় আপডেট করুন') }}
            </button>
            <a href="{{ url_for('purchase_history') }}" class="btn btn-outline-secondary fw-semibold px-4">
                {{ l('Cancel', 'বাতিল করুন') }}
            </a>
            <div class="ms-auto small text-muted">
                <i class="bi bi-clock me-1"></i>{{ l('Original date', 'আসল তারিখ') }}: {{ purchase.created_at.strftime('%d-%m-%Y %I:%M %p') if purchase.created_at else '—' }}
            </div>
        </div>
    </form>
</div>

<script>
// Live total preview calculator
(function() {
    const qty = document.getElementById('quantityInput');
    const price = document.getElementById('priceInput');
    const total = document.getElementById('totalPreview');

    function recalc() {
        const q = parseFloat(qty.value) || 0;
        const p = parseFloat(price.value) || 0;
        total.textContent = '৳ ' + (q * p).toFixed(2);
    }

    if (qty && price) {
        qty.addEventListener('input', recalc);
        price.addEventListener('input', recalc);
    }

    // Bootstrap form validation
    const form = document.getElementById('editPurchaseForm');
    if (form) {
        form.addEventListener('submit', function(e) {
            if (!form.checkValidity()) {
                e.preventDefault();
                e.stopPropagation();
            } else {
                const btn = document.getElementById('submitBtn');
                if (btn) { btn.disabled = true; btn.innerHTML = '<i class="bi bi-hourglass-split me-1"></i>{{ l("Updating...", "আপডেট হচ্ছে...") }}'; }
            }
            form.classList.add('was-validated');
        });
    }
})();
</script>

{% endblock %}