<?php
require 'db.php';

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

    $where = "WHERE c.event_title LIKE '%$search%' AND c.status = 1";
    
    $count_q = mysqli_query($condb, "SELECT COUNT(*) as cnt FROM cert_events c $where");
    $total_rows = mysqli_fetch_assoc($count_q)['cnt'];
    $total_pages = ceil($total_rows / $limit);

    $q = mysqli_query($condb, "SELECT c.*, u.group_name FROM cert_events c LEFT JOIN users u ON c.user_id = u.user_id $where ORDER BY c.event_date DESC LIMIT $offset, $limit");
    
    $html = '';
    $no = $offset + 1; 

    while($row = mysqli_fetch_assoc($q)) {
        $enc_id = encryptData($row['event_id']);
        $date_th = getThaiDate($row['event_date']);
        $group_name = !empty($row['group_name']) ? $row['group_name'] : 'ไม่ระบุหน่วยงาน';

        $html .= "
        <div class='card mb-3 border-start border-4 border-primary shadow-sm'>
            <div class='card-body d-flex flex-column flex-md-row justify-content-between align-items-center'>
                <div class='d-flex align-items-center w-100'>
                    <div class='me-4 text-primary opacity-50 fw-bold display-6'>$no</div>
                    <div class='flex-grow-1'>
                        <h5 class='mb-1 fw-bold text-dark'>{$row['event_title']}</h5>
                        <div class='text-muted small mt-2'>
                            <span class='me-3'><i class='far fa-calendar-alt text-primary'></i> วันที่ออกเกียรติบัตร: $date_th</span>
                            <span><i class='fas fa-users text-info'></i> หน่วยงาน: <strong>$group_name</strong></span>
                        </div>
                    </div>
                </div>
                <div class='mt-3 mt-md-0 ms-md-3 shrink-0'>
                    <a href='search.php?eid=$enc_id' class='btn btn-primary px-4 rounded-pill text-nowrap'><i class='fas fa-search'></i> ค้นหารายชื่อ</a>
                </div>
            </div>
        </div>";
        $no++; 
    }
    
    if(mysqli_num_rows($q) == 0) {
        $html = "<div class='alert alert-warning text-center p-4'><i class='fas fa-folder-open fa-3x mb-3 d-block text-muted'></i> ไม่พบข้อมูลกิจกรรมที่คุณค้นหา หรือกิจกรรมยังไม่เปิดให้ดาวน์โหลด</div>";
    }

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

require 'layout.php';
renderHeader("หน้าแรก - ระบบเกียรติบัตรออนไลน์");
?>
<div class="row mb-4 position-relative">
    
    <div class="col-12 text-end mt-2">
        <!-- เพิ่มปุ่มตรวจสอบเลขเกียรติบัตร ลิงก์ไปยังไฟล์ verify.php -->
        <a href="verify.php" class="btn btn-outline-success rounded-pill fw-bold shadow-sm me-2 text-dark"><i class="fas fa-qrcode"></i> ตรวจสอบเลขเกียรติบัตร</a>
        <a href="search_personal.php" class="btn btn-outline-info rounded-pill fw-bold shadow-sm me-2 text-dark"><i class="fas fa-user-check"></i> ค้นหาเกียรติบัตรของตนเอง</a>
        
        <?php if(!isset($_SESSION['user_id'])): ?>
            <a href="login.php" class="btn btn-outline-primary rounded-pill fw-bold shadow-sm"><i class="fas fa-sign-in-alt"></i> สำหรับเจ้าหน้าที่</a>
        <?php else: ?>
            <a href="dashboard.php" class="btn btn-success rounded-pill fw-bold shadow-sm"><i class="fas fa-tasks"></i> จัดการระบบ</a>
        <?php endif; ?>
    </div>

    <div class="col-12 text-center mt-3">
        <h2 class="fw-bold text-primary"><i class="fas fa-certificate text-warning"></i> ค้นหาเกียรติบัตรออนไลน์</h2>
        <p class="text-muted">กรุณาพิมพ์ชื่อกิจกรรมหรือหัวเรื่องเกียรติบัตรที่ต้องการค้นหา</p>
        <div class="mx-auto mt-4" style="max-width: 600px;">
            <div class="position-relative">
                <input type="text" id="searchBox" class="form-control search-input w-100 fs-5 shadow-sm" placeholder="🔍 พิมพ์ชื่อเรื่องเกียรติบัตรที่นี่..." onkeyup="loadEvents(1)">
            </div>
        </div>
    </div>
</div>

<div class="row">
    <div class="col-lg-8 mx-auto">
        <div id="eventList">
            <div class="text-center p-5 text-muted"><i class="fas fa-spinner fa-spin fa-2x"></i> กำลังโหลดข้อมูล...</div>
        </div>
        <div id="paginationContainer" class="mt-4"></div>
    </div>
</div>

<script>
let searchTimeout;
function loadEvents(page) {
    clearTimeout(searchTimeout);
    searchTimeout = setTimeout(() => {
        let q = document.getElementById('searchBox').value;
        fetch('index.php?ajax_load=1&page=' + page + '&q=' + encodeURIComponent(q))
        .then(res => res.json())
        .then(data => {
            document.getElementById('eventList').innerHTML = data.html;
            document.getElementById('paginationContainer').innerHTML = data.pagination;
        });
    }, 300); 
}
document.addEventListener('DOMContentLoaded', () => loadEvents(1));
</script>

<?php renderFooter(); ?>