{% 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;
  }
  .active-filter-exp {
    border: 2px solid #ea580c !important;
    background: #fff7ed !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-boxes text-primary"></i> {{ t('stock_report') }}</h2>
        <p class="page-subtitle">{{ l('Current stock levels, valuation and reorder alerts across your catalogue', 'আপনার পণ্যের বর্তমান মজুদ, মজুদ মূল্যমান ও পুনঃঅর্ডারের তথ্য') }}</p>
    </div>
    <div class="page-hero-actions">
        <a href="/stock-adjustment" class="btn btn-outline-primary btn-sm fw-semibold"><i class="bi bi-sliders me-1"></i> {{ l('Adjust Stock', 'মজুদ সমন্বয়') }}</a>
        <a href="/create-purchase-order" class="btn btn-primary btn-sm fw-bold"><i class="bi bi-cart-plus me-1"></i> {{ l('Purchase Order', 'পারচেজ অর্ডার') }}</a>
    </div>
</div>

<!-- METRICS CARDS GRID (4 CARDS: Total Products, Total Stock Value, 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-cash-stack"></i></div>
            <div class="stat-label">{{ l('Total Stock Value', 'মোট মজুদ মূল্য') }}</div>
            <div class="stat-value text-success">৳ {{ "%.2f"|format(total_stock_value or 0) }}</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 Items', 'কম স্টকের পণ্য দেখতে চাপুন') }}">
            <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 Items', 'কম মজুদ পণ্য') }}</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 Items', 'স্টক শেষ পণ্যের তালিকা দেখতে চাপুন') }}">
            <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 Items', 'স্টক শেষ পণ্য') }}</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>

<!-- 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 -->
    <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-boxes me-1"></i>{{ l('All Stock Items', 'সকল মজুদ') }}
        </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 Items', 'কম মজুদ পণ্য') }}
        </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 Items', 'স্টক শেষ পণ্য') }}
        </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>

<!-- STOCK REPORT TABLE -->
<div class="panel p-0 overflow-hidden mb-3">
    <div class="panel-title p-3 border-bottom bg-light"><i class="bi bi-list-ul me-1"></i> {{ l('Stock Detail', 'মজুদ বিবরণ') }}</div>
    <div class="table-responsive">
        <table class="table table-hover align-middle mb-0" id="stock-table">
            <thead class="table-light">
                <tr>
                    <th class="ps-3">{{ l('Product', 'পণ্য') }}</th>
                    <th>{{ l('Category', 'বিভাগ') }}</th>
                    <th>{{ l('Current Stock', 'বর্তমান মজুদ') }}</th>
                    <th>{{ l('Buy Price', 'ক্রয় মূল্য') }}</th>
                    <th>{{ l('Sell Price', 'বিক্রয় মূল্য') }}</th>
                    <th>{{ l('Expiry Status', 'মেয়াদের অবস্থা') }}</th>
                    <th>{{ l('Stock Value', 'মজুদ মূল্য') }}</th>
                    <th class="text-end pe-3">{{ l('Action', 'করণীয়') }}</th>
                </tr>
            </thead>
            <tbody id="stock-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>
                        {% if (p.stock or 0) <= 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 '' }} ({{ l('Out of Stock', 'স্টক শেষ') }})
                            </span>
                        {% elif (p.stock or 0) <= (p.reorder_level or 5) %}
                            <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 or 0) }} {{ p.unit or '' }} ({{ l('Low Stock', 'কম মজুদ') }})
                            </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 or 0) }} {{ p.unit or '' }}
                            </span>
                        {% endif %}
                    </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.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="fw-bold text-primary">৳ {{ "%.2f"|format((p.stock or 0) * (p.buy_price or 0)) }}</td>
                    <td class="text-end pe-3">
                        <div class="btn-group btn-group-sm">
                            <a href="{{ url_for('stock_adjustment') }}" class="btn btn-outline-primary" title="{{ l('Adjust Stock', 'মজুদ ঠিক করুন') }}"><i class="bi bi-sliders me-1"></i>{{ l('Adjust', 'সমন্বয়') }}</a>
                            <a href="{{ url_for('create_purchase_order') }}" class="btn btn-outline-success" title="{{ l('Place Purchase Order', 'অর্ডার করুন') }}"><i class="bi bi-cart-plus me-1"></i>{{ l('Order', 'অর্ডার') }}</a>
                        </div>
                    </td>
                </tr>
            {% endfor %}

                <tr id="no-products-row" class="{% if products|length > 0 %}d-none{% endif %}">
                    <td colspan="8" class="text-center text-muted py-5">
                        <i class="bi bi-inbox 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>

<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 %}