@extends('layouts-v2.app')

@section('title', 'Theo dõi EOC')

@section('head')
<style>
    /* Custom Scrollbar for Drawer & Pre blocks */
    .custom-scrollbar::-webkit-scrollbar {
        width: 6px;
        height: 6px;
    }

    .custom-scrollbar::-webkit-scrollbar-track {
        background: transparent;
    }

    .custom-scrollbar::-webkit-scrollbar-thumb {
        background: #cbd5e1;
        border-radius: 4px;
    }

    .custom-scrollbar::-webkit-scrollbar-thumb:hover {
        background: #94a3b8;
    }

    /* Code block styling */
    pre code {
        display: block;
        padding: 1.25rem;
        overflow-x: auto;
        line-height: 1.6;
        font-family: 'JetBrains Mono', 'Fira Code', 'Courier New', Courier, monospace;
    }

    /* Pulse Animation for PASS / FAIL status */
    @keyframes status-pulse {

        0%,
        100% {
            opacity: 1;
            transform: scale(1);
        }

        50% {
            opacity: 0.4;
            transform: scale(1.2);
        }
    }

    .pulse-dot {
        animation: status-pulse 2s infinite ease-in-out;
    }

    /* Row Hover Lift Effect */
    .hover-lift {
        transition: transform 0.2s ease, box-shadow 0.2s ease;
    }

    .hover-lift:hover {
        transform: translateY(-2px);
        box-shadow: 0 10px 20px -10px rgba(0, 0, 0, 0.08);
        background-color: #f8fafc !important;
    }

    /* Table body row spacing / padding */
    #logs-table-body td {
        padding-top: 1rem !important;
        padding-bottom: 1rem !important;
    }

    /* Error Row Styling */
    .error-row {
        background-color: rgba(255, 241, 242, 0.35) !important;
        border-left: 3px solid #fca5a5 !important;
    }

    .error-row:hover {
        background-color: rgba(254, 226, 226, 0.55) !important;
    }

    /* Sticky Table Header */
    #logs-table-header th {
        position: sticky;
        top: 0;
        z-index: 5;
        background-color: rgba(248, 250, 252, 0.95);
        backdrop-filter: blur(4px);
    }

    /* JSON Syntax Highlighting */
    .json-key {
        color: #93c5fd;
        font-weight: 700;
    }

    .json-string {
        color: #a7f3d0;
    }

    .json-number {
        color: #fde047;
        font-weight: 600;
    }

    .json-boolean {
        color: #c084fc;
        font-weight: 700;
    }

    .json-null {
        color: #94a3b8;
        font-style: italic;
    }

    /* Style TomSelect student & course filters */
    .ts-wrapper.custom-ts-select .ts-control {
        height: 46px !important;
        border-radius: 0.75rem !important;
        background-color: rgba(248, 250, 252, 0.4) !important;
        border-color: #e2e8f0 !important;
        display: flex !important;
        align-items: center !important;
        padding-left: 1rem !important;
        box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05) !important;
        font-weight: 600 !important;
    }

    .ts-wrapper.custom-ts-select.focus .ts-control {
        border-color: #cbd5e1 !important;
        box-shadow: none !important;
        background-color: #ffffff !important;
    }

    .ts-wrapper.custom-ts-select .ts-control .ts-placeholder {
        color: #94a3b8 !important;
        font-size: 0.875rem !important;
        font-weight: 600 !important;
    }

    .ts-wrapper.custom-ts-select .ts-control .item {
        font-size: 0.875rem !important;
        color: #334155 !important;
        font-weight: 600 !important;
    }

    /* Styling for pagination */
    .pagination {
        display: flex;
        padding-left: 0;
        list-style: none;
        border-radius: .75rem;
        margin-bottom: 0;
    }

    .page-item {
        margin: 0 3px;
    }

    .page-item.active .page-link {
        z-index: 3;
        color: #fff;
        background-color: #f43f5e;
        border-color: #f43f5e;
        border-radius: 10px;
        box-shadow: 0 4px 10px rgba(244, 63, 94, 0.25);
    }

    .page-link {
        position: relative;
        display: block;
        padding: .6rem .9rem;
        margin-left: -1px;
        line-height: 1.25;
        color: #4b5563;
        background-color: #fff;
        border: 1px solid #e2e8f0;
        border-radius: 10px;
        font-weight: 700;
        font-size: 13px;
        transition: all 0.2s ease-in-out;
        cursor: pointer;
    }

    .page-link:hover {
        background-color: #fff1f2;
        border-color: #fecdd3;
        color: #e11d48;
        text-decoration: none;
    }

    /* 60fps Smooth Filter Collapsible Animation */
    .filter-collapsible-wrapper {
        display: grid;
        grid-template-rows: 1fr;
        transition: grid-template-rows 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.25s ease;
        opacity: 1;
    }

    .filter-collapsible-wrapper.collapsed {
        grid-template-rows: 0fr;
        opacity: 0;
        pointer-events: none;
    }

    .filter-collapsible-content {
        overflow: hidden;
    }

    /* Active Card Aura Effects */
    .card-aura-all {
        box-shadow: 0 0 25px rgba(244, 114, 182, 0.45) !important;
        border-color: #f472b6 !important;
        transform: translateY(-2px) scale(1.02);
    }

    .card-aura-success {
        box-shadow: 0 0 25px rgba(16, 185, 129, 0.4) !important;
        border-color: #10b981 !important;
        transform: translateY(-2px) scale(1.02);
    }

    .card-aura-failed {
        box-shadow: 0 0 25px rgba(244, 63, 94, 0.4) !important;
        border-color: #f43f5e !important;
        transform: translateY(-2px) scale(1.02);
    }
