@extends('layouts-v2.app')

@section('title', 'Yêu cầu task')

@section('content')
<div class="font-sans text-slate-800">
    <div class="flex flex-col md:flex-row justify-between items-start md:items-center gap-4 mb-6">
        <div>
            <div class="flex items-center gap-2 text-slate-500 text-sm mb-2">
                <a href="{{ route('dashboard') }}" class="hover:text-blue-600">Trang chủ</a>
                <i data-lucide="chevron-right" class="w-4 h-4"></i>
                <span>Yêu cầu task</span>
            </div>
            <h1 class="text-2xl md:text-3xl font-bold text-slate-900">Yêu cầu Fix bug / Làm mới</h1>
        </div>
        <button type="button" id="btn-add" class="bg-blue-600 hover:bg-blue-700 text-white px-5 py-2.5 rounded-lg font-medium transition shadow-sm flex items-center gap-2">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" /></svg>
            Tạo yêu cầu
        </button>
    </div>

    {{-- Filters --}}
    <div class="bg-white rounded-xl border border-gray-200 shadow-sm p-4 mb-4">
        <div class="grid grid-cols-1 md:grid-cols-5 gap-3">
            <div>
                <label class="block text-xs font-medium text-gray-500 mb-1">Từ khóa</label>
                <input type="text" id="filter-keyword" placeholder="Tiêu đề / hiện trạng / yêu cầu..." class="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm outline-none focus:ring-2 focus:ring-blue-500">
            </div>
            <div>
                <label class="block text-xs font-medium text-gray-500 mb-1">Loại</label>
                <select id="filter-type" class="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm outline-none focus:ring-2 focus:ring-blue-500 bg-white">
                    <option value="">Tất cả</option>
                    <option value="fix_bug">Fix bug</option>
                    <option value="new_request">Yêu cầu mới</option>
                </select>
            </div>
            <div>
                <label class="block text-xs font-medium text-gray-500 mb-1">Trạng thái</label>
                <select id="filter-status" class="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm outline-none focus:ring-2 focus:ring-blue-500 bg-white">
                    <option value="">Tất cả</option>
                    <option value="new">Tạo mới</option>
                    <option value="done">Done</option>
                    <option value="ok">OK</option>
                    <option value="error">Lỗi</option>
                    <option value="not_error">Không phải lỗi</option>
                    <option value="closed">Đóng task</option>
                </select>
            </div>
            <div>
                <label class="block text-xs font-medium text-gray-500 mb-1">Assign</label>
                <select id="filter-assigned" class="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm outline-none focus:ring-2 focus:ring-blue-500 bg-white">
                    <option value="">Tất cả</option>
                    <option value="unassigned">Chưa assign</option>
                    <option value="kien">Kiên</option>
                    <option value="tung">Tùng</option>
                    <option value="tu">Tú</option>
                </select>
            </div>
            <div class="flex items-end gap-2">
                <button type="button" id="btn-filter" class="flex-1 bg-slate-900 hover:bg-slate-800 text-white px-4 py-2 rounded-lg text-sm font-medium">Lọc</button>
                <button type="button" id="btn-reset-filter" class="px-4 py-2 rounded-lg text-sm font-medium border border-gray-300 hover:bg-gray-50">Reset</button>
            </div>
        </div>
    </div>

    {{-- Table --}}
    <div class="bg-white rounded-xl shadow-sm border border-gray-200">
        <div class="overflow-x-auto overflow-y-visible">
            <table class="min-w-full divide-y divide-gray-200">
                <thead class="bg-gray-50">
                    <tr>
                        <th class="px-4 py-3 text-left text-xs font-semibold text-gray-500 uppercase">ID</th>
                        <th class="px-4 py-3 text-left text-xs font-semibold text-gray-500 uppercase">Loại</th>
                        <th class="px-4 py-3 text-left text-xs font-semibold text-gray-500 uppercase">Tiêu đề / Yêu cầu</th>
                        <th class="px-4 py-3 text-center text-xs font-semibold text-gray-500 uppercase">Ảnh</th>
                        <th class="px-4 py-3 text-left text-xs font-semibold text-gray-500 uppercase">Trạng thái</th>
                        <th class="px-4 py-3 text-left text-xs font-semibold text-gray-500 uppercase">Assign</th>
                        <th class="px-4 py-3 text-left text-xs font-semibold text-gray-500 uppercase">Người tạo</th>
                        <th class="px-4 py-3 text-left text-xs font-semibold text-gray-500 uppercase">Thời gian</th>
                        <th class="px-4 py-3 text-center text-xs font-semibold text-gray-500 uppercase">Hành động</th>
                    </tr>
                </thead>
                <tbody id="tableBody" class="bg-white divide-y divide-gray-200"></tbody>
            </table>
        </div>
        <div class="bg-gray-50 px-4 py-3 border-t border-gray-200 flex items-center justify-between">
            <div class="text-sm text-gray-500" id="paginationInfo">Đang tải...</div>
            <div class="flex items-center space-x-1" id="paginationLinks"></div>
        </div>
    </div>

    {{-- Modal Create / Edit --}}
    <div id="modalForm" class="fixed inset-0 bg-gray-900 bg-opacity-50 hidden items-center justify-center z-50 backdrop-blur-sm p-4 overflow-y-auto">
        <div class="bg-white p-6 rounded-2xl shadow-2xl w-full max-w-2xl my-8">
            <div class="flex justify-between items-center mb-5">
                <h2 class="text-xl font-bold text-gray-800" id="modalFormTitle">Tạo yêu cầu</h2>
                <button type="button" class="text-gray-400 hover:text-gray-600 btn-close-form">
                    <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path></svg>
                </button>
            </div>
            <form id="formTask" enctype="multipart/form-data">
                @csrf
                <input type="hidden" id="form_id" value="">
                <div class="mb-4">
                    <label class="block text-sm font-medium text-gray-700 mb-1">Loại yêu cầu <span class="text-red-500">*</span></label>
                    <select name="type" id="form_type" class="w-full border border-gray-300 px-4 py-2 rounded-lg outline-none focus:ring-2 focus:ring-blue-500 bg-white" required>
                        <option value="fix_bug">Fix bug</option>
                        <option value="new_request">Yêu cầu mới (làm mới)</option>
                    </select>
                </div>
                <div class="mb-4">
                    <label class="block text-sm font-medium text-gray-700 mb-1">Tiêu đề</label>
                    <input type="text" name="title" id="form_title" maxlength="255" placeholder="Tiêu đề ngắn gọn..." class="w-full border border-gray-300 px-4 py-2 rounded-lg outline-none focus:ring-2 focus:ring-blue-500">
                </div>
                <div class="mb-4">
                    <label class="block text-sm font-medium text-gray-700 mb-1">Giao cho <span class="text-red-500">*</span></label>
                    <select name="assigned_to" id="form_assigned_to" class="w-full border border-gray-300 px-4 py-2 rounded-lg outline-none focus:ring-2 focus:ring-blue-500 bg-white" required>
                        <option value="">-- Chọn người --</option>
                        <option value="kien">Kiên</option>
                        <option value="tung">Tùng</option>
                        <option value="tu">Tú</option>
                    </select>
                    <p class="text-xs text-gray-400 mt-1">Sau khi tạo sẽ gửi Zalo @tag người được chọn</p>
                </div>
                <div class="mb-4">
                    <label class="block text-sm font-medium text-gray-700 mb-1">Mô tả hiện trạng <span class="text-red-500">*</span></label>
                    <textarea name="current_state" id="form_current_state" rows="3" required placeholder="Hiện trạng đang như thế nào..." class="w-full border border-gray-300 px-4 py-2 rounded-lg outline-none focus:ring-2 focus:ring-blue-500"></textarea>
                </div>
                <div class="mb-4">
                    <label class="block text-sm font-medium text-gray-700 mb-1">Yêu cầu làm gì <span class="text-red-500">*</span></label>
                    <textarea name="requirement" id="form_requirement" rows="3" required placeholder="Cần làm / sửa những gì..." class="w-full border border-gray-300 px-4 py-2 rounded-lg outline-none focus:ring-2 focus:ring-blue-500"></textarea>
                </div>
                <div class="mb-4">
                    <label class="block text-sm font-medium text-gray-700 mb-1" id="form_content_label">Ghi chú thêm</label>
                    <textarea name="content" id="form_content" rows="3" placeholder="Ghi chú bổ sung (không bắt buộc)..." class="w-full border border-gray-300 px-4 py-2 rounded-lg outline-none focus:ring-2 focus:ring-blue-500"></textarea>
                </div>
                <div class="mb-4">
                    <label class="block text-sm font-medium text-gray-700 mb-1">Ảnh đính kèm (nhiều ảnh)</label>
                    <input type="file" name="images[]" id="form_images" accept="image/jpeg,image/jpg,image/png,image/gif,image/webp" multiple class="w-full text-sm border border-gray-300 rounded-lg px-3 py-2">
                    <p class="text-xs text-gray-400 mt-1">jpeg, png, gif, webp — tối đa 5MB/ảnh</p>
                    <div id="newImagePreview" class="flex flex-wrap gap-2 mt-3"></div>
                </div>
                <div id="existingImagesWrap" class="mb-4 hidden">
                    <label class="block text-sm font-medium text-gray-700 mb-1">Ảnh hiện có</label>
                    <div id="existingImages" class="flex flex-wrap gap-2"></div>
                </div>
                <div class="flex justify-end gap-3 mt-6">
                    <button type="button" class="px-5 py-2.5 bg-gray-100 hover:bg-gray-200 text-gray-700 font-medium rounded-lg btn-close-form">Hủy</button>
                    <button type="submit" id="btn-submit-form" class="px-5 py-2.5 bg-blue-600 hover:bg-blue-700 text-white font-medium rounded-lg shadow-sm">Lưu</button>
                </div>
            </form>
        </div>
    </div>

    {{-- Modal Detail + Status --}}
    <div id="modalDetail" class="fixed inset-0 bg-gray-900 bg-opacity-50 hidden items-center justify-center z-50 backdrop-blur-sm p-4 overflow-y-auto">
        <div class="bg-white p-6 rounded-2xl shadow-2xl w-full max-w-2xl my-8">
            <div class="flex justify-between items-center mb-5">
                <h2 class="text-xl font-bold text-gray-800">Chi tiết yêu cầu</h2>
                <button type="button" class="text-gray-400 hover:text-gray-600 btn-close-detail">
                    <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path></svg>
                </button>
            </div>
            <div id="detailContent" class="space-y-3 text-sm"></div>
            <div class="mt-6 border-t pt-4">
                <h3 class="font-semibold text-gray-800 mb-3">Chuyển trạng thái</h3>
                <div class="flex flex-wrap gap-2 mb-3" id="statusActions"></div>
                <div id="statusNoteWrap" class="hidden mb-3">
                    <label class="block text-sm font-medium text-gray-700 mb-1">Ghi chú (bắt buộc khi đánh dấu lỗi)</label>
                    <textarea id="status_note" rows="2" class="w-full border border-gray-300 px-3 py-2 rounded-lg text-sm outline-none focus:ring-2 focus:ring-blue-500"></textarea>
                </div>
            </div>
            <div class="flex justify-end mt-4">
                <button type="button" class="px-5 py-2.5 bg-gray-100 hover:bg-gray-200 text-gray-700 font-medium rounded-lg btn-close-detail">Đóng</button>
            </div>
        </div>
    </div>

    {{-- Image lightbox --}}
    <div id="lightbox" class="fixed inset-0 bg-black bg-opacity-80 hidden items-center justify-center z-[60] p-4" onclick="closeLightbox()">
        <img id="lightboxImg" src="" alt="" class="max-w-full max-h-full rounded-lg shadow-2xl">
    </div>
