@*
    For more information on enabling MVC for empty projects, visit https://go.microsoft.com/fwlink/?LinkID=397860
*@
@{
    Layout = "_LooperLayout";
}

@section Style {
    <link rel="stylesheet" href="~/assets/vendor/datatables.net-responsive-bs4/css/responsive.bootstrap4.min.css">
}

@section Script {
    <script src="~/assets/vendor/sortablejs/Sortable.min.js"></script>
    <script src="~/assets/vendor/nestable2/jquery.nestable.min.js"></script>
    <script src="~/assets/javascript/custom/grouplist.js" asp-append-version="true"></script>
}
<!-- .page-inner -->
<div class="page-inner">
    <!-- .page-title-bar -->
    <header class="page-title-bar">
        <!-- .breadcrumb -->
        <nav aria-label="breadcrumb">
            <ol class="breadcrumb">
                <li class="breadcrumb-item active">
                    <a href="#"><i class="breadcrumb-icon fa fa-angle-left mr-2"></i>群組清單</a>
                </li>
            </ol>
        </nav><!-- /.breadcrumb -->
        <!-- title -->
        <h1 class="page-title"> 群組清單 </h1>
        <p class="text-muted">  </p><!-- /title -->
    </header><!-- /.page-title-bar -->
    <!-- .page-section -->
    <div class="page-section">
        <button type="button" id="groupNewModal" class="btn btn-primary btn-floated position-absolute" title="Add new client"><i class="fa fa-plus"></i></button>
        <!-- .card -->
        <div class="card card-fluid">
            <!-- .card-body -->
            <div class="card-body">
                <div class="form-row">
                    <div class="col-md-3">
                        <div class="form-group">
                            <label for="dept_select">單位</label>
                            <select class="custom-select custom-select-sm" id="dept_select" name="dept_select" required="">
                            </select>
                        </div>
                    </div>
                    <div class="col-md-2">
                        <div class="form-group">
                            <label for="search_btn" style="display: block;">&nbsp; &nbsp;</label>
                            <button type="button" class="btn btn-info btn-sm" id="search_btn">切換單位</button>
                        </div>
                    </div>
                </div>
                
            </div><!-- /.card-body -->
        </div><!-- /.card -->
        <!-- grid row -->
        <div id="group_div" class="row">
            <!-- grid column -->
           
        </div><!-- / grid row -->
    </div><!-- /.page-section -->
</div><!-- /.page-inner -->

<!-- .modal -->
<form id="clientGroupEditForm" name="clientGroupEditForm">
    <div class="modal fade" id="groupModal" tabindex="-1" role="dialog" aria-labelledby="optionItemModalLabel" data-backdrop="static"
         data-keyboard="false" aria-hidden="true">
        <!-- .modal-dialog -->
        <div class="modal-dialog" role="document">
            <!-- .modal-content -->
            <div class="modal-content">
                <!-- .modal-header -->
                <div class="modal-header">
                    <h6 id="optionItemModalLabel" class="modal-title inline-editable">
                        <span class="sr-only">群組內容</span> <input id="group_content" type="text" class="form-control form-control-lg" value="" placeholder="群組內容" readonly="readonly " required="">
                    </h6>
                </div><!-- /.modal-header -->
                <!-- .modal-body -->
                <div class="modal-body">
                    <input type="hidden" id="group_method" />
                    <input type="hidden" id="group_uid" />
                    <input type="hidden" id="dept_uid" />
                    <!-- .form-group -->
                    <div class="form-group">
                        <div class="form-label-group">
                            <input type="text" id="group_name" class="form-control" value="" placeholder="群組名稱" maxlength="12" required=""> <label for="group_name">群組名稱</label>
                        </div>
                    </div><!-- /.form-group -->
                    <!-- grid row -->
                    <div class="row">
                        <!-- grid column -->
                        <div class="col-lg-12">
                            <!-- .card -->
                            <div class="card card-fluid">
                                <div class="card-header border-bottom-0"> 成員 </div><!-- .nestable -->
                                <div id="nestableMember" class="dd" data-toggle="sortable" data-group-uid="ccc" data-type="" data-max-depth="1">
                                    <!-- .dd-list -->
                                    <ol class="dd-list">
                                        
                                    </ol><!-- /.dd-list -->
                                </div><!-- /.nestable -->
                                <!-- .card-footer -->
                                <div class="card-footer">
                                    <a href="javascript: void(0);" id="newMember_btn" onclick="newMemberClick();" class="card-footer-item justify-content-start"><span><i class="fa fa-plus-circle mr-1"></i> 新增成員</span></a>
                                </div><!-- /.card-footer -->
                            </div><!-- /.card -->
                        </div>
                    </div>
                </div><!-- /.modal-body -->
                <!-- .modal-footer -->
                <div class="modal-footer">
                    <button type="button" id="groupDialogSaveBtn"  class="btn btn-primary">Save</button> <button type="button" class="btn btn-light" data-dismiss="modal">Close</button>
                </div><!-- /.modal-footer -->
            </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
    </div>
</form><!-- /.modal -->


