@extends('layouts.app')

@section('content')
<div id="main-content">
    <div class="container-fluid">
        <div class="row">
            <div id="region-main" class="content-col col-md-12">
                <div id="page-content">
                    <span class="notifications" id="user-notifications"></span>
                    <div role="main">
                        <span id="maincontent"></span>
                        <div id="box-content">
                            <h3>Tạo Exam Mới</h3>
                            <div class="message-class">
                                @if(session('error'))
                                    <div class="alert alert-danger alert-dismissible" role="alert">
                                        <div id="content_message">{{ session('error') }}</div>
                                        <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                                            <span aria-hidden="true">×</span>
                                        </button>
                                    </div>
                                @endif

                                @if($errors->any())
                                    <div class="alert alert-danger alert-dismissible" role="alert">
                                        <ul class="mb-0">
                                            @foreach($errors->all() as $error)
                                                <li>{{ $error }}</li>
                                            @endforeach
                                        </ul>
                                        <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                                            <span aria-hidden="true">×</span>
                                        </button>
                                    </div>
                                @endif
                            </div>
                            <div id="tabs">
                                <ul class="nav nav-tabs" id="nav_tab_list" role="tablist">
                                    <li class="nav-item active">
                                        <a href="#tab_info" class="nav-link active" data-tab="info" data-toggle="tab" role="tab">
                                            Thông tin Exam
                                        </a>
                                    </li>
                                </ul>
                                <div id="tabs-content">
                                    <div class="tab-content mt-3">
                                        <div class="tab-pane active" id="tab_info" role="tabpanel">
                                            <div class="tab-pane-content">
                                                <form action="{{ route('exams.store') }}" id="form_exam_info" method="post">
                                                    @csrf
                                                    
                                                    <div class="mb-2 row">
                                                        <div class="col-2">
                                                            <label>EMS Exam <span class="asterisk">(*)</span></label>
                                                        </div>
                                                        <div class="col-5">
                                                            <input type="hidden" name="ems_id" id="selected_ems_id" value="{{ old('ems_id') }}" required>
                                                            <button type="button" class="btn btn-info" onclick="openEmsExamModal()">
                                                                <i class="fas fa-search"></i> Chọn EMS Exam
                                                            </button>
                                                            <div id="selected_exam_display" class="mt-2">
                                                                @if(old('ems_id'))
                                                                    <span class="badge badge-success" id="exam_badge">
                                                                        EMS ID: {{ old('ems_id') }}
                                                                        <button type="button" class="btn-close-white" onclick="clearEmsExam()" style="background: none; border: none; color: white; cursor: pointer;">×</button>
                                                                    </span>
                                                                @else
                                                                    <span class="text-muted">Chưa chọn exam</span>
                                                                @endif
                                                            </div>
                                                            <small class="form-text text-muted">Chọn exam từ EMS (bắt buộc)</small>
                                                        </div>
                                                    </div>

                                                    <div class="mb-2 row">
                                                        <div class="col-2">
                                                            <label>Tên Exam <span class="asterisk">(*)</span></label>
                                                        </div>
                                                        <div class="col-5">
                                                            <input type="text" name="name" id="exam_name" value="{{ old('name') }}" class="js-required form-control" placeholder="Nhập tên Exam" required>
                                                            <small class="form-text text-muted">Tự động lấy từ EMS Exam (có thể chỉnh sửa)</small>
                                                        </div>
                                                    </div>

                                                    <div class="mb-2 row">
                                                        <div class="col-2">
                                                            <label>Slug <span class="asterisk">(*)</span></label>
                                                        </div>
                                                        <div class="col-5">
                                                            <input type="text" name="slug" id="exam_slug" value="{{ old('slug') }}" class="js-required form-control" placeholder="exam-slug" required>
                                                            <small class="form-text text-muted">Tự động sinh từ tên (có thể chỉnh sửa)</small>
                                                        </div>
                                                    </div>

                                                    <div class="mb-2 row">
                                                        <div class="col-2">
                                                            <label>Number Limit</label>
                                                        </div>
                                                        <div class="col-5">
                                                            <input type="number" name="number_limit" id="number_limit" value="{{ old('number_limit', 0) }}" class="form-control" placeholder="0" min="0">
                                                            <small class="form-text text-muted">Số lần làm bài tối đa của 1 học sinh trong 1 khoảng thời gian. 0: không giới hạn</small>
                                                        </div>
                                                    </div>

                                                    <div class="mb-2 row">
                                                        <div class="col-2">
                                                            <label>Time Duration (ngày)</label>
                                                        </div>
                                                        <div class="col-5">
                                                            <input type="number" name="time_duration_days" id="time_duration_days" value="{{ old('time_duration_days', 0) }}" class="form-control" placeholder="0" min="0" step="1">
                                                            <small class="form-text text-muted">Thời gian 1 học sinh được phép làm (tính bằng ngày). 0: không giới hạn</small>
                                                        </div>
                                                    </div>

                                                    <div id="box-button" class="text-center">
                                                        <button type="submit" id="btn-save" class="btn btn-primary">Tạo Exam</button>
                                                        <a href="{{ route('exams.index') }}" id="btn-cancel" class="btn btn-secondary">Huỷ</a>
                                                    </div>
                                                </form>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- EMS Exam Selection Modal -->
