@extends('layouts.app')

@section('content')
<div class="space-y-6">
    <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
        <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 class="hidden flex items-center gap-3">
            <button type="button" onclick="openBatchTrackingModal()"
                class="inline-flex items-center gap-2 px-4 py-2.5 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-sm hover:shadow transition-all duration-200 cursor-pointer">
                <i data-lucide="layers" class="w-4 h-4"></i> Tạo link hàng loạt theo Đại sứ
            </button>
        </div>
    </div>

    <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')
    @include('exam-mapping.modal.batch-tracking')
    @include('exam-mapping.modal.tracking-links-list')

    <script>
        window.routes = {
            getDataGroupQuestions: "{{ route('group-questions.data') }}",
            getExamTrackingMapping: "{{ route('campaign-exam-tracking.getExamTrackingMapping') }}",
            destroyCampaignExamTracking: "{{ route('campaign-exam-tracking.destroy') }}",
            storeCampaignExamTracking: "{{ route('campaign-exam-tracking.store') }}",
            getMappingLinks: "{{ route('campaign-exam-tracking.getMappingLinks', ['mappingId' => ':mappingId']) }}",
            exportMappingLinks: "{{ route('campaign-exam-tracking.exportMappingLinks', ['mappingId' => ':mappingId']) }}",
            downloadTrackingTemplate: "{{ route('campaign-exam-tracking.downloadTemplate') }}",
            batchCreateTracking: "{{ route('campaign-exam-tracking.batchCreate') }}",
            batchTrackingProgress: "{{ route('campaign-exam-tracking.batchProgress', ['batch_id' => ':batch_id']) }}",
            batchTrackingDownload: "{{ route('campaign-exam-tracking.batchTrackingDownload', ['batch_id' => ':batch_id']) }}",
        }
    </script>

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