documentverification/staticfiles/verifier/app.js

// Interactive Client JavaScript for DocVerify AI

document.addEventListener('DOMContentLoaded', () => {
    initNavigation();
    initForms();
    initCopyButton();
});

// Tab Navigation Config
const tabMeta = {
    'tab-pan': {
        title: 'PAN Verification Service',
        desc: 'Validate individual or business Permanent Account Numbers (PAN) with name match algorithms.',
        badge: 'POST /api/verify/pan/'
    },
    'tab-aadhaar': {
        title: 'Aadhaar Verification & Masking',
        desc: 'Verify Aadhaar number validity or execute UIDAI compliant Aadhaar card masking.',
        badge: 'POST /api/verify/aadhaar/'
    },
    'tab-gstin': {
        title: 'GSTIN / Business Verification',
        desc: 'Verify Goods and Services Tax Identification Number (GSTIN) and legal business details.',
        badge: 'POST /api/verify/gstin/'
    },
    'tab-ifsc': {
        title: 'IFSC Code Lookup',
        desc: 'Fetch bank name, branch address, MICR code, and supported payment rails by IFSC.',
        badge: 'POST /api/verify/ifsc/'
    },
    'tab-bav': {
        title: 'Bank Account Verification (BAV)',
        desc: 'Real-time synchronous bank account validation via IMPS/NPCI penny drop simulation.',
        badge: 'POST /api/verify/bank-account/'
    },
    'tab-config': {
        title: 'API Credentials & Settings',
        desc: 'Configure Cashfree App ID, Secret Key, and switch between Sandbox and Production modes.',
        badge: 'POST /api/config/'
    }
};

function initNavigation() {
    const navButtons = document.querySelectorAll('.nav-btn');
    const tabPanes = document.querySelectorAll('.tab-pane');

    navButtons.forEach(btn => {
        btn.addEventListener('click', () => {
            const targetTab = btn.getAttribute('data-tab');

            // Update nav buttons
            navButtons.forEach(b => b.classList.remove('active'));
            btn.classList.add('active');

            // Update panes
            tabPanes.forEach(pane => {
                if (pane.id === targetTab) {
                    pane.classList.add('active');
                } else {
                    pane.classList.remove('active');
                }
            });

            // Update header info
            if (tabMeta[targetTab]) {
                document.getElementById('page-title').innerText = tabMeta[targetTab].title;
                document.getElementById('page-desc').innerText = tabMeta[targetTab].desc;
                document.getElementById('api-endpoint-badge').innerHTML = `<i class="fa-solid fa-code"></i> ${tabMeta[targetTab].badge}`;
            }
        });
    });
}

function initForms() {
    // Form 1: PAN Verification
    document.getElementById('form-pan').addEventListener('submit', async (e) => {
        e.preventDefault();
        const pan = document.getElementById('pan-input').value.trim();
        const name = document.getElementById('pan-name-input').value.trim();
        const type = document.getElementById('pan-type-select').value;
        await executeVerification('/api/verify/pan/', { pan, name, type });
    });

    // Form 2: Aadhaar Suite
    document.getElementById('form-aadhaar').addEventListener('submit', async (e) => {
        e.preventDefault();
        const aadhaar_number = document.getElementById('aadhaar-input').value.trim();
        const action = document.querySelector('input[name="aadhaar-action"]:checked').value;
        await executeVerification('/api/verify/aadhaar/', { aadhaar_number, action });
    });

    // Form 3: GSTIN Verification
    document.getElementById('form-gstin').addEventListener('submit', async (e) => {
        e.preventDefault();
        const gstin = document.getElementById('gstin-input').value.trim();
        await executeVerification('/api/verify/gstin/', { gstin });
    });

    // Form 4: IFSC Lookup
    document.getElementById('form-ifsc').addEventListener('submit', async (e) => {
        e.preventDefault();
        const ifsc = document.getElementById('ifsc-input').value.trim();
        await executeVerification('/api/verify/ifsc/', { ifsc });
    });

    // Form 5: Bank Account Verification
    document.getElementById('form-bav').addEventListener('submit', async (e) => {
        e.preventDefault();
        const bank_account = document.getElementById('bav-acc-input').value.trim();
        const ifsc = document.getElementById('bav-ifsc-input').value.trim();
        const name = document.getElementById('bav-name-input').value.trim();
        await executeVerification('/api/verify/bank-account/', { bank_account, ifsc, name });
    });

    // Form 6: Configuration
    document.getElementById('form-config').addEventListener('submit', async (e) => {
        e.preventDefault();
        const client_id = document.getElementById('cfg-client-id').value.trim();
        const client_secret = document.getElementById('cfg-client-secret').value.trim();
        const environment = document.getElementById('cfg-env').value;

        const startTime = performance.now();
        try {
            const res = await fetch('/api/config/', {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify({ client_id, client_secret, environment })
            });
            const latency = Math.round(performance.now() - startTime);
            const json = await res.json();

            updateInspector({
                status_code: res.status,
                latency: latency,
                source: 'configuration_update',
                curl: `curl -X POST '${window.location.origin}/api/config/' \\\n  -H 'Content-Type: application/json' \\\n  -d '{"environment":"${environment}"}'`,
                response: json
            });

            // Update UI status
            document.getElementById('env-name-display').innerText = `${json.environment} MODE`;
            document.getElementById('cred-status-msg').innerHTML = json.has_credentials ?
                '<i class="fa-solid fa-circle-check text-emerald"></i> Custom API Credentials Active' :
                '<i class="fa-solid fa-flask text-amber"></i> Using Cashfree Sandbox Simulation';

        } catch (err) {
            alert('Error updating configuration: ' + err.message);
        }
    });
}

