@extends('layouts.app')

@section('content')
<div class="space-y-6">
    <h1 class="text-3xl font-bold text-slate-900 flex items-center gap-2">
        <i data-lucide="link" class="w-8 h-8 text-blue-600"></i> Cấu hình UTM
    </h1>

    <div id="matrix-container" class="hidden space-y-4">
        <div class="bg-white rounded-xl shadow-sm border border-slate-200 overflow-auto">
            <table class="min-w-full divide-y divide-slate-200">
                <thead class="bg-slate-50">
                    <tr>
                        <th class="px-4 py-3 text-left text-xs font-bold uppercase whitespace-nowrap">STT</th>
                        <th class="px-4 py-3 text-left text-xs font-bold uppercase whitespace-nowrap">SẢN PHẨM</th>
                        <th class="px-4 py-3 text-left text-xs font-bold uppercase whitespace-nowrap">Domain</th>
                        <th class="px-4 py-3 text-left text-xs font-bold uppercase whitespace-nowrap">Exam</th>
                        <th class="px-4 py-3 text-left text-xs font-bold uppercase whitespace-nowrap">Base URL</th>
                        <th class="px-4 py-3 text-center text-xs font-bold uppercase whitespace-nowrap min-w-[300px]">Tracking UTM & Action</th>
                    </tr>
                </thead>
                <tbody id="matrix-body" class="divide-y divide-slate-200">
                </tbody>
            </table>
        </div>
        <div id="pagination-wrapper" class="px-6 py-4 bg-white border-t border-slate-200 flex items-center justify-between">
            <div id="pagination-info" class="text-sm text-slate-500 font-medium">
                </div>
            <nav id="pagination-container" class="flex items-center gap-1">
                </nav>
        </div>
    </div>

    <input type="hidden" id="csrf-token" value="{{ csrf_token() }}">

    @include('exam-mapping.modal.tracking')

    <script>
        window.routes = {
            getExamTrackingMapping: "{{ route('campaign-exam-tracking.getExamTrackingMapping') }}",
            destroyCampaignExamTracking: "{{ route('campaign-exam-tracking.destroy') }}",
            storeCampaignExamTracking: "{{ route('campaign-exam-tracking.store') }}",
        }
    </script>

    <script src="{{ asset('js/exam-tracking/exam-tracking.js') }}"></script>
</div>
@endsection