@extends( 'newBase' )

@section('title', 'Images')

@section('content')
    <div class="row">
        <div class="col-sm-12">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <h5>{{$moduleType[1]}}</h5>
                    <div class="ibox-tools">
                        <a class="collapse-link">
                            <i class="fa fa-chevron-up"></i>
                        </a>
                        <a class="close-link">
                            <i class="fa fa-times"></i>
                        </a>
                    </div>
                </div>
                <form action="">
                    <div class="ibox-content">
                        <div class="row ">
                            <div class="col-sm-10">
                                <div class="input-group">
                                    <input  type="text" name="name" placeholder="{{$moduleType[4]}}" class="form-control" id="mainMappingList" value="{{isset($selectedElementName)?$selectedElementName:''}}" data-id="{{isset($moduleElementID)?$moduleElementID:''}}">
                                    <div class="input-group-btn">
                                        <button type="button" class="btn btn-white dropdown-toggle" data-toggle="dropdown">
                                            <span class="caret"></span>
                                        </button>
                                        <ul class="dropdown-menu dropdown-menu-right" role="menu">
                                            {{--Add universities--}}
                                        </ul>
                                    </div>
                                </div>

                                @if($moduleType[0]===5)
                                    <div class="input-group">
                                        <input  type="text" name="courseName" placeholder="Course Name" class="form-control" id="courseName" value="{{isset($selectedCourseName)?$selectedCourseName:''}}" data-id="{{isset($selectedCourseID)?$selectedCourseID:''}}">
                                        <div class="input-group-btn">
                                            <button type="button" class="btn btn-white dropdown-toggle" data-toggle="dropdown">
                                                <span class="caret"></span>
                                            </button>
                                            <ul class="dropdown-menu dropdown-menu-right" role="menu">
                                                {{--Add courses--}}
                                            </ul>
                                        </div>
                                    </div>
                                @endif

                                {{--<div class="input-group">--}}
                                    {{--<div class="labelfield">--}}
                                        {{--Start Date:--}}
                                    {{--</div>--}}
                                    {{--<div class="inputfield">--}}
                                        {{--<div class="ui icon input" id="startDateBlock">--}}
                                            {{--<input type="text" placeholder="Countdown Start Date" id="countdownStartTime" name="countdownStartTime" @if(isset($countdownStartTime)) value="{{$countdownStartTime}}" @endif>--}}
                                        {{--</div>--}}
                                    {{--</div>--}}
                                {{--</div>--}}

                                {{--<div class="input-group">--}}
                                    {{--<div class="labelfield">--}}
                                        {{--End Date:--}}
                                    {{--</div>--}}
                                    {{--<div class="inputfield">--}}
                                        {{--<div class="ui icon input" id="endDateBlock">--}}
                                            {{--<input type="text" placeholder="Countdown End Date" id="countdownEndTime" name="countdownEndTime" @if(isset($countdownEndTime)) value="{{$countdownEndTime}}" @endif>--}}
                                        {{--</div>--}}
                                    {{--</div>--}}
                                {{--</div>--}}

                                <div class="input-group">
                                    <div class="labelfield">
                                        Section Photo:
                                    </div>
                                    <div class="inputfield">
                                        <input type="file" name='filepath' id="filechooser"
                                               @if(!isset($moduleImg)) required @endif>
                                    </div>
                                </div>

                                <div class="fields">
                                    {{--TODO: check what is supposed to be displayed here - $moduleType is an array so it throws an error when used without the index--}}
{{--                                    <label style="font-size: 12px;margin-bottom: 25px;margin-left: 132px;">{{$moduleType[2]}}</label>--}}
                                    {{--<label style="font-size: 12px;margin-bottom: 25px;margin-left: 132px;">{{$moduleType}}</label>--}}
                                </div>

                                <div class="pic">
                                    <img alt="Image Previewer" id="previewer" style="max-width: 400px;max-height: 200px;"
                                         @if(isset($moduleImg)) src="{{config('locations.modelImage.asset').$moduleImg}}" @endif>
                                </div>
                            </div>
                        </div>

                        <div class="row mt-20">
                            <u class="btn btn-primary" onclick="parent_reload()">{{ __('back') }}</u>
                            <u class="btn btn-primary" onclick="displayConfirmation('{{ __("Submit") }}', '{{ __("Submit?") }}', 'checkUni()')">{{ __('Submit') }}</u>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
    {{--<script src="{{asset('js/plugins/datetimepicker/bootstrap-datetimepicker.min.js')}}"></script>--}}
    <script>
        var filechooser = document.getElementById('filechooser');
        var previewer = document.getElementById('previewer');
        var image;
        var mainMappingList;
        function checkUni(){
            var isEdit = '{{isset($modelImgID)?$modelImgID:''}}';
            if(!isEdit){
                var elementID = '';

                if('{{$moduleType[0]}}' == '5'){
                    elementID = $('#courseName').attr('data-id');
                } else{
                    elementID= $('#mainMappingList').attr('data-id');
                }

                $.ajax({
                    type:'GET',
                    url:"{{route('checkNewModelimg')}}?id="+encodeURI(elementID)+"&type="+'{{$moduleType[0]}}',
                    cache:false,
                    processData:false,
                    contentType: false,
                    success: function(data){
                        console.log(data);
                        //               data = $.parseJSON(data);
                        if( data.exist  > 0){
                            displayConfirmation(
                                "{{ __('Are you sure?') }}",
                                "{{ __('Element already added to the Recommendation. Do you really wan to add?') }}",
                                'updateImage()'
                            );
                        } else {
                            updateImage();
                        }
                    }
                });
            }else{
                updateImage();
            }

        }


        mainMappingList = $("#mainMappingList").bsSuggest( {
            indexKey: 0,
            idField: 'id',
            effectiveFields: ['element-name-english','element-name-chinese'],
            effectiveFieldsAlias: {'element-name-english':'Element Name (English)', 'element-name-chinese':'Element Name (Chinese)'},
            ignorecase: true,
            data: {
                    'value': [
                        @if(!empty($mainList))
                            @foreach($mainList as $value)
                                {
                                    'element-name-english': '{{$value->elementNameEnglish}}',
                                    'element-name-chinese': '{{$value->elementNameChinese}}',
                                    'id': '{{$value->id}}',
                                },
                            @endforeach
                        @endif
                    ],

                    'defaults': ''
                }
            });

        filechooser.onchange = function() {
            var files = this.files;
            var file = files[0];
            image = file;

            // 接受 jpeg, jpg, png 类型的图片
            if (!/\/(?:jpeg|jpg|png)/i.test(file.type))
            {
                alert("Image is not of a supported format. Please use a jpeg, jpg or png file.");
                return;
            }

            var reader = new FileReader();

            reader.onload = function() {
                var result = this.result;

                previewer.src = result;

                // 清空图片上传框的值
                // filechooser.value = '';
            };

            reader.readAsDataURL(file);
        };

        function updateImage() {
            $.ajaxSetup({
                headers: {'X-CSRF-Token': $('meta[name=_token]').attr('content')}
            });

            var data = new FormData();

            data.append('ModelimgID', '{{$modelImgID ?? ''}}');
            data.append('moduleType', '{{$moduleType[0]}}');
            data.append('elementID', $('#mainMappingList').attr('data-id'));
            data.append('filepath', image);

            @if($moduleType[0]===5)
                data.append('courseID', $('#courseName').attr('data-id'));
            @endif

            $.ajax({
                type:'POST',
                url:"{{route('Modelimgsubmit')}}",
                data:data,
                cache:false,
                processData:false,
                contentType: false,
                success: function(data) {
                    if (data === 'success') {
                        parent_reload();
                    } else {
                        alert(data);
                    }
                }
            });
        }

        @if($moduleType[0]===5)
            mainMappingList.on('onSetSelectValue',function(){
                courseFilter(false);
            });

            @if(isset($selectedCourseID))
                courseFilter(true);
            @endif

            function courseFilter(isInitializer) {
                var data = {
                    '_token': "{{ csrf_token() }}"
                };

                data['universityID'] = $('#mainMappingList').attr('data-id');

                $.ajax({
                    type: 'GET',
                    url: "{{route('courseFilter_ModuleImg')}}",
                    data: data,
                    success: function (data) {
                        if(!isInitializer){
                            $("#courseName").bsSuggest("destroy");
                            $('#courseName').attr('data-id','');
                            $('#courseName').val('');
                        }
                        $("#courseName").bsSuggest( {
                            keyField: 'courseName',
                            idField: 'id',
                            effectiveFields: ['courseName'],
                            data:{
                                value:data
                            }
                        });
                    }
                });
            }
        @endif
    </script>

    @include('common.confirmation')
    @include('common.notification')
@endsection