<div class="modal fade" id="emsExamModal" tabindex="-1" role="dialog">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Chọn EMS Exam</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">×</span>
                </button>
            </div>
            <div class="modal-body">
                <div class="mb-3">
                    <input type="text" id="ems_search" class="form-control" placeholder="Tìm kiếm theo tên hoặc ID exam...">
                </div>
                <div id="ems_table_container">
                    <table class="table table-striped table-bordered">
                        <thead>
                            <tr>
                                <th>ID</th>
                                <th>Tên Exam</th>
                                <th>Hành động</th>
                            </tr>
                        </thead>
                        <tbody id="ems_exam_tbody">
                            <tr>
                                <td colspan="3" class="text-center">
                                    <div class="spinner-border" role="status">
                                        <span class="sr-only">Loading...</span>
                                    </div>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
                <div id="ems_pagination" class="mt-3 d-flex justify-content-center"></div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Đóng</button>
            </div>
        </div>
    </div>
</div>

<script>
// Auto generate slug from name
document.getElementById('exam_name').addEventListener('input', function(e) {
    const name = e.target.value;
    const slug = name
        .toLowerCase()
        .normalize('NFD')
        .replace(/[\u0300-\u036f]/g, '') // Remove diacritics
        .replace(/đ/g, 'd')
        .replace(/[^a-z0-9\s-]/g, '') // Remove special characters
        .replace(/\s+/g, '-') // Replace spaces with -
        .replace(/-+/g, '-') // Replace multiple - with single -
        .trim();
    
    document.getElementById('exam_slug').value = slug;
});

// EMS Exam Modal
let currentPage = 1;
let searchTimeout = null;

function openEmsExamModal() {
    $('#emsExamModal').modal('show');
    loadEmsExams(1, '');
}

function loadEmsExams(page, search) {
    currentPage = page;
    const tbody = document.getElementById('ems_exam_tbody');
    tbody.innerHTML = '<tr><td colspan="3" class="text-center"><div class="spinner-border" role="status"></div></td></tr>';

    $.ajax({
        url: '{{ route("exams.ems-exams") }}',
        type: 'GET',
        data: {
            page: page,
            perpage: 10,
            search: search
        },
        success: function(response) {
            displayEmsExams(response);
        },
        error: function(xhr) {
            tbody.innerHTML = '<tr><td colspan="3" class="text-center text-danger">Lỗi khi tải dữ liệu EMS</td></tr>';
            console.error('Error:', xhr);
        }
    });
}

