@extends('layouts.app')

@section('title', 'Group Details')

@push('styles')

@endpush
@section('content')

<div class="container-fluid">
    <div class="row">
        <div class="col-12">
            <h3 class="mb-4">Group Details</h3>
        </div>
    </div>

    <a href="{{ route('groups.list') }}" class="btn btn-outline-primary mb-3">
        <i class="fas fa-arrow-left"></i> Back to Groups
    </a>

     <!-- Display API Messages -->
     @if (session('error'))
     <div class="alert alert-danger">
         <i class="fas fa-exclamation-circle me-2"></i> {{ session('error') }}
     </div>
 @endif
 @if (session('success'))
     <div class="alert alert-success">
         <i class="fas fa-check-circle me-2"></i> {{ session('success') }}
     </div>
 @endif

 <!-- Group Details Card -->
 <div class="card mb-4">
     <div class="card-header bg-primary text-white">
         <h4 class="mb-0">{{ $group['subject'] }}</h4>
        <span class="badge {{ $group['isCommunity'] ? 'bg-success' : 'bg-secondary' }}">
             {{ $group['isCommunity'] ? 'Community' : 'Regular Group' }}
        </span>
     </div>
     <div class="card-body">
        {{-- <p></p> --}}
        {{-- <p><strong>Member Count:</strong>{{ count($participants) }}</p> --}}
         <p><strong>Owner:</strong> {{ $group['owner'] }}</p>
         <p><strong>Created:</strong> {{ date('Y-m-d', $group['created_at']) }}</p>
         <p><strong>Description:</strong> {{ $group['description'] ?? 'No description available' }}</p>

         <!-- Action Buttons -->
         <div class="mt-3">
             <a href="{{ route('groups.send-group-message', ['groupId' => $group['id']]) }}" class="btn btn-success">
                 <i class="fas fa-envelope"></i> Send Message
             </a>
         </div>
     </div>
 </div>

 <!-- Members Table -->
   <div class="card">
    <div class="card-header d-flex justify-content-between align-items-center">
        <h5 class="mb-0">Members ({{ count($participants) }})</h5>
        <input type="text" class="form-control w-25" id="searchMembers" placeholder="Search members...">
    </div>
    <div class="card-body">
        <form id="removeMembersForm" method="POST" action="{{ route('groups.remove-members', ['groupId' => $group['id']]) }}">
            @csrf
        
            <table class="table table-bordered" id="membersTable">
                <thead>
                    <tr>
                        <th><input type="checkbox" id="selectAll"></th>
                        <th>Member ID</th>
                        <th>Role</th>
                        <th>Actions</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach ($participants as $participant)
                        <tr>
                            <td>
                                @if ($participant['isAdmin'] !== 'superadmin')
                                    <input type="checkbox" name="members[]" value="{{ $participant['id'] }}">
                                @endif
                            </td>
                            <td>{{ $participant['id'] }}</td>
                            <td>
                                {{ $participant['isAdmin'] }}
                                <span class="badge {{ $participant['isAdmin'] === 'superadmin' ? 'bg-danger' : 'bg-secondary' }}">
                                    {{ $participant['isAdmin'] === 'superadmin' ? 'Admins' : 'Member' }}
                                </span>
                            </td>
                            <td>
                                @if ($participant['isAdmin'] !== 'superadmin')
                                    <form action="{{ route('groups.remove-member', ['groupId' => $group['id'], 'memberId' => $participant['id']]) }}" method="POST" class="d-inline">
                                        @csrf
                                        <button type="submit" class="btn btn-danger btn-sm">
                                            <i class="fas fa-user-minus"></i> Remove
                                        </button>
                                    </form>
                                @else
                                    <span class="text-muted">No actions</span>
                                @endif
                            </td>
                        </tr>
                    @endforeach
                </tbody>
            </table>
        
            <!-- Remove Selected Button -->
            <button type="submit" id="removeMembersBtn" class="btn btn-danger mt-3" disabled>
                <i class="fas fa-user-minus"></i> Remove Selected
            </button>
        </form>
        
        

        <!-- Pagination -->
        <div class="d-flex justify-content-center mt-3">
            <button class="btn btn-outline-secondary" id="prevPage">Previous</button>
            <span class="mx-3" id="pageInfo">Page 1</span>
            <button class="btn btn-outline-secondary" id="nextPage">Next</button>
        </div>
    </div>
</div>
</div>

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function () {
    const selectAll = document.getElementById('selectAll');
    const checkboxes = document.querySelectorAll('input[name="members[]"]');
    const removeBtn = document.getElementById('removeMembersBtn');
    const searchInput = document.getElementById("searchMembers");
    const tableRows = document.querySelectorAll("#membersTable tbody tr");
    const prevPageBtn = document.getElementById("prevPage");
    const nextPageBtn = document.getElementById("nextPage");
    let currentPage = 1;
    const rowsPerPage = 15;

    function toggleRemoveButton() {
        const anyChecked = [...checkboxes].some(checkbox => checkbox.checked);
        removeBtn.disabled = !anyChecked;
    }

    function filterMembers() {
        const query = searchInput.value.toLowerCase();
        tableRows.forEach(row => {
            const memberId = row.children[1].textContent.toLowerCase();
            const memberRole = row.children[2].textContent.toLowerCase();
            row.style.display = memberId.includes(query) ? "table-row" : "none";
            row.style.display = memberRole.includes(query) ? "table-row" : "none";
        });
    }

    function paginateTable() {
        const rows = Array.from(tableRows);
        rows.forEach((row, index) => {
            row.style.display = index >= (currentPage - 1) * rowsPerPage && index < currentPage * rowsPerPage ? "table-row" : "none";
        });

        document.getElementById("pageInfo").textContent = `Page ${currentPage}`;
        prevPageBtn.disabled = currentPage === 1;
        nextPageBtn.disabled = currentPage * rowsPerPage >= rows.length;
    }

    // select all checkbox
    selectAll.addEventListener('change', function () {
        checkboxes.forEach(checkbox => {
            checkbox.checked = selectAll.checked;
        });
        toggleRemoveButton();
    });

    checkboxes.forEach(checkbox => {
        checkbox.addEventListener('change', toggleRemoveButton);
    });

    // search and pagination
    searchInput.addEventListener("keyup", filterMembers);
    prevPageBtn.addEventListener("click", () => { currentPage--; paginateTable(); });
    nextPageBtn.addEventListener("click", () => { currentPage++; paginateTable(); });
    
    paginateTable();

    document.querySelectorAll(".remove-single").forEach(button => {
        button.addEventListener("click", function () {
            const memberId = this.getAttribute("data-id");
            if (confirm("Are you sure you want to remove this member?")) {
                const form = document.getElementById("removeMembersForm");
                const hiddenInput = document.createElement("input");
                hiddenInput.type = "hidden";
                hiddenInput.name = "members[]";
                hiddenInput.value = memberId;
                form.appendChild(hiddenInput);
                form.submit();
            }
        });
    });
});
</script>
@endpush

@endsection