{% extends "base.html" %}

{% block content %}
<style>
  .stat-card-link {
    text-decoration: none;
    color: inherit;
    display: block;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
  }
  .stat-card-link:hover {
    transform: translateY(-2px);
  }
  .active-filter-card {
    border: 2px solid #2563eb !important;
    background: #eff6ff !important;
  }
  .active-filter-low {
    border: 2px solid #f59e0b !important;
    background: #fffbeb !important;
  }
  .active-filter-out {
    border: 2px solid #dc2626 !important;
    background: #fef2f2 !important;
  }
  .filter-pill-btn.active-pill-all {
    background-color: #0f172a !important;
    color: #ffffff !important;
    border-color: #0f172a !important;
  }
  .filter-pill-btn.active-pill-low {
    background-color: #d97706 !important;
    color: #ffffff !important;
    border-color: #d97706 !important;
  }
  .filter-pill-btn.active-pill-out {
    background-color: #dc2626 !important;
    color: #ffffff !important;
    border-color: #dc2626 !important;
  }
  .filter-pill-btn.active-pill-expired {
    background-color: #ea580c !important;
    color: #ffffff !important;
    border-color: #ea580c !important;
  }
</style>

<div class="page-hero">
    <div>
        <h2><i class="bi bi-box-seam text-primary"></i> {{ t('products') }}</h2>
        <p class="page-subtitle">{{ l('Manage your catalogue, prices, categories and stock levels', 'আপনার পণ্যের তালিকা, বিভাগ, মূল্য ও মজুদ পরিচালনা করুন') }}</p>
    </div>
    <div class="page-hero-actions">
        <a href="/barcode-print" class="btn btn-outline-dark btn-sm fw-semibold"><i class="bi bi-upc-scan me-1"></i> {{ l('Print Barcodes', 'বারকোড প্রিন্ট') }}</a>
        <a href="/low-stock-alert" class="btn btn-outline-danger btn-sm fw-semibold"><i class="bi bi-exclamation-triangle me-1"></i> {{ l('Low Stock Alerts', 'স্টক সতর্কতা') }}</a>
        <a href="/stock-adjustment" class="btn btn-outline-secondary btn-sm fw-semibold"><i class="bi bi-sliders me-1"></i> {{ l('Adjust Stock', 'মজুদ সমন্বয়') }}</a>
        <button type="button" class="btn btn-primary btn-sm fw-semibold" data-bs-toggle="modal" data-bs-target="#importModal">
            <i class="bi bi-file-earmark-arrow-up me-1"></i> {{ l('Import CSV/Excel', 'ইমপোর্ট সিএসভি/এক্সেল') }}
        </button>
        <div class="btn-group btn-group-sm">
            <button type="button" class="btn btn-outline-success dropdown-toggle fw-semibold" data-bs-toggle="dropdown">
                <i class="bi bi-download me-1"></i> {{ l('Export', 'এক্সপোর্ট') }}
            </button>
            <ul class="dropdown-menu dropdown-menu-end">
                <li><a class="dropdown-item" href="/export/stock/csv">CSV</a></li>
                <li><a class="dropdown-item" href="/export/stock/excel">Excel</a></li>
                <li><a class="dropdown-item" href="/export/stock/pdf">PDF</a></li>
            </ul>
        </div>
    </div>
</div>

