{% extends "base.html" %}
{% block title %}Chat {% endblock %}

{% block content %}

<div class="chat-wrapper"> <!-- Bọc tất cả -->
    <!-- Sidebar Danh sách người dùng -->
    <div class="chat-sidebar">
        <h5>📋 Bạn bè</h5>
        <ul>
            {% for e in employees %}
            <li class="{% if e.user %}active{% endif %}">
                <a>{{ e.name }}</a>
            </li>
            {% endfor %}
        </ul>
    </div>


    <!-- Khu vực Chat chính -->
    <div class="chat-main">
        {% if employee.level >= 5 %}
        <form method="post" action="{% url 'delete_all_messages' %}"
            onsubmit="return confirm('Bạn có chắc muốn xóa toàn bộ tin nhắn?');">
            {% csrf_token %}
            <button type="submit" class="btn btn-danger">🗑️ Xóa toàn bộ tin nhắn</button>
        </form>
        {% endif %}
        <input type="date" id="filter-date" />
        <h4>💬 Phòng Chat Kỹ Thuật</h4>
       <div class="chat-box">
    {% for msg in messages_list %}
    <div class="chat-message {% if msg.sender == sender %}sent{% else %}received{% endif %}">
        <div class="chat-author">{{ msg.sender }}</div>
        <div class="chat-bubble">
            <div class="bubble-content">
                {% if msg.content %}{{ msg.content }}{% endif %}
                {% if msg.image %}
                <div style="margin-top: 5px;">
                    <img src="{{ msg.image.url }}" alt="Ảnh đính kèm"
                         style="max-width: 200px; border-radius: 6px;" />
                </div>
                {% endif %}
            </div>
            <div class="bubble-time">{{ msg.timestamp|date:"H:i d/m/Y" }}</div>
        </div>
    </div>
    {% endfor %}
</div>

    <div id="upload-status" style="position: fixed; bottom: 10px; right: 20px; background: #007bff; color: #fff; padding: 8px 15px; border-radius: 6px; display: none; z-index: 9999;">
    Đang upload...
</div>

    <form id="chat-form" method="post" enctype="multipart/form-data">
        {% csrf_token %}
        <textarea id="chat-message" name="message" rows="3" placeholder="Nhập tin nhắn..." required></textarea><br>
        <!-- Nút chọn file dạng icon -->
        <label for="file-input" style="cursor: pointer; font-size: 24px;" title="Chọn file">
            📎
        </label>
        <input type="file" id="file-input" name="file" accept="image/*" style="display: none;" />

        <!-- Hiển thị preview ảnh hoặc tên file nhỏ -->
        <div id="file-preview" style="margin-top: 5px; font-size: 14px; color: #555;"></div>
        <button type="submit">Gửi</button>
    </form>
    <div id="create-task-hint" style="display:none; position:absolute; background:#ffffe0; border:1px solid #ccc; padding:6px 10px; font-size:13px; z-index:9999;"></div>

    </div>
</div>

<!-- Modal xem ảnh -->
<div id="image-modal" class="modal hidden">
    <span class="close">&times;</span>
    <div class="modal-content-wrapper">
        <div class="modal-body">
            <img class="modal-content" id="modal-image">
            <button id="zoom-toggle">🔍</button>
        </div>
        <div id="image-preview-bar">
            <button id="prev-img">⬆️</button>
            <div id="thumbnail-container"></div>
            <button id="next-img">⬇️</button>
        </div>
    </div>
</div>


<script>function showUploadStatus(msg, color = '#007bff') {
    const statusBox = document.getElementById('upload-status');
    statusBox.textContent = msg;
    statusBox.style.backgroundColor = color;
    statusBox.style.display = 'block';
}

