@extends('layouts.app')

@section('content')
    <div class="content">
        <div class="d-flex justify-content-between align-items-center mb-4 flex-wrap gap-2">
            @component('components.breadcrumb', [
                'links' => [
                    ['name' => 'Manage Users', 'url' => ''],
                    ['name' => 'Groups', 'url' => route('groups.index')],
                    ['name' => 'Group Details', 'url' => ''],
                ],
            ])
            @endcomponent


            <a href="{{ route('groups.index') }}" class="btn btn-secondary">Back</a>
        </div>

        @include('layouts.partials.toast')

        <div class="card">
            <div class="card-body p-4">
                <div class="row justify-content-center">
                    <div class="col-md-8">
                        <ul class="list-group list-group-flush">
                            <li class="list-group-item d-flex align-items-center">
                                <i class="fas fa-tag text-primary me-2"></i>
                                <strong>Name:</strong> <span class="ms-2">{{ $group->name }}</span>
                            </li>
                            <li class="list-group-item d-flex align-items-center">
                                <i class="fas fa-info-circle text-primary me-2"></i>
                                <strong>Description:</strong> <span class="ms-2">{{ $group->description ?? null }}</span>
                            </li>
                            <li class="list-group-item d-flex align-items-center">
                                <i class="fas fa-lock text-primary me-2"></i>
                                <strong>Private:</strong> <span
                                    class="ms-2">{{ $group->is_private ? 'Yes' : 'No' }}</span>
                            </li>
                            <li class="list-group-item d-flex align-items-center">
                                <i class="fas fa-check-circle text-primary me-2"></i>
                                <strong>Status:</strong> <span class="ms-2">
                                    <span class="badge text-white"
                                        style="background-color: {{ $group->is_active ? '#608ac4' : '#e74c3c' }};">
                                        {{ $group->is_active ? 'Active' : 'Deactivated' }}
                                    </span>
                                </span>
                            </li>
                            <li class="list-group-item d-flex align-items-center">
                                <i class="fas fa-users text-primary me-2"></i>
                                <strong>User Limit:</strong> <span class="ms-2">{{ $group->limit ?? 0 }}</span>
                            </li>
                            <li class="list-group-item d-flex align-items-start">
                                <i class="fas fa-users text-primary me-2"></i>
                                <strong>Users in Group:</strong>
                                <div class="ms-2">
                                    @if ($group->userGroups->isNotEmpty())
                                        <ul class="list-unstyled">
                                            @foreach ($group->userGroups as $user)
                                                <li class="d-flex align-items-center mb-1">
                                                    <span class="badge bg-primary text-white me-2"
                                                        style="background-color: #007bff;">
                                                        {{ strtoupper(substr($user->user->first_name, 0, 1)) . strtoupper(substr($user->user->last_name, 0, 1)) }}
                                                    </span>
                                                    {{ $user->user->first_name }} {{ $user->user->last_name }}
                                                    <span class="ms-2 text-muted" style="font-size: 0.8rem;">
                                                        (Joined:
                                                        {{ $user->joined_at ? \Carbon\Carbon::parse($user->joined_at)->format('Y-m-d') : null }})
                                                    </span>
                                                </li>
                                            @endforeach
                                        </ul>
                                    @else
                                        <span class="text-muted">No users in this group.</span>
                                    @endif
                                </div>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>


            
        </div>
    @endsection