@extends('crm.layouts.master')
@section('title', 'Cloaker')
@section('page-css')
<style>
.cloaker-tab { cursor:pointer; }
.cloaker-pane[hidden] { display:none !important; }
.security-metric { border:1px solid #e5e7eb; border-radius:10px; padding:.85rem; height:100%; }
.security-metric small { display:block; color:#6b7280; margin-bottom:.25rem; }
.security-flags { display:flex; flex-wrap:wrap; gap:.2rem; }
</style>
@endsection
@section('main-content')
<div class="breadcrumb d-flex align-items-center justify-content-between">
    <h3 class="mb-0">Cloaker</h3>
    <label class="d-flex align-items-center gap-2 mb-0">
        <input type="checkbox" class="form-check-input" id="cloakerStatus" {{ $cloaker->status ? 'checked' : '' }}>
        <span id="cloakerStatusLabel">{{ $cloaker->status ? 'Enabled' : 'Disabled' }}</span>
    </label>
</div>
<div class="separator-breadcrumb border-top"></div>
<p class="text-muted">Control who can open the public website. CRM, portal, and Allowed IPs on the whitelist tab are never blocked.</p>
<div class="alert alert-info py-2">
    <strong>Anti-scraping protection is always active.</strong>
    Declared bots are blocked immediately; {{ config('cloaker.scraper.distinct_page_limit') }} distinct public pages in
    {{ config('cloaker.scraper.window_seconds') }} seconds permanently blacklists the IP. The switch above controls only optional Cloaker rules.
</div>

<ul class="nav nav-pills mb-3">
    <li class="nav-item"><button type="button" class="nav-link active cloaker-tab" data-pane="conditions">Conditions</button></li>
    <li class="nav-item"><button type="button" class="nav-link cloaker-tab" data-pane="filters">Filters</button></li>
    <li class="nav-item"><button type="button" class="nav-link cloaker-tab" data-pane="reservesnet">ReservesNet</button></li>
    <li class="nav-item"><button type="button" class="nav-link cloaker-tab" data-pane="whitelist">Whitelist</button></li>
    <li class="nav-item"><button type="button" class="nav-link cloaker-tab" data-pane="visitors">Recent visitors</button></li>
</ul>

<div class="card">
    <div class="card-body">
        <form id="cloakerForm">
            <div class="cloaker-pane" id="pane-conditions">
                <div class="mb-3">
                    <label class="form-label">Block countries</label>
                    <select name="country[]" id="country" class="form-select" multiple size="10">
                        @foreach($countries as $name)
                            <option value="{{ $name }}" @selected(in_array($name, $selectedCountries))>{{ $name }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="row">
                    <div class="col-md-4 mb-3">
                        <label class="form-label">Operating system</label>
                        <select name="os[]" class="form-select" multiple>
                            @foreach(['Windows','Mac OS X','Linux','Ubuntu','iPhone','iPod','Android','BlackBerry'] as $os)
                                <option value="{{ $os }}" @selected(in_array($os, $selectedOs))>{{ $os }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col-md-4 mb-3">
                        <label class="form-label">Device</label>
                        <select name="device[]" class="form-select" multiple>
                            @foreach(['Desktop','Mobile','Tablet'] as $d)
                                <option value="{{ $d }}" @selected(in_array($d, $selectedDevices))>{{ $d }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col-md-4 mb-3">
                        <label class="form-label">Browser</label>
                        <select name="browser[]" class="form-select" multiple>
                            @foreach(['IE'=>'Internet Explorer','Edge'=>'Microsoft Edge','Firefox'=>'Firefox','Chrome'=>'Google Chrome','Opera'=>'Opera','Safari'=>'Apple Safari'] as $val=>$label)
                                <option value="{{ $val }}" @selected(in_array($val, $selectedBrowsers))>{{ $label }}</option>
                            @endforeach
                        </select>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-6 mb-3">
                        <label class="form-label">Block IPs <small class="text-muted">comma-separated</small></label>
                        <textarea name="ips" class="form-control" rows="8">{{ $cloaker->ips }}</textarea>
                    </div>
                    <div class="col-md-6 mb-3">
                        <label class="form-label">User agents <small class="text-muted">comma-separated</small></label>
                        <textarea name="ua" class="form-control" rows="4">{{ $cloaker->ua }}</textarea>
                    </div>
                    <div class="col-md-6 mb-3">
                        <label class="form-label">Referrers <small class="text-muted">comma-separated</small></label>
                        <textarea name="referrer" class="form-control" rows="3">{{ $cloaker->referrer }}</textarea>
                    </div>
                    <div class="col-md-6 mb-3">
                        <label class="form-label">ISPs <small class="text-muted">comma-separated</small></label>
                        <textarea name="isp" class="form-control" rows="8">{{ $cloaker->isp }}</textarea>
                    </div>
                    <div class="col-12 mb-3">
                        <label class="form-label">ASNs <small class="text-muted">comma-separated</small></label>
                        <textarea name="asn" class="form-control" rows="4">{{ $cloaker->asn }}</textarea>
                    </div>
                </div>
            </div>

            <div class="cloaker-pane" id="pane-filters" hidden>
                <label class="form-label">Active filters</label>
                <select name="filters[]" class="form-select" multiple>
                    @foreach(['Proxy','VPN','Tor','Recent Abuse'] as $f)
                        <option value="{{ $f }}" @selected(in_array($f, $selectedFilters))>{{ $f }}</option>
                    @endforeach
                </select>
                <p class="text-muted small mt-2 mb-0">Bot detection is always active. These optional filters apply only while the Cloaker switch is enabled.</p>
            </div>

            <div class="cloaker-pane" id="pane-reservesnet" hidden>
                <div class="row g-3">
                    <div class="col-md-3"><div class="security-metric"><small>API key</small><strong class="{{ $reservesNetStatus['configured'] ? 'text-success' : 'text-danger' }}">{{ $reservesNetStatus['configured'] ? 'Configured' : 'Missing' }}</strong></div></div>
                    <div class="col-md-3"><div class="security-metric"><small>Circuit</small><strong class="{{ $reservesNetStatus['cooling_down'] ? 'text-warning' : 'text-success' }}">{{ $reservesNetStatus['cooling_down'] ? 'Cooling down' : 'Ready' }}</strong></div></div>
                    <div class="col-md-3"><div class="security-metric"><small>Last success</small><strong>{{ $reservesNetStatus['last_success_at'] ?: 'Never' }}</strong></div></div>
                    <div class="col-md-3"><div class="security-metric"><small>Last report</small><strong>{{ $reservesNetStatus['last_report_at'] ?: 'Never' }}</strong></div></div>
                </div>
                <div class="mt-3 small text-muted">
                    Endpoint: <code>{{ $reservesNetStatus['base_url'] }}</code><br>
                    Pending: {{ (int) ($incidentCounts['pending'] ?? 0) }} · Retrying: {{ (int) ($incidentCounts['retrying'] ?? 0) }} · Failed: {{ (int) ($incidentCounts['failed'] ?? 0) }} · Reported: {{ (int) ($incidentCounts['reported'] ?? 0) }}
                    @if($reservesNetStatus['configuration_error'] ?? null)<br><span class="text-danger">Configuration: {{ $reservesNetStatus['configuration_error'] }}</span>@endif
                    @if($reservesNetStatus['last_error'])<br><span class="text-danger">Last error: {{ $reservesNetStatus['last_error'] }}</span>@endif
                </div>
            </div>

            <div class="text-end mt-3" id="cloakerSaveRow">
                <button type="submit" class="btn btn-primary" id="cloakerSaveBtn">Save cloaker</button>
            </div>
        </form>

        <div class="cloaker-pane" id="pane-whitelist" hidden>
            <div class="d-flex justify-content-between align-items-center mb-3">
                <p class="text-muted mb-0">These are the same Allowed IPs used for CRM access. Active IPs are never cloaked.</p>
                <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#add_ip_modal">
                    <i class="fa fa-plus"></i> Add IP
                </button>
            </div>
            <div class="table-responsive">
                <table class="table table-bordered" id="whitelistTable">
                    <thead>
                        <tr>
                            <th>ID#</th>
                            <th>Added by</th>
                            <th>IP</th>
                            <th>Description</th>
                            <th>Status</th>
                            <th>Created</th>
                            <th></th>
                        </tr>
                    </thead>
                    <tbody>
                    @forelse($whitelist as $ip)
                        <tr>
                            <td>{{ $ip->id }}</td>
                            <td>{{ $ip->user->name ?? 'N/A' }}@if($ip->user) ({{ $ip->user->extension ?? '-' }})@endif</td>
                            <td><code>{{ $ip->ip }}</code></td>
                            <td>{{ \Illuminate\Support\Str::limit($ip->description, 50, '...') }}</td>
                            <td>
                                @if((int) $ip->status === 1)
                                    <span class="badge bg-success">Active</span>
                                @else
                                    <span class="badge bg-secondary">Blocked</span>
                                @endif
                            </td>
                            <td>{{ $ip->created_at ? date('Y-m-d', strtotime($ip->created_at)) : '—' }}</td>
                            <td class="text-end">
                                <button type="button" class="btn btn-sm btn-light" data-toggle="modal" data-target="#edit_ip_modal"
                                        onclick="EditIP(`{{ $ip->id }}`,`{{ $ip->ip }}`,`{{ addslashes((string) $ip->description) }}`)">Edit</button>
                                @if((int) $ip->status === 1)
                                    <button type="button" class="btn btn-sm btn-outline-secondary" id="update_ip_status{{ $ip->id }}" onclick="UpdateIPStatus(`{{ $ip->id }}`,0)">Block</button>
                                @else
                                    <button type="button" class="btn btn-sm btn-outline-success" id="update_ip_status{{ $ip->id }}" onclick="UpdateIPStatus(`{{ $ip->id }}`,1)">Activate</button>
                                @endif
                                <button type="button" class="btn btn-sm btn-outline-danger" id="delete_ip_btn{{ $ip->id }}" onclick="deleteIP(`{{ $ip->id }}`)">Delete</button>
                            </td>
                        </tr>
                    @empty
                        <tr><td colspan="7" class="text-center text-muted">No allowed IPs yet.</td></tr>
                    @endforelse
                    </tbody>
                </table>
            </div>
        </div>

        <div class="modal" id="add_ip_modal">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <h4 class="modal-title">Add IP</h4>
                        <button type="button" class="close" data-dismiss="modal">&times;</button>
                    </div>
                    <div class="modal-body">
                        <form id="save_ip">
                            <div class="form-group mb-3">
                                <label>IP</label>
                                <input type="text" id="ip" required class="form-control">
                            </div>
                            <div class="form-group mb-3">
                                <label>Description</label>
                                <textarea id="description" rows="5" class="form-control"></textarea>
                            </div>
                            <div class="text-center">
                                <button class="btn btn-primary" id="submit_ip_btn" type="submit">Submit</button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>

        <div class="modal" id="edit_ip_modal">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <h4 class="modal-title">Edit IP</h4>
                        <button type="button" class="close" data-dismiss="modal">&times;</button>
                    </div>
                    <div class="modal-body">
                        <form id="update_ip">
                            <input type="hidden" id="ip_id">
                            <div class="form-group mb-3">
                                <label>IP</label>
                                <input type="text" id="edit_ip" required class="form-control">
                            </div>
                            <div class="form-group mb-3">
                                <label>Description</label>
                                <textarea id="edit_description" rows="5" class="form-control"></textarea>
                            </div>
                            <div class="text-center">
                                <button class="btn btn-primary" id="update_ip_btn" type="submit">Update</button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>

        <div class="cloaker-pane" id="pane-visitors" hidden>
            <div class="table-responsive">
                <table class="table table-bordered table-sm">
                    <thead>
                        <tr>
                            <th>IP</th><th>Status</th><th>Risk</th><th>Network</th><th>Sweep</th><th>Report</th><th>Reason</th><th>Last seen</th><th>Actions</th>
                        </tr>
                    </thead>
                    <tbody>
                    @forelse($visitors as $v)
                        <tr>
                            <td><code>{{ $v->ip_address }}</code></td>
                            <td>
                                @if($v->is_blocked)
                                    <span class="badge bg-danger">Blocked</span>
                                @else
                                    <span class="badge bg-success">Allowed</span>
                                @endif
                            </td>
                            <td>
                                <strong>{{ $v->fraud_score !== null ? $v->fraud_score : '—' }}</strong>
                                <div><span class="badge bg-{{ $v->ipqs_decision === 'block' ? 'danger' : ($v->ipqs_decision === 'review' ? 'warning' : 'secondary') }}">{{ $v->ipqs_decision ?: 'unchecked' }}</span></div>
                            </td>
                            <td>
                                <div>{{ $v->country ?: '—' }} · {{ $v->isp ?: 'Unknown ISP' }}</div>
                                <div class="security-flags">
                                    @foreach(['Bot'=>$v->is_bot,'VPN'=>$v->is_vpn,'Proxy'=>$v->is_proxy,'Tor'=>$v->is_tor,'Abuse'=>$v->recent_abuse] as $flag=>$active)
                                        @if($active)<span class="badge bg-danger">{{ $flag }}</span>@endif
                                    @endforeach
                                </div>
                            </td>
                            <td>{{ $v->scrape_pages }} pages / {{ $v->scrape_seconds }}s<br><small>{{ $v->last_path }}</small></td>
                            <td>
                                @if($v->latestIncident)
                                    <span class="badge bg-{{ $v->latestIncident->report_status === 'reported' ? 'success' : ($v->latestIncident->report_status === 'failed' ? 'danger' : 'warning') }}">{{ $v->latestIncident->report_status }}</span>
                                    <small class="d-block">{{ $v->latestIncident->report_attempts }} attempts</small>
                                @else — @endif
                            </td>
                            <td>{{ $v->block_reason ?: '—' }}</td>
                            <td>{{ $v->updated_at?->format('Y-m-d H:i') }}</td>
                            <td class="text-nowrap">
                                @if($v->is_blocked)
                                    <button type="button" class="btn btn-sm btn-outline-success" onclick='cloakerAction(@json(route('cloaker.visitors.unblock', $v)), "Remove this permanent blacklist?")'>Unblock</button>
                                @else
                                    <button type="button" class="btn btn-sm btn-outline-danger" onclick='cloakerAction(@json(route('cloaker.visitors.block', $v)), "Permanently blacklist this IP?")'>Blacklist</button>
                                @endif
                                <button type="button" class="btn btn-sm btn-outline-secondary" onclick='cloakerAction(@json(route('cloaker.visitors.reset', $v)))'>Reset</button>
                                @if($v->latestIncident && in_array($v->latestIncident->report_status, ['failed','retrying']))
                                    <button type="button" class="btn btn-sm btn-outline-primary" onclick='cloakerAction(@json(route('cloaker.incidents.retry', $v->latestIncident)))'>Retry report</button>
                                @endif
                            </td>
                        </tr>
                    @empty
                        <tr><td colspan="9" class="text-center text-muted">No visitors recorded yet.</td></tr>
                    @endforelse
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>
@endsection
@section('page-js')
<script>
(function () {
    var csrf = document.querySelector('meta[name="csrf-token"]').getAttribute('content');
    function headers() { return { 'X-CSRF-TOKEN': csrf, 'X-Requested-With': 'XMLHttpRequest', 'Accept': 'application/json' }; }

    document.querySelectorAll('.cloaker-tab').forEach(function (btn) {
        btn.addEventListener('click', function () {
            document.querySelectorAll('.cloaker-tab').forEach(function (b) { b.classList.remove('active'); });
            document.querySelectorAll('.cloaker-pane').forEach(function (p) { p.hidden = true; });
            btn.classList.add('active');
            document.getElementById('pane-' + btn.dataset.pane).hidden = false;
            document.getElementById('cloakerSaveRow').hidden = ['whitelist', 'visitors', 'reservesnet'].includes(btn.dataset.pane);
        });
    });

    document.getElementById('cloakerStatus').addEventListener('change', function () {
        var on = this.checked;
        var fd = new FormData(); fd.append('status', on ? 1 : 0);
        fetch(@json(route('cloaker.status')), { method: 'POST', headers: headers(), body: fd, credentials: 'same-origin' })
            .then(function (r) { return r.json(); })
            .then(function (res) {
                document.getElementById('cloakerStatusLabel').textContent = on ? 'Enabled' : 'Disabled';
                if (window.Swal) Swal.fire({ icon: res.icon || 'success', title: res.message });
            });
    });

    document.getElementById('cloakerForm').addEventListener('submit', function (e) {
        e.preventDefault();
        var btn = document.getElementById('cloakerSaveBtn');
        btn.disabled = true;
        fetch(@json(route('cloaker.save')), { method: 'POST', headers: headers(), body: new FormData(this), credentials: 'same-origin' })
            .then(function (r) { return r.json(); })
            .then(function (res) {
                if (window.Swal) Swal.fire({ icon: res.icon || 'success', title: res.message });
            })
            .finally(function () { btn.disabled = false; });
    });

    var openTab = new URLSearchParams(window.location.search).get('tab');
    if (openTab) {
        var tabBtn = document.querySelector('.cloaker-tab[data-pane="' + openTab + '"]');
        if (tabBtn) tabBtn.click();
    }
})();
function cloakerAction(url, confirmation) {
    if (confirmation && !window.confirm(confirmation)) return;
    var csrf = document.querySelector('meta[name="csrf-token"]').getAttribute('content');
    fetch(url, {
        method: 'POST',
        headers: { 'X-CSRF-TOKEN': csrf, 'X-Requested-With': 'XMLHttpRequest', 'Accept': 'application/json' },
        credentials: 'same-origin'
    }).then(function (response) {
        if (!response.ok) throw new Error('Request failed');
        return response.json();
    }).then(function (result) {
        if (window.Swal) {
            Swal.fire({ icon: 'success', title: result.message }).then(function () { window.location.reload(); });
        } else {
            window.location.reload();
        }
    }).catch(function () {
        if (window.Swal) Swal.fire({ icon: 'error', title: 'The security action failed.' });
    });
}
function EditIP(id, ip, description) {
    document.getElementById('ip_id').value = id;
    document.getElementById('edit_ip').value = ip;
    document.getElementById('edit_description').value = description || '';
}
</script>
@endsection