</style>
@endsection

@section('content')
<div class="pb-12 font-sans bg-rose-50/30 min-h-screen">
    {{-- Header Page --}}
    <div class="flex flex-col lg:flex-row lg:items-center justify-between gap-6 mb-8">
        <div class="flex items-center gap-4">
            <div class="p-3 bg-gradient-to-br from-pink-400 to-rose-500 text-white rounded-2xl shadow-lg shadow-pink-500/20 border border-pink-300/30">
                <i data-lucide="trending-up" class="w-6 h-6"></i>
            </div>
            <div>
                <h1 class="text-2xl md:text-3xl font-extrabold text-slate-800 tracking-tight">
                    Theo dõi EOC
                </h1>
                <p class="text-sm text-slate-500 mt-0.5">Giám sát & kiểm tra nhật ký đồng bộ tiến độ khóa học sang hệ thống ICL / Zeus API</p>
            </div>
        </div>
    </div>

    {{-- Metrics Stat Cards Section --}}
    <div class="grid grid-cols-1 sm:grid-cols-3 gap-4 mb-6">
        {{-- Card 1: Tổng số Log --}}
        <div id="card-stat-all" onclick="quickFilterStatus('')" class="cursor-pointer bg-white p-5 rounded-2xl border border-slate-200/80 shadow-sm hover:shadow-md hover:border-pink-200 transition-all hover:-translate-y-0.5 group relative overflow-hidden">
            <div class="flex items-center justify-between">
                <div>
                    <p class="text-xs font-bold text-slate-400 uppercase tracking-wider">Tổng số bản ghi</p>
                    <h3 id="stat-total-logs" class="text-2xl font-black text-slate-800 mt-1">0</h3>
                </div>
                <div class="p-3 bg-pink-50 text-pink-600 rounded-xl group-hover:bg-pink-500 group-hover:text-white transition-colors">
                    <i data-lucide="layers" class="w-5 h-5"></i>
                </div>
            </div>
            <p class="text-[11px] font-semibold text-slate-400 mt-2 flex items-center gap-1">
                <span class="inline-block w-1.5 h-1.5 rounded-full bg-pink-400"></span> Tất cả bản ghi log
            </p>
        </div>

        {{-- Card 2: Đồng bộ Thành công --}}
        <div id="card-stat-success" onclick="quickFilterStatus('1')" class="cursor-pointer bg-white p-5 rounded-2xl border border-emerald-100 shadow-sm hover:shadow-md hover:border-emerald-200 transition-all hover:-translate-y-0.5 group relative overflow-hidden">
            <div class="flex items-center justify-between">
                <div>
                    <p class="text-xs font-bold text-emerald-600 uppercase tracking-wider">Đồng bộ thành công</p>
                    <h3 id="stat-success-logs" class="text-2xl font-black text-emerald-700 mt-1">0</h3>
                </div>
                <div class="p-3 bg-emerald-50 text-emerald-600 rounded-xl group-hover:bg-emerald-600 group-hover:text-white transition-colors">
                    <i data-lucide="check-circle-2" class="w-5 h-5"></i>
                </div>
            </div>
            <p class="text-[11px] font-semibold text-emerald-600/80 mt-2 flex items-center gap-1">
                <span class="inline-block w-1.5 h-1.5 rounded-full bg-emerald-500"></span> Click để lọc thành công
            </p>
        </div>

        {{-- Card 3: Đồng bộ Thất bại --}}
        <div id="card-stat-failed" onclick="quickFilterStatus('0')" class="cursor-pointer bg-white p-5 rounded-2xl border border-rose-100 shadow-sm hover:shadow-md hover:border-rose-200 transition-all hover:-translate-y-0.5 group relative overflow-hidden">
            <div class="flex items-center justify-between">
                <div>
                    <p class="text-xs font-bold text-rose-600 uppercase tracking-wider">Đồng bộ thất bại</p>
                    <h3 id="stat-failed-logs" class="text-2xl font-black text-rose-700 mt-1">0</h3>
                </div>
                <div class="p-3 bg-rose-50 text-rose-600 rounded-xl group-hover:bg-rose-600 group-hover:text-white transition-colors">
                    <i data-lucide="alert-octagon" class="w-5 h-5"></i>
                </div>
            </div>
            <p class="text-[11px] font-semibold text-rose-600/80 mt-2 flex items-center gap-1">
                <span class="inline-block w-1.5 h-1.5 rounded-full bg-rose-500 pulse-dot"></span> Click để lọc danh sách lỗi
            </p>
        </div>
    </div>

    {{-- Filter Form Card --}}
    <div class="bg-white p-6 rounded-2xl border border-slate-200/80 shadow-[0_2px_12px_-3px_rgba(244,114,182,0.06)] mb-6 relative">
        <div class="absolute top-0 left-0 w-1.5 h-full bg-gradient-to-b from-pink-400 to-rose-500 rounded-l-2xl"></div>

        {{-- Filter Card Header Bar --}}
        <div class="flex items-center justify-between cursor-pointer select-none" id="btn-toggle-filter">
            <div class="flex items-center gap-2">
                <i data-lucide="filter" class="w-4 h-4 text-pink-500"></i>
                <h3 class="text-sm font-extrabold text-slate-800 tracking-tight mb-0">Bộ lọc tìm kiếm</h3>
                <span id="active-filter-badge" class="hidden px-2.5 py-0.5 text-[10px] font-black bg-pink-100 text-pink-700 rounded-full border border-pink-200">0 đang lọc</span>
            </div>
            <div class="flex items-center gap-2">
                <button type="button" class="p-1 rounded-lg text-slate-400 hover:bg-slate-100 hover:text-slate-700 transition-colors">
                    <i data-lucide="chevron-up" id="filter-toggle-icon" class="w-5 h-5 transition-transform duration-300"></i>
                </button>
            </div>
        </div>

        {{-- Active Filter Chips Bar --}}
        <div id="active-filter-chips" class="mt-3 pt-3 border-t border-slate-100 hidden items-center gap-2 flex-wrap">
            <span class="text-[11px] font-extrabold text-slate-400 uppercase tracking-wider flex items-center gap-1">
                Đang lọc:
            </span>
            <div id="chips-list" class="flex items-center gap-2 flex-wrap"></div>
        </div>

        {{-- Filter Content Wrapper --}}
        <div id="filter-content-wrapper" class="filter-collapsible-wrapper mt-4">
            <div class="filter-collapsible-content">
                <form id="filter-form">
                    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 items-end">

                        {{-- Mã / Tên HV --}}
                        <div class="flex flex-col gap-1.5 font-sans">
                            <label class="text-xs font-bold text-slate-500 mb-0.5">Học viên (Username / Email / ID)</label>
                            <select id="filter_student_code" name="student_code[]" placeholder="Chọn hoặc nhập học viên..." multiple></select>
                        </div>

                        {{-- Tên Khóa học --}}
                        <div class="flex flex-col gap-1.5 font-sans">
                            <label class="text-xs font-bold text-slate-500 mb-0.5">Khóa học (ID Khóa)</label>
                            <select id="filter_course" name="course[]" placeholder="Chọn hoặc nhập Khóa học..." multiple></select>
                        </div>

                        {{-- Tên Bài thi --}}
                        <div class="flex flex-col gap-1.5 font-sans">
                            <label class="text-xs font-bold text-slate-500 mb-0.5">Bài thi (Section ID)</label>
                            <select id="filter_exam" name="exam[]" placeholder="Chọn hoặc nhập Bài thi..." multiple></select>
                        </div>

                        {{-- ID Log --}}
                        <div class="flex flex-col gap-1.5 font-sans">
                            <label class="text-xs font-bold text-slate-500 mb-0.5">ID Log</label>
                            <div class="relative">
                                <span class="absolute left-3.5 top-1/2 -translate-y-1/2 text-slate-400">
                                    <i data-lucide="hash" class="w-4 h-4"></i>
                                </span>
                                <input type="number" name="log_id" value="{{ request('log_id') }}"
                                    class="w-full pl-10 pr-4 h-[46px] border border-slate-200 bg-slate-50/40 rounded-xl text-sm focus:bg-white focus:border-pink-300 focus:outline-none transition-all shadow-sm placeholder-slate-400 font-semibold text-slate-700"
                                    placeholder="Nhập ID Log...">
                            </div>
                        </div>

                        {{-- Trạng thái API --}}
                        <div class="flex flex-col gap-1.5">
                            <label class="text-xs font-bold text-slate-500 mb-0.5">Trạng thái API</label>
                            <div class="relative">
                                <select id="filter_status" name="status" class="w-full pl-4 pr-10 h-[46px] border border-slate-200 bg-slate-50/40 rounded-xl text-sm focus:bg-white focus:border-pink-300 focus:outline-none transition-all shadow-sm appearance-none cursor-pointer text-slate-700 font-semibold">
                                    <option value="">Tất cả trạng thái</option>
                                    <option value="1">Success (Thành công)</option>
                                    <option value="0">Failed (Thất bại / Lỗi)</option>
                                </select>
                                <span class="absolute right-3.5 top-1/2 -translate-y-1/2 text-slate-400 pointer-events-none">
                                    <i data-lucide="chevron-down" class="w-4 h-4"></i>
                                </span>
                            </div>
                        </div>

                        {{-- Từ ngày --}}
                        <div class="flex flex-col gap-1.5 font-sans">
                            <label class="text-xs font-bold text-slate-500 mb-0.5">Từ ngày cập nhật</label>
                            <div class="relative">
                                <span class="absolute left-3.5 top-1/2 -translate-y-1/2 text-slate-400">
                                    <i data-lucide="calendar" class="w-4 h-4"></i>
                                </span>
                                <input type="text" id="filter_start_date" name="start_date"
                                    class="w-full pl-10 pr-4 h-[46px] border border-slate-200 bg-slate-50/40 rounded-xl text-sm focus:bg-white focus:border-pink-300 focus:outline-none transition-all shadow-sm placeholder-slate-400 font-semibold text-slate-700"
                                    placeholder="Chọn ngày...">
                            </div>
                        </div>

                        {{-- Đến ngày --}}
                        <div class="flex flex-col gap-1.5 font-sans">
                            <label class="text-xs font-bold text-slate-500 mb-0.5">Đến ngày cập nhật</label>
                            <div class="relative">
                                <span class="absolute left-3.5 top-1/2 -translate-y-1/2 text-slate-400">
                                    <i data-lucide="calendar" class="w-4 h-4"></i>
                                </span>
                                <input type="text" id="filter_end_date" name="end_date"
                                    class="w-full pl-10 pr-4 h-[46px] border border-slate-200 bg-slate-50/40 rounded-xl text-sm focus:bg-white focus:border-pink-300 focus:outline-none transition-all shadow-sm placeholder-slate-400 font-semibold text-slate-700"
                                    placeholder="Chọn ngày...">
                            </div>
                        </div>
                    </div>

                    {{-- Actions & Quick Presets --}}
                    <div class="mt-5 pt-4 border-t border-slate-100 flex flex-col md:flex-row items-start md:items-center justify-between gap-4">
                        {{-- Quick Date Presets --}}
                        <div class="flex items-center gap-1.5 flex-wrap">
                            <span class="text-xs font-bold text-slate-400 mr-1 flex items-center gap-1">
                                <i data-lucide="clock" class="w-3.5 h-3.5"></i> Chọn nhanh:
                            </span>
                            <button type="button" onclick="setQuickDatePreset('today')" class="px-2.5 py-1 bg-slate-100 hover:bg-pink-50 hover:text-pink-600 hover:border-pink-200 text-slate-600 rounded-lg text-xs font-bold border border-slate-200 transition-all active:scale-95">Hôm nay</button>
                            <button type="button" onclick="setQuickDatePreset('7days')" class="px-2.5 py-1 bg-slate-100 hover:bg-pink-50 hover:text-pink-600 hover:border-pink-200 text-slate-600 rounded-lg text-xs font-bold border border-slate-200 transition-all active:scale-95">7 ngày qua</button>
                            <button type="button" onclick="setQuickDatePreset('30days')" class="px-2.5 py-1 bg-slate-100 hover:bg-pink-50 hover:text-pink-600 hover:border-pink-200 text-slate-600 rounded-lg text-xs font-bold border border-slate-200 transition-all active:scale-95">30 ngày qua</button>
                            <button type="button" onclick="setQuickDatePreset('thisMonth')" class="px-2.5 py-1 bg-slate-100 hover:bg-pink-50 hover:text-pink-600 hover:border-pink-200 text-slate-600 rounded-lg text-xs font-bold border border-slate-200 transition-all active:scale-95">Tháng này</button>
                        </div>

                        {{-- Action Buttons --}}
                        <div class="flex items-center gap-3 w-full md:w-auto justify-end">
                            <button type="button" id="btn-reset-filters" class="px-5 py-2 bg-slate-100 hover:bg-slate-200 text-slate-600 text-sm font-semibold rounded-xl border border-slate-200/50 shadow-sm transition-all active:scale-[0.98] flex items-center gap-2">
                                <i data-lucide="rotate-ccw" class="w-4 h-4"></i> Làm mới
                            </button>
                            <button type="submit" class="px-5 py-2 bg-gradient-to-r from-pink-500 to-rose-500 hover:from-pink-600 hover:to-rose-600 text-white text-sm font-semibold !rounded-xl shadow-md shadow-pink-500/20 transition-all active:scale-[0.98] flex items-center gap-2">
                                Lọc dữ liệu
                            </button>
                        </div>
                    </div>
                </form>
            </div>
        </div>

    </div>

    {{-- Data Table Section --}}
    <div class="bg-white rounded-3xl border border-slate-200/80 shadow-[0_4px_25px_-5px_rgba(0,0,0,0.02)] overflow-hidden relative min-h-[350px]">
        {{-- Loading overlay --}}
        <div id="table-loading-overlay" class="absolute inset-0 bg-white/70 backdrop-blur-[1px] flex flex-col items-center justify-center z-10 opacity-0 pointer-events-none transition-all duration-300">
            <div class="flex flex-col items-center gap-3">
                <div class="animate-spin rounded-full h-10 w-10 border-b-2 border-pink-500"></div>
                <p class="text-xs text-slate-500 font-extrabold tracking-wider uppercase">Đang tải dữ liệu...</p>
            </div>
        </div>

        {{-- Header của Bảng --}}
        <div class="px-6 py-4 border-b border-slate-100 flex flex-col md:flex-row md:items-center justify-between gap-3 bg-slate-50/50">
            <div class="flex items-center gap-3">
                <h3 class="font-extrabold text-slate-800 text-sm tracking-tight">Danh sách Nhật ký Tiến độ Học tập</h3>
                <span id="table-total-badge" class="px-2.5 py-0.5 rounded-full text-[10px] font-black bg-pink-50 text-pink-700 border border-pink-100">0 bản ghi</span>
            </div>

            <div class="flex flex-wrap items-center gap-3 font-sans">
                {{-- Tự động làm mới --}}
                <div class="flex items-center gap-2 bg-white px-3 py-1.5 rounded-xl border border-slate-200 shadow-sm text-xs font-semibold text-slate-600">
                    <i data-lucide="refresh-cw" class="w-3.5 h-3.5 text-slate-400"></i>
                    <span class="text-[11px] font-bold text-slate-500 uppercase tracking-wider hidden sm:inline">Tự động:</span>
                    <select id="auto-refresh-select" class="bg-transparent text-slate-700 font-bold outline-none cursor-pointer text-xs">
                        <option value="0">Tắt</option>
                        <option value="15">15s</option>
                        <option value="30">30s</option>
                        <option value="60">60s</option>
                    </select>
                    <span id="auto-refresh-badge" class="hidden px-2 py-0.5 rounded-md bg-pink-50 text-pink-600 font-mono text-[10px] font-bold border border-pink-100">30s</span>
                </div>

                {{-- Số dòng / trang --}}
                <div class="flex items-center gap-1.5">
                    <select id="perpage" class="border border-slate-200 rounded-xl text-xs bg-white px-3 py-1.5 focus:ring-4 focus:ring-pink-500/10 focus:border-pink-500 outline-none shadow-sm cursor-pointer text-slate-750 font-bold h-9">
                        <option value="10" selected>10</option>
                        <option value="20">20</option>
                        <option value="50">50</option>
                        <option value="100">100</option>
                    </select>
                    <span class="text-[10px] font-extrabold text-slate-400 uppercase tracking-widest hidden sm:inline">dòng/trang</span>
                </div>
            </div>
        </div>

        <div class="max-h-[600px] overflow-y-auto overflow-x-auto custom-scrollbar">
            <table class="w-full text-left border-collapse table-auto">
                <thead id="logs-table-header">
                    <tr class="bg-slate-50 text-slate-500 text-[11px] font-extrabold uppercase tracking-wider border-b border-slate-200">
                        <th class="py-3.5 px-4 text-center w-14">ID</th>
                        <th class="py-3.5 px-4">Học viên</th>
                        <th class="py-3.5 px-4">Khóa học</th>
                        <th class="py-3.5 px-4 text-center">Payload Hash</th>
                        <th class="py-3.5 px-4 text-center">Trạng thái API</th>
                        <th class="py-3.5 px-4 text-center">TG cập nhật</th>
                        <th class="py-3.5 px-4 text-center w-28">Hành động</th>
                    </tr>
                </thead>
                <tbody id="logs-table-body" class="divide-y divide-slate-100 text-sm text-slate-600 font-semibold">
                    {{-- Rendered dynamically in JS --}}
                </tbody>
            </table>
        </div>

        {{-- Pagination Block --}}
        <div id="pagination-outer-container" class="flex w-full">
            {{-- Rendered dynamically in JS --}}
        </div>
    </div>