function hideUploadStatus(delay = 2000) {
    setTimeout(() => {
        const statusBox = document.getElementById('upload-status');
        statusBox.style.display = 'none';
    }, delay);
}
</script>
<script>
document.addEventListener('DOMContentLoaded', function () {
    const modal = document.getElementById('image-modal');
    const modalImg = document.getElementById('modal-image');
    const closeBtn = modal.querySelector('.close');
    const zoomBtn = document.getElementById('zoom-toggle');
    const thumbnailContainer = document.getElementById('thumbnail-container');
    const prevBtn = document.getElementById('prev-img');
    const nextBtn = document.getElementById('next-img');

    let currentIndex = 0;
    let imageList = [];

    // Mở modal khi click ảnh
    document.querySelector('.chat-box').addEventListener('click', function (e) {
        if (e.target.tagName === 'IMG') {
            imageList = Array.from(document.querySelectorAll('.chat-box img'));
            currentIndex = imageList.indexOf(e.target);
            updateModalImage(currentIndex);
            renderThumbnails();
            modal.classList.remove('hidden');
            modal.classList.add('show');
        }
    });

    // Đóng modal
    closeBtn.addEventListener('click', () => {
        modal.classList.remove('show');
        modal.classList.add('hidden');
    });

    modal.addEventListener('click', (e) => {
        if (e.target === modal) {
            modal.classList.remove('show');
            modal.classList.add('hidden');
        }
    });

    // Zoom toggle
    zoomBtn.addEventListener('click', () => {
        modalImg.classList.toggle('zoomed');
        zoomBtn.textContent = modalImg.classList.contains('zoomed') ? '🔍-' : '🔍+';
    });

    // Prev / Next buttons
    prevBtn.addEventListener('click', () => {
        if (currentIndex > 0) {
            currentIndex--;
            updateModalImage(currentIndex);
        }
    });

    nextBtn.addEventListener('click', () => {
        if (currentIndex < imageList.length - 1) {
            currentIndex++;
            updateModalImage(currentIndex);
        }
    });

    function updateModalImage(index) {
        modalImg.src = imageList[index].src;
        modalImg.classList.remove('zoomed');
        zoomBtn.textContent = '🔍';

        // highlight active thumbnail
        Array.from(thumbnailContainer.children).forEach((thumb, i) => {
            thumb.classList.toggle('active', i === index);
        });
    }

    function renderThumbnails() {
        thumbnailContainer.innerHTML = '';
        imageList.forEach((img, i) => {
            const thumb = document.createElement('img');
            thumb.src = img.src;
            thumb.className = i === currentIndex ? 'active' : '';
            thumb.addEventListener('click', () => {
                currentIndex = i;
                updateModalImage(i);
            });
            thumbnailContainer.appendChild(thumb);
        });
    }
});
</script>
<script>
// ===== CHAT SCRIPT HOÀN CHỈNH ===== //
document.addEventListener('DOMContentLoaded', function () {
    const textarea = document.getElementById('chat-message');
    const taskHintBox = document.getElementById('create-task-hint');
    const csrfToken = document.querySelector('[name=csrfmiddlewaretoken]').value;
    const suggestionBox = document.createElement('div');

    suggestionBox.id = 'task-suggestions';
    Object.assign(suggestionBox.style, {
        position: 'absolute',
        background: '#fff',
        border: '1px solid #ccc',
        zIndex: 9999,
        display: 'none',
        maxHeight: '200px',
        overflowY: 'auto',
        padding: '4px',
        fontSize: '14px',
        boxShadow: '0 2px 8px rgba(0,0,0,0.15)'
    });
    document.body.appendChild(suggestionBox);

    let tasks = [], employees = [], currentTaskId = null;

    fetch('/chat/task-suggestions/').then(res => res.json()).then(data => tasks = data);
    fetch('/chat/employees-lv2/').then(res => res.json()).then(data => employees = data);

    textarea.addEventListener('keyup', function () {
        const cursorPos = textarea.selectionStart;
        const text = textarea.value.slice(0, cursorPos);
        const plusMatch = text.match(/\+([^\|]*)$/);
        const atMatch = text.match(/@(\d*)$/);
        const slashMatch = text.match(/\/([a-zA-Z]*)$/);
        const hashMatch = text.match(/#([a-zA-Z0-9]*)$/);
        if (plusMatch) {
            const keyword = plusMatch[1].trim().toLowerCase();
            if (keyword.length > 0) {
                fetch(`/chat/customer-suggestions/?q=${encodeURIComponent(keyword)}`)
                    .then(res => res.json())
                    .then(data => {
                        suggestionBox.innerHTML = data.map(c => `<div class="customer-item" data-name="${c.name}" style="padding:6px 8px; cursor:pointer;">🧑 ${c.name}</div>`).join('');
                        showSuggestionBox();
                    });
            }
            return;
        }

        if (atMatch) {
            const keyword = atMatch[1];
            const filtered = tasks.filter(t => t.id.toString().startsWith(keyword));
            if (filtered.length > 0) {
                suggestionBox.innerHTML = filtered.map(t => `<div class="task-item" data-id="${t.id}" data-title="${t.title}" data-customer="${t.customer}" style="padding: 6px 8px; cursor: pointer;"><strong>@${t.id}</strong>: ${t.customer} | ${t.title}</div>`).join('');
                showSuggestionBox();
            } else hideSuggestionBox();
        } else if (slashMatch || hashMatch) {
    const keyword = (slashMatch || hashMatch)[1].toLowerCase();
    const filtered = employees.filter(emp => emp.name.toLowerCase().includes(keyword));
    if (filtered.length > 0) {
        suggestionBox.innerHTML = filtered.map(emp => `
            <div class="employee-item" data-id="${emp.id}" style="padding:6px 8px; cursor: pointer;">
                👤 ${emp.name} (${emp.role})
            </div>
        `).join('');
        showSuggestionBox();
    } else {
        hideSuggestionBox();
    }
}
        function showSuggestionBox() {
            const rect = textarea.getBoundingClientRect();
            suggestionBox.style.left = rect.left + window.scrollX + 'px';
            suggestionBox.style.top = rect.bottom + window.scrollY + 'px';
            suggestionBox.style.width = rect.width + 'px';
            suggestionBox.style.display = 'block';
        }

        function hideSuggestionBox() {
            suggestionBox.style.display = 'none';
        }

        // Gợi ý từng bước tạo task
        const val = textarea.value.trim();
        if (!val.startsWith('+')) {
            taskHintBox.style.display = 'none';
            return;
        }
        const parts = val.split('|');
        const step = parts.length;
        let hint = '';
        switch (step) {
            case 1: hint = '🧑 Nhập tên khách hàng |'; break;
            case 2: hint = '📝 Nhập tiêu đề công việc |'; break;
            case 3: hint = '🧾 Nhập mô tả công việc |'; break;
            case 4: hint = '📍 Nhập địa chỉ khách hàng |'; break;
            case 5: hint = '👤 Gõ #ID nhân viên phụ trách'; break;
            default:
                taskHintBox.style.display = 'none'; return;
        }
        const rect = textarea.getBoundingClientRect();
        taskHintBox.style.left = rect.left + window.scrollX + 'px';
        taskHintBox.style.top = rect.bottom + window.scrollY + 'px';
        taskHintBox.textContent = hint;
        taskHintBox.style.display = 'block';
    });

    suggestionBox.addEventListener('click', function (e) {
        const cursor = textarea.selectionStart;
        const taskItem = e.target.closest('.task-item');
        const employeeItem = e.target.closest('.employee-item');
        const customerItem = e.target.closest('.customer-item');

        if (customerItem) {
            const name = customerItem.dataset.name;
            textarea.value = textarea.value.slice(0, cursor).replace(/\+[^\|]*$/, `+${name}`) + textarea.value.slice(cursor);
            textarea.focus();
            suggestionBox.style.display = 'none';
            return;
        }
        if (taskItem) {
            const id = taskItem.dataset.id;
            const customer = taskItem.dataset.customer;
            const title = taskItem.dataset.title;
            textarea.value = textarea.value.slice(0, cursor).replace(/@\d*$/, `@${id}: ${customer} | ${title}`) + textarea.value.slice(cursor);
            currentTaskId = id;
            textarea.focus();
        }
        if (employeeItem) {
    const empId = employeeItem.dataset.id;
    const empName = employeeItem.textContent.trim();

    // Nếu nội dung đang là tạo task mới (+...|...|...|...|#ID)
    const isCreatingTask = textarea.value.trim().startsWith('+');
    if (isCreatingTask) {
        // Thay #ID bằng [Đã gán cho ...], KHÔNG gửi request assign
        textarea.value = textarea.value.slice(0, cursor).replace(/#[^\s]*$/, '') + `[Đã gán cho ${empName}]` + textarea.value.slice(cursor);
    } else {
        // Đang trong chế độ @task → gán thật bằng API
        textarea.value = textarea.value.slice(0, cursor).replace(/[\/#][^\s]*$/, '') + `[Đã gán cho ${empName}]` + textarea.value.slice(cursor);

        if (currentTaskId) {
            assignTaskToEmployee(currentTaskId, empId);
        } else {
            alert("⚠️ Vui lòng chọn công việc trước.");
        }
    }

    textarea.focus();
}
        suggestionBox.style.display = 'none';
    });

    document.addEventListener('click', e => {
        if (!suggestionBox.contains(e.target) && e.target !== textarea) {
            suggestionBox.style.display = 'none';
        }
    });
textarea.addEventListener('keydown', function (e) {
    if (e.key === 'Enter' && textarea.value.trim().startsWith('+')) {
        e.preventDefault();
        const input = textarea.value.trim();
        const taskPattern = /^\+([^|]+)\|([^|]+)\|([^|]+)\|([^|]+)\|\[Đã gán cho (.+?)\]$/;
        const taskPatternNoEmp = /^\+([^|]+)\|([^|]+)\|([^|]+)\|([^|]+)\.?$/;

        let customer_name, title, description, address, employee_name = null;

        if (taskPattern.test(input)) {
            const match = input.match(taskPattern);
            [_, customer_name, title, description, address, employee_name] = match;
        } else if (taskPatternNoEmp.test(input)) {
            const match = input.match(taskPatternNoEmp);
            [_, customer_name, title, description, address] = match;
        } else {
            alert('❗ Sai định dạng tạo công việc. Vui lòng nhập đầy đủ +Tên|Tiêu đề|Mô tả|Địa chỉ|#NhânViên');
            return;
        }

        // Tìm employee_id theo tên (nếu có)
        const employee = employees.find(emp => employee_name && employee_name.includes(emp.name));
        const employee_id = employee ? employee.id : null;

        fetch('/chat/create-task/', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRFToken': csrfToken
            },
            body: JSON.stringify({ customer_name, title, description, address, employee_id })
        })
        .then(res => res.json())
        .then(data => {
            if (data.success) {
                textarea.value = '';
                taskHintBox.style.display = 'none';

                const msg = document.createElement('div');
                msg.textContent = '✅ Đã tạo công việc thành công!';
                msg.style.color = 'green';
                msg.style.fontWeight = 'bold';
                msg.style.marginTop = '5px';
                taskHintBox.parentNode.insertBefore(msg, taskHintBox.nextSibling);

                setTimeout(() => msg.remove(), 3000);
            } else {
                alert('❌ Tạo công việc thất bại: ' + (data.error || 'Không rõ lỗi'));
            }
        })
        .catch(err => alert('❌ Lỗi tạo công việc'));
    }
});

    function assignTaskToEmployee(taskId, employeeId) {
        return fetch("/assign-task-to-employee/", {
            method: "POST",
            headers: {
                "Content-Type": "application/json",
                "X-CSRFToken": csrfToken,
            },
            body: JSON.stringify({ task_id: taskId, employee_id: employeeId }),
        }).then(res => res.json());
    }
});
</script>

<script>document.getElementById('filter-date').addEventListener('change', function () {
        const selectedDate = this.value; // định dạng yyyy-mm-dd
        fetch(`/chat/kythuat/json?date=${selectedDate}`)
            .then(res => res.json())
            .then(data => {
                document.querySelector('.chat-box').innerHTML = data.html;
            });
    });</script>


{% endblock %}