@extends('layouts.app')

@section('content')
<div>
    <div class="bg-gradient-to-r from-blue-600 to-indigo-700 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">Kho Câu Hỏi</h2>
            <p class="mt-2 text-blue-100 text-sm">Quản lý danh sách câu hỏi cho sản phẩm</p>
        </div>
        <button onclick="openModal()" class="flex items-center gap-2 bg-white text-indigo-600 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 câu hỏ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">ID</th>
                        <th class="px-6 py-4 text-left text-xs font-bold text-gray-500 uppercase tracking-wider">Nhóm</th>
                        <th class="px-6 py-4 text-left text-xs font-bold text-gray-500 uppercase tracking-wider w-1/3">Câu hỏi</th>
                        <th class="px-6 py-4 text-left text-xs font-bold text-gray-500 uppercase tracking-wider">Loại</th>
                        <th class="px-6 py-4 text-left text-xs font-bold text-gray-500 uppercase tracking-wider">Đáp án</th>
                        <th class="px-6 py-4 text-center text-xs font-bold text-gray-500 uppercase tracking-wider w-32">Hành động</th>
                    </tr>
                </thead>
                <tbody id="question-table-body" class="bg-white divide-y divide-gray-100">
                    <tr>
                        <td colspan="6" 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-indigo-500"></i> Đang tải dữ liệu...
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</div>

<div id="question-modal" class="fixed inset-0 z-50 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" aria-hidden="true" onclick="closeModal()"></div>

    <div class="flex items-center justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:p-0">
        <span class="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">&#8203;</span>

        <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-2xl sm:w-full border border-gray-100">
            <div class="bg-gradient-to-r from-blue-50 to-indigo-50 px-6 py-4 border-b border-gray-100 flex justify-between items-center">
                <h3 class="text-xl font-bold text-indigo-900 flex items-center gap-2" id="modal-title">
                    <i data-lucide="edit-3" class="w-5 h-5 text-indigo-600"></i>
                    Thêm câu hỏi mới
                </h3>
                <button onclick="closeModal()" class="text-gray-400 hover:text-red-500 transition-colors">
                    <i data-lucide="x" class="w-6 h-6"></i>
                </button>
            </div>
            
            <div class="bg-white px-6 pt-5 pb-6">
                <form id="question-form">
                    <input type="hidden" id="question_id" value="">
                    
                    <div class="grid grid-cols-2 gap-4 mb-5">
                        <div>
                            <label class="block text-gray-700 text-sm font-semibold mb-2" for="group_id">Nhóm câu hỏi</label>
                            <select id="group_id" 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-indigo-500 focus:border-indigo-500 transition-all shadow-sm bg-gray-50">
                                <option value="0">-- Không thuộc nhóm nào --</option>
                                @if(isset($groups))
                                    @foreach($groups as $group)
                                        <option value="{{ $group->id }}">{{ $group->name }}</option>
                                    @endforeach
                                @endif
                            </select>
                        </div>

                        <div>
                            <label class="block text-gray-700 text-sm font-semibold mb-2" for="type">Loại câu hỏi</label>
                            <select id="type" 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-indigo-500 focus:border-indigo-500 transition-all shadow-sm bg-gray-50">
                                <option value="1">Chọn 1 đáp án (Radio)</option>
                                <option value="2">Chọn nhiều đáp án (Checkbox)</option>
                            </select>
                        </div>
                    </div>

                    <div class="mb-5">
                        <label class="block text-gray-700 text-sm font-semibold mb-2" for="order">Thứ tự hiển thị (Order)</label>
                        <input type="number" id="order" value="1" min="1" 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-indigo-500 focus:border-indigo-500 transition-all shadow-sm">
                    </div>
                    
                    <div class="mb-5">
                        <label class="block text-gray-700 text-sm font-semibold mb-2" for="content">Nội dung câu hỏi</label>
                        <textarea id="content" 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-indigo-500 focus:border-indigo-500 transition-all shadow-sm" rows="3" placeholder="Nhập câu hỏi của bạn..." required></textarea>
                    </div>

                    <div class="mb-2">
                        <div class="flex justify-between items-center mb-3">
                            <label class="block text-gray-700 text-sm font-semibold">Danh sách đáp án</label>
                            <button type="button" id="btn-add-option" class="flex items-center gap-1 text-sm bg-emerald-100 text-emerald-700 hover:bg-emerald-200 hover:text-emerald-800 font-semibold py-1.5 px-3 rounded-lg transition-colors">
                                <i data-lucide="plus" class="w-4 h-4"></i> Thêm đáp án
                            </button>
                        </div>
                        <div id="options-container" class="space-y-3 max-h-64 overflow-y-auto pr-2">
                        </div>
                    </div>
                </form>
            </div>
            
            <div class="bg-gray-50 px-6 py-4 flex flex-row-reverse gap-3 rounded-b-2xl">
                <button type="button" onclick="saveQuestion()" class="inline-flex items-center gap-2 justify-center rounded-xl border border-transparent px-5 py-2.5 bg-gradient-to-r from-blue-600 to-indigo-600 text-base font-semibold text-white hover:from-blue-700 hover:to-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 shadow-md transition-all sm:text-sm">
                    <i data-lucide="save" class="w-4 h-4"></i> Lưu lại
                </button>
                <button type="button" onclick="closeModal()" class="inline-flex items-center justify-center rounded-xl border border-gray-300 px-5 py-2.5 bg-white text-base font-semibold text-gray-700 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-200 transition-all sm:text-sm shadow-sm">
                    Hủy
                </button>
            </div>
        </div>
    </div>
