@extends('admin.base')

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

@section('account_content')

@include('datatableAssets')
    @php
        $version = \Illuminate\Support\Facades\Config::get('app.version')
    @endphp
    <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>{{ __('Edit Virtual Course') }}</h5>                   
                </div>
                <div class="ibox-content">
                    <form  class="form-horizontal" id="categoryForm" method="POST" action="{{route('updateVirtualCourse', ['ID' => $course->id])}}" enctype="multipart/form-data">
                        {{ csrf_field() }}
                        <input type="hidden" name="" >
                        <div class="row">
                            <div class="col-sm-2">{{ __('中文课程名称') }}</div>
                            <div class="col-sm-4">
                                <input type="text" class="form-control" placeholder="courseNameChinese" id="courseNameChinese" name="courseNameChinese" value="{{$course->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="courseName" id="courseName" name="courseName" value="{{$course->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="descriptionChinese" id="descriptionChinese" name="descriptionChinese" value="{{$course->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="description" id="description" name="description" value="{{$course->description}}" required>
                            </div>
                            <label class="col-sm-4 red" id="ownerValidation"></label>
                        </div>
                        <div class="row mt-10">
                            <div class="col-sm-2">{{ __('Original Price Pound') }}</div>
                            <div class="col-sm-4">
                                <input type="number" class="form-control" placeholder="Original price GBP" id="originalPricePound" name="originalPricePound" value="{{$course->originalPricePound}}" 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="pricePound" id="pricePound" name="pricePound" value="{{$course->pricePound}}" required>
                            </div>
                            <label class="col-sm-4 red" id="pricePoundValidation"></label>
                        </div>
                        <div class="row mt-10">
                            <div class="col-sm-2">{{ __('Original Price Chinese') }}</div>
                            <div class="col-sm-4">
                                <input type="number" class="form-control" placeholder="Original price CNY" id="originalPriceChinese" name="originalPriceChinese" value="{{$course->originalPriceChinese}}" 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="priceChinese" id="priceChinese" name="priceChinese" value="{{$course->priceChinese}}" required>
                            </div>
                            <label class="col-sm-4 red" id="priceChineseValidation"></label>
                        </div>
                        <div class="row mt-10">
                            <div class="col-sm-2">{{ __('Is advanced course?') }}</div>
                            <div class="col-sm-4">
                                <div class="ui checkbox">
                                    <label></label>
                                    <input type="checkbox" name="isAdvanced" value="1" id="isAdvanced" {{($course->isAdvanced)?'checked':''}}>
                                </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" value="{{$course->images}}">
                            </div>
                        </div>
                        <div class="row mt-10">
                            <div class="col-sm-2"></div>
                            <div class="col-sm-4">
                                <img alt="Image Preview" id="groupLogoPreview" style="max-height: 200px; max-width: 200px;" src="{{config('locations.virtualCourseImage.asset').$course->images}}" >
                            </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" value="{{$course->mobileImages ?? ''}}">
                            </div>
                        </div>
                        <div class="row mt-10">
                            <div class="col-sm-2"></div>
                            <div class="col-sm-4">
                                <img alt="Image Preview" id="mobileImagesPreview" style="max-height: 200px; max-width: 200px;" src="{{config('locations.virtualCourseImage.asset').$course->mobileImages ?? ''}}" >
                            </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>
                    <div class="row mt-10">
                        <label class="col-sm-12 red" id="overallValidation"></label>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
	<div class="ui grid">
		<div class="eight wide column">
			<div class ="content">
				<div class="ui center aligned basic segment">
					<div class="ui left icon action input">
						<div class="ui horizontal divider"><h3>{{ __('Edit Virtual Course') }}</h3>
						</div>
					</div>
				</div>
				<div class="ui form">

				</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>
        //下拉菜单
        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,
            "iDisplayLength": -1,
            "lengthMenu": [[10, 100, 500, -1], [10, 100, 500, "所有"]],
            "columns": [
                {data: "uniName"},
                {data: "uniSort"},
                {data: "uniRelease"},
                {data: "uniOperation"}
            ]
        });
        @include('components.datatableScroll',  ['id'=>'#pendingTable'])
        @if(!empty($selectUniList))
            @foreach($selectUniList as $one)
                $("#op_{{$one->id}}").attr('disabled',true);
                pendingTable.row.add({
                    "uniName": '{{$one->uniNameChinese}}',
                    "uniSort": "<input type='text' class='form-control' name='uniID[{{$one->id}}]' value='{{$one->displayOrder}}'>",
                    "uniRelease": "{{($one->status) ? '已发布' : '未发布' }}",
                    "uniOperation": "<a href='javascript:;' data-id='{{$one->id}}' class='delTr'>删除</a>"
                });
            @endforeach
            $("#selectUni").trigger("chosen:updated");
        @endif
        $("#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' name='uniID["+id+"]' value='0' class='form-control'>",
                    "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");
        })

        $(function () {
            $('.checkbox').checkbox();
            pendingTable.draw();
        });

		var valid = false;

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

            $('#confirmSubmit').on('click', function () {
                if(valid){
                    $.ajax({
                        method: 'post',
                        data:  $('#categoryForm').serialize(),
                        {{--url: '{{route('updateVirtualCourse'.'/'.$course->id)}}',--}}
                        url: '{{route('updateVirtualCourse', ['ID' => $course->id])}}',
                        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('');
            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