@extends('layouts-v2.app')

@section('title', 'Nhật ký đồng bộ & Gửi mail ICL')

@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 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: 1.25rem !important;
        padding-bottom: 1.25rem !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);
    }

    /* Aura glow effects for active cards */
    .card-aura-all {
        box-shadow: 0 0 25px rgba(99, 102, 241, 0.45) !important;
        border-color: #6366f1 !important;
        transform: translateY(-2px) scale(1.02);
    }

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

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


    /* 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;
    }

    .json-error-key {
        color: #f87171;
        background-color: rgba(248, 113, 113, 0.25);
        border-radius: 4px;
        padding: 1px 4px;
        font-weight: 900;
    }

    /* Style TomSelect student filter to match input system */
    .ts-wrapper.custom-ts-student .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-student.focus .ts-control {
        border-color: #cbd5e1 !important;
        box-shadow: none !important;
        background-color: #ffffff !important;
    }

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

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

    /* Styling for nested layout elements */
    .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: #4f46e5;
        border-color: #4f46e5;
        border-radius: 10px;
        box-shadow: 0 4px 10px rgba(79, 70, 229, 0.2);
    }

    .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: #f8fafc;
        border-color: #cbd5e1;
        color: #1e293b;
        text-decoration: none;
    }
</style>
@endsection

