@section('styles')
    <link href="{{ asset('js/jquery-tree/CSS/jHTree.css') }}" rel="stylesheet" type="text/css" />
@endsection

@section('scripts')
    <script type='text/javascript'>
        form_obj.module     = 'Member';
        form_obj.controller = 'MemberController';

        var o = {
            buildTree: function(row)
            {   
                var arr = [];
                var rsArr = [];
                if(!row.length > 0){
                    arr.push(row);
                }else{
                    arr = row;
                }

                // console.log('buildTree arr',arr);

                for(var a in arr)
                {
                    var tmpRow = arr[a];
                    var tmp = {};
                    // tmp.head = tmpRow['code'];
                    // tmp.contents = tmpRow['name']+' (lv.'+tmpRow['tree_level']+')'+'<BR>'+'('+(tmpRow['mobile']??'--')+')';
                    tmp.id = tmpRow['id'];
                    tmp.head = tmpRow['name']+' ('+'Lv.'+tmpRow['tree_level']+')';
                    tmp.contents = tmpRow['mobile']??'--';
                    // console.log('all_children:',tmpRow['all_children']);
                    if(tmpRow['all_children'].length > 0)
                    {
                        tmp.children= this.buildTree(tmpRow['all_children']);
                    }

                    rsArr.push(tmp);
                }
                return rsArr;
            }
        }

        $(function(){
            KTUtil.onDOMContentLoaded(function () {
                var tree = $("#tree").jHTree({
                    zoomer:false,
                    callType: 'ajax',
                    ajax:{
                        url:'{{ url('ajax') }}',
                        method: 'POST',
                        headers: {
                            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                        },
                        dataType: 'json',
                        data:{
                            module: form_obj.module,
                            controller: form_obj.controller,
                            type: 'readTree',
                            where: {
                                @if(!empty($_REQUEST['search_member_id']))
                                    id:'{{ $_REQUEST['search_member_id'] }}'
                                @endif
                            },
                            // length: 20, //只抓20個
                        },
                        success: function(data,textStatus,jqXHR){
                            console.log('ajax data:',data);
                            if(!data.status)throw '後台錯誤';

                            // $('#search_member_name').text('');
                            var rs = o.buildTree(data.data);
                            return rs;

                        },
                        error:ajaxError,
                    },
                      
                    nodeDropComplete: function (event, data) {
                        // console.log('event',event);
                        console.log('data',data);
                        var nodeId = data.nodeId;
                        var parentNodeId = data.parentNodeId;
                        $.ajax({
                            data:{
                                module: form_obj.module,
                                controller: form_obj.controller,
                                type: 'updateTree',
                                recommend_member_id:parentNodeId,
                                where:{
                                    id:data.nodeId,
                                }
                            },
                            dataType: 'json',
                            success:function(data,textStatus,jqXHR) {
                                console.log(data);
                                if(data.status)
                                {
                                    Swal.fire({
                                        text: data.msg + "!",
                                        icon: "success",
                                        buttonsStyling: false,
                                        confirmButtonText: "{{ __('basic.OK') }}",
                                        customClass: {
                                            confirmButton: "btn btn-primary"
                                        }
                                    }).then((function(t) {
                                        // location.reload()
                                        console.log('#'+nodeId+' .ui-widget-content');
                                        $($('#'+nodeId+' .ui-widget-header')[0]).text(data.data.name+' ('+'Lv.'+data.data.tree_level+')');
                                        // $('#'+nodeId+' .ui-widget-content').text('Lv.'+data.data.tree_level);
                                    }));
                                }
                                else
                                {
                                    Swal.fire({
                                        html: data.msg.replaceAll("\r\n","<BR>"),
                                        icon: "error",
                                        buttonsStyling: !1,
                                        confirmButtonText: "{{ __('basic.OK') }}",
                                        customClass: {
                                            confirmButton: "btn btn-primary"
                                        }
                                    }).then(function(){
                                        // page.loading.stop('.modal-content');
                                    });
                                }
                                
                            },error: ajaxError
                        });
                        //----- Do Something @ Server side or client side -----------
                        //alert("Node ID: " + data.nodeId + " Parent Node ID: " + data.parentNodeId);
                        //-----------------------------------------------------------
                    }
                });
                $('#search_member_id').select2({
                    // dropdownParent: $('#detail_modal'),
                    ajax: {
                        delay: 250,
                        url: '{{ url('ajax') }}',
                        method: 'POST',
                        headers: {
                            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                        },
                        dataType: 'json',
                        data: function (params) {
                            var query = {
                                module: form_obj.module,
                                controller: form_obj.controller,
                                type: 'read',
                                where: {
                                    search: params.term,
                                },
                                length: 20, //只抓20個
                            }
                            // Query parameters will be ?search=[term]&type=public
                            return query;
                        },
                        processResults: function (data) {
                            if(!data.status)return;

                            var dataList = data.data.list;
                            var items = [];
                            for(var i in dataList) 
                            {
                                var row = dataList[i];
                                items.push( { id: row.id, text: row.name_text});
                            }
                            
                            return {
                                results: items,
                            }
                        }

                    }
                })

                $('#search_member_id').on('change', function(){
                    $('#search_member_name').val( $(this).find(":selected").text() );
                    $('#fm').submit();
                })

                $('.clear_btn').click(function(){
                    $('#search_member_name').val('');
                    $('#fm').submit();
                })

            });
        });
    </script>
@endsection

{{-- @php
    print_r($_REQUEST);
@endphp --}}

<form action="" method="GET" name="fm" id='fm' enctype="multipart/form-data">
    <div class='container'>
        <div class='row'>
            <div class='col-6'>
                <div class='row align-items-end'>
                    <div class='col-9'>
                        <label for='search_member_id' class='h3'>篩選會員: <span >{{ $_REQUEST['search_member_name']??'' }}</span></label>
                        <select class="form-select fw-bolder" id="search_member_id" name="search_member_id"  data-placeholder="{{ __('basic.PleaseChoice') }}" data-allow-clear="true" >
                            <option value=""></option>
                        </select>
                        <input type='hidden' id="search_member_name" name="search_member_name" value='{{ $_REQUEST['search_member_name']??'' }}' />
                    </div>

                    <div class='col-3'>
                        <button type='button' class='clear_btn btn btn-primary mt-3'>
                            {{ __('basic.ClearFilter') }}
                        </button>
                    </div>
                </div>
            </div>
        </div>
        <div class='row'>
            <div class='col-6'>
                <div id="tree">

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