<!-- .modal -->
<form id="clientGroupNameForm" name="clientGroupNameForm">
    <div class="modal fade" id="memberModal" tabindex="-1" role="dialog" aria-labelledby="optionItemModalLabel" data-backdrop="static"
         data-keyboard="false" aria-hidden="true">
        <!-- .modal-dialog -->
        <div class="modal-dialog" role="document">
            <!-- .modal-content -->
            <div class="modal-content">
                <!-- .modal-header -->
                <div class="modal-header">
                    <h6 id="optionItemModalLabel" class="modal-title inline-editable">
                        <span class="sr-only">成員列表</span> <input id="member_content" type="text" class="form-control form-control-lg" value="" placeholder="成員列表" readonly="readonly " required="">
                    </h6>
                </div><!-- /.modal-header -->
                <!-- .modal-body -->
                <div class="modal-body">
                    <input type="hidden" id="client_method" />
                    <input type="hidden" id="client_group_uid" />
                    <input type="hidden" id="client_dept_uid" />
                    
                    <!-- grid row -->
                    <div class="row">
                        <!-- grid column -->
                        <div class="col-lg-12">
                            <!-- .card -->
                            <div class="card card-fluid">
                                <!-- .list-group -->
                                <div class="list-group list-group-flush list-group-bordered" id="nogroup_memberlist">
                                    <div class="list-group-header"> 勾選要加入群組的成員 </div>
                                        <label class="list-group-item custom-control custom-checkbox mb-0"><input name="listcheckbox" type="checkbox" class="custom-control-input" checked> <span class="custom-control-label">List checkbox #1</span></label> 
                                        <label class="list-group-item custom-control custom-checkbox mb-0"><input name="listcheckbox" type="checkbox" class="custom-control-input" checked> <span class="custom-control-label">List checkbox #2</span></label>
                                </div><!-- /.list-group -->
                            </div><!-- /.card -->
                        </div>
                    </div>
                </div><!-- /.modal-body -->
                <!-- .modal-footer -->
                <div class="modal-footer">
                    <button type="button" id="memberAddSaveBtn" class="btn btn-primary">加入</button> <button type="button" class="btn btn-light" data-dismiss="modal">Close</button>
                </div><!-- /.modal-footer -->
            </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
    </div>
</form><!-- /.modal -->

<!-- .modal -->
<form id="clientGroupNameEditForm" name="clientGroupNameEditForm">
    <div class="modal fade" id="clientGroupNameEditModal" tabindex="-1" role="dialog" aria-labelledby="clientGroupNameEditModalLabel" data-backdrop="static"
         data-keyboard="false" aria-hidden="true">
        <!-- .modal-dialog -->
        <div class="modal-dialog" role="document">
            <!-- .modal-content -->
            <div class="modal-content">
                <!-- .modal-header -->
                <div class="modal-header">
                    <h6 id="clientGroupNameEditModalLabel" class="modal-title inline-editable">
                        <span class="sr-only"></span> <input type="text" class="form-control form-control-lg" value="" placeholder="修改群組名稱" required="">
                    </h6>
                </div><!-- /.modal-header -->
                <!-- .modal-body -->
                <div class="modal-body">
                    <input type="hidden" id="client_groupname_group_uid" />
                    <!-- .form-group -->
                    <div class="form-group">
                        <div class="form-label-group">
                            <input type="text" id="clientGroupName" class="form-control" value="" placeholder="群組名稱"> <label for="clientGroupName">群組名稱</label>
                        </div>
                    </div><!-- /.form-group -->
                </div><!-- /.modal-body -->
                <!-- .modal-footer -->
                <div class="modal-footer">
                    <button type="button" id="groupNameEditBtn" class="btn btn-primary">儲存</button> <button type="button" class="btn btn-light" data-dismiss="modal">取消</button>
                </div><!-- /.modal-footer -->
            </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
    </div>
</form><!-- /.modal -->
<!-- .modal -->
<form id="clientGroupNewUserForm" name="clientGroupNewUserForm">
    <div class="modal fade" id="groupNewUserModal" tabindex="-1" role="dialog" aria-labelledby="groupNewUserModalLabel" data-backdrop="static"
         data-keyboard="false" aria-hidden="true">
        <!-- .modal-dialog -->
        <div class="modal-dialog" role="document">
            <!-- .modal-content -->
            <div class="modal-content">
                <!-- .modal-header -->
                <div class="modal-header">
                    <h6 id="optionItemModalLabel" class="modal-title inline-editable">
                        <span class="sr-only">成員列表</span> <input id="member_content" type="text" class="form-control form-control-lg" value="" placeholder="成員列表" readonly="readonly " required="">
                    </h6>
                </div><!-- /.modal-header -->
                <!-- .modal-body -->
                <div class="modal-body">
                    <input type="hidden" id="client_group_method" />
                    <input type="hidden" id="client_group_group_uid" />
                    <input type="hidden" id="client_group_dept_uid" />

                    <!-- grid row -->
                    <div class="row">
                        <!-- grid column -->
                        <div class="col-lg-12">
                            <!-- .card -->
                            <div class="card card-fluid">
                                <!-- .list-group -->
                                <div class="list-group list-group-flush list-group-bordered" id="lastgroup_memberlist">
                                    <div class="list-group-header"> 勾選要加入群組的成員 </div>
                                    <label class="list-group-item custom-control custom-checkbox mb-0"><input name="listcheckbox" type="checkbox" class="custom-control-input" checked> <span class="custom-control-label">List checkbox #1</span></label>
                                    <label class="list-group-item custom-control custom-checkbox mb-0"><input name="listcheckbox" type="checkbox" class="custom-control-input" checked> <span class="custom-control-label">List checkbox #2</span></label>
                                </div><!-- /.list-group -->
                            </div><!-- /.card -->
                        </div>
                    </div>
                </div><!-- /.modal-body -->
                <!-- .modal-footer -->
                <div class="modal-footer">
                    <button type="button" id="groupMemberAddSaveBtn" class="btn btn-primary">加入</button> <button type="button" class="btn btn-light" data-dismiss="modal">Close</button>
                </div><!-- /.modal-footer -->
            </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
    </div>
</form><!-- /.modal -->