{% extends 'admin_panel/base.html' %}
{% load static %}

{% block extra_css %}
<link rel="stylesheet" href="{% static 'css/admin/complaints/complaints.css' %}">
<link rel="stylesheet" href="{% static 'css/admin/complaints/complaints-dashboard.css' %}">
<style>
.text-truncate {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 200px;
    display: inline-block;
}
</style>
{% endblock extra_css %}

{% block content %}
<div class="complaints-container">

    <div class="complaints-card">
        <div class="complaints-card-header">
            <h3 class="complaints-card-title">
                <i class="fas fa-list"></i>Daftar Keluhan
            </h3>
        </div>
    </div>

    <div class="row">
        <div class="col-6 col-lg-3 mb-2">
            <div class="complaints-stat-card complaints-stat-card-danger h-100">
                <div class="complaints-stat-card-body">
                    <div>
                        <div class="complaints-stat-number">{{ complaints.paginator.count|default:0 }}</div>
                        <div class="complaints-stat-label">Total Keluhan</div>
                    </div>
                    <div class="complaints-icon complaints-icon-danger">
                        <i class="fas fa-exclamation-triangle"></i>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-6 col-lg-3 mb-2">
            <div class="complaints-stat-card complaints-stat-card-warning h-100">
                <div class="complaints-stat-card-body">
                    <div>
                        <div class="complaints-stat-number">{{ pending_count|default:0 }}</div>
                        <div class="complaints-stat-label">Menunggu</div>
                    </div>
                    <div class="complaints-icon complaints-icon-warning">
                        <i class="fas fa-clock"></i>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-6 col-lg-3 mb-2">
            <div class="complaints-stat-card complaints-stat-card-info h-100">
                <div class="complaints-stat-card-body">
                    <div>
                        <div class="complaints-stat-number">{{ in_progress_count|default:0 }}</div>
                        <div class="complaints-stat-label">Diproses</div>
                    </div>
                    <div class="complaints-icon complaints-icon-info">
                        <i class="fas fa-cogs"></i>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-6 col-lg-3 mb-2">
            <div class="complaints-stat-card complaints-stat-card-success h-100">
                <div class="complaints-stat-card-body">
                    <div>
                        <div class="complaints-stat-number">{{ resolved_count|default:0 }}</div>
                        <div class="complaints-stat-label">Selesai</div>
                    </div>
                    <div class="complaints-icon complaints-icon-success">
                        <i class="fas fa-check-circle"></i>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="complaints-card">
        <div class="complaints-card-body">
            <form method="get" id="filterForm">
                <div class="row g-2">
                    <div class="col-12 col-md-4">
                        <input type="text" class="form-control form-control-sm" id="search" name="search"
                               value="{{ search }}" placeholder="Cari judul atau pelapor...">
                    </div>
                    <div class="col-6 col-md-4">
                        <select class="form-select form-select-sm" id="status" name="status">
                            <option value="">Status</option>
                            <option value="pending" {% if selected_status == 'pending' %}selected{% endif %}>Menunggu</option>
                            <option value="in_progress" {% if selected_status == 'in_progress' %}selected{% endif %}>Diproses</option>
                            <option value="resolved" {% if selected_status == 'resolved' %}selected{% endif %}>Selesai</option>
                            <option value="closed" {% if selected_status == 'closed' %}selected{% endif %}>Tutup</option>
                        </select>
                    </div>
                    <div class="col-6 col-md-4">
                        <select class="form-select form-select-sm" id="priority" name="priority">
                            <option value="">Prioritas</option>
                            <option value="high" {% if selected_priority == 'high' %}selected{% endif %}>Tinggi</option>
                            <option value="medium" {% if selected_priority == 'medium' %}selected{% endif %}>Sedang</option>
                            <option value="low" {% if selected_priority == 'low' %}selected{% endif %}>Rendah</option>
                        </select>
                    </div>
                </div>
            </form>
        </div>
    </div>

    <div class="complaints-card">
        <div class="complaints-card-body">
            <div class="table-responsive">
                <table class="table table-sm table-hover" id="complaintsTable">
                    <thead class="table-light">
                        <tr>
                            <th style="width: 3%">
                                <input type="checkbox" id="selectAll" class="form-check-input">
                            </th>
                            <th style="width: 5%">No</th>
                            <th style="width: 25%">Judul</th>
                            <th style="width: 18%">Pelapor</th>
                            <th style="width: 12%">Status</th>
                            <th style="width: 12%">Prioritas</th>
                            <th style="width: 13%">Tanggal</th>
                            <th style="width: 12%">Aksi</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for complaint in complaints %}
                        <tr>
                            <td>
                                <input type="checkbox" class="form-check-input complaint-checkbox" value="{{ complaint.id }}">
                            </td>
                            <td>{{ forloop.counter0|add:complaints.start_index }}</td>
                            <td>
                                <div class="text-truncate" style="max-width: 200px;" title="{{ complaint.title }}">
                                    {{ complaint.title }}
                                </div>
                            </td>
                            <td>
                                <strong class="d-block">{{ complaint.reporter_name|default:"-" }}</strong>
                                {% if complaint.reporter_phone %}
                                    <small class="text-muted">{{ complaint.reporter_phone }}</small>
                                {% endif %}
                            </td>
                            <td>
                                <span class="text-muted">{{ complaint.get_status_display }}</span>
                            </td>
                            <td>
                                <span class="complaints-badge {% if complaint.priority == 'urgent' %}complaints-badge-danger{% elif complaint.priority == 'high' %}complaints-badge-warning{% elif complaint.priority == 'medium' %}complaints-badge-info{% else %}complaints-badge-secondary{% endif %}">
                                    {{ complaint.get_priority_display }}
                                </span>
                            </td>
                            <td>
                                <strong class="d-block">{{ complaint.created_at|date:"d M Y" }}</strong>
                                <small class="text-muted">{{ complaint.created_at|time:"H:i" }}</small>
                            </td>
                            <td>
                                <div class="btn-group btn-group-sm" role="group">
                                    <a href="{% url 'admin_panel:complaint_detail' complaint.id %}"
                                       class="btn btn-outline-primary btn-sm" title="Lihat Detail">
                                        <i class="fas fa-eye"></i>
                                    </a>
                                    <a href="{% url 'admin_panel:complaint_edit' complaint.id %}"
                                       class="btn btn-outline-warning btn-sm" title="Edit">
                                        <i class="fas fa-edit"></i>
                                    </a>
                                    <button type="button" onclick="confirmDelete({{ complaint.id }})"
                                            class="btn btn-outline-danger btn-sm" title="Hapus">
                                        <i class="fas fa-trash"></i>
                                    </button>
                                </div>
                            </td>
                        </tr>
                        {% empty %}
                        <tr>
                            <td colspan="8" class="complaints-empty">
                                <i class="fas fa-exclamation-triangle complaints-empty-icon"></i>
                                <p class="complaints-empty-text">Tidak ada keluhan ditemukan</p>
                            </td>
                        </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>

            {% if complaints.has_other_pages %}
            <nav class="mt-3">
                <ul class="pagination pagination-sm justify-content-center">
                    {% if complaints.has_previous %}
                        <li class="page-item">
                            <a class="page-link" href="?page=1{% if search %}&search={{ search }}{% endif %}{% if selected_status %}&status={{ selected_status }}{% endif %}{% if selected_priority %}&priority={{ selected_priority }}{% endif %}">First</a>
                        </li>
                        <li class="page-item">
                            <a class="page-link" href="?page={{ complaints.previous_page_number }}{% if search %}&search={{ search }}{% endif %}{% if selected_status %}&status={{ selected_status }}{% endif %}{% if selected_priority %}&priority={{ selected_priority }}{% endif %}">Previous</a>
                        </li>
                    {% endif %}

                    <li class="page-item active">
                        <span class="page-link">
                            Page {{ complaints.number }} of {{ complaints.paginator.num_pages }}
                        </span>
                    </li>

                    {% if complaints.has_next %}
                        <li class="page-item">
                            <a class="page-link" href="?page={{ complaints.next_page_number }}{% if search %}&search={{ search }}{% endif %}{% if selected_status %}&status={{ selected_status }}{% endif %}{% if selected_priority %}&priority={{ selected_priority }}{% endif %}">Next</a>
                        </li>
                        <li class="page-item">
                            <a class="page-link" href="?page={{ complaints.paginator.num_pages }}{% if search %}&search={{ search }}{% endif %}{% if selected_status %}&status={{ selected_status }}{% endif %}{% if selected_priority %}&priority={{ selected_priority }}{% endif %}">Last</a>
                        </li>
                    {% endif %}
                </ul>
            </nav>
            {% endif %}
        </div>
    </div>
