<?php include __DIR__ . '/layout/header.php'; ?>

<div class="breadcrumb">
    <a href="<?php echo $baseUrl; ?>/">Ana Sayfa</a>
    <i class="fa fa-angle-right"></i>
    <a href="<?php echo $baseUrl; ?>/compatibilities">Parça Uyumlulukları</a>
    <i class="fa fa-angle-right"></i>
    <span><?php echo htmlspecialchars($table->title); ?></span>
</div>

<article class="compatibility-table-wrap">
    <header class="compatibility-header">
        <h1><?php echo htmlspecialchars($table->title); ?></h1>
        <p>Aşağıdaki arama kutusunu kullanarak aradığınız yazıcı modelinin veya yedek parça kodunun uyumluluk durumunu hızlıca filtreleyebilirsiniz.</p>
    </header>

    <!-- Client-side filter input -->
    <div class="table-filter-bar">
        <i class="fa fa-search filter-icon"></i>
        <input type="text" id="tableFilterInput" placeholder="Tablo içinde hızlı ara (örn: 1020, ML-1610)..." oninput="filterTable()">
    </div>

    <div class="table-responsive-container">
        <table class="compatibility-data-table" id="compatibilityTable">
            <thead>
                <tr>
                    <?php foreach ($table->headers as $header): ?>
                    <th><?php echo htmlspecialchars($header); ?></th>
                    <?php endforeach; ?>
                </tr>
            </thead>
            <tbody>
                <?php foreach ($table->rows as $row): ?>
                <tr>
                    <?php foreach ($row as $cell): ?>
                    <td><?php echo htmlspecialchars($cell); ?></td>
                    <?php endforeach; ?>
                </tr>
                <?php endforeach; ?>
            </tbody>
        </table>
    </div>
</article>

<script>
function filterTable() {
    const query = document.getElementById('tableFilterInput').value.toLowerCase();
    const rows = document.querySelectorAll('#compatibilityTable tbody tr');
    
    rows.forEach(row => {
        let match = false;
        const cells = row.querySelectorAll('td');
        cells.forEach(cell => {
            if (cell.textContent.toLowerCase().includes(query)) {
                match = true;
            }
        });
        row.style.display = match ? '' : 'none';
    });
}
</script>

<?php include __DIR__ . '/layout/footer.php'; ?>
