@extends('layouts.master', [
    'title' => __('app.user_management'),
    'icon_back' => true,
    'url' => route('group.index'),
])

@push('meta')
    <meta name="csrf-token" content="{{ csrf_token() }}">
@endpush

@section('content')
    <div class="page-content-inner">
        <div class="personal-dashboard personal-dashboard-v1">
            <div class="dashboard-header" style="margin-left: -12px;margin-top:-5px">
                <div class="start">
                    <div class="fs-28 fw-700 my-2">Group <span class="fw-700">{{ $group->name }}</span></div>
                    <p>Manage group: Add or remove user from group</p>
                </div>
            </div>
            <div class="columns is-multiline">
                <div class="column is-6">
                    <div class="table-wrapper">
                        <table id="table_user_not_in_group" class="table is-datatable is-hoverable table-is-bordered">
                            <thead>
                                <tr>
                                    <th class="has-text-centered" colspan="3">User Not In Group</th>
                                </tr>
                                <tr>
                                    <th class="has-text-centered">@lang('app.nomor')</th>
                                    <th class="has-text-centered">@lang('app.name')</th>
                                    <th class="has-text-centered">@lang('app.actions')</th>
                                </tr>
                            </thead>
                            <tbody></tbody>
                        </table>
                    </div>
                    <div id="pagination_user_not_in_group"></div>
                </div>
                <div class="column is-6">
                    <div class="table-wrapper">
                        <table id="table_user_in_group" class="table is-datatable is-hoverable table-is-bordered">
                            <thead>
                                <tr>
                                    <th class="has-text-centered" colspan="3">User In Group</th>
                                </tr>
                                <tr>
                                    <th class="has-text-centered">@lang('app.nomor')</th>
                                    <th class="has-text-centered">@lang('app.name')</th>
                                    <th class="has-text-centered">@lang('app.actions')</th>
                                </tr>
                            </thead>
                            <tbody></tbody>
                        </table>
                    </div>
                    <div id="pagination_user_in_group"></div>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('scripts')
    <script>
        const groupID = '{{ $group->id }}'
        const roleID = '{{ $group->role_id }}'
        const urlUserNotInGroup = '{{ route('group.user-not-in-group') }}'
        const urlUserInGroup = '{{ route('group.user-in-group') }}'
    </script>
    <script src="{{ asset('assets/js/user-management/detail-group.js') }}"></script>
    <script src="{{ asset('assets/js/table-loader.js') }}"></script>
    <script src="{{ asset('assets/js/pagination/Paginate.js') }}"></script>
    <script src="{{ asset('assets/js/pagination/change-perpage.js') }}"></script>
@endpush