{% extends 'adminapp/master.html' %}
{% load static %}

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

        <!-- Page Title -->
        <div class="row">
            <div class="col-12">
                <div class="page-title-box">
                    <h4 class="mb-0 fw-semibold">Manage Enquiries</h4>
                    <ol class="breadcrumb mb-0">
                        <li class="breadcrumb-item"><a href="{% url 'index' %}"><i class="bi bi-house-door-fill me-1"></i>Dashboard</a></li>
                        <li class="breadcrumb-item active text-primary">Enquiries</li>
                    </ol>
                </div>
            </div>
        </div>

        <!-- Flash Messages -->
        {% if messages %}
        {% for message in messages %}
        <div class="alert {% if message.tags %}alert-{{ message.tags }}{% endif %} alert-dismissible fade show" role="alert">
            {{ message }}
            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
        </div>
        {% endfor %}
        {% endif %}

        <!-- Filter Dropdown -->
        <div class="row mb-3">
            <div class="col-md-4">
                <form method="GET">
                    <label for="statusFilter" class="form-label">Filter by Status:</label>
                    <select name="status" id="statusFilter" class="form-select" onchange="this.form.submit()">
                        <option value="">All</option>
                        <option value="pending" {% if request.GET.status == "pending" %}selected{% endif %}>Pending</option>
                        <option value="replied" {% if request.GET.status == "replied" %}selected{% endif %}>Replied</option>
                    </select>
                </form>
            </div>
        </div>

        <!-- Enquiry List Table -->
        <div class="row">
            <div class="col-xl-12">
                <div class="card">
                    <div class="card-header d-flex justify-content-between align-items-center border-bottom">
                        <h4 class="card-title mb-0"><i class="bx bx-message me-2"></i> Enquiry List</h4>
                    </div>
                    <div class="card-body p-0">
                        <div class="table-responsive">
                            <table class="table align-middle text-nowrap table-hover table-centered mb-0">
                                <thead class="table-dark">
                                    <tr>
                                        <th>S.No</th>
                                        <th>Email</th>
                                        <th>Subject</th>
                                        <th>Message</th>
                                        <th>Date</th>
                                        <th>Status</th>
                                        <th class="text-center">Actions</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    {% for enquiry in enquiries %}
                                    <tr>
                                        <td>{{ forloop.counter }}</td>
                                        <td>{{ enquiry.email }}</td>
                                        <td>{{ enquiry.subject }}</td>
                                        <td title="{{ enquiry.message }}">{{ enquiry.message|truncatewords:10 }}</td>
                                        <td>{{ enquiry.created_at|date:'Y-m-d ' }}</td>
                                        <td>
                                            <span class="badge bg-{% if enquiry.is_replied %}success{% else %}warning{% endif %}">
                                                {% if enquiry.is_replied %}Replied{% else %}Pending{% endif %}
                                            </span>
                                        </td>
                                        <td class="text-center">
                                            {% if not enquiry.is_replied %}
                                            <a href="{% url 'reply_enquiry' enquiry.id %}" class="btn btn-primary btn-sm">
                                                <i class='bx bx-reply-all'></i>
                                            </a>
                                            {% endif %}
                                            <button type="button" class="btn btn-danger btn-sm delete-btn" data-bs-toggle="modal" data-bs-target="#deleteModal" data-id="{{ enquiry.id }}">
                                                <i class='bx bx-trash'></i>
                                            </button>
                                        </td>
                                    </tr>
                                    
                                    
                                    {% empty %}
                                    <tr>
                                        <td colspan="7" class="text-center">No enquiries found.</td>
                                    </tr>
                                    {% endfor %}
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>               
            </div>
        </div>

    </div>
</div>

<!-- Delete Confirmation Modal -->
<div class="modal fade" id="deleteModal" tabindex="-1" aria-labelledby="deleteModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Confirm Delete</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body text-center">
                <p>Are you sure you want to delete this enquiry?</p>
            </div>
            <div class="modal-footer justify-content-center">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                <a href="#" id="confirmDeleteBtn" class="btn btn-danger">Delete</a>
            </div>
        </div>
    </div>
</div>

<!-- JavaScript for Delete Confirmation -->
<script>
    document.addEventListener("DOMContentLoaded", function() {
        const deleteButtons = document.querySelectorAll(".delete-btn");
        const confirmDeleteBtn = document.getElementById("confirmDeleteBtn");

        deleteButtons.forEach(button => {
            button.addEventListener("click", function() {
                const enquiryId = this.getAttribute("data-id");
                confirmDeleteBtn.href = "{% url 'delete_enquiry' 0 %}".replace("0", enquiryId);
            });
        });
    });
</script>

{% endblock %}