<!-- TOP METRICS GRID (4 CARDS: Total, Active, Low Stock, Out of Stock) -->
<div class="row g-3 mb-3">
    <div class="col-md-3 col-6">
        <a href="javascript:void(0)" onclick="setQuickFilter('all')" class="stat-card-link">
            <div class="stat-card {% if stock_status == 'all' or not stock_status %}active-filter-card{% endif %}" id="card-all">
                <div class="stat-icon" style="background:#eef2ff;color:#4f46e5;"><i class="bi bi-box-seam"></i></div>
                <div class="stat-label">{{ l('Total Products', 'মোট পণ্য') }}</div>
                <div class="stat-value">{{ total_products if total_products is defined else (products|length) }}</div>
            </div>
        </a>
    </div>
    <div class="col-md-3 col-6">
        <div class="stat-card">
            <div class="stat-icon" style="background:#dcfce7;color:#166534;"><i class="bi bi-check-circle"></i></div>
            <div class="stat-label">{{ l('Active Products', 'সক্রিয় পণ্য') }}</div>
            <div class="stat-value">{{ active_products if active_products is defined else (products|length) }}</div>
        </div>
    </div>
    <div class="col-md-3 col-6">
        <a href="javascript:void(0)" onclick="setQuickFilter('low')" class="stat-card-link" title="{{ l('Click to filter Low Stock Products', 'কম স্টকের পণ্য দেখতে চাপুন') }}">
            <div class="stat-card {% if stock_status == 'low' %}active-filter-low{% endif %}" id="card-low">
                <div class="stat-icon" style="background:#fef3c7;color:#b45309;"><i class="bi bi-exclamation-triangle-fill"></i></div>
                <div class="stat-label">{{ l('Low Stock Products', 'কম মজুদ পণ্য') }}</div>
                <div class="stat-value text-warning-emphasis">{{ low_stock_count if low_stock_count is defined else 0 }}</div>
            </div>
        </a>
    </div>
    <div class="col-md-3 col-6">
        <a href="javascript:void(0)" onclick="setQuickFilter('out_of_stock')" class="stat-card-link" title="{{ l('Click to filter Out of Stock Products', 'স্টক শেষ হয়ে যাওয়া পণ্য দেখতে চাপুন') }}">
            <div class="stat-card {% if stock_status == 'out_of_stock' %}active-filter-out{% endif %}" id="card-out">
                <div class="stat-icon" style="background:#fee2e2;color:#dc2626;"><i class="bi bi-x-octagon-fill"></i></div>
                <div class="stat-label">{{ l('Out of Stock Products', 'স্টক শেষ পণ্য') }}</div>
                <div class="stat-value text-danger">{{ out_of_stock_count if out_of_stock_count is defined else 0 }}</div>
            </div>
        </a>
    </div>
</div>

