@extends('layouts.app')

@section('title', 'Đề thi EMS')

@section('head')
    <script src="https://cdn.tailwindcss.com"></script>
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
    <!-- SweetAlert -->
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
    <script src="https://cdn.jsdelivr.net/npm/dayjs@1/dayjs.min.js"></script>
@endsection

@section('content')
<div class="p-8 bg-gray-50 min-h-screen">

    <!-- Breadcrumb -->
    <div class="flex items-center text-sm text-gray-500 mb-6">
        <a href="#" class="hover:underline">Đề thi</a>
        <span class="mx-1">/</span>
        <span class="text-gray-700 font-medium">Danh sách đề thi trên EMS</span>
    </div>

    <h1 class="text-2xl font-semibold mb-6">Danh sách đề thi trên EMS</h1>

    <!-- Bộ lọc -->
    <div class="bg-white rounded-xl p-6 shadow-sm">
        <div class="flex items-end justify-between gap-4">
            <div class="flex items-end gap-4">
                <div class="col-span-3">
                    <label class="text-sm font-medium">Tên hoặc ID đề thi</label>
                    <input type="text" class="mt-1 w-full rounded-lg border-gray-300" placeholder="Tìm kiếm đề thi" id="search">
                </div>

                <!-- <div class="col-span-3">
                    <label class="text-sm font-medium">Tên đề thi</label>
                    <input type="text" class="mt-1 w-full rounded-lg border-gray-300" placeholder="Tên đề thi">
                </div> -->

                <div class="col-span-2">
                    <label class="text-sm font-medium">Hiển thị</label>
                    <select id="perpage" class="border rounded-lg px-4 py-2">
                        <option value="10">10</option>
                        <option value="20">20</option>
                        <option value="50">50</option>
                    </select>
                </div>
            </div>

            <div class="col-span-2">
                <button class="w-full bg-blue-600 text-white px-4 py-2 rounded-lg hover:bg-blue-700" id="btnFilter">
                    Lọc
                </button>
            </div>
        </div>
    </div>

    <!-- Danh sách -->
    <div class="mt-6 overflow-x-auto">
        <table class="min-w-full bg-white rounded-xl shadow-sm overflow-hidden">
            {{-- Header --}}
            <thead class="bg-gray-100 text-gray-600 font-medium">
                <tr>
                    <th class="px-6 py-4 text-left">Tên đề thi</th>
                    <th class="px-6 py-4 text-left">Các đề đã tạo</th>
                    <th class="px-6 py-4 text-left">Cập nhật gần nhất</th>
                    <th class="px-6 py-4 text-right">Thao tác</th>
                </tr>
            </thead>

            {{-- Body --}}
            <tbody class="text-gray-700"></tbody>
        </table>
    </div>

    <div class="mt-6 flex justify-center" id="pagination"></div>

</div>

<script>
    $(document).ready(function() {

        loadExams();
        
        function loadExams(page = 1) {

            const search = $('#search').val() ?? '';
            const perpage = $('#perpage').val() ?? 10;

            const url = "{{ route('ems-exams.getEmsExams') }}?page=" + page + "&perpage=" + perpage + "&search=" + encodeURIComponent(search);

            $.ajax({
                url: url,
                type: 'GET',
                dataType: 'json',
                success: function(res) {
                    renderTable(res.data);
                    renderPagination(res.total, res.page, res.perpage);
                },
                error: function() {
                    console.log('Error');
                }
            })
        }

        // Lọc danh sách
        $('#btnFilter').click(function() {
            loadExams(1);
        });

        $('#perpage').change(function() {
            loadExams(1);
        });
        
        // Render table
        function renderTable(data) {
            let html = ``;
            data.forEach(item => {
                html += `
                <tr class="border-t hover:bg-gray-50">
                    {{-- Tên đề thi --}}
                    <td class="px-6 py-4">
                        <div class="flex flex-col">
                            <span class="font-semibold">#${item.idMockContest} - ${item.name}</span>
                            <!--
                            <div class="flex items-center gap-3 mt-1 text-sm text-gray-500">
                                <span class="flex items-center gap-1">
                                    <i class="fa-regular fa-file-lines"></i> 2
                                </span>
                                <span class="flex items-center gap-1">
                                    ⏱ 25:00
                                </span>
                            </div>
                            -->
                        </div>
                    </td>

                    {{-- Các đề đã tạo --}}
                    <td class="px-6 py-4">
                        <!-- <span class="px-3 py-1 bg-blue-100 text-blue-700 text-xs rounded-lg">test 1 task</span> -->
                    </td>

                    {{-- Cập nhật --}}
                    <td class="px-6 py-4 text-sm">
                        <!--
                        <div>13:48:48</div>
                        <div class="text-gray-500">16-10-2024</div>
                        -->
                    </td>

                    {{-- Nút thao tác --}}
                    <td class="px-6 py-4 text-right">
                        <button class="bg-blue-600 text-white px-4 py-2 rounded-lg hover:bg-blue-700">
                            Tạo đề thi
                        </button>
                    </td>

                </tr>
                `;
            });

            $('tbody').html(html);
        }

        // Render pagination
        function renderPagination(total, page, perpage) {
            let lastPage = Math.ceil(total / perpage);

            let html = `<div class="flex gap-2">`;

            if(page > 1) {
                html += `
                    <button data-page="${page - 1}"
                        class="px-3 py-1 rounded-lg border border-gray-300">
                        <i class="fa-solid fa-chevron-left"></i>
                    </button>
                `;
            }

            for (let i = 1; i <= lastPage; i++) {
                html += `
                    <button data-page="${i}"
                        class="px-3 py-1 rounded-lg border ${i === page ? 'bg-blue-600 text-white' : 'bg-white'}">
                        ${i}
                    </button>
                `;
            }

            if(page < lastPage) {
                html += `
                    <button data-page="${page + 1}"
                        class="px-3 py-1 rounded-lg border border-gray-300">
                        <i class="fa-solid fa-chevron-right"></i>
                    </button>
                `;
            }

            html += `</div>`;

            $('#pagination').html(html);

            // Add events
            $('#pagination button').on('click', function() {
                loadExams(this.dataset.page);
            });
        }
    })
</script>   

@endsection