@extends('layouts.app')

@section('content')
<div>
    <div class="bg-gradient-to-r from-emerald-400 to-teal-500 rounded-2xl shadow-lg p-6 mb-8 flex justify-between items-center text-white">
        <div>
            <h2 class="text-3xl font-extrabold tracking-tight text-white">Nhóm Câu Hỏi</h2>
            <p class="mt-2 text-emerald-100 text-sm">Quản lý các nhóm câu hỏi</p>
        </div>
        <button onclick="openGroupModal()" class="flex items-center gap-2 bg-white text-teal-700 hover:bg-gray-50 font-bold py-2.5 px-5 rounded-xl shadow-md transition-all duration-200 transform hover:scale-105">
            <i data-lucide="plus-circle" class="w-5 h-5"></i>
            Thêm nhóm mới
        </button>
    </div>

    <div class="bg-white shadow-xl rounded-2xl overflow-hidden border border-gray-100">
        <div class="overflow-x-auto">
            <table class="min-w-full divide-y divide-gray-200">
                <thead class="bg-gray-50">
                    <tr>
                        <th class="px-6 py-4 text-left text-xs font-bold text-gray-500 uppercase tracking-wider w-20">ID</th>
                        <th class="px-6 py-4 text-left text-xs font-bold text-gray-500 uppercase tracking-wider">Tên Nhóm</th>
                        <th class="px-6 py-4 text-center text-xs font-bold text-gray-500 uppercase tracking-wider w-48">Hành động</th>
                    </tr>
                </thead>
                <tbody id="group-table-body" class="bg-white divide-y divide-gray-100">
                    <tr>
                        <td colspan="3" class="px-6 py-8 text-center text-gray-500 flex justify-center items-center gap-2 w-full">
                            <i data-lucide="loader-2" class="w-5 h-5 animate-spin text-teal-500"></i> Đang tải dữ liệu...
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</div>

<div id="group-modal" class="fixed inset-0 z-[60] hidden" aria-labelledby="modal-title" role="dialog" aria-modal="true">
    <div class="fixed inset-0 bg-gray-900 bg-opacity-50 backdrop-blur-sm transition-opacity" onclick="closeGroupModal()"></div>
    <div class="flex items-center justify-center min-h-screen p-4 text-center sm:p-0">
        <div class="inline-block align-bottom bg-white rounded-2xl text-left overflow-hidden shadow-2xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full">
            <div class="bg-gradient-to-r from-emerald-50 to-teal-50 px-6 py-4 border-b border-gray-100 flex justify-between items-center">
                <h3 class="text-xl font-bold text-teal-900 flex items-center gap-2" id="group-modal-title">
                    <i data-lucide="folder-plus" class="w-5 h-5 text-teal-600"></i> Thêm nhóm mới
                </h3>
                <button onclick="closeGroupModal()" class="text-gray-400 hover:text-red-500 transition-colors">
                    <i data-lucide="x" class="w-6 h-6"></i>
                </button>
            </div>
            <div class="px-6 pt-5 pb-6">
                <input type="hidden" id="group_id" value="">
                <div class="mb-4">
                    <label class="block text-gray-700 text-sm font-semibold mb-2" for="group_name">Tên nhóm</label>
                    <input type="text" id="group_name" class="appearance-none border border-gray-300 rounded-xl w-full py-3 px-4 text-gray-700 leading-tight focus:outline-none focus:ring-2 focus:ring-teal-500 focus:border-teal-500 transition-all shadow-sm" placeholder="Nhập tên nhóm...">
                </div>
            </div>
            <div class="bg-gray-50 px-6 py-4 flex flex-row-reverse gap-3">
                <button type="button" onclick="saveGroup()" class="inline-flex items-center gap-2 justify-center rounded-xl bg-gradient-to-r from-emerald-600 to-teal-600 px-5 py-2.5 text-sm font-semibold text-white shadow-md hover:from-emerald-700 hover:to-teal-700 transition-all">
                    <i data-lucide="save" class="w-4 h-4"></i> Lưu lại
                </button>
                <button type="button" onclick="closeGroupModal()" class="inline-flex items-center justify-center rounded-xl border border-gray-300 bg-white px-5 py-2.5 text-sm font-semibold text-gray-700 shadow-sm hover:bg-gray-50 transition-all">
                    Hủy
                </button>
            </div>
        </div>
    </div>
