@extends('layouts.admin_master')
@section('content')
<div class="card">
    <h2>Reporter Mobile Numbers</h2>
    
    <div style="margin-bottom: 20px;">
        <button onclick="exportCsv()">Export CSV</button>
        <button onclick="copyAllNumbers()">Copy All Numbers</button>
        <button onclick="bulkAction('accept')">Bulk Accept</button>
        <button onclick="bulkAction('reject')">Bulk Reject</button>
        <button onclick="bulkAction('delete')">Bulk Delete</button>
    </div>

    <table id="mobileTable" border="1" width="100%">
        <thead>
            <tr>
                <th><input type="checkbox" id="selectAll" onchange="toggleSelectAll()"></th>
                <th>Name</th>
                <th>Mobile Number</th>
                <th>Status</th>
                <th>Actions</th>
            </tr>
        </thead>
        <tbody></tbody>
    </table>

    <div id="selectedCount" style="margin-top: 10px; font-weight: bold;"></div>
</div>
@endsection

@section('scripts')
<script>
const ENDPOINT = '/admin/mobiles';
const CSRF = '{{ csrf_token() }}';
let selectedIds = new Set();

function loadMobiles() {
    fetch(ENDPOINT)
    .then(r => r.json())
    .then(reporters => {
        let tbody = document.querySelector('#mobileTable tbody');
        tbody.innerHTML = '';
        reporters.forEach(r => {
            let tr = document.createElement('tr');
            tr.innerHTML = `
                <td><input type="checkbox" class="row-checkbox" value="${r.id}" onchange="updateSelection()"></td>
                <td>${r.name}</td>
                <td>${r.mobile}</td>
                <td><span class="status-${r.status}">${r.status}</span></td>
                <td>
                    <button onclick="copyNumber('${r.mobile}')">Copy</button>
                    <a href="https://wa.me/${r.mobile}" target="_blank">WhatsApp</a>
                </td>
            `;
            tbody.appendChild(tr);
        });
    });
}

function toggleSelectAll() {
    const selectAll = document.getElementById('selectAll');
    const checkboxes = document.querySelectorAll('.row-checkbox');
    checkboxes.forEach(cb => { cb.checked = selectAll.checked; });
    updateSelection();
}

function updateSelection() {
    const checkboxes = document.querySelectorAll('.row-checkbox:checked');
    selectedIds.clear();
    checkboxes.forEach(cb => selectedIds.add(cb.value));
    document.getElementById('selectedCount').textContent = 
        `Selected: ${selectedIds.size} reporter(s)`;
}

function copyNumber(mobile) {
    navigator.clipboard.writeText(mobile).then(() => {
        alert('Mobile number copied!');
    });
}

function copyAllNumbers() {
    fetch(ENDPOINT)
    .then(r => r.json())
    .then(reporters => {
        const numbers = reporters.map(r => r.mobile).join(', ');
        navigator.clipboard.writeText(numbers).then(() => {
            alert('All mobile numbers copied!');
        });
    });
}

function exportCsv() {
    window.open('/admin/mobiles/export', '_blank');
}

function bulkAction(action) {
    if (selectedIds.size === 0) {
        alert('Please select at least one reporter');
        return;
    }
    const confirmation = confirm(`${action} ${selectedIds.size} selected reporter(s)?`);
    if (!confirmation) return;
    fetch(`/admin/mobiles/bulk-${action}`, {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'X-CSRF-TOKEN': CSRF
        },
        body: JSON.stringify({ ids: Array.from(selectedIds) })
    })
    .then(r => r.json())
    .then(data => {
        alert(`${data.count} reporter(s) ${action}ed successfully`);
        loadMobiles();
        selectedIds.clear();
        document.getElementById('selectAll').checked = false;
        updateSelection();
    });
}
window.onload = loadMobiles;
</script>
@endsection