@layout('admin/master')
@section('content')
  <section class="main-content">
    <div class="row">
        
        <div class="col-sm-12">
            @if(hasErrorFor('errors'))
              @!component('admin.flash-errors', {errors: getErrorFor('errors')})
            @endif
            @if(hasErrorFor('error'))
            @!component('admin.flash-error', error = getErrorFor('error') )
            @endif
            @if(flashMessage('success'))
            @!component('admin.flash-success', success = flashMessage('success') )
            @endif
            <form method="post">
                {{ csrfField() }}

                <div class="row">
                    <div class="col-md-6">
                      <div class="card">
                        <div class="card-header">
                          Group Details
                        </div>
                            <div class="card-body">
                                <div class="form-group text-center">
                                <img id="image_url" src="{{ storageUrl(record.image_url) }}" alt="Group Image" class="rounded-circle" style="width: 50px; height: 50px;">
                                </div>
                              <div class="form-group">
                              <label for="title">Group Name</label>
                              <p id="title">{{ record.title }}</p>
                              </div>
                              <div class="form-group">
                              <label for="description">Group Description</label>
                              <p id="description">{{ record.description }}</p>
                              </div>
                              <div class="form-group">
                              <label for="privacy_type">Privacy Type</label>
                                <p id="privacy_type">
                                @if(record.privacy_type == '1')
                                  <i class="fa fa-unlock"></i> Public
                                @else
                                  <i class="fa fa-lock"></i> Private
                                @endif
                                </p>
                              </div>
                                <div class="form-group">
                                  <label for="status">Status</label>
                                  <select id="status" name="status" class="form-control">
                                    <option value="1" {{ record.status == '1' ? 'selected' : '' }}>Active</option>
                                    <option value="0" {{ record.status == '0' ? 'selected' : '' }}>Inactive</option>
                                  </select>
                                </div>
                                <div class="form-group">
                                  <div class="buttons" style="display: flex; justify-content: end">
                                      <button class="btn btn-primary">Submit</button>
                                  </div>
                                </div>
                            </div>
                      </div>
                  </div>
                  
                  <div class="col-md-6">
                      <div class="card">
                          <div class="card-body">
                            <h4 class="font-weight-bold text-center">
                              Total Members: <span class="badge badge-primary" style="padding-top: 5px; padding-bottom=5px">{{ record.groupMembers.length }}</span>
                            </h4>
                          </div>
                          
                          <div class="card-body">
                              <div class="scrollDiv">
                                  <ul class="chat-list list-unstyled">
                                    @each(item in record.groupMembers)
                                    <li class="clearfix chat-element media">
                                        <a href='javascript: void(0);' class="float-left">
                                            <img src={{storageUrl(item.user.image_url)}} alt="" class="rounded-circle">
                                        </a>
                                        <div class="media-body ">
                                            <div class="speech-box">
                                                <strong>{{ item.user.name }}</strong>
                                                @if(item.is_admin == 1)
                                                <small class="text-info">Admin</small>
                                                @endif
                                            </div>
                                        </div>
                                    </li>
                                    @endeach
                                  </ul>
                              </div>
                          </div>
                      </div>
                  </div>
              </div>
            </form>
        </div>        
    </div>    
    @include('admin.footer')
  </section>
@endsection