{% extends "admin_base.html" %}

{% block content %}
<div class="container mx-auto px-4 py-8">
    <!-- Search Form -->
    <div class="mb-8 bg-white rounded-lg shadow-md p-6">
        <form method="GET" action="{% url 'mimansha_main:contact_message' %}" class="flex flex-col md:flex-row gap-4">
            <div class="flex-grow">
                <input type="text" name="search" placeholder="Search by name, email or phone..." 
                       class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
                       value="{{ request.GET.search }}">
            </div>
            <div class="flex gap-2">
                <button type="submit" class="px-6 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors duration-200">
                    Search
                </button>
                <a href="{% url 'mimansha_main:contact_message' %}" class="px-6 py-2 bg-gray-200 text-gray-700 rounded-lg hover:bg-gray-300 transition-colors duration-200">
                    Clear
                </a>
            </div>
        </form>
    </div>

    <!-- Contact Results -->
    <h1 class="text-2xl font-bold mb-6">Contact Submissions ({{ contacts|length }})</h1>
    
    <!-- Contact Grid -->
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mb-8">
        {% for contact in contacts %}
        <div class="bg-white rounded-lg shadow-md overflow-hidden transition-transform duration-200 hover:shadow-lg hover:-translate-y-1">
            <div class="p-6">
                <h2 class="text-xl font-bold mb-4 text-gray-800 truncate">{{ contact.name }}</h2>
                <div class="flex flex-col gap-3">
                    <button onclick="callContact('{{ contact.phone }}')" class="flex items-center justify-between px-4 py-2 bg-green-100 text-green-800 rounded-md hover:bg-green-200 transition-colors duration-200">
                        <span class="flex items-center">
                            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2" viewBox="0 0 20 20" fill="currentColor">
                                <path d="M2 3a1 1 0 011-1h2.153a1 1 0 01.986.836l.74 4.435a1 1 0 01-.54 1.06l-1.548.773a11.037 11.037 0 006.105 6.105l.774-1.548a1 1 0 011.059-.54l4.435.74a1 1 0 01.836.986V17a1 1 0 01-1 1h-2C7.82 18 2 12.18 2 5V3z" />
                            </svg>
                            Call
                        </span>
                        <span class="text-sm">{{ contact.phone }}</span>
                    </button>
                    
                    <button onclick="mailContact('{{ contact.mail }}')" class="flex items-center justify-between px-4 py-2 bg-blue-100 text-blue-800 rounded-md hover:bg-blue-200 transition-colors duration-200">
                        <span class="flex items-center">
                            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2" viewBox="0 0 20 20" fill="currentColor">
                                <path d="M2.003 5.884L10 9.882l7.997-3.998A2 2 0 0016 4H4a2 2 0 00-1.997 1.884z" />
                                <path d="M18 8.118l-8 4-8-4V14a2 2 0 002 2h12a2 2 0 002-2V8.118z" />
                            </svg>
                            Email
                        </span>
                        <span class="text-sm truncate max-w-[150px]">{{ contact.mail }}</span>
                    </button>
                    
                    <button onclick="showMessage('{{ contact.name }}', '{{ contact.message|escapejs }}')" class="flex items-center justify-center px-4 py-2 bg-purple-100 text-purple-800 rounded-md hover:bg-purple-200 transition-colors duration-200">
                        <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2" viewBox="0 0 20 20" fill="currentColor">
                            <path fill-rule="evenodd" d="M18 10c0 3.866-3.582 7-8 7a8.841 8.841 0 01-4.083-.98L2 17l1.338-3.123C2.493 12.767 2 11.434 2 10c0-3.866 3.582-7 8-7s8 3.134 8 7zM7 9H5v2h2V9zm8 0h-2v2h2V9zM9 9h2v2H9V9z" clip-rule="evenodd" />
                        </svg>
                        See Message
                    </button>
                </div>
            </div>
        </div>
        {% empty %}
        <div class="col-span-full text-center py-8">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-16 w-16 mx-auto text-gray-400 mb-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 13V6a2 2 0 00-2-2H6a2 2 0 00-2 2v7m16 0v5a2 2 0 01-2 2H6a2 2 0 01-2-2v-5m16 0h-2.586a1 1 0 00-.707.293l-2.414 2.414a1 1 0 01-.707.293h-3.172a1 1 0 01-.707-.293l-2.414-2.414A1 1 0 006.586 13H4" />
            </svg>
            <p class="text-xl text-gray-600">No contacts found</p>
        </div>
        {% endfor %}
    </div>

    <!-- Pagination -->
    {% if page_obj.paginator.num_pages > 1 %}
    <div class="flex justify-center mt-8">
        <nav class="flex items-center space-x-2">
            {% if page_obj.has_previous %}
            <a href="?page=1{% if request.GET.search %}&search={{ request.GET.search }}{% endif %}" 
               class="px-3 py-2 rounded-md bg-gray-200 text-gray-700 hover:bg-gray-300">
                <span class="sr-only">First</span>
                <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
                    <path fill-rule="evenodd" d="M15.707 15.707a1 1 0 01-1.414 0l-5-5a1 1 0 010-1.414l5-5a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 010 1.414zm-6 0a1 1 0 01-1.414 0l-5-5a1 1 0 010-1.414l5-5a1 1 0 011.414 1.414L5.414 10l4.293 4.293a1 1 0 010 1.414z" clip-rule="evenodd" />
                </svg>
            </a>
            <a href="?page={{ page_obj.previous_page_number }}{% if request.GET.search %}&search={{ request.GET.search }}{% endif %}"
               class="px-3 py-2 rounded-md bg-gray-200 text-gray-700 hover:bg-gray-300">
                <span class="sr-only">Previous</span>
                <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
                    <path fill-rule="evenodd" d="M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z" clip-rule="evenodd" />
                </svg>
            </a>
            {% endif %}

            <span class="px-4 py-2 rounded-md bg-gray-100">
                Page {{ page_obj.number }} of {{ page_obj.paginator.num_pages }}
            </span>

            {% if page_obj.has_next %}
            <a href="?page={{ page_obj.next_page_number }}{% if request.GET.search %}&search={{ request.GET.search }}{% endif %}"
               class="px-3 py-2 rounded-md bg-gray-200 text-gray-700 hover:bg-gray-300">
                <span class="sr-only">Next</span>
                <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
                    <path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd" />
                </svg>
            </a>
            <a href="?page={{ page_obj.paginator.num_pages }}{% if request.GET.search %}&search={{ request.GET.search }}{% endif %}"
               class="px-3 py-2 rounded-md bg-gray-200 text-gray-700 hover:bg-gray-300">
                <span class="sr-only">Last</span>
                <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
                    <path fill-rule="evenodd" d="M10.293 15.707a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 1.414L7.414 10l2.293 2.293a1 1 0 01-1.414 1.414zm6 0a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 1.414L13.414 10l2.293 2.293a1 1 0 010 1.414z" clip-rule="evenodd" />
                </svg>
            </a>
            {% endif %}
        </nav>
    </div>
    {% endif %}
