@extends('admin.layout.master')

@section('content')
<div class="content">
    <div class="p-4">

        <div class="d-flex justify-content-between align-items-center mb-3">
            <h4 class="text-body mb-0">Platform Access — KYC Users</h4>
            <span class="badge bg-primary fs-10">{{ $records->total() }} Records</span>
        </div>

        {{-- Filters --}}
        <form method="GET" action="{{ route('admin.node_kyc_list') }}" class="row g-2 mb-3">
            <div class="col-md-4">
                <input type="text" name="search" class="form-control form-control-sm"
                       placeholder="Search username or customer ID..."
                       value="{{ request('search') }}">
            </div>
            <div class="col-auto">
                <button type="submit" class="btn btn-primary btn-sm">Filter</button>
                <a href="{{ route('admin.node_kyc_list') }}" class="btn btn-secondary btn-sm ms-1">Reset</a>
            </div>
        </form>

        {{-- Table --}}
        <div class="card shadow-none border">
            <div class="card-body p-0">
                <div class="table-responsive">
                    <table class="table table-sm table-hover mb-0 fs-9">
                        <thead class="table-light">
                            <tr>
                                <th class="ps-3" style="width:48px">#</th>
                                <th>Customer ID</th>
                                <th>Username</th>
                                <th>Allowed IP</th>
                                <th>Applied On</th>
                                <th class="text-center" style="width:110px">Action</th>
                            </tr>
                        </thead>
                        <tbody id="kyc-table-body">
                            @forelse ($records as $key => $row)
                            <tr>
                                <td class="ps-3 align-middle text-muted">{{ $records->firstItem() + $key }}</td>
                                <td class="align-middle"><code class="text-body">{{ $row->customer_id }}</code></td>
                                <td class="align-middle fw-semibold">{{ $row->username }}</td>
                                <td class="align-middle" id="ip-cell-{{ $row->id }}">
                                    @if ($row->allowed_ip)
                                        <span class="badge bg-success-subtle text-success border border-success-subtle">
                                            {{ $row->allowed_ip }}
                                        </span>
                                    @else
                                        <span class="badge bg-warning-subtle text-warning border border-warning-subtle">
                                            Pending
                                        </span>
                                    @endif
                                </td>
                                <td class="align-middle text-muted">
                                    {{ $row->created_at ? $row->created_at->format('d M Y, h:i A') : '—' }}
                                </td>
                                <td class="align-middle text-center">
                                    @if (!$row->allowed_ip)
                                    <button type="button"
                                        class="btn btn-sm btn-outline-primary btn-set-ip"
                                        data-id="{{ $row->id }}"
                                        data-username="{{ $row->username }}"
                                        data-ip="">
                                        Set IP
                                    </button>
                                    @else
                                    <button type="button"
                                        class="btn btn-sm btn-outline-secondary btn-set-ip"
                                        data-id="{{ $row->id }}"
                                        data-username="{{ $row->username }}"
                                        data-ip="{{ $row->allowed_ip }}">
                                        Update
                                    </button>
                                    @endif
                                </td>
                            </tr>
                            @empty
                            <tr id="empty-row">
                                <td colspan="6" class="text-center text-muted py-4">No records found.</td>
                            </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
            </div>

            @if ($records->hasPages())
            <div class="card-footer d-flex justify-content-end">
                {{ $records->links() }}
            </div>
            @endif
        </div>

    </div>
</div>

{{-- Set IP Modal --}}
<div class="modal fade" id="ipModal" tabindex="-1" aria-labelledby="ipModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" style="max-width:420px">
        <div class="modal-content border-0 shadow">
            <div class="modal-header border-bottom-0 pb-0">
                <div>
                    <h5 class="modal-title fw-bold" id="ipModalLabel">Set Allowed IP</h5>
                    <p class="text-muted small mb-0" id="modal-username">—</p>
                </div>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body pt-3">
                <label class="form-label fw-semibold" for="input-ip">
                    IP Address <span class="text-danger">*</span>
                </label>
                <input type="text" id="input-ip" class="form-control"
                       placeholder="e.g. 192.168.1.100" maxlength="45" autocomplete="off">
                <div class="invalid-feedback">Enter a valid IP address (e.g. 192.168.1.100).</div>
                <div id="ip-alert" class="alert d-none py-2 small mt-3 mb-0"></div>
            </div>
            <div class="modal-footer border-top-0 pt-0">
                <button type="button" class="btn btn-light btn-sm" data-bs-dismiss="modal">Cancel</button>
                <button type="button" class="btn btn-primary btn-sm px-4" id="btn-save-ip">
                    <span id="btn-save-ip-text">Save IP</span>
                </button>
            </div>
        </div>
    </div>
</div>

@endsection

