<%- include('partials/header', { title: 'Debugging' }) %>

<!-- Page Header -->

<div class="row mb-3">
    <div class="col-12">
        <h1>Debugging</h1>
    </div>
</div>

<!-- Download Ruleset -->

<div class="row mb-3">
    <div class="col-12">
        <div class="alert alert-info" role="alert">
            <div><a href="/debug/ruleset" class="btn btn-link">Download debugging ruleset</a></div>
        </div>
    </div>
</div>

<!-- Main Content -->

<div class="row">
    <div class="col-12">
        <div class="accordion" id="accordionExample">

            <!-- Item 1: Find and Replace Text -->

            <div class="accordion-item">
                <h2 class="accordion-header">
                    <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
                        data-bs-target="#collapseOne" aria-expanded="false" aria-controls="collapseOne">
                        Find and Replace Text
                    </button>
                </h2>
                <div id="collapseOne" class="accordion-collapse collapse" data-bs-parent="#accordionExample">
                    <div class="accordion-body">
                        <div class="alert alert-info" role="alert">
                            <b>Steps:</b>
                            <ol>
                                <li>Add a <b>Response - Modify Body</b> rule.</li>
                                <li>Set the dropdown to <i>Contains</i> and the <b>URL</b> to <i>localhost:3000/debug</i></li>
                                <li>Set <b>Find</b> to <i>/debug/eco</i>.</li>
                                <li>Set <b>Replace</b> to <i>/debug/echo</i>.</li>
                                <li>Click the <b>Enable</b> checkbox to enable the rule.</li>
                            </ol>
                        </div>
                        <form>
                            <div class="mb-3">
                                <label for="find-replace-text-input" class="form-label">Enter your name:</label>
                                <input type="text" class="form-control" id="find-replace-text-input" aria-describedby="findReplaceTextHelp" />
                            </div>
                            <button type="button" class="btn btn-primary" onclick="echo()">Submit</button>
                        </form>
                        <div class="mt-3">
                            <span id="find-replace-text-output" class="fw-bold"></span>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Item 2: Find Text -->

            <div class="accordion-item">
                <h2 class="accordion-header">
                    <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
                        data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
                        Find Text
                    </button>
                </h2>
                <div id="collapseTwo" class="accordion-collapse collapse" data-bs-parent="#accordionExample">
                    <div class="accordion-body">
                        <div class="alert alert-info" role="alert">
                            <b>Steps:</b>
                            <ol>
                                <li>
                                    Find a magic value.
                                    <ul>
                                        <li>Add a <b>Response - Body Contains</b> rule.</li>
                                        <li>Set the dropdown to <i>Contains</i> and the <b>URL</b> to <i>localhost:3000</i></li>
                                        <li>Set <b>Find</b> to <i>abc123</i>.</li>
                                        <li>Click the <b>Enable</b> checkbox to enable the rule.</li>
                                    </ul>
                                </li>
                                <li>
                                    Disable the call that gets the magic value.
                                    <ul>
                                        <li>Add a <b>Response - Modify Body</b> rule.</li>
                                        <li>Set the dropdown to <i>Contains</i> and the <b>URL</b> to <i>localhost:3000/debug</i></li>
                                        <li>Set <b>Find</b> to <i>await findText()</i>.</li>
                                        <li>Set <b>Replace</b> to <i>//await findText()</i>.</li>
                                        <li>Click the <b>Enable</b> checkbox to enable the rule.</li>
                                        <li><i><b>Note:</b> The <b>Find</b> textbox uses regular expressions under the hood, but it is not fully supported yet. You might encounter some issues when using special characters. For example, put a semicolon at the end of the line at the end of the <b>Find</b> text.</i></li>
                                    </ul>
                                </li>
                            </ol>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Item 3: Insert and Modify JavaScript -->

            <div class="accordion-item">
                <h2 class="accordion-header">
                    <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
                        data-bs-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
                        Modify JavaScript (insert and modify)
                    </button>
                </h2>
                <div id="collapseThree" class="accordion-collapse collapse" data-bs-parent="#accordionExample">
                    <div class="accordion-body">
                        <div class="alert alert-info" role="alert">
                            <b>Steps:</b>
                            <ol>
                                <li>
                                    Insert a new script.
                                    <ul>
                                        <li>Add a <b>Response - Modify Body</b> rule.</li>
                                        <li>Set the dropdown to <i>Contains</i> and the <b>URL</b> to <i>localhost:3000/debug</i></li>
                                        <li>Set <b>Find</b> to <i>&lt;!-- Scripts --&gt;</i>.</li>
                                        <li>Set <b>Replace</b> to <i>&lt;!-- Scripts --&gt;&lt;script src="/js/debug-sample.js"&gt;&lt;/script&gt;</i>.</li>
                                        <li>Click the <b>Enable</b> checkbox to enable the rule.</li>
                                    </ul>
                                </li>
                                <li>
                                    Change the dynamically added script.
                                    <ul>
                                        <li>Add a <b>Response - Modify Body</b> rule.</li>
                                        <li>Set the dropdown to <i>Contains</i> and the <b>URL</b> to <i>localhost:3000/js/debug-sample.js</i></li>
                                        <li>Set <b>Find</b> to <i>This text</i>.</li>
                                        <li>Set <b>Replace</b> to <i>This AMAZING text</i>.</li>
                                        <li>Click the <b>Enable</b> checkbox to enable the rule.</li>
                                        <li><i><b>Note:</b> You might need to do a hard refresh to see the changes.</i></li>
                                    </ul>
                                </li>
                            </ol>
                        </div>
                        <div id="insert-script" class="fw-bold"></div>
                    </div>
                </div>
            </div>

            <!-- Item 4: Modify Headers -->

            <div class="accordion-item">
                <h2 class="accordion-header">
                    <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
                        data-bs-target="#collapseFour" aria-expanded="false" aria-controls="collapseFour">
                        Modify Headers (append/remove)
                    </button>
                </h2>
                <div id="collapseFour" class="accordion-collapse collapse" data-bs-parent="#accordionExample">
                    <div class="accordion-body">
                        <div class="alert alert-info" role="alert">
                            <b>Steps:</b>
                            <ol>
                                <li>
                                    Append a header value.
                                    <ul>
                                        <li>Add a <b>Request - Append Header</b> rule.</li>
                                        <li>Set the dropdown to <i>Contains</i> and the <b>URL</b> to <i>localhost:3000/debug</i></li>
                                        <li>Set <b>Header Name</b> to <i>accept</i>.</li>
                                        <li>Set <b>Header Value</b> to <i>hello</i>.</li>
                                        <li>Click the <b>Enable</b> checkbox to enable the rule.</li>
                                    </ul>
                                </li>
                                <li>
                                    Remove header.
                                    <ul>
                                        <li>Add a <b>Response - Remove Header</b> rule.</li>
                                        <li>Set the dropdown to <i>Contains</i> and the <b>URL</b> to <i>localhost:3000/debug</i></li>
                                        <li>Set <b>Header Name</b> to <i>etag</i>.</li>
                                        <li>Click the <b>Enable</b> checkbox to enable the rule.</li>
                                    </ul>
                                </li>
                                <!--<li>
                                    Set UserAgent to a custom value using the Settings window.
                                    <ul>
                                        <li>Open the Settings window by clicking the gear icon at the top right corner of the browser.</li>
                                        <li>Set <b>User Agent</b> to <i>Twist Browser</i>.</li>
                                        <li>Close the Settings window and refresh the page.</li>
                                    </ul>
                                </li>-->
                            </ol>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Item 5: Form Fix -->

            <div class="accordion-item">
                <h2 class="accordion-header">
                    <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
                        data-bs-target="#collapseFive" aria-expanded="false" aria-controls="collapseFive">
                        Form Fix
                    </button>
                </h2>
                <div id="collapseFive" class="accordion-collapse collapse" data-bs-parent="#accordionExample">
                    <div class="accordion-body">
                        <div class="alert alert-info" role="alert">
                            <b>Steps:</b>
                            <ol>
                                <li>Add a <b>Response - Modify Body</b> rule.</li>
                                <li>Set the dropdown to <i>Contains</i> and the <b>URL</b> to <i>localhost:3000/debug</i></li>
                                <li>Set <b>Find</b> to <i>form action="/debug/formfix"</i>.</li>
                                <li>Set <b>Replace</b> to <i>form method="post" action="/debug/form-fix"</i>.</li>
                                <li>Click the <b>Enable</b> checkbox to enable the rule.</li>
                                <li><i><b>Note:</b> The <b>Find</b> textbox uses regular expressions under the hood, but it is not fully supported yet. You might encounter some issues when using special characters.</i></li>
                            </ol>
                        </div>
                        <form action="/debug/formfix">
                            <div class="mb-3">
                                <label for="content-type-input" class="form-label">Enter your name</label>
                                <input type="text" class="form-control" id="content-type-input" name="content-type-input" aria-describedby="contentTypeHelp" />
                            </div>
                            <button type="submit" class="btn btn-primary">Submit</button>
                        </form>
                    </div>
                </div>
            </div>

            <!-- Item 6: Change Status Code -->

            <div class="accordion-item">
                <h2 class="accordion-header">
                    <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
                        data-bs-target="#collapseSix" aria-expanded="false" aria-controls="collapseSix">
                        Change Status Code
                    </button>
                </h2>
                <div id="collapseSix" class="accordion-collapse collapse" data-bs-parent="#accordionExample">
                    <div class="accordion-body">
                        <div class="alert alert-info" role="alert">
                            <b>Steps:</b>
                            <ol>    
                                <li>Add a <b>Response - Change Status Code</b> rule.</li>
                                <li>Set the dropdown to <i>Contains</i> and the <b>URL</b> to <i>localhost:3000/debug/status-code</i></li>
                                <li>Set <b>New Status Code</b> to <i>401</i>.</li>
                                <li>Click the <b>Enable</b> checkbox to enable the rule.</li>
                            </ol>
                        </div>
                        <div>
                            <button type="submit" class="btn btn-primary" onclick="changeStatusCode()">Submit</button>
                        </div>
                        <div class="mt-3">
                            <span id="status-code-output" class="fw-bold"></span>
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </div>
</div>

<!-- Bottom Nav -->

<div class="row my-3">
    <div class="col-12 d-flex flex-column flex-sm-row justify-content-between gap-2">
        <a href="/import-export" class="btn btn-link px-0">&lt; Import / Export</a>
        <a href="/work-poc" class="btn btn-link px-0 ms-sm-auto">Work POC &gt;</a>
    </div>
</div>

<!-- Scripts -->

<script>
    async function echo() {
        const name = $('#find-replace-text-input').val();
        const output = $('#find-replace-text-output');
        output.removeClass('text-danger');

        try {
            const response = await fetch('/debug/eco', {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify({ name })
            });
            const data = await response.json();
            output.text(data.message);
        } catch (error) {
            output.addClass('text-danger');
            output.text('An error occurred. Please try again.');
            console.error('Error:', error);
        }
    }

    async function findText() {
        const response = await fetch('/debug/find-magic-text', {
            method: 'GET',
            headers: { 'Content-Type': 'application/json' }
        });
        const data = await response.json();
        console.log(data.value);
    }

    async function changeStatusCode() {
        const response = await fetch('/debug/status-code');
        $('#status-code-output').text(response.status);
    }

    $(async () => {
        await findText();
    });
</script>

<%- include('partials/footer') %>
