<?php
require 'db.php';

// ส่วนประมวลผล AJAX สำหรับ Live Search ค้นหาบุคคล
if(isset($_GET['ajax_personal'])) {
    $search = mysqli_real_escape_string($condb, trim($_GET['q']));
    $page = isset($_GET['page']) ? (int)$_GET['page'] : 1;
    $limit = 10;
    $offset = ($page - 1) * $limit;

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

    // ค้นหาชื่อ โดยเชื่อมตารางกิจกรรมเพื่อตรวจสอบว่ากิจกรรมนั้นเปิดแสดงผล (status=1) หรือไม่
    $where = "WHERE n.nm LIKE '%$search%' AND e.status = 1";
    
    $count_q = mysqli_query($condb, "SELECT COUNT(*) as c FROM cert_names n INNER JOIN cert_events e ON n.event_id = e.event_id $where");
    $total_rows = mysqli_fetch_assoc($count_q)['c'];
    $total_pages = ceil($total_rows / $limit);

    $query = "SELECT n.*, e.event_title, e.event_date 
              FROM cert_names n 
              INNER JOIN cert_events e ON n.event_id = e.event_id 
              $where 
              ORDER BY e.event_date DESC 
              LIMIT $offset, $limit";
    $q = mysqli_query($condb, $query);
    
    $html = '';
    while($row = mysqli_fetch_assoc($q)) {
        $enc_cid = encryptData($row['id']); // รหัสรายชื่อสำหรับดาวน์โหลดเกียรติบัตร
        $date_th = getThaiDate($row['event_date']);
        
        $html .= "<tr>
            <td class='p-3 align-middle fw-bold text-primary'>{$row['nm']}</td>
            <td class='p-3 align-middle'>
                <div class='fw-bold text-dark'>{$row['event_title']}</div>
                <small class='text-muted'><i class='far fa-calendar-alt'></i> ออกเมื่อ: $date_th</small>
            </td>
            <td class='p-3 align-middle text-center'>
                <span class='badge bg-light text-dark border'>เลขที่: {$row['cer_id']}</span>
            </td>
            <td class='p-3 text-center align-middle'>
                <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='4' class='text-center py-5 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, 'loadPersonal')
    ]);
    exit;
}

require 'layout.php';
renderHeader("ค้นหาเกียรติบัตรส่วนบุคคล");
?>
<div class="row justify-content-center mt-4">
    <div class="col-lg-10">
        <div class="card p-4 shadow-sm border-top border-4 border-info">
            <div class="text-center mb-4">
                <div class="d-inline-block bg-info text-white rounded-circle p-3 mb-3 shadow-sm">
                    <i class="fas fa-user-check fa-2x"></i>
                </div>
                <h3 class="fw-bold text-dark">ค้นหาประวัติเกียรติบัตรของคุณ</h3>
                <p class="text-muted">ตรวจสอบและดาวน์โหลดเกียรติบัตรทุกรายการที่คุณเคยได้รับ</p>
            </div>
            
            <div class="alert alert-light border shadow-sm rounded-3 mb-4">
                <i class="fas fa-info-circle text-info"></i> <strong>คำแนะนำ:</strong> กรุณาพิมพ์เฉพาะ <u>ชื่อ</u> หรือ <u>นามสกุล</u> อย่างใดอย่างหนึ่งเพื่อผลลัพธ์ที่แม่นยำยิ่งขึ้น
            </div>
            
            <div class="mx-auto mb-4" style="max-width: 600px;">
                <input type="text" id="personalSearch" class="form-control search-input w-100 fs-5 text-center shadow-sm" placeholder="🔍 ระบุชื่อ หรือ นามสกุล ของคุณที่นี่..." onkeyup="loadPersonal(1)">
            </div>
            
            <div class="table-responsive">
                <table class="table table-hover table-bordered mb-0">
                    <thead class="table-info text-center text-dark">
                        <tr>
                            <th width="25%">ชื่อ - นามสกุลที่ปรากฏ</th>
                            <th width="40%">ชื่อกิจกรรม</th>
                            <th width="15%">เลขที่อ้างอิง</th>
                            <th width="20%">ดาวน์โหลด</th>
                        </tr>
                    </thead>
                    <tbody id="personalList">
                        <tr><td colspan='4' class="text-center py-5 text-muted"><i class="fas fa-search fa-3x mb-3 opacity-25"></i><br>กรุณาพิมพ์ชื่อหรือนามสกุลในช่องค้นหาด้านบน</td></tr>
                    </tbody>
                </table>
            </div>
            <div id="personalPagination" 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 personalTimeout;
function loadPersonal(page) {
    clearTimeout(personalTimeout);
    personalTimeout = setTimeout(() => {
        let q = document.getElementById('personalSearch').value;
        
        // ถ้าช่องค้นหาว่างเปล่า ให้คืนค่าตารางกลับสู่สถานะเริ่มต้น
        if(q.trim() === '') {
            document.getElementById('personalList').innerHTML = "<tr><td colspan='4' class='text-center py-5 text-muted'><i class='fas fa-search fa-3x mb-3 opacity-25'></i><br>กรุณาพิมพ์ชื่อหรือนามสกุลในช่องค้นหาด้านบน</td></tr>";
            document.getElementById('personalPagination').innerHTML = '';
            return;
        }

        document.getElementById('personalList').innerHTML = "<tr><td colspan='4' class='text-center py-5 text-muted'><i class='fas fa-spinner fa-spin fa-2x'></i><br>กำลังค้นหาข้อมูล...</td></tr>";
        
        fetch('search_personal.php?ajax_personal=1&page=' + page + '&q=' + encodeURIComponent(q))
        .then(res => res.json())
        .then(data => {
            document.getElementById('personalList').innerHTML = data.html;
            document.getElementById('personalPagination').innerHTML = data.pagination;
        });
    }, 400); // ตั้งค่าดีเลย์ไว้ 0.4 วิ เพื่อให้ผู้ใช้พิมพ์เสร็จก่อนระบบจะค้นหา (ลดภาระฐานข้อมูล)
}
</script>
<?php renderFooter(); ?>