@extends('layouts.app')
@section('content')
<div class="container-fluid">
    <div class="row">
        <div class="col-xl-12">
            <div class="card">
                <div class="card-body">
                    <h4 class="card-title">
                        {{isset($data->id) ? 'Edit' : 'Add' }} {{$pagename}}
                    </h4>
                    
                    <ul class="nav nav-tabs" id="myTab" role="tablist">
                       <li class="nav-item" role="presentation">
                          <button class="nav-link active" id="basic-info-tab" data-bs-toggle="tab" data-bs-target="#basic-info" type="button" role="tab" aria-controls="basic-info" aria-selected="true">
                              Basic Information
                          </button>
                       </li>
                       @if(isset($data->id) && $data->id > 0)
                       <li class="nav-item" role="presentation">
                          <button class="nav-link" id="members-tab" data-bs-toggle="tab" data-bs-target="#members" type="button" role="tab" aria-controls="members" aria-selected="false">Members ({{$data->members_count}})</button>
                       </li>
                       <li class="nav-item" role="presentation">
                          <button class="nav-link" id="events-tab" data-bs-toggle="tab" data-bs-target="#events" type="button" role="tab" aria-controls="events" aria-selected="false">Events ({{$data->events_count}})</button>
                       </li>
                       <li class="nav-item" role="presentation">
                          <button class="nav-link" id="posts-tab" data-bs-toggle="tab" data-bs-target="#posts" type="button" role="tab" aria-controls="posts" aria-selected="false">Posts ({{$data->posts_count}})</button>
                       </li>
                       @endif
                    </ul>                    
                    <div class="tab-content" id="eventTabContent">
                        <div class="tab-pane fade show active" id="basic-info" role="tabpanel" aria-labelledby="basic-info-tab">
                            @include('admin.groups.form')
                        </div> 
                        @if(isset($data->id) && $data->id > 0)
                            <div class="tab-pane fade" id="members" role="tabpanel" aria-labelledby="members-tab">
                                @include('admin.groups.members')
                            </div>   
                            <div class="tab-pane fade" id="events" role="tabpanel" aria-labelledby="events-tab">
                                @include('admin.groups.events')
                            </div>   
                            <div class="tab-pane fade" id="posts" role="tabpanel" aria-labelledby="posts-tab">
                                @include('admin.groups.posts')
                            </div>   
                         @endif
                    </div>
                </div>
            </div>
        </div> <!-- end col -->
    </div> 
</div>
@include('admin.groups.invite')
<script type="text/javascript">
    function filter_member_by_status(status) {
        if( status == 'all' ){
         $(".member-cards").show();
         return false;
        }
        $(".member-cards").hide();
        $('.member-cards.user-'+status).show();
    }
</script>
@endsection