async function executeVerification(endpoint, payload) {
    const statusBadge = document.getElementById('res-status-badge');
    statusBadge.innerText = 'PROCESSING...';
    statusBadge.className = 'badge';

    const startTime = performance.now();
    try {
        const res = await fetch(endpoint, {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify(payload)
        });
        const latency = Math.round(performance.now() - startTime);
        const data = await res.json();

        updateInspector({
            status_code: data.status_code || res.status,
            latency: latency,
            source: data.source || 'server_api',
            curl: data.curl || `curl -X POST '${window.location.origin}${endpoint}' -d '${JSON.stringify(payload)}'`,
            response: data.response || data
        });
    } catch (err) {
        const latency = Math.round(performance.now() - startTime);
        updateInspector({
            status_code: 500,
            latency: latency,
            source: 'client_error',
            curl: `curl -X POST '${window.location.origin}${endpoint}' -d '${JSON.stringify(payload)}'`,
            response: { error: 'Failed to connect to verification server', message: err.message }
        });
    }
}

function updateInspector({ status_code, latency, source, curl, response }) {
    // Status badge
    const statusBadge = document.getElementById('res-status-badge');
    statusBadge.innerText = `HTTP ${status_code}`;
    if (status_code >= 200 && status_code < 300) {
        statusBadge.className = 'badge badge-success';
    } else {
        statusBadge.className = 'badge badge-error';
    }

    // Latency & Source
    document.getElementById('res-latency-text').innerHTML = `<i class="fa-regular fa-clock"></i> ${latency} ms`;
    document.getElementById('res-source-tag').innerText = source.replace('_', ' ').toUpperCase();

    // cURL & Response JSON
    document.getElementById('curl-display').innerText = curl;
    document.getElementById('json-response-display').innerText = JSON.stringify(response, null, 2);
}

// Quick Sample Loaders
function loadSamplePAN(pan, name, type) {
    document.getElementById('pan-input').value = pan;
    document.getElementById('pan-name-input').value = name;
    document.getElementById('pan-type-select').value = type;
}

function loadSampleAadhaar(aadhaar) {
    document.getElementById('aadhaar-input').value = aadhaar;
}

function loadSampleGSTIN(gstin) {
    document.getElementById('gstin-input').value = gstin;
}

function loadSampleIFSC(ifsc) {
    document.getElementById('ifsc-input').value = ifsc;
}

function loadSampleBAV(acc, ifsc, name) {
    document.getElementById('bav-acc-input').value = acc;
    document.getElementById('bav-ifsc-input').value = ifsc;
    document.getElementById('bav-name-input').value = name;
}

function initCopyButton() {
    document.getElementById('btn-copy-curl').addEventListener('click', () => {
        const curlText = document.getElementById('curl-display').innerText;
        navigator.clipboard.writeText(curlText).then(() => {
            const btn = document.getElementById('btn-copy-curl');
            btn.innerHTML = '<i class="fa-solid fa-check text-emerald"></i> Copied!';
            setTimeout(() => {
                btn.innerHTML = '<i class="fa-regular fa-copy"></i> Copy cURL';
            }, 2000);
        });
    });
}