<!-- ADD NEW PRODUCT FORM (CLEAN 2-COLUMN BALANCED LAYOUT) -->
<div class="card border-0 shadow-sm rounded-4 mb-4">
    <div class="card-header bg-white border-bottom py-3 px-4">
        <h5 class="fw-bold mb-0 text-dark"><i class="bi bi-plus-circle text-primary me-2"></i>{{ l('Add New Product', 'নতুন পণ্য যোগ করুন') }}</h5>
    </div>
    <div class="card-body p-4">
        <form method="POST" action="/add-product" enctype="multipart/form-data">
        <input type="hidden" name="_csrf_token" value="{{ csrf_token }}">

        <div class="row g-4">
            <!-- LEFT COLUMN: Product & Basic Info -->
            <div class="col-md-6 border-end-md pe-md-4">
                <div class="d-flex align-items-center mb-3 text-primary fw-bold">
                    <i class="bi bi-box-seam me-2 fs-5"></i>
                    <span>{{ l('1. Basic Details & Stock', '১. পণ্যের মৌলিক বিবরণ ও মজুদ') }}</span>
                </div>

                <div class="mb-3">
                    <label class="form-label fw-semibold text-dark small">{{ l('Product Name', 'পণ্যের নাম') }} <span class="text-danger">*</span></label>
                    <input class="form-control form-control-lg fs-6" name="name" placeholder="{{ l('e.g. Basmati Rice 1kg', 'যেমন: বাসমতি চাল ১কেজি') }}" required>
                </div>

                <div class="row g-2 mb-3">
                    <div class="col-6">
                        <label class="form-label fw-semibold text-dark small">{{ l('Category', 'বিভাগ / ক্যাটাগরি') }}</label>
                        <input class="form-control" name="category" placeholder="{{ l('e.g. Grocery', 'যেমন: গ্রোসারী') }}">
                    </div>
                    <div class="col-6">
                        <label class="form-label fw-semibold text-dark small">{{ l('Unit', 'একক') }}</label>
                        <select class="form-select" name="unit">
                            <option value="pcs">{{ l('Pieces', 'পিস') }}</option>
                            <option value="kg">KG</option>
                            <option value="liter">{{ l('Liter', 'লিটার') }}</option>
                            <option value="box">{{ l('Box', 'বক্স') }}</option>
                            <option value="packet">{{ l('Packet', 'প্যাকেট') }}</option>
                            <option value="gm">gm</option>
                        </select>
                    </div>
                </div>

                <div class="row g-2 mb-3">
                    <div class="col-6">
                        <label class="form-label fw-semibold text-dark small">{{ l('Opening Stock', 'শুরুর মজুদ') }} <span class="text-danger">*</span></label>
                        <input class="form-control" name="stock" placeholder="0" required>
                    </div>
                    <div class="col-6">
                        <label class="form-label fw-semibold text-dark small">{{ l('Reorder Level', 'পুনঃঅর্ডার স্তর') }}</label>
                        <input class="form-control" name="reorder_level" placeholder="5" value="5">
                    </div>
                </div>

                <div class="mb-3">
                    <label class="form-label fw-semibold text-dark small">{{ l('Product Image', 'পণ্যের ছবি') }}</label>
                    <input type="file" class="form-control" name="image" accept="image/*">
                </div>
            </div>

            <!-- RIGHT COLUMN: Pricing & Product Identifiers -->
            <div class="col-md-6 ps-md-4">
                <div class="d-flex align-items-center mb-3 text-success fw-bold">
                    <i class="bi bi-tag me-2 fs-5"></i>
                    <span>{{ l('2. Pricing & Attributes', '২. মূল্য ও অন্যান্য তথ্য') }}</span>
                </div>

                <div class="row g-2 mb-3">
                    <div class="col-6">
                        <label class="form-label fw-semibold text-dark small">{{ l('Buy Price (৳)', 'ক্রয় মূল্য') }} <span class="text-danger">*</span></label>
                        <input class="form-control form-control-lg fs-6" name="buy_price" placeholder="0.00" required>
                    </div>
                    <div class="col-6">
                        <label class="form-label fw-semibold text-dark small">{{ l('Sell Price (৳)', 'বিক্রয় মূল্য') }} <span class="text-danger">*</span></label>
                        <input class="form-control form-control-lg fs-6" name="sell_price" placeholder="0.00" required>
                    </div>
                </div>

                <div class="row g-2 mb-3">
                    <div class="col-6">
                        <label class="form-label fw-semibold text-dark small">{{ l('Barcode', 'বারকোড') }}</label>
                        <input class="form-control" name="barcode" placeholder="{{ l('Optional', 'ঐচ্ছিক') }}">
                    </div>
                    <div class="col-6">
                        <label class="form-label fw-semibold text-dark small">{{ l('Brand', 'ব্র্যান্ড') }}</label>
                        <input class="form-control" name="brand" placeholder="{{ l('Brand', 'ব্র্যান্ড') }}">
                    </div>
                </div>

                <div class="row g-2 mb-3">
                    <div class="col-6">
                        <label class="form-label fw-semibold text-dark small">{{ l('Batch No.', 'ব্যাচ নং') }}</label>
                        <input class="form-control" name="batch_number" placeholder="{{ l('Batch No.', 'ব্যাচ নং') }}">
                    </div>
                    <div class="col-6">
                        <label class="form-label fw-semibold text-dark small">{{ l('Expiry Date', 'মেয়াদ শেষ') }}</label>
                        <input type="date" class="form-control" name="expiry_date">
                    </div>
                </div>
            </div>
        </div>

        <div class="d-flex justify-content-end align-items-center mt-4 pt-3 border-top">
            <button type="submit" class="btn btn-primary btn-lg px-5 fw-bold shadow-sm">
                <i class="bi bi-plus-circle me-1"></i> {{ l('Add Product', 'পণ্য যোগ করুন') }}
            </button>
        </div>

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