</div>

<script>
const ROUTES = {
    list: "{{ route('dev-request-tasks.getList') }}",
    store: "{{ route('dev-request-tasks.store') }}",
    show: "{{ route('dev-request-tasks.show', ['id' => ':id']) }}",
    update: "{{ route('dev-request-tasks.update', ['id' => ':id']) }}",
    updateStatus: "{{ route('dev-request-tasks.updateStatus', ['id' => ':id']) }}",
    assign: "{{ route('dev-request-tasks.assign', ['id' => ':id']) }}",
    destroy: "{{ route('dev-request-tasks.destroy', ['id' => ':id']) }}",
};
const CSRF = "{{ csrf_token() }}";

const TYPE_LABELS = {
    fix_bug: 'Fix bug',
    new_request: 'Yêu cầu mới',
};
const STATUS_LABELS = {
    new: 'Tạo mới',
    done: 'Done',
    ok: 'OK',
    error: 'Lỗi',
    not_error: 'Không phải lỗi',
    closed: 'Đóng task',
};
const STATUS_BADGES = {
    new: 'bg-blue-100 text-blue-800',
    done: 'bg-amber-100 text-amber-800',
    ok: 'bg-green-100 text-green-800',
    error: 'bg-red-100 text-red-800',
    not_error: 'bg-slate-100 text-slate-700',
    closed: 'bg-gray-200 text-gray-700',
};
const ASSIGNEE_LABELS = {
    kien: 'Kiên',
    tung: 'Tùng',
    tu: 'Tú',
};
const TRANSITIONS = {
    new: ['done'],
    done: ['ok', 'error', 'not_error', 'closed'],
    error: ['done', 'closed'],
    ok: ['done', 'error', 'not_error', 'closed'],
    not_error: ['done', 'error', 'ok', 'closed'],
    closed: [],
};

