{% extends 'agent/base_agent.html' %}

{% block title %}Store Complaints | {{ company.name }} | ChatLab{% endblock %}
{% block agent_dash_active %}active{% endblock %}

{% block workspace %}
<div class="page-header">
    <div>
        <h2 class="page-title">Store Complaints</h2>
        <p class="page-subtitle">Add and manage customer complaints.</p>
    </div>
    <a href="{% url 'agent_complaints' %}" class="btn btn-primary">Refresh</a>
</div>

<div style="margin-top:1rem; display:flex; gap:1.5rem;">
    <div style="width:360px;">
        <div class="glass-card" style="padding:1rem;">
            <h4 style="margin-top:0;">New Complaint</h4>
            <form method="post">
                {% csrf_token %}
                <div style="display:flex; flex-direction:column; gap:0.5rem;">
                    <input name="title" placeholder="Title" class="form-input" required style="border-radius:0;" />
                    <input name="customer_name" placeholder="Customer name (optional)" class="form-input" style="border-radius:0;" />
                    <textarea name="description" placeholder="Description" class="form-textarea" style="border-radius:0; min-height:120px;"></textarea>
                    <div style="display:flex; gap:0.5rem;">
                        <button class="btn btn-primary" type="submit">Create</button>
                        <a href="{% url 'agent_dashboard' %}" class="btn btn-secondary">Back</a>
                    </div>
                </div>
            </form>
        </div>
    </div>

    <div style="flex:1;">
        <div class="glass-card" style="padding:1rem;">
            <h4 style="margin-top:0;">Complaints</h4>
            <div style="display:flex; gap:0.5rem; margin-bottom:0.75rem; align-items:center;">
                <input id="complaint-search" placeholder="Search title or customer..." class="form-input" style="flex:1; border-radius:0; padding:0.45rem 0.6rem;" />
                <select id="complaint-status-filter" class="form-input" style="border-radius:0; padding:0.45rem 0.6rem; width:160px;">
                    <option value="">All statuses</option>
                    {% for key,label in status_choices %}
                        <option value="{{ key }}">{{ label }}</option>
                    {% endfor %}
                </select>
            </div>
            {% if complaints %}
                <div id="complaints-list" style="display:flex; flex-direction:column; gap:0.5rem;">
                    {% for c in complaints %}
                        <div class="complaint-row" data-title="{{ c.title|lower }}" data-customer="{{ c.customer_name|default:''|lower }}" data-status="{{ c.status }}" style="padding:0.75rem; border:1px solid var(--border-color); display:flex; justify-content:space-between; align-items:flex-start; gap:0.75rem;">
                            <div style="flex:1;">
                                <div style="font-weight:600;">{{ c.title }} <span style="font-size:0.85rem; color:var(--text-muted);">by {{ c.customer_name|default:'—' }}</span></div>
                                <div style="font-size:0.9rem; color:var(--text-muted); margin-top:0.25rem;">{{ c.description|truncatechars:180 }}</div>
                                <div style="font-size:0.8rem; color:var(--text-muted); margin-top:0.35rem;">Created {{ c.created_at|timesince }} ago</div>
                            </div>
                            <div style="min-width:170px; text-align:right;">
                                <form method="post" action="{% url 'agent_update_complaint_status' c.pk %}">
                                    {% csrf_token %}
                                    <select name="status" style="padding:0.35rem; border-radius:0;">
                                        {% for key,label in status_choices %}
                                            <option value="{{ key }}" {% if c.status == key %}selected{% endif %}>{{ label }}</option>
                                        {% endfor %}
                                    </select>
                                    <div style="margin-top:0.5rem; display:flex; gap:0.5rem; justify-content:flex-end;">
                                        <button class="btn btn-primary" type="submit">Update</button>
                                    </div>
                                </form>
                            </div>
                        </div>
                    {% endfor %}
                </div>
            {% else %}
                <div style="padding:1rem; text-align:center; color:var(--text-muted);">No complaints yet.</div>
            {% endif %}
        </div>
    </div>
</div>

{% endblock %}

<script>
    (function(){
        const searchInput = document.getElementById('complaint-search');
        const statusFilter = document.getElementById('complaint-status-filter');
        const rows = Array.from(document.querySelectorAll('.complaint-row'));

        function applyFilter(){
            const q = (searchInput.value || '').toLowerCase().trim();
            const status = (statusFilter.value || '').trim();
            rows.forEach(r => {
                const title = r.getAttribute('data-title') || '';
                const customer = r.getAttribute('data-customer') || '';
                const s = r.getAttribute('data-status') || '';
                const matchesQ = !q || title.includes(q) || customer.includes(q);
                const matchesStatus = !status || s === status;
                r.style.display = (matchesQ && matchesStatus) ? '' : 'none';
            });
        }

        searchInput.addEventListener('input', applyFilter);
        statusFilter.addEventListener('change', applyFilter);
    })();
</script>