@extends('dashboard.layouts.master')

@section('title','Clocker')
@section('description', 'Manage clocker blocking rules')
@section('page-css')
    <style>
        .country-item {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            background: #f0f0f0;
            border: 1px solid #ddd;
            border-radius: 20px;
            padding: 4px 12px 4px 8px;
            margin: 3px;
            font-size: 13px;
        }
        .country-item .remove-country {
            cursor: pointer;
            color: #999;
            font-weight: bold;
            margin-left: 4px;
        }
        .country-item .remove-country:hover { color: #e00; }
        .country-flag { font-size: 18px; }
        .country-selector { position: relative; }
        .country-dropdown {
            position: absolute;
            z-index: 1050;
            background: #fff;
            border: 1px solid #ddd;
            border-radius: 8px;
            max-height: 300px;
            overflow-y: auto;
            width: 100%;
            display: none;
            box-shadow: 0 4px 12px rgba(0,0,0,0.15);
        }
        .country-dropdown.show { display: block; }
        .country-dropdown-item {
            padding: 8px 14px;
            cursor: pointer;
            display: flex;
            align-items: center;
            gap: 8px;
        }
        .country-dropdown-item:hover { background: #f5f5f5; }
        .country-dropdown-item.selected { background: #e8f4e8; }
        .selected-countries { display: flex; flex-wrap: wrap; gap: 2px; margin-bottom: 8px; min-height: 40px; padding: 6px; border: 1px solid #ddd; border-radius: 8px; background: #fafafa; }
        .toggle-group { display: flex; align-items: center; gap: 10px; padding: 10px 0; }
        .toggle-group label { margin: 0; font-weight: 500; }
        .custom-switch .custom-control-label::before { width: 2.5rem; border-radius: 1.25rem; }
        .custom-switch .custom-control-label::after { width: 1.25rem; height: 1.25rem; border-radius: 50%; }
        .custom-switch .custom-control-input:checked ~ .custom-control-label::after { transform: translateX(1rem); }
    </style>
@endsection
@section('main-content')
    <div class="d-flex justify-content-between align-items-center mb-4">
        <h4 class="mb-0">Clocker</h4>
        <div class="form-check form-switch" title="Enable/Disable Clocker">
            <input class="form-check-input" type="checkbox" id="clocker_status" {{ $rules->status ? 'checked' : '' }}>
        </div>
    </div>

    <div class="row">
        <div class="col-md-12 mb-4">
            <div class="nav-align-top">
                <ul class="nav nav-pills mb-4 nav-fill" id="pills-tab" role="tablist">
                    <li class="nav-item mb-1 mb-sm-0">
                        <button type="button" class="nav-link active" role="tab" data-bs-toggle="tab" data-bs-target="#pills-toggles" aria-selected="true">
                            <span class="d-none d-sm-inline-flex align-items-center"><i class="icon-base ri ri-shield-check-line icon-sm me-1_5"></i>Toggles</span>
                            <i class="icon-base ri ri-shield-check-line icon-sm d-sm-none"></i>
                        </button>
                    </li>
                    <li class="nav-item mb-1 mb-sm-0">
                        <button type="button" class="nav-link" role="tab" data-bs-toggle="tab" data-bs-target="#pills-countries">
                            <span class="d-none d-sm-inline-flex align-items-center"><i class="icon-base ri ri-flag-line icon-sm me-1_5"></i>Countries</span>
                            <i class="icon-base ri ri-flag-line icon-sm d-sm-none"></i>
                        </button>
                    </li>
                    <li class="nav-item mb-1 mb-sm-0">
                        <button type="button" class="nav-link" role="tab" data-bs-toggle="tab" data-bs-target="#pills-ua">
                            <span class="d-none d-sm-inline-flex align-items-center"><i class="icon-base ri ri-robot-line icon-sm me-1_5"></i>User Agents</span>
                            <i class="icon-base ri ri-robot-line icon-sm d-sm-none"></i>
                        </button>
                    </li>
                    <li class="nav-item mb-1 mb-sm-0">
                        <button type="button" class="nav-link" role="tab" data-bs-toggle="tab" data-bs-target="#pills-referrers">
                            <span class="d-none d-sm-inline-flex align-items-center"><i class="icon-base ri ri-links-line icon-sm me-1_5"></i>Referrers</span>
                            <i class="icon-base ri ri-links-line icon-sm d-sm-none"></i>
                        </button>
                    </li>
                    <li class="nav-item mb-1 mb-sm-0">
                        <button type="button" class="nav-link" role="tab" data-bs-toggle="tab" data-bs-target="#pills-asns">
                            <span class="d-none d-sm-inline-flex align-items-center"><i class="icon-base ri ri-server-line icon-sm me-1_5"></i>ASNs</span>
                            <i class="icon-base ri ri-server-line icon-sm d-sm-none"></i>
                        </button>
                    </li>
                    <li class="nav-item mb-1 mb-sm-0">
                        <button type="button" class="nav-link" role="tab" data-bs-toggle="tab" data-bs-target="#pills-isps">
                            <span class="d-none d-sm-inline-flex align-items-center"><i class="icon-base ri ri-building-line icon-sm me-1_5"></i>ISPs</span>
                            <i class="icon-base ri ri-building-line icon-sm d-sm-none"></i>
                        </button>
                    </li>
                    <li class="nav-item mb-1 mb-sm-0">
                        <button type="button" class="nav-link" role="tab" data-bs-toggle="tab" data-bs-target="#pills-extra">
                            <span class="d-none d-sm-inline-flex align-items-center"><i class="icon-base ri ri-settings-3-line icon-sm me-1_5"></i>Advanced</span>
                            <i class="icon-base ri ri-settings-3-line icon-sm d-sm-none"></i>
                        </button>
                    </li>
                </ul>

                <form id="save_clocker_rules">
                    <div class="tab-content" id="pills-tabContent">

                        {{-- Toggles --}}
                        <div class="tab-pane fade show active" id="pills-toggles" role="tabpanel">
                            <div class="list-group">
                                <label class="list-group-item">
                                    <span class="form-check mb-0">
                                        <input class="form-check-input me-4" type="checkbox" id="block_proxy" name="block_proxy" {{ $rules->block_proxy ? 'checked' : '' }}/>
                                        Block Proxy
                                    </span>
                                </label>
                                <label class="list-group-item">
                                    <span class="form-check mb-0">
                                        <input class="form-check-input me-4" type="checkbox" id="block_vpn" name="block_vpn" {{ $rules->block_vpn ? 'checked' : '' }}/>
                                        Block VPN
                                    </span>
                                </label>
                                <label class="list-group-item">
                                    <span class="form-check mb-0">
                                        <input class="form-check-input me-4" type="checkbox" id="block_bot" name="block_bot" {{ $rules->block_bot ? 'checked' : '' }}/>
                                        Block Bots
                                    </span>
                                </label>
                                <label class="list-group-item">
                                    <span class="form-check mb-0">
                                        <input class="form-check-input me-4" type="checkbox" id="block_empty_ua" name="block_empty_ua" {{ $rules->block_empty_ua ? 'checked' : '' }}/>
                                        Block Empty User Agent
                                    </span>
                                </label>
                            </div>
                        </div>

                        {{-- Allowed Countries --}}
                        <div class="tab-pane fade" id="pills-countries" role="tabpanel">
                            <div class="mb-4">
                                <label class="form-label mb-2"><strong>Allowed Countries</strong> <sub>(Only visitors from these countries can access the site)</sub></label>
                                <div class="country-selector">
                                    <input type="text" class="form-control mb-2" id="country-search" placeholder="Search and add countries..." autocomplete="off">
                                    <div class="country-dropdown" id="country-dropdown"></div>
                                </div>
                                <div class="selected-countries" id="selected-countries">
                                </div>
                                <input type="hidden" id="allowed_countries" value="">
                            </div>
                        </div>

                        {{-- Blocked UA Keywords --}}
                        <div class="tab-pane fade" id="pills-ua" role="tabpanel">
                            <div class="mb-3">
                                <input type="text" class="form-control mb-3" id="ua-search" placeholder="Search user agents...">
                                <div id="ua-groups" style="max-height:500px; overflow-y:auto;">
                                </div>
                                <input type="hidden" id="blocked_ua_keywords" value="{{ $rules->blocked_ua_keywords ?? '' }}">
                                <div class="mt-3">
                                    <div class="input-group">
                                        <input type="text" class="form-control" id="ua-custom-add" placeholder="Add custom keyword...">
                                        <button class="btn btn-primary" type="button" id="ua-add-btn"><i class="icon-base ri ri-add-line"></i></button>
                                    </div>
                                </div>
                            </div>
                        </div>

                        {{-- Blocked Referrers --}}
                        <div class="tab-pane fade" id="pills-referrers" role="tabpanel">
                            <div class="mb-3">
                                <input type="text" class="form-control mb-3" id="ref-search" placeholder="Search referrers...">
                                <div id="ref-groups" style="max-height:500px; overflow-y:auto;"></div>
                                <input type="hidden" id="blocked_referrers" value="{{ $rules->blocked_referrers ?? '' }}">
                                <div class="mt-3">
                                    <div class="input-group">
                                        <input type="text" class="form-control" id="ref-custom-add" placeholder="Add custom referrer...">
                                        <button class="btn btn-primary" type="button" id="ref-add-btn"><i class="icon-base ri ri-add-line"></i></button>
                                    </div>
                                </div>
                            </div>
                        </div>

                        {{-- Blocked ASNs --}}
                        <div class="tab-pane fade" id="pills-asns" role="tabpanel">
                            <div class="mb-3">
                                <input type="text" class="form-control mb-3" id="asn-search" placeholder="Search ASNs...">
                                <div id="asn-groups" style="max-height:500px; overflow-y:auto;"></div>
                                <input type="hidden" id="blocked_asns" value="{{ $rules->blocked_asns ?? '' }}">
                                <div class="mt-3">
                                    <div class="input-group">
                                        <input type="text" class="form-control" id="asn-custom-add" placeholder="Add custom ASN (e.g. AS12345)...">
                                        <button class="btn btn-primary" type="button" id="asn-add-btn"><i class="icon-base ri ri-add-line"></i></button>
                                    </div>
                                </div>
                            </div>
                        </div>

                        {{-- Blocked ISPs --}}
                        <div class="tab-pane fade" id="pills-isps" role="tabpanel">
                            <div class="mb-3">
                                <input type="text" class="form-control mb-3" id="isp-search" placeholder="Search ISPs...">
                                <div id="isp-list" style="max-height:500px; overflow-y:auto;"></div>
                                <input type="hidden" id="blocked_isps" value="{{ $rules->blocked_isps ?? '' }}">
                                <div class="mt-3">
                                    <div class="input-group">
                                        <input type="text" class="form-control" id="isp-custom-add" placeholder="Add custom ISP...">
                                        <button class="btn btn-primary" type="button" id="isp-add-btn"><i class="icon-base ri ri-add-line"></i></button>
                                    </div>
                                </div>
                            </div>
                        </div>

                        {{-- Advanced (old clocker fields) --}}
                        <div class="tab-pane fade" id="pills-extra" role="tabpanel">
                            <div class="row">
                                <div class="mb-3 col-md-12">
                                    <label class="form-label" for="whitelist_ips">Whitelist IPs <sub>(Comma separated IPs that bypass all blocking)</sub></label>
                                    <textarea id="whitelist_ips" rows="3" class="form-control">{{ $rules->whitelist_ips ?? '' }}</textarea>
                                </div>
                                <div class="mb-3 col-md-6">
                                    <label class="form-label" for="blocked_ips">Block IPs <sub>(Comma separated)</sub></label>
                                    <textarea id="blocked_ips" rows="4" class="form-control">{{ $rules->blocked_ips ?? '' }}</textarea>
                                </div>
                                <div class="mb-3 col-md-6">
                                    <label class="form-label" for="blocked_os">Block OS <sub>(Comma separated, e.g. Windows,Linux)</sub></label>
                                    <textarea id="blocked_os" rows="4" class="form-control">{{ $rules->blocked_os ?? '' }}</textarea>
                                </div>
                                <div class="mb-3 col-md-6">
                                    <label class="form-label" for="blocked_devices">Block Devices <sub>(Comma separated, e.g. Mobile,Tablet,Desktop)</sub></label>
                                    <textarea id="blocked_devices" rows="4" class="form-control">{{ $rules->blocked_devices ?? '' }}</textarea>
                                </div>
                                <div class="mb-3 col-md-6">
                                    <label class="form-label" for="blocked_browsers">Block Browsers <sub>(Comma separated, e.g. Chrome,Firefox)</sub></label>
                                    <textarea id="blocked_browsers" rows="4" class="form-control">{{ $rules->blocked_browsers ?? '' }}</textarea>
                                </div>
                            </div>
                        </div>

                        <div class="text-center my-3">
                            <button type="submit" class="btn btn-primary" id="submit_btn">Save</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
@endsection

@section('page-js')
    <script>
        $(document).ready(function () {
            $("#clockerli").addClass('active');

            // Country data from server
            var allCountries = @json($countries->map(function($c) { return ['name' => $c->name, 'code' => $c->code]; }));
            var selectedCountries = @json($selectedCountries);

            function codeToFlag(code) {
                if (!code || code.length !== 2) return '';
                var first = 0x1F1E6 + (code.charCodeAt(0) - 65);
                var second = 0x1F1E6 + (code.charCodeAt(1) - 65);
                return String.fromCodePoint(first) + String.fromCodePoint(second);
            }

            function findCountryCode(name) {
                var c = allCountries.find(function(x) { return x.name === name; });
                return c ? c.code : '';
            }

            function renderSelected() {
                var container = $('#selected-countries');
                container.empty();
                selectedCountries.forEach(function(name) {
                    var code = findCountryCode(name);
                    var flag = codeToFlag(code);
                    container.append(
                        '<span class="country-item">' +
                            '<span class="country-flag">' + flag + '</span> ' +
                            name +
                            ' <span class="remove-country" data-name="' + name + '">&times;</span>' +
                        '</span>'
                    );
                });
                $('#allowed_countries').val(selectedCountries.join(','));
            }

            function renderDropdown(filter) {
                var dropdown = $('#country-dropdown');
                dropdown.empty();
                var filtered = allCountries.filter(function(c) {
                    return c.name.toLowerCase().indexOf(filter.toLowerCase()) !== -1;
                });
                if (filtered.length === 0 || !filter) {
                    dropdown.removeClass('show');
                    return;
                }
                filtered.forEach(function(c) {
                    var isSelected = selectedCountries.indexOf(c.name) !== -1;
                    var flag = codeToFlag(c.code);
                    dropdown.append(
                        '<div class="country-dropdown-item' + (isSelected ? ' selected' : '') + '" data-name="' + c.name + '">' +
                            '<span class="country-flag">' + flag + '</span> ' + c.name +
                            (isSelected ? ' <small style="margin-left:auto;color:#999;">&#10003;</small>' : '') +
                        '</div>'
                    );
                });
                dropdown.addClass('show');
            }

            renderSelected();

            $('#country-search').on('input', function () {
                renderDropdown($(this).val());
            });

            $('#country-search').on('focus', function () {
                if ($(this).val().length > 0) renderDropdown($(this).val());
            });

            $(document).on('click', '.country-dropdown-item', function () {
                var name = $(this).data('name');
                var idx = selectedCountries.indexOf(name);
                if (idx === -1) {
                    selectedCountries.push(name);
                } else {
                    selectedCountries.splice(idx, 1);
                }
                renderSelected();
                renderDropdown($('#country-search').val());
            });

            $(document).on('click', '.remove-country', function () {
                var name = $(this).data('name');
                selectedCountries = selectedCountries.filter(function(n) { return n !== name; });
                renderSelected();
            });

            $(document).on('click', function (e) {
                if (!$(e.target).closest('.country-selector').length) {
                    $('#country-dropdown').removeClass('show');
                }
            });

            // ========== UA Keywords grouped list ==========
            var uaGroups = {
                'Google': ['googlebot','google-site-verification','google-inspectiontool','googlebot-image','googlebot-news','googlebot-video','mediapartners-google','adsbot-google','apis-google','google-read-aloud','feedfetcher-google','google-adwords','google-structured-data-testing-tool','google-xrawler','google favicon','google web preview','google-safety'],
                'Facebook / Meta': ['facebookexternalhit','facebot','facebookbot','facebook','meta-externalagent','meta-externalfetcher'],
                'Bing / Microsoft': ['bingbot','bingpreview','msnbot','adidxbot'],
                'Yahoo': ['slurp','yahoo'],
                'Yandex': ['yandexbot','yandex','yandexmobilebot','yandexaccessibilitybot','yandeximages','yandexmetrika','yandexdirect','yandexwebmaster'],
                'Baidu': ['baiduspider','baidu'],
                'DuckDuckGo': ['duckduckbot','duckduckgo'],
                'Other Search Engines': ['sogou','exabot','ia_archiver','teoma','gigabot','nutch','ask jeeves','entireweb','mojeek','qwantify','qwant','ecosia','petal','petalbot','applebot','naver','daum','seznam','coccoc','searchatlas','yep','brave','kagibot'],
                'SEO / Marketing': ['ahrefsbot','ahrefs','semrushbot','semrush','mj12bot','majestic','dotbot','rogerbot','screaming frog','serpstatbot','dataforseobot','megaindex','seokicks','blexbot','linkdexbot','sistrix','searchmetricsbot','spyfu','moz.com'],
                'Security / Scanners': ['urlscan','virustotal','urlquery','safebrowsing','phishtank','spamhaus','abuse.ch','openphish','hybrid-analysis','any.run','joe sandbox','cuckoo','sandbox','scanner','scan','security','malware','antivirus','fortinet','kaspersky','sophos','symantec','mcafee','norton','bitdefender','avast','avg','trendmicro','f-secure','drweb','eset','paloalto','checkpoint','crowdstrike','sucuri','sitecheck','qualys','nessus','detectify'],
                'GitHub / ImgBB': ['github','github-camo','ibb','imgbb'],
                'Generic Bots / Crawlers': ['bot','crawl','spider','scraper','fetch','archiver','wget','curl','python-requests','python-urllib','go-http-client','java/','httpclient','http_request','libwww-perl','lwp-','mechanize','scrapy'],
                'Headless / Automation': ['phantomjs','headlesschrome','headless','puppeteer','playwright','selenium','webdriver'],
                'Hacking / Pentesting': ['httrack','offline','nikto','sqlmap','nmap','masscan','zmap','wpscan','dirbuster','gobuster','nuclei','burp','zaproxy','owasp','acunetix','netsparker','w3af','openvas','metasploit','shodan','censys','zoomeye'],
                'Link Checkers': ['linkchecker','w3c_validator','w3c-checklink','deadlinkchecker','brokenlinkcheck'],
                'Feed Readers': ['feedly','newsblur','inoreader'],
                'Monitoring / Uptime': ['pingdom','uptimerobot','statuscake','site24x7','monitis','newrelic','datadog'],
                'Social Media': ['twitterbot','linkedinbot','pinterest','slackbot','telegrambot','whatsapp','discordbot','skypeuripreview','tumblr','redditbot','embedly','quora']
            };

            // All known keywords in one flat list
            var allKnownUa = [];
            Object.values(uaGroups).forEach(function(arr) { allKnownUa = allKnownUa.concat(arr); });

            // Current blocked keywords from DB
            var blockedUa = ($('#blocked_ua_keywords').val() || '').split(',').map(function(s) { return s.trim(); }).filter(Boolean);

            // Find custom keywords (in DB but not in any group)
            var customUa = blockedUa.filter(function(k) { return allKnownUa.indexOf(k) === -1; });

            var uaIcons = {
                'Google': 'ri-google-line', 'Facebook / Meta': 'ri-facebook-line', 'Bing / Microsoft': 'ri-microsoft-line',
                'Yahoo': 'ri-search-line', 'Yandex': 'ri-search-2-line', 'Baidu': 'ri-search-eye-line',
                'DuckDuckGo': 'ri-duck-line', 'Other Search Engines': 'ri-search-line',
                'SEO / Marketing': 'ri-line-chart-line', 'Security / Scanners': 'ri-shield-line',
                'GitHub / ImgBB': 'ri-github-line', 'Generic Bots / Crawlers': 'ri-robot-line',
                'Headless / Automation': 'ri-terminal-box-line', 'Hacking / Pentesting': 'ri-skull-line',
                'Link Checkers': 'ri-link-check-line', 'Feed Readers': 'ri-rss-line',
                'Monitoring / Uptime': 'ri-pulse-line', 'Social Media': 'ri-share-line', 'Custom': 'ri-edit-line'
            };

            function renderUaGroups(filter) {
                var html = '<div class="accordion accordion-custom-button" id="uaAccordion">';
                var f = (filter || '').toLowerCase();
                var idx = 0;

                Object.keys(uaGroups).forEach(function(group) {
                    var items = uaGroups[group].filter(function(k) { return !f || k.toLowerCase().indexOf(f) !== -1 || group.toLowerCase().indexOf(f) !== -1; });
                    if (items.length === 0) return;

                    var checkedCount = items.filter(function(k) { return blockedUa.indexOf(k) !== -1; }).length;
                    var allChecked = checkedCount === items.length;
                    var icon = uaIcons[group] || 'ri-list-check';
                    var collapseId = 'uaCollapse' + idx;
                    var expanded = f ? 'true' : 'false';
                    var collapsed = f ? '' : ' collapsed';
                    var show = f ? ' show' : '';

                    html += '<div class="accordion-item">';
                    html += '<h2 class="accordion-header d-flex align-items-center">';
                    html += '<div class="form-check mb-0 ms-3"><input class="form-check-input ua-group-toggle" type="checkbox" data-group="' + group + '" ' + (allChecked ? 'checked' : '') + '/></div>';
                    html += '<button type="button" class="accordion-button' + collapsed + '" data-bs-toggle="collapse" data-bs-target="#' + collapseId + '" aria-expanded="' + expanded + '">';
                    html += '<i class="icon-base ri ' + icon + ' me-2"></i>' + group;
                    html += ' <span class="badge bg-label-primary ms-2">' + checkedCount + '/' + items.length + '</span>';
                    html += '</button></h2>';
                    html += '<div id="' + collapseId + '" class="accordion-collapse collapse' + show + '" data-bs-parent="#uaAccordion">';
                    html += '<div class="accordion-body p-0"><div class="list-group list-group-flush">';
                    items.forEach(function(k) {
                        var checked = blockedUa.indexOf(k) !== -1 ? 'checked' : '';
                        html += '<label class="list-group-item py-2"><span class="form-check mb-0"><input class="form-check-input me-3 ua-item" type="checkbox" value="' + k + '" ' + checked + '/>' + k + '</span></label>';
                    });
                    html += '</div></div></div></div>';
                    idx++;
                });

                // Custom keywords
                var filteredCustom = customUa.filter(function(k) { return !f || k.toLowerCase().indexOf(f) !== -1; });
                if (filteredCustom.length > 0) {
                    var collapseId = 'uaCollapseCustom';
                    html += '<div class="accordion-item">';
                    html += '<h2 class="accordion-header">';
                    html += '<button type="button" class="accordion-button collapsed" data-bs-toggle="collapse" data-bs-target="#' + collapseId + '" aria-expanded="false">';
                    html += '<i class="icon-base ri ri-edit-line me-2"></i>Custom';
                    html += ' <span class="badge bg-label-warning ms-2">' + filteredCustom.length + '</span>';
                    html += '</button></h2>';
                    html += '<div id="' + collapseId + '" class="accordion-collapse collapse" data-bs-parent="#uaAccordion">';
                    html += '<div class="accordion-body p-0"><div class="list-group list-group-flush">';
                    filteredCustom.forEach(function(k) {
                        html += '<label class="list-group-item py-2"><span class="form-check mb-0"><input class="form-check-input me-3 ua-item" type="checkbox" value="' + k + '" checked/>' + k + '</span></label>';
                    });
                    html += '</div></div></div></div>';
                }

                html += '</div>';
                $('#ua-groups').html(html);
            }

            function syncUaHidden() {
                var selected = [];
                $('.ua-item:checked').each(function() { selected.push($(this).val()); });
                $('#blocked_ua_keywords').val(selected.join(','));
            }

            renderUaGroups('');

            $('#ua-search').on('input', function() { renderUaGroups($(this).val()); });

            $(document).on('change', '.ua-item', function() { syncUaHidden(); });

            $(document).on('change', '.ua-group-toggle', function() {
                var group = $(this).data('group');
                var checked = $(this).is(':checked');
                var items = uaGroups[group] || [];
                items.forEach(function(k) {
                    var idx = blockedUa.indexOf(k);
                    if (checked && idx === -1) blockedUa.push(k);
                    if (!checked && idx !== -1) blockedUa.splice(idx, 1);
                });
                renderUaGroups($('#ua-search').val());
                syncUaHidden();
            });

            $('#ua-add-btn').click(function() {
                var val = $('#ua-custom-add').val().trim();
                if (val && blockedUa.indexOf(val) === -1) {
                    blockedUa.push(val);
                    customUa.push(val);
                    renderUaGroups($('#ua-search').val());
                    syncUaHidden();
                    $('#ua-custom-add').val('');
                }
            });

            // ========== Referrers grouped accordion ==========
            var refGroups = {
                'Search Engines': ['google.','bing.com','yahoo.com','yandex.','baidu.com','duckduckgo.com','ecosia.org','qwant.com','sogou.com','ask.com','aol.com','search.','naver.com','daum.net','seznam.cz','coccoc.com','brave.com','mojeek.com','startpage.com','swisscows.com'],
                'Social Media': ['facebook.com','fb.com'],
                'Security / Threat Intel': ['urlscan.io','virustotal.com','urlquery.net','hybrid-analysis.com','any.run','joesandbox.com','talosintelligence.com','phishtank.com','spamhaus.org','abuseipdb.com','threatcrowd.org'],
                'Image Hosting': ['i.ibb.co','ibb.co','imgbb.com'],
                'GitHub': ['github.com','github.io'],
                'SEO Tools': ['ahrefs.com','semrush.com','moz.com','majestic.com','similarweb.com']
            };

            var refIcons = {
                'Search Engines': 'ri-search-line', 'Social Media': 'ri-share-line',
                'Security / Threat Intel': 'ri-shield-line', 'Image Hosting': 'ri-image-line',
                'GitHub': 'ri-github-line', 'SEO Tools': 'ri-line-chart-line', 'Custom': 'ri-edit-line'
            };

            var allKnownRef = [];
            Object.values(refGroups).forEach(function(arr) { allKnownRef = allKnownRef.concat(arr); });

            var blockedRef = ($('#blocked_referrers').val() || '').split(',').map(function(s) { return s.trim(); }).filter(Boolean);
            var customRef = blockedRef.filter(function(k) { return allKnownRef.indexOf(k) === -1; });

            function renderRefGroups(filter) {
                var html = '<div class="accordion accordion-custom-button" id="refAccordion">';
                var f = (filter || '').toLowerCase();
                var idx = 0;

                Object.keys(refGroups).forEach(function(group) {
                    var items = refGroups[group].filter(function(k) { return !f || k.toLowerCase().indexOf(f) !== -1 || group.toLowerCase().indexOf(f) !== -1; });
                    if (items.length === 0) return;

                    var checkedCount = items.filter(function(k) { return blockedRef.indexOf(k) !== -1; }).length;
                    var allChecked = checkedCount === items.length;
                    var icon = refIcons[group] || 'ri-list-check';
                    var collapseId = 'refCollapse' + idx;
                    var expanded = f ? 'true' : 'false';
                    var collapsed = f ? '' : ' collapsed';
                    var show = f ? ' show' : '';

                    html += '<div class="accordion-item">';
                    html += '<h2 class="accordion-header d-flex align-items-center">';
                    html += '<div class="form-check mb-0 ms-3"><input class="form-check-input ref-group-toggle" type="checkbox" data-group="' + group + '" ' + (allChecked ? 'checked' : '') + '/></div>';
                    html += '<button type="button" class="accordion-button' + collapsed + '" data-bs-toggle="collapse" data-bs-target="#' + collapseId + '" aria-expanded="' + expanded + '">';
                    html += '<i class="icon-base ri ' + icon + ' me-2"></i>' + group;
                    html += ' <span class="badge bg-label-primary ms-2">' + checkedCount + '/' + items.length + '</span>';
                    html += '</button></h2>';
                    html += '<div id="' + collapseId + '" class="accordion-collapse collapse' + show + '" data-bs-parent="#refAccordion">';
                    html += '<div class="accordion-body p-0"><div class="list-group list-group-flush">';
                    items.forEach(function(k) {
                        var checked = blockedRef.indexOf(k) !== -1 ? 'checked' : '';
                        html += '<label class="list-group-item py-2"><span class="form-check mb-0"><input class="form-check-input me-3 ref-item" type="checkbox" value="' + k + '" ' + checked + '/>' + k + '</span></label>';
                    });
                    html += '</div></div></div></div>';
                    idx++;
                });

                var filteredCustom = customRef.filter(function(k) { return !f || k.toLowerCase().indexOf(f) !== -1; });
                if (filteredCustom.length > 0) {
                    html += '<div class="accordion-item">';
                    html += '<h2 class="accordion-header"><button type="button" class="accordion-button collapsed" data-bs-toggle="collapse" data-bs-target="#refCollapseCustom" aria-expanded="false">';
                    html += '<i class="icon-base ri ri-edit-line me-2"></i>Custom <span class="badge bg-label-warning ms-2">' + filteredCustom.length + '</span></button></h2>';
                    html += '<div id="refCollapseCustom" class="accordion-collapse collapse" data-bs-parent="#refAccordion">';
                    html += '<div class="accordion-body p-0"><div class="list-group list-group-flush">';
                    filteredCustom.forEach(function(k) {
                        html += '<label class="list-group-item py-2"><span class="form-check mb-0"><input class="form-check-input me-3 ref-item" type="checkbox" value="' + k + '" checked/>' + k + '</span></label>';
                    });
                    html += '</div></div></div></div>';
                }

                html += '</div>';
                $('#ref-groups').html(html);
            }

            function syncRefHidden() {
                var selected = [];
                $('.ref-item:checked').each(function() { selected.push($(this).val()); });
                $('#blocked_referrers').val(selected.join(','));
            }

            renderRefGroups('');

            $('#ref-search').on('input', function() { renderRefGroups($(this).val()); });

            $(document).on('change', '.ref-item', function() { syncRefHidden(); });

            $(document).on('change', '.ref-group-toggle', function() {
                var group = $(this).data('group');
                var checked = $(this).is(':checked');
                var items = refGroups[group] || [];
                items.forEach(function(k) {
                    var idx = blockedRef.indexOf(k);
                    if (checked && idx === -1) blockedRef.push(k);
                    if (!checked && idx !== -1) blockedRef.splice(idx, 1);
                });
                renderRefGroups($('#ref-search').val());
                syncRefHidden();
            });

            $('#ref-add-btn').click(function() {
                var val = $('#ref-custom-add').val().trim();
                if (val && blockedRef.indexOf(val) === -1) {
                    blockedRef.push(val);
                    customRef.push(val);
                    renderRefGroups($('#ref-search').val());
                    syncRefHidden();
                    $('#ref-custom-add').val('');
                }
            });

            // ========== ASN grouped accordion ==========
            var asnGroups = {
                'Google': [
                    {asn:'AS15169', name:'Google LLC', loc:'United States'},
                    {asn:'AS396982', name:'Google Cloud', loc:'United States'},
                    {asn:'AS36040', name:'Google (YouTube)', loc:'United States'},
                    {asn:'AS36384', name:'Google (Fiber)', loc:'United States'},
                    {asn:'AS36385', name:'Google (IT)', loc:'United States'},
                    {asn:'AS36492', name:'Google (Corp)', loc:'United States'},
                    {asn:'AS36561', name:'Google (Services)', loc:'United States'},
                    {asn:'AS22577', name:'Google (Fiber-2)', loc:'United States'},
                    {asn:'AS19527', name:'Google (Cloud-2)', loc:'United States'},
                    {asn:'AS26910', name:'Google (CDN)', loc:'United States'}
                ],
                'Facebook / Meta': [
                    {asn:'AS32934', name:'Meta Platforms', loc:'United States'},
                    {asn:'AS63293', name:'Meta (Edge)', loc:'United States'},
                    {asn:'AS54115', name:'Meta (Instagram)', loc:'United States'}
                ],
                'Microsoft / Bing': [
                    {asn:'AS8075', name:'Microsoft Corporation', loc:'United States'},
                    {asn:'AS8068', name:'Microsoft (Azure EU)', loc:'Europe'},
                    {asn:'AS3598', name:'Microsoft (Corp)', loc:'United States'}
                ],
                'GitHub': [
                    {asn:'AS36459', name:'GitHub Inc.', loc:'United States'}
                ],
                'Yahoo': [
                    {asn:'AS10310', name:'Yahoo Inc.', loc:'United States'},
                    {asn:'AS36646', name:'Yahoo (Edgecast)', loc:'United States'},
                    {asn:'AS36647', name:'Yahoo (Media)', loc:'United States'}
                ],
                'Yandex': [
                    {asn:'AS13238', name:'Yandex LLC', loc:'Russia'},
                    {asn:'AS200350', name:'Yandex Cloud', loc:'Russia'},
                    {asn:'AS208722', name:'Yandex (CDN)', loc:'Russia'}
                ],
                'Baidu': [
                    {asn:'AS55967', name:'Baidu Inc.', loc:'China'},
                    {asn:'AS38365', name:'Baidu (Beijing)', loc:'China'}
                ],
                'Scanners': [
                    {asn:'AS20473', name:'Shodan (Vultr)', loc:'United States'},
                    {asn:'AS398324', name:'Censys Inc.', loc:'United States'},
                    {asn:'AS398705', name:'Censys (Scan)', loc:'United States'}
                ]
            };

            var asnIcons = {
                'Google':'ri-google-line','Facebook / Meta':'ri-facebook-line','Microsoft / Bing':'ri-microsoft-line',
                'GitHub':'ri-github-line','Yahoo':'ri-search-line','Yandex':'ri-search-2-line',
                'Baidu':'ri-search-eye-line','Scanners':'ri-radar-line','Custom':'ri-edit-line'
            };

            var allKnownAsn = [];
            Object.values(asnGroups).forEach(function(arr) { arr.forEach(function(a) { allKnownAsn.push(a.asn); }); });

            var blockedAsn = ($('#blocked_asns').val() || '').split(',').map(function(s) { return s.trim(); }).filter(Boolean);
            var customAsn = blockedAsn.filter(function(k) { return allKnownAsn.indexOf(k) === -1; });

            function renderAsnGroups(filter) {
                var html = '<div class="accordion accordion-custom-button" id="asnAccordion">';
                var f = (filter || '').toLowerCase();
                var idx = 0;

                Object.keys(asnGroups).forEach(function(group) {
                    var items = asnGroups[group].filter(function(a) {
                        return !f || a.asn.toLowerCase().indexOf(f) !== -1 || a.name.toLowerCase().indexOf(f) !== -1 || group.toLowerCase().indexOf(f) !== -1;
                    });
                    if (items.length === 0) return;

                    var checkedCount = items.filter(function(a) { return blockedAsn.indexOf(a.asn) !== -1; }).length;
                    var allChecked = checkedCount === items.length;
                    var icon = asnIcons[group] || 'ri-list-check';
                    var collapseId = 'asnCollapse' + idx;
                    var expanded = f ? 'true' : 'false';
                    var collapsed = f ? '' : ' collapsed';
                    var show = f ? ' show' : '';

                    html += '<div class="accordion-item">';
                    html += '<h2 class="accordion-header d-flex align-items-center">';
                    html += '<div class="form-check mb-0 ms-3"><input class="form-check-input asn-group-toggle" type="checkbox" data-group="' + group + '" ' + (allChecked ? 'checked' : '') + '/></div>';
                    html += '<button type="button" class="accordion-button' + collapsed + '" data-bs-toggle="collapse" data-bs-target="#' + collapseId + '" aria-expanded="' + expanded + '">';
                    html += '<i class="icon-base ri ' + icon + ' me-2"></i>' + group;
                    html += ' <span class="badge bg-label-primary ms-2">' + checkedCount + '/' + items.length + '</span>';
                    html += '</button></h2>';
                    html += '<div id="' + collapseId + '" class="accordion-collapse collapse' + show + '" data-bs-parent="#asnAccordion">';
                    html += '<div class="accordion-body p-0"><div class="list-group list-group-flush">';
                    items.forEach(function(a) {
                        var checked = blockedAsn.indexOf(a.asn) !== -1 ? 'checked' : '';
                        html += '<label class="list-group-item py-2 d-flex align-items-center">';
                        html += '<span class="form-check mb-0 flex-grow-1"><input class="form-check-input me-3 asn-item" type="checkbox" value="' + a.asn + '" ' + checked + '/>';
                        html += '<strong>' + a.asn + '</strong> &mdash; ' + a.name + '</span>';
                        html += '<span class="badge bg-label-secondary">' + a.loc + '</span>';
                        html += '</label>';
                    });
                    html += '</div></div></div></div>';
                    idx++;
                });

                if (customAsn.length > 0) {
                    var filteredCustom = customAsn.filter(function(k) { return !f || k.toLowerCase().indexOf(f) !== -1; });
                    if (filteredCustom.length > 0) {
                        html += '<div class="accordion-item"><h2 class="accordion-header">';
                        html += '<button type="button" class="accordion-button collapsed" data-bs-toggle="collapse" data-bs-target="#asnCollapseCustom">';
                        html += '<i class="icon-base ri ri-edit-line me-2"></i>Custom <span class="badge bg-label-warning ms-2">' + filteredCustom.length + '</span></button></h2>';
                        html += '<div id="asnCollapseCustom" class="accordion-collapse collapse" data-bs-parent="#asnAccordion">';
                        html += '<div class="accordion-body p-0"><div class="list-group list-group-flush">';
                        filteredCustom.forEach(function(k) {
                            html += '<label class="list-group-item py-2"><span class="form-check mb-0"><input class="form-check-input me-3 asn-item" type="checkbox" value="' + k + '" checked/>' + k + '</span></label>';
                        });
                        html += '</div></div></div></div>';
                    }
                }

                html += '</div>';
                $('#asn-groups').html(html);
            }

            function syncAsnHidden() {
                var selected = [];
                $('.asn-item:checked').each(function() { selected.push($(this).val()); });
                $('#blocked_asns').val(selected.join(','));
            }

            renderAsnGroups('');
            $('#asn-search').on('input', function() { renderAsnGroups($(this).val()); });
            $(document).on('change', '.asn-item', function() { syncAsnHidden(); });
            $(document).on('change', '.asn-group-toggle', function() {
                var group = $(this).data('group');
                var checked = $(this).is(':checked');
                var items = asnGroups[group] || [];
                items.forEach(function(a) {
                    var idx = blockedAsn.indexOf(a.asn);
                    if (checked && idx === -1) blockedAsn.push(a.asn);
                    if (!checked && idx !== -1) blockedAsn.splice(idx, 1);
                });
                renderAsnGroups($('#asn-search').val());
                syncAsnHidden();
            });
            $('#asn-add-btn').click(function() {
                var val = $('#asn-custom-add').val().trim().toUpperCase();
                if (val && blockedAsn.indexOf(val) === -1) {
                    blockedAsn.push(val);
                    customAsn.push(val);
                    renderAsnGroups($('#asn-search').val());
                    syncAsnHidden();
                    $('#asn-custom-add').val('');
                }
            });

            // ========== ISP list group with checkboxes ==========
            var ispList = [
                'google','facebook','meta platforms','github','virustotal','urlscan','urlquery',
                'microsoft','bing','yahoo','yandex','baidu','duckduckgo',
                'shodan','censys','zoomeye','qualys','rapid7','tenable',
                'crowdstrike','palo alto','checkpoint','fortinet','sophos','symantec','mcafee',
                'kaspersky','bitdefender','trendmicro','eset','sucuri','cloudflare security',
                'phishtank','spamhaus','abuse.ch'
            ];

            var blockedIsp = ($('#blocked_isps').val() || '').split(',').map(function(s) { return s.trim(); }).filter(Boolean);
            var customIsp = blockedIsp.filter(function(k) { return ispList.indexOf(k) === -1; });

            function renderIspList(filter) {
                var f = (filter || '').toLowerCase();
                var html = '<div class="list-group">';
                var allItems = ispList.concat(customIsp);
                allItems.filter(function(k) { return !f || k.toLowerCase().indexOf(f) !== -1; }).forEach(function(k) {
                    var checked = blockedIsp.indexOf(k) !== -1 ? 'checked' : '';
                    var isCustom = ispList.indexOf(k) === -1;
                    html += '<label class="list-group-item py-2"><span class="form-check mb-0"><input class="form-check-input me-3 isp-item" type="checkbox" value="' + k + '" ' + checked + '/>' + k;
                    if (isCustom) html += ' <span class="badge bg-label-warning ms-1">custom</span>';
                    html += '</span></label>';
                });
                html += '</div>';
                $('#isp-list').html(html);
            }

            function syncIspHidden() {
                var selected = [];
                $('.isp-item:checked').each(function() { selected.push($(this).val()); });
                $('#blocked_isps').val(selected.join(','));
            }

            renderIspList('');
            $('#isp-search').on('input', function() { renderIspList($(this).val()); });
            $(document).on('change', '.isp-item', function() { syncIspHidden(); });
            $('#isp-add-btn').click(function() {
                var val = $('#isp-custom-add').val().trim().toLowerCase();
                if (val && blockedIsp.indexOf(val) === -1) {
                    blockedIsp.push(val);
                    customIsp.push(val);
                    renderIspList($('#isp-search').val());
                    syncIspHidden();
                    $('#isp-custom-add').val('');
                }
            });

            // Status toggle
            $("#clocker_status").change(function () {
                var status = $(this).is(':checked') ? 1 : 0;
                $.post("{{ route('update_clocker_status') }}", {
                    _token: "{{ csrf_token() }}",
                    status: status
                }, function (response) {
                    Swal.fire({icon: response.icon, title: response.message});
                });
            });

            // Save form
            $("#save_clocker_rules").submit(function (e) {
                e.preventDefault();
                $("#submit_btn").prop('disabled', true).html('<span class="spinner-border spinner-border-sm"></span> Saving...');

                $.ajax({
                    url: "{{ route('save_clocker_rules') }}",
                    type: "POST",
                    data: {
                        _token: "{{ csrf_token() }}",
                        allowed_countries: $("#allowed_countries").val(),
                        blocked_ua_keywords: $("#blocked_ua_keywords").val(),
                        blocked_asns: $("#blocked_asns").val(),
                        blocked_isps: $("#blocked_isps").val(),
                        blocked_referrers: $("#blocked_referrers").val(),
                        whitelist_ips: $("#whitelist_ips").val(),
                        blocked_ips: $("#blocked_ips").val(),
                        blocked_os: $("#blocked_os").val(),
                        blocked_devices: $("#blocked_devices").val(),
                        blocked_browsers: $("#blocked_browsers").val(),
                        block_empty_ua: $("#block_empty_ua").is(':checked') ? 1 : 0,
                        block_proxy: $("#block_proxy").is(':checked') ? 1 : 0,
                        block_vpn: $("#block_vpn").is(':checked') ? 1 : 0,
                        block_bot: $("#block_bot").is(':checked') ? 1 : 0,
                    },
                    success: function (response) {
                        $("#submit_btn").prop('disabled', false).html('Save');
                        Swal.fire({icon: response.icon, title: response.message});
                    },
                    error: function () {
                        $("#submit_btn").prop('disabled', false).html('Save');
                        Swal.fire({icon: 'error', title: 'Something went wrong'});
                    }
                });
            });
        });
    </script>
@endsection