<!-- INSTANT LIVE SEARCH & NO-RELOAD AUTO-FILTER TOOLBAR -->
<div class="card border-0 shadow-sm rounded-4 p-3 mb-3">
    <form id="filter-form" onsubmit="event.preventDefault(); applyLiveFilters();">
        <div class="row g-2 align-items-center">
            <div class="col-md-8">
                <div class="input-group">
                    <span class="input-group-text bg-white border-end-0"><i class="bi bi-search text-primary"></i></span>
                    <input type="text" id="live-search-input" class="form-control border-start-0 ps-0" placeholder="{{ l('Search product by name or category instantly...', 'পণ্যের নাম বা বিভাগ দিয়ে মুহূর্তেই খুঁজুন...') }}" value="{{ search }}" oninput="applyLiveFilters()">
                </div>
            </div>
            <div class="col-md-2 col-6">
                <button type="button" onclick="applyLiveFilters()" class="btn btn-primary w-100 fw-semibold"><i class="bi bi-funnel me-1"></i>{{ l('Search', 'খুঁজুন') }}</button>
            </div>
            <div class="col-md-2 col-6">
                <button type="button" onclick="resetLiveFilters()" class="btn btn-outline-secondary w-100 fw-semibold">{{ l('Reset', 'রিসেট') }}</button>
            </div>
        </div>
    </form>

    <!-- Interactive Auto Filter Buttons (All, Low Stock, Out of Stock, Expiry Alerts) -->
    <div class="d-flex flex-wrap gap-2 mt-3 pt-2 border-top">
        <span class="small text-muted align-self-center me-1 fw-bold">{{ l('Quick Filter:', 'দ্রুত ফিল্টার:') }}</span>

        <button type="button" onclick="setQuickFilter('all')" id="pill-all" class="btn btn-sm filter-pill-btn active-pill-all rounded-pill px-3 fw-semibold">
            <i class="bi bi-box-seam me-1"></i>{{ l('All Products', 'সকল পণ্য') }}
        </button>

        <button type="button" onclick="setQuickFilter('low')" id="pill-low" class="btn btn-sm filter-pill-btn btn-outline-warning text-dark rounded-pill px-3 fw-semibold">
            <i class="bi bi-exclamation-triangle-fill me-1"></i>{{ l('Low Stock Products', 'কম মজুদ পণ্য') }}
        </button>

        <button type="button" onclick="setQuickFilter('out_of_stock')" id="pill-out" class="btn btn-sm filter-pill-btn btn-outline-danger rounded-pill px-3 fw-semibold">
            <i class="bi bi-x-octagon-fill me-1"></i>{{ l('Out of Stock Products', 'স্টক শেষ পণ্য') }}
        </button>

        <button type="button" onclick="setQuickFilter('expired')" id="pill-expired" class="btn btn-sm filter-pill-btn btn-outline-warning text-dark rounded-pill px-3 fw-semibold">
            <i class="bi bi-calendar-x-fill me-1"></i>{{ l('Expired / Expiring Soon', 'মেয়াদ শেষ / দ্বারপ্রান্তে') }}
            {% if expired_count is defined and expired_count > 0 %}
                <span class="badge bg-danger ms-1">{{ expired_count }}</span>
            {% endif %}
        </button>
    </div>
</div>

<!-- DYNAMIC FILTER BADGE NOTIFICATION BAR -->
<div id="filter-banner" class="alert d-flex justify-content-between align-items-center rounded-3 mb-3 p-3 shadow-sm border-0 d-none">
    <div>
        <i id="filter-banner-icon" class="me-2 fs-5"></i>
        <strong id="filter-banner-text"></strong>
    </div>
    <span id="filter-count-badge" class="badge fs-6 px-3 py-1">0 {{ l('Items', 'টি পণ্য') }}</span>
</div>

