{% 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: 0 !important; }
    .print-show { display: block !important; }
    .print-header { border-bottom: 2px solid #000; padding-bottom: 12px; margin-bottom: 16px; }
}
.print-show { display: none; }
</style>

<!-- PRINT HEADER (only visible when printing) -->
<div class="print-show print-header">
    <div class="d-flex justify-content-between align-items-start">
        <div>
            <h2 class="mb-0 fw-bold">{{ customer.name }}</h2>
            <div class="text-muted">{{ l('Customer Sales Report', 'কাস্টমারের ক্রয় রিপোর্ট') }}</div>
        </div>
        <div class="text-end">
            <div class="fw-bold">{{ l('Total Purchase', 'মোট ক্রয়') }}: ৳ {{ "%.2f"|format(total_purchase or 0) }}</div>
            <div class="text-muted small">{{ l('Generated', 'তৈরি') }}: {{ now.strftime('%d-%m-%Y %I:%M %p') if now is defined else '' }}</div>
        </div>
    </div>
</div>

<!-- PAGE HERO -->
<div class="page-hero no-print">
    <div>
        <h2><i class="bi bi-person-lines-fill"></i> {{ l('Customer Sales Report', 'কাস্টমারের ক্রয় রিপোর্ট') }}</h2>
        <p class="page-subtitle">{{ customer.name }}{% if customer.phone %} &middot; {{ customer.phone }}{% endif %}</p>
    </div>
    <div class="page-hero-actions">
        <a href="{{ url_for('customers') }}" class="btn-back-nav">
            <i class="bi bi-arrow-left"></i> {{ l('Back to Customers', 'কাস্টমার লিস্টে ফিরুন') }}
        </a>
        <button onclick="window.print()" class="btn btn-primary btn-sm fw-semibold">
            <i class="bi bi-printer me-1"></i>{{ l('Print Report', 'প্রিন্ট করুন') }}
        </button>
    </div>
</div>

<!-- STAT CARDS -->
<div class="stat-grid no-print" style="grid-template-columns: repeat(auto-fit, minmax(160px,1fr)); margin-bottom:18px;">
    <div class="stat-card" style="background:linear-gradient(135deg,#eef2ff,#e0e7ff);border:1px solid #c7d2fe;">
        <div class="stat-icon" style="background:#4f46e5;color:#fff;"><i class="bi bi-bag-fill"></i></div>
        <div class="stat-label">{{ l('Total Purchase', 'মোট ক্রয়') }}</div>
        <div class="stat-value" style="color:#1e1b4b;">৳ {{ "%.2f"|format(total_purchase or 0) }}</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-receipt"></i></div>
        <div class="stat-label">{{ l('Total Invoices', 'মোট ইনভয়েস') }}</div>
        <div class="stat-value" style="color:#064e3b;">{{ invoices|length }}</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-exclamation-circle"></i></div>
        <div class="stat-label">{{ l('Due Balance', 'বাকি') }}</div>
        <div class="stat-value" style="color:#7c2d12;">৳ {{ "%.2f"|format(customer.due_amount or 0) }}</div>
    </div>
</div>

<!-- CUSTOMER INFO CARD -->
<div class="panel no-print" style="margin-bottom:16px;">
    <div class="panel-title"><i class="bi bi-person-circle"></i> {{ l('Customer Information', 'কাস্টমারের তথ্য') }}</div>
    <div class="row g-3">
        <div class="col-md-3 col-6">
            <div class="form-label-sm">{{ l('Name', 'নাম') }}</div>
            <div class="fw-semibold text-dark">{{ customer.name }}</div>
        </div>
        {% if customer.phone %}
        <div class="col-md-3 col-6">
            <div class="form-label-sm">{{ l('Phone', 'ফোন') }}</div>
            <div class="fw-semibold text-dark">{{ customer.phone }}</div>
        </div>
        {% endif %}
        {% if customer.address %}
        <div class="col-md-3 col-6">
            <div class="form-label-sm">{{ l('Address', 'ঠিকানা') }}</div>
            <div class="fw-semibold text-dark">{{ customer.address }}</div>
        </div>
        {% endif %}
        <div class="col-md-3 col-6">
            <div class="form-label-sm">{{ l('Payment Status', 'পেমেন্ট স্ট্যাটাস') }}</div>
            {% if (customer.due_amount or 0) > 0 %}
            <span class="badge" style="background:#fef3c7;color:#b45309;border:1px solid #fde68a;font-size:12px;">{{ l('Has Due', 'বাকি আছে') }}: ৳ {{ "%.2f"|format(customer.due_amount) }}</span>
            {% else %}
            <span class="badge" style="background:#dcfce7;color:#166534;border:1px solid #bbf7d0;font-size:12px;">{{ l('Clear', 'পরিষ্কার') }}</span>
            {% endif %}
        </div>
    </div>
