<?php
require 'db.php';

// โหลดรายชื่อผ่าน AJAX
if(isset($_GET['ajax_names'])) {
    $eid = decryptData($_GET['eid']);
    if(!$eid) exit;
    
    $search = mysqli_real_escape_string($condb, trim($_GET['q']));
    $page = isset($_GET['page']) ? (int)$_GET['page'] : 1;
    $limit = 10;
    $offset = ($page - 1) * $limit;

    // ถ้าไม่ได้พิมพ์คำค้นหา ให้แสดงข้อความให้พิมพ์ค้นหา และหยุดการทำงาน (ไม่ต้อง Query ฐานข้อมูล)
    if(empty($search)) {
        echo json_encode([
            'html' => "<tr><td colspan='2' class='text-center p-5 text-muted'><i class='fas fa-search fa-3x mb-3 opacity-25'></i><br>กรุณาพิมพ์ชื่อหรือนามสกุลในช่องค้นหาด้านบน</td></tr>",
            'pagination' => ''
        ]);
        exit;
    }

    $where = "WHERE event_id = '$eid' AND nm LIKE '%$search%'";
    $count_q = mysqli_query($condb, "SELECT COUNT(*) as c FROM cert_names $where");
    $total_rows = mysqli_fetch_assoc($count_q)['c'];
    $total_pages = ceil($total_rows / $limit);

    $q = mysqli_query($condb, "SELECT * FROM cert_names $where LIMIT $offset, $limit");
    $html = '';
    while($row = mysqli_fetch_assoc($q)) {
        $enc_cid = encryptData($row['id']);
        $html .= "<tr>
            <td class='p-3 align-middle fw-bold'>{$row['nm']}</td>
            <td class='p-3 text-center'>
                <a target='_blank' href='certi.php?cid={$enc_cid}' class='btn btn-success rounded-pill px-4 shadow-sm'>
                    <i class='fas fa-download'></i> ดาวน์โหลด
                </a>
            </td>
        </tr>";
    }
    if(mysqli_num_rows($q) == 0) {
        $html = "<tr><td colspan='2' class='text-center p-4 text-danger bg-light'><i class='fas fa-exclamation-circle'></i> ไม่พบรายชื่อ <strong>".htmlspecialchars($search)."</strong> ในกิจกรรมนี้</td></tr>";
    }

    echo json_encode([
        'html' => $html,
        'pagination' => createPagination($total_pages, $page, 'loadNames')
    ]);
    exit;
}

require 'layout.php';
$raw_eid = isset($_GET['eid']) ? $_GET['eid'] : '';
$eid = decryptData($raw_eid);
if(!$eid) { echo "<script>alert('ข้อมูลไม่ถูกต้อง');window.location='index.php';</script>"; exit; }

$ev_q = mysqli_query($condb, "SELECT event_title FROM cert_events WHERE event_id='$eid'");
$ev_title = mysqli_fetch_assoc($ev_q)['event_title'];

renderHeader("ค้นหารายชื่อ - " . htmlspecialchars($ev_title));
?>
<div class="row justify-content-center mt-4 mb-5">
    <div class="col-md-8">
        <div class="card p-4 shadow-sm border-top border-4 border-primary">
            <h4 class="text-primary text-center fw-bold mb-4"><?php echo htmlspecialchars($ev_title); ?></h4>
            <div class="alert alert-info border-0 rounded-3 shadow-sm">
                <i class="fas fa-info-circle"></i> <strong>คำแนะนำ:</strong> พิมพ์ชื่อหรือนามสกุลในช่องค้นหา เพื่อค้นหารายชื่อของคุณ (ค้นหาจากคำบางส่วนได้)
            </div>
            
            <input type="text" id="nameSearch" class="form-control search-input mb-4 shadow-sm text-center fs-5" placeholder="🔍 ระบุชื่อหรือนามสกุลที่ต้องการค้นหา..." onkeyup="loadNames(1)">
            
            <div class="table-responsive">
                <table class="table table-hover table-bordered mb-0">
                    <thead class="table-primary text-center">
                        <tr>
                            <th width="70%">ชื่อ - นามสกุล</th>
                            <th width="30%">เกียรติบัตร</th>
                        </tr>
                    </thead>
                    <tbody id="nameList">
                        <tr><td colspan='2' class="text-center p-5 text-muted">
                            <i class="fas fa-search fa-3x mb-3 opacity-25"></i><br>
                            กรุณาพิมพ์ชื่อหรือนามสกุลในช่องค้นหาด้านบน
                        </td></tr>
                    </tbody>
                </table>
            </div>
            <div id="paginationContainer" class="mt-4"></div>
            
            <div class="text-center mt-5">
                <a href="index.php" class="btn btn-secondary rounded-pill px-4 shadow-sm"><i class="fas fa-arrow-left"></i> กลับหน้ารวมกิจกรรม</a>
            </div>
        </div>
    </div>
</div>

<script>
let nameTimeout;
function loadNames(page) {
    clearTimeout(nameTimeout);
    nameTimeout = setTimeout(() => {
        let q = document.getElementById('nameSearch').value.trim();
        
        // ถ้าช่องค้นหาว่าง ให้แสดงข้อความให้พิมพ์ และเคลียร์การแบ่งหน้า
        if(q === '') {
            document.getElementById('nameList').innerHTML = "<tr><td colspan='2' class='text-center p-5 text-muted'><i class='fas fa-search fa-3x mb-3 opacity-25'></i><br>กรุณาพิมพ์ชื่อหรือนามสกุลในช่องค้นหาด้านบน</td></tr>";
            document.getElementById('paginationContainer').innerHTML = '';
            return;
        }

        // แสดงสถานะกำลังโหลด
        document.getElementById('nameList').innerHTML = "<tr><td colspan='2' class='text-center p-5 text-muted'><i class='fas fa-spinner fa-spin fa-2x mb-2'></i><br>กำลังค้นหาข้อมูล...</td></tr>";

        fetch('search.php?ajax_names=1&eid=<?php echo urlencode($raw_eid); ?>&page=' + page + '&q=' + encodeURIComponent(q))
        .then(res => res.json())
        .then(data => {
            document.getElementById('nameList').innerHTML = data.html;
            document.getElementById('paginationContainer').innerHTML = data.pagination;
        });
    }, 400); // ตั้งค่าหน่วงเวลา 0.4 วิ เพื่อลดการ Query ตลอดเวลาที่กำลังพิมพ์
}
</script>
<?php renderFooter(); ?>