<?= $this->extend('layouts/main') ?>
<?= $this->section('content') ?>

<div class="container mt-4">
    <h4 class="mb-3 text-primary fw-semibold">Laporan Penjualan per Item</h4>

    <!-- Pencarian -->
    <div class="row g-2 align-items-center mb-4">
        <div class="col-sm-4">
            <input type="text" id="live-search" value="<?= esc($search) ?>" class="form-control shadow-sm" placeholder="Cari nama atau barcode...">
        </div>
    </div>

    <!-- Tabel dan hasil pencarian -->
    <div id="items-table">
        <div class="card border-0 shadow-sm rounded-4">
            <div class="card-body table-responsive p-3">
                <table class="table table-hover table-sm table-bordered align-middle text-nowrap">
                    <thead class="table-light text-center">
                        <tr>
                            <th style="width: 50px">#</th>
                            <th>Barcode</th>
                            <th>Nama Item</th>
                            <th>Qty Terjual</th>
                            <th>Total Harga</th>
                        </tr>
                    </thead>
                    <tbody>
                        <?php if (empty($items)): ?>
                            <tr>
                                <td colspan="5" class="text-center text-muted">Tidak ada data ditemukan.</td>
                            </tr>
                        <?php else: ?>
                            <?php foreach ($items as $i => $item): ?>
                                <tr>
                                    <td class="text-center"><?= $offset + $i + 1 ?></td>
                                    <td><?= esc($item['barcode']) ?></td>
                                    <td><?= esc($item['nama']) ?></td>
                                    <td class="text-center"><?= esc($item['total_qty']) ?></td>
                                    <td class="text-end">Rp <?= number_format($item['total_harga'], 0, ',', '.') ?></td>
                                </tr>
                            <?php endforeach ?>
                        <?php endif ?>
                    </tbody>
                </table>

                <!-- Pagination -->
                <?php if (!empty($pager) && $pager['totalPages'] >= 1): ?>
                    <nav class="mt-3">
                        <ul class="pagination justify-content-center pagination-sm">
                            <?php
                                $queryParams = $_GET;
                                $current = $pager['currentPage'];
                                $total   = $pager['totalPages'];

                                function pageLink($page, $label, $disabled = false, $active = false, $queryParams = []) {
                                    $queryParams['page'] = $page;
                                    $url = current_url() . '?' . http_build_query($queryParams);
                                    $class = 'page-item';
                                    if ($disabled) $class .= ' disabled';
                                    if ($active) $class .= ' active';
                                    return "<li class=\"$class\"><a class=\"page-link\" href=\"$url\">$label</a></li>";
                                }

                                echo pageLink(1, '« First', $current === 1, false, $queryParams);
                                echo pageLink($current - 1, '‹ Prev', $current === 1, false, $queryParams);

                                for ($i = 1; $i <= $total; $i++) {
                                    if ($i === $current || abs($i - $current) <= 2 || $i === 1 || $i === $total) {
                                        echo pageLink($i, $i, false, $i === $current, $queryParams);
                                    } elseif ($i == 2 && $current > 4) {
                                        echo '<li class="page-item disabled"><span class="page-link">...</span></li>';
                                    } elseif ($i == $total - 1 && $current < $total - 3) {
                                        echo '<li class="page-item disabled"><span class="page-link">...</span></li>';
                                    }
                                }

                                echo pageLink($current + 1, 'Next ›', $current === $total, false, $queryParams);
                                echo pageLink($total, 'Last »', $current === $total, false, $queryParams);
                            ?>
                        </ul>
                    </nav>
                <?php endif ?>
            </div>
        </div>
    </div>
</div>

<!-- AJAX Script -->
<script>
let typingTimer;
const delay = 400;
const searchInput = document.getElementById('live-search');

searchInput.addEventListener('input', function () {
    clearTimeout(typingTimer);
    typingTimer = setTimeout(performSearch, delay);
});

function performSearch() {
    const query = searchInput.value.trim();
    const xhr = new XMLHttpRequest();
    xhr.open('GET', '<?= base_url('admin/report/items') ?>?q=' + encodeURIComponent(query), true);
    xhr.setRequestHeader('X-Requested-With', 'XMLHttpRequest');

    xhr.onload = function () {
        if (xhr.status === 200) {
            const parser = new DOMParser();
            const doc = parser.parseFromString(xhr.responseText, 'text/html');
            const newTable = doc.getElementById('items-table').innerHTML;
            document.getElementById('items-table').innerHTML = newTable;
        }
    };

    xhr.send();
}
</script>

<!-- Tambahan CSS -->
<style>
    .table thead th {
        background-color: #f8f9fa;
    }

    @media (max-width: 768px) {
        .table th, .table td {
            font-size: 0.875rem;
        }

        h4 {
            font-size: 1.2rem;
        }
    }

    input.form-control::placeholder {
        font-style: italic;
        color: #999;
    }

    .card {
        background-color: #ffffff;
        border-radius: 16px;
    }

    .pagination .page-item.active .page-link {
        background-color: #0d6efd;
        border-color: #0d6efd;
    }
</style>

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css">

<?= $this->endSection() ?>