function displayEmsExams(response) {
    const tbody = document.getElementById('ems_exam_tbody');
    tbody.innerHTML = '';

    // Parse response structure
    let exams = [];
    let total = 0;
    let perpage = 10;
    
    if (response.data && Array.isArray(response.data)) {
        exams = response.data;
        total = response.total || 0;
    } else if (response.result && Array.isArray(response.result)) {
        exams = response.result;
        total = response.total || 0;
    } else if (Array.isArray(response)) {
        exams = response;
        total = exams.length;
    }

    // Calculate total pages
    const totalPages = Math.ceil(total / perpage);

    if (exams.length === 0) {
        tbody.innerHTML = '<tr><td colspan="3" class="text-center">Không có dữ liệu</td></tr>';
        return;
    }

    exams.forEach(exam => {
        const examId = exam.idMockContest || exam.id || 'N/A';
        const examName = exam.name || 'N/A';
        
        const row = `
            <tr>
                <td>${examId}</td>
                <td>${examName}</td>
                <td>
                    <button type="button" class="btn btn-sm btn-primary" onclick="selectEmsExam('${examId}', '${examName.replace(/'/g, "\\'")}')">
                        Chọn
                    </button>
                </td>
            </tr>
        `;
        tbody.innerHTML += row;
    });

    // Display pagination
    displayPagination(totalPages);
}

function displayPagination(totalPages) {
    const paginationDiv = document.getElementById('ems_pagination');
    paginationDiv.innerHTML = '';

    if (totalPages <= 1) return;

    let paginationHtml = '<nav><ul class="pagination">';
    
    // Previous button
    paginationHtml += `
        <li class="page-item ${currentPage === 1 ? 'disabled' : ''}">
            <a class="page-link" href="javascript:void(0)" onclick="${currentPage > 1 ? 'loadEmsExams(' + (currentPage - 1) + ', document.getElementById(\'ems_search\').value)' : ''}">Previous</a>
        </li>
    `;

    // Page numbers
    for (let i = 1; i <= totalPages; i++) {
        if (i === 1 || i === totalPages || (i >= currentPage - 2 && i <= currentPage + 2)) {
            paginationHtml += `
                <li class="page-item ${i === currentPage ? 'active' : ''}">
                    <a class="page-link" href="javascript:void(0)" onclick="loadEmsExams(${i}, document.getElementById('ems_search').value)">${i}</a>
                </li>
            `;
        } else if (i === currentPage - 3 || i === currentPage + 3) {
            paginationHtml += '<li class="page-item disabled"><span class="page-link">...</span></li>';
        }
    }

    // Next button
    paginationHtml += `
        <li class="page-item ${currentPage === totalPages ? 'disabled' : ''}">
            <a class="page-link" href="javascript:void(0)" onclick="${currentPage < totalPages ? 'loadEmsExams(' + (currentPage + 1) + ', document.getElementById(\'ems_search\').value)' : ''}">Next</a>
        </li>
    `;

    paginationHtml += '</ul></nav>';
    paginationDiv.innerHTML = paginationHtml;
}

function selectEmsExam(examId, examName) {
    // Set EMS ID
    document.getElementById('selected_ems_id').value = examId;
    
    // Set Name (from EMS exam name)
    document.getElementById('exam_name').value = examName;
    
    // Generate slug from exam name
    const slug = examName
        .toLowerCase()
        .normalize('NFD')
        .replace(/[\u0300-\u036f]/g, '') // Remove diacritics
        .replace(/đ/g, 'd')
        .replace(/[^a-z0-9\s-]/g, '') // Remove special characters
        .replace(/\s+/g, '-') // Replace spaces with -
        .replace(/-+/g, '-') // Replace multiple - with single -
        .trim();
    document.getElementById('exam_slug').value = slug;
    
    // Update display
    document.getElementById('selected_exam_display').innerHTML = `
        <span class="badge badge-success" id="exam_badge">
            ${examName} (ID: ${examId})
            <button type="button" class="btn-close-white" onclick="clearEmsExam()" style="background: none; border: none; color: white; cursor: pointer; margin-left: 5px;">×</button>
        </span>
    `;
    
    $('#emsExamModal').modal('hide');
}

function clearEmsExam() {
    document.getElementById('selected_ems_id').value = '';
    document.getElementById('exam_name').value = '';
    document.getElementById('exam_slug').value = '';
    document.getElementById('selected_exam_display').innerHTML = '<span class="text-muted">Chưa chọn exam</span>';
}

// Search functionality
document.addEventListener('DOMContentLoaded', function() {
    const searchInput = document.getElementById('ems_search');
    if (searchInput) {
        searchInput.addEventListener('input', function(e) {
            clearTimeout(searchTimeout);
            searchTimeout = setTimeout(() => {
                loadEmsExams(1, e.target.value);
            }, 500);
        });
    }
});
</script>
@endsection