@extends('layouts.main')

@section('content')
<div>
<style>
    /* Text cleaner specific styles */
    .tc-box {
        color: var(--color-black);
        background: var(--color-white);
        border: 1px solid var(--color-border);
        border-radius: 3px;
        margin-bottom: 1.5rem;
        padding: 1.5rem;
    }
    .tc-form-control {
        font-weight: 400;
        font-family: Arial;
        padding: .375rem .75rem;
        font-size: .9375rem;
        line-height: 1.5;
        color: var(--color-black);
        background-color: var(--color-white);
        background-clip: padding-box;
        border: 1px solid var(--color-border);
        transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
    }
    .tc-form-control:focus {
        border-color: var(--color-primary);
        outline: 0;
        z-index: 1000;
    }
    .tc-wrap-off {
        white-space: nowrap;
    }
    .tc-checkbox {
        position: relative;
        line-height: 18px;
        min-height: 18px;
        margin: 1rem 0;
    }
    .tc-checkbox label {
        position: relative;
        margin: 0;
        padding-left: 1.8rem;
        font-size: .875rem;
        cursor: pointer;
        color: var(--color-black);
    }
    .tc-checkbox input[type="checkbox"] {
        display: none;
    }
    .tc-checkbox label:before {
        content: ' ';
        position: absolute;
        top: 0;
        left: 0;
        width: 18px;
        height: 18px;
        border: 1px solid var(--color-border);
        background: var(--color-white);
    }
    .tc-checkbox label:after {
        content: ' ';
        width: 18px;
        height: 18px;
        position: absolute;
        top: 0;
        left: 0;
        border: 1px solid var(--color-primary);
        background: var(--color-primary) url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MTIgNTEyIj48cGF0aCBmaWxsPSIjZmZmIiBkPSJNMTczLjg5OCA0MzkuNDA0bC0xNjYuNC0xNjYuNGMtOS45OTctOS45OTctOS45OTctMjYuMjA2IDAtMzYuMjA0bDM2LjIwMy0zNi4yMDRjOS45OTctOS45OTggMjYuMjA3LTkuOTk4IDM2LjIwNCAwTDE5MiAzMTIuNjkgNDMyLjA5NSA3Mi41OTZjOS45OTctOS45OTcgMjYuMjA3LTkuOTk3IDM2LjIwNCAwbDM2LjIwMyAzNi4yMDRjOS45OTcgOS45OTcgOS45OTcgMjYuMjA2IDAgMzYuMjA0bC0yOTQuNCAyOTQuNDAxYy05Ljk5OCA5Ljk5Ny0yNi4yMDcgOS45OTctMzYuMjA0LS4wMDF6Ii8+PC9zdmc+") no-repeat;
        background-size: 12px 16px;
        background-position: center;
    }
    .tc-checkbox input:not(:checked) + label:after {
        opacity: 0;
    }
    .tc-checkbox input:checked + label:after {
        opacity: 1;
    }
    .tc-indent {
        margin-bottom: 1.5rem;
    }
    .tc-indent > b {
        display: block;
        margin-bottom: 1rem;
        color: var(--color-black);
    }
    .tc-form-inline {
        font-family: Arial;
        text-align: center;
        border: 0;
        border-bottom: 1px solid var(--color-border);
        width: 28px;
        color: var(--color-black);
        background: transparent;
    }

    /* Dark theme specific styles */
    [data-theme="dark"] .tc-box,
    .dark .tc-box {
        background: var(--color-dark-light);
        border-color: var(--color-dark-border);
        color: var(--color-white);
    }
    [data-theme="dark"] .tc-form-control,
    .dark .tc-form-control {
        background-color: var(--color-dark-lighter);
        border-color: var(--color-dark-border);
        color: var(--color-white);
    }
    [data-theme="dark"] .tc-checkbox label,
    .dark .tc-checkbox label {
        color: var(--color-white);
    }
    [data-theme="dark"] .tc-checkbox label:before,
    .dark .tc-checkbox label:before {
        border-color: var(--color-dark-border);
        background: var(--color-dark-lighter);
    }
    [data-theme="dark"] .tc-form-inline,
    .dark .tc-form-inline {
        border-bottom-color: var(--color-dark-border);
        color: var(--color-white);
    }
    [data-theme="dark"] .tc-indent > b,
    .dark .tc-indent > b {
        color: var(--color-white);
    }
    [data-theme="dark"] h2, 
    [data-theme="dark"] h3, 
    [data-theme="dark"] h5,
    .dark h2,
    .dark h3,
    .dark h5 {
        color: var(--color-white);
    }
    [data-theme="dark"] .btn-light,
    .dark .btn-light {
        background-color: var(--color-dark-lighter);
        border-color: var(--color-dark-border);
        color: var(--color-white);
    }
    [data-theme="dark"] .btn-light:hover,
    .dark .btn-light:hover {
        background-color: var(--color-dark-border);
        border-color: var(--color-dark-border);
        color: var(--color-white);
    }
    [data-theme="dark"] .table,
    .dark .table {
        color: var(--color-white);
    }
    [data-theme="dark"] .table-striped tbody tr:nth-of-type(odd),
    .dark .table-striped tbody tr:nth-of-type(odd) {
        background-color: var(--color-dark-lighter);
    }
    [data-theme="dark"] .table input.form-control,
    .dark .table input.form-control {
        background-color: var(--color-dark-lighter);
        border-color: var(--color-dark-border);
        color: var(--color-white);
    }
    [data-theme="dark"] .tc-radio label,
    .dark .tc-radio label {
        color: var(--color-white);
    }
    [data-theme="dark"] .tc-toast,
    .dark .tc-toast {
        background: var(--color-primary);
        color: var(--color-white);
    }
    [data-theme="dark"] .single-page-inner,
    .dark .single-page-inner {
        background: var(--color-dark-light);
        color: var(--color-white);
    }
    [data-theme="dark"] p,
    .dark p {
        color: var(--color-white);
    }
