@extends('layouts-v2.app')

@section('content')
<div class="flex-1 space-y-6">
    <!-- Header -->
    <div class="flex items-center gap-2 text-slate-500 text-sm mb-2">
        <a href="{{ route('dashboard') }}" class="hover:text-blue-600 cursor-pointer">Trang chủ</a>
        <i data-lucide="chevron-right" class="w-4 h-4"></i>
        <a href="{{ route('course.index') }}" class="hover:text-blue-600 cursor-pointer">Danh sách sản phẩm</a>
        <i data-lucide="chevron-right" class="w-4 h-4"></i>
        <span>{{ $courseData->moodle_name }}</span>
    </div>
    <div class="flex items-center gap-2 sm:gap-3 mb-4 sm:mb-6">
        <a href="{{ route('course.index') }}" class="text-slate-400 hover:text-blue-600 transition-colors flex-shrink-0">
            <i data-lucide="arrow-left" class="w-5 h-5"></i>
        </a>
        <h1 class="text-2xl sm:text-3xl font-bold text-slate-900 truncate">{{ $courseData->moodle_name }}</h1>
    </div>

    <!-- Message Notification V2 -->
    <div class="message-product hidden fixed top-4 right-2 sm:right-4 left-2 sm:left-auto max-w-md w-auto sm:w-full" style="z-index: 9999;">
        <div class="notification-v2 bg-white rounded-lg shadow-xl border-l-4 p-3 sm:p-4 flex items-start gap-2 sm:gap-3 animate-slide-in">
            <div class="notification-icon flex-shrink-0 mt-0.5">
                <i data-lucide="check-circle" class="w-6 h-6 text-green-500 notification-icon-success hidden"></i>
                <i data-lucide="x-circle" class="w-6 h-6 text-red-500 notification-icon-error hidden"></i>
            </div>
            <div class="flex-1 min-w-0">
                <div id="content_message" class="text-sm font-medium text-slate-800"></div>
            </div>
            <button type="button" class="notification-close flex-shrink-0 text-slate-400 hover:text-slate-600 transition-colors" aria-label="Close" onclick="hideNotificationV2()">
                <i data-lucide="x" class="w-5 h-5"></i>
            </button>
        </div>
    </div>

    <!-- Split Layout -->
    <div class="grid grid-cols-1 lg:grid-cols-12 gap-4 sm:gap-6 h-auto lg:h-[calc(100vh-200px)] min-h-[600px] lg:min-h-0">
        
        <!-- LEFT COLUMN: TREE VIEW -->
        @include('product_detail.left.product_detail_left_part-v2', [
            'name1' => 'Tên thư mục',
            'products' => $products ?? [],
            'courseData' => $courseData
        ])

        <!-- RIGHT COLUMN: CONTENT (Swappable Views) -->
        @include('product_detail.right.product_detail_right_part-v2')
    </div>

    <!-- Hidden Inputs -->
    <input type="hidden" id="currentUserEmail" value="{{ $currentEmail }}">
    <input type="hidden" id="courseId" value="{{ $courseData->id }}">
    <input type="hidden" id="courseMoodleId" value="{{ $courseData->moodle_id }}">
    <input type="hidden" name="tenant_connection" value="{{ session('tenant_connection') }}">
    <input type="hidden" id="hidden_quiz" name="hidden_quiz" value="">
    <input type="hidden" id="hidden_parent_selected" name="hidden_parent_selected" value="">
    <input type="hidden" id="hidden_interactive_book" name="hidden_interactive_book" value="">
    <input type="hidden" id="mode_change_interactive_book_parent" value="0">
    <input type="hidden" id="mode_change_course_section_parent" value="0">
    <input type="hidden" name="mode_save" id="id_mode_save" value="quiz">
    <input type="hidden" id="popup_hidden_ishvp" name="popup_hidden_ishvp" value="">
    <input type="hidden" id="popup_hidden_cmid" name="popup_hidden_cmid" value="">
    <input type="hidden" id="popup_hidden_quiz_id" name="popup_hidden_quiz_id" value="">
    <input type="hidden" id="page_type" value="product">
    <input type="hidden" id="h_quiz_section_add" value="">

    <!-- Confirm Modal V2 (Reusable) -->
    <div id="confirmModalV2" class="hidden fixed inset-0 z-50 overflow-y-auto" aria-labelledby="confirm-modal-title" role="dialog" aria-modal="true">
        <!-- Backdrop -->
        <div class="fixed inset-0 bg-black bg-opacity-50 transition-opacity" id="confirm-modal-backdrop"></div>
        
        <!-- Modal Container -->
        <div class="flex min-h-full items-center justify-center p-3 sm:p-4">
            <div class="relative transform overflow-hidden rounded-lg bg-white shadow-xl transition-all w-full max-w-md mx-2 sm:mx-0">
                <!-- Header -->
                <div class="flex items-center justify-between px-4 sm:px-6 py-3 sm:py-4 border-b border-slate-200">
                    <div class="flex items-center gap-2 sm:gap-3 min-w-0 flex-1">
                        <div class="w-8 h-8 sm:w-10 sm:h-10 rounded-full bg-blue-100 flex items-center justify-center flex-shrink-0">
                            <i data-lucide="help-circle" class="w-4 h-4 sm:w-5 sm:h-5 text-blue-600"></i>
                        </div>
                        <h3 class="text-base sm:text-lg font-semibold text-slate-900 truncate" id="confirm-modal-title">Xác nhận</h3>
                    </div>
                    <button type="button" class="text-slate-400 hover:text-slate-600 transition-colors flex-shrink-0" id="confirm-modal-close">
                        <i data-lucide="x" class="w-5 h-5"></i>
                    </button>
                </div>
                
                <!-- Body -->
                <div class="px-4 sm:px-6 py-4 sm:py-6">
                    <p class="text-sm text-slate-600 text-center" id="confirm-modal-message">
                        Bạn có chắc chắn muốn thực hiện hành động này?
                    </p>
                </div>
                
                <!-- Footer -->
                <div class="flex flex-col sm:flex-row items-stretch sm:items-center justify-end gap-2 sm:gap-3 px-4 sm:px-6 py-3 sm:py-4 border-t border-slate-200 bg-slate-50">
                    <button type="button" class="w-full sm:w-auto px-4 py-2 text-sm font-medium text-slate-700 bg-white border border-slate-300 rounded-lg hover:bg-slate-50 transition-colors" id="confirm-modal-cancel">
                        Hủy bỏ
                    </button>
                    <button type="button" class="w-full sm:w-auto px-4 py-2 text-sm font-medium text-white bg-blue-600 rounded-lg hover:bg-blue-700 transition-colors" id="confirm-modal-ok">
                        Xác nhận
                    </button>
                </div>
            </div>
        </div>
    </div>

    <!-- Delete Modal V2 -->
    <div id="deleteOrArchiveModalV2" class="hidden fixed inset-0 z-50 overflow-y-auto" aria-labelledby="modal-title" role="dialog" aria-modal="true">
        <!-- Backdrop -->
        <div class="fixed inset-0 bg-black bg-opacity-50 transition-opacity" id="delete-modal-backdrop"></div>
        
        <!-- Modal Container -->
        <div class="flex min-h-full items-center justify-center p-3 sm:p-4">
            <div class="relative transform overflow-hidden rounded-lg bg-white shadow-xl transition-all w-full max-w-md mx-2 sm:mx-0">
                <!-- Header -->
                <div class="flex items-center justify-between px-4 sm:px-6 py-3 sm:py-4 border-b border-slate-200">
                    <div class="flex items-center gap-2 sm:gap-3 min-w-0 flex-1">
                        <div class="w-8 h-8 sm:w-10 sm:h-10 rounded-full bg-red-100 flex items-center justify-center flex-shrink-0">
                            <i data-lucide="alert-triangle" class="w-4 h-4 sm:w-5 sm:h-5 text-red-600"></i>
                        </div>
                        <h3 class="text-base sm:text-lg font-semibold text-slate-900 truncate" id="delete-modal-title">Xóa thư mục</h3>
                    </div>
                    <button type="button" class="text-slate-400 hover:text-slate-600 transition-colors flex-shrink-0" id="delete-modal-close">
                        <i data-lucide="x" class="w-5 h-5"></i>
                    </button>
                </div>
                
                <!-- Body -->
                <div class="px-4 sm:px-6 py-4 sm:py-6">
                    <p class="text-sm text-slate-600 text-center">
                        Bạn có chắc chắn muốn xóa
                        <span class="font-semibold text-slate-900" id="modal_name_product_v2">thư mục</span>
                        này không?
                    </p>
                    <p class="text-xs text-slate-500 text-center mt-2">
                        Hành động này không thể hoàn tác.
                    </p>
                </div>
                
                <!-- Footer -->
                <div class="flex flex-col sm:flex-row items-stretch sm:items-center justify-end gap-2 sm:gap-3 px-4 sm:px-6 py-3 sm:py-4 border-t border-slate-200 bg-slate-50">
                    <button type="button" class="w-full sm:w-auto px-4 py-2 text-sm font-medium text-slate-700 bg-white border border-slate-300 rounded-lg hover:bg-slate-50 transition-colors" id="delete-modal-cancel">
                        Hủy bỏ
                    </button>
                    <button type="button" class="w-full sm:w-auto px-4 py-2 text-sm font-medium text-white bg-red-600 rounded-lg hover:bg-red-700 transition-colors delete-product-v2" data-product-id="" data-product-type="">
                        <i data-lucide="trash-2" class="w-4 h-4 inline-block mr-1"></i>
                        Xóa
                    </button>
                </div>
            </div>
        </div>
    </div>

    <!-- Quiz Question Type Modal V2 -->
    <div id="popup_question_type" class="hidden fixed inset-0 z-50 overflow-y-auto" aria-labelledby="popup-question-type-label" role="dialog" aria-modal="true">
        <!-- Backdrop -->
        <div class="fixed inset-0 bg-black bg-opacity-50 transition-opacity" id="popup-question-type-backdrop"></div>
        
        <!-- Modal Container -->
        <div class="flex min-h-full items-center justify-center p-3 sm:p-4">
            <div class="relative transform overflow-hidden rounded-lg bg-white shadow-xl transition-all w-full max-w-6xl mx-2 sm:mx-0">
                <!-- Header -->
                <div class="flex items-center justify-between px-4 sm:px-6 py-3 sm:py-4 border-b border-slate-200">
                    <div class="flex items-center gap-2 sm:gap-3 min-w-0 flex-1">
                        <div class="w-8 h-8 sm:w-10 sm:h-10 rounded-full bg-blue-100 flex items-center justify-center flex-shrink-0">
                            <i data-lucide="list" class="w-4 h-4 sm:w-5 sm:h-5 text-blue-600"></i>
                        </div>
                        <h3 class="text-base sm:text-lg font-semibold text-slate-900 truncate" id="popup-question-type-label">DANH SÁCH BỘ ĐỀ</h3>
                    </div>
                    <button type="button" class="text-slate-400 hover:text-slate-600 transition-colors flex-shrink-0" id="popup-question-type-close">
                        <i data-lucide="x" class="w-5 h-5"></i>
                    </button>
                </div>
                
                <!-- Body -->
                <div class="px-3 sm:px-6 py-4 sm:py-6 max-h-[70vh] overflow-y-auto">
                    <!-- Filters -->
                    <div class="grid grid-cols-1 sm:grid-cols-12 gap-3 sm:gap-4 mb-4">
                        <div class="col-span-12 sm:col-span-12 md:col-span-4">
                            <select class="w-full px-3 py-2 text-sm border border-slate-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 selectContestTypeSearch">
                                <option selected>Lựa chọn contest type</option>
                            </select>
                        </div>
                        <div class="col-span-12 sm:col-span-12 md:col-span-5">
                            <input type="text" class="w-full px-3 py-2 text-sm border border-slate-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 inputContestTypeSearch" placeholder="Tìm kiếm...">
                        </div>
                        <div class="col-span-12 sm:col-span-12 md:col-span-3">
                            <button id="btnSearchExam" class="w-full px-4 py-2 text-sm font-medium text-white bg-blue-600 rounded-lg hover:bg-blue-700 transition-colors">
                                <i data-lucide="search" class="w-4 h-4 inline-block mr-1"></i>
                                Tìm kiếm
                            </button>
                        </div>
                    </div>

                    <!-- Table -->
                    <div class="overflow-x-auto -mx-3 sm:mx-0">
                        <table class="min-w-full divide-y divide-slate-200 border border-slate-200 rounded-lg">
                            <thead class="bg-slate-50">
                                <tr>
                                    <th class="px-2 sm:px-4 py-2 sm:py-3 text-center text-xs font-semibold text-slate-700 uppercase tracking-wider border-b border-slate-200 w-10">
                                        <input type="checkbox" id="examDataSelectAll" class="w-4 h-4 text-blue-600 border-slate-300 rounded focus:ring-blue-500" title="Chọn tất cả">
                                    </th>
                                    <th class="px-2 sm:px-4 py-2 sm:py-3 text-left text-xs font-semibold text-slate-700 uppercase tracking-wider border-b border-slate-200">ID Bài Thi</th>
                                    <th class="px-2 sm:px-4 py-2 sm:py-3 text-left text-xs font-semibold text-slate-700 uppercase tracking-wider border-b border-slate-200">Contest Type</th>
                                    <th class="px-2 sm:px-4 py-2 sm:py-3 text-left text-xs font-semibold text-slate-700 uppercase tracking-wider border-b border-slate-200">Tên Bài Thi</th>
                                    <th class="px-2 sm:px-4 py-2 sm:py-3 text-center text-xs font-semibold text-slate-700 uppercase tracking-wider border-b border-slate-200" width="100">Thao tác</th>
                                </tr>
                            </thead>
                            <tbody id="examData" class="bg-white divide-y divide-slate-200">
                                <!-- Data will be injected here by JavaScript -->
                            </tbody>
                        </table>
                    </div>

                    <!-- Pagination -->
                    <div class="mt-4 text-center">
                        <div class="text-sm text-slate-600 mb-2">
                            Trang <span id="currentPageExam" class="font-semibold">1</span> / <span id="totalPagesExam" class="font-semibold">1</span>
                        </div>
                        <ul id="pagination-exam" class="flex justify-center items-center gap-1"></ul>
                    </div>
                </div>
                
                <!-- Footer -->
                <div class="border-t border-slate-200 bg-slate-50">
                    <div class="flex items-center justify-between gap-3 px-4 sm:px-6 py-3 sm:py-4">
                        <span class="text-sm text-slate-600">Đã chọn: <span id="quiz-popup-selected-count" class="font-semibold text-blue-600">0</span></span>
                        <div class="flex items-center gap-3">
                            <button type="button" class="px-4 py-2 text-sm font-medium text-white bg-green-600 rounded-lg hover:bg-green-700 transition-colors btn-add-multiple-exams" id="popup-question-type-add-multiple" title="Thêm các bài thi đã chọn">
                                <i data-lucide="plus-circle" class="w-4 h-4 inline-block mr-1"></i>
                                Thêm nhiều
                            </button>
                            <button type="button" class="w-full sm:w-auto px-4 py-2 text-sm font-medium text-slate-700 bg-white border border-slate-300 rounded-lg hover:bg-slate-50 transition-colors" id="popup-question-type-cancel">
                                Đóng
                            </button>
                        </div>
                    </div>
                    <!-- Danh sách đã chọn (chỉ hiển thị khi đã chọn > 1) -->
                    <div id="quiz-popup-selected-list-wrap" class="hidden px-4 sm:px-6 pb-3">
                        <h4 class="text-sm font-semibold text-slate-700 mb-2">Danh sách đã chọn</h4>
                        <div class="overflow-x-auto max-h-28 overflow-y-auto border border-slate-200 rounded-lg bg-white">
                            <table class="min-w-full divide-y divide-slate-200 text-sm">
                                <thead class="bg-slate-50 sticky top-0">
                                    <tr>
                                        <th class="px-3 py-2 text-left text-xs font-semibold text-slate-700">ID Bài Thi</th>
                                        <th class="px-3 py-2 text-left text-xs font-semibold text-slate-700">Contest Type</th>
                                        <th class="px-3 py-2 text-left text-xs font-semibold text-slate-700">Tên Bài Thi</th>
                                    </tr>
                                </thead>
                                <tbody id="quiz-popup-selected-list-tbody" class="bg-white divide-y divide-slate-200">
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <input type="hidden" id="totalPageExam" name="totalPage" value="">
    </div>

    <!-- Availability Modal V2 -->
    <div id="modal-availability" class="hidden fixed inset-0 z-50 overflow-y-auto" aria-labelledby="modal-availability-label" role="dialog" aria-modal="true">
        <!-- Backdrop -->
        <div class="fixed inset-0 bg-black bg-opacity-50 transition-opacity" id="availability-modal-backdrop"></div>
        
        <!-- Modal Container -->
        <div class="flex min-h-full items-center justify-center p-3 sm:p-4">
            <div class="relative transform overflow-hidden rounded-lg bg-white shadow-xl transition-all w-full max-w-2xl mx-2 sm:mx-0">
                <!-- Header -->
                <div class="flex items-center justify-between px-4 sm:px-6 py-3 sm:py-4 border-b border-slate-200">
                    <div class="flex items-center gap-2 sm:gap-3 min-w-0 flex-1">
                        <div class="w-8 h-8 sm:w-10 sm:h-10 rounded-full bg-blue-100 flex items-center justify-center flex-shrink-0">
                            <i data-lucide="list-check" class="w-4 h-4 sm:w-5 sm:h-5 text-blue-600"></i>
                        </div>
                        <h3 class="text-base sm:text-lg font-semibold text-slate-900 truncate" id="modal-availability-label">Chọn tài nguyên cần hoàn thành</h3>
                    </div>
                    <button type="button" class="text-slate-400 hover:text-slate-600 transition-colors flex-shrink-0" id="availability-modal-close">
                        <i data-lucide="x" class="w-5 h-5"></i>
                    </button>
                </div>
                
                <!-- Body -->
                <div class="px-3 sm:px-6 py-4 sm:py-6 max-h-[60vh] overflow-y-auto">
                    <div class="availability-items space-y-2">
                        <!-- Content will be injected here by JavaScript -->
                    </div>
                </div>
                
                <!-- Footer -->
                <div class="flex flex-col sm:flex-row items-stretch sm:items-center justify-end gap-2 sm:gap-3 px-4 sm:px-6 py-3 sm:py-4 border-t border-slate-200 bg-slate-50">
                    <button type="button" class="w-full sm:w-auto px-4 py-2 text-sm font-medium text-slate-700 bg-white border border-slate-300 rounded-lg hover:bg-slate-50 transition-colors" id="availability-modal-cancel">
                        Hủy bỏ
                    </button>
                    <button type="button" class="w-full sm:w-auto px-4 py-2 text-sm font-medium text-white bg-blue-600 rounded-lg hover:bg-blue-700 transition-colors btn-choose-activity" data-cmid="">
                        <i data-lucide="check" class="w-4 h-4 inline-block mr-1"></i>
                        Xác nhận
                    </button>
                </div>
            </div>
        </div>
    </div>
