@extends('admin.base')

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

@section('account_content')
    @php(
        $version = \Illuminate\Support\Facades\Config::get('app.version')
    )
   @include('datatableAssets')

    <script src="{{asset('js/jquery.validate.min.js')}}?{{$version}}"></script>
    <script src="{{asset('js/jquery.validate-locale-zh.js')}}?{{$version}}"></script>
    <script src="{{asset('js/plugins/chosen/chosen.jquery.js')}}"></script>
    <link href="{{asset('css/plugins/chosen/chosen.css')}}" rel="stylesheet">
    <script src="{{asset('js/bootstrap.min.js')}}"></script>
    <div class="" id="course_list">
        <div class="row">
            <div class="col-sm-12">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <h5>添加自选课程</h5>
                    </div>
                    <div class="ibox-content">
                        <form  class="form-horizontal" id="categoryForm" method="POST" action="{{route('storeVirtualCourse')}}" enctype="multipart/form-data">
                            {{ csrf_field() }}
                            <div class="row">
                                <div class="col-sm-2">{{ __('中文课程名称') }}</div>
                                <div class="col-sm-4">
                                    <input type="text" class="form-control" placeholder="请输入中文课程名称" id="courseNameChinese" name="courseNameChinese" required>
                                </div>
                                <label class="col-sm-4 red" id="ownerValidation"></label>
                            </div>
                            <div class="row mt-10">
                                <div class="col-sm-2">{{ __('英文课程名称') }}</div>
                                <div class="col-sm-4">
                                    <input type="text" class="form-control" placeholder="请输入英文课程名称" id="courseName" name="courseName" required>
                                </div>
                                <label class="col-sm-4 red" id="ownerValidation"></label>
                            </div>
                            <div class="row mt-10">
                                <div class="col-sm-2">{{ __('中文课程介绍') }}</div>
                                <div class="col-sm-4">
                                    <input type="text" class="form-control" placeholder="请输入中文课程简介" id="descriptionChinese" name="descriptionChinese" required>
                                </div>
                                <label class="col-sm-4 red" id="ownerValidation"></label>
                            </div>
                            <div class="row mt-10">
                                <div class="col-sm-2">{{ __('英文课程介绍') }}</div>
                                <div class="col-sm-4">
                                    <input type="text" class="form-control" placeholder="请输入英文课程简介" id="description" name="description" required>
                                </div>
                                <label class="col-sm-4 red" id="ownerValidation"></label>
                            </div>
                            <div class="row mt-10">
                                <div class="col-sm-2">原价价格(英镑)</div>
                                <div class="col-sm-4">
                                    <input type="number" class="form-control" placeholder="Original price GBP" id="originalPricePound" name="originalPricePound" value="0" required>
                                </div>
                                <label class="col-sm-4 red" id="originalPricePoundValidation"></label>
                            </div>
                            <div class="row mt-10">
                                <div class="col-sm-2">{{ __('价格英镑') }}</div>
                                <div class="col-sm-4">
                                    <input type="number" class="form-control" placeholder="请输入英镑价格" id="pricePound" name="pricePound" required>
                                </div>
                                <label class="col-sm-4 red" id="pricePoundValidation"></label>
                            </div>
                            <div class="row mt-10">
                                <div class="col-sm-2">原价价格(人民币)</div>
                                <div class="col-sm-4">
                                    <input type="number" class="form-control" placeholder="Original price CNY" id="originalPriceChinese" name="originalPriceChinese" value="0" required>
                                </div>
                                <label class="col-sm-4 red" id="originalPriceChineseValidation"></label>
                            </div>
                            <div class="row mt-10">
                                <div class="col-sm-2">{{ __('价格人民币') }}</div>
                                <div class="col-sm-4">
                                    <input type="number" class="form-control" placeholder="请输入人民币价格" id="priceChinese" name="priceChinese" required>
                                </div>
                                <label class="col-sm-4 red" id="priceChineseValidation"></label>
                            </div>
                            <div class="row mt-10">
                                <div class="col-sm-2">是否为进阶课程?</div>
                                <div class="col-sm-4">
                                    <div class="ui checkbox">
                                        <label></label>
                                        <input type="checkbox" name="isAdvanced" value="1" id="isAdvanced">
                                    </div>
                                </div>
                            </div>
                            <div class="row mt-10">
                                <div class="col-sm-2">{{ __('图片') }}</div>
                                <div class="col-sm-4">
                                    <input type = "file" class="form-control" name="images" id="images" >
                                </div>
                            </div>

                            <div class="row mt-10">
                                <div class="col-sm-2"></div>
                                <div class="col-sm-4">
                                    <img alt="预览" id="groupLogoPreview" style="max-height: 200px; max-width: 200px;" >
                                </div>
                            </div>

                            <div class="row mt-10">
                                <div class="col-sm-2">{{ __('移动端图片') }}</div>
                                <div class="col-sm-4">
                                    <input type = "file" class="form-control" name="mobileImages" id="mobileImages" >
                                </div>
                            </div>

                            <div class="row mt-10">
                                <div class="col-sm-2"></div>
                                <div class="col-sm-4">
                                    <img alt="预览" id="mobileImagesPreview" style="max-height: 200px; max-width: 200px;" >
                                </div>
                            </div>

                            <div class="row mt-10">
                                <div class="col-sm-2">{{ __('大学:') }}</div>
                                <div class="col-sm-4">
                                    <select data-placeholder="大学" class="chosen-select form-control" tabindex="2" id="selectUni">
                                        <option value="">请选择大学</option>
                                        @if(!empty($ulist))
                                            @foreach ($ulist as $obj)
                                                <option id="op_{{$obj->id}}" value='{{$obj->id}}' data-release-status="{{($obj->status) ? '已发布' : '未发布' }}">{{$obj->uniName}}&nbsp;({{$obj->uniNameChinese}})</option>
                                            @endforeach
                                        @endif
                                    </select>
                                </div>
                            </div>


                            <table class="table table-border table-bordered table-hover table-bg table-sort display" id="pendingTable">
                                <thead >
                                <tr class="text-c">
                                    <th name="uniName" width="130">学校名称</th>
                                    <th name="uniSort" width="100">排序</th>
                                    <th name="uniRelease" width="100">发布状态</th>
                                    <th name="uniOperation" width="140" class="">操作</th>
                                </tr>
                                </thead>
                                <tbody>

                                </tbody>
                            </table>
                            <div class="row mt-10">
                                <div class="col-sm-2">
                                    <input type="submit" onclick="return validateForm()" class="ui primary button form-control" form="categoryForm">
                                </div>
                                <div class="col-sm-2">
                                    <div class="ui primary button form-control" tabindex="0" onclick="lay_close_tab()">{{ __('Return') }} </div>
                                </div>
                            </div>
                        </form>
                        <label class="col-sm-4 red" id="overallValidation"></label>
                    </div>
                </div>
            </div>
        </div>
    </div>

    {{-- Start Confirm Modal --}}
    <div class="ui tiny modal" id="submit_confirmation_modal">
        <div class="header">
            {{ __('Confirm Submit') }}
        </div>
        <div class="actions">
            <div class="ui grey deny button" onclick="cancelSubmit()">
                {{ __('Cancel') }}
            </div>
            <button type="submit" class="ui yellow submit button" id="confirmSubmit"> {{ __('Confirm') }}</button>
        </div>
    </div>
    {{-- End Confirm Modal --}}
    <script src="{{asset('js/jquery.form.js')}}"></script>
    <script>

        //下拉菜单
        var config = {
            '.chosen-select': {},
            '.chosen-select-deselect': {
                allow_single_deselect: true
            },
            '.chosen-select-no-single': {
                disable_search_threshold: 10
            },
            '.chosen-select-no-results': {
                no_results_text: 'Oops, nothing found!'
            },
            '.chosen-select-width': {
                width: "95%"
            }
        }
        for (var selector in config) {
            $(selector).chosen(config[selector]);
        }
        var pendingTable = $('#pendingTable').DataTable({
            "paging": false,
            "bInfo":false,
            "searching" : false,
            "ordering": false,
            "columns": [
            {data: "uniName"},
            {data: "uniSort"},
            {data: "uniRelease"},
            {data: "uniOperation"}
        ]
        });
        @include('components.datatableScroll',  ['id'=>'#pendingTable'])
        $("#selectUni").change(function(){
            var id = $(this).val();
            if(id){
                $("#op_"+id).attr('disabled',true);
                $("#selectUni").trigger("chosen:updated");
                pendingTable.row.add({
                    "uniName": $(this).find('option:selected').text(),
                    "uniSort": "<input type='text' class='form-control' name='uniID["+id+"]' value='0'>",
                    "uniRelease": $(this).find('option:selected').data('release-status'),
                    "uniOperation": "<a href='javascript:;' data-id='"+id+"' class='delTr'>删除</a>"
                }).draw();
            }
        })
        $('#pendingTable tbody').on('click','a.delTr',function(e){
            pendingTable.row($(this).parents('tr')).remove().draw();
            var id = $(this).attr('data-id')
            $("#op_"+id).removeAttr('disabled');
            $("#selectUni").trigger("chosen:updated");
        })

        var valid = false;

        $(function(){
            $('.checkbox').checkbox();

            $('#categoryForm').ajaxForm(function(data) {
                lay_close_tab();
            });

            $('#confirmSubmit').on('click', function () {
                if(valid){
                    $.ajax({
                        method: 'post',
                        data:  $('#categoryform').serialize(),
                        url: '{{route('storeVirtualCourse')}}',
                        success: function(){
                            lay_close_tab();
                        }
                    });
                }
            });
        });


        var validate =  $("#categoryForm").validate({
            messages: {
                courseNameChinese:'该字段不能为空',
                courseName:'该字段不能为空',
                descriptionChinese:'该字段不能为空',
                description:'该字段不能为空',
                pricePound:'该字段不能为空',
                priceChinese:'该字段不能为空',
                images:'该字段不能为空',
                originalPricePound:'该字段不能为空',
                pricePound:'该字段不能为空',
                originalPriceChinese:'该字段不能为空',
                priceChinese:'该字段不能为空',
            }
        });

        function storeCategory() {
            if(validate.form()){
                valid = true;

                $('#overallValidation').empty();
                $('#submit_confirmation_modal').modal('show');
            }
        }

        function cancelSubmit () {
            $('#submit_confirmation_modal').modal('hide');
        }

        var imgPreview = document.getElementById('groupLogoPreview');
        var imgFilechooser = document.getElementById('images');

        var mobileImgPreview = document.getElementById('mobileImagesPreview');
        var mobileImgFilechooser = document.getElementById('mobileImages');

        imgPreviewFun(imgFilechooser,imgPreview);
        imgPreviewFun(mobileImgFilechooser,mobileImgPreview);

        function imgPreviewFun(imgFilechooser,imgPreview){
            var maxsize = 200 * 1024;
            imgFilechooser.onchange = function() {
                var files = this.files;
                var file = files[0];
                if (!/\/(?:jpeg|jpg|png)/i.test(file.type)) return;
                var reader = new FileReader();
                reader.onload = function() {
                    var result = this.result;
                    var img = new Image();
                    if (result.length <= maxsize) {
                        toImgPreview(result,imgPreview);
                        return;
                    }
                    img.onload = function() {
                        var compressedDataUrl = compress(img, file.type);
                        toImgPreview(compressedDataUrl,imgPreview);
                        img = null;
                    };
                    img.src = result;
                };
                reader.readAsDataURL(file);
            };
        }


        function toImgPreview(dataUrl,imgPreview) {
            imgPreview.src = dataUrl;
        }

        function compress(img, fileType) {
            var canvas = document.createElement("canvas");
            var ctx = canvas.getContext('2d');

            var width = img.width;
            var height = img.height;

            canvas.width = width;
            canvas.height = height;

            ctx.fillStyle = "#fff";
            ctx.fillRect(0, 0, canvas.width, canvas.height);
            ctx.drawImage(img, 0, 0, width, height);

            var base64data = canvas.toDataURL(fileType, 0.75);
            canvas = ctx = null;

            return base64data;
        }

        function validateForm()
        {
            $('.red').text('');
            showLoading($(".gray-bg"),"正在处理，请稍后");
            var noErrors = true;
            if(parseFloat($('#originalPricePound').val()) <= 0)
            {
                $('#originalPricePoundValidation').text('Invalid price');
                noErrors = false;
            }
            if(parseFloat($('#pricePound').val()) <= 0)
            {
                $('#pricePoundValidation').text('Invalid price');
                noErrors = false;
            }
            if(parseFloat($('#originalPriceChinese').val()) <= 0)
            {
                $('#originalPriceChineseValidation').text('Invalid price');
                noErrors = false;
            }
            if(parseFloat($('#priceChinese').val()) <= 0)
            {
                $('#priceChineseValidation').text('Invalid price');
                noErrors = false;
            }
            return (noErrors) ? true : false;
        }
    </script>
    <script src="{{asset('js/content.js')}}"></script>
@endsection