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


<div class="page-wrapper">
    <div class="content">
        <div class="page-header">
            <div class="page-title">
                <h4>WhatsApp</h4>
                <h6>All WhatsApp enquiries</h6>
            </div>
        </div>
        <div class="card">
            <div class="card-body">
                <div class="table-top">
                    <div class="search-set">
                        <div class="search-input">
                            <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>Product</th>
                                <th>Enq. Date</th>
                                <th>Action</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for i in whats %}
                            {% for pro in product %}
                            {% if i.product_id == pro.id %}
                            <tr>
                                <td class="productimgname">
                                    <a href="#" class="product-img">
                                        {% for image in pro.productimage_set.all %}
                                        
                                        {% if image.fea_img == 1 %}
                                            
                                        <img src="{{ image.product_image.url }}" alt="{{ image.product_image.url }}">
                                        {% endif %}
                                            
                                        {% endfor %}
                                    </a>
                                    <span>{{ i.user_id }}</span>
                                </td>
                                <td>
                                    <a class="me-3" href="{% url 'productDetails' pro.id %}">
                                        {{ pro.product_name }}
                                    </a>
                                </td>
                                <td>
                                    {{ i.enq_date }} (<span class="time-ago" data-enq-date="{{ i.enq_date }}"></span>)
                                </td>

                                <td>
                                    <a class="me-3" href="{% url 'whatsenqdel' i.id %}">
                                        <img src="{% static 'assets/img/icons/delete.svg' %}" alt="img">
                                    </a>
                                </td>
                            </tr>
                            {% endif %}
                            {% endfor %}
                            {% endfor %}
                        </tbody>
                    </table>
                </div>

                <script>
                    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'; // Green color for seconds
                            } else if (timeDifference < 3600) {
                                const minutes = Math.floor(timeDifference / 60);
                                timeAgo = `${minutes} minute${minutes !== 1 ? 's' : ''} ago`;
                                textColor = 'green'; // Green color for minutes
                            } else if (timeDifference < 86400) {
                                const hours = Math.floor(timeDifference / 3600);
                                timeAgo = `${hours} hour${hours !== 1 ? 's' : ''} ago`;
                                textColor = 'green'; // Yellow color for hours
                            } else if (timeDifference < 604800) { // 7 days in seconds
                                const days = Math.floor(timeDifference / 86400);
                                timeAgo = `${days} day${days !== 1 ? 's' : ''} ago`;
                                textColor = 'orange'; // Yellow color for days
                            } else if (timeDifference < 2419200) { // 4 weeks in seconds
                                const weeks = Math.floor(timeDifference / 604800);
                                timeAgo = `${weeks} week${weeks !== 1 ? 's' : ''} ago`;
                                textColor = 'orange'; // Red color for weeks
                            } else if (timeDifference < 29030400) { // 12 months (approx. 11 months) in seconds
                                const months = Math.floor(timeDifference / 2419200); // Assuming a month is approximately 4 weeks
                                timeAgo = `${months} month${months !== 1 ? 's' : ''} ago`;
                                textColor = 'red'; // Red color for months
                            } else {
                                const years = Math.floor(timeDifference / 29030400); // 1 year in seconds
                                timeAgo = `${years} year${years !== 1 ? 's' : ''} ago`;
                                textColor = 'red'; // Red color for years
                            }
                
                            // Update the "time-ago" span with the specified color
                            element.textContent = timeAgo;
                            element.style.color = textColor;
                        });
                    }
                
                    // Call the function to update the displayed time
                    updateEnquiryTime();
                
                    // Optionally, you can set an interval to periodically update the time
                    // setInterval(updateEnquiryTime, 60000); // Update every minute (60,000 milliseconds)
                </script>
                






            </div>
        </div>

    </div>
</div>


{% endblock body %}