</style>
</div>

<div class="hero-section">
    <h2>{{ trans('webtools/homepage.title') }}</h2>
    <h1>{{ trans('webtools/homepage.heading') }}</h1>
</div>

@include("modules.tools.search-base")

<div class="single-page-sec">
    @include( $tool['templates']['header'], [
        'tool' => $tool['name']
    ] )

    <x-ads.top-banner />

    <div class="single-page-inner">
        <hr class="small-marg">
        <h2>{{ get_tool_title($tool['name'], $toolSettings->title) }}</h2>
        <p>{!! get_tool_description($tool['name'], $toolSettings->description) !!}</p>
        
        <!-- Text Cleaner Tool Interface -->
        <div class="tc-box">
            <div class="form-group w-100">
                <div class="position-relative">
                    <textarea id="tc-input" class="tc-form-control w-100" style="height:320px" placeholder="{{ trans('webtools/tools/text-cleaner.placeholder') }}"></textarea>
                    <button id="tc-copy" class="btn btn-light position-absolute" style="top:1px;right:1px;width:30px;height:30px;padding:0" title="{{ trans('webtools/tools/text-cleaner.copy_button') }}">
                        <i class="fas fa-copy"></i>
                    </button>
                </div>
            </div>
            
            <div class="text-center mt-3">
                <button id="tc-clean" class="btn btn-primary px-4" type="button">{{ trans('webtools/tools/text-cleaner.clean_button') }}</button>
                <button id="tc-undo" class="btn btn-light px-4 ms-2" type="button">{{ trans('webtools/tools/text-cleaner.undo_button') }}</button>
            </div>
            
            <div class="mt-4">
                <h5 class="text-uppercase mb-3">{{ trans('webtools/tools/text-cleaner.settings_title') }}</h5>
                <div class="row">
                    <!-- Whitespace Settings -->
                    <div class="col-md-4">
                        <div class="tc-indent">
                            <b>{{ trans('webtools/tools/text-cleaner.whitespace_section') }}</b>
                            <div class="tc-checkbox">
                                <input type="checkbox" id="tc-trim-yes">
                                <label for="tc-trim-yes">{{ trans('webtools/tools/text-cleaner.trim_option') }}</label>
                            </div>
                            <div class="tc-checkbox">
                                <input type="checkbox" id="tc-trim-lead">
                                <label for="tc-trim-lead">{{ trans('webtools/tools/text-cleaner.remove_leading_spaces') }}</label>
                            </div>
                            <div class="tc-checkbox">
                                <input type="checkbox" id="tc-trim-trail">
                                <label for="tc-trim-trail">{{ trans('webtools/tools/text-cleaner.remove_trailing_spaces') }}</label>
                            </div>
                            <div class="tc-checkbox">
                                <input type="checkbox" id="tc-spaces-tab">
                                <label for="tc-spaces-tab">{{ trans('webtools/tools/text-cleaner.replace_spaces_with_tab') }} <input id="tc-num-st" type="number" class="tc-form-inline" value="4"> space/s with 1 tab</label>
                            </div>
                            <div class="tc-checkbox">
                                <input type="checkbox" id="tc-tab-spaces">
                                <label for="tc-tab-spaces">{{ trans('webtools/tools/text-cleaner.replace_tab_with_spaces') }} <input id="tc-num-ts" type="number" class="tc-form-inline" value="1"> space/s</label>
                            </div>
                            <div class="tc-checkbox">
                                <input type="checkbox" id="tc-del-blank">
                                <label for="tc-del-blank">{{ trans('webtools/tools/text-cleaner.remove_blank_lines') }}</label>
                            </div>
                            <div class="tc-checkbox">
                                <input type="checkbox" id="tc-lb-space">
                                <label for="tc-lb-space">{{ trans('webtools/tools/text-cleaner.replace_line_break_with_space') }}</label>
                            </div>
                            <div class="tc-checkbox">
                                <input type="checkbox" id="tc-crunch-space">
                                <label for="tc-crunch-space">{{ trans('webtools/tools/text-cleaner.multiple_spaces_to_single') }}</label>
                            </div>
                            <div class="tc-checkbox">
                                <input type="checkbox" id="tc-crunch-line">
                                <label for="tc-crunch-line">{{ trans('webtools/tools/text-cleaner.multiple_blank_lines_to_single') }}</label>
                            </div>
                            <div class="tc-checkbox">
                                <input type="checkbox" id="tc-del-lb">
                                <label for="tc-del-lb">{{ trans('webtools/tools/text-cleaner.remove_all_line_breaks') }}</label>
        </div>
        </div>
    </div>
                    
                    <!-- Characters Settings -->
                    <div class="col-md-4">
                        <div class="tc-indent">
                            <b>{{ trans('webtools/tools/text-cleaner.characters_section') }}</b>
                            <div class="tc-checkbox">
                                <input type="checkbox" id="tc-del-punc">
                                <label for="tc-del-punc">{{ trans('webtools/tools/text-cleaner.remove_punctuation') }}</label>
                            </div>
                            <div class="tc-checkbox">
                                <input type="checkbox" id="tc-del-emj">
                                <label for="tc-del-emj">{{ trans('webtools/tools/text-cleaner.strip_emojis') }}</label>
                            </div>
                            <div class="tc-checkbox">
                                <input type="checkbox" id="tc-del-dia">
                                <label for="tc-del-dia">{{ trans('webtools/tools/text-cleaner.remove_accents') }}</label>
                            </div>
                            <div class="tc-checkbox">
                                <input type="checkbox" id="tc-normalize-letters">
                                <label for="tc-normalize-letters">{{ trans('webtools/tools/text-cleaner.normalize_unicode') }}</label>
                </div>
                            <div class="tc-checkbox">
                                <input type="checkbox" id="tc-del-unk">
                                <label for="tc-del-unk">{{ trans('webtools/tools/text-cleaner.remove_replacement_character') }}</label>
            </div>
                            <div class="tc-checkbox">
                                <input type="checkbox" id="tc-del-non-ascii">
                                <label for="tc-del-non-ascii">{{ trans('webtools/tools/text-cleaner.remove_non_ascii_characters') }}</label>
                </div>
                            <div class="tc-checkbox">
                                <input type="checkbox" id="tc-del-non-alphanum">
                                <label for="tc-del-non-alphanum">{{ trans('webtools/tools/text-cleaner.remove_non_alphanumeric') }}</label>
                </div>
            </div>
                        <div class="tc-indent">
                            <b>{{ trans('webtools/tools/text-cleaner.other_section') }}</b>
                            <div class="tc-checkbox">
                                <input type="checkbox" id="tc-del-mail">
                                <label for="tc-del-mail">{{ trans('webtools/tools/text-cleaner.strip_emails') }}</label>
                </div>
                            <div class="tc-checkbox">
                                <input type="checkbox" id="tc-del-bbcode">
                                <label for="tc-del-bbcode">{{ trans('webtools/tools/text-cleaner.remove_bbcode_tags') }}</label>
                </div>
                            <div class="tc-checkbox">
                                <input type="checkbox" id="tc-del-html">
                                <label for="tc-del-html">{{ trans('webtools/tools/text-cleaner.strip_html_tags') }}</label>
                </div>
            </div>
        </div>
                    
                    <!-- Text Formatting Settings -->
                    <div class="col-md-4">
                        <div class="tc-indent">
                            <b>{{ trans('webtools/tools/text-cleaner.letter_case_section') }}</b>
                            <div class="tc-radio">
                                <input type="radio" name="letter_case" id="tc-case-upper">
                                <label for="tc-case-upper">{{ trans('webtools/tools/text-cleaner.uppercase') }}</label>
                            </div>
                            <div class="tc-radio">
                                <input type="radio" name="letter_case" id="tc-case-lower">
                                <label for="tc-case-lower">{{ trans('webtools/tools/text-cleaner.lowercase') }}</label>
                            </div>
                            <div class="tc-radio">
                                <input type="radio" name="letter_case" id="tc-case-sentence">
                                <label for="tc-case-sentence">{{ trans('webtools/tools/text-cleaner.sentence_case') }}</label>
                            </div>
                            <div class="tc-radio">
                                <input type="radio" name="letter_case" id="tc-case-capitalize">
                                <label for="tc-case-capitalize">{{ trans('webtools/tools/text-cleaner.capitalize_each_word') }}</label>
                            </div>
                            <div class="tc-radio">
                                <input type="radio" name="letter_case" id="tc-case-none" checked>
                                <label for="tc-case-none">{{ trans('webtools/tools/text-cleaner.do_not_change') }}</label>
                            </div>
                        </div>
                        <div class="tc-indent">
                            <b>{{ trans('webtools/tools/text-cleaner.quotes_section') }}</b>
                            <div class="tc-checkbox">
                                <input type="checkbox" id="tc-curly-straight">
                                <label for="tc-curly-straight">{{ trans('webtools/tools/text-cleaner.smart_quotes_to_regular') }}</label>
                            </div>
                            <div class="tc-checkbox">
                                <input type="checkbox" id="tc-straight-curly">
                                <label for="tc-straight-curly">{{ trans('webtools/tools/text-cleaner.regular_quotes_to_smart') }}</label>
                </div>
                </div>
            </div>
                </div>
                
                <div class="text-center mt-3">
                    <button id="tc-select-all" class="btn btn-sm btn-light">Select All</button>
                    <button id="tc-select-none" class="btn btn-sm btn-light ms-2">Select None</button>
                    <button id="tc-select-default" class="btn btn-sm btn-light ms-2">Default</button>
                </div>

                <div class="mt-4">
                    <h3>Find and Replace</h3>
                    <table class="table table-striped w-100">
                        <tbody id="tc-fnr-body"></tbody>
                    </table>
                    <div class="text-center">
                        <button id="tc-fnr-add" class="btn btn-sm btn-light">
                            <i class="fas fa-plus"></i>
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <x-ads.middle-banner />
</div>