</div>

<!-- Message Modal -->
<div id="messageModal" class="fixed inset-0 bg-black bg-opacity-50 backdrop-blur-sm z-50 flex justify-center items-center hidden">
    <div class="bg-white rounded-lg shadow-xl max-w-lg w-full max-h-[90vh] overflow-y-auto">
        <div class="p-6">
            <div class="flex justify-between items-center mb-4">
                <h3 id="modalTitle" class="text-xl font-bold text-gray-800"></h3>
                <button onclick="closeModal()" class="text-gray-500 hover:text-gray-700">
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
                    </svg>
                </button>
            </div>
            <div class="bg-gray-100 p-4 rounded-lg">
                <p id="messageContent" class="text-gray-800 whitespace-pre-line"></p>
            </div>
            <div class="mt-6 flex justify-end">
                <button onclick="closeModal()" class="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors duration-200">
                    Close
                </button>
            </div>
        </div>
    </div>
</div>

<script>
    // Function to show message in modal
    function showMessage(name, message) {
        const modal = document.getElementById('messageModal');
        const modalTitle = document.getElementById('modalTitle');
        const messageContent = document.getElementById('messageContent');
        
        modalTitle.textContent = `Message from ${name}`;
        messageContent.textContent = message;
        
        modal.classList.remove('hidden');
        // Add animation class
        modal.classList.add('animate-fadeIn');
        
        // Close modal when clicking outside
        modal.addEventListener('click', function(e) {
            if (e.target === modal) {
                closeModal();
            }
        });
        
        // Add keyboard event listener
        document.addEventListener('keydown', handleEscKeyPress);
    }
    
    // Function to close modal
    function closeModal() {
        const modal = document.getElementById('messageModal');
        modal.classList.add('hidden');
        
        // Remove keyboard event listener
        document.removeEventListener('keydown', handleEscKeyPress);
    }
    
    // Close modal with Escape key
    function handleEscKeyPress(e) {
        if (e.key === 'Escape') {
            closeModal();
        }
    }
    
    // Function to handle calling a contact
    function callContact(phone) {
        window.location.href = `tel:${phone}`;
    }
    
    // Function to handle emailing a contact
    function mailContact(email) {
        window.location.href = `mailto:${email}`;
    }
</script>

<style>
    /* Animation for modal */
    @keyframes fadeIn {
        from { opacity: 0; }
        to { opacity: 1; }
    }
    
    .animate-fadeIn {
        animation: fadeIn 0.3s ease-out forwards;
    }
    
    /* For message truncation */
    .truncate {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
</style>
{% endblock %}