{% extends 'layouts/base.html' %}

{% block extra_css %}
<style>
    .groups-container {
        padding: 20px;
    }

    .header-actions {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 20px;
    }

    .search-box {
        width: 300px;
        padding: 8px;
        border: 1px solid #ddd;
        border-radius: 4px;
    }

    .action-buttons {
        display: flex;
        gap: 10px;
    }

    .groups-table {
        width: 100%;
        border-collapse: collapse;
        margin-top: 20px;
    }

    .groups-table th,
    .groups-table td {
        padding: 12px;
        text-align: left;
        border-bottom: 1px solid #ddd;
    }

    .groups-table th {
        background-color: #f8f9fa;
    }

    .modal {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        transform: translate(72%, 13%);
        box-shadow: 0px 0px 8px 0px #8080807d;
        /* background: rgba(0, 0, 0, 0.5); */
    }

    .modal-content {
        background: white;
        width: 100%;
        margin: 100px auto;
        padding: 20px;
        border-radius: 8px;
        margin: 0;
    }
    .contacts-list {
        max-height: 300px;
        overflow-y: auto;
        border: 1px solid #ddd;
        border-radius: 4px;
        padding: 10px;
        margin-top: 10px;
    }

    .contact-item {
        display: flex;
        align-items: center;
        padding: 8px;
        border-bottom: 1px solid #eee;
    }

    .contact-item:last-child {
        border-bottom: none;
    }

    .contact-item input[type="checkbox"] {
        margin-right: 10px;
    }

    #groupsPagination button {
        background: #2563eb;
        color: #fff;
        border: none;
        border-radius: 4px;
        padding: 4px 12px;
        margin: 0 2px;
        cursor: pointer;
        font-size: 1em;
    }

    #groupsPagination button[disabled] {
        background: #e0e0e0;
        color: #888;
        cursor: not-allowed;
    }

    #groupDetails h4 {
        margin-top: 0;
        margin-bottom: 10px;
        color: #333; /* Darker color for heading */
        font-size: 1.5em; /* Larger font size */
        border-bottom: 1px solid #eee; /* Add a subtle line below the group name */
        padding-bottom: 5px;
    }

    #groupDetails p {
        margin-bottom: 15px;
        color: #555; /* Slightly lighter color for date */
        font-size: 0.9em; /* Smaller font size for date */
    }

    #groupDetails h5 {
        margin-top: 20px;
        margin-bottom: 10px;
        color: #333;
        font-size: 1.2em;
    }

    #groupDetails ul {
        list-style: disc; /* Use bullet points */
        padding-left: 20px; /* Indent the list */
        margin-top: 0;
    }

    #groupDetails li {
        margin-bottom: 8px; /* Space between list items */
        color: #666; /* Medium color for list items */
        line-height: 1.4; /* Improve readability */
    }
</style>
{% endblock %}