<!-- Related Tools Section -->
<div class="content-sec">
    <div class="content-sec-inner">
        <div class="content-title-sec">
            <div class="content-title-icon">
                <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
                    <path id="chart-relationship" d="M29.25,6.75a4.5,4.5,0,0,0-4.34,3.375H20.171A8.995,8.995,0,1,0,10.125,20.171V24.91a4.5,4.5,0,1,0,2.25,0V20.173A8.945,8.945,0,0,0,16.76,18.35l4.128,4.129a4.447,4.447,0,0,0-.638,2.271,4.5,4.5,0,1,0,4.5-4.5,4.446,4.446,0,0,0-2.271.638L18.35,16.759a8.944,8.944,0,0,0,1.823-4.384H24.91A4.492,4.492,0,1,0,29.25,6.75Z" transform="translate(-2.251 -2.251)" fill="#fff"/>
                </svg>
            </div>
            <h3>{{ trans('webtools/general.related') }}</h3>
        </div>
        <div class="content-cats-sec">
            @foreach($related as $toolKey => $relatedTool)
                @if($relatedTool['name'] != $tool['name'])
                    @if($toolOptions['tool-' . $relatedTool['name'] . '.' . 'enabled'][0]->payload != 'false')
                        <div class="content-cats-col">
                            <a href="{{ !can_use($toolKey) ? route('pricing') : route('tool', $toolSlugs->{$toolKey}) }}" class="content-cats-inner {{ !can_use($toolKey) ? 'locked' : '' }}">
                                @include($relatedTool['templates']['selector'], [
                                    'tool'    => $relatedTool['name'],
                                    'title'   => get_tool_title($relatedTool['name'], str_replace('"', '', $toolOptions['tool-' . $relatedTool['name'] . '.' . 'title'][0]->payload)),
                                    'summary' => get_tool_summary($relatedTool['name'], str_replace('"', '', $toolOptions['tool-' . $relatedTool['name'] . '.' . 'summary'][0]->payload)),
                                ])
                            </a>
                        </div>
                    @endif
                @endif
            @endforeach
        </div>
    </div>

    <x-ads.bottom-banner />
