@php
    use App\User;
    $columns = User::USER_DETAILS_COURSE_LIST_COLUMNS;
@endphp

<div id="tab-11" class="tab-pane active">
    <div class="panel-body data-table-panel">
        <button class="btn btn-primary" type="button" onclick="addCourse('{{$clientID}}')">加申专业</button>

        <div class="mt-20" id="userDetailsApplicationList">
            @include('common.mass_application_status_update', [
                'table' => 'applicationsListTable'
            ])

            @include('common.fixed_modals.reply_status_update_modal')

            <div class="btn-group data-table-columns-toggle">
                <button data-toggle="dropdown" class="btn btn-primary dropdown-toggle" aria-expanded="false">
                    <i class="fa fa-bars mr-5"></i>隐藏列
                    <span class="caret"></span>
                </button>
                <ul class="dropdown-menu applicationList data-table-dropdown-list">
                    <li>
                        <a class="toggle-vis" data-column="1" name="orderTime">下单时间
                            <i class="glyphicon glyphicon-ok hidden" name="orderTime"></i>
                        </a>
                    </li>
                    <li>
                        <a class="toggle-vis" data-column="2" name="orderNumber">订单号
                            <i class="glyphicon glyphicon-ok hidden" name="orderNumber"></i>
                        </a>
                    </li>
                    <li>
                        <a class="toggle-vis" data-column="3" name="messageBoard">留言板
                            <i class="glyphicon glyphicon-ok hidden" name="messageBoard"></i>
                        </a>
                    </li>
                    <li>
                        <a class="toggle-vis" data-column="4" name="courseLevel">类别
                            <i class="glyphicon glyphicon-ok hidden" name="courseLevel"></i>
                        </a>
                    </li>
                    <li>
                        <a class="toggle-vis" data-column="5" name="uniName">学校
                            <i class="glyphicon glyphicon-ok hidden" name="uniName"></i>
                        </a>
                    </li>
                    <li>
                        <a class="toggle-vis" data-column="6" name="courseName">专业
                            <i class="glyphicon glyphicon-ok hidden" name="courseName"></i>
                        </a>
                    </li>
                    <li>
                        <a class="toggle-vis" data-column="7" name="startDate">入学时间
                            <i class="glyphicon glyphicon-ok hidden" name="startDate"></i>
                        </a>
                    </li>
                    <li>
                        <a class="toggle-vis" data-column="8" name="status">状态
                            <i class="glyphicon glyphicon-ok hidden" name="status"></i>
                        </a>
                    </li>

                    <li>
                        <a class="toggle-vis" data-column="9" name="application">学生回复状态
                            <i class="glyphicon glyphicon-ok hidden" name="replyStatus"></i>
                        </a>
                    </li>

                    <li>
                        <a class="toggle-vis" data-column="10" name="application">申请号
                            <i class="glyphicon glyphicon-ok hidden" name="application"></i>
                        </a>
                    </li>
                    
                    <li>
                        <a class="toggle-vis" data-column="11" name="channel">渠道
                            <i class="glyphicon glyphicon-ok hidden" name="channel"></i>
                        </a>
                    </li>

                    <li>
                        <a class="toggle-vis" data-column="12" name="demand">要求
                            <i class="glyphicon glyphicon-ok hidden" name="demand"></i>
                        </a>
                    </li>
               
                    <li>
                        <a class="toggle-vis" data-column="13" name="operationTime">操作时间
                            <i class="glyphicon glyphicon-ok hidden" name="operationTime"></i>
                        </a>
                    </li>
                    <li>
                        <a class="toggle-vis" data-column="14" name="stick">置顶
                            <i class="glyphicon glyphicon-ok hidden" name="stick"></i>
                        </a>
                    </li>
                    <li>
                        <a class="toggle-vis" data-column="15" name="operations">操作
                            <i class="glyphicon glyphicon-ok hidden" name="operations"></i>
                        </a>
                    </li>
                </ul>
            </div>

            <table class="table table-border table-bordered table-hover table-bg table-sort display data-table-flexible user-details-applications-list" id="applicationList">
                <thead>
                    <tr class="text-c">
                        <th name="massEdit" class="lok">
                            <label class="m-0">
                                <input type="checkbox" id="massEditToggle">
                            </label>
                        </th>
                        <th name="orderTime" class="lok">下单时间</th>
                        <th name="orderNumber" class="lok">订单号</th>
                        <th name="messageBoard" class="lok">留言板</th>
                        <th style="padding-right: 16px;" name="courseLevel" class="lok">类别</th>
                        <th name="uniName" class="lok data-table-column-min-width">学校</th>
                        <th name="courseName" class="lok data-table-column-min-width">专业</th>
                        <th name="startDate" class="lok">入学时间</th>
                        <th style="padding-right: 16px;" name="status" class="lok">状态</th>
                        <th name="replyStatus" class="lok">学生回复状态</th>
                        <th name="application" class="lok">申请号</th>
                        <th style="padding-right: 16px;" name="channel" class="lok">
                            <select id="applicationListChannelFilter" class="form-control">
                                <option value="">渠道筛选</option>
                                @foreach(\App\Http\Controllers\OrderListController::getChannels() as $channel)
                                    <option value="{{$channel['channelKey']}}">{{App\Channels::getDisplayName($channel)}}</option>
                                @endforeach
                            </select>
                        </th>
                        <th name="demand" class="lok">要求</th>
                        <th name="paidThirdPartyFee" class="lok">是否缴第三方服务费</th>
                        <th name="operationTime" class="lok">操作时间</th>
                        <th name="stick" class="lok">置顶</th>
                        <th name="operations" class="lok">操作</th>
                    </tr>
                </thead>
            </table>
        </div>
    </div>