</div>

<div id="logic-modal" class="fixed inset-0 z-[60] hidden" aria-labelledby="modal-title" role="dialog" aria-modal="true">
    <div class="fixed inset-0 bg-gray-900 bg-opacity-50 backdrop-blur-sm transition-opacity" onclick="closeLogicModal()"></div>
    <div class="flex items-center justify-center min-h-screen p-4 text-center sm:p-0">
        <div class="inline-block align-bottom bg-gray-50 rounded-2xl text-left overflow-hidden shadow-2xl transform transition-all sm:my-8 sm:align-middle sm:max-w-4xl sm:w-full flex flex-col" style="max-height: 90vh;">
            
            <div class="bg-gradient-to-r from-purple-600 to-indigo-700 px-6 py-4 flex justify-between items-center shadow-md z-10">
                <h3 class="text-xl font-bold text-white flex items-center gap-2" id="logic-modal-title">
                    <i data-lucide="git-merge" class="w-5 h-5 text-purple-200"></i> Cấu hình Logic
                </h3>
                <button onclick="closeLogicModal()" class="text-white hover:text-red-300 transition-colors">
                    <i data-lucide="x" class="w-6 h-6"></i>
                </button>
            </div>
            
            <div class="p-6 overflow-y-auto flex-1 bg-gray-50" id="logic-builder-container">
                </div>

            <div class="bg-white px-6 py-4 border-t border-gray-200 flex flex-row-reverse gap-3 z-10">
                <button type="button" onclick="saveLogic()" class="inline-flex items-center gap-2 justify-center rounded-xl bg-gradient-to-r from-purple-600 to-indigo-600 px-5 py-2.5 text-sm font-semibold text-white shadow-md hover:from-purple-700 hover:to-indigo-700 transition-all">
                    <i data-lucide="save" class="w-4 h-4"></i> Lưu Cấu Hình
                </button>
                <button type="button" onclick="closeLogicModal()" class="inline-flex items-center justify-center rounded-xl border border-gray-300 bg-white px-5 py-2.5 text-sm font-semibold text-gray-700 shadow-sm hover:bg-gray-50 transition-all">
                    Đóng
                </button>
            </div>
        </div>
    </div>
</div>

@endsection