<!-- PRODUCTS LIST TABLE -->
<div class="panel p-0 overflow-hidden">
    <div class="table-responsive">
        <table class="table table-hover align-middle mb-0" id="products-table">
            <thead class="table-light">
                <tr>
                    <th class="ps-3">{{ l('Product Name', 'পণ্যের নাম') }}</th>
                    <th>{{ l('Category', 'বিভাগ') }}</th>
                    <th>{{ l('Buy Price', 'ক্রয় মূল্য') }}</th>
                    <th>{{ l('Sell Price', 'বিক্রয় মূল্য') }}</th>
                    <th>{{ l('Stock Level', 'বর্তমান স্টক') }}</th>
                    <th>{{ l('Expiry Status', 'মেয়াদের অবস্থা') }}</th>
                    <th class="text-end pe-3">{{ l('Actions', 'অ্যাকশন') }}</th>
                </tr>
            </thead>
            <tbody id="products-table-body">
            {% for p in products %}
                <tr class="product-row"
                    data-name="{{ (p.name or '')|lower }}"
                    data-category="{{ (p.category or '')|lower }}"
                    data-code="{{ (p.product_code or '')|lower }}"
                    data-barcode="{{ (p.barcode or '')|lower }}"
                    data-stock="{{ p.stock or 0 }}"
                    data-reorder="{{ p.reorder_level or 5 }}"
                    data-expiry-days="{{ p.days_until_expiry if p.days_until_expiry is not none else '' }}">
                    <td class="ps-3">
                        <div class="fw-bold text-dark">{{ p.name }}</div>
                        <small class="text-muted font-monospace">{{ p.product_code or '' }}</small>
                    </td>
                    <td><span class="badge bg-light text-dark border">{{ p.category or 'General' }}</span></td>
                    <td class="text-muted">৳ {{ "%.2f"|format(p.buy_price or 0) }}</td>
                    <td class="fw-bold text-dark">৳ {{ "%.2f"|format(p.sell_price or 0) }}</td>
                    <td>
                        {% if p.stock <= 0 %}
                            <span class="badge rounded-pill bg-danger-subtle text-danger border border-danger-subtle px-2.5 py-1 fw-bold">
                                0 {{ p.unit or '' }}
                            </span>
                        {% elif p.stock <= p.reorder_level %}
                            <span class="badge rounded-pill bg-warning-subtle text-warning-emphasis border border-warning-subtle px-2.5 py-1 fw-bold">
                                {{ '%.2f'|format(p.stock) if p.stock != p.stock|int else p.stock|int }} {{ p.unit or '' }}
                            </span>
                        {% else %}
                            <span class="badge rounded-pill bg-success-subtle text-success border border-success-subtle px-2.5 py-1 fw-bold">
                                {{ '%.2f'|format(p.stock) if p.stock != p.stock|int else p.stock|int }} {{ p.unit or '' }}
                            </span>
                        {% endif %}
                    </td>
                    <td>
                        {% if p.expiry_date %}
                            {% if p.days_until_expiry is not none and p.days_until_expiry < 0 %}
                                <span class="badge bg-danger-subtle text-danger border border-danger-subtle px-2.5 py-1 fw-bold">
                                    <i class="bi bi-calendar-x me-1"></i>Expired ({{ p.days_until_expiry|abs }}d ago)
                                </span>
                            {% elif p.days_until_expiry is not none and p.days_until_expiry == 0 %}
                                <span class="badge bg-danger px-2.5 py-1 fw-bold text-white">
                                    <i class="bi bi-exclamation-diamond me-1"></i>Expires Today
                                </span>
                            {% elif p.days_until_expiry is not none and p.days_until_expiry <= 30 %}
                                <span class="badge bg-warning-subtle text-warning-emphasis border border-warning-subtle px-2.5 py-1 fw-bold">
                                    <i class="bi bi-clock-history me-1"></i>{{ p.days_until_expiry }} days to expire
                                </span>
                            {% else %}
                                <span class="small text-muted fw-semibold">
                                    <i class="bi bi-calendar-check text-success me-1"></i>{{ p.expiry_date.strftime('%Y-%m-%d') }}
                                </span>
                            {% endif %}
                        {% else %}
                            <span class="text-muted small">—</span>
                        {% endif %}
                    </td>
                    <td class="text-end pe-3">
                        <div class="btn-group btn-group-sm">
                            <a href="/edit-product/{{ p.id }}" class="btn btn-outline-primary" title="{{ l('Edit Product', 'সম্পাদনা করুন') }}"><i class="bi bi-pencil"></i></a>
                            <a href="/barcode-print" class="btn btn-outline-secondary" title="{{ l('Print Barcode', 'বারকোড প্রিন্ট') }}"><i class="bi bi-upc-scan"></i></a>
                            <form method="POST" action="/delete-product/{{ p.id }}" class="d-inline" onsubmit="return confirm('{{ l('Are you sure you want to delete this product?', 'আপনি কি নিশ্চিত এই পণ্যটি মুছে ফেলতে চান?') }}')">
                                <input type="hidden" name="_csrf_token" value="{{ csrf_token }}">
                                <button type="submit" class="btn btn-outline-danger btn-sm rounded-0 rounded-end" title="{{ l('Delete Product', 'মুছে ফেলুন') }}">
                                    <i class="bi bi-trash"></i>
                                </button>
                            </form>
                        </div>
                    </td>
                </tr>
            {% endfor %}

                <tr id="no-products-row" class="{% if products|length > 0 %}d-none{% endif %}">
                    <td colspan="7" class="text-center text-muted py-5">
                        <i class="bi bi-box-seam fs-1 d-block mb-2 opacity-50"></i>
                        <span class="fw-semibold">{{ l('No products found matching filter.', 'ফিল্টারের সাথে মেলে এমন কোনো পণ্য পাওয়া যায়নি।') }}</span>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
