@extends('admin.base')

@section('title', 'account management')

@section('account_content')
@php($version = config('app.version'))
<style>
    #active_padding{
        padding: 30px;
    }
    .bottom20{margin-bottom: 20px;}
    .discountInputDiv{min-width:150px}
</style>
<link href="{{asset('css/plugins/dataTables/dataTables.bootstrap.css')}}?v={{$version}}" rel="stylesheet">
<script src="{{asset('js/plugins/layer/layer.min.js')}}?v={{$version}}"></script>
    <div class="col-sm-12" id="active_padding">
        <div class="fifteen wide column">
            <form  class="form-horizontal" method="post" action="" onsubmit="return sendForm(event, $(this))">
                {{ csrf_field() }}
                <div class ="content">
                    <div class="bottom20">
                        <a  @if($do=='add') href="?type=1" @else href="javascript:void(0);" @endif class="ui grey {{$type == 1 ? '' : 'basic'}} button">{{ __('active.activity_type_1')}}</a>
                        <a  @if($do=='add') href="?type=2" @else href="javascript:void(0);" @endif class="ui grey {{$type == 2 ? '' : 'basic'}}  button">{{ __('active.activity_type_2')}}</a>
                        <a  @if($do=='add') href="?type=3" @else href="javascript:void(0);" @endif class="ui grey {{$type == 3 ? '' : 'basic'}}  button">{{ __('active.activity_type_3')}}</a>
                        <a  @if($do=='add') href="?type=4" @else href="javascript:void(0);" @endif class="ui grey {{$type == 4 ? '' : 'basic'}}  button">{{ __('active.activity_type_4')}}</a>
                    </div>

                    <input type="hidden" name="type" value="{{$type}}">
                    <input type="hidden" name="do" value="{{$do}}">
                    <span style="color: red" id="errorSpan"></span>
                    <div class="ui section divider"></div>

                    <div class="ui form">
                        <div class="fields">
                            <div class="inline fields" style="margin-right: 20px">
                                <label style="font-size: 16px; margin-right: 7px">活动英文名称</label>
                                <div class="ui icon input">
                                    <input name="activityName" id="activityName" type="text" placeholder="" value="{{isset($activity)?$activity->activityName:''}}">
                                    {{--<i class="circular search link icon"></i>--}}
                                </div>
                            </div>
                            <div class="inline fields" style="margin-right: 20px">
                                <label style="font-size: 16px; margin-right: 7px">活动中文名称</label>
                                <div class="ui icon input">
                                    <input name="activityNameChinese" id="activityNameChinese" type="text" placeholder="" value="{{isset($activity)?$activity->activityNameChinese:''}}">
                                    {{--<i class="circular search link icon"></i>--}}
                                </div>
                            </div>
                        </div>
                        <div class="fields">
                            <div class="inline fields" style="margin-right: 20px">
                                <label style="font-size: 16px; margin-right: 7px;">{{ __('活动开始时间') }}</label>
                                <div class="ui icon input" id="startTimeDiv" >
                                    <input type="text" placeholder="Date" id="startTime" name="startTime" autocomplete="off" value="{{$activity->startTime ?? ''}}">
                                    <i class="calendar icon"></i>
                                </div>
                            </div>
                            <div class="inline fields">
                                <label style="font-size: 16px; margin: 0px 7px;">{{ __('活动结束时间') }}</label>
                                <div class="ui icon input" id="endTimeDiv" style="margin-right: 20px">
                                    <input type="text" placeholder="Date" id="endTime" name="endTime" autocomplete="off" value="{{$activity->endTime ?? ''}}">
                                    <i class="calendar icon"></i>
                                </div>
                            </div>
                            <div class="inline fields" style="margin-right: 20px">
                                <label style="font-size: 16px; margin-right: 7px">{{ __('登陆页面网址') }}</label>
                                <div class="ui icon input">
                                    <input id="landingPageURL" name="landingPageURL" type="text" placeholder="" value="{{isset($activity)?$activity->landingPageURL:''}}">
                                    {{--<i class="circular search link icon"></i>--}}
                                </div>
                            </div>
                        </div>
                        <div class="inline fields" style="margin-left: 80px">
                            @if($type!=3 && $type!=4)
                                <label>{{__('English')}} 全价</label>
                                <div class="one wide field discountInputDiv">
                                    <input id="fullPrice"  name="fullAmount" type="number" placeholder="" step=".01" value="{{isset($activity)?$activity->originalAmount:''}}">
                                </div>
                            @endif
                            @if($type==3)
                                <label>{{__('English')}} 秒杀价</label>
                            @else
                                <label>{{__('English')}} 折扣 </label>
                            @endif
                            <div class="one wide field discountInputDiv">
                                <input id="reduction"  name="reduction" type="number" placeholder="" step=".01" value="{{isset($activity)?$activity->originalDiscount:''}}">
                            </div>
                            @if($type==4)% off @endif
                        </div>
                        <div class="inline fields" style="margin-left: 80px">
                            @if($type!=3 && $type!=4)
                                <label>{{__('Chinese')}} 全价</label>
                                <div class="one wide field discountInputDiv">
                                    <input id="fullPriceCn"  name="fullAmountCn" id="fullAmountCn" type="number" step=".01" placeholder="" value="{{isset($activity)?$activity->originalAmountChinese:''}}">
                                </div>
                            @endif
                            @if($type==3)
                                <label>{{__('Chinese')}} 秒杀价</label>
                            @else
                                <label>{{__('Chinese')}} 折扣 </label>
                            @endif
                            <div class="one wide field discountInputDiv">
                                <input id="reductionCn"  name="reductionCn" id="reductionCn" type="number" step=".01" placeholder="" value="{{isset($activity)?$activity->originalDiscountChinese:''}}">
                            </div>
                            @if($type==4)% off @endif
                        </div>
                        @if($do=='edit')
                        <div class="inline fields" style="margin-top: 20px">
                            <font color='red'>数据保存后，才可看到课程表格中价格数据的变化</font>
                        </div>
                        @endif

                        <div class="inline fields" style="margin-top: 20px">
                            <input type="hidden" name="status" id="status" value="">
                            <button  class="ui primary button"  name="statusB" id="saveBtn" onclick="($('#status').val('0'));" value="0" style="margin-right: 50px">保存</button>
                            @if($do=='edit')
                            <button  class="ui primary button"  name="statusB" id="releaseBtn" onclick="($('#status').val('1'));" value="1">发布</button>
                            @endif
                        </div>

                        @if($do=='edit')
                            <div class="ui section divider"></div>
                            <div class="inline fields">
                                <label>选择课程</label>
                                <div class="field" style="margin-left: 65px">
                                    <input value="{{__('添加课程')}}" type="button" name="allOrPartCourses" onclick="openChooseCourseModal(this);" >
                                    &nbsp;&nbsp;<font color='red'>若要添加全部课程，请先全部删除，清空列表后再添加。当没有课程时,发布状态将取消!</font>
                                </div>
                            </div>
                            <div class="inline fields">
                                <a id="deleteTable" style="cursor:pointer">全部删除</a>&nbsp;&nbsp;&nbsp;&nbsp;
                                <a onclick="javascript:delSlct()" style="cursor:pointer">删除选中</a>
                            </div>

                            
                            <input type='hidden' name='type' value="{{$type}}">
                            <input type="hidden" name="id2" id="id2" value="{{$activity->id}}">

                            <table class="ui celled table display" id="courseTable">
                                <thead>
                                    <tr>
                                        <th><input class="tableCheckAll" id="tableCheckAll" type="checkbox" onchange="javascript:chkAll()"/></th>
                                        <th>{{ __('学校') }}</th>
                                        <th>{{ __('课程') }}</th>
                                        <th>{{ __('课程等级') }}</th>
                                        <th>{{ __('价格') }}</th>
                                        <th>{{ __('中国服务费') }}</th>

                                        @if($type!=3 && $type!=4)
                                            <th style="display:none;">{{__('英文全价')}}</th>
                                        @endif
                                        @if($type==3)
                                            <th>{{__('英文秒杀价')}}</th>
                                        @else
                                            <th>{{__('英文折扣')}}</th>
                                        @endif
                                        @if($type!=3 && $type!=4)
                                            <th style="display:none;">{{__('中文全价')}}</th>
                                        @endif
                                        @if($type==3)
                                            <th>{{__('中文秒杀价')}}</th>
                                        @else
                                            <th>{{__('中文折扣')}}</th>
                                        @endif
                                        <th>{{ __('操作') }}</th>
                                    </tr>
                                </thead>
                                <tbody>
                                </tbody>
                            </table>
                        @endif
                    </div>
                </div>
            </form>
        </div>
    </div>
    @if($do=='edit')
        <div class="ui modal">
            <i class="close icon"></i>
            <div class="header">
                添加课程
            </div>
            <center>
                <div class="content">
                    <div class="fields"  style="margin-top: 25px;margin-bottom: 25px;">
                        <label style="font-size: 16px; margin-right: 30px;">{{ __('课程等级') }}</label>
                        <select class="ui search dropdown startOne" id="courseLevelOption" autocomplete="off" required>
                            <option value="">{{ __('Select One') }}</option>
                            @foreach($courseLevel as $item)
                                <option value="{{ $item ->id }}">{{ __($item ->nameChinese) }}</option>
                            @endforeach
                            {{--@foreach($courseLevel as $item)--}}
                            {{--<option value="{{ $item ->id }}">{{ __($item ->nameChinese) }}</option>--}}
                            {{--@endforeach--}}
                        </select>
                    </div>
                    <div class="fields"  style="margin-top: 25px;margin-bottom: 25px;">
                        <label style="font-size: 16px; margin-right:65px;">{{ __('学校') }}</label>
                        <select class="ui search dropdown schoolss"  id="schoolss" autocomplete="off" required>
                            <option value="">{{ __('Select One') }}</option>
                            @foreach($uniList as $uni)
                                <option value="{{$uni->id}}">{{$uni->uniNameChinese}} ({{$uni->uniName}})</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="inline fields"  style="margin-top: 25px;margin-bottom: 25px;">

                        <label  style="font-size: 16px; margin-right: 60px;">{{ __('课程') }}</label>
                        <select id="courseOnes" listkey=""    class="ui  search dropdown" multiple="" autocomplete="off" required>
                            <option value="">选择课程</option>
                        </select>
                    </div>
                </div>
            </center>
            <div class="actions">
                <div id="modalAddCourseButton" class="ui primary button">确定</div>
                <div class="ui primary button cle">取消</div>
            </div>
        </div>
        <div id="json" style="display: none"></div>
        <script src="{{asset('js/plugins/dataTables/jquery.dataTables.js')}}?v={{$version}}"></script>
        <script src="{{asset('js/plugins/dataTables/dataTables.bootstrap.js')}}?v={{$version}}"></script>
    @endif
    <script>
        @if($do=='edit')
            document.getElementById('tableCheckAll').checked = false;
            function loadMoreRows(id, page) {
                var event = window.event || arguments.callee.caller.arguments[0];
                event.preventDefault();
                location.href = '/admin/activity_edit?id='+id+'&page='+page;
            }

            function reload(id){
                $("#ss"+id).remove();
                return false;
            }

            function deleteSingleCourse(id){
                var event = window.event || arguments.callee.caller.arguments[0];
                event.preventDefault();
                layer.confirm('确定删除？', {
                    btn: ['确定','取消'], //按钮
                    shade: false //不显示遮罩
                }, function(){
                    var data = {
                        '_token':"{{ csrf_token() }}"
                    };
                    data['id'] = id;
                    $.ajax({
                        method: 'get',
                        data:data,
                        url: '{{route('deleteSingleCourse')}}',
                        success: function(data){
                            $('#courseLevelOption').val();
                            location.reload();
                        }
                    });
                }, function(){
                });
            }

            $("#deleteTable").click(function () {
                var event = window.event || arguments.callee.caller.arguments[0];
                event.preventDefault();
                var data = {
                    '_token':"{{ csrf_token() }}"
                };
                data['id'] = '{{$activity['id']}}';
                $.ajax({
                    method: 'get',
                    data:data,
                    url: '{{route('deleteAllCourse')}}',
                    success: function(data){
                        location.reload();
                    }
                });
            });

            var selectedUni = '';
            var selectedLevel = '';
            var selectedCourse = [];
            var selectedCourseIndex = [];
            var courseArray = [];

            //modal selection
            $(".startOne").change(function () {
                clearFields();
                levelID = $(this).find("option:selected").val();
                selectedLevel = $(this).find('option:selected').text();
                uniID = $('#schoolss').val();
                var courseOne = $("#courseOnes");

                if(levelID != "" && uniID != "") {
                    $.getJSON("{{'activity_getCourse2'}}", {id: levelID, uni: uniID}, function (data) {
                        courseOne.children().remove();
                        courseOne.dropdown('clear');
                        selectedCourse = data;
                        // 如果某大学有课程，则添加全部课程功能
                        if (data) {
                            courseOne.append("<option value='all'>全部课程</option>");
                        }
                        $.each(data, function (k, v) {
                            courseOne.append("<option value=" + v.id + ">" + v.courseNameChinese + " (" + v.courseName + ")</option>");
                        });
                    });
                }
            });

            $(".schoolss").change(function () {
                clearFields();
                uniID = $(this).find("option:selected").val();
                levelID  = $('#courseLevelOption').val();
                selectedUni = $(this).find('option:selected').text();
                var courseOne = $("#courseOnes");

                if (levelID != "" && uniID != "") {
                    $.getJSON("{{'activity_getCourse2'}}", {id: levelID, uni: uniID}, function (data) {
                        selectedCourse = data;
                        courseOne.children().remove();
                        courseOne.dropdown('clear');
                        // 如果某大学有课程，则添加全部课程功能
                        if (data) {
                            courseOne.append("<option value='all'>全部课程</option>");
                        }
                        $.each(data, function (k, v) {
                            courseOne.append("<option value=" + v.id + ">" + v.courseNameChinese + " (" + v.courseName + ")</option>");
                        });
                    });
                }
            });

            $("#modalAddCourseButton").click(function () {
                selectedCourseIndex = [];
                //xlt,2018.10.30,如果选择全部课程，则自动添加全部课程
                if ($("#courseOnes").val() == 'all') {
                    $("#courseOnes option").each(function() {
                        selectedCourseIndex.push($(this).index());
                    });
                    $('.ui.modal').modal('hide');
                } else {
                    $("#courseOnes option:selected").each(function() {
                        selectedCourseIndex.push($(this).index());
                    });
                }
                var tbody = $("#tbody");
                var strtbody = '';
                var slctCourse = [];
                var data1 = [];
                $.each(selectedCourseIndex,function (k,v) {
                    v = v-1;
                    if (selectedCourse[v] != undefined) {
                        slctCourse.push(selectedCourse[v]['id']);
                    }
                });

                if (slctCourse.length != 0) {
                    $.ajax({
                        method: 'post',
                        data: {
                            'courses2': slctCourse.join("#"),
                            'saveCourses': 1,
                            'type': '{{$type}}',
                            'id2': '{{$activity['id']}}',
                        },
                        url: '{{route('updateActivity')}}',
                        success: function(data){
                            location.reload();
                        }
                    });
                }
            });

            function clearFields(){
                var selectedUni = '';
                var selectedLevel = '';
                var selectedCourse = [];
            }
            //end of modal selection
        @endif

        function sendForm(event, form) {
            var event = window.event || arguments.callee.caller.arguments[0];
            event.preventDefault();
            if(!valid()){
                return false
            }
            lockBtn();
            $.ajax({
                method: 'post',
                data:form.serialize(),
                @if($do=='add')
                url: '{{route('addActivity')}}',
                @else
                url: '{{route('updateActivity')}}',
                @endif
                success: function(data){
                    if(data.status == 1){
                        layer.confirm('保存成功', {// 询问框
                            btn: ['Remain Here','Go to List'], //按钮
                            shade: false //不显示遮罩
                        }, function(){
                            window.location.href = '{{route('editActivity')}}?id=' + data.activityId;
                        }, function(){
                            parent.triggerDataTableChange('activity');
                            lay_close_tab();
                        });
                    }else if(data.status == 3){
                        $("#saveBtn").removeAttr("disabled");
                        $("#releaseBtn").removeAttr("disabled");
                        layer.msg('请添加课程后，再发布', {time: 3000,icon: 2});
                    }else if(data.status == 4){
                        $("#saveBtn").removeAttr("disabled");
                        $("#releaseBtn").removeAttr("disabled");
                        layer.msg('英文名重复，请重新输入', {time: 3000,icon: 2});
                    }else if(data.status == 5){
                        $("#saveBtn").removeAttr("disabled");
                        $("#releaseBtn").removeAttr("disabled");
                        layer.msg('中文名重复，请重新输入', {time: 3000,icon: 2});
                    }else if(data.status = 6){
                        $("#saveBtn").removeAttr("disabled");
                        $("#releaseBtn").removeAttr("disabled");
                        layer.msg('秒杀价格不可高于课程原有价格', {time: 3000,icon: 2});
                    }
                }
            });
        }

        function valid() {
            if($('#activityName').val()==""){
                $('#errorSpan').text('Activity Name Empty');
                return false;
            }else if($('#activityNameChinese').val()==""){
                $('#errorSpan').text('Activity Chinese Name Empty');
                return false;
            }else if($('#startTime').val()==""){
                $('#errorSpan').text('Start Time Empty');
                return false;
            }else if($('#endTime').val()==""){
                $('#errorSpan').text('End Time Empty');
                return false;
            }else if($('#fullPrice').val()==""){
                $('#errorSpan').text('Full Amount Empty')
                return false;
            }else if($('#reduction').val()==""){
                $('#errorSpan').text('Reduction Empty')
                return false;
            }else if($('#fullPriceCn').val()==""){
                $('#errorSpan').text('Chinese Full Amount Empty')
                return false;
            }else if($('#reductionCn').val()=="" || $('#reductionCn').val()== undefined){
                $('#errorSpan').text('Chinese Reduction Empty')
                return false;
            }else if(new Date($('#startTime').val()).getTime() > new Date($('#endTime').val()).getTime()){
                $('#errorSpan').text('Start Time cannot be greater than End Time')
                return false;
            }else{
                return true;
            }
        }

        var timeSetting = {
            type: 'datetime',//这里可自定义时间类型，
            today:true,

            formatter: { // 自定义日期的格式
                date: function (date, settings) {
                    if (!date) return  '';
                    var year = date.getFullYear();
                    var month = date.getMonth() + 1;
                    var day = date.getDate();

                    month = month < 10 ? '0' + month : month;
                    day = day < 10 ? '0' + day : day;

                    return day + '-' + month +'-'+ year;
                },

                time: function (date, settings, forCalendar) {
                    if (!date) return '';
                    var hour = date.getHours();
                    var minute = date.getMinutes();
                    hour = hour < 10 ? '0' + hour : hour;
                    minute = minute < 10 ? '0' + minute : minute;
                    return hour + ':' + minute;
                },
            },


            disableMinute:false,
            text: {
                days: ['日', '一', '二', '三', '四', '五', '六'],
                months: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'],
                monthsShort: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'],
                today: '今天',
                now: '当前',

            },

            minDate: new Date("2018-5-20 09:00"),
            maxDate: new Date("2120-5-25 18:00"),

            //解决当前文本框获取不到值问题
            onChange : function (data,txt,mode) {
                $(this).val(txt);
            },

        };

        var leftTimeSetting = $.extend({ endCalendar: "#endTime" }, timeSetting);
        var rightTimeSetting = $.extend({ startCalendar : "#startTime" }, timeSetting);

        $('#startTimeDiv').calendar(leftTimeSetting);
        $('#endTimeDiv').calendar(rightTimeSetting);

        $.ajaxSetup({aysnc: false,global:true});

        @if($do=='edit')
            //满减满加
            $(".plus ").click(function () {
                $clones = $(this).parent();
                $(this).removeClass('plus');
                $(this).addClass('minus');
                $clone = $clones.clone();
                $val = $clone.find('input');
                $val[0].name = 'fullAmount[]';
                $val[0].value = '';
                $val[0].valuei = '';
                $val[1].name = 'reduction[]';
                $val[1].value =' ';
                $val[1].valuei = '';
                $clone.find('.minus').on('click',function () {
                    $(this).parent().remove();
                });
                $clones.after($clone);
                $(this).removeClass('minus');
                $(this).addClass('plus');

            });
            // 修改删除属性
            $(".minus").click(function () {

                $val = $(this).prev().children('input');

                if($val.attr('valueI').length>0) {

                    $off = 0;
                    $.post('',{apId:$val.attr('valueI'), '_token':"{{ csrf_token() }}"},function (data) {
                        if(data>0){
                            $off = 1;
                        }
                    });
                    if($off>0){
                        $(this).parent().remove();
                    }

                }

                return ;
            });

            //修改删除课程表
            $.ajaxSettings.async = false;

            function openChooseCourseModal(instance) {
                $('.ui.modal')
                    .modal('show');
                $(instance).prop('checked', false);
            }
            var list = '';

            //保存与发布
            $("[name='status']").click(function () {
                if($(this).index()==1){
                    $(this).val(1);
                }

                return true;
            });

            $(".cle").click(function () {
                $('.ui.modal')
                    .modal('hide');
                return false;
            });

            function chkAll() {
                var c = document.getElementsByClassName('tableCheck');
                if (document.getElementById('tableCheckAll').checked) {
                    for (var i = 0; c.length > i; i++)
                        c[i].checked = true;
                    return true;
                } else {
                    for (var i = 0; c.length > i; i++)
                        c[i].checked = false;
                    return true;
                }
            }

            function delSlct() {
                var slctAll = [];
                var c = document.getElementsByClassName('tableCheck');
                for (var i = 0; c.length > i; i++) {
                    if (c[i].checked) {
                        slctAll.push(c[i].id.substring(4));
                    }
                }
                if (slctAll.length == 0) {
                    return true;
                }
                var slctAllStr = slctAll.join(',');
                var data = {
                    '_token':"{{ csrf_token() }}"
                };
                data['ids'] = slctAllStr;
                $.ajax({
                    method: 'get',
                    data : data,
                    url: '{{route('deleteSlctCourse')}}',
                    success: function(data){
                        location.reload();
                    }
                });

                return true;
            }
        
            // datatable
            $( function () {
                parent.courseTableDYM = $('#courseTable').DataTable({
                //    "order": [[ 0, "desc" ]],
                    "processing": false,
                    "serverSide": true,
                    "lengthChange": false,
                    "pageLength": 25,
                    "searching": false,
                    'ordering': false,
                    "ajax":{
                        "url": "{{route('activityEditCourseData')}}",
                        "dataType": "json",
                        "type": "post",
                        "data":{
                            id:"{{$activity->id}}",
                            _token: "{{csrf_token()}}",
                        }
                    },
                    "columns": [
                        @foreach($courseDataTableColumns as $column)
                        { "data": "{{$column['htmlName']}}"},
                        @endforeach
                    ],
                    "fnDrawCallback": function( oSettings ) {
                        $("#tableCheckAll").attr("checked",false)
                    }
                });
                @include('components.datatableScroll',  ['id'=>'#courseTable'])                  
            });

            window.onunload = function() {
                if ((window.event.clientX < 0) || (window.event.clientY<0)) {
                } else if (window.event.altKey == true) {
                } else {
                    parent.courseTableDYM = null;
                    console.log("unload event -->"+parent.courseTableDYM);
                }
            }
        @endif
        
        function lockBtn() {
            $('#saveBtn').attr("disabled","disabled");
            $('#releaseBtn').attr("disabled","disabled");
        }
    </script>
@endsection