{% extends "layouts/base.twig" %}

{% block title %}{{ translations.demands_title | default('Demandes') }}{% endblock %}

{% block head %}
    {{ parent() }}
    <style>
        .status-chip{
            cursor:pointer;
            border-radius:999px;
            padding:.22rem .7rem;
            font-size:.78rem;
            font-weight:600;
            border:1px solid rgba(0,0,0,.1);
            background:#f5f5f5;
            color:#555;
            transition:all .12s;
        }
        .status-chip.active{ background:#0d6efd; color:#fff; border-color:#0d6efd; }
        .badge-NEW         { background:#6ea8fe22; color:#0d6efd; }
        .badge-IN_PROGRESS { background:#ffc10722; color:#b07800; }
        .badge-IN_REVIEW   { background:#6f42c122; color:#6f42c1; }
        .badge-APPROVED    { background:#19875422; color:#198754; }
        .badge-PUBLISHED   { background:#0dcaf022; color:#087990; }
        .badge-REJECTED    { background:#dc354522; color:#dc3545; }
        .kpi-card{ border-radius:16px; background:#fff; border:1px solid rgba(0,0,0,.07); }
    </style>
{% endblock %}

{% block page_heading %}
    <div class="page-heading">
        <h3>{{ translations.demands_title | default('Demandes') }}</h3>
        <p class="text-subtitle text-muted">{{ translations.demands_subtitle | default('Przegląd wszystkich zgłoszeń sieci franczyzowej.') }}</p>
    </div>
{% endblock %}

{% block content %}

{# ── KPI cards ──────────────────────────────────────────────────── #}
<div class="row g-3 mb-4" id="demand-kpi-row">
    <div class="col-6 col-md-3">
        <div class="kpi-card p-3 text-center">
            <div class="fs-4 fw-bold text-primary" id="kpi-total">{{ stats.total | default('—') }}</div>
            <div class="text-muted small">{{ translations.kpi_total | default('Łącznie') }}</div>
        </div>
    </div>
    <div class="col-6 col-md-3">
        <div class="kpi-card p-3 text-center">
            <div class="fs-4 fw-bold text-info" id="kpi-new">{{ stats.by_status.NEW | default('—') }}</div>
            <div class="text-muted small">{{ translations.status_new | default('Nowe') }}</div>
        </div>
    </div>
    <div class="col-6 col-md-3">
        <div class="kpi-card p-3 text-center">
            <div class="fs-4 fw-bold text-warning" id="kpi-in-progress">{{ stats.by_status.IN_PROGRESS | default('—') }}</div>
            <div class="text-muted small">{{ translations.status_in_progress | default('W toku') }}</div>
        </div>
    </div>
    <div class="col-6 col-md-3">
        <div class="kpi-card p-3 text-center">
            <div class="fs-4 fw-bold text-success" id="kpi-published">{{ stats.by_status.PUBLISHED | default('—') }}</div>
            <div class="text-muted small">{{ translations.status_published | default('Opublikowane') }}</div>
        </div>
    </div>
</div>

{# ── Filters ────────────────────────────────────────────────────── #}
<div class="card shadow-sm mb-3">
    <div class="card-body py-2">
        <div class="d-flex gap-2 flex-wrap align-items-center">

            {# Status filter #}
            <span class="text-muted small me-1">{{ translations.filter_status | default('Status') }}:</span>
            <button class="status-chip" data-status="">{{ translations.filter_all | default('Wszystkie') }}</button>
            {% for s in statuses %}
                <button class="status-chip {{ s == 'NEW' ? 'active' : '' }}" data-status="{{ s }}">
                    {{ translations['status_' ~ s | lower] | default(s) }}
                </button>
            {% endfor %}

            {# Shop filter #}
            <span class="text-muted small ms-3 me-1">{{ translations.filter_shop | default('Sklep') }}:</span>
            <select class="form-select form-select-sm" id="shopFilter" style="max-width:200px;">
                <option value="">{{ translations.filter_all_shops | default('Wszystkie sklepy') }}</option>
            </select>

            {# Search #}
            <div class="ms-auto">
                <input type="search" class="form-control form-control-sm" id="demandSearch"
                       placeholder="{{ translations.search_placeholder | default('Szukaj…') }}"
                       style="min-width:220px;">
            </div>
        </div>
    </div>
</div>

{# ── Table ──────────────────────────────────────────────────────── #}
<div class="card shadow-sm">
    <div class="card-body p-0">
        <div class="table-responsive">
            <table class="table table-hover mb-0 align-middle" id="demandsTable">
                <thead class="table-light">
                    <tr>
                        <th>{{ translations.col_ref | default('Ref.') }}</th>
                        <th>{{ translations.col_date | default('Data') }}</th>
                        <th>{{ translations.col_requester | default('Wnioskodawca') }}</th>
                        <th>{{ translations.col_shop | default('Sklep') }}</th>
                        <th>{{ translations.col_subject | default('Temat') }}</th>
                        <th>{{ translations.col_type | default('Typ') }}</th>
                        <th>{{ translations.col_status | default('Status') }}</th>
                        <th>{{ translations.col_priority | default('Priorytet') }}</th>
                        <th></th>
                    </tr>
                </thead>
                <tbody id="demandsTableBody">
                    {% if demands is not empty %}
                        {% for d in demands %}
                        <tr data-shop-id="{{ d.getShopId() }}" data-shop-name="{{ d.getShopName() }}" data-status="{{ d.getStatus() }}">
                            <td class="fw-semibold font-monospace small">{{ d.getRef() }}</td>
                            <td class="text-muted small">{{ d.getCreatedAt() | date('d/m/Y') }}</td>
                            <td>{{ d.getRequesterName() ?? '—' }}</td>
                            <td class="text-muted small">{{ d.getShopName() ?? ('ID: ' ~ d.getShopId()) }}</td>
                            <td>{{ d.getDisplaySubject() | length > 40 ? d.getDisplaySubject() | slice(0, 40) ~ '…' : d.getDisplaySubject() }}</td>
                            <td><span class="badge bg-light text-dark">{{ translations['type_' ~ d.getType() | lower] | default(d.getTypeLabel()) }}</span></td>
                            <td>{% include 'demands/partials/_status_badge.twig' with {status: d.getStatus()} %}</td>
                            <td>
                                {% if d.getPriority() %}
                                    <span class="badge bg-{{ d.getPriority() == 'CRITICAL' ? 'danger' : (d.getPriority() == 'HIGH' ? 'warning text-dark' : (d.getPriority() == 'MEDIUM' ? 'info' : 'secondary')) }}">
                                        {{ d.getPriority() | lower | capitalize }}
                                    </span>
                                {% endif %}
                            </td>
                            <td>
                                <a href="{{ root }}/demands/{{ d.getId() }}" class="btn btn-sm btn-outline-primary">
                                    <i class="bi bi-eye"></i>
                                </a>
                            </td>
                        </tr>
                        {% endfor %}
                    {% else %}
                        <tr id="emptyRow">
                            <td colspan="9" class="text-center text-muted py-5">
                                <i class="bi bi-inbox fs-2 d-block mb-2"></i>
                                {{ translations.no_demands | default('Brak zgłoszeń.') }}
                            </td>
                        </tr>
                    {% endif %}
                </tbody>
            </table>
        </div>
    </div>
</div>

{% endblock %}

{% block scripts %}
<script>
(function () {
    const allRows   = Array.from(document.querySelectorAll('#demandsTableBody tr[data-shop-id]'));
    let   activeStatus = 'NEW';
    let   activeShop   = '';
    let   searchQuery  = '';

    // ── Populate shop filter ──────────────────────────────────────
    const shopSelect = document.getElementById('shopFilter');
    const shopMap    = {};
    allRows.forEach(r => {
        const id   = r.dataset.shopId;
        const name = r.dataset.shopName || ('ID: ' + id);
        if (id && !shopMap[id]) shopMap[id] = name;
    });
    Object.entries(shopMap).sort((a, b) => a[1].localeCompare(b[1])).forEach(([id, name]) => {
        const opt = document.createElement('option');
        opt.value = id;
        opt.textContent = name;
        shopSelect.appendChild(opt);
    });

    // Zastosuj domyślny filtr NEW przy ładowaniu strony
    applyFilters();

    // ── Filter logic ──────────────────────────────────────────────
    function applyFilters() {
        let visible = 0;
        allRows.forEach(row => {
            const rowStatus = row.dataset.status ?? '';
            const shopId    = row.dataset.shopId  ?? '';
            const text      = row.textContent.toLowerCase();

            const statusOk = !activeStatus || rowStatus === activeStatus;
            const shopOk   = !activeShop   || shopId === activeShop;
            const searchOk = !searchQuery  || text.includes(searchQuery.toLowerCase());

            const show = statusOk && shopOk && searchOk;
            row.style.display = show ? '' : 'none';
            if (show) visible++;
        });

        const emptyRow = document.getElementById('emptyRow');
        if (emptyRow) emptyRow.style.display = visible === 0 ? '' : 'none';
    }

    // ── Status chips ──────────────────────────────────────────────
    document.querySelectorAll('.status-chip').forEach(btn => {
        btn.addEventListener('click', () => {
            document.querySelectorAll('.status-chip').forEach(b => b.classList.remove('active'));
            btn.classList.add('active');
            activeStatus = btn.dataset.status;
            applyFilters();
        });
    });

    // ── Shop filter ───────────────────────────────────────────────
    shopSelect.addEventListener('change', () => {
        activeShop = shopSelect.value;
        applyFilters();
    });

    // ── Search ────────────────────────────────────────────────────
    document.getElementById('demandSearch').addEventListener('input', e => {
        searchQuery = e.target.value;
        applyFilters();
    });
})();
</script>
{% endblock %}