{% extends 'base.html' %}
{% load crispy_forms_tags %}

{% block content %}

<!-- Back -->
<div class="mb-6">
    <a href="{% url 'admin_dashboard' %}"
       class="inline-block px-4 py-2 border-2 border-gray-800 rounded-xl font-bold text-gray-800 hover:text-gray-900 hover:border-gray-900">
        &larr; Admin Dashboard
    </a>
</div>

<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 mt-8">

    <h1 class="text-3xl font-bold mb-6 text-gray-800 text-center">All Contacts</h1>

    <!-- ================= FILTER ================= -->
    <!-- ================= FILTER ================= -->
<form method="get" class="mb-6 flex flex-col sm:flex-row gap-3">

    <!-- Search -->
    <input
        type="text"
        name="search"
        value="{{ request.GET.search }}"
        placeholder="Search by name, email, or message..."
        class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring"
    >

    <!-- Junk Filter -->
    <select
        name="status"
        class="px-4 py-2 border rounded-lg focus:outline-none focus:ring">

        <option value="">All Messages</option>
        <option value="inbox"
            {% if request.GET.status == "inbox" %}selected{% endif %}>
            Inbox
        </option>
        <option value="junk"
            {% if request.GET.status == "junk" %}selected{% endif %}>
            Junk
        </option>
    </select>

    <button class="px-6 py-2 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700">
        Apply
    </button>

</form>


    <!-- ================= TABLE ================= -->
    <div class="overflow-x-auto shadow-lg rounded-lg">
        <table class="min-w-[700px] w-full table-auto bg-white divide-y divide-gray-200">

            <thead class="bg-indigo-600">
                <tr>
                    <th class="px-6 py-3 text-left text-xs font-medium text-white uppercase">Name</th>
                    <th class="px-6 py-3 text-left text-xs font-medium text-white uppercase">Email</th>
                    <th class="px-6 py-3 text-left text-xs font-medium text-white uppercase">Message</th>
                    <th class="px-6 py-3 text-left text-xs font-medium text-white uppercase">Date</th>
                    <th class="px-6 py-3 text-left text-xs font-medium text-white uppercase">Actions</th>
                </tr>
            </thead>

            <tbody class="divide-y divide-gray-100">

                {% for c in contacts %}
                <tr class="hover:bg-gray-50">

                    <td class="px-6 py-4 font-medium">
                        {{ c.name }}
                    </td>

                    <td class="px-6 py-4 text-gray-600">
                        {{ c.email }}
                    </td>

                    <td class="px-6 py-4 max-w-xs truncate text-gray-700">
                        {{ c.message }}
                    </td>

                    <td class="px-6 py-4 text-gray-500 whitespace-nowrap">
                        {{ c.created_at|date:"M d, Y H:i" }}
                    </td>

                    <!-- ================= ACTIONS ================= -->
                    <td class="px-6 py-4 flex gap-3">

                        <!-- View -->
                        <button
                            onclick="openModal(
                                '{{ c.name }}',
                                '{{ c.email }}',
                                '{{ c.message|escapejs }}',
                                '{{ c.created_at|date:"M d, Y H:i" }}'
                            )"
                            class="text-indigo-600 hover:text-indigo-800"
                            title="View">
                            <i class="fas fa-eye"></i>
                        </button>

                        <!-- Junk -->
{% if not c.is_junk %}
<form method="post"
      action="{% url 'set_message_to_junk' c.id %}"
      onsubmit="return confirmJunk('{{ c.email }}', '{{ c.phone|default:'' }}')">
    {% csrf_token %}
    <button
        type="submit"
        class="text-red-600 hover:text-red-800"
        title="Mark as junk">
        <i class="fas fa-trash"></i>
    </button>
</form>
{% else %}
<span class="text-xs text-gray-400">Junk</span>
{% endif %}
                        
                    </td>

                </tr>
                {% empty %}
                <tr>
                    <td colspan="5" class="text-center py-10 text-gray-400">
                        No contacts found.
                    </td>
                </tr>
                {% endfor %}

            </tbody>
        </table>
    </div>

    <!-- ================= PAGINATION ================= -->
    {% if is_paginated %}
    <div class="mt-6 flex justify-center items-center gap-2">

        {% if page_obj.has_previous %}
        <a href="?page={{ page_obj.previous_page_number }}&search={{ request.GET.search }}&status={{ request.GET.status }}"

           class="px-3 py-1 border rounded hover:bg-gray-100">
            Prev
        </a>
        {% endif %}

        <span class="px-3 py-1 bg-indigo-600 text-white rounded">
            {{ page_obj.number }} / {{ page_obj.paginator.num_pages }}
        </span>

        {% if page_obj.has_next %}
        <a href="?page={{ page_obj.next_page_number }}&search={{ request.GET.search }}&status={{ request.GET.status }}"

           class="px-3 py-1 border rounded hover:bg-gray-100">
            Next
        </a>
        {% endif %}
    </div>
    {% endif %}

</div>

<!-- ================= MODAL ================= -->

<div id="contactModal"
     class="fixed inset-0 bg-black bg-opacity-50 hidden flex items-center justify-center z-50">

    <div class="bg-white rounded-xl shadow-2xl max-w-lg w-full p-6 relative">

        <button onclick="closeModal()"
                class="absolute top-3 right-3 text-gray-400 hover:text-gray-700 text-2xl">
            &times;
        </button>

        <h2 class="text-2xl font-bold mb-4 text-gray-800">Contact Details</h2>

        <div class="space-y-4">

            <p><strong>Name:</strong> <span id="modalName"></span></p>
            <p><strong>Email:</strong> <span id="modalEmail"></span></p>
            <p><strong>Date:</strong> <span id="modalDate"></span></p>

            <div>
                <p class="font-semibold mb-1">Message</p>
                <div id="modalMessage"
                     class="bg-gray-100 p-3 rounded-lg text-sm whitespace-pre-wrap">
                </div>
            </div>

        </div>

        <div class="mt-6 text-right">
            <button onclick="closeModal()"
                    class="px-4 py-2 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700">
                Close
            </button>
        </div>

    </div>
</div>

<!-- ================= JS ================= -->

<script>
    function confirmJunk(email, phone) {
        let message = "Set ALL messages";

        if (email) {
            message += " from email: " + email;
        }

        if (phone) {
            message += email ? " and phone: " + phone : " from phone: " + phone;
        }

        message += " to junk?\n\nThis will also add the user to the spam list.";

        return confirm(message);
    }
</script>


<script>
    function openModal(name, email, message, date) {
        document.getElementById("modalName").innerText = name;
        document.getElementById("modalEmail").innerText = email;
        document.getElementById("modalMessage").innerText = message;
        document.getElementById("modalDate").innerText = date;
        document.getElementById("contactModal").classList.remove("hidden");
    }

    function closeModal() {
        document.getElementById("contactModal").classList.add("hidden");
    }
</script>

{% endblock %}
