@extends("admin.layouts.layout")

@section("content")
    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-body">
                    <div class="mb-3">
                        <a class="btn btn-primary" href="{{url($urlPrefix.'/create')}}">
                            @lang("icons.action_create") @lang('actions.create'){{$modelName}}
                        </a>
                    </div>

                    <table class="table table-bordered" id="data-table">
                        <thead>
                        <tr>
                            <th>
                                {{$modelName}}
                            </th>
                            <th>用户名</th>
                            <th>角色</th>
                            <th>项目</th>
                            <th>操作</th>
                        </tr>
                        </thead>
                        <tbody>
                        @foreach ($data as $row)
                            <tr data-id="{{$row->id}}">
                                <td>
                                    {{ $row->name }}
                                </td>
                                <td>{{ $row->username }}</td>
                                <td class="role-names">
                                    {{ $row->roles ? implode(",",array_column($row->roles->toArray(),"name")) : "" }}
                                </td>
                                <td class="role-names">
                                    {{ implode(",",$row->projects->pluck("name")->toArray()) }}
                                </td>
                                <td>
                                    <a class="btn btn-sm btn-success"
                                       href="javascript:;" onclick="toggleRoles(this)"><i
                                            class="mdi mdi-shield-key-outline"></i> 绑定角色</a>
                                    <a class="btn btn-sm btn-primary"
                                       href="{{url("{$urlPrefix}/edit?id={$row['id']}")}}">@lang("icons.action_edit") @lang("actions.edit")</a>
                                    <a class="btn btn-sm btn-danger btn-delete" data-id="{{$row['id']}}"
                                       href="javascript:;">@lang("icons.action_delete") @lang("actions.delete")</a>
                                </td>
                            </tr>
                            <tr class="roles-box" style="display: none;">
                                <td colspan="4">
                                    <form>
                                        @csrf
                                        <input type="hidden" value="{{$row->id}}" name="id">
                                        <div class="row">
                                            @foreach($roles as $role)
                                                <?php
                                                $checked = in_array($role->id, array_column($row["roles"]->toArray(), "id")) ? true : false;
                                                ?>
                                                <div class="col-md-3 col-sm-4">
                                                    <div class="custom-control custom-checkbox">
                                                        <input type="checkbox" class="custom-control-input"
                                                               id="role-{{$row->id}}-{{$role->id}}"
                                                               value="{{$role->id}}" name="role_id[]"
                                                            {{ $checked ? "checked" : "" }}>
                                                        <label class="custom-control-label"
                                                               for="role-{{$row->id}}-{{$role->id}}">{{$role->name}}</label>
                                                    </div>
                                                </div>
                                            @endforeach
                                        </div>
                                        <hr>
                                        <div class="row">
                                            <div class="col-12">
                                                <button type="button" class="btn btn-success btn-sm"
                                                        onclick="bindRoles(this)"><i class="mdi mdi-check"></i>
                                                    确认绑定
                                                </button>
                                            </div>
                                        </div>
                                    </form>
                                </td>
                            </tr>
                        @endforeach
                        </tbody>
                    </table>
                    @include("public._pages")
                </div>

            </div>
        </div>
    </div>

    @include("public._delete")
@endsection

@push("footer")
    <script>
        function toggleRoles(obj) {
            $(obj).closest("tr").next(".roles-box").toggle();
        }

        function bindRoles(obj) {
            var url = "{{url($urlPrefix."/set-roles")}}";
            var data = $(obj).closest("form").serializeArray();
            $.post(url, data, function (result) {
                if (result.status) {
                    alertSuccess(result.msg);
                    refreshRoleNames(obj);
                } else {
                    alertError(result.msg);
                    $(obj).closest("form")[0].reset();
                }
            });
        }

        function refreshRoleNames(obj) {
            var checked = $(obj).closest("form").find("input:checkbox:checked");
            var id = $(obj).closest("form").find("input[name=id]").val();
            var names = [];
            checked.each(function () {
                names.push($(this).siblings("label").text());
            });
            $("#data-table tbody tr[data-id=" + id + "]").find(".role-names").html(names.join(","));
        }

    </script>
@endpush