</div>

<!-- IMPORT MODAL -->
<div class="modal fade" id="importModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title fw-bold"><i class="bi bi-file-earmark-arrow-up me-1"></i>{{ l('Import Products from CSV / Excel', 'সিএসভি/এক্সেল থেকে পণ্য ইমপোর্ট করুন') }}</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <form method="POST" action="/import-products" enctype="multipart/form-data">
                <input type="hidden" name="_csrf_token" value="{{ csrf_token }}">
                <div class="modal-body">
                    <p class="text-muted small">{{ l('Upload CSV or Excel file containing product details. Download sample file for formatting reference.', 'পণ্যের তালিকা সহ সিএসভি বা এক্সেল ফাইল আপলোড করুন। সঠিক ফরম্যাটের জন্য ডেমো ফাইল ডাউনলোড করুন।') }}</p>
                    <div class="mb-3">
                        <a href="/download-product-sample" class="btn btn-sm btn-outline-primary"><i class="bi bi-download me-1"></i>{{ l('Download Sample Template', 'স্যাম্পল ফাইল ডাউনলোড করুন') }}</a>
                    </div>
                    <div class="mb-3">
                        <label class="form-label fw-semibold">{{ l('Select File', 'ফাইল সিলেক্ট করুন') }}</label>
                        <input type="file" name="file" class="form-control" accept=".csv, .xlsx, .xls" required>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">{{ l('Cancel', 'বাতিল') }}</button>
                    <button type="submit" class="btn btn-primary fw-bold"><i class="bi bi-upload me-1"></i>{{ l('Upload & Import', 'আপলোড ও ইমপোর্ট করুন') }}</button>
                </div>
            </form>
        </div>
    </div>
</div>

<script>
let currentStatusFilter = '{{ stock_status or "all" }}';

function setQuickFilter(status) {
    currentStatusFilter = status;
    
    // Update pill buttons visual active styles
    document.querySelectorAll('.filter-pill-btn').forEach(btn => {
        btn.className = 'btn btn-sm filter-pill-btn rounded-pill px-3 fw-semibold';
        if (btn.id === 'pill-low') btn.classList.add('btn-outline-warning', 'text-dark');
        else if (btn.id === 'pill-out') btn.classList.add('btn-outline-danger');
        else if (btn.id === 'pill-expired') btn.classList.add('btn-outline-warning', 'text-dark');
        else btn.classList.add('btn-outline-secondary');
    });

    const activeBtn = document.getElementById('pill-' + status);
    if (activeBtn) {
        activeBtn.className = 'btn btn-sm filter-pill-btn rounded-pill px-3 fw-semibold active-pill-' + status;
    }

    applyLiveFilters();
}