</div>

@push('scripts')
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
window.addEventListener('load', function() {
    // Text Cleaner Functionality
    (function($) {
        const area = $("#tc-input");
        let History = (function() {
            let stack = [];
            let pointer = 0;
            
            return {
                remember: function(text) {
                    if (stack[pointer - 1] !== text) {
                        stack.splice(pointer, 20);
                        stack.push(text);
                        stack.splice(0, stack.length - 20);
                        pointer = stack.length;
                    }
                },
                undo: function() {
                    if (pointer > 1) {
                        return stack[--pointer - 1];
                    }
                },
                forget: function() {
                    stack = [];
                }
            };
        })();

        // Save settings to localStorage
        function saveConfig() {
            let config = {};
            $(".tc-checkbox input, .tc-radio input").each(function() {
                config[this.id] = $(this).prop("checked");
            });
            $("input[type='number']").each(function() {
                config[this.id] = $(this).val();
            });
            localStorage.setItem("tc-config", JSON.stringify(config));
        }

        // Load settings from localStorage
        function loadConfig() {
            let config = localStorage.getItem("tc-config");
            if (config) {
                config = JSON.parse(config);
                for (let id in config) {
                    let el = $("#" + id);
                    if (el.is(":checkbox") || el.is(":radio")) {
                        el.prop("checked", config[id]);
                    } else if (el.is("input[type='number']")) {
                        el.val(config[id]);
                    }
                }
            } else {
                $("#tc-select-default").click();
            }
        }

        // Save Find & Replace entries to localStorage
        function saveFnR() {
            let fnr = [];
            $("#tc-fnr-body tr").each(function() {
                fnr.push({
                    find: $(this).find(".tc-find").val(),
                    replace: $(this).find(".tc-replace").val()
                });
            });
            localStorage.setItem("tc-fnr", JSON.stringify(fnr));
        }

        // Load Find & Replace entries from localStorage
        function loadFnR() {
            let fnr = localStorage.getItem("tc-fnr");
            if (fnr) {
                fnr = JSON.parse(fnr);
                fnr.forEach(function(item) {
                    $("#tc-fnr-body").append(`
                        <tr>
                            <td><input type="text" class="form-control form-control-sm tc-find" value="${item.find}" placeholder="{{ trans('webtools/tools/text-cleaner.find_placeholder') }}"></td>
                            <td><input type="text" class="form-control form-control-sm tc-replace" value="${item.replace}" placeholder="{{ trans('webtools/tools/text-cleaner.replace_placeholder') }}"></td>
                            <td><button class="btn btn-sm btn-light tc-fnr-remove"><i class="fas fa-times"></i></button></td>
                        </tr>
                    `);
                });
            }
        }

        // Save settings when changed
        $("input").on("change", function() {
            saveConfig();
        });

        // Save Find & Replace when changed
        $(document).on("input", ".tc-find, .tc-replace", function() {
            saveFnR();
        });

        // Load saved settings and Find & Replace entries
        loadConfig();
        loadFnR();

        function stripHTMLTags(text) {
            let div = document.createElement("div");
            div.innerHTML = text;
            return div.textContent || div.innerText || "";
        }

        function decodeEntities(text) {
            let textarea = document.createElement("textarea");
            textarea.innerHTML = text;
            return textarea.value;
        }

        function repeatStr(str, count) {
            return count <= 0 ? "" : new Array(count + 1).join(str);
        }

        function SpacestoTab(text, numSpaces) {
            let spaces = repeatStr(" ", numSpaces);
            return text.replace(new RegExp(spaces, "g"), "\t");
        }

        function wordCase(text) {
            return text.toLowerCase().replace(/(?:^|\s)\S/g, function(a) { return a.toUpperCase(); });
        }

        function StraightenQuotes(text) {
            return text.replace(/['']|'/g, "'").replace(/[""]|"/g, '"');
        }

        function SmartenQuotes(text) {
            return text
                .replace(/(\W|^)"(\S)/g, "$1\u201C$2")
                .replace(/([\w)»])"(?=\W|$)/g, "$1\u201D")
                .replace(/(\W|^)'(\S)/g, "$1\u2018$2")
                .replace(/([\w)»])'(?=\W|$)/g, "$1\u2019");
        }

        $("#tc-clean").on("click", function() {
            let text = area.val();
            History.remember(text);

            // Apply selected transformations
            if ($("#tc-trim-yes").prop("checked")) {
                text = text.trim();
            }
            if ($("#tc-trim-lead").prop("checked")) {
                text = text.replace(/^[^\S\r\n]+/gm, "");
            }
            if ($("#tc-trim-trail").prop("checked")) {
                text = text.replace(/[^\S\r\n]+$/gm, "");
            }
            if ($("#tc-spaces-tab").prop("checked")) {
                let numSpaces = parseInt($("#tc-num-st").val()) || 4;
                text = SpacestoTab(text, numSpaces);
            }
            if ($("#tc-tab-spaces").prop("checked")) {
                let numSpaces = parseInt($("#tc-num-ts").val()) || 1;
                text = text.replace(/\t/g, repeatStr(" ", numSpaces));
            }
            if ($("#tc-del-blank").prop("checked")) {
                text = text.split("\n").filter(line => /\S/.test(line)).join("\n");
            }
            if ($("#tc-lb-space").prop("checked")) {
                text = text.replace(/\n/g, " ");
            }
            if ($("#tc-crunch-space").prop("checked")) {
                text = text.replace(/  +/g, " ");
            }
            if ($("#tc-crunch-line").prop("checked")) {
                text = text.replace(/\n\s*\n\s*\n/g, "\n\n");
            }
            if ($("#tc-del-lb").prop("checked")) {
                text = text.replace(/\n/g, "");
            }
            if ($("#tc-del-punc").prop("checked")) {
                text = text.replace(/[.,?!'":;\-\u2013\u2014]/g, "");
            }
            if ($("#tc-del-emj").prop("checked")) {
                text = text.replace(/[\u{1F300}-\u{1F6FF}\u{1F900}-\u{1F9FF}]/gu, "");
            }
            if ($("#tc-del-dia").prop("checked")) {
                text = text.normalize("NFD").replace(/[\u0300-\u036f]/g, "");
            }
            if ($("#tc-normalize-letters").prop("checked")) {
                text = text.normalize("NFKC");
            }
            if ($("#tc-del-unk").prop("checked")) {
                text = text.replace(/\uFFFD/g, "");
            }
            if ($("#tc-del-non-ascii").prop("checked")) {
                text = text.replace(/[^\x00-\x7F]/g, "");
            }
            if ($("#tc-del-non-alphanum").prop("checked")) {
                text = text.replace(/[^\w\s]/g, "");
            }
            if ($("#tc-del-mail").prop("checked")) {
                text = text.replace(/([a-zA-Z0-9._-]+@[a-zA-Z0-9._-]+\.[a-zA-Z0-9_-]+)/gi, "");
            }
            if ($("#tc-del-bbcode").prop("checked")) {
                text = text.replace(/\[\/?(?:b|i|u|s|url|img|quote|code|size|color|center|list|\*)\]|\[(?:url|color|size)=[^\]]*\]/gi, "");
            }
            if ($("#tc-del-html").prop("checked")) {
                text = stripHTMLTags(text);
            }
            if ($("#tc-strip-style").prop("checked")) {
                text = text.replace(/ style="[^"]*"/g, "");
            }
            if ($("#tc-decode-entities").prop("checked")) {
                text = decodeEntities(text);
            }

            // Case transformations
            if ($("#tc-case-upper").prop("checked")) {
                text = text.toUpperCase();
            } else if ($("#tc-case-lower").prop("checked")) {
                text = text.toLowerCase();
            } else if ($("#tc-case-sentence").prop("checked")) {
                text = text.toLowerCase().replace(/(^|\.\s+|\!\s+|\?\s+)([a-z])/g, 
                    function(m, p1, p2) { return p1 + p2.toUpperCase(); });
            } else if ($("#tc-case-capitalize").prop("checked")) {
                text = wordCase(text);
            }

            // Quote transformations
            if ($("#tc-curly-straight").prop("checked")) {
                text = StraightenQuotes(text);
            }
            if ($("#tc-straight-curly").prop("checked")) {
                text = SmartenQuotes(text);
            }

            // Find and Replace
            $("#tc-fnr-body tr").each(function() {
                let find = $(this).find(".tc-find").val();
                let replace = $(this).find(".tc-replace").val();
                if (find) {
                    text = text.split(find).join(replace);
                }
            });

            area.val(text);
            showToast("Text cleaned successfully!");
        });

        $("#tc-undo").on("click", function() {
            let text = History.undo();
            if (text !== undefined) {
                area.val(text);
            }
        });

        $("#tc-copy").on("click", function() {
            area.select();
            document.execCommand("copy");
            showToast("Copied to clipboard!");
        });

        $("#tc-select-all").on("click", function() {
            $(".tc-checkbox input, .tc-radio input").prop("checked", true);
            $("#tc-case-none").prop("checked", false);
        });

        $("#tc-select-none").on("click", function() {
            $(".tc-checkbox input, .tc-radio input").prop("checked", false);
            $("#tc-case-none").prop("checked", true);
        });

        $("#tc-select-default").on("click", function() {
            $(".tc-checkbox input, .tc-radio input").prop("checked", false);
            $("#tc-case-none").prop("checked", true);
            $("#tc-trim-yes, #tc-trim-lead, #tc-trim-trail, #tc-crunch-space, #tc-crunch-line, #tc-del-emj, #tc-normalize-letters, #tc-del-non-ascii, #tc-del-unk, #tc-decode-entities").prop("checked", true);
        });

        // Find and Replace functionality
        $("#tc-fnr-add").on("click", function() {
            $("#tc-fnr-body").append(`
                <tr>
                    <td><input type="text" class="form-control form-control-sm tc-find" placeholder="{{ trans('webtools/tools/text-cleaner.find_placeholder') }}"></td>
                    <td><input type="text" class="form-control form-control-sm tc-replace" placeholder="{{ trans('webtools/tools/text-cleaner.replace_placeholder') }}"></td>
                    <td><button class="btn btn-sm btn-light tc-fnr-remove"><i class="fas fa-times"></i></button></td>
                </tr>
            `);
        });

        $(document).on("click", ".tc-fnr-remove", function() {
            $(this).closest("tr").remove();
        });

        // Initialize with default settings
        $("#tc-select-default").click();

        // Add toast notification
        let toastTimeout;
        function showToast(message) {
            clearTimeout(toastTimeout);
            let toast = $("<div>").addClass("tc-toast").text(message);
            $(".tc-toast").remove();
            $("body").append(toast);
            toastTimeout = setTimeout(function() {
                toast.fadeOut(function() {
                    $(this).remove();
                });
            }, 2000);
        }

        // Add toast styles
        $("<style>").text(`
            .tc-toast {
                position: fixed;
                top: 20px;
                right: 20px;
                background: #4c3ff2;
                color: white;
                padding: 12px 24px;
                border-radius: 4px;
                z-index: 9999;
                box-shadow: 0 2px 5px rgba(0,0,0,0.2);
            }
        `).appendTo("head");

    })(jQuery);
});
</script>
@endpush

@endsection