@extends('layouts.app')

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

@section('content')
<div class="container-fluid py-4 mt-5">

    {{-- Page Title & Back Button --}}
    <div class="d-flex justify-content-between align-items-center mb-4">
        <h2 class="fw-bold mb-0">
            <i class="bi bi-people-fill text-primary"></i>
            {{ $group['name'] ?? $group['subject'] ?? 'Group Details' }}
        </h2>
        <a href="{{ route('groups.index') }}" class="btn btn-outline-primary">
            <i class="bi bi-arrow-left"></i> Back
        </a>
    </div>

    {{-- Error Message --}}
    @if(!empty($error))
        <div class="alert alert-danger shadow-sm">{{ $error }}</div>
    @endif

    @php
        $participants = $group['participants'] ?? [];

        // Sort participants: superadmin > admin > member
        usort($participants, function($a, $b) {
            $rank = ['superadmin' => 1, 'admin' => 2, '' => 3, null => 3];
            return ($rank[$a['admin'] ?? ''] ?? 3) <=> ($rank[$b['admin'] ?? ''] ?? 3);
        });

        $admins = array_filter($participants, fn($p) => !empty($p['admin']));
        $totalAdmins = count($admins);
    @endphp

    {{-- Group Information Card --}}
    <div class="card shadow-sm border-0 mb-4">
        <div class="card-header bg-primary text-white">
            <i class="bi bi-info-circle"></i> Group Information
        </div>
        <div class="card-body">
            <div class="row g-3">
                <div class="col-md-6"><strong>Group ID:</strong> {{ $group['id'] ?? '-' }}</div>
                <div class="col-md-6"><strong>Group Name:</strong> {{ $group['name'] ?? $group['subject'] ?? '-' }}</div>
                <div class="col-md-12"><strong>Description:</strong> {{ $group['desc'] ?? 'No description available' }}</div>
                <div class="col-md-6"><strong>Created At:</strong> {{ $group['createdAt'] ?? '-' }}</div>
                <div class="col-md-6"><strong>Owner:</strong> {{ $group['creator'] ? cleanWhatsAppNumber($group['creator']) : 'N/A' }}</div>
                <div class="col-md-6"><strong>Community:</strong> {{ !empty($group['isCommunity']) ? 'Yes' : 'No' }}</div>
                <div class="col-md-6"><strong>Total Participants:</strong> {{ count($participants) }}</div>
                <div class="col-md-6"><strong>Total Admins:</strong> {{ $totalAdmins }}</div>
            </div>
        </div>
    </div>

    {{-- Participants Table --}}
    <div class="card shadow-sm border-0">
        <div class="card-header bg-secondary text-white">
            <i class="bi bi-people"></i> All Participants
        </div>
        <div class="card-body">
            <table id="participantsTable" class="display table table-striped" style="width:100%">
                <thead>
                    <tr>
                        <th>#</th>
                        <th>Phone Number</th>
                        <th>Role</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach($participants as $index => $p)
                        <tr>
                            <td>{{ $index + 1 }}</td>
                            <td>{{ cleanWhatsAppNumber($p['phonenumber']) }}</td>
                            <td>
                                @if(!empty($p['admin']))
                                    <span class="badge bg-success">{{ ucfirst($p['admin']) }}</span>
                                @else
                                    <span class="badge bg-secondary">Member</span>
                                @endif
                            </td>
                        </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
    </div>

</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() {
    $('#participantsTable').DataTable({
        paging: true,
        searching: true,
        ordering: true,
        info: true,
        pageLength: 10
    });
});
</script>
@endpush