{% block content %}
<div class="groups-container">
    <div class="header-actions">
        <h2>Contact Groups</h2>
        <div class="action-buttons">
            <button onclick="showAddGroupModal()" class="action-button primary">
                <i class="fa-light fa-plus"></i> Create Group
            </button>
        </div>
    </div>

    <input type="text" id="searchGroups" class="search-box" placeholder="Search groups...">

    <table class="groups-table">
        <thead>
            <tr>
                <th>Group Name</th>
                <th>Number of Contacts</th>
                <th>Created Date</th>
                <th>Actions</th>
            </tr>
        </thead>
        <tbody id="groupsList">
            <!-- Groups will be loaded here -->
        </tbody>
    </table>

    <div id="groupsPagination" style="margin-top: 10px; text-align: right;"></div>

    <!-- Add Group Modal -->
    <div id="addGroupModal" class="modal">
        <div class="modal-content">
            <h3>Create Contact Group</h3>
            <form id="addGroupForm">
                <div class="form-group">
                    <label>Group Name</label>
                    <input type="text" id="groupName" required class="form-control">
                </div>
                <div class="form-group">
                    <label>Select Contacts</label>
                    <div class="contacts-list" id="contactsList">
                        <!-- Contacts will be loaded here -->
                    </div>
                </div>

                <div class="mt-3">
                    <button type="submit" class="action-button primary">Create Group</button>
                    <button type="button" onclick="hideAddGroupModal()" class="action-button primary">
                        Cancel
                    </button>
                </div>
            </form>
        </div>
    </div>

    <!-- View Group Modal -->
    <div id="viewGroupModal" class="modal">
        <div class="modal-content">
            <h3>Group Details</h3>
            <div id="groupDetails">
                <!-- Group details will be loaded here -->
            </div>
            <div class="mt-3" style="text-align: end;">
                <button type="button" onclick="hideViewGroupModal()" class="action-button primary">
                    Close
                </button>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
    let groupsPerPage = 10;
    let currentGroupsPage = 1;
    let groupsData = [];
    let contactsData = [];

    async function loadGroups() {
        try {
            const response = await fetch('/company/contact-groups/list');
            const data = await response.json();
            if (data.success) {
                groupsData = data.groups;
                currentGroupsPage = 1;
                renderGroupsTable();
            }
        } catch (error) {
            console.error('Error loading groups:', error);
        }
    }

    async function loadContacts() {
        try {
            const response = await fetch('/company/contacts/list');
            const data = await response.json();
            if (data.success) {
                contactsData = data.contacts;
                
                renderContactsList();
            }
        } catch (error) {
            console.error('Error loading contacts:', error);
        }
    }

    function renderGroupsTable(filteredGroups = null) {
        const data = filteredGroups || groupsData;
        const start = (currentGroupsPage - 1) * groupsPerPage;
        const end = start + groupsPerPage;
        const pageGroups = data.slice(start, end);

        const groupsList = document.getElementById('groupsList');
        if (pageGroups.length === 0) {
            groupsList.innerHTML = `
                <tr>
                    <td colspan="4" class="text-center">No groups found</td>
                </tr>
            `;
        } else {
            groupsList.innerHTML = pageGroups.map(group => `
                <tr>
                    <td>${group.name}</td>
                    <td>${group.contact_count}</td>
                    <td>${new Date(group.created_at).toLocaleDateString()}</td>
                    <td>
                        <button onclick="viewGroup('${group.id}')" class="action-button secondary">
                            <i class="fa-light fa-eye"></i>
                        </button>
                        <button onclick="deleteGroup('${group.id}')" class="action-button danger">
                            <i class="fa-light fa-trash"></i>
                        </button>
                    </td>
                </tr>
            `).join('');
        }

        renderGroupsPagination(data);
    }

    function renderContactsList() {
        const contactsList = document.getElementById('contactsList');
        contactsList.innerHTML = contactsData.map(contact => `
            <div class="contact-item">
                <input type="checkbox" id="contact_${contact.id}" style="width:20px" value="${contact.id}">
                <label for="contact_${contact.id}">${contact.name} (${contact.email})</label>
            </div>
        `).join('');
    }

    function renderGroupsPagination(data = null) {
        const totalGroups = (data || groupsData).length;
        const totalPages = Math.ceil(totalGroups / groupsPerPage);
        let html = '';

        if (totalPages > 1) {
            html += `<button onclick="changeGroupsPage(-1)" ${currentGroupsPage === 1 ? 'disabled' : ''}>Prev</button>`;
            html += ` Page ${currentGroupsPage} of ${totalPages} `;
            html += `<button onclick="changeGroupsPage(1)" ${currentGroupsPage === totalPages ? 'disabled' : ''}>Next</button>`;
        }

        document.getElementById('groupsPagination').innerHTML = html;
    }

    function changeGroupsPage(delta) {
        const totalPages = Math.ceil(groupsData.length / groupsPerPage);
        currentGroupsPage += delta;
        if (currentGroupsPage < 1) currentGroupsPage = 1;
        if (currentGroupsPage > totalPages) currentGroupsPage = totalPages;
        renderGroupsTable();
    }

    function showAddGroupModal() {
        document.getElementById('addGroupModal').style.display = 'block';
        loadContacts();
    }

    function hideAddGroupModal() {
        document.getElementById('addGroupModal').style.display = 'none';
        document.getElementById('addGroupForm').reset();
    }

    function showViewGroupModal() {
        document.getElementById('viewGroupModal').style.display = 'block';
    }

    function hideViewGroupModal() {
        document.getElementById('viewGroupModal').style.display = 'none';
    }

    document.getElementById('addGroupForm').addEventListener('submit', async function addGroupHandler(e) {
        e.preventDefault();

        const selectedContacts = Array.from(document.querySelectorAll('#contactsList input[type="checkbox"]:checked'))
            .map(checkbox => checkbox.value);

        if (selectedContacts.length === 0) {
            showNotification('Please select at least one contact', 'error');
            return;
        }

        const data = {
            name: document.getElementById('groupName').value,
            contact_ids: selectedContacts
        };

        try {
            const response = await fetch('/company/contact-groups/add', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify(data)
            });

            const result = await response.json();
            if (result.success) {
                showNotification('Group created successfully!', 'success');
                hideAddGroupModal();
                loadGroups();
            } else {
                showNotification('Error: ' + result.error, 'error');
            }
        } catch (error) {
            showNotification('Error creating group: ' + error.message, 'error');
        }
    });

    async function viewGroup(groupId) {
        try {
            const response = await fetch(`/company/contact-groups/${groupId}`);
            const data = await response.json();
            if (data.success) {
                const group = data.group;
                document.getElementById('groupDetails').innerHTML = `
                    <h4>${group.name}</h4>
                    <p>Created: ${new Date(group.created_at).toLocaleDateString()}</p>
                    <h5>Contacts in this group:</h5>
                    <ul>
                        ${group.contacts.map(contact => `
                            <li>${contact.name} (${contact.phone_number})</li>
                        `).join('')}
                    </ul>
                `;
                showViewGroupModal();
            }
        } catch (error) {
            showNotification('Error loading group details: ' + error.message, 'error');
        }
    }

    async function deleteGroup(groupId) {
        if (!confirm('Are you sure you want to delete this group?')) {
            return;
        }

        try {
            const response = await fetch(`/company/contact-groups/${groupId}`, {
                method: 'DELETE'
            });

            const result = await response.json();
            if (result.success) {
                showNotification('Group deleted successfully', 'success');
                loadGroups();
            } else {
                showNotification('Error: ' + result.error, 'error');
            }
        } catch (error) {
            showNotification('Error deleting group: ' + error.message, 'error');
        }
    }

    document.getElementById('searchGroups').addEventListener('input', (e) => {
        const searchTerm = e.target.value.toLowerCase();
        const filteredGroups = groupsData.filter(group =>
            group.name.toLowerCase().includes(searchTerm)
        );
        currentGroupsPage = 1;
        renderGroupsTable(filteredGroups);
        renderGroupsPagination(filteredGroups);
    });

    document.addEventListener('DOMContentLoaded', loadGroups);
</script>
{% endblock %}