@section('script')
<script>
// Called by master.blade.php polling when a new IP request arrives
window.appendIpRow = function (data) {
    var tbody = document.getElementById('kyc-table-body');
    if (!tbody) return;

    // Remove empty-state row if present
    var emptyRow = document.getElementById('empty-row');
    if (emptyRow) emptyRow.remove();

    var id         = data.id        || '';
    var customerId = data.customer_id || data.customerId || '—';
    var username   = data.username  || '—';
    var now        = new Date().toLocaleString('en-IN', {
        day: '2-digit', month: 'short', year: 'numeric',
        hour: '2-digit', minute: '2-digit', hour12: true
    });

    var tr = document.createElement('tr');
    tr.id  = 'live-row-' + id;
    tr.className = 'table-warning';
    tr.innerHTML =
        '<td class="ps-3 align-middle text-muted">—</td>' +
        '<td class="align-middle"><code class="text-body">' + escHtml(customerId) + '</code></td>' +
        '<td class="align-middle fw-semibold">' + escHtml(username) +
            ' <span class="badge bg-primary ms-1" style="font-size:10px">New</span></td>' +
        '<td class="align-middle" id="ip-cell-' + id + '">' +
            '<span class="badge bg-warning-subtle text-warning border border-warning-subtle">Pending</span>' +
        '</td>' +
        '<td class="align-middle text-muted">' + escHtml(now) + '</td>' +
        '<td class="align-middle text-center">' +
            '<button type="button" class="btn btn-sm btn-outline-primary btn-set-ip"' +
            ' data-id="' + id + '" data-username="' + escHtml(username) + '" data-ip="">' +
            'Set IP</button>' +
        '</td>';

    tbody.insertBefore(tr, tbody.firstChild);

    // Bind Set IP click on new row button
    bindSetIpBtn(tr.querySelector('.btn-set-ip'));

    // Fade yellow highlight after 6s
    setTimeout(function () { tr.classList.remove('table-warning'); }, 6000);
};

function escHtml(s) {
    return String(s || '').replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;').replace(/"/g,'&quot;');
}

// ─── Set IP Modal logic ───────────────────────────────────────────────────────
var currentRecordId = null;

function bindSetIpBtn(btn) {
    btn.addEventListener('click', function () {
        currentRecordId = this.dataset.id;
        document.getElementById('modal-username').textContent = this.dataset.username || '—';
        document.getElementById('input-ip').value = this.dataset.ip || '';
        document.getElementById('input-ip').classList.remove('is-invalid');
        document.getElementById('ip-alert').classList.add('d-none');
        new bootstrap.Modal(document.getElementById('ipModal')).show();
    });
}

// Bind existing rows
document.querySelectorAll('.btn-set-ip').forEach(bindSetIpBtn);

document.getElementById('btn-save-ip').addEventListener('click', function () {
    var ip      = document.getElementById('input-ip').value.trim();
    var ipInput = document.getElementById('input-ip');
    var alertEl = document.getElementById('ip-alert');
    var btn     = this;

    if (!ip || !/^(\d{1,3}\.){3}\d{1,3}$/.test(ip)) {
        ipInput.classList.add('is-invalid');
        return;
    }
    ipInput.classList.remove('is-invalid');
    btn.disabled = true;
    document.getElementById('btn-save-ip-text').textContent = 'Saving...';
    alertEl.classList.add('d-none');

    fetch('/admin/node-kyc/' + currentRecordId + '/save-ip', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content,
            'Accept': 'application/json',
        },
        body: JSON.stringify({ allowed_ip: ip }),
    })
    .then(function(r) { return r.json(); })
    .then(function(data) {
        if (data.success) {
            alertEl.className = 'alert alert-success py-2 small mt-3 mb-0';
            alertEl.textContent = 'IP saved successfully!';
            alertEl.classList.remove('d-none');

            // Update IP cell in table
            var cell = document.getElementById('ip-cell-' + currentRecordId);
            if (cell) {
                cell.innerHTML = '<span class="badge bg-success-subtle text-success border border-success-subtle">' +
                    escHtml(data.allowed_ip) + '</span>';
            }
            // Update button
            var rowBtn = document.querySelector('.btn-set-ip[data-id="' + currentRecordId + '"]');
            if (rowBtn) {
                rowBtn.dataset.ip = data.allowed_ip;
                rowBtn.textContent = 'Update';
                rowBtn.className = 'btn btn-sm btn-outline-secondary btn-set-ip';
            }

            setTimeout(function () {
                bootstrap.Modal.getInstance(document.getElementById('ipModal')).hide();
            }, 1000);
        } else {
            alertEl.className = 'alert alert-danger py-2 small mt-3 mb-0';
            alertEl.textContent = data.message || 'Failed to save. Please try again.';
            alertEl.classList.remove('d-none');
        }
    })
    .catch(function() {
        alertEl.className = 'alert alert-danger py-2 small mt-3 mb-0';
        alertEl.textContent = 'Network error. Please try again.';
        alertEl.classList.remove('d-none');
    })
    .finally(function() {
        btn.disabled = false;
        document.getElementById('btn-save-ip-text').textContent = 'Save IP';
    });
});
</script>
@endsection