let currentPage = 1;
let removeImageIds = [];
let currentDetailId = null;

function escapeHtml(str) {
    if (str == null) return '';
    return String(str)
        .replace(/&/g, '&amp;')
        .replace(/</g, '&lt;')
        .replace(/>/g, '&gt;')
        .replace(/"/g, '&quot;');
}

function formatDate(iso) {
    if (!iso) return '-';
    const d = new Date(iso);
    return d.toLocaleTimeString('vi-VN', { hour: '2-digit', minute: '2-digit' }) + ' ' + d.toLocaleDateString('vi-VN');
}

function typeBadge(type) {
    const cls = type === 'fix_bug' ? 'bg-rose-100 text-rose-800' : 'bg-indigo-100 text-indigo-800';
    return `<span class="inline-flex px-2 py-0.5 rounded-full text-xs font-medium ${cls}">${TYPE_LABELS[type] || type}</span>`;
}

function statusBadge(status) {
    return `<span class="inline-flex px-2.5 py-0.5 rounded-full text-xs font-medium ${STATUS_BADGES[status] || 'bg-gray-100 text-gray-800'}">${STATUS_LABELS[status] || status}</span>`;
}

function statusSelectHtml(taskId, currentStatus) {
    const status = currentStatus || 'new';
    const next = TRANSITIONS[status] || [];
    const badge = statusBadge(status);

    if (next.length === 0) {
        return `<div class="inline-flex items-center" title="Task đã đóng — không đổi trạng thái được">${badge}</div>`;
    }

    return `
        <div class="status-menu inline-block text-left" data-id="${taskId}" data-current="${status}">
            <button type="button" class="btn-status-toggle inline-flex items-center gap-1.5 border border-gray-300 rounded-lg px-2 py-1.5 text-sm bg-white hover:bg-gray-50 focus:ring-2 focus:ring-blue-500"
                title="Đổi trạng thái">
                ${badge}
                <svg class="w-3.5 h-3.5 text-gray-400 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/></svg>
            </button>
        </div>
    `;
}

function closeAllStatusMenus() {
    $('#statusMenuFloating').remove();
}

function openStatusMenu(anchorEl, taskId, currentStatus) {
    closeAllStatusMenus();

    const next = TRANSITIONS[currentStatus] || [];
    if (!next.length) return;

    const btnColors = {
        done: 'hover:bg-amber-50 text-amber-800',
        ok: 'hover:bg-green-50 text-green-800',
        error: 'hover:bg-red-50 text-red-800',
        not_error: 'hover:bg-slate-100 text-slate-700',
        closed: 'hover:bg-gray-100 text-gray-800',
    };
    const items = next.map(s => `
        <button type="button"
            class="btn-status-option block w-full text-left px-3 py-2 text-sm bg-white ${btnColors[s] || 'hover:bg-gray-50 text-gray-800'}"
            data-id="${taskId}" data-current="${currentStatus}" data-status="${s}">
            → ${STATUS_LABELS[s] || s}
        </button>
    `).join('');

    const rect = anchorEl.getBoundingClientRect();
    const top = rect.bottom + 4;
    let left = rect.left;
    const minWidth = Math.max(rect.width, 168);

    const $panel = $(`
        <div id="statusMenuFloating" class="fixed z-[9999] rounded-lg border border-gray-200 bg-white shadow-xl py-1"
            style="top:${top}px;left:${left}px;min-width:${minWidth}px">
            ${items}
        </div>
    `);
    $('body').append($panel);

    // Keep inside viewport horizontally
    const panelRect = $panel[0].getBoundingClientRect();
    if (panelRect.right > window.innerWidth - 8) {
        $panel.css('left', Math.max(8, window.innerWidth - panelRect.width - 8) + 'px');
    }
    if (panelRect.bottom > window.innerHeight - 8) {
        $panel.css('top', Math.max(8, rect.top - panelRect.height - 4) + 'px');
    }
}

function assignSelectHtml(taskId, assignedTo) {
    const current = assignedTo || '';
    return `
        <select class="assign-select border border-gray-300 rounded-lg px-2 py-1.5 text-sm bg-white outline-none focus:ring-2 focus:ring-blue-500 min-w-[110px]" data-id="${taskId}">
            <option value="" ${current === '' ? 'selected' : ''}>— Chưa —</option>
            <option value="kien" ${current === 'kien' ? 'selected' : ''}>Kiên</option>
            <option value="tung" ${current === 'tung' ? 'selected' : ''}>Tùng</option>
            <option value="tu" ${current === 'tu' ? 'selected' : ''}>Tú</option>
        </select>
    `;
}

function openLightbox(url) {
    $('#lightboxImg').attr('src', url);
    $('#lightbox').removeClass('hidden').addClass('flex');
}
function closeLightbox() {
    $('#lightbox').addClass('hidden').removeClass('flex');
}

function fetchList(page = 1) {
    currentPage = page;
    $('#tableBody').html(`
        <tr><td colspan="9" class="px-6 py-10 text-center">
            <div class="flex justify-center items-center">
                <div class="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-600"></div>
                <span class="ml-2 text-gray-500">Đang tải...</span>
            </div>
        </td></tr>
    `);

    $.ajax({
        url: ROUTES.list,
        type: 'GET',
        data: {
            page: page,
            per_page: 10,
            keyword: $('#filter-keyword').val(),
            type: $('#filter-type').val(),
            status: $('#filter-status').val(),
            assigned_to: $('#filter-assigned').val(),
        },
        success: function(res) {
            if (!res.success) {
                $('#tableBody').html('<tr><td colspan="9" class="px-6 py-4 text-center text-red-500">Không tải được dữ liệu</td></tr>');
                return;
            }
            renderTable(res.data.data || []);
            renderPagination(res.data);
        },
        error: function() {
            $('#tableBody').html('<tr><td colspan="9" class="px-6 py-4 text-center text-red-500">Lỗi tải dữ liệu</td></tr>');
        }
    });
}

function renderTable(rows) {
    if (!rows.length) {
        $('#tableBody').html('<tr><td colspan="9" class="px-6 py-8 text-center text-gray-500">Không có bản ghi nào</td></tr>');
        return;
    }

    let html = '';
    rows.forEach(item => {
        const images = item.images || [];
        const thumb = images.slice(0, 3).map(img =>
            `<img src="${escapeHtml(img.file_url)}" class="w-8 h-8 object-cover rounded border cursor-pointer" onclick="openLightbox('${escapeHtml(img.file_url)}')">`
        ).join('');
        const more = images.length > 3 ? `<span class="text-xs text-gray-400">+${images.length - 3}</span>` : '';
        const title = item.title ? `<div class="font-medium text-gray-900">${escapeHtml(item.title)}</div>` : '';
        const reqPreview = escapeHtml((item.requirement || item.content || '').substring(0, 80))
            + ((item.requirement || item.content || '').length > 80 ? '...' : '');

        html += `
            <tr class="hover:bg-gray-50">
                <td class="px-4 py-3 text-sm text-gray-500">${item.id}</td>
                <td class="px-4 py-3">${typeBadge(item.type)}</td>
                <td class="px-4 py-3 text-sm max-w-xs">
                    ${title}
                    <div class="text-gray-500 truncate" title="${escapeHtml(item.requirement || '')}">${reqPreview || '-'}</div>
                </td>
                <td class="px-4 py-3 text-center">
                    <div class="inline-flex items-center gap-1">${thumb || '<span class="text-gray-300 text-xs">—</span>'}${more}</div>
                </td>
                <td class="px-4 py-3">${statusSelectHtml(item.id, item.status)}</td>
                <td class="px-4 py-3">${assignSelectHtml(item.id, item.assigned_to)}</td>
                <td class="px-4 py-3 text-sm text-gray-600">${escapeHtml(item.creator?.name || '-')}</td>
                <td class="px-4 py-3 text-sm text-gray-500 whitespace-nowrap">${formatDate(item.created_at)}</td>
                <td class="px-4 py-3 text-center whitespace-nowrap space-x-1">
                    <button class="text-slate-700 hover:bg-slate-100 bg-slate-50 px-2.5 py-1 rounded text-sm btn-detail" data-id="${item.id}">Chi tiết</button>
                    <button class="text-blue-600 hover:bg-blue-100 bg-blue-50 px-2.5 py-1 rounded text-sm btn-edit" data-id="${item.id}">Sửa</button>
                    <button class="text-red-600 hover:bg-red-100 bg-red-50 px-2.5 py-1 rounded text-sm btn-delete" data-id="${item.id}">Xóa</button>
                </td>
            </tr>
        `;
    });
    $('#tableBody').html(html);
}

function renderPagination(response) {
    const from = response.from || 0;
    const to = response.to || 0;
    $('#paginationInfo').html(`Hiển thị <span class="font-medium text-gray-900">${from}</span>–<span class="font-medium text-gray-900">${to}</span> / <span class="font-medium text-gray-900">${response.total}</span>`);

    const lastPage = response.last_page;
    const page = response.current_page;
    if (lastPage <= 1) {
        $('#paginationLinks').html('');
        return;
    }

    let html = '';
    html += page > 1
        ? `<button class="page-link px-3 py-1 rounded border text-sm bg-white hover:bg-gray-50" data-page="${page - 1}">«</button>`
        : `<button disabled class="px-3 py-1 rounded border text-sm text-gray-300 cursor-not-allowed">«</button>`;

    for (let i = 1; i <= lastPage; i++) {
        if (i === 1 || i === lastPage || (i >= page - 2 && i <= page + 2)) {
            const active = i === page ? 'bg-slate-900 text-white border-slate-900' : 'bg-white hover:bg-gray-50';
            html += `<button class="page-link px-3 py-1 rounded border text-sm ${active}" data-page="${i}">${i}</button>`;
        } else if (i === page - 3 || i === page + 3) {
            html += `<span class="px-2 text-gray-400">...</span>`;
        }
    }

    html += page < lastPage
        ? `<button class="page-link px-3 py-1 rounded border text-sm bg-white hover:bg-gray-50" data-page="${page + 1}">»</button>`
        : `<button disabled class="px-3 py-1 rounded border text-sm text-gray-300 cursor-not-allowed">»</button>`;

    $('#paginationLinks').html(html);
}

function openFormModal(isEdit = false) {
    $('#modalFormTitle').text(isEdit ? 'Cập nhật yêu cầu' : 'Tạo yêu cầu');
    $('#modalForm').removeClass('hidden').addClass('flex');
}

function closeFormModal() {
    $('#modalForm').addClass('hidden').removeClass('flex');
    $('#formTask')[0].reset();
    $('#form_id').val('');
    $('#newImagePreview').empty();
    $('#existingImages').empty();
    $('#existingImagesWrap').addClass('hidden');
    removeImageIds = [];
}

function openDetailModal(task) {
    currentDetailId = task.id;
    const imagesHtml = (task.images || []).map(img =>
        `<img src="${escapeHtml(img.file_url)}" class="w-20 h-20 object-cover rounded-lg border cursor-pointer" onclick="openLightbox('${escapeHtml(img.file_url)}')">`
    ).join('') || '<span class="text-gray-400">Không có ảnh</span>';

    const assigneeLabel = task.assigned_to
        ? (ASSIGNEE_LABELS[task.assigned_to] || task.assigned_to)
        : 'Chưa assign';

    $('#detailContent').html(`
        <div class="flex flex-wrap gap-2 items-center">
            ${typeBadge(task.type)}
            ${statusBadge(task.status)}
            <span class="inline-flex px-2.5 py-0.5 rounded-full text-xs font-medium bg-violet-100 text-violet-800">Assign: ${escapeHtml(assigneeLabel)}</span>
            <span class="text-gray-400">#${task.id}</span>
        </div>
        <div><span class="text-gray-500">Tiêu đề:</span> <span class="font-medium">${escapeHtml(task.title || '—')}</span></div>
        <div>
            <div class="text-gray-500 mb-1">Mô tả hiện trạng:</div>
            <div class="bg-gray-50 rounded-lg p-3 whitespace-pre-wrap border">${escapeHtml(task.current_state || '—')}</div>
        </div>
        <div>
            <div class="text-gray-500 mb-1">Yêu cầu làm gì:</div>
            <div class="bg-blue-50 rounded-lg p-3 whitespace-pre-wrap border border-blue-100">${escapeHtml(task.requirement || '—')}</div>
        </div>
        ${task.content ? `<div>
            <div class="text-gray-500 mb-1">Ghi chú thêm:</div>
            <div class="bg-gray-50 rounded-lg p-3 whitespace-pre-wrap border">${escapeHtml(task.content)}</div>
        </div>` : ''}
        <div>
            <div class="text-gray-500 mb-1">Ảnh:</div>
            <div class="flex flex-wrap gap-2">${imagesHtml}</div>
        </div>
        <div class="grid grid-cols-2 gap-2 text-gray-600">
            <div>Người tạo: <strong>${escapeHtml(task.creator?.name || '-')}</strong></div>
            <div>Cập nhật bởi: <strong>${escapeHtml(task.updater?.name || '-')}</strong></div>
            <div>Tạo lúc: ${formatDate(task.created_at)}</div>
            <div>Sửa lúc: ${formatDate(task.updated_at)}</div>
        </div>
        ${task.status_note ? `<div><span class="text-gray-500">Ghi chú trạng thái:</span> <div class="mt-1 bg-amber-50 border border-amber-100 rounded p-2">${escapeHtml(task.status_note)}</div></div>` : ''}
    `);

    const nextStatuses = TRANSITIONS[task.status] || [];
    let actionsHtml = '';
    if (!nextStatuses.length) {
        actionsHtml = '<span class="text-sm text-gray-400">Task đã đóng — không đổi trạng thái được</span>';
        $('#statusNoteWrap').addClass('hidden');
    } else {
        nextStatuses.forEach(s => {
            const colors = {
                done: 'bg-amber-600 hover:bg-amber-700',
                ok: 'bg-green-600 hover:bg-green-700',
                error: 'bg-red-600 hover:bg-red-700',
                not_error: 'bg-slate-600 hover:bg-slate-700',
                closed: 'bg-gray-700 hover:bg-gray-800',
            };
            actionsHtml += `<button type="button" class="btn-change-status text-white px-4 py-2 rounded-lg text-sm font-medium ${colors[s] || 'bg-slate-700'}" data-status="${s}">Đánh dấu: ${STATUS_LABELS[s]}</button>`;
        });
        if (nextStatuses.includes('error') || nextStatuses.includes('not_error')) {
            $('#statusNoteWrap').removeClass('hidden');
        } else {
            $('#statusNoteWrap').addClass('hidden');
        }
    }
    $('#status_note').val('');
    $('#statusActions').html(actionsHtml);
    $('#modalDetail').removeClass('hidden').addClass('flex');
}

function closeDetailModal() {
    $('#modalDetail').addClass('hidden').removeClass('flex');
    currentDetailId = null;
}

$(document).ready(function() {
    fetchList(1);

    $('#btn-filter').on('click', () => fetchList(1));
    $('#btn-reset-filter').on('click', function() {
        $('#filter-keyword').val('');
        $('#filter-type').val('');
        $('#filter-status').val('');
        $('#filter-assigned').val('');
        fetchList(1);
    });
    $('#filter-keyword').on('keypress', function(e) {
        if (e.which === 13) fetchList(1);
    });

    $(document).on('click', '.page-link', function() {
        fetchList($(this).data('page'));
    });

    $('#btn-add').on('click', function() {
        closeFormModal();
        openFormModal(false);
    });
    $('.btn-close-form').on('click', closeFormModal);
    $('.btn-close-detail').on('click', closeDetailModal);

    $('#form_images').on('change', function() {
        const files = this.files;
        let html = '';
        for (let i = 0; i < files.length; i++) {
            const url = URL.createObjectURL(files[i]);
            html += `<img src="${url}" class="w-16 h-16 object-cover rounded border">`;
        }
        $('#newImagePreview').html(html);
    });

    $(document).on('click', '.btn-status-toggle', function(e) {
        e.preventDefault();
        e.stopPropagation();
        const $menu = $(this).closest('.status-menu');
        const id = String($menu.attr('data-id') || '');
        const current = String($menu.attr('data-current') || '');
        const alreadyOpen = $('#statusMenuFloating').attr('data-task-id') === id;

        closeAllStatusMenus();
        if (alreadyOpen) return;

        openStatusMenu(this, id, current);
        $('#statusMenuFloating').attr('data-task-id', id);
    });

    $(document).on('click', function(e) {
        if ($(e.target).closest('#statusMenuFloating, .btn-status-toggle').length) {
            return;
        }
        closeAllStatusMenus();
    });

    $(window).on('resize', closeAllStatusMenus);
    document.addEventListener('scroll', closeAllStatusMenus, true);

    $(document).on('click', '.btn-status-option', function(e) {
        e.preventDefault();
        e.stopPropagation();
        const $btn = $(this);
        const id = $btn.attr('data-id');
        const current = String($btn.attr('data-current') || '');
        const status = String($btn.attr('data-status') || '');
        closeAllStatusMenus();

        if (!status || status === current) {
            return;
        }

        const doUpdate = (statusNote) => {
            $.ajax({
                url: ROUTES.updateStatus.replace(':id', id),
                type: 'POST',
                data: { _token: CSRF, status: status, status_note: statusNote || '' },
                success: function(res) {
                    if (!res.success) {
                        Swal.fire({ icon: 'error', title: 'Thất bại', text: res.message });
                        fetchList(currentPage);
                        return;
                    }
                    Swal.fire({ icon: 'success', title: res.message, timer: 1200, showConfirmButton: false });
                    fetchList(currentPage);
                },
                error: function(err) {
                    Swal.fire({ icon: 'error', title: 'Thất bại', text: err.responseJSON?.message || 'Không thể đổi trạng thái' });
                    fetchList(currentPage);
                }
            });
        };

        if (status === 'error' || status === 'not_error') {
            const isNotError = status === 'not_error';
            Swal.fire({
                title: isNotError ? 'Không phải lỗi' : 'Đánh dấu lỗi',
                input: 'textarea',
                inputLabel: isNotError ? 'Giải thích (bắt buộc)' : 'Ghi chú (bắt buộc)',
                inputPlaceholder: isNotError ? 'Giải thích vì sao không phải lỗi...' : 'Mô tả lỗi...',
                showCancelButton: true,
                confirmButtonText: 'Xác nhận',
                cancelButtonText: 'Hủy',
                inputValidator: (value) => {
                    if (!value || !value.trim()) {
                        return isNotError ? 'Vui lòng nhập giải thích' : 'Vui lòng nhập ghi chú';
                    }
                }
            }).then((result) => {
                if (result.isConfirmed) {
                    doUpdate(result.value);
                }
            });
            return;
        }

        Swal.fire({
            title: `Chuyển sang "${STATUS_LABELS[status] || status}"?`,
            icon: 'question',
            showCancelButton: true,
            confirmButtonText: 'Đồng ý',
            cancelButtonText: 'Hủy',
        }).then((result) => {
            if (result.isConfirmed) {
                doUpdate('');
            }
        });
    });

    $(document).on('change', '.assign-select', function() {
        const id = $(this).data('id');
        const assignedTo = $(this).val();
        const $select = $(this);
        $select.prop('disabled', true);

        $.ajax({
            url: ROUTES.assign.replace(':id', id),
            type: 'POST',
            data: { _token: CSRF, assigned_to: assignedTo || null },
            success: function(res) {
                if (!res.success) {
                    Swal.fire({ icon: 'error', title: 'Thất bại', text: res.message });
                    fetchList(currentPage);
                    return;
                }
                Swal.fire({ icon: 'success', title: res.message, timer: 1200, showConfirmButton: false });
            },
            error: function(err) {
                Swal.fire({ icon: 'error', title: 'Thất bại', text: err.responseJSON?.message || 'Không thể assign' });
                fetchList(currentPage);
            },
            complete: function() {
                $select.prop('disabled', false);
            }
        });
    });

    $(document).on('click', '.btn-edit', function() {
        const id = $(this).data('id');
        $.get(ROUTES.show.replace(':id', id), function(res) {
            if (!res.success) {
                Swal.fire({ icon: 'error', title: 'Lỗi', text: res.message || 'Không lấy được dữ liệu' });
                return;
            }
            const t = res.data;
            removeImageIds = [];
            $('#form_id').val(t.id);
            $('#form_type').val(t.type);
            $('#form_title').val(t.title || '');
            $('#form_assigned_to').val(t.assigned_to || '');
            $('#form_current_state').val(t.current_state || '');
            $('#form_requirement').val(t.requirement || '');
            $('#form_content').val(t.content || '');
            $('#form_images').val('');
            $('#newImagePreview').empty();

            if (t.images && t.images.length) {
                $('#existingImagesWrap').removeClass('hidden');
                let html = '';
                t.images.forEach(img => {
                    html += `
                        <div class="relative group" data-image-id="${img.id}">
                            <img src="${escapeHtml(img.file_url)}" class="w-16 h-16 object-cover rounded border cursor-pointer" onclick="openLightbox('${escapeHtml(img.file_url)}')">
                            <button type="button" class="absolute -top-1 -right-1 bg-red-500 text-white rounded-full w-5 h-5 text-xs leading-5 btn-remove-existing-image" data-id="${img.id}">×</button>
                        </div>
                    `;
                });
                $('#existingImages').html(html);
            } else {
                $('#existingImagesWrap').addClass('hidden');
                $('#existingImages').empty();
            }
            openFormModal(true);
        }).fail(function(err) {
            Swal.fire({ icon: 'error', title: 'Lỗi', text: err.responseJSON?.message || 'Không lấy được dữ liệu' });
        });
    });

    $(document).on('click', '.btn-remove-existing-image', function(e) {
        e.preventDefault();
        e.stopPropagation();
        const id = $(this).data('id');
        removeImageIds.push(id);
        $(this).closest('[data-image-id]').remove();
    });

    $(document).on('click', '.btn-detail', function() {
        const id = $(this).data('id');
        $.get(ROUTES.show.replace(':id', id), function(res) {
            if (!res.success) {
                Swal.fire({ icon: 'error', title: 'Lỗi', text: res.message });
                return;
            }
            openDetailModal(res.data);
        });
    });

    $(document).on('click', '.btn-change-status', function() {
        const status = $(this).data('status');
        const noteFromInput = ($('#status_note').val() || '').trim();

        const doUpdate = (statusNote) => {
            $.ajax({
                url: ROUTES.updateStatus.replace(':id', currentDetailId),
                type: 'POST',
                data: { _token: CSRF, status: status, status_note: statusNote || '' },
                success: function(res) {
                    if (!res.success) {
                        Swal.fire({ icon: 'error', title: 'Thất bại', text: res.message });
                        return;
                    }
                    Swal.fire({ icon: 'success', title: 'Thành công', text: res.message, timer: 1500, showConfirmButton: false });
                    openDetailModal(res.data);
                    fetchList(currentPage);
                },
                error: function(err) {
                    Swal.fire({ icon: 'error', title: 'Thất bại', text: err.responseJSON?.message || 'Có lỗi xảy ra' });
                }
            });
        };

        if (status === 'error' || status === 'not_error') {
            const isNotError = status === 'not_error';
            if (noteFromInput) {
                doUpdate(noteFromInput);
                return;
            }
            Swal.fire({
                title: isNotError ? 'Không phải lỗi' : 'Đánh dấu lỗi',
                input: 'textarea',
                inputLabel: isNotError ? 'Giải thích (bắt buộc)' : 'Ghi chú (bắt buộc)',
                inputPlaceholder: isNotError ? 'Giải thích vì sao không phải lỗi...' : 'Mô tả lỗi...',
                showCancelButton: true,
                confirmButtonText: 'Xác nhận',
                cancelButtonText: 'Hủy',
                inputValidator: (value) => {
                    if (!value || !value.trim()) {
                        return isNotError ? 'Vui lòng nhập giải thích' : 'Vui lòng nhập ghi chú';
                    }
                }
            }).then((result) => {
                if (result.isConfirmed) {
                    doUpdate(result.value);
                }
            });
            return;
        }

        doUpdate(noteFromInput);
    });

    $('#formTask').on('submit', function(e) {
        e.preventDefault();
        const id = $('#form_id').val();
        const isEdit = !!id;
        const formData = new FormData(this);
        formData.delete('images[]');

        const files = $('#form_images')[0].files;
        for (let i = 0; i < files.length; i++) {
            formData.append('images[]', files[i]);
        }

        if (isEdit) {
            formData.append('remove_image_ids', JSON.stringify(removeImageIds));
        }

        const $btn = $('#btn-submit-form');
        $btn.prop('disabled', true).text('Đang lưu...');

        $.ajax({
            url: isEdit ? ROUTES.update.replace(':id', id) : ROUTES.store,
            type: 'POST',
            data: formData,
            processData: false,
            contentType: false,
            success: function(res) {
                if (!res.success) {
                    Swal.fire({ icon: 'error', title: 'Thất bại', text: res.message });
                    return;
                }
                closeFormModal();
                Swal.fire({ icon: 'success', title: 'Thành công', text: res.message, timer: 1500, showConfirmButton: false });
                fetchList(isEdit ? currentPage : 1);
            },
            error: function(err) {
                let msg = err.responseJSON?.message || 'Có lỗi xảy ra';
                if (err.responseJSON?.errors) {
                    msg = Object.values(err.responseJSON.errors).flat().join('\n');
                }
                Swal.fire({ icon: 'error', title: 'Thất bại', text: msg });
            },
            complete: function() {
                $btn.prop('disabled', false).text('Lưu');
            }
        });
    });

    $(document).on('click', '.btn-delete', function() {
        const id = $(this).data('id');
        Swal.fire({
            title: 'Xóa yêu cầu này?',
            text: 'Hành động này không thể hoàn tác!',
            icon: 'warning',
            showCancelButton: true,
            confirmButtonColor: '#dc2626',
            cancelButtonText: 'Hủy',
            confirmButtonText: 'Xóa',
        }).then((result) => {
            if (!result.isConfirmed) return;
            $.ajax({
                url: ROUTES.destroy.replace(':id', id),
                type: 'POST',
                data: { _token: CSRF },
                success: function(res) {
                    Swal.fire({ icon: 'success', title: 'Đã xóa!', timer: 1500, showConfirmButton: false });
                    fetchList(currentPage);
                },
                error: function(err) {
                    Swal.fire({ icon: 'error', title: 'Thất bại', text: err.responseJSON?.message || 'Không thể xóa' });
                }
            });
        });
    });
});
</script>
@endsection