@extends('crm.layouts.master')
@section('title', 'Cloaker')
@section('page-css')
<style>
.cloaker-tab { cursor:pointer; }
.cloaker-pane[hidden] { display:none !important; }
</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>

<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="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(['Bot','Proxy','VPN'] as $f)
                        <option value="{{ $f }}" @selected(in_array($f, $selectedFilters))>{{ $f }}</option>
                    @endforeach
                </select>
                <p class="text-muted small mt-2 mb-0">Visitors matching any selected filter are shown the safe page instead of the website.</p>
            </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>Country</th><th>ISP</th><th>Visits</th><th>Reason</th><th>Last seen</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>{{ $v->country }}</td>
                            <td>{{ $v->isp }}</td>
                            <td>{{ $v->visit_count }}</td>
                            <td>{{ $v->block_reason ?: '—' }}</td>
                            <td>{{ $v->updated_at?->format('Y-m-d H:i') }}</td>
                        </tr>
                    @empty
                        <tr><td colspan="7" 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 = (btn.dataset.pane === 'whitelist' || btn.dataset.pane === 'visitors');
        });
    });

    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 EditIP(id, ip, description) {
    document.getElementById('ip_id').value = id;
    document.getElementById('edit_ip').value = ip;
    document.getElementById('edit_description').value = description || '';
}
</script>
@endsection