</div>

<!-- SALES TABLE -->
<div class="panel" style="padding:0;overflow:hidden;">
    <div class="d-flex align-items-center justify-content-between px-4 py-3 border-bottom">
        <div class="panel-title mb-0"><i class="bi bi-table"></i> {{ l('All Purchase Transactions', 'সকল ক্রয় লেনদেন') }}</div>
        <span class="badge bg-secondary" style="font-size:12px;">{{ l('Total Records', 'মোট রেকর্ড') }}: {{ invoices|length }}</span>
    </div>
    <div class="table-responsive">
        <table class="table table-modern mb-0">
            <thead>
                <tr>
                    <th>{{ l('Invoice No', 'ইনভয়েস নং') }}</th>
                    <th>{{ l('Product', 'পণ্য') }}</th>
                    <th>{{ l('Qty', 'পরিমাণ') }}</th>
                    <th>{{ l('Unit Price', 'একক মূল্য') }}</th>
                    <th>{{ l('Total', 'মোট') }}</th>
                    <th>{{ l('Date', 'তারিখ') }}</th>
                    <th class="no-print">{{ l('Action', 'অ্যাকশন') }}</th>
                </tr>
            </thead>
            <tbody>
                {% set ns = namespace(has_rows=false) %}
                {% for invoice in invoices %}
                    {% for item in invoice.items %}
                    {% set ns.has_rows = true %}
                    <tr>
                        <td>
                            <span class="fw-semibold text-primary">{{ invoice.invoice_no }}</span>
                        </td>
                        <td class="fw-semibold text-dark">
                            {% if item.product %}{{ item.product.name }}{% else %}<span class="text-muted fst-italic">{{ l('Deleted Product', 'মুছে যাওয়া পণ্য') }}</span>{% endif %}
                        </td>
                        <td>
                            <span class="badge bg-light text-dark border">{{ "%.2f"|format(item.quantity or 0) }}</span>
                        </td>
                        <td>৳ {{ "%.2f"|format(item.price or 0) }}</td>
                        <td class="fw-bold text-dark">৳ {{ "%.2f"|format(item.total or 0) }}</td>
                        <td class="text-muted small">{{ invoice.created_at.strftime('%d-%m-%Y %I:%M %p') if invoice.created_at else '—' }}</td>
                        <td class="no-print">
                            <a href="{{ url_for('invoice', id=invoice.id) }}" class="btn btn-outline-primary btn-sm">
                                <i class="bi bi-eye me-1"></i>{{ l('View', 'দেখুন') }}
                            </a>
                        </td>
                    </tr>
                    {% endfor %}
                {% endfor %}
                {% if not ns.has_rows %}
                <tr>
                    <td colspan="7" class="text-center py-5 text-muted">
                        <i class="bi bi-inbox fs-2 d-block mb-2"></i>
                        {{ l('No purchase records found for this customer.', 'এই কাস্টমারের কোনো ক্রয় রেকর্ড পাওয়া যায়নি।') }}
                    </td>
                </tr>
                {% endif %}
            </tbody>
            {% if ns.has_rows %}
            <tfoot style="background:#f9fafb;">
                <tr>
                    <td colspan="4" class="text-end fw-bold text-dark">{{ l('Grand Total', 'সর্বমোট') }}</td>
                    <td class="fw-bold text-success">৳ {{ "%.2f"|format(total_purchase or 0) }}</td>
                    <td colspan="2"></td>
                </tr>
            </tfoot>
            {% endif %}
        </table>
    </div>
</div>

{% endblock %}