@include('admin/header')
<section class="main-content">
  <div class="row">
      <div class="col-sm-12">
          @include('flash_message')
          <div class="card">
              <div class="card-header card-default">
                  Add Chat Group
              </div>
              <div class="card-body">
                <form action="{{ route('chat_message_group.store') }}" method="POST" enctype="multipart/form-data">
                    {{ csrfField() }}
                    <div class="row">
                        <div class="col-12 col-md-4">
                            <div class="form-group">
                                <label>Group Title</label>
                                <input required class="form-control" name="title" type="text" maxlength="50" placeholder="Enter title (max 50 characters)">                      </div>
                            </div>
                       
                    <div class="col-12 col-md-4">

                        <div class="form-group">
                            <label>Add Users</label>
                            <select id="userSelect" class="form-control" name="members[]" multiple="multiple" style="width:100%">
                                @each(user in users)
                                    <option value="{{ user.id }}">{{ (user.name) ? user.name : user.mobile_no }}</option>
                                @end
                            </select>
                        </div>
                      </div>

                    <div class="col-12 col-md-4">

                        <div class="form-group mt-3">
                            <label>Selected Users</label>
                            <div id="selectedUsers" class="user-tags"></div>
                        </div>
                      </div>

                    <div class="col-12 col-md-6">

                      <div class="form-group">
                          <label>Group Icon</label>
                          <input required class="form-control" name="image_url" type="file" accept="image/*">
                      </div>
                      </div>

                    <div class="col-12 col-md-12">

                      <div class="form-group">
                          <label>Description</label>
                          <textarea required class="form-control" name="description" rows="3"></textarea>
                      </div>
                      </div>

                    <div class="col-12">
                            <div class="form-group mt-3">
                                    <div class="buttons">
                                        <button class="btn btn-primary">Submit</button>
                                    </div>
                              </div>
                              </div>
                     {{-- <div class="form-group mt-3">
                          <button class="btn btn-primary">Submit</button>
                      </div>--}}
                      </div>
                  </form>
              </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>

<style>
    .user-tags .badge {
        margin-right: 5px;
        margin-bottom: 5px;
    }
</style>

<script>
    $(document).ready(function() {
        $('#userSelect').select2({
            placeholder: "Search and select users"
        });

        function updateUserTags() {
            const selectedUsers = $('#userSelect').select2('data');
            console.log(selectedUsers)
            const $container = $('#selectedUsers');
            $container.empty();
            selectedUsers.forEach(user => {
                $container.append(`<span class="badge bg-primary">${user.text}</span>`);
            });
        }

        $('#userSelect').on('change', updateUserTags);

        // Initial load (for old form values if validation fails)
        updateUserTags();
    });
</script>