@if($menuTemplate && (new \App\Actions\UserPageMenuItem\AssignedUserListAction($menuTemplate))->getCount())
<div class="col-12">
    <p class="mt-4 mb-1">
        <i class="fa-solid fa-users"></i>
        Users assigned to template: {{ $menuTemplate->name }}
    </p>
    <div class="main-card mb-3 card small">
        <div class="card-body">
            <div class="table-responsive">
                <table id="assigned-user-datatable" class="table table-hover table-striped table-bordered">
                    <thead>
                        <tr>
                            <th style="width: 10px;"><input type="checkbox" id="select-all"></th>
                            <th style="width: 50px;">#ID</th>
                            <th style="width: 100px;">#aMember ID</th>
                            <th>Name</th>
                            <th class="text-end" style="width: 130px;">Action</th>
                        </tr>
                    </thead>
                    <tbody>
                    @foreach((new \App\Actions\UserPageMenuItem\AssignedUserListAction($menuTemplate))->getList() as $key => $userPageMenuItem)
                        <tr>
                            <td>{{ $userPageMenuItem->id }}</td>
                            <td>{{ $userPageMenuItem->user?->id }}</td>
                            <td>{{ $userPageMenuItem->user?->am_user_id }}</td>
                            <td>{{ $userPageMenuItem->user?->name }}</td>
                            <td class="text-end" >
                                <button class="btn btn-sm btn-danger py-0"
                                        onclick="Helper.deleteData({{ $userPageMenuItem->id }}, '', 'Are you sure that you want to remove {{ $userPageMenuItem->user?->name }} from {{ $menuTemplate->name }} template?', 'Yes, Remove it')">
                                    Remove Access
                                </button>
                                <form id="delete-form-{{ $userPageMenuItem->id }}"
                                      action="{{ route('user-page-menu-items.destroy', $userPageMenuItem->id) }}" method="POST"
                                      style="display: none;">
                                    @csrf()
                                    @method('DELETE')
                                </form>
                            </td>
                        </tr>
                    @endforeach
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

@push('js')
    <script>
        $(document).ready(function() {
            AppDataTable.init({
                table_id: 'assigned-user-datatable',
                prefix: 'page',
                'columnDefs': [
                    {
                        'targets': 0,         // The first column
                        'orderable': false,   // Prevent ordering on this column
                        'className': 'select-checkbox',
                        'render': function(data, type, row, meta){
                            console.log(row, data);
                            return `<input type="checkbox" class="row-select" data-id="${row[0]}">`;
                        }
                    }
                ],
                'order': [[1, 'asc']],
            });

            $('#assigned-user-datatable_wrapper .top').prepend(`
                <button id="bulk-delete-btn" class="btn btn-sm btn-danger mb-1">Bulk Remove</button>
            `);

            $('#select-all').on('click', function(){
                let checked = this.checked;
                $('.row-select').each(function(){
                    this.checked = checked;
                });
            });

            // Button handler logic
            $(document).on('click', '#bulk-delete-btn', function() {
                const datatableEl = $('#assigned-user-datatable');
                //let table = datatableEl.DataTable();
                let ids = [];

                $('#assigned-user-datatable_wrapper tbody input.row-select:checked').each(function() {
                    ids.push($(this).data('id'));
                });

                if (ids.length === 0) {
                    alert('Please select at least one row to delete.');
                    return;
                }

                let title = `Are you sure that you want to remove the ${ids.length} user(s) from access?`
                Swal.fire({
                    title: title,
                    text: "You won't be able to revert this!",
                    icon: 'warning',
                    showCancelButton: true,
                    confirmButtonColor: '#3085d6',
                    cancelButtonColor: '#d33',
                    confirmButtonText: 'Yes, remove them!'
                }).then((result) => {
                    if (result.value) {
                        axios.delete("{{ route('user-page-menu-items.bulk-destroy') }}", {
                            data: {ids}
                        }).then((response) => {
                            iziToast.success({
                                title: response.data.status,
                                message: response.data.message,
                            });

                            datatableEl.DataTable().rows(function(idx, data, node) {
                                return ids.includes(Number(data[0]));
                            }).remove().draw();

                        }).catch((errors) => {
                            iziToast.success({
                                title: 'Error',
                                message: errors.response.data.message,
                            });
                        }).finally(() => {});
                    }
                })
            });

            /*let deleteModal = $('#transfer-log-modal');
            if (deleteModal.length) {
                deleteModal.show()
            }

            $('#transfer-log-modal .btn-close').click(() => {
                deleteModal.hide();
            })*/
        });
    </script>
@endpush
@push('css')
    <style>
        #assigned-user-datatable_wrapper > .top {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        #assigned-user-datatable_wrapper a.page-link {
            font-size: inherit !important;
        }
    </style>
@endpush
@endif