@extends('layouts.app')

@section('title', 'WhatsApp Groups')

@section('content')
<div class="container-fluid py-4 mt-5">
    <h3 class="mb-4">WhatsApp Groups</h3>
    <p>Manage and view all WhatsApp groups associated with your account.</p>
    <hr>
    <p><strong>Total Groups:</strong> {{ count($groups) }}</p>
    <p><strong>Note:</strong> Click on the eye icon to view group details.</p>

    <table id="groupsTable" class="display table table-striped" style="width:100%">
        <thead>
            <tr>
                <th>#</th>
                <th>Group Name</th>
                <th>Members</th>
                <th>Community</th>
                <th>Created At</th>
                <th>Actions</th>
            </tr>
        </thead>
        <tbody>
            @foreach ($groups as $index => $group)
                <tr>
                    <td>{{ $index + 1 }}</td>
                    <td>{{ $group['name'] ?? 'N/A' }}</td>
                    <td>{{ $group['participantsCount'] ?? count($group['participants'] ?? []) }}</td>
                    <td>{{ $group['isCommunity'] ? 'Yes' : 'No' }}</td>
                    <td>{{ isset($group['createdAt']) ? \Carbon\Carbon::createFromTimestamp($group['createdAt'])->format('Y-m-d H:i:s') : 'N/A' }}</td>
                    <td>
                        <a href="{{ route('groups.show', $group['id']) }}" class="btn btn-sm btn-outline-info">
                            <i class="fas fa-eye"></i>
                        </a>
                        {{-- <button onclick="getInvite('{{ $group['id'] }}')" class="btn btn-sm btn-outline-success">
                            <i class="fas fa-link"></i>
                        </button> --}}
                    </td>
                </tr>
            @endforeach
        </tbody>
    </table>
</div>
@endsection

@push('scripts')
<link rel="stylesheet" href="https://cdn.datatables.net/2.3.4/css/dataTables.dataTables.css">
<script src="https://code.jquery.com/jquery-3.7.1.js"></script>
<script src="https://cdn.datatables.net/2.3.4/js/dataTables.js"></script>

<script>
$(document).ready(function() {
    $('#groupsTable').DataTable({
        paging: true,
        searching: true,
        ordering: true,
        info: true
    });
});

function getInvite(groupId) {
    fetch(`/groups/${groupId}/invite`)
        .then(res => res.json())
        .then(data => {
            if (data.success !== false && data.inviteLink) {
                prompt("Group Invite Link:", data.inviteLink);
            } else {
                alert(data.message || "Failed to get invite link");
            }
        })
        .catch(err => alert(err.message));
}
</script>
@endpush