</div>
@endsection

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

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

        $('#btn-add-option').click(function() { addOptionRow(); });
        $(document).on('click', '.btn-remove-option', function() { $(this).closest('.option-row').remove(); });
    });

    function loadData() {
        $.ajax({
            url: '{{ route("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="6" class="px-6 py-12 text-center text-gray-400">
                        <div class="flex flex-col items-center justify-center">
                            <i data-lucide="inbox" class="w-12 h-12 mb-3 text-gray-300"></i>
                            <p class="text-base">Chưa có dữ liệu câu hỏi nào.</p>
                        </div>
                    </td></tr>`;
        } else {
            // Group data by group_id to apply rowspan
            let grouped = {};
            data.forEach(function(item) {
                let key = item.group_id || 0;
                if (!grouped[key]) grouped[key] = [];
                grouped[key].push(item);
            });

            // Sort groups: ungrouped (0) first, then by group_name
            let sortedKeys = Object.keys(grouped).sort((a, b) => {
                if (a == 0) return -1;
                if (b == 0) return 1;
                return grouped[a][0].group_name.localeCompare(grouped[b][0].group_name);
            });

            sortedKeys.forEach(function(key) {
                let items = grouped[key];
                let groupLabel = key == 0
                    ? '<span class="text-gray-400 italic">Chưa phân nhóm</span>'
                    : `<span class="font-semibold text-indigo-600">${items[0].group_name}</span>`;

                items.forEach(function(item, idx) {
                    let typeBadge = item.type == 1
                        ? '<span class="px-3 py-1 inline-flex text-xs leading-5 font-semibold rounded-full bg-blue-100 text-blue-800 border border-blue-200">Chọn 1</span>'
                        : '<span class="px-3 py-1 inline-flex text-xs leading-5 font-semibold rounded-full bg-purple-100 text-purple-800 border border-purple-200">Chọn nhiều</span>';

                    let optionsHtml = item.options.map(opt => `<div class="mb-1"><span class="font-bold text-gray-700">${opt.key}:</span> <span class="text-gray-600">${opt.value}</span></div>`).join('');

                    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>
                            ${idx === 0 ? `<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900" rowspan="${items.length}">${groupLabel}</td>` : ''}
                            <td class="px-6 py-4 text-sm text-gray-900 font-medium">
                                ${item.content}
                                <span class="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-gray-100 text-gray-700 border border-gray-200 ml-1" title="Câu hỏi thứ ${item.order}">#${item.order}</span>
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap">${typeBadge}</td>
                            <td class="px-6 py-4 text-sm">${optionsHtml}</td>
                            <td class="px-6 py-4 whitespace-nowrap text-center text-sm font-medium">
                                <div class="flex justify-center items-center gap-3">
                                    <button onclick="editQuestion(${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">
                                        <i data-lucide="edit" class="w-4 h-4"></i>
                                    </button>
                                    <button onclick="deleteQuestion(${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>
                    `;
                });
            });
        }
        $('#question-table-body').html(html);
        lucide.createIcons();
    }

    function addOptionRow(key = '', value = '') {
        let rowHtml = `
            <div class="flex items-center gap-3 option-row bg-gray-50 p-2 rounded-xl border border-gray-200">
                <input type="text" placeholder="Key (VD: A)" value="${key}" class="opt-key appearance-none border border-gray-300 rounded-lg w-1/4 py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:ring-2 focus:ring-indigo-500">
                <input type="text" placeholder="Nội dung đáp án" value="${value}" class="opt-text appearance-none border border-gray-300 rounded-lg w-3/4 py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:ring-2 focus:ring-indigo-500">
                <button type="button" class="btn-remove-option text-red-400 hover:text-red-600 hover:bg-red-50 p-2 rounded-lg transition-colors" title="Xóa đáp án">
                    <i data-lucide="minus-circle" class="w-5 h-5"></i>
                </button>
            </div>
        `;
        $('#options-container').append(rowHtml);
        lucide.createIcons();
    }

    function openModal() {
        $('#modal-title').html('<i data-lucide="plus-circle" class="w-5 h-5 text-indigo-600"></i> Thêm câu hỏi mới');
        $('#question_id').val('');
        $('#content').val('');
        $('#group_id').val('0');
        $('#type').val('1');
        
        // Gọi hàm tự động lấy order cho nhóm 0
        fetchNextOrder(0);
        
        $('#options-container').empty();
        addOptionRow('A', '');
        addOptionRow('B', '');
        
        $('#question-modal').removeClass('hidden');
        lucide.createIcons();
    }

    function closeModal() {
        $('#question-modal').addClass('hidden');
    }

    // Lắng nghe sự kiện thay đổi Nhóm
    $('#group_id').change(function() {
        let groupId = $(this).val();
        fetchNextOrder(groupId);
    });

    function fetchNextOrder(groupId) {
        // Đổi màu nền nhẹ để báo hiệu đang tính toán
        $('#order').addClass('bg-gray-100 animate-pulse'); 
        
        $.ajax({
            url: '{{ route("questions.nextOrder") }}',
            type: 'GET',
            data: { group_id: groupId },
            success: function(res) {
                if(res.status === 'success') {
                    $('#order').val(res.next_order).removeClass('bg-gray-100 animate-pulse');
                }
            }
        });
    }

    function editQuestion(id) {
        Swal.fire({
            title: 'Đang tải...',
            allowOutsideClick: false,
            didOpen: () => { Swal.showLoading(); }
        });

        $.ajax({
            url: `{{ route("questions.show", ['id' => 'id']) }}`.replace('id', id),
            type: 'GET',
            success: function(response) {
                Swal.close();
                if(response.status === 'success') {
                    let q = response.data;
                    
                    $('#modal-title').html(`<i data-lucide="edit-3" class="w-5 h-5 text-indigo-600"></i> Sửa câu hỏi #${q.id}`);
                    $('#question_id').val(q.id);
                    $('#content').val(q.content);
                    $('#group_id').val(q.group_id || 0);
                    $('#order').val(q.order || 1);
                    $('#type').val(q.type);
                    
                    $('#options-container').empty();
                    q.options.forEach(function(opt) {
                        addOptionRow(opt.key, opt.value);
                    });

                    $('#question-modal').removeClass('hidden');
                    lucide.createIcons();
                }
            },
            error: function() {
                Swal.fire('Lỗi!', 'Không thể lấy thông tin câu hỏi.', 'error');
            }
        });
    }

    function saveQuestion() {
        let id = $('#question_id').val();
        let url = id ? `{{ route("questions.update", ['id' => 'id']) }}`.replace('id', id) : '{{ route("questions.store") }}';

        let options = [];
        $('.option-row').each(function() {
            let key = $(this).find('.opt-key').val().trim();
            let val = $(this).find('.opt-text').val().trim();
            if(key !== '' && val !== '') {
                options.push({ key: key, value: val });
            }
        });

        let content = $('#content').val().trim();
        if(!content) { 
            Swal.fire('Thiếu thông tin!', 'Vui lòng nhập nội dung câu hỏi.', 'warning');
            return; 
        }
        if(options.length === 0) { 
            Swal.fire('Thiếu thông tin!', 'Vui lòng nhập ít nhất 1 đáp án.', 'warning');
            return; 
        }

        let payload = {
            content: content,
            group_id: $('#group_id').val(),
            order: $('#order').val(),
            type: $('#type').val(),
            options: options
        };

        Swal.fire({
            title: 'Đang lưu...',
            allowOutsideClick: false,
            didOpen: () => { Swal.showLoading(); }
        });

        $.ajax({
            url: url,
            type: 'POST',
            data: JSON.stringify(payload),
            contentType: 'application/json',
            success: function(response) {
                if(response.status === 'success') {
                    closeModal();
                    Swal.fire({
                        icon: 'success',
                        title: 'Thành công!',
                        text: response.message,
                        timer: 1500,
                        showConfirmButton: false
                    });
                    loadData();
                }
            },
            error: function(xhr) {
                if(xhr.status === 422) {
                    let errors = xhr.responseJSON.errors;
                    let errorMsg = Object.values(errors).map(err => err[0]).join('<br>');
                    Swal.fire({ icon: 'error', title: 'Dữ liệu không hợp lệ', html: errorMsg });
                } else {
                    Swal.fire('Lỗi!', 'Đã xảy ra sự cố hệ thống.', 'error');
                }
            }
        });
    }

    function deleteQuestion(id) {
        Swal.fire({
            title: 'Bạn có chắc chắn?',
            text: "Hành động này sẽ đưa câu hỏi vào thùng rác!",
            icon: 'warning',
            showCancelButton: true,
            confirmButtonColor: '#ef4444',
            cancelButtonColor: '#6b7280',
            confirmButtonText: '<i data-lucide="trash-2" class="w-4 h-4 inline-block mr-1"></i> Vâng, xóa nó!',
            cancelButtonText: 'Hủy bỏ'
        }).then((result) => {
            if (result.isConfirmed) {
                $.ajax({
                    url: `{{ route("questions.destroy", ['id' => 'id']) }}`.replace('id', id),
                    type: 'POST',
                    success: function(response) {
                        if(response.status === 'success') {
                            Swal.fire({
                                icon: 'success',
                                title: 'Đã xóa!',
                                text: 'Câu hỏi đã được xóa thành công.',
                                timer: 1500,
                                showConfirmButton: false
                            });
                            loadData();
                        }
                    },
                    error: function() {
                        Swal.fire('Lỗi!', 'Không thể xóa câu hỏi này.', 'error');
                    }
                });
            }
        });
        setTimeout(() => lucide.createIcons(), 50);
    }
</script>
@endsection