@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> Mapping Exam
        </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-center 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">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="tenantConnection" value="{{ $tenantConnection }}">

        @include('exam-mapping.modal.exam-selector')
        @include('exam-mapping.modal.config')
        @include('exam-mapping.modal.exam-config')
        @include('exam-mapping.modal.quick-config')
        @include('exam-mapping.modal.result')
    </div>

    <script>
        window.routes = {
            getDataGroupQuestions: "{{ route('group-questions.data') }}",
            getExamMapping: "{{ route('exam-mapping.getExamMapping') }}",
            removeExamMapping: '{{ route("exam-mapping.remove") }}',
            getAvailableExams: "{{ route('exam-mapping.getAvailableExams') }}",
            assignExamV2: "{{ route('exam-mapping.assignExamV2') }}",
            storeCampaignExamConfig: "{{ route('campaign-exam-config.store') }}",
            updateCampaignExam: "{{ route('campaign-exam.update' , ['mappingId' => 'ID']) }}",
            updateGroupForCampaign: "{{ route('campaigns.updateGroup' , ['id' => 'ID']) }}",
            showCampaignExamConfig: "{{ route('campaign-exam-config.show' , ['id' => 'ID']) }}",
        }
    </script>

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