@include('admin/header')
<section class="main-content">
  <div class="row">
    @include('flash_message')

  <div class="col-sm-12">
    <div class="card">
      <div class="card-header d-flex align-items-center justify-content-between">
        <div class="d-flex align-items-center">
          <!-- Group Icon -->
          
          <img 
            src="{{ record.imageUrl ? config('constants.BASE_URL') + '/' + record.imageUrl : '/admin/assets/img/avtar-2.png' }}" 
            alt="Group Icon" 
            class="rounded-circle me-2" 
            width="40" height="40">
          <h5 class="mb-0 font-weight-bold">{{record.title}}</h5>
        </div>
        <!-- Total Users -->
        <span class="badge badge-member">{{users ? users.length : 0}} Members</span>
      </div>

      <div class="card-body">
        <!-- Group Description -->
        <p class="mb-4">
          {{record.description}}
        </p>

        <!-- Group Users List -->
        <div class="d-flex align-items-center justify-content-between mb-3">
          <h6 class="mb-0">Group Members</h6>
          <span class="text-muted small">{{users ? users.length : 0}} total</span>
        </div>
        <ul class="list-group">
          @each(user in users)
            <li class="list-group-item">
              <div class="d-flex align-items-center justify-content-between flex-wrap gap-3">
                <div class="d-flex align-items-center gap-3">
                  <img 
                    src="{{ user.image_url ? config('constants.BASE_URL') + '/' + user.image_url : '/admin/assets/img/avtar-2.png' }}" 
                    alt="{{ user.name ? user.name : 'Member' }}" 
                    class="rounded-circle flex-shrink-0" style="width: 48px; height: 48px; object-fit: cover;">
                  <div>
                    <span class="fw-semibold d-block">{{ user.name ? user.name : user.mobile_no }}</span>
                    <span class="text-muted small d-block">{{ user.mobile_no }}</span>
                    @if(user.email)
                      <span class="text-muted small d-block">{{ user.email }}</span>
                    @endif
                  </div>
                </div>
                @if(user.user_id != 1)
                  <form action="{{route('admin.chat-room.remove-user')}}" method="POST" class="ms-auto">
                    {{ csrfField() }}
                    <input type="hidden" name="chat_room_id" value="{{record.id}}">
                    <input type="hidden" name="user_id" value="{{user.user_id}}">
                    <button type="submit" class="btn btn-outline-danger btn-sm">
                      Remove
                    </button>
                  </form>
                @endif
              </div>
            </li>
          @endeach
        </ul>

      </div>
    </div>
  </div>
</div>

  @include('admin/footer')
</section>

<!-- Include Select2 and jQuery -->
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
{{--
<!-- Optional: Bootstrap 5 for styling (if not already included) -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
--}}