</div>

{{-- Inspect Side-Drawer / Modal --}}
<div id="side-drawer" class="fixed inset-0 z-[9999] overflow-hidden hidden !mt-0" aria-labelledby="slide-over-title" role="dialog" aria-modal="true">
    <div class="absolute inset-0 overflow-hidden">
        {{-- Backdrop Blur Overlay --}}
        <div id="drawer-backdrop" onclick="closeDrawer()" class="absolute inset-0 bg-slate-900/60 backdrop-blur-sm transition-opacity opacity-0 duration-300"></div>

        <div class="pointer-events-none fixed inset-y-0 right-0 flex max-w-full pl-10">
            {{-- Panel slide-over --}}
            <div id="drawer-panel" class="pointer-events-auto w-screen max-w-2xl transform translate-x-full transition-transform duration-300 ease-in-out bg-white rounded-l-3xl shadow-2xl flex flex-col border-l border-slate-200/60">
                {{-- Header --}}
                <div class="p-6 bg-slate-50/80 backdrop-blur-md border-b border-slate-200/60 rounded-tl-3xl flex items-center justify-between">
                    <div>
                        <h2 class="text-lg font-black text-slate-800 flex items-center gap-2" id="slide-over-title">
                            <span class="w-2.5 h-6 bg-gradient-to-b from-pink-400 to-rose-500 rounded-full"></span>
                            Chi tiết Log Tiến độ <span id="drawer-log-id" class="text-pink-600 font-mono font-extrabold"></span>
                        </h2>
                        <p class="text-xs text-slate-400 mt-0.5">Chi tiết Payload đồng bộ & Response phản hồi từ Zeus API</p>
                    </div>
                    <button type="button" onclick="closeDrawer()" class="rounded-xl bg-white p-2 text-slate-400 hover:text-slate-700 hover:bg-slate-100 border border-slate-200 shadow-sm transition-all active:scale-95">
                        <i data-lucide="x" class="w-5 h-5"></i>
                    </button>
                </div>

                {{-- Tab Selection Block --}}
                <div class="bg-white border-b border-slate-200/60 px-8">
                    <nav class="-mb-px flex space-x-8" aria-label="Tabs">
                        <button onclick="switchDrawerTab('summary')" id="tab-btn-summary" class="border-pink-500 text-pink-600 whitespace-nowrap py-5 px-5 border-b-2 font-extrabold text-sm transition-all flex items-center gap-2.5 focus:outline-none">
                            <i data-lucide="layers" class="w-4.5 h-4.5"></i> Tóm tắt thông tin
                        </button>
                        <button onclick="switchDrawerTab('payload')" id="tab-btn-payload" class="border-transparent text-slate-400 hover:text-slate-600 whitespace-nowrap py-5 px-5 border-b-2 font-extrabold text-sm transition-all flex items-center gap-2.5 focus:outline-none">
                            <i data-lucide="upload-cloud" class="w-4.5 h-4.5"></i> Payload gửi đi
                        </button>
                        <button onclick="switchDrawerTab('response')" id="tab-btn-response" class="border-transparent text-slate-400 hover:text-slate-600 whitespace-nowrap py-5 px-5 border-b-2 font-extrabold text-sm transition-all flex items-center gap-2.5 focus:outline-none">
                            <i data-lucide="download-cloud" class="w-4.5 h-4.5"></i> Response nhận về
                        </button>
                    </nav>
                </div>

                {{-- Body Content --}}
                <div class="flex-1 overflow-y-auto p-6 bg-slate-50/40 custom-scrollbar flex flex-col">
                    {{-- TAB 1: Summary --}}
                    <div id="drawer-tab-content-summary" class="space-y-4">
                        <div class="bg-white p-6 rounded-2xl border border-slate-200 shadow-[0_2px_15px_-3px_rgba(0,0,0,0.02)]">
                            <h3 class="text-xs font-bold text-slate-400 uppercase tracking-widest mb-5 flex items-center gap-1.5">
                                <i data-lucide="clipboard-list" class="w-4 h-4 text-pink-500"></i> Các trường thông tin cơ bản
                            </h3>
                            <div class="grid grid-cols-2 gap-y-5 gap-x-6" id="summary-fields-container">
                                {{-- Loaded Dynamically --}}
                            </div>
                        </div>
                    </div>

                    {{-- TAB 2: Payload --}}
                    <div id="drawer-tab-content-payload" class="hidden h-full flex-col flex-1">
                        <div class="flex items-center justify-between mb-3.5">
                            <span class="text-xs text-slate-400 font-extrabold uppercase tracking-wider">Dữ liệu thô gửi sang Zeus API (JSON)</span>
                            <div class="flex items-center gap-2">
                                <button onclick="copyToClipboard('payload')" id="btn-copy-payload" class="flex items-center gap-1.5 px-3 py-1.5 bg-white hover:bg-slate-50 border border-slate-200 rounded-xl text-xs font-bold text-slate-700 transition-all shadow-sm active:scale-95">
                                    <i data-lucide="copy" class="w-3.5 h-3.5"></i> Copy JSON
                                </button>
                            </div>
                        </div>
                        <div class="flex-1 min-h-[350px] relative">
                            <pre class="absolute inset-0 p-4 bg-slate-900 text-slate-100 rounded-2xl overflow-auto font-mono text-xs border border-slate-800 shadow-inner custom-scrollbar" id="raw-payload-block"></pre>
                        </div>
                    </div>

                    {{-- TAB 3: Response --}}
                    <div id="drawer-tab-content-response" class="hidden h-full flex-col flex-1">
                        <div class="flex items-center justify-between mb-3.5">
                            <span class="text-xs text-slate-400 font-extrabold uppercase tracking-wider">Dữ liệu thô Zeus API phản hồi (JSON)</span>
                            <div class="flex items-center gap-2">
                                <button onclick="copyToClipboard('response')" id="btn-copy-response" class="flex items-center gap-1.5 px-3 py-1.5 bg-white hover:bg-slate-50 border border-slate-200 rounded-xl text-xs font-bold text-slate-700 transition-all shadow-sm active:scale-95">
                                    <i data-lucide="copy" class="w-3.5 h-3.5"></i> Copy JSON
                                </button>
                            </div>
                        </div>
                        <div class="flex-1 min-h-[350px] relative">
                            <pre class="absolute inset-0 p-4 bg-slate-900 text-slate-100 rounded-2xl overflow-auto font-mono text-xs border border-slate-800 shadow-inner custom-scrollbar" id="raw-response-block"></pre>
                        </div>
                    </div>
                </div>

                {{-- Footer --}}
                <div class="p-6 bg-slate-50 border-t border-slate-200/60 flex items-center justify-end gap-3 rounded-bl-3xl">
                    <button type="button" onclick="closeDrawer()" class="px-6 py-3 bg-white hover:bg-slate-100 border border-slate-200 text-slate-700 rounded-xl text-sm font-bold transition-all shadow-sm active:scale-95">
                        Đóng chi tiết
                    </button>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@section('scripts')
<script>
    window.courseProgressLogsConfig = {
        tenantConnection: '{{ $tenant_connection }}',
        routes: {
            index: '{{ route("student-course-progress-logs.index") }}',
            listApi: '{{ route("api.course-progress-logs.list") }}',
            searchStudents: '{{ route("student.searchStudents") }}',
            searchCourses: '{{ route("course.searchCourses") }}',
            searchSections: '{{ route("course.searchSections") }}'
        }
    };
</script>
<script src="{{ asset('js/utils/utils.js') }}"></script>
<script src="{{ asset('js/student-course-progress-log/student-course-progress-log.js') }}"></script>
@endsection