@extends('layouts-v2.app')

@section('content')
<div class="flex-1 space-y-4">
    <!-- 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>
        <span>Phân quyền thi</span>
        <i data-lucide="chevron-right" class="w-4 h-4"></i>
        <span>Lịch sử phân quyền</span>
    </div>
    <div class="flex items-center justify-between mb-4">
        <h1 class="text-3xl font-bold text-slate-900">Lịch sử phân quyền thi</h1>
    </div>

    <!-- Hidden Input -->
    <input type="hidden" id="tenant-connection" value="{{ $tenantConnection }}">

    <!-- Tabs -->
    <div class="flex border-b border-slate-200 mb-6">
        <button
            class="main-tab-btn px-6 py-3 text-sm font-semibold border-b-2 border-blue-600 text-blue-600 transition-colors"
            data-main-tab="retake">
            <i data-lucide="rotate-ccw" class="w-4 h-4 inline-block mr-1.5 -mt-0.5"></i>Lịch sử Thi lại
        </button>
        <button
            class="main-tab-btn px-6 py-3 text-sm font-semibold border-b-2 border-transparent text-slate-500 hover:text-slate-700 transition-colors"
            data-main-tab="new-attempt">
            <i data-lucide="folder-clock" class="w-4 h-4 inline-block mr-1.5 -mt-0.5"></i>Lịch sử Cấp lượt mới
        </button>
    </div>

    <!-- Tab Content: Retake History -->
    <div id="tab-content-retake">
        <div class="bg-white rounded-xl shadow-sm border border-slate-200 overflow-hidden">
            <div id="retake-history-loading" class="flex flex-col items-center justify-center py-10 space-y-3 bg-white">
                <div class="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-600"></div>
                <p class="text-sm text-slate-500">Đang tải lịch sử thi lại...</p>
            </div>
            <div id="retake-history-content" class="hidden">
                <div class="overflow-x-auto">
                    <table class="w-full table-fixed divide-y divide-slate-200 border-collapse">
                        <colgroup>
                            <col style="width: 15%">
                            <col style="width: 15%">
                            <col style="width: 20%">
                            <col style="width: 25%">
                            <col style="width: 10%">
                            <col style="width: 15%">
                        </colgroup>
                        <thead class="bg-slate-50">
                            <tr>
                                <th class="px-3 py-2.5 text-left text-xs font-semibold text-slate-600 uppercase tracking-wider">Thời gian</th>
                                <th class="px-3 py-2.5 text-left text-xs font-semibold text-slate-600 uppercase tracking-wider">Admin</th>
                                <th class="px-3 py-2.5 text-left text-xs font-semibold text-slate-600 uppercase tracking-wider">Học sinh / Email</th>
                                <th class="px-3 py-2.5 text-left text-xs font-semibold text-slate-600 uppercase tracking-wider">Bài thi (Quiz)</th>
                                <th class="px-3 py-2.5 text-center text-xs font-semibold text-slate-600 uppercase tracking-wider">Lượt cộng</th>
                                <th class="px-3 py-2.5 text-left text-xs font-semibold text-slate-600 uppercase tracking-wider">Deadline</th>
                            </tr>
                        </thead>
                        <tbody id="retake-history-body" class="bg-white divide-y divide-slate-200">
                            <!-- Rows -->
                        </tbody>
                    </table>
                </div>
                <!-- Pagination -->
                <div id="retake-pagination" class="border-t border-slate-200 bg-slate-50"></div>
            </div>
        </div>
    </div>

    <!-- Tab Content: New Attempt History -->
    <div id="tab-content-new-attempt" class="hidden">
        <div class="bg-white rounded-xl shadow-sm border border-slate-200 overflow-hidden">
            <div id="new-attempt-history-loading" class="flex flex-col items-center justify-center py-10 space-y-3 bg-white">
                <div class="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-600"></div>
                <p class="text-sm text-slate-500">Đang tải lịch sử cấp lượt mới...</p>
            </div>
            <div id="new-attempt-history-content" class="hidden">
                <div class="overflow-x-auto">
                    <table class="w-full table-fixed divide-y divide-slate-200 border-collapse">
                        <colgroup>
                            <col style="width: 15%">
                            <col style="width: 15%">
                            <col style="width: 45%">
                            <col style="width: 15%">
                            <col style="width: 10%">
                        </colgroup>
                        <thead class="bg-slate-50">
                            <tr>
                                <th class="px-3 py-2.5 text-left text-xs font-semibold text-slate-600 uppercase tracking-wider">Thời gian</th>
                                <th class="px-3 py-2.5 text-left text-xs font-semibold text-slate-600 uppercase tracking-wider">Admin</th>
                                <th class="px-3 py-2.5 text-left text-xs font-semibold text-slate-600 uppercase tracking-wider">Thư mục (Section)</th>
                                <th class="px-3 py-2.5 text-center text-xs font-semibold text-slate-600 uppercase tracking-wider">Số lớp gán</th>
                                <th class="px-3 py-2.5 text-center text-xs font-semibold text-slate-600 uppercase tracking-wider">Hành động</th>
                            </tr>
                        </thead>
                        <tbody id="new-attempt-history-body" class="bg-white divide-y divide-slate-200">
                            <!-- Rows -->
                        </tbody>
                    </table>
                </div>
                <!-- Pagination -->
                <div id="new-attempt-pagination" class="border-t border-slate-200 bg-slate-50"></div>
            </div>
        </div>
    </div>
