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

<style>
/* ===== RETURN INVOICE PRINT STYLES ===== */
@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; min-height: 0 !important; }
    .content { padding: 6mm !important; }
    .return-invoice-card { box-shadow: none !important; border: 1px solid #ccc !important; max-width: 100% !important; }
    .ri-shop-name { font-size: 18px !important; }
    .ri-total-badge { font-size: 16px !important; }
}

.return-invoice-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-header {
    background: linear-gradient(135deg, #0f172a 0%, #1e1b4b 60%, #1e3a8a 100%);
    color: white;
    padding: 22px 28px 18px;
}
.ri-shop-name { font-size: 20px; font-weight: 800; color: #fff; margin: 0; letter-spacing: -0.01em; }
.ri-shop-sub  { font-size: 12px; color: rgba(255,255,255,0.7); margin-top: 2px; }

.ri-badge-wrap {
    background: rgba(255,255,255,0.12);
    border: 1px solid rgba(255,255,255,0.2);
    border-radius: 10px;
    padding: 10px 16px;
    text-align: right;
}
.ri-return-label { font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em; color: rgba(255,255,255,0.6); font-weight: 700; }
.ri-return-no    { font-size: 16px; font-weight: 800; color: #fbbf24; margin-top: 1px; }
.ri-return-date  { font-size: 11px; color: rgba(255,255,255,0.65); margin-top: 2px; }

.ri-body { padding: 24px 28px; }
.ri-section-title {
    font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em;
    color: #6b7280; font-weight: 700; margin-bottom: 10px; margin-top: 20px;
    display: flex; align-items: center; gap: 6px;
}
.ri-section-title:first-child { margin-top: 0; }
.ri-section-title i { color: #4f46e5; font-size: 13px; }

.ri-info-grid {
    display: grid; grid-template-columns: 1fr 1fr; gap: 10px 20px;
    background: #f9fafb; border-radius: 10px; padding: 14px 16px;
    border: 1px solid #eef0f4;
}
.ri-info-row { }
.ri-info-label { font-size: 11px; color: #9ca3af; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; }
.ri-info-val   { font-size: 14px; font-weight: 600; color: #111827; margin-top: 1px; }

.ri-reason-box {
    background: #fef3c7; border: 1px solid #fde68a; border-radius: 10px;
    padding: 10px 14px; display: flex; align-items: flex-start; gap: 8px;
    margin-bottom: 20px;
}
.ri-reason-box i { color: #d97706; margin-top: 2px; flex-shrink: 0; }
.ri-reason-text  { font-size: 13.5px; color: #78350f; }

.ri-total-badge {
    background: linear-gradient(135deg, #ecfdf5, #d1fae5);
    border: 1px solid #a7f3d0;
    border-radius: 12px;
    padding: 14px 20px;
    text-align: right;
    margin-top: 16px;
}
.ri-total-label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: #6b7280; font-weight: 700; }
.ri-total-amount { font-size: 26px; font-weight: 800; color: #065f46; margin-top: 2px; letter-spacing: -0.01em; }

.ri-footer {
    text-align: center; padding: 14px 28px 18px;
    border-top: 1px solid #eef0f4;
    background: #f9fafb;
    color: #9ca3af; font-size: 11.5px;
}
</style>

<!-- PAGE HERO (screen only) -->
<div class="page-hero no-print">
    <div>
        <h2><i class="bi bi-file-earmark-arrow-left"></i> {{ l('Sales Return Details', 'সেলস রিটার্নের বিবরণ') }}</h2>
        <p class="page-subtitle">{{ l('View full return invoice and print', 'সম্পূর্ণ রিটার্ন ইনভয়েস দেখুন ও প্রিন্ট করুন') }}</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>
        <button onclick="window.print()" class="btn btn-success btn-sm fw-semibold">
            <i class="bi bi-printer me-1"></i>{{ l('Print Return Invoice', 'রিটার্ন ইনভয়েস প্রিন্ট') }}
        </button>
    </div>
</div>

<!-- RETURN INVOICE CARD -->
<div class="return-invoice-card">

    <!-- HEADER -->
    <div class="ri-header d-flex justify-content-between align-items-start gap-3">
        <div>
            <div class="ri-shop-name">{{ sales_return.invoice.shop.shop_name }}</div>
            <div class="ri-shop-sub">
                {% if sales_return.invoice.shop.address %}{{ sales_return.invoice.shop.address }}{% endif %}
                {% if sales_return.invoice.shop.phone %} &bull; {{ sales_return.invoice.shop.phone }}{% endif %}
            </div>
        </div>
        <div class="ri-badge-wrap text-end flex-shrink-0">
            <div class="ri-return-label">{{ l('Sales Return', 'সেলস রিটার্ন') }}</div>
            <div class="ri-return-no">#{{ sales_return.return_no or '—' }}</div>
            <div class="ri-return-date">{{ sales_return.return_date.strftime('%d-%m-%Y %I:%M %p') if sales_return.return_date else '' }}</div>
        </div>
    </div>

    <div class="ri-body">

        <!-- INVOICE REFERENCE -->
        <div class="ri-section-title"><i class="bi bi-receipt"></i> {{ l('Reference Invoice', 'রেফারেন্স ইনভয়েস') }}</div>
        <div class="ri-info-grid" style="grid-template-columns: 1fr 1fr 1fr;">
            <div class="ri-info-row">
                <div class="ri-info-label">{{ l('Invoice No', 'ইনভয়েস নং') }}</div>
                <div class="ri-info-val text-primary">{{ sales_return.invoice.invoice_no }}</div>
            </div>
            <div class="ri-info-row">
                <div class="ri-info-label">{{ l('Invoice Date', 'ইনভয়েস তারিখ') }}</div>
                <div class="ri-info-val">{{ sales_return.invoice.created_at.strftime('%d-%m-%Y') if sales_return.invoice.created_at else '—' }}</div>
            </div>
            <div class="ri-info-row">
                <div class="ri-info-label">{{ l('Return Date', 'ফেরতের তারিখ') }}</div>
                <div class="ri-info-val">{{ sales_return.return_date.strftime('%d-%m-%Y') if sales_return.return_date else '—' }}</div>
            </div>
        </div>

        <!-- CUSTOMER INFO -->
        <div class="ri-section-title"><i class="bi bi-person-circle"></i> {{ l('Customer Information', 'কাস্টমারের তথ্য') }}</div>
        {% if sales_return.invoice.customer %}
        <div class="ri-info-grid">
            <div class="ri-info-row">
                <div class="ri-info-label">{{ l('Name', 'নাম') }}</div>
                <div class="ri-info-val">{{ sales_return.invoice.customer.name }}</div>
            </div>
            <div class="ri-info-row">
                <div class="ri-info-label">{{ l('Phone', 'ফোন') }}</div>
                <div class="ri-info-val">{{ sales_return.invoice.customer.phone or '—' }}</div>
            </div>
            {% if sales_return.invoice.customer.address %}
            <div class="ri-info-row" style="grid-column: 1 / -1;">
                <div class="ri-info-label">{{ l('Address', 'ঠিকানা') }}</div>
                <div class="ri-info-val">{{ sales_return.invoice.customer.address }}</div>
            </div>
            {% endif %}
        </div>
        {% else %}
        <div class="ri-info-grid">
            <div class="ri-info-row">
                <div class="ri-info-label">{{ l('Customer', 'কাস্টমার') }}</div>
                <div class="ri-info-val text-muted fst-italic">{{ l('Walk-in Customer', 'সাধারণ কাস্টমার') }}</div>
            </div>
        </div>
        {% endif %}

        <!-- RETURN REASON -->
        {% if sales_return.reason %}
        <div class="ri-section-title"><i class="bi bi-chat-left-text"></i> {{ l('Return Reason', 'ফেরতের কারণ') }}</div>
        <div class="ri-reason-box">
            <i class="bi bi-exclamation-triangle-fill"></i>
            <span class="ri-reason-text">{{ sales_return.reason }}</span>
        </div>
        {% endif %}

        <!-- RETURNED ITEMS TABLE -->
        <div class="ri-section-title"><i class="bi bi-table"></i> {{ l('Returned Items', 'ফেরত দেওয়া পণ্য') }}</div>
        <div class="table-responsive" style="border-radius:10px;overflow:hidden;border:1px solid #eef0f4;">
            <table class="table table-modern mb-0">
                <thead>
                    <tr>
                        <th>#</th>
                        <th>{{ l('Product', 'পণ্য') }}</th>
                        <th class="text-center">{{ l('Qty', 'পরিমাণ') }}</th>
                        <th class="text-end">{{ l('Unit Price', 'একক মূল্য') }}</th>
                        <th class="text-end">{{ l('Return Amount', 'ফেরত পরিমাণ') }}</th>
                    </tr>
                </thead>
                <tbody>
                    {% for item in sales_return.items %}
                    <tr>
                        <td class="text-muted small">{{ loop.index }}</td>
                        <td class="fw-semibold text-dark">{{ item.product.name if item.product else l('Unknown','অজানা') }}</td>
                        <td class="text-center">
                            <span class="badge bg-light text-dark border">{{ "%.2f"|format(item.quantity or 0) }}</span>
                        </td>
                        <td class="text-end">৳ {{ "%.2f"|format(item.price or 0) }}</td>
                        <td class="text-end fw-bold text-success">৳ {{ "%.2f"|format(item.total or 0) }}</td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>

        <!-- TOTAL -->
        <div class="ri-total-badge">
            <div class="ri-total-label">{{ l('Total Return Credit', 'মোট ফেরত ক্রেডিট') }}</div>
            <div class="ri-total-amount">৳ {{ "%.2f"|format(sales_return.total_return or 0) }}</div>
        </div>

    </div>

    <!-- FOOTER -->
    <div class="ri-footer">
        <i class="bi bi-shield-check text-success me-1"></i>
        {{ l('This is an official return receipt generated by Shop Manager POS', 'এটি Shop Manager POS দ্বারা তৈরি একটি অফিশিয়াল ফেরত রসিদ') }}
    </div>
</div>

<!-- SCREEN ACTIONS -->
<div class="d-flex gap-2 mt-3 no-print">
    <button onclick="window.print()" class="btn btn-success fw-bold">
        <i class="bi bi-printer me-1"></i>{{ l('Print Return Invoice', 'রিটার্ন ইনভয়েস প্রিন্ট করুন') }}
    </button>
    <a href="{{ url_for('returns') }}" class="btn btn-outline-secondary fw-semibold">
        <i class="bi bi-list me-1"></i>{{ l('All Returns', 'সকল রিটার্ন') }}
    </a>
</div>

{% endblock %}