</div>

<script>
    var applicationsListTable;
    var unsortable = [];
    @foreach($columns as $key => $column)
        @if(!$column[1])
            unsortable.push({{$key + 1}});
        @endif
    @endforeach

    $(function () {
        applicationsListTable = $('#applicationList').DataTable({
            "bStateSave": true, //状态保存
            "scrollCollapse": "true",
            "order": [[ 1, "desc" ]],
            "processing": true,
            "serverSide": true,
            "stateSaveParams": function (settings, data) {
                data.columns[0].visible = false;
                data.search.search = "";
            },
            "stateLoadParams": function (settings, data) {
                data.search.search = "";                
                data.start =0;
            },
            "ajax":{
                "url": "{{route('getUserDetailsCoursesAjax')}}",
                "dataType": "json",
                "type": "POST",
                "data": function (data) {
                    data._token =  "{{csrf_token()}}";
                    data.userId = "{{$clientID}}";
                    data.channel = $('#applicationListChannelFilter').val()
                }
            },

            @if(config('app.locale') == 'zh')
                @include('common.dataTableLanguage')
            @endif

            "aoColumnDefs": [
                {
                    "bSortable": false,
                    "aTargets": unsortable
                },
                {
                    "render": function (data) {
                        return '<input type="checkbox" name="massEditCheckbox" class="mass-edit-checkbox" value="' + data + '"' + ((!data || data.length === 0) ? ' disabled' : '') + '>';
                    },
                    "bSortable": false,
                    "bVisible": false,
                    "aTargets": 0
                },
                {
                    "render": function (data,display, row) {
                        return '<select class="channel-selection" data-id="'+row.operations+'" data-value="'+data+'">' +
                                    '<option value="">渠道筛选</option>'+
                                    @foreach(\App\Http\Controllers\OrderListController::getChannels() as $channel)
                                        '<option value="{{$channel['channelName']}}" data-value="{{$channel['channelKey']}}">{{App\Channels::getDisplayName($channel)}}</option>'+
                                    @endforeach
                                '</select>'
                    },
                    "aTargets": 11
                },
                {
                    "render": function (data, type, row) {
                        if (data === '') {
                            return '';
                        } else {
                            return '<select class="paidApplicationFeesToggle" data-id="' + row.operations + '" data-value="' + data + '" data-other-value="' + ((data === '0') ? '1' : '0') + '">' +
                                '<option value="0" ' + (data === '0' ? 'selected' : '') + '>No</option>' +
                                '<option value="1" ' + (data === '1' ? 'selected' : '') + '>Yes</option>' +
                                '</select>'
                        }
                    },
                    "bSortable": false,
                    "bVisible": true,
                    "aTargets": 13
                },
                {
                    "render": function (data, type, row) {
                        return'<div class="onoffswitch">' +
                            '<input ' +
                                'class="onoffswitch-checkbox" ' +
                                'id="onoffswitch_'+ data +'" ' +
                                'type="checkbox" ' +
                                'data-id="' + data + '" ' +
                                'onchange="pinToTop(this)" ' +
                                (row.pinToTop ? 'checked' : '') +
                            '>' +
                            '<label class="onoffswitch-label" for="onoffswitch_'+ data +'">' +
                                '<span class="onoffswitch-inner"></span>' +
                                '<span class="onoffswitch-switch"></span>' +
                            '</label>' +
                        '</div>';
                    },
                    "bSortable": false,
                    "bVisible": true,
                    "aTargets": 15
                },
                {
                    "render": function (data) {
                        let url = '{{route('orderDetailed')}}' + '/' + data;

                        return '<u class="btn btn-primary btn-xs" style="cursor:pointer;" onclick="lay_show(\'专业信息\',\'' + url + '\',\'' + url + '\');">详细</u>'
                    },
                    "bSortable": false,
                    "bVisible": true,
                    "aTargets": 16
                }
            ],
            "createdRow": function (row, data) {
                if (data.statusNameClass) {
                    row.classList.add(data.statusNameClass);
                }
            },
            "columns": [
                {
                    "data": "massEdit"
                },
                @foreach($columns as $key=>$column)
                    { "data": "{{$column[0]}}" },
                @endforeach
            ],
            "drawCallback": function( settings ) {
                let _selects = $("#applicationList").find(".channel-selection");
                _selects.each(function(){
                    let _value = $(this).attr("data-value")
                    $(this).val(_value)
                })
            }
        }).on('change', '.paidApplicationFeesToggle', function (event) {
            if (event.originalEvent.isTrusted) {
                displayConfirmation(
                    '',
                    '是否修改该客户第三方服务费缴纳状态',
                    'updateThirdPartyFeesStatus(\'' + this.getAttribute('data-id') + '\')'
                );

                this.value = this.getAttribute('data-value');
            }
        });
        @include('components.datatableScroll',  ['id'=>'#applicationList'])

        let columns = $('#applicationList .lok');

        $("#applicationList").on("change",".channel-selection",function(){
            let _id = $(this).attr("data-id"),
                _value = $(this).find("option:selected").attr("data-value");
            let formData = {
                channel: _value,
                _token: "{{ csrf_token() }}",
                orderItemId: _id
            }
            $.ajax({
                type: 'POST',
                url: "{{route('saveChannel')}}",
                data: formData,
                dataType: "JSON",
                success: function () {
                    layer.msg('渠道设置成功');
                    applicationsListTable.ajax.reload();
                }
            });
            
        })

        $(".applicationList .toggle-vis").each(function () {
            let oc = this.getAttribute("name");

            if (columns.filter('[name="' + oc + '"]').length > 0) {
                $(this).find('i').removeClass('hidden');
            }
        });

        $('.applicationList a.toggle-vis').on('click', function (e) {
            e.preventDefault();
            e.stopImmediatePropagation();

            $(this).find('i').toggleClass('hidden');

            let column = applicationsListTable.column($(this).attr('data-column'));
            column.visible(!column.visible());

            $('.wrapper-content').css('min-width', $('#applicationList').outerWidth() + 80);

            if (column.visible()) {
                let html = document.querySelector('html');

                html.scrollLeft = html.scrollWidth - html.offsetWidth;
            }
        });

        $('#applicationListChannelFilter').on('change', dataTableReload);
    });

    function updateThirdPartyFeesStatus(id) {
        let select = document.querySelector('.paidApplicationFeesToggle[data-id="' + id + '"]');

        if (!select) {
            return
        }

        select.value = select.getAttribute('data-other-value');
        select.setAttribute('data-other-value', select.getAttribute('data-value'));
        select.setAttribute('data-value', select.value);

        $.ajax({
            type: 'POST',
            url: "{{route('updateThirdPartyFeesStatus')}}",
            data: {
                _token: "{{ csrf_token() }}",
                orderItemId: id,
                status: select.value
            },
            success: function () {
                applicationsListTable.ajax.reload();
            }
        });
    }

    function dataTableReload(){
        applicationsListTable.ajax.reload();
    }

    function pinToTop(checkbox) {
        $.ajax({
            type: 'GET',
            url: "{{route('applicationToTop')}}",
            data: {
                _token: "{{ csrf_token() }}",
                applicationID: checkbox.getAttribute('data-id'),
                toTop: checkbox.checked ? 1 : 0
            },
            success: function () {
                applicationsListTable.ajax.reload();
            }
        });
    }
</script>

@include('common.fixed_modals.mass_application_status_update_modal')