</div>

<!-- Modal Xem Chi Tiết Deadline (New Attempt) -->
<div id="modal_deadline_history_details" class="hidden fixed inset-0 z-50 overflow-y-auto" aria-labelledby="modal_deadline_label" role="dialog" aria-modal="true">
    <div class="fixed inset-0 bg-black bg-opacity-50 transition-opacity" id="deadline-details-backdrop"></div>
    <div class="flex min-h-full items-center justify-center p-4">
        <div class="relative transform overflow-hidden rounded-lg bg-white shadow-xl transition-all w-full max-w-xl">
            <div class="flex items-center justify-between px-6 py-4 border-b border-slate-200">
                <h3 class="text-lg font-semibold text-slate-900">Chi tiết Deadline - <span id="modal-section-name" class="text-blue-600"></span></h3>
                <button type="button" class="text-slate-400 hover:text-slate-600 transition-colors" id="close-deadline-modal">
                    <i data-lucide="x" class="w-5 h-5"></i>
                </button>
            </div>
            <div class="px-6 py-4 max-h-[60vh] overflow-y-auto">
                <div id="deadline-list-container" class="space-y-3">
                    <!-- Deadline items will be injected here -->
                </div>
            </div>
            <div class="flex items-center justify-end gap-3 px-6 py-4 border-t border-slate-200 bg-slate-50">
                <button type="button" class="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="close-deadline-btn">Đóng</button>
            </div>
        </div>
    </div>
</div>

@endsection

