{% include 'AdminTemplates/adminDash.html' %}
{% load static %}
{% block body %}

<div class="page-wrapper">
    <div class="content">
        <div class="page-header">
            <div class="page-title">
                <h4>Contact Us</h4>
                <h6>All Contact Enquiries</h6>
            </div>
        </div>
        <div class="card">
            <div class="card-body">
                <div class="table-top">
                    <div class="search-set">
                        <div class="search-input">
                            <!-- Single search bar -->
                            <a class="btn btn-searchset"><img src="{% static 'assets/img/icons/search-white.svg' %}" alt="img"></a>
                        </div>
                    </div>
                </div>
                <div class="table-responsive">
                    <table class="table datanew">
                        <thead>
                            <tr>
                                <th>User name</th>
                                <th>Email</th>
                                <th>Enq. Date</th>
                                <th>Message</th>
                            </tr>
                        </thead>
                        <tbody id="message-tbody">
                            <!-- Messages will be loaded here -->
                        </tbody>
                    </table>
                </div>

                <style>
                    .message-cell {
                        white-space: pre-wrap;
                        overflow: hidden;
                    }

                    .message-cell .message-content {
                        display: block;
                        white-space: pre-wrap;
                    }

                    .message-cell .message-more,
                    .message-cell .message-less {
                        color: blue;
                        cursor: pointer;
                        display: inline-block;
                        margin-left: 5px;
                    }
                </style>

                <script>
                    document.addEventListener('DOMContentLoaded', function () {
                        const messageData = [
                            {% for i in coenq %}
                            {
                                name: "{{ i.name }}",
                                email: "{{ i.email }}",
                                enq_date: "{{ i.enq_date }}",
                                message: "{{ i.message|escapejs }}"
                            },
                            {% endfor %}
                        ];

                        // Function to sort messages by date in descending order (most recent first)
                        function sortMessagesByDate(messages) {
                            return messages.sort((a, b) => new Date(b.enq_date) - new Date(a.enq_date));
                        }

                        // Function to truncate long messages
                        function truncateMessage(message, maxLength = 100) {
                            if (message.length <= maxLength) {
                                return message;
                            }
                            const truncated = message.substr(0, maxLength) + '<span class="message-more"> Show more</span>';
                            return truncated;
                        }

                        // Function to load all messages
                        function loadMessages(filteredMessages) {
                            const tbody = document.getElementById('message-tbody');
                            tbody.innerHTML = ''; // Clear existing messages

                            // Loop through all messages and add them to the table
                            filteredMessages.forEach((message, i) => {
                                const row = document.createElement('tr');
                                const truncatedMessage = truncateMessage(message.message);
                                row.innerHTML = `
                                    <td>${message.name}</td>
                                    <td>${message.email}</td>
                                    <td>${message.enq_date} (<span class="time-ago" data-enq-date="${message.enq_date}"></span>)</td>
                                    <td class="message-cell" data-message-index="${i}"><span class="message-content">${truncatedMessage}</span></td>
                                `;
                                tbody.appendChild(row);
                            });

                            updateEnquiryTime();
                        }

                        // Event listener for search input
                        document.getElementById('search-input').addEventListener('input', function() {
                            const searchTerm = this.value.toLowerCase();
                            // Filter the entire dataset based on search term
                            const filteredMessages = messageData.filter(message => 
                                message.name.toLowerCase().includes(searchTerm) ||
                                message.email.toLowerCase().includes(searchTerm) ||
                                message.message.toLowerCase().includes(searchTerm)
                            );

                            // Load the filtered and sorted messages
                            loadMessages(sortMessagesByDate(filteredMessages));  // Sort before loading
                        });

                        // Function to update time ago text
                        function updateEnquiryTime() {
                            const enqDateElements = document.querySelectorAll('[data-enq-date]');
                            enqDateElements.forEach((element) => {
                                const enqDate = new Date(element.getAttribute('data-enq-date'));
                                const currentDate = new Date();
                                const timeDifference = (currentDate - enqDate) / 1000; // Convert to seconds

                                let timeAgo;
                                let textColor = '';

                                if (timeDifference < 60) {
                                    timeAgo = `${Math.floor(timeDifference)} second${Math.floor(timeDifference) !== 1 ? 's' : ''} ago`;
                                    textColor = 'green';
                                } else if (timeDifference < 3600) {
                                    const minutes = Math.floor(timeDifference / 60);
                                    timeAgo = `${minutes} minute${minutes !== 1 ? 's' : ''} ago`;
                                    textColor = 'green';
                                } else if (timeDifference < 86400) {
                                    const hours = Math.floor(timeDifference / 3600);
                                    timeAgo = `${hours} hour${hours !== 1 ? 's' : ''} ago`;
                                    textColor = 'green';
                                } else if (timeDifference < 604800) {
                                    const days = Math.floor(timeDifference / 86400);
                                    timeAgo = `${days} day${days !== 1 ? 's' : ''} ago`;
                                    textColor = 'orange';
                                } else if (timeDifference < 2419200) {
                                    const weeks = Math.floor(timeDifference / 604800);
                                    timeAgo = `${weeks} week${weeks !== 1 ? 's' : ''} ago`;
                                    textColor = 'orange';
                                } else if (timeDifference < 29030400) {
                                    const months = Math.floor(timeDifference / 2419200);
                                    timeAgo = `${months} month${months !== 1 ? 's' : ''} ago`;
                                    textColor = 'red';
                                } else {
                                    const years = Math.floor(timeDifference / 29030400);
                                    timeAgo = `${years} year${years !== 1 ? 's' : ''} ago`;
                                    textColor = 'red';
                                }

                                element.textContent = timeAgo;
                                element.style.color = textColor;
                            });
                        }

                        // Initial load of all messages
                        loadMessages(sortMessagesByDate(messageData));

                        // Update time every minute
                        setInterval(updateEnquiryTime, 60000);

                        // Event listener for 'Read More' / 'Show Less'
                        document.addEventListener('click', function(e) {
                            if (e.target && e.target.classList.contains('message-more')) {
                                const messageCell = e.target.closest('.message-cell');
                                const messageContent = messageCell.querySelector('.message-content');
                                const messageIndex = parseInt(messageCell.getAttribute('data-message-index'), 10);
                                const fullMessage = messageData[messageIndex].message;

                                messageContent.innerHTML = fullMessage + '<span class="message-less"> Show less</span>';
                            } else if (e.target && e.target.classList.contains('message-less')) {
                                const messageCell = e.target.closest('.message-cell');
                                const messageContent = messageCell.querySelector('.message-content');
                                const messageIndex = parseInt(messageCell.getAttribute('data-message-index'), 10);
                                const originalMessage = messageData[messageIndex].message;
                                const truncatedMessage = truncateMessage(originalMessage);

                                messageContent.innerHTML = truncatedMessage;
                            }
                        });
                    });
                </script>
            </div>
        </div>
    </div>
</div>

{% endblock body %}