</div>
{% endblock content %}

{% block extra_js %}
<script>$(document).ready(function() {

    $('#selectAll').change(function() {
        $('.complaint-checkbox').prop('checked', $(this).prop('checked'));
    });

    $('.complaint-checkbox').change(function() {
        var totalCheckboxes = $('.complaint-checkbox').length;
        var checkedCheckboxes = $('.complaint-checkbox:checked').length;
        $('#selectAll').prop('checked', totalCheckboxes === checkedCheckboxes);
    });

    $('#status, #priority').change(function() {
        $('#filterForm').submit();
    });
});

function confirmDelete(complaintId) {
    if (confirm('Apakah Anda yakin ingin menghapus keluhan ini?')) {
        $.ajax({
            url: '/admin-panel/complaints/' + complaintId + '/delete/',
            method: 'POST',
            headers: {
                'X-CSRFToken': $('[name=csrfmiddlewaretoken]').val() || '{{ csrf_token }}'
            },
            success: function(response) {
                if (response.success) {
                    if (window.showAlert) {
                        window.showAlert(response.message || 'Keluhan berhasil dihapus', 'success');
                    }
                    setTimeout(function() {
                        location.reload();
                    }, 1000);
                } else {
                    if (window.showAlert) {
                        window.showAlert(response.message || 'Gagal menghapus keluhan', 'error');
                    }
                }
            },
            error: function() {
                if (window.showAlert) {
                    window.showAlert('Terjadi kesalahan saat menghapus keluhan', 'error');
                }
            }
        });
    }
}
</script>
{% endblock extra_js %}