@section('scripts')
<script>
    $.ajaxSetup({
        headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') }
    });

    let activeLogicGroupId = null;
    let globalQuestions = [];

    $(document).ready(function() {
        lucide.createIcons();
        loadData();
    });

    // ==========================================
    // PHẦN CRUD GROUP
    // ==========================================
    function loadData() {
        $.ajax({
            url: '{{ route("group-questions.data") }}',
            type: 'GET',
            success: function(response) {
                if(response.status === 'success') {
                    renderTable(response.data);
                }
            },
            error: function() {
                Swal.fire('Lỗi!', 'Không thể tải dữ liệu từ máy chủ.', 'error');
            }
        });
    }

    function renderTable(data) {
        let html = '';
        if(data.length === 0) {
            html = `<tr><td colspan="3" class="px-6 py-12 text-center text-gray-400">
                        <div class="flex flex-col items-center justify-center">
                            <i data-lucide="folder-open" class="w-12 h-12 mb-3 text-gray-300"></i>
                            <p class="text-base">Chưa có nhóm câu hỏi nào.</p>
                        </div>
                    </td></tr>`;
        } else {
            data.forEach(function(item) {
                let logicBadge = item.logic ? '<span class="ml-2 px-2 py-0.5 rounded text-[10px] font-bold bg-purple-100 text-purple-700 border border-purple-200">Đã cấu hình logic</span>' : '';
                
                html += `
                    <tr class="hover:bg-gray-50 transition-colors">
                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 font-medium">#${item.id}</td>
                        <td class="px-6 py-4 text-sm text-gray-900 font-medium">${item.name} ${logicBadge}</td>
                        <td class="px-6 py-4 whitespace-nowrap text-center text-sm font-medium">
                            <div class="flex justify-center items-center gap-2">
                                <button onclick="openLogicModal(${item.id})" class="text-purple-600 hover:text-purple-800 bg-purple-50 hover:bg-purple-100 px-3 py-2 rounded-lg transition-colors flex items-center gap-1" title="Cấu hình Logic">
                                    <i data-lucide="git-merge" class="w-4 h-4"></i> Logic
                                </button>
                                <button onclick="editGroup(${item.id})" class="text-blue-500 hover:text-blue-700 bg-blue-50 hover:bg-blue-100 p-2 rounded-lg transition-colors" title="Sửa tên">
                                    <i data-lucide="edit" class="w-4 h-4"></i>
                                </button>
                                <button onclick="deleteGroup(${item.id})" class="text-red-500 hover:text-red-700 bg-red-50 hover:bg-red-100 p-2 rounded-lg transition-colors" title="Xóa">
                                    <i data-lucide="trash-2" class="w-4 h-4"></i>
                                </button>
                            </div>
                        </td>
                    </tr>
                `;
            });
        }
        $('#group-table-body').html(html);
        lucide.createIcons();
    }

    function openGroupModal() {
        $('#group-modal-title').html('<i data-lucide="folder-plus" class="w-5 h-5 text-teal-600"></i> Thêm nhóm mới');
        $('#group_id').val('');
        $('#group_name').val('');
        $('#group-modal').removeClass('hidden');
        lucide.createIcons();
    }

    function closeGroupModal() {
        $('#group-modal').addClass('hidden');
    }

    function editGroup(id) {
        Swal.fire({ title: 'Đang tải...', didOpen: () => { Swal.showLoading(); }});
        $.ajax({
            url: `{{ route("group-questions.show", ['id' => 'id']) }}`.replace('id', id),
            type: 'GET',
            success: function(response) {
                Swal.close();
                if(response.status === 'success') {
                    $('#group-modal-title').html(`<i data-lucide="edit-3" class="w-5 h-5 text-teal-600"></i> Sửa nhóm: ${response.data.name}`);
                    $('#group_id').val(response.data.id);
                    $('#group_name').val(response.data.name);
                    $('#group-modal').removeClass('hidden');
                    lucide.createIcons();
                }
            }
        });
    }

    function saveGroup() {
        let id = $('#group_id').val();
        let url = id ? `{{ route("group-questions.update", ['id' => 'id']) }}`.replace('id', id) : '{{ route("group-questions.store") }}';
        let name = $('#group_name').val().trim();

        if(!name) { Swal.fire('Lỗi', 'Vui lòng nhập tên nhóm', 'warning'); return; }

        Swal.fire({ title: 'Đang lưu...', didOpen: () => { Swal.showLoading(); }});
        $.ajax({
            url: url,
            type: 'POST',
            data: { name: name },
            success: function(response) {
                if(response.status === 'success') {
                    closeGroupModal();
                    Swal.fire({ icon: 'success', title: 'Thành công!', text: response.message, timer: 1500, showConfirmButton: false });
                    loadData();
                }
            },
            error: function(xhr) {
                Swal.fire('Lỗi!', 'Có lỗi xảy ra, vui lòng thử lại', 'error');
            }
        });
    }

    function deleteGroup(id) {
        Swal.fire({
            title: 'Bạn có chắc chắn?', text: "Hành động này sẽ xóa nhóm!", icon: 'warning',
            showCancelButton: true, confirmButtonColor: '#ef4444', cancelButtonColor: '#6b7280',
            confirmButtonText: 'Vâng, xóa nó!'
        }).then((result) => {
            if (result.isConfirmed) {
                $.ajax({
                    url: `{{ route("group-questions.destroy", ['id' => 'id']) }}`.replace('id', id),
                    type: 'POST',
                    success: function(res) {
                        Swal.fire({ icon: 'success', title: 'Đã xóa!', timer: 1500, showConfirmButton: false });
                        loadData();
                    }
                });
            }
        });
    }


    // ==========================================
    // PHẦN LOGIC BUILDER
    // ==========================================

    function openLogicModal(id) {
        activeLogicGroupId = id;
        Swal.fire({ title: 'Đang lấy dữ liệu câu hỏi...', didOpen: () => { Swal.showLoading(); }});

        $.ajax({
            url: `{{ route("group-questions.getLogic", ['id' => 'id']) }}`.replace('id', id),
            type: 'GET',
            success: function(response) {
                Swal.close();
                if(response.status === 'success') {
                    let data = response.data;
                    $('#logic-modal-title').html(`<i data-lucide="git-merge" class="w-5 h-5 text-purple-200"></i> Logic - Nhóm: ${data.group_name}`);
                    globalQuestions = data.questions;
                    buildLogicUI(data.questions, data.logic || []);
                    $('#logic-modal').removeClass('hidden');
                    lucide.createIcons();
                }
            },
            error: function() {
                Swal.fire('Lỗi', 'Không thể lấy dữ liệu logic', 'error');
            }
        });
    }

    function closeLogicModal() {
        $('#logic-modal').addClass('hidden');
        activeLogicGroupId = null;
        globalQuestions = [];
    }

    function buildLogicUI(questions, existingLogic) {
        let container = $('#logic-builder-container');
        container.empty();

        if (questions.length === 0) {
            container.html(`
                <div class="text-center py-10 text-gray-500">
                    <i data-lucide="alert-circle" class="w-12 h-12 mx-auto mb-3 text-gray-400"></i>
                    Nhóm này chưa có câu hỏi nào. Vui lòng thêm câu hỏi trước khi cấu hình Logic.
                </div>
            `);
            return;
        }

        let html = '<div class="space-y-6">';

        questions.forEach((q, index) => {
            html += `
            <div class="bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden">
                <div class="bg-indigo-50 px-4 py-3 border-b border-gray-200 flex items-start gap-3">
                    <span class="bg-indigo-600 text-white font-bold rounded-full w-8 h-8 flex items-center justify-center shrink-0 mt-0.5">${q.order}</span>
                    <div>
                        <h4 class="font-bold text-gray-800 text-base">${q.content}</h4>
                        <p class="text-xs text-gray-500 mt-1">ID Câu hỏi: ${q.id} | Dạng: ${q.type == 1 ? '<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-indigo-100 text-indigo-800 border border-indigo-200">Chọn 1</span>' : '<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800 border border-green-200">Chọn nhiều</span>'}</p>
                    </div>
                </div>
                <div class="p-4 space-y-3">
            `;

            // Vẽ từng đáp án của câu hỏi này
            if (q.options && q.options.length > 0) {
                // Trường hợp 1: Câu hỏi chọn 1 đáp án
                if(q.type == 1){
                    q.options.forEach(opt => {
                        // Tìm xem đáp án này có đang được config nhảy đi đâu trong existingLogic không
                        let savedRule = existingLogic.find(rule => rule.question_id == q.id && rule.question_key == opt.key);
                        let selectedNextId = savedRule ? savedRule.question_next_id : q.next_id;

                        html += `
                        <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-3 p-3 bg-gray-50 rounded-lg border border-gray-100">
                            <div class="flex-1">
                                <span class="font-bold text-gray-700 mr-2">[${opt.key}]</span> 
                                <span class="text-gray-600">${opt.value}</span>
                            </div>
                            <div class="flex items-center gap-2 shrink-0">
                                <i data-lucide="arrow-right" class="w-4 h-4 text-gray-400"></i>
                                <select class="logic-select appearance-none bg-white border border-gray-300 rounded-lg py-1.5 px-3 text-sm focus:outline-none focus:ring-2 focus:ring-indigo-500 min-w-[200px]" 
                                        data-q-id="${q.id}" data-opt-key="${opt.key}">
                                    <option value="">-- Mặc định (Tới câu tiếp) --</option>
                        `;

                        // Vẽ các option cho thẻ select (Là danh sách các câu hỏi khác)
                        questions.forEach(targetQ => {
                            if (targetQ.id !== q.id) { // Không cho nhảy vào chính nó để tránh lặp
                                let isSelected = (targetQ.id == selectedNextId) ? 'selected' : '';
                                html += `<option value="${targetQ.id}" ${isSelected}>Nhảy đến Câu ${targetQ.order} (ID: ${targetQ.id})</option>`;
                            }
                        });

                        html += `</select></div></div>`;
                    });
                }
                // Trường hợp 2: Câu hỏi chọn nhiều đáp án
                else{ // Chỉ hiển thị đáp án, rẽ nhánh chung ở cuối
                    html += `<div class="grid grid-cols-1 sm:grid-cols-2 gap-2 mb-4">`;
                    q.options.forEach(opt => {
                         html += `
                            <div class="p-2 bg-gray-50 rounded border border-gray-100 text-sm">
                                <span class="font-bold text-gray-700">[${opt.key}]</span> ${opt.value}
                            </div>
                         `;
                    });
                    html += `</div>`;

                    // Cấu hình nhảy chung cho toàn bộ câu hỏi (không phụ thuộc opt.key)
                    // Ở đây quy ước nếu logic chung thì question_key = "ALL" hoặc null/undefined tuỳ DB của bạn
                    let savedRule = existingLogic.find(rule => rule.question_id == q.id && (rule.question_key == 'ALL' || !rule.question_key));
                    let selectedNextId = savedRule ? savedRule.question_next_id : q.next_id;

                    html += `
                    <div class="flex items-center justify-between p-3 bg-blue-50 rounded-lg border border-blue-100 mt-2">
                        <span class="text-sm font-medium text-blue-800 flex items-center gap-2">
                            <i data-lucide="git-branch" class="w-4 h-4"></i> Sau khi hoàn thành câu hỏi này:
                        </span>
                        <select class="logic-select appearance-none bg-white border border-blue-300 rounded-lg py-1.5 px-3 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 min-w-[200px]" 
                                data-q-id="${q.id}" data-opt-key="ALL">
                            <option value="">-- Mặc định (Tới câu tiếp) --</option>
                    `;
                    questions.forEach(targetQ => {
                        if (targetQ.id !== q.id) {
                            let isSelected = (targetQ.id == selectedNextId) ? 'selected' : '';
                            html += `<option value="${targetQ.id}" ${isSelected}>Nhảy đến Câu ${targetQ.order}</option>`;
                        }
                    });
                    html += `</select></div>`;
                }
            } else {
                html += `<p class="text-sm text-red-500 italic">Câu hỏi này chưa có đáp án nào.</p>`;
            }

            html += `</div></div>`;
        });

        html += '</div>';
        container.html(html);
        lucide.createIcons();
    }

    function saveLogic() {
        let logicRules = [];

        // Duyệt qua tất cả các thẻ select được gán class logic-select
        $('.logic-select').each(function() {
            let explicitNextId = $(this).val();
            let currentQId = parseInt($(this).attr('data-q-id'));
            let optKey = $(this).attr('data-opt-key');
            let finalNextId = null;

            if (explicitNextId !== '') {
                // Trường hợp 1: Admin CÓ CHỌN nhảy đến một câu cụ thể
                finalNextId = parseInt(explicitNextId);
            } else {
                // Trường hợp 2: Admin ĐỂ MẶC ĐỊNH -> Tự tìm câu tiếp theo theo Order
                // Tìm vị trí (index) của câu hỏi hiện tại trong mảng globalQuestions
                let currentIndex = globalQuestions.findIndex(q => q.id === currentQId);

                // Kiểm tra xem nó có phải là câu cuối cùng trong danh sách không
                if (currentIndex !== -1 && currentIndex < globalQuestions.length - 1) {
                    // Nếu không phải câu cuối -> Lấy ID của câu liền kề sau nó
                    finalNextId = globalQuestions[currentIndex + 1].id;
                } else {
                    // Nếu là câu cuối cùng -> Bài test kết thúc
                    finalNextId = null; 
                }
            }

            // Chỉ push vào mảng nếu có câu tiếp theo (nếu finalNextId là null tức là kết thúc bài)
            if (finalNextId !== null) {
                logicRules.push({
                    question_id: currentQId,
                    question_key: optKey,
                    question_next_id: finalNextId
                });
            }
        });

        Swal.fire({ title: 'Đang lưu cấu hình...', didOpen: () => { Swal.showLoading(); }});

        $.ajax({
            url: `{{ route("group-questions.updateLogic", ['id' => 'activeLogicGroupId']) }}`.replace('activeLogicGroupId', activeLogicGroupId),
            type: 'POST',
            data: { logic_rules: logicRules },
            success: function(response) {
                if (response.status === 'success') {
                    closeLogicModal();
                    Swal.fire({ icon: 'success', title: 'Thành công!', text: response.message, timer: 1500, showConfirmButton: false });
                    loadData(); // Reload table để hiện tag "Đã cấu hình logic"
                }
            },
            error: function(xhr) {
                Swal.fire('Lỗi', 'Không thể lưu luồng logic', 'error');
            }
        });
    }
</script>
@endsection