<?php require ROOT_PATH . '/admin/templates/header.php'; ?>

<?php
$isRTL = ($code === 'ar');
?>

<div class="container-fluid py-3 translate-page <?= $isRTL ? 'rtl' : 'ltr' ?>">

    <!-- TITLE -->
    <div class="d-flex justify-content-between align-items-center mb-3">
        <h2 class="m-0">
            <i class="bi bi-translate me-2"></i>
            <?= __('languages.translate', 'Translate') ?>: <?= strtoupper($code) ?>
        </h2>

        <a href="/admin/languages" class="btn btn-secondary">
            <i class="bi bi-arrow-left-short me-1"></i>
            <?= __('actions.back', 'Back') ?>
        </a>
    </div>

    <!-- SEARCH -->
    <div class="card mb-3">
        <div class="card-body py-2">
            <input type="text"
                   id="searchKey"
                   class="form-control"
                   placeholder="<?= __('languages.search', 'Search for a key or translation...') ?>">
        </div>
    </div>

    <!-- FORM -->
    <form method="POST"
      action="/admin/languages/translate/<?= htmlspecialchars($code) ?>">
        <?= \Core\System\Csrf::field(); ?>

        <div class="card">
            <div class="card-body p-0">

                <table class="table table-hover table-striped m-0" id="translationTable">
                    <thead class="table-light">
                        <tr>
                            <th style="width:35%"><?= __('languages.key', 'Key') ?></th>
                            <th><?= __('languages.translation', 'Translation') ?></th>
                        </tr>
                    </thead>
                    <tbody>
                    <?php foreach ($strings as $key => $value): ?>
                        <tr>
                            <td class="fw-bold small text-break">
                                <?= htmlspecialchars($key) ?>
                            </td>
                            <td>
                                <input type="text"
                                       name="translations[<?= htmlspecialchars($key) ?>]"
                                       value="<?= htmlspecialchars($current[$key] ?? '') ?>"
                                       class="form-control <?= $isRTL ? 'rtl' : 'ltr' ?>"
                                       autocomplete="off">
                            </td>
                        </tr>
                    <?php endforeach; ?>
                    </tbody>
                </table>

            </div>
        </div>

        <!-- PAGINATION CONTROLS -->
        <div class="d-flex justify-content-between align-items-center mt-3" id="paginationControls">
            <button type="button" class="btn btn-outline-secondary btn-sm" id="prevPage">
                <i class="bi bi-chevron-left"></i>
            </button>

            <span class="small text-muted">
                <?= __('ui.page', 'Page') ?> <strong id="currentPage">1</strong>
                /
                <strong id="totalPages">1</strong>
            </span>

            <button type="button" class="btn btn-outline-secondary btn-sm" id="nextPage">
                <i class="bi bi-chevron-right"></i>
            </button>
        </div>

        <!-- SAVE -->
        <div class="mt-4">
            <button type="submit" class="btn btn-primary btn-lg">
                <i class="bi bi-save me-2"></i>
                <?= __('actions.save_changes', 'Save Changes') ?>
            </button>
        </div>

    </form>

</div>
<script>
document.addEventListener('DOMContentLoaded', function () {

    const rowsPerPage = 20; // ← غيّرها إلى 15 إن أردت
    const table = document.querySelector('#translationTable tbody');
    const rows = Array.from(table.querySelectorAll('tr'));

    const searchInput = document.getElementById('searchKey');
    const prevBtn = document.getElementById('prevPage');
    const nextBtn = document.getElementById('nextPage');
    const currentPageEl = document.getElementById('currentPage');
    const totalPagesEl = document.getElementById('totalPages');
    const paginationControls = document.getElementById('paginationControls');

    let currentPage = 1;
    let filteredRows = rows;

    function renderPage(page) {
        const start = (page - 1) * rowsPerPage;
        const end = start + rowsPerPage;

        rows.forEach(r => r.style.display = 'none');
        filteredRows.slice(start, end).forEach(r => r.style.display = '');

        currentPageEl.textContent = page;
        totalPagesEl.textContent = Math.ceil(filteredRows.length / rowsPerPage) || 1;

        prevBtn.disabled = page === 1;
        nextBtn.disabled = page >= Math.ceil(filteredRows.length / rowsPerPage);
    }

    function resetPagination() {
        currentPage = 1;
        renderPage(currentPage);
    }

    // INIT
    resetPagination();

    prevBtn.onclick = () => {
        if (currentPage > 1) {
            currentPage--;
            renderPage(currentPage);
        }
    };

    nextBtn.onclick = () => {
        if (currentPage < Math.ceil(filteredRows.length / rowsPerPage)) {
            currentPage++;
            renderPage(currentPage);
        }
    };

    // SEARCH
    searchInput.addEventListener('keyup', function () {
        const term = this.value.toLowerCase().trim();

        if (term === '') {
            filteredRows = rows;
            paginationControls.style.display = '';
            resetPagination();
            return;
        }

        filteredRows = rows.filter(row => {
            const key = row.children[0].innerText.toLowerCase();
            const val = row.children[1].querySelector('input').value.toLowerCase();
            return key.includes(term) || val.includes(term);
        });

        rows.forEach(r => r.style.display = 'none');
        filteredRows.forEach(r => r.style.display = '');

        paginationControls.style.display = 'none';
    });

});
</script>
