<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Web Scraping Tool</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 20px;
        }
        table {
            width: 100%;
            border-collapse: collapse;
            margin-top: 20px;
        }
        table, th, td {
            border: 1px solid #ddd;
        }
        th, td {
            padding: 8px;
            text-align: left;
        }
        th {
            background-color: #f2f2f2;
        }
        input[type="text"] {
            width: 100%;
            box-sizing: border-box;
        }
        button {
            padding: 5px 10px;
            margin-left: 5px;
        }
        .debug-panel {
            position: fixed;
            top: 20%;
            left: 50%;
            transform: translateX(-50%);
            width: 80%;
            max-height: 400px;
            overflow-y: auto;
            background-color: #f9f9f9;
            border: 1px solid #ddd;
            padding: 20px;
            box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
            display: none;
            z-index: 1000;
        }
        .close-btn {
            float: right;
            cursor: pointer;
            font-weight: bold;
        }
    </style>
</head>
<body>

    <h1>Web Scraping Tool</h1>
    <table>
        <thead>
            <tr>
                <th>Name</th>
                <th>URL</th>
                <th>Selector</th>
                <th>Result/Error</th>
                <th>Last Execution</th>
                <th>Actions</th>
            </tr>
        </thead>
        <tbody id="scrape-table-body">
            <tr>
                <td><input type="text" id="new-name" placeholder="Enter name"></td>
                <td><input type="text" id="new-url" placeholder="Enter URL"></td>
                <td><input type="text" id="new-selector" placeholder="Enter Selector"></td>
                <td colspan="3"><button onclick="addNewRecord()">Add & Execute</button></td>
            </tr>
        </tbody>
    </table>

    <div id="debug-panel" class="debug-panel">
        <span class="close-btn" onclick="toggleDebugPanel(null, true)">×</span>
        <pre id="debug-content"></pre>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
    <script>
        const recordsKey = 'scrapeRecords';

        document.addEventListener('DOMContentLoaded', loadRecords);

        function loadRecords() {
            const records = JSON.parse(localStorage.getItem(recordsKey)) || [];
            records.forEach((record, index) => {
                addTableRow(record, index);
            });
        }

        function addTableRow({name, url, selector}, index) {
            const tableBody = document.getElementById('scrape-table-body');
            const row = document.createElement('tr');

            row.innerHTML = `
                <td><input type="text" value="${name}" onchange="updateRecord(${index}, 'name', this.value)"></td>
                <td><input type="text" value="${url}" onchange="updateRecord(${index}, 'url', this.value)"></td>
                <td><input type="text" value="${escapeHtml(selector)}" onchange="updateRecord(${index}, 'selector', this.value)"></td>
                <td id="result-${index}">-</td>
                <td id="timestamp-${index}">-</td>
                <td>
                    <button onclick="executeRecord(${index})">Execute</button>
                    <button onclick="removeRecord(${index})">Remove</button>
                    <button onclick="toggleDebugPanel(${index}, false)">View Debug</button>
                </td>
            `;
            tableBody.insertBefore(row, tableBody.lastChild);
        }

        function addNewRecord() {
            const name = document.getElementById('new-name').value;
            const url = document.getElementById('new-url').value;
            const selector = document.getElementById('new-selector').value;

            if (!name || !url || !selector) {
                alert('All fields are required!');
                return;
            }

            const record = {name, url, selector, result: '', response: '', timestamp: ''};
            let records = JSON.parse(localStorage.getItem(recordsKey)) || [];
            records.push(record);
            localStorage.setItem(recordsKey, JSON.stringify(records));

            const index = records.length - 1;
            addTableRow(record, index);
            executeScraping(url, selector, index);

            document.getElementById('new-name').value = '';
            document.getElementById('new-url').value = '';
            document.getElementById('new-selector').value = '';
        }

        function executeRecord(index) {
            const records = JSON.parse(localStorage.getItem(recordsKey)) || [];
            const {url, selector} = records[index];
            executeScraping(url, selector, index);
        }

        function executeScraping(url, selector, index) {
            const proxy = 'https://cors-anywhere.herokuapp.com/';
            const options = {
                headers: {
                    'Accept': 'text/html,application/xhtml+xml,application/xml;q=0.9,image/avif,image/webp,image/apng,*/*;q=0.8,application/signed-exchange;v=b3;q=0.9',
                    'Accept-Language': 'en-US,en;q=0.9'
                }
            };

            axios.get(proxy + url, options)
                .then(response => {
                    const parser = new DOMParser();
                    const doc = parser.parseFromString(response.data, 'text/html');
                    const resultElement = doc.querySelector(selector);
                    const resultText = resultElement ? resultElement.textContent.trim() : 'No matches';
                    updateResult(index, resultText, response.data);
                })
                .catch(error => {
                    console.error(`Error fetching the URL: ${url}`, error);
                    updateResult(index, `Error: ${error.message}`, error.response ? error.response.data : 'No Response Data');
                });
        }

        function updateResult(index, result, response) {
            const records = JSON.parse(localStorage.getItem(recordsKey)) || [];
            records[index].result = result;
            records[index].response = response;
            records[index].timestamp = new Date().toLocaleString();
            localStorage.setItem(recordsKey, JSON.stringify(records));

            document.getElementById(`result-${index}`).textContent = result;
            document.getElementById(`timestamp-${index}`).textContent = new Date().toLocaleString();
        }

        function updateRecord(index, field, value) {
            const records = JSON.parse(localStorage.getItem(recordsKey)) || [];
            records[index][field] = value;
            localStorage.setItem(recordsKey, JSON.stringify(records));
        }

        function removeRecord(index) {
            let records = JSON.parse(localStorage.getItem(recordsKey)) || [];
            records.splice(index, 1);
            localStorage.setItem(recordsKey, JSON.stringify(records));
            document.location.reload();
        }

        function toggleDebugPanel(index, close = false) {
            const debugPanel = document.getElementById('debug-panel');
            const debugContent = document.getElementById('debug-content');
            const records = JSON.parse(localStorage.getItem(recordsKey)) || [];

            if (close || index === null) {
                debugPanel.style.display = 'none';
                debugContent.innerHTML = '';
                return;
            }

            const responseText = records[index].response || 'No Debug Data';
            debugPanel.style.display = 'block';
            debugContent.innerHTML = escapeHtml(responseText);
        }

        function escapeHtml(text) {
            const map = {
                '&': '&amp;',
                '<': '&lt;',
                '>': '&gt;',
                '"': '&quot;',
                "'": '&#039;'
            };
            return text.replace(/[&<>"']/g, function(m) { return map[m]; });
        }
    </script>
</body>
</html>

instead of the use entry at the first row, make it at the last
also the error detail should have a cross button on the top right of the panel for it to be removed and return to the table. better the outside of this panel is darken and when the outside is click