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

<style>
@media print {
    .sidebar, .topbar, .mobile-bottom-nav, .alert-wrap, .no-print, nav { display: none !important; }
    html, body { margin: 0 !important; padding: 0 !important; background: white !important; }
    .main-wrap { margin-left: 0 !important; width: 100% !important; }
    .content { padding: 6mm !important; }
    .ri-return-card { box-shadow: none !important; border: 1px solid #ccc !important; }
}

.ri-return-card {
    max-width: 720px;
    margin: 0 auto;
    background: #fff;
    border-radius: 16px;
    border: 1px solid #e2e8f0;
    box-shadow: 0 4px 24px rgba(15,23,42,0.07);
    overflow: hidden;
}
.ri-return-header {
    background: linear-gradient(135deg, #7c1d1d 0%, #991b1b 50%, #b91c1c 100%);
    color: white;
    padding: 20px 26px 16px;
}
.ri-shop-name { font-size: 18px; font-weight: 800; color: #fff; margin: 0; }
.ri-shop-sub  { font-size: 11.5px; color: rgba(255,255,255,0.7); margin-top: 2px; }
.ri-badge-right {
    background: rgba(255,255,255,0.12);
    border: 1px solid rgba(255,255,255,0.25);
    border-radius: 10px;
    padding: 10px 16px;
    text-align: right;
}
.ri-return-label  { font-size: 9.5px; text-transform: uppercase; letter-spacing: 0.08em; color: rgba(255,255,255,0.6); font-weight: 700; }
.ri-invoice-ref   { font-size: 16px; font-weight: 800; color: #fca5a5; margin-top: 1px; }
.ri-return-date   { font-size: 11px; color: rgba(255,255,255,0.65); margin-top: 2px; }
.ri-body { padding: 22px 26px; }
</style>

<!-- PAGE HERO (screen only) -->
<div class="page-hero no-print">
    <div>
        <h2><i class="bi bi-arrow-counterclockwise"></i> {{ l('Return Invoice', 'রিটার্ন ইনভয়েস') }}</h2>
        <p class="page-subtitle">{{ l('Create a return for sold items from invoice', 'ইনভয়েস থেকে বিক্রিত পণ্যের রিটার্ন তৈরি করুন') }}: <strong class="text-primary">{{ invoice.invoice_no }}</strong></p>
    </div>
    <div class="page-hero-actions">
        <a href="{{ url_for('returns') }}" class="btn-back-nav">
            <i class="bi bi-arrow-left"></i> {{ l('Back to Returns', 'রিটার্নে ফিরুন') }}
        </a>
    </div>
</div>

<!-- INVOICE REFERENCE CARD -->
<div class="panel no-print" style="max-width:720px; margin-bottom:16px;">
    <div class="panel-title mb-3"><i class="bi bi-receipt"></i> {{ l('Original Invoice', 'আসল ইনভয়েস') }}</div>
    <div class="row g-3">
        <div class="col-md-3 col-6">
            <div class="form-label-sm">{{ l('Invoice No', 'ইনভয়েস নং') }}</div>
            <div class="fw-bold text-primary fs-6">{{ invoice.invoice_no }}</div>
        </div>
        <div class="col-md-3 col-6">
            <div class="form-label-sm">{{ l('Customer', 'কাস্টমার') }}</div>
            <div class="fw-semibold text-dark">{{ invoice.customer.name if invoice.customer else l('Walk-in','সাধারণ') }}</div>
        </div>
        <div class="col-md-3 col-6">
            <div class="form-label-sm">{{ l('Invoice Date', 'তারিখ') }}</div>
            <div class="fw-semibold text-dark">{{ invoice.created_at.strftime('%d-%m-%Y') if invoice.created_at else '—' }}</div>
        </div>
        <div class="col-md-3 col-6">
            <div class="form-label-sm">{{ l('Invoice Total', 'মোট') }}</div>
            <div class="fw-bold text-success">৳ {{ "%.2f"|format(invoice.total_amount or 0) }}</div>
        </div>
    </div>
</div>

<!-- RETURN FORM -->
<div class="ri-return-card">

    <!-- RED HEADER -->
    <div class="ri-return-header d-flex justify-content-between align-items-start gap-3">
        <div>
            <div class="ri-shop-name">{{ invoice.shop.shop_name if invoice.shop else 'Shop Manager POS' }}</div>
            <div class="ri-shop-sub">{{ l('Sales Return Form', 'সেলস রিটার্ন ফর্ম') }}</div>
        </div>
        <div class="ri-badge-right flex-shrink-0">
            <div class="ri-return-label">{{ l('Reference Invoice', 'রেফারেন্স ইনভয়েস') }}</div>
            <div class="ri-invoice-ref">#{{ invoice.invoice_no }}</div>
            <div class="ri-return-date">{{ invoice.created_at.strftime('%d-%m-%Y') if invoice.created_at else '' }}</div>
        </div>
    </div>

    <div class="ri-body">
        <form method="POST" id="returnInvoiceForm" novalidate>
            <input type="hidden" name="_csrf_token" value="{{ csrf_token }}">

            <!-- WARNING -->
            <div class="d-flex align-items-start gap-2 p-3 rounded-3 mb-4" style="background:#fef2f2;border:1px solid #fecaca;">
                <i class="bi bi-exclamation-triangle-fill text-danger mt-1 flex-shrink-0"></i>
                <div class="small text-dark">
                    <strong>{{ l('Note', 'নোট') }}:</strong>
                    {{ l('Stock will be added back for returned quantities. Only enter quantities you want to return.', 'ফেরতকৃত পরিমাণ স্টকে যোগ হবে। শুধু যতটুকু ফেরত দিতে চান সেটাই লিখুন।') }}
                </div>
            </div>

            <!-- ITEMS TABLE -->
            <div class="table-responsive mb-4" style="border-radius:10px;overflow:hidden;border:1px solid #eef0f4;">
                <table class="table table-modern mb-0">
                    <thead>
                        <tr>
                            <th>{{ l('Product', 'পণ্য') }}</th>
                            <th class="text-center">{{ l('Sold Qty', 'বিক্রিত পরিমাণ') }}</th>
                            <th class="text-center">{{ l('Already Returned', 'আগে ফেরত দেওয়া') }}</th>
                            <th class="text-center">{{ l('Available', 'ফেরতযোগ্য') }}</th>
                            <th class="text-center" style="min-width:130px;">{{ l('Return Qty', 'ফেরত পরিমাণ') }}</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for item in invoice.items %}
                        {% set returned = namespace(qty=0) %}
                        {% for r in invoice.returns %}
                            {% for ri in r.items %}
                                {% if ri.product_id == item.product_id %}
                                    {% set returned.qty = returned.qty + ri.quantity %}
                                {% endif %}
                            {% endfor %}
                        {% endfor %}
                        {% set available = (item.quantity or 0) - returned.qty %}
                        <tr>
                            <td>
                                <input type="hidden" name="product_id" value="{{ item.product.id if item.product else '' }}">
                                <div class="fw-semibold text-dark">{{ item.product.name if item.product else l('Deleted Product','মুছে যাওয়া পণ্য') }}</div>
                                {% if item.product and item.product.sku %}
                                <div class="small text-muted font-monospace">{{ item.product.sku }}</div>
                                {% endif %}
                            </td>
                            <td class="text-center">
                                <span class="badge bg-light text-dark border">{{ "%.2f"|format(item.quantity or 0) }}</span>
                            </td>
                            <td class="text-center">
                                {% if returned.qty > 0 %}
                                <span class="badge" style="background:#fef3c7;color:#b45309;border:1px solid #fde68a;">{{ "%.2f"|format(returned.qty) }}</span>
                                {% else %}
                                <span class="text-muted small">—</span>
                                {% endif %}
                            </td>
                            <td class="text-center">
                                {% if available > 0 %}
                                <span class="badge" style="background:#dcfce7;color:#166534;border:1px solid #bbf7d0;">{{ "%.2f"|format(available) }}</span>
                                {% else %}
                                <span class="badge" style="background:#f1f5f9;color:#94a3b8;border:1px solid #e2e8f0;">{{ l('None', 'শেষ') }}</span>
                                {% endif %}
                            </td>
                            <td class="text-center">
                                {% if available > 0 %}
                                <input type="number" min="0" max="{{ "%.2f"|format(available) }}"
                                       step="0.01" name="return_qty_{{ item.id }}"
                                       class="form-control form-control-sm text-center"
                                       value="0" style="width:110px; margin: 0 auto;">
                                {% else %}
                                <input type="number" value="0" name="return_qty_{{ item.id }}"
                                       class="form-control form-control-sm text-center" disabled style="width:110px; margin: 0 auto;">
                                {% endif %}
                            </td>
                        </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>

            <!-- REASON -->
            <div class="mb-4">
                <label class="form-label-sm">{{ l('Reason for Return', 'ফেরতের কারণ') }}</label>
                <textarea class="form-control" name="reason" rows="2"
                          placeholder="{{ l('e.g. Damaged item, wrong product, customer changed mind...', 'যেমন: নষ্ট পণ্য, ভুল পণ্য, কাস্টমার ফেরত দিতে চাইছেন...') }}"></textarea>
            </div>

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

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

<script>
document.getElementById('returnInvoiceForm').addEventListener('submit', function() {
    const btn = document.getElementById('confirmReturnBtn');
    if (btn) {
        btn.disabled = true;
        btn.innerHTML = '<i class="bi bi-hourglass-split me-1"></i>{{ l("Processing...", "প্রক্রিয়া চলছে...") }}';
    }
});
</script>

{% endblock %}