<nav class="navbar fixed-top">
    <div id="specificCard" class="card col-12" style="border-radius: 20px; background: none; border: none; margin-top: 10px;">
        <div class="row">
            <div class="col-6 icon-container">
                <a href="index.php" class="fa fa-arrow-left text-light"></a>
            </div>
            <div class="col-6 text-right">
                <h6 class="text-light mt-2 mb-2">Voucher List</h6>
            </div>
        </div>
    </div>
</nav>

<div class="card" style="border-radius: 0px; background: none; border: none; margin-top: 100px;">
	<div class="card-body">
	</div>
</div>
<div class="card" id="2" style="border-top-right-radius: 40px; border-top-left-radius: 40px; min-height: 800px; border: none; z-index: 1;">
    <div class="card-body">
        <center>
            <h6><b>Voucher Hotspot</b></h6>
        </center>
        <div class="card-body">
        	<input type="text" id="search" placeholder="Cari Voucher" class="form-control">
        </div>
        <div id="voucher-table-container">
            <table class="table" style="zoom: 90%" id="voucher-table">
                <tbody>
                    <!-- Data will be loaded here -->
                </tbody>
            </table>
        </div>
        <div id="loading" style="display:none;">Loading...</div>
    </div>
</div>

<script>
let page = 1;
let searchQuery = '';

document.getElementById('search').addEventListener('input', function() {
    searchQuery = this.value;
    page = 1; // Reset to the first page
    loadVouchers(true); // Clear existing data on search
});

window.addEventListener('scroll', () => {
    if (window.innerHeight + window.scrollY >= document.body.offsetHeight) {
        page++;
        loadVouchers(false); // Load more data without clearing
    }
});

function loadVouchers(clearTable = false) {
    document.getElementById('loading').style.display = 'block';
    
    fetch(`list_data/list_belum_terjual.php?page=${page}&search=${encodeURIComponent(searchQuery)}`)
        .then(response => response.json())
        .then(data => {
            const tableBody = document.querySelector('#voucher-table tbody');

            // Clear the table if clearTable is true
            if (clearTable) {
                tableBody.innerHTML = ''; // Clear existing rows
            }

            // Populate table with new data
            data.vouchers.forEach(voucher => {
                const row = document.createElement('tr');
                row.innerHTML = `
                    <td class="text-left">
                        <h5>Paket ${voucher.nama_paket}</h5>
                        <h5><b>${voucher.voucher}</b></h5>
                        <h6>Pembelian&ensp;&emsp;: ${voucher.create_time}</h6>
                    </td>
                    <td class="text-right">
                        <i class="fa fa-rss fa-2x"></i>
                        <h6>Rp. ${new Intl.NumberFormat().format(voucher.harga)}</h6>
                        <a class="text-info" href="?${btoa('voucher_detail_berhasil|' + voucher.id)}"><u>Detail</u></a>
                    </td>
                `;
                tableBody.appendChild(row);
            });

            document.getElementById('loading').style.display = 'none';
        })
        .catch(error => {
            console.error('Error loading vouchers:', error);
            document.getElementById('loading').style.display = 'none';
        });
}

// Initial load
loadVouchers();

</script>

<!-- CEK LIST VOUCHER KE MIKROTIK UNTUK MEMASTIKAN STATUS NYA -->