</div>

@endsection

@section('scripts')
    <script src="{{ URL::asset('js/product_detail/product_detail-v2.js') }}"></script>
    <script src="{{ URL::asset('js/activity/video.js') }}"></script>
    <script src="{{ URL::asset('js/activity/quiz.js') }}"></script>
    <script>
        // Image upload form handlers - must run after jQuery is loaded
        let imageFormLoadTrigger = false;
        $(document).on('click', '.btn-edit-image.fa-edit', function(){
            const $button = $(this);
            console.log(imageFormLoadTrigger);
            $('#info_course #course_image').toggleClass('hidden');
            $('.course-upload-image').toggleClass('hidden');
            if ($('.course-upload-image').is(':empty')) {
                $.get('{{ route("load.image.form") }}', function (htmlContent) {
                    $button.removeClass('fa-edit');
                    $button.addClass('fa-undo');
                    $('.course-upload-image').html(htmlContent);
                }).fail(function (error) {
                    console.error('Error loading form:', error);
                });
            }
        });

        $(document).on('click', '.btn-edit-image.fa-undo', function(){
            const $button = $(this);
            $button.removeClass('fa-undo');
            $button.addClass('fa-edit');
            $('#info_course #course_image').toggleClass('hidden');
            $('.course-upload-image').toggleClass('hidden');
        });
        
        // H5P Popup handlers
        $(document).ready(function() {
            $('#h5p-popup fieldset.collapsible legend a').click(function(e) {
                e.preventDefault();
                $(this).closest('fieldset.collapsible').toggleClass('collapsed');
            });
        });

        // Delete confirm popup handlers
        $(document).on('click', '.fp-dlg-butcancel', function(event) {
            if (typeof closePopupDelete === 'function') {
                closePopupDelete();
            }
        });
    </script>
@endsection