function applyLiveFilters() {
    const searchVal = (document.getElementById("live-search-input").value || "").toLowerCase().trim();
    const rows = document.querySelectorAll(".product-row");
    let visibleCount = 0;

    rows.forEach(row => {
        const name = row.getAttribute("data-name") || "";
        const category = row.getAttribute("data-category") || "";
        const code = row.getAttribute("data-code") || "";
        const barcode = row.getAttribute("data-barcode") || "";
        const stock = parseFloat(row.getAttribute("data-stock")) || 0;
        const reorder = parseFloat(row.getAttribute("data-reorder")) || 5;
        const expiryDaysRaw = row.getAttribute("data-expiry-days");
        const expiryDays = expiryDaysRaw !== "" ? parseInt(expiryDaysRaw) : null;

        // Search Keyword Matching
        const matchesSearch = !searchVal || 
                              name.includes(searchVal) || 
                              category.includes(searchVal) || 
                              code.includes(searchVal) || 
                              barcode.includes(searchVal);

        // Status Filter Matching
        let matchesStatus = true;
        if (currentStatusFilter === 'low') {
            matchesStatus = (stock > 0 && stock <= reorder);
        } else if (currentStatusFilter === 'out_of_stock') {
            matchesStatus = (stock <= 0);
        } else if (currentStatusFilter === 'expired') {
            matchesStatus = (expiryDays !== null && expiryDays <= 30);
        }

        if (matchesSearch && matchesStatus) {
            row.classList.remove("d-none");
            visibleCount++;
        } else {
            row.classList.add("d-none");
        }
    });

    // Toggle No Products Found row
    const noRow = document.getElementById("no-products-row");
    if (noRow) {
        if (visibleCount === 0) noRow.classList.remove("d-none");
        else noRow.classList.add("d-none");
    }

    // Update Filter Notification Banner
    const banner = document.getElementById("filter-banner");
    const bannerIcon = document.getElementById("filter-banner-icon");
    const bannerText = document.getElementById("filter-banner-text");
    const countBadge = document.getElementById("filter-count-badge");

    if (currentStatusFilter !== 'all') {
        banner.classList.remove("d-none");
        countBadge.innerText = visibleCount + " {{ l('Items', 'টি পণ্য') }}";

        if (currentStatusFilter === 'low') {
            banner.style.background = "#fffbeb"; banner.style.color = "#92400e";
            bannerIcon.className = "bi bi-exclamation-triangle-fill me-2 fs-5 text-warning";
            bannerText.innerText = "{{ l('Showing Low Stock Products List', 'কম মজুদ থাকা পণ্যের তালিকা প্রদর্শিত হচ্ছে') }}";
            countBadge.className = "badge bg-warning text-dark fs-6 px-3 py-1";
        } else if (currentStatusFilter === 'out_of_stock') {
            banner.style.background = "#fef2f2"; banner.style.color = "#991b1b";
            bannerIcon.className = "bi bi-x-octagon-fill me-2 fs-5 text-danger";
            bannerText.innerText = "{{ l('Showing Out of Stock Products List', 'স্টক শেষ হয়ে যাওয়া পণ্যের তালিকা প্রদর্শিত হচ্ছে') }}";
            countBadge.className = "badge bg-danger fs-6 px-3 py-1";
        } else if (currentStatusFilter === 'expired') {
            banner.style.background = "#fff7ed"; banner.style.color = "#c2410c";
            bannerIcon.className = "bi bi-calendar-x-fill me-2 fs-5 text-warning";
            bannerText.innerText = "{{ l('Showing Expired / Expiring Soon Products List', 'মেয়াদ উত্তীর্ণ ও মেয়াদের কাছাকাছি থাকা পণ্যের তালিকা প্রদর্শিত হচ্ছে') }}";
            countBadge.className = "badge bg-warning text-dark fs-6 px-3 py-1";
        }
    } else {
        if (searchVal) {
            banner.classList.remove("d-none");
            banner.style.background = "#eff6ff"; banner.style.color = "#1e40af";
            bannerIcon.className = "bi bi-search me-2 fs-5 text-primary";
            bannerText.innerText = "{{ l('Showing Search Results for', 'সার্চের ফলাফল প্রদর্শিত হচ্ছে:') }} '" + searchVal + "'";
            countBadge.className = "badge bg-primary fs-6 px-3 py-1";
            countBadge.innerText = visibleCount + " {{ l('Items', 'টি পণ্য') }}";
        } else {
            banner.classList.add("d-none");
        }
    }
}

function resetLiveFilters() {
    document.getElementById("live-search-input").value = "";
    setQuickFilter('all');
}

// Initialize live filters on DOM ready
document.addEventListener("DOMContentLoaded", function() {
    if (currentStatusFilter !== 'all' || document.getElementById("live-search-input").value) {
        setQuickFilter(currentStatusFilter);
    }
});
</script>

{% endblock %}