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

<!-- PAGE HERO -->
<div class="page-hero">
    <div>
        <h2><i class="bi bi-arrow-return-left"></i> {{ l('Purchase Return', 'ক্রয় ফেরত') }}</h2>
        <p class="page-subtitle">{{ l('Return goods to supplier and update stock automatically', 'পণ্য সরবরাহকারীকে ফেরত দিন এবং স্টক আপডেট হবে') }}</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>

<!-- PURCHASE INFO CARD -->
<div class="stat-grid" style="grid-template-columns: repeat(auto-fit, minmax(160px,1fr)); margin-bottom:18px;">
    <div class="stat-card" style="background:linear-gradient(135deg,#eff6ff,#dbeafe);border:1px solid #bfdbfe;">
        <div class="stat-icon" style="background:#2563eb;color:#fff;"><i class="bi bi-box-seam"></i></div>
        <div class="stat-label">{{ l('Product', 'পণ্য') }}</div>
        <div class="stat-value" style="font-size:14px;color:#1e3a8a;">{{ purchase.product.name if purchase.product else '—' }}</div>
    </div>
    <div class="stat-card" style="background:linear-gradient(135deg,#f0f9ff,#e0f2fe);border:1px solid #bae6fd;">
        <div class="stat-icon" style="background:#0284c7;color:#fff;"><i class="bi bi-person-badge"></i></div>
        <div class="stat-label">{{ l('Supplier', 'সরবরাহকারী') }}</div>
        <div class="stat-value" style="font-size:14px;color:#0c4a6e;">{{ purchase.supplier.name if purchase.supplier else '—' }}</div>
    </div>
    <div class="stat-card" style="background:linear-gradient(135deg,#ecfdf5,#d1fae5);border:1px solid #a7f3d0;">
        <div class="stat-icon" style="background:#059669;color:#fff;"><i class="bi bi-123"></i></div>
        <div class="stat-label">{{ l('Purchased Qty', 'ক্রয়কৃত পরিমাণ') }}</div>
        <div class="stat-value" style="color:#064e3b;">{{ "%.2f"|format(purchase.quantity or 0) }}</div>
    </div>
    <div class="stat-card" style="background:linear-gradient(135deg,#fff7ed,#ffedd5);border:1px solid #fed7aa;">
        <div class="stat-icon" style="background:#ea580c;color:#fff;"><i class="bi bi-currency-dollar"></i></div>
        <div class="stat-label">{{ l('Buy Price / Unit', 'একক মূল্য') }}</div>
        <div class="stat-value" style="color:#7c2d12;">৳ {{ "%.2f"|format(purchase.buy_price or 0) }}</div>
    </div>
</div>

<!-- RETURN FORM -->
<div class="panel" style="max-width: 680px;">
    <div class="panel-title"><i class="bi bi-arrow-return-left"></i> {{ l('Return Details', 'ফেরতের বিবরণ') }}</div>

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

        <!-- Warning Banner -->
        <div class="d-flex align-items-start gap-2 p-3 rounded-3 mb-4" style="background:#fef3c7;border:1px solid #fde68a;">
            <i class="bi bi-exclamation-triangle-fill text-warning mt-1 flex-shrink-0"></i>
            <div class="small text-dark">
                <strong>{{ l('Important', 'গুরুত্বপূর্ণ') }}:</strong>
                {{ l('Returning items will reduce stock quantity. This action cannot be undone easily.', 'ফেরত দিলে স্টক কমে যাবে। এই কাজ সহজে পূর্বাবস্থায় ফেরানো যাবে না।') }}
            </div>
        </div>

        <div class="row g-3">
            <!-- Return Quantity -->
            <div class="col-md-6">
                <label class="form-label-sm">{{ l('Return Quantity', 'ফেরত পরিমাণ') }} <span class="text-danger">*</span></label>
                <div class="input-group">
                    <input type="number" class="form-control" name="quantity" id="returnQty"
                           placeholder="0.00" step="0.01" min="0.01"
                           max="{{ "%.2f"|format(purchase.quantity or 0) }}" required>
                    <span class="input-group-text bg-light text-muted">
                        {{ purchase.product.unit if purchase.product and purchase.product.unit else l('Unit','ইউনিট') }}
                    </span>
                </div>
                <div class="form-text text-muted">
                    {{ l('Max returnable', 'সর্বোচ্চ ফেরতযোগ্য') }}: <strong>{{ "%.2f"|format(purchase.quantity or 0) }}</strong>
                </div>
                <div class="invalid-feedback">{{ l('Return quantity must be between 0.01 and purchased amount.', 'ফেরতের পরিমাণ ০.০১ থেকে ক্রয়কৃত পরিমাণের মধ্যে হতে হবে।') }}</div>
            </div>

            <!-- Return Value Preview -->
            <div class="col-md-6">
                <label class="form-label-sm">{{ l('Credit Amount (Estimated)', 'ক্রেডিট পরিমাণ (আনুমানিক)') }}</label>
                <div class="input-group">
                    <span class="input-group-text bg-light">৳</span>
                    <input type="text" class="form-control bg-light" id="creditPreview" value="0.00" readonly style="color:#059669;font-weight:700;">
                </div>
                <div class="form-text text-muted">{{ l('Based on original buy price', 'আসল ক্রয় মূল্য অনুযায়ী') }}</div>
            </div>

            <!-- Reason -->
            <div class="col-md-12">
                <label class="form-label-sm">{{ l('Reason for Return', 'ফেরতের কারণ') }}</label>
                <textarea class="form-control" name="reason" rows="2"
                          placeholder="{{ l('e.g. Damaged goods, wrong item delivered, quality issue...', 'যেমন: নষ্ট পণ্য, ভুল পণ্য ডেলিভারি, মান সমস্যা...') }}"></textarea>
            </div>
        </div>

        <!-- ACTIONS -->
        <div class="d-flex align-items-center gap-3 mt-4 pt-3 border-top">
            <button type="submit" class="btn btn-danger fw-bold px-5" id="returnBtn">
                <i class="bi bi-arrow-return-left me-1"></i>{{ l('Confirm Return', 'ফেরত নিশ্চিত করুন') }}
            </button>
            <a href="{{ url_for('purchase_history') }}" class="btn btn-outline-secondary fw-semibold px-4">
                {{ l('Cancel', 'বাতিল') }}
            </a>
        </div>
    </form>
</div>

<script>
(function() {
    const qtyInput = document.getElementById('returnQty');
    const credit = document.getElementById('creditPreview');
    const buyPrice = {{ purchase.buy_price or 0 }};

    if (qtyInput && credit) {
        qtyInput.addEventListener('input', function() {
            const q = parseFloat(this.value) || 0;
            credit.value = (q * buyPrice).toFixed(2);
        });
    }

    const form = document.getElementById('returnForm');
    if (form) {
        form.addEventListener('submit', function(e) {
            if (!form.checkValidity()) {
                e.preventDefault();
                e.stopPropagation();
            } else {
                const btn = document.getElementById('returnBtn');
                if (btn) {
                    btn.disabled = true;
                    btn.innerHTML = '<i class="bi bi-hourglass-split me-1"></i>{{ l("Processing...", "প্রক্রিয়া চলছে...") }}';
                }
            }
            form.classList.add('was-validated');
        });
    }
})();
</script>

{% endblock %}