@section('content')
<div class="pb-12 font-sans bg-slate-50/50 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-indigo-500 to-blue-600 text-white rounded-2xl shadow-lg shadow-indigo-500/20 border border-indigo-400/20">
                <i data-lucide="database" class="w-6 h-6"></i>
            </div>
            <div>
                <h1 class="text-2xl md:text-3xl font-extrabold text-slate-800 tracking-tight">
                    Nhật ký đồng bộ & Gửi mail ICL
                </h1>
                <p class="text-sm text-slate-500 mt-0.5">Theo dõi, phân tích và tra cứu chi tiết lịch sử liên thông dữ liệu ICL</p>
            </div>
        </div>

        {{-- Segmented Control (Thanh gạt chuyển tab kiểu Glassmorphism đặt bên phải Header) --}}
        <div class="flex items-center">
            <div class="inline-flex p-1.5 bg-slate-200/50 backdrop-blur-md rounded-2xl border border-slate-200 shadow-inner">
                <button onclick="switchTab('sync', event)" id="tab-btn-sync"
                    class="tab-pill flex items-center gap-2 px-5 py-2.5 text-xs font-extrabold rounded-xl transition-all duration-300 {{ $type === 'sync' ? 'bg-gradient-to-r from-indigo-600 to-blue-600 text-white shadow-md shadow-indigo-500/25 scale-[1.02]' : 'text-slate-600 hover:text-slate-900 hover:bg-white/50' }}">
                    <i data-lucide="refresh-cw" class="w-3.5 h-3.5 {{ $type === 'sync' ? 'animate-spin-slow' : '' }}"></i>
                    Đồng bộ Kết quả ICL
                </button>
                <button onclick="switchTab('email', event)" id="tab-btn-email"
                    class="tab-pill flex items-center gap-2 px-5 py-2.5 text-xs font-extrabold rounded-xl transition-all duration-300 {{ $type === 'email' ? 'bg-gradient-to-r from-indigo-600 to-blue-600 text-white shadow-md shadow-indigo-500/25 scale-[1.02]' : 'text-slate-600 hover:text-slate-900 hover:bg-white/50' }}">
                    <i data-lucide="mail" class="w-3.5 h-3.5"></i>
                    Email chưa nộp bài
                </button>
            </div>
        </div>
    </div>

    {{-- Metrics Stat Cards Section --}}
    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 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-slate-300 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-slate-100 text-slate-600 rounded-xl group-hover:bg-indigo-600 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-slate-400"></span> Cho bộ lọc hiện tại
            </p>
        </div>

        {{-- Card 2: 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">Thành công (Success)</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> API Status = 1 (Click để lọc)
            </p>
        </div>

        {{-- Card 3: 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">Thất bại (Failed)</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>

        {{-- Card 4: Tỷ lệ thành công --}}
        <div class="bg-white p-5 rounded-2xl border border-indigo-100 shadow-sm hover:shadow-md transition-all group">
            <div class="flex items-center justify-between">
                <div>
                    <p class="text-xs font-bold text-indigo-600 uppercase tracking-wider">Tỷ lệ thành công</p>
                    <h3 id="stat-success-rate" class="text-2xl font-black text-indigo-700 mt-1">0%</h3>
                </div>
                <div class="p-3 bg-indigo-50 text-indigo-600 rounded-xl group-hover:bg-indigo-600 group-hover:text-white transition-colors">
                    <i data-lucide="trending-up" class="w-5 h-5"></i>
                </div>
            </div>
            <div class="w-full bg-slate-100 h-1.5 rounded-full mt-3 overflow-hidden">
                <div id="stat-progress-bar" class="bg-gradient-to-r from-indigo-500 to-emerald-500 h-full rounded-full transition-all duration-500" style="width: 0%"></div>
            </div>
        </div>
    </div>

    <div class="bg-white p-6 rounded-2xl border border-slate-200/80 shadow-[0_2px_12px_-3px_rgba(99,102,241,0.03)] mb-6 relative">
        <div class="absolute top-0 left-0 w-1.5 h-full bg-gradient-to-b from-indigo-500 to-blue-500 rounded-l-2xl"></div>
        <form id="filter-form">
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 items-end">
                {{-- Học viên --}}
                <div class="flex flex-col gap-1.5">
                    <label class="text-xs font-bold text-slate-500 mb-0.5">Học viên</label>
                    <select id="filter_student_code" name="student_id[]" placeholder="Chọn Học viên..." multiple></select>
                </div>

                {{-- ID Lượt thi --}}
                <div class="flex flex-col gap-1.5 font-sans">
                    <label class="text-xs font-bold text-slate-500 mb-0.5">ID Lượt thi</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="student_score_id" value="{{ $studentScoreId }}"
                            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-slate-300 focus:outline-none transition-all shadow-sm placeholder-slate-400 font-semibold text-slate-700"
                            placeholder="Nhập ID...">
                    </div>
                </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">Tên Khóa học</label>
                    <select id="filter_course" name="course_title[]" placeholder="Chọn 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">Tên Bài thi</label>
                    <select id="filter_mocktest" name="mocktest_title[]" placeholder="Chọn Bài thi..." multiple></select>
                </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 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-slate-300 focus:outline-none transition-all shadow-sm appearance-none cursor-pointer text-slate-700 font-semibold">
                            <option value="">Tất cả</option>
                            <option value="1" {{ $status === '1' ? 'selected' : '' }}>Success (Thành công)</option>
                            <option value="0" {{ $status === '0' ? 'selected' : '' }}>Failed (Thất bạ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>

                {{-- Email Người nhận (Chỉ hiển thị khi type == email) --}}
                <div class="flex flex-col gap-1.5 recipient-email-container {{ $type === 'email' ? '' : 'opacity-25 pointer-events-none' }}">
                    <label class="text-xs font-bold text-slate-500 mb-0.5">Email người nhận</label>
                    <div class="relative">
                        <span class="absolute left-3.5 top-1/2 -translate-y-1/2 text-slate-400">
                            <i data-lucide="search" class="w-4 h-4"></i>
                        </span>
                        <input type="text" name="recipient_email" value="{{ $recipientEmail }}"
                            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-slate-300 focus:outline-none transition-all shadow-sm placeholder-slate-400 font-semibold text-slate-700"
                            placeholder="abc@example.com..." {{ $type === 'email' ? '' : 'disabled' }}>
                    </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 tạo</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-slate-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 tạo</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-slate-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-indigo-50 hover:text-indigo-600 hover:border-indigo-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-indigo-50 hover:text-indigo-600 hover:border-indigo-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-indigo-50 hover:text-indigo-600 hover:border-indigo-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-indigo-50 hover:text-indigo-600 hover:border-indigo-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-indigo-600 to-blue-600 hover:from-indigo-700 hover:to-blue-700 text-white text-sm font-semibold !rounded-xl shadow-md shadow-indigo-500/10 transition-all active:scale-[0.98] flex items-center gap-2">
                        Lọc dữ liệu
                    </button>
                </div>
            </div>

            {{-- Active Filter Chips Bar --}}
            <div id="active-filter-chips" class="mt-4 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">
                    <i data-lucide="filter" class="w-3 h-3"></i> Đang lọc:
                </span>
                <div id="chips-list" class="flex items-center gap-2 flex-wrap"></div>
            </div>
        </form>
    </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-indigo-650"></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 & Thao tác nhanh --}}
        <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ý</h3>
                <span id="table-total-badge" class="px-2.5 py-0.5 rounded-full text-[10px] font-black bg-indigo-50 text-indigo-700 border border-indigo-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-indigo-50 text-indigo-600 font-mono text-[10px] font-bold border border-indigo-100">30s</span>
                </div>

                {{-- Nút Xuất CSV --}}
                <!-- <button type="button" id="btn-export-csv" class="px-3.5 py-1.5 bg-emerald-50 hover:bg-emerald-100 text-emerald-700 border border-emerald-200/80 rounded-xl text-xs font-bold transition-all flex items-center gap-1.5 shadow-sm active:scale-95">
                    <i data-lucide="file-spreadsheet" class="w-4 h-4"></i>
                    <span>Xuất CSV</span>
                </button> -->

                {{-- 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-indigo-500/10 focus:border-indigo-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="30">30</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">
                    {{-- Rendered dynamically in JS --}}
                </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>

{{-- Premium inspect Side-Drawer --}}
<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-indigo-500 to-blue-500 rounded-full"></span>
                            Chi tiết bản ghi Log <span id="drawer-log-id" class="text-indigo-600 font-mono font-extrabold"></span>
                        </h2>
                        <p class="text-xs text-slate-400 mt-0.5">Phân giải trường Key-Value và dữ liệu JSON 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-indigo-600 text-indigo-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-indigo-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 đến API (JSON)</span>
                            <div class="flex items-center gap-2">
                                <button onclick="downloadJSON('payload')" id="btn-download-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="download" class="w-3.5 h-3.5"></i> Tải JSON
                                </button>
                                <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ô đối tác phản hồi (JSON)</span>
                            <div class="flex items-center gap-2">
                                <button onclick="downloadJSON('response')" id="btn-download-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="download" class="w-3.5 h-3.5"></i> Tải JSON
                                </button>
                                <button onclick="copyToClipboard('response')" id="btn-copy-response" class="flex items-center gap-1.5 px-3 py-2 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>
</div>
@endsection

@section('scripts')
<script>
    window.iclLogsConfig = {
        type: '{{ $type }}',
        studentScoreId: '{{ $studentScoreId }}',
        status: '{{ $status }}',
        recipientEmail: '{{ $recipientEmail }}',
        mocktestTitle: "{{ request('mocktest_title') }}",
        courseTitle: "{{ request('course_title') }}",
        studentId: "{{ request('student_id') }}",
        startDate: "{{ request('start_date') }}",
        endDate: "{{ request('end_date') }}",
        perpage: "{{ request('perpage', 10) }}",
        page: "{{ request('page', 1) }}",
        routes: {
            index: '{{ route("student-score-icl-logs.index") }}',
            searchStudents: '{{ route("student.searchStudents") }}',
            searchCourses: '{{ route("course.searchCourses") }}',
            searchSections: '{{ route("course.searchSections") }}'
        }
    };
</script>
<script src="{{ asset('js/icl-logs/icl-logs.js') }}"></script>
@endsection