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

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

{% block header_center %}
    <span style="font-weight: 700; font-size: 16px;">Store Complaints</span>
{% endblock %}

{% block workspace %}
<div class="workspace-container container-wide">
    <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 class="row-wrap-mobile" style="margin-top: 1rem;">
        <!-- Left Side: New Complaint Form -->
        <div style="width: 360px; flex-shrink: 0;">
            <div class="glass-card" style="padding: 1.5rem;">
                <h4 style="margin-top: 0; margin-bottom: 1.25rem; font-size: 1.1rem; font-weight: 700; color: var(--text-primary);">New Complaint</h4>
                <form method="post">
                    {% csrf_token %}
                    <div style="display: flex; flex-direction: column; gap: 0.75rem;">
                        <input name="title" placeholder="Title" class="form-input" required />
                        <input name="customer_name" placeholder="Customer name (optional)" class="form-input" />
                        <textarea name="description" placeholder="Description" class="form-textarea" style="min-height: 120px; resize: vertical;"></textarea>
                        <div style="display: flex; gap: 0.5rem; margin-top: 0.25rem;">
                            <button class="btn btn-primary" type="submit" style="flex: 1;">Create</button>
                            <a href="{% url 'agent_dashboard' %}" class="btn btn-secondary" style="flex: 1;">Back</a>
                        </div>
                    </div>
                </form>
            </div>
        </div>

        <!-- Right Side: Complaints List -->
        <div style="flex: 1; min-width: 0;">
            <div class="glass-card" style="padding: 1.5rem;">
                <h4 style="margin-top: 0; margin-bottom: 1.25rem; font-size: 1.1rem; font-weight: 700; color: var(--text-primary);">Complaints</h4>
                
                <div style="display: flex; gap: 0.5rem; margin-bottom: 1.25rem; align-items: center; flex-wrap: wrap;">
                    <input id="complaint-search" placeholder="Search title or customer..." class="form-input" style="flex: 1; min-width: 200px;" />
                    <select id="complaint-status-filter" class="form-select" style="width: 160px; height: 38px;">
                        <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.75rem;">
                        {% 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: 1rem; border: 1px solid var(--border-color); border-radius: 8px; display: flex; justify-content: space-between; align-items: flex-start; gap: 0.75rem; flex-wrap: wrap;">
                                <div style="flex: 1; min-width: 240px;">
                                    <div style="font-weight: 600; font-size: 15px; color: var(--text-primary);">
                                        {{ c.title }} 
                                        {% if c.customer_name %}
                                            <span style="font-size: 0.85rem; color: var(--text-muted); font-weight: normal; margin-left: 4px;">by {{ c.customer_name }}</span>
                                        {% endif %}
                                    </div>
                                    <div style="font-size: 0.9rem; color: var(--text-muted); margin-top: 0.4rem; line-height: 1.45;">{{ c.description|linebreaksbr }}</div>
                                    <div style="font-size: 0.8rem; color: var(--text-muted); margin-top: 0.6rem;">Created {{ c.created_at|timesince }} ago</div>
                                </div>
                                <div style="min-width: 180px; text-align: right; display: flex; flex-direction: column; align-items: flex-end; gap: 0.5rem;">
                                    <form method="post" action="{% url 'agent_update_complaint_status' c.pk %}" style="width: 100%; display: flex; gap: 0.5rem;">
                                        {% csrf_token %}
                                        <select name="status" class="form-select" style="padding: 4px 8px; font-size: 13px; height: 32px; flex: 1;">
                                            {% for key,label in status_choices %}
                                                <option value="{{ key }}" {% if c.status == key %}selected{% endif %}>{{ label }}</option>
                                            {% endfor %}
                                        </select>
                                        <button class="btn btn-primary" type="submit" style="padding: 4px 12px; font-size: 13px; border-radius: 6px; height: 32px;">Update</button>
                                    </form>
                                </div>
                            </div>
                        {% endfor %}
                    </div>
                {% else %}
                    <div style="padding: 2rem; text-align: center; color: var(--text-muted);">No complaints yet.</div>
                {% endif %}
            </div>
        </div>
    </div>
</div>

<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';
            });
        }

        if (searchInput && statusFilter) {
            searchInput.addEventListener('input', applyFilter);
            statusFilter.addEventListener('change', applyFilter);
        }
    })();
</script>
{% endblock %}