<div class="card mb-4">
    <div class="card-header">
        PUWER Template Sets
        <a href="javascript:void(0)"
           class="btn btn-secondary btn-sm float-end"
           onClick="addPuwerSet()"
           data-mdb-tooltip-init
           data-mdb-placement="left"
           title="New PUWER Set">
            <i class="fad fa-plus"></i>
        </a>
        <span id="puwerSearch">
            <a href="javascript:void(0)"
               class="btn btn-secondary btn-sm float-end me-2"
               data-mdb-tooltip-init
               data-mdb-placement="left"
               title="Search PUWER Sets"
               onClick="searchPuwer()">
                <i class="fad fa-search"></i>
            </a>
        </span>
    </div>

    <div class="card-body p-0">
        <div id="puwerData" style="max-height:200px; overflow-x:hidden"></div>
    </div>
</div>

<script>
(function () {
    const clientnumber = '<?= (int)($_REQUEST['clientnumber'] ?? 0) ?>';
    const tenant = typeof TENANT_URL !== 'undefined' ? TENANT_URL : '';

    function buildPuwerDataUrl(search) {
        let url = ROOT_URL + '/includes/puwer/puwer_set_data.php'
            + '?clientnumber=' + encodeURIComponent(clientnumber)
            + '&tenant=' + encodeURIComponent(tenant);

        if (search && search.trim() !== '') {
            url += '&search=' + encodeURIComponent(search.trim());
        }

        return url;
    }

    window.loadPuwerData = function (search) {
        const url = buildPuwerDataUrl(search || '');
        loadContentAndExecuteScripts(url, 'puwerData');
    };

    window.addPuwerSet = function () {
        hideTooltips();
        const url = ROOT_URL + '/includes/puwer/puwer_set_manage.php'
            + '?clientnumber=' + encodeURIComponent(clientnumber)
            + '&tenant=' + encodeURIComponent(tenant);

        loadModalContent(url, 'popupBox', "modal-xl", 1060, "true",'Create PUWER Set');
    };

    window.editPuwerSet = function (setId) {
        hideTooltips();
        const url = ROOT_URL + '/includes/puwer/puwer_set_manage.php'
            + '?clientnumber=' + encodeURIComponent(clientnumber)
            + '&set_id=' + encodeURIComponent(setId)
            + '&tenant=' + encodeURIComponent(tenant);

        loadModalContent(url, 'popupBox', "modal-xl", 1060, "true",'Manage PUWER Set');
    };

    window.searchPuwer = function () {
        hideTooltips();

        const puwerSearch = document.getElementById('puwerSearch');
        if (!puwerSearch) return;

        const inputGroup = document.createElement('div');
        inputGroup.className = 'input-group mb-3 mt-3';

        const input = document.createElement('input');
        input.id = 'puwerSearchString';
        input.type = 'text';
        input.className = 'form-control form-control-sm';
        input.placeholder = 'Search';
        input.setAttribute('aria-label', 'Search');
        input.setAttribute('aria-describedby', 'puwer-search-close');
        input.addEventListener('keyup', filterPuwer);

        const button = document.createElement('button');
        button.className = 'btn btn-sm btn-danger m-0 px-2 py-1 z-depth-0 waves-effect';
        button.type = 'button';
        button.id = 'puwer-search-close';
        button.addEventListener('click', closePuwerFilter);

        const icon = document.createElement('i');
        icon.className = 'fas fa-times fa-2x';

        button.appendChild(icon);
        inputGroup.appendChild(input);
        inputGroup.appendChild(button);

        puwerSearch.innerHTML = '';
        puwerSearch.appendChild(inputGroup);
    };

    window.closePuwerFilter = function () {
        const puwerSearch = document.getElementById('puwerSearch');
        if (!puwerSearch) return;

        const anchor = document.createElement('a');
        anchor.href = 'javascript:void(0)';
        anchor.className = 'btn btn-secondary btn-sm float-end me-2';
        anchor.setAttribute('data-mdb-tooltip-init', '');
        anchor.setAttribute('data-mdb-placement', 'left');
        anchor.setAttribute('title', 'Search PUWER Sets');
        anchor.addEventListener('click', searchPuwer);

        const icon = document.createElement('i');
        icon.className = 'fad fa-search';

        anchor.appendChild(icon);
        puwerSearch.innerHTML = '';
        puwerSearch.appendChild(anchor);

        loadPuwerData('');
    };

    window.filterPuwer = function () {
        const input = document.getElementById('puwerSearchString');
        const str = input ? input.value.toLowerCase() : '';

        const puwerEntries = document.querySelectorAll('.puwerEntry');

        puwerEntries.forEach(function (entry) {
            entry.style.display = 'none';

            const text = entry.textContent.toLowerCase();
            if (text.includes(str)) {
                entry.style.display = 'block';
            }
        });
    };

    loadPuwerData('');
})();
</script>