@section('scripts')
<script>
    $(document).ready(function () {
        if (typeof lucide !== 'undefined') { lucide.createIcons(); }

        // ==================== Helper ====================
        function formatDateTime(dateStr) {
            if (!dateStr) return '-';
            const d = new Date(dateStr);
            if (isNaN(d.getTime())) return dateStr;
            const pad = (n) => n.toString().padStart(2, '0');
            return pad(d.getDate()) + '/' + pad(d.getMonth() + 1) + '/' + d.getFullYear() + ' ' + pad(d.getHours()) + ':' + pad(d.getMinutes()) + ':' + pad(d.getSeconds());
        }

        function createPaginationHtml(res) {
            const data = res.data;
            if (!data || data.total === 0) return '';

            let html = `
                <div class="px-4 md:px-6 py-4">
                    <div class="flex flex-col sm:flex-row items-start sm:items-center justify-between gap-3">
                        <div class="text-xs sm:text-sm text-slate-600 whitespace-nowrap">
                            Hiển thị ${data.from || 0} - ${data.to || 0} trong tổng số ${data.total} kết quả
                        </div>
                        <div class="flex items-center gap-1.5 sm:gap-2 overflow-x-auto w-full sm:w-auto">
            `;

            // Prev Button
            if (data.current_page > 1) {
                html += `<button type="button" class="page-link-btn px-2.5 sm:px-3 py-1.5 text-xs sm:text-sm text-slate-700 bg-white border border-slate-300 rounded-lg hover:bg-slate-50 transition-colors flex-shrink-0" data-page="${data.current_page - 1}"><i data-lucide="chevron-left" class="w-4 h-4 inline-block"></i></button>`;
            } else {
                html += `<span class="px-2.5 sm:px-3 py-1.5 text-xs sm:text-sm text-slate-400 bg-slate-100 rounded-lg cursor-not-allowed flex-shrink-0"><i data-lucide="chevron-left" class="w-4 h-4 inline-block"></i></span>`;
            }

            // Window Pages
            const onEachSide = 2;
            const windowStart = Math.max(1, data.current_page - onEachSide);
            const windowEnd = Math.min(data.last_page, data.current_page + onEachSide);

            if (windowStart > 1) {
                html += `<button type="button" class="page-link-btn px-2.5 sm:px-3 py-1.5 text-xs sm:text-sm text-slate-700 bg-white border border-slate-300 rounded-lg hover:bg-slate-50 transition-colors flex-shrink-0 min-w-[2rem] text-center" data-page="1">1</button>`;
                if (windowStart > 2) html += `<span class="px-1 sm:px-2 text-xs sm:text-sm text-slate-400 flex-shrink-0">...</span>`;
            }

            for (let page = windowStart; page <= windowEnd; page++) {
                if (page === data.current_page) {
                    html += `<span class="px-2.5 sm:px-3 py-1.5 text-xs sm:text-sm font-medium text-white bg-blue-600 rounded-lg flex-shrink-0 min-w-[2rem] text-center">${page}</span>`;
                } else {
                    html += `<button type="button" class="page-link-btn px-2.5 sm:px-3 py-1.5 text-xs sm:text-sm text-slate-700 bg-white border border-slate-300 rounded-lg hover:bg-slate-50 transition-colors flex-shrink-0 min-w-[2rem] text-center" data-page="${page}">${page}</button>`;
                }
            }

            if (windowEnd < data.last_page) {
                if (windowEnd < data.last_page - 1) html += `<span class="px-1 sm:px-2 text-xs sm:text-sm text-slate-400 flex-shrink-0">...</span>`;
                html += `<button type="button" class="page-link-btn px-2.5 sm:px-3 py-1.5 text-xs sm:text-sm text-slate-700 bg-white border border-slate-300 rounded-lg hover:bg-slate-50 transition-colors flex-shrink-0 min-w-[2rem] text-center" data-page="${data.last_page}">${data.last_page}</button>`;
            }

            // Next Button
            if (data.current_page < data.last_page) {
                html += `<button type="button" class="page-link-btn px-2.5 sm:px-3 py-1.5 text-xs sm:text-sm text-slate-700 bg-white border border-slate-300 rounded-lg hover:bg-slate-50 transition-colors flex-shrink-0" data-page="${data.current_page + 1}"><i data-lucide="chevron-right" class="w-4 h-4 inline-block"></i></button>`;
            } else {
                html += `<span class="px-2.5 sm:px-3 py-1.5 text-xs sm:text-sm text-slate-400 bg-slate-100 rounded-lg cursor-not-allowed flex-shrink-0"><i data-lucide="chevron-right" class="w-4 h-4 inline-block"></i></span>`;
            }

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

        // ==================== Load Data ====================
        let currentRetakePage = 1;
        let currentNewAttemptPage = 1;

        function loadRetakeHistory(page = 1) {
            currentRetakePage = page;
            $('#retake-history-loading').removeClass('hidden');
            $('#retake-history-content').addClass('hidden');

            $.ajax({
                url: '{{ route("exam-permission.retake.history") }}',
                method: 'GET',
                data: {
                    tenant_connection: $('#tenant-connection').val(),
                    page: page,
                    per_page: 15
                },
                success: function (res) {
                    $('#retake-history-loading').addClass('hidden');
                    $('#retake-history-content').removeClass('hidden');
                    const $tbody = $('#retake-history-body');
                    $tbody.empty();

                    if (!res.success || !res.data || res.data.data.length === 0) {
                        $tbody.html('<tr><td colspan="6" class="px-3 py-10 text-center"><div class="flex flex-col items-center justify-center"><i data-lucide="inbox" class="w-10 h-10 text-slate-300 mb-2"></i><p class="text-sm text-slate-500">Chưa có dữ liệu</p></div></td></tr>');
                        $('#retake-pagination').empty();
                        if (typeof lucide !== 'undefined') lucide.createIcons();
                        return;
                    }

                    res.data.data.forEach(item => {
                        $tbody.append(`
                            <tr class="hover:bg-slate-50 transition-colors">
                                <td class="px-3 py-2.5 text-sm text-slate-500 whitespace-nowrap">${formatDateTime(item.created_at)}</td>
                                <td class="px-3 py-2.5 text-sm font-medium text-slate-900 truncate" title="${item.performed_by_name || '-'}">${item.performed_by_name || '-'}</td>
                                <td class="px-3 py-2.5 truncate">
                                    <div class="text-sm font-medium text-slate-900 truncate" title="${item.student_name || 'Học sinh'}">${item.student_name || 'Học sinh'}</div>
                                    <div class="text-[11px] text-slate-500 truncate" title="${item.student_email || '-'}">${item.student_email || '-'}</div>
                                </td>
                                <td class="px-3 py-2.5">
                                    <div class="text-sm text-slate-700 font-medium truncate" title="${item.quiz_name || 'Bài test'}">${item.quiz_name || 'Bài test'}</div>
                                </td>
                                <td class="px-3 py-2.5 text-center">
                                    <div class="inline-flex items-center gap-1.5">
                                        <span class="text-xs text-slate-400">${item.reset_allowance_before}</span>
                                        <i data-lucide="arrow-right" class="w-3 h-3 text-slate-300"></i>
                                        <span class="text-sm font-bold text-blue-600">${item.reset_allowance_after}</span>
                                    </div>
                                </td>
                                <td class="px-3 py-2.5">
                                    <span class="text-xs ${item.deadline ? 'text-orange-600 font-semibold' : 'text-slate-400 italic'} whitespace-nowrap">${item.deadline || 'Không đổi'}</span>
                                </td>
                            </tr>
                            ${item.note ? `<tr class="bg-blue-50/20 border-t-0"><td colspan="6" class="px-3 py-2 text-[11px] text-slate-500 italic"><span class="font-semibold not-italic">Ghi chú:</span> ${item.note}</td></tr>` : ''}
                        `);
                    });

                    $('#retake-pagination').html(createPaginationHtml(res));
                    if (typeof lucide !== 'undefined') lucide.createIcons();
                },
                error: function () {
                    $('#retake-history-loading').addClass('hidden');
                    $('#retake-history-content').removeClass('hidden');
                    $('#retake-history-body').html('<tr><td colspan="6" class="px-3 py-6 text-center text-sm text-red-500">Lỗi khi tải lịch sử</td></tr>');
                }
            });
        }

        function loadNewAttemptHistory(page = 1) {
            currentNewAttemptPage = page;
            $('#new-attempt-history-loading').removeClass('hidden');
            $('#new-attempt-history-content').addClass('hidden');

            $.ajax({
                url: '{{ route("exam-permission.new-attempt.history") }}',
                method: 'GET',
                data: {
                    tenant_connection: $('#tenant-connection').val(),
                    page: page,
                    per_page: 15
                },
                success: function (res) {
                    $('#new-attempt-history-loading').addClass('hidden');
                    $('#new-attempt-history-content').removeClass('hidden');
                    const $tbody = $('#new-attempt-history-body');
                    $tbody.empty();

                    if (!res.success || !res.data || res.data.data.length === 0) {
                        $tbody.html('<tr><td colspan="5" class="px-3 py-10 text-center"><div class="flex flex-col items-center justify-center"><i data-lucide="inbox" class="w-10 h-10 text-slate-300 mb-2"></i><p class="text-sm text-slate-500">Chưa có dữ liệu</p></div></td></tr>');
                        $('#new-attempt-pagination').empty();
                        if (typeof lucide !== 'undefined') lucide.createIcons();
                        return;
                    }

                    res.data.data.forEach(item => {
                        const deadlinesCount = (item.deadlines_data || []).length;
                        $tbody.append(`
                            <tr class="hover:bg-slate-50 transition-colors">
                                <td class="px-3 py-2.5 text-sm text-slate-500 whitespace-nowrap">${formatDateTime(item.created_at)}</td>
                                <td class="px-3 py-2.5 text-sm font-medium text-slate-900 truncate" title="${item.performed_by_name || '-'}">${item.performed_by_name || '-'}</td>
                                <td class="px-3 py-2.5 truncate">
                                    <div class="text-sm font-medium text-slate-900 truncate" title="${item.section_name || 'Section'}">${item.section_name || 'Section'}</div>
                                    <div class="text-[11px] text-slate-500 truncate" title="${item.course_name || '-'}">${item.course_name || '-'}</div>
                                </td>
                                <td class="px-3 py-2.5 text-center">
                                    <span class="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-semibold ${deadlinesCount > 0 ? 'bg-blue-100 text-blue-800' : 'bg-slate-100 text-slate-500'}">
                                        ${deadlinesCount} lớp
                                    </span>
                                </td>
                                <td class="px-3 py-2.5 text-center">
                                    <button class="view-deadline-details inline-flex items-center justify-center w-8 h-8 text-blue-600 hover:text-blue-800 hover:bg-blue-50 rounded-lg transition-colors" 
                                            title="Xem chi tiết"
                                            data-section="${item.section_name}"
                                            data-deadlines='${JSON.stringify(item.deadlines_data || [])}'>
                                        <i data-lucide="eye" class="w-4 h-4"></i>
                                    </button>
                                </td>
                            </tr>
                        `);
                    });

                    $('#new-attempt-pagination').html(createPaginationHtml(res));
                    if (typeof lucide !== 'undefined') lucide.createIcons();
                },
                error: function () {
                    $('#new-attempt-history-loading').addClass('hidden');
                    $('#new-attempt-history-content').removeClass('hidden');
                    $('#new-attempt-history-body').html('<tr><td colspan="5" class="px-3 py-6 text-center text-sm text-red-500">Lỗi khi tải lịch sử</td></tr>');
                }
            });
        }

        // ==================== Interactions ====================
        // Tab switching
        $('.main-tab-btn').on('click', function () {
            const tab = $(this).data('main-tab');

            $('.main-tab-btn').removeClass('border-blue-600 text-blue-600').addClass('border-transparent text-slate-500');
            $(this).addClass('border-blue-600 text-blue-600').removeClass('border-transparent text-slate-500');

            $('#tab-content-retake, #tab-content-new-attempt').addClass('hidden');
            $(`#tab-content-${tab}`).removeClass('hidden');

            if (tab === 'retake' && $('#retake-history-body').children().length === 0) {
                loadRetakeHistory();
            } else if (tab === 'new-attempt' && $('#new-attempt-history-body').children().length === 0) {
                loadNewAttemptHistory();
            }
        });

        // Pagination click
        $(document).on('click', '.page-link-btn', function () {
            const page = $(this).data('page');
            const tab = $('.main-tab-btn.text-blue-600').data('main-tab');
            if (tab === 'retake') loadRetakeHistory(page);
            else loadNewAttemptHistory(page);
        });

        // Modal interactions
        $(document).on('click', '.view-deadline-details', function() {
            const sectionName = $(this).data('section');
            const deadlines = $(this).data('deadlines');
            
            $('#modal-section-name').text(sectionName);
            const $container = $('#deadline-list-container');
            $container.empty();
            
            if (deadlines.length === 0) {
                $container.html('<div class="text-sm text-slate-500 italic text-center py-4">Xóa tất cả deadline</div>');
            } else {
                deadlines.forEach(dl => {
                    $container.append(`
                        <div class="flex items-center justify-between p-3 bg-slate-50 rounded-lg border border-slate-100">
                            <div class="flex flex-col">
                                <span class="text-sm font-semibold text-slate-900">${dl.class_name}</span>
                                <span class="text-[11px] text-slate-400">ID Lớp: ${dl.class_id}</span>
                            </div>
                            <div class="text-right">
                                <span class="text-xs font-bold text-orange-600 bg-orange-50 px-2 py-1 rounded border border-orange-100">
                                    ${formatDateTime(dl.deadline)}
                                </span>
                            </div>
                        </div>
                    `);
                });
            }
            
            $('#modal_deadline_history_details').removeClass('hidden');
            if (typeof lucide !== 'undefined') lucide.createIcons();
        });

        $('#close-deadline-modal, #close-deadline-btn').on('click', function() {
            $('#modal_deadline_history_details').addClass('hidden');
        });

        $('#deadline-details-backdrop').on('click', function() {
             $('#modal_deadline_history_details').addClass('hidden');
        });

        // Init first load
        loadRetakeHistory();
    });
</script>
@endsection