@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/bootstrap.min.js')}}"></script>
	<div class="animated fadeInRight">
		<div class="row">
            <div class="content col-sm-12">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <h5>{{ __('Add University Information') }}</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>
					<div class="ibox-content">
						<form  class="form-horizontal" method="post" action="{{route('storeUniversity')}}" enctype="multipart/form-data" id="universityForm">
                            {{ csrf_field() }}
                            <div class="row">
                                <div class="col-sm-3">
                                    <label class="col-sm-12"><span class="red">*</span>{{ __('University Name in Chinese') }}</label>
                                    <div class="col-sm-12">
                                        <input type="text" class="form-control" placeholder="University Name in Chinese" name="uniNameChinese" id="uniNameChinese" required>
                                    </div>
                                </div>
                                <div class="col-sm-3">
                                    <label class="col-sm-12"><span class="red">*</span>{{ __('University Name in English') }}</label>
                                    <div class="col-sm-12">
                                        <input type="text" class="form-control" placeholder="University Name in English" name="uniName" id="uniName" required>
                                    </div>
                                </div>
                                <div class="col-sm-3">
                                    <label class="col-sm-12">{{ __('Search Term English') }}</label>
                                    <div class="col-sm-12">
                                        <input type="text" class="form-control" placeholder="Search Term English" name="searchTermEnglish" id="searchTermEnglish">
                                    </div>
                                </div>
                                <div class="col-sm-3">
                                    <label class="col-sm-12">{{ __('Search Term Chinese') }}</label>
                                        <div class="col-sm-12">
                                        <input type="text" class="form-control" placeholder="Search Term Chinese" name="searchTermChinese" id="searchTermChinese">
                                    </div>
                                </div>
                            </div>

                            <div class="row mt-10">
                                <div class="col-sm-3">
                                    <label class="col-sm-12"><span class="red">*</span>{{ __('Location') }}</label>
                                    <div class="col-sm-12">
                                        <select class="ui search dropdown form-control" name="location" id="location"  autocomplete="off" required>
                                            <option value="">Select Location</option>
                                        @foreach($locations as $key => $value1)
                                            <option value="{{$value1->locationID}}">{{$value1->locationName}}</option>
                                        @endforeach
                                        </select>
                                    </div>
                                </div>
                                <div class="col-sm-3">
                                    <label class="col-sm-12"><span class="red">*</span>{{ __('City') }}</label>
                                    <div class="col-sm-12">
                                        <select class="ui search dropdown form-control" name="city" id="city"  autocomplete="off" required>
                                            <option value="">Select City</option>
                                            @foreach($locations as $key => $value1)
                                                <option value="{{$value1->locationName}}" disabled="">{{$value1->locationName}}</option>
                                                @foreach($cities as $key => $value2)
                                                    @if($value2->locationName == $value1->locationName)
                                                        <option value="{{$value2->cityID}}">{{$value2->cityName}}</option>
                                                    @endif
                                                @endforeach
                                            @endforeach
                                        </select>
                                    </div>
                                </div>
                                <div class="col-sm-3">
                                    <label class="col-sm-12"><span class="red">*</span>{{ __('Recommendation Index') }}</label>
                                    <div class="col-sm-12">
                                        <input type="number" class="form-control" min="0" placeholder="Recommendation Index" name="recIndex" id="recIndex">
                                    </div>
                                </div>

                                <div class="col-sm-1 mt-10">
                                    <div class="ui checkbox" style="width: 80px">
                                        <input type="checkbox" id="thirdPartyStatus" name="thirdPartyStatus" value="checked">
                                        <label>UCAS Fees</label>
                                    </div>
                                </div>
                                <div class="col-sm-1 mt-10">
                                    <div class="ui checkbox" style="width: 130px">
                                        <input type="checkbox" id="isPartner" name="isPartner" value="checked">
                                        <label>Partnership Status</label>
                                    </div>
                                </div>
                                {{--<div class="field">--}}
                                        {{--<label>{{ __('Average Tuition') }}*</label>--}}
                                        {{--<input type="text" placeholder="Average Tuition" name="averageTuitionFee" id="averageTuitionFee" required>--}}
                                {{--</div>--}}
                            </div>

                            <div class="row mt-10">
                                <div class="col-sm-4">
                                    <label class="col-sm-12"><span class="red">*</span>{{ __('Estimated Living Expense') }}</label>
                                    <div class="col-sm-12">
                                        <input type="text" class="form-control" placeholder="Estimated Living Expense" name="livingCost" id="livingCost" required>
                                    </div>
                                </div>
                                <div class="col-sm-4">
                                    <label class="col-sm-12"><span class="red">*</span>{{ __('Career Path') }}</label>
                                    <div class="col-sm-12">
                                        <input type="text" class="form-control" placeholder="Career Path" id="careerProspectus" name="careerProspectus" required>
                                    </div>
                                </div>
                                <div class="col-sm-4">
                                    <label class="col-sm-12"><span class="red">*</span>{{ __('Student Satisfaction') }}</label>
                                    <div class="col-sm-12">
                                        <input type="text" class="form-control" placeholder="Student Satisfaction" name="studentSatisfaction" id="studentSatisfaction" required>
                                    </div>
                                </div>
                            </div>

                            <div class="row mt-10">
                                <div class="col-sm-3">
                                    <label class="col-sm-12"><span class="red">*</span>{{ __('International Student Rate') }}</label>
                                    <div class="col-sm-12">
                                        <input type="text" class="form-control" placeholder="International Student Rate" name="internationalStudent" id="internationalStudent" required>
                                    </div>
                                </div>

                                <div class="col-sm-3">
                                    <label class="col-sm-12"><span class="red">*</span>{{ __('Minimun IELTS Requirenent') }}</label>
                                    <div class="col-sm-12">
                                        <select class="ui search dropdown form-control" id="minimumIELTS" name="minimumIELTS" required>
                                            <option value="5">5.0</option>
                                            <option value="5.5">5.5</option>
                                            <option value="6">6.0</option>
                                            <option value="6.5">6.5</option>
                                            <option value="7">7.0</option>
                                            <option value="8">7.0+</option>
                                        </select>
                                    </div>
                                </div>

                                <div class="col-sm-3">
                                    <label class="col-sm-12"><span class="red">*</span>{{ __('Slogan') }}</label>
                                    <div class="col-sm-12">
                                        <input type="text" class="form-control" placeholder="Slogan" name="slogan" id="slogan" required>
                                    </div>
                                </div>
                            </div>

                            <div class="row mt-10">
                                <div class="col-sm-4">
                                    <label class="col-sm-12"><span class="red">*</span>{{ __('Times UK Ranking') }}</label>
                                    <div class="col-sm-12">
                                        <input type="text" class="form-control" placeholder="{{__('Enter 0 for unranked university')}}" name="timesRanking" id="timesRanking" required>
                                    </div>
                                </div>

                                <div class="col-sm-4">
                                    <label class="col-sm-12"><span class="red">*</span>{{ __('CUG UK Ranking') }}</label>
                                    <div class="col-sm-12">
                                        <input type="text" class="form-control" placeholder="{{__('Enter 0 for unranked university')}}" id="CUGRanking" name="CUGRanking" required>
                                    </div>
                                </div>
                                <div class="col-sm-4">
                                    <label class="col-sm-12"><span class="red">*</span>{{ __('QS World Ranking') }}</label>
                                    <div class="col-sm-12">
                                        <input type="text" class="form-control" placeholder="{{__('Enter 0 for unranked university')}}" id="QSRanking" name="QSRanking" required>
                                    </div>
                                </div>
                            </div>

                            <div class="row mt-10" id="course_div">
                                <div class="col-sm-12">
                                    <label class="col-sm-12">{{ __('Distinction Courses') }}<button id="add_course">+</button></label>
                                    <div class="col-sm-12" id="course_div">
                                        <input type="text"  placeholder="DistinctCourses" name="DistinctCourses[]" class="DistinctCourses form-control">
                                    </div>
                                </div>
                            </div>

                            <div class="row mt-10">
                                <div class="col-sm-12">
                                    <label class="col-sm-12"><span class="red">*</span>{{ __('Introduction in Chinese') }}</label>
                                    <div class="col-sm-12">
                                        <textarea rows="3" class="form-control" id="descriptionChinese" name="descriptionChinese" required></textarea>
                                    </div>
                                </div>
                            </div>

                            <div class="row mt-10">
                                <div class="col-sm-12">
                                    <label class="col-sm-12"><span class="red">*</span>{{ __('Introduction in English') }}</label>
                                    <div class="col-sm-12">
                                        <textarea rows="3" class="form-control" id="description" name="description" required></textarea>
                                    </div>
                                </div>
                            </div>

                            <div class="row mt-10">
                                <div class="col-sm-6">
                                    <label class="col-sm-12"><span class="red">*</span>{{ __('University Logo') }}</label>
                                    {{--<label for="file" class="ui icon button">--}}
                                        {{--<i class="file icon"></i>--}}
                                        {{--Browse</label>--}}
                                    <div class="col-sm-12">
                                        <input type = "file" class="form-control" name="uniLogo" id="uniLogo" required>
                                    </div>
                                    <div class="col-sm-12 pic">
                                        <img alt="Logo Preview" id="logoPreview" style="width: 300px;height: 200px;">
                                    </div>
                                </div>

                                <div class="col-sm-6">
                                    <label class="col-sm-12"><span class="red">*</span>{{ __('University Photo') }} ({{ __('Large') }})</label>
                                    {{--<label for="file" class="ui icon button">--}}
                                        {{--<i class="file icon"></i>--}}
                                        {{--Browse</label>--}}
                                    <div class="col-sm-12">
                                        <input type="file" class="form-control" id="uniPictureLarge" name="uniPictureLarge" required>
                                    </div>
                                    <div class="col-sm-12 pic">
                                        <img alt="Image Preview" id="imgPreview" style="width: 300px;height: 200px;">
                                    </div>
                                </div>
                            </div>

                            <div class="col-sm-12">
                                <div class="col-sm-6">
                                    <label style="font-size: 16px; color:red;">200*100 within 2MB</label>
                                </div>
                                <div class="col-sm-6">
                                    <label style="font-size: 16px; color:red;">1200*600 within 2MB</label>
                                </div>
                            </div>

                            <div class="row mt-10">
                                <div class="col-sm-12">
                                    <div class="col-sm-2">
                                        <div class="ui primary button form-control" tabindex="0" onclick="storeUniversity()">{{ __('Submit') }} </div>
                                    </div>
                                    <div class="col-sm-2">
                                        <div class="ui primary button form-control" tabindex="0" onclick="lay_close_tab()">{{ __('Return') }} </div>
                                    </div>
                                </div>
							</div>
						</form>
                        <div class="col-sm-12">
                            <label class="red" id="overallValidation"></label>
                        </div>
					</div>
                </div>
		    </div>
        </div>
    </div>
	{{-- Start Confirm Modal --}}
    <div class="modal" tabindex="-1" role="dialog" id="submit_confirmation_modal">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h3 class="modal-title inline">{{ __('Confirm Submit') }}</h3>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" onclick="cancelChange()">{{ __('Cancel') }}</button>
                    <button type="submit" class="btn btn-primary" id="confirmSubmit">{{ __('Confirm') }}</button>
                </div>
            </div>
        </div>
    </div>
	{{-- End Confirm Modal --}}
<script>
    $(function(){
        $('.checkbox').checkbox();
        $("#location").change(function(){
            citySearchFilter();
        });

        $('#universityForm').ajaxForm(function(data){
            parent.triggerDataTableChange('universities');
            lay_close_tab()
        });

        $("#add_course").click(function(){
            var course_html = '<input type="text" style="margin-top: 5px" placeholder="DistinctCourses" name="DistinctCourses[]" class="DistinctCourses form-control">';
            var course_size = $(".DistinctCourses").length;

            if(course_size > 2){
                alert('最多只能添加3个课程');
                return false;
            }

            $("#course_div").append(course_html);
        });
    });
    var validate =  $("#universityForm").validate({});
    function storeUniversity() {
        if($('#uniName').val() != '' && $('#location').val() != '' && $('#city').val() != ''
			&& $('#livingCost').val() != '' && $('#careerProspectus').val() != '' && $('#studentSatisfaction').val() != ''
			&& $('#internationalStudent').val() != '' && $('#minimumIELTS').val() != '' && $('#slogan').val() != '' && $('#recIndex').val() != ''&&
            $('#timesRanking').val() != '' && $('#CUGRanking').val() != ''	&& $('#QSRanking').val() != '' && $('#slogan').val() != '' && $('#description').val() != ''
		    && validate.form()
        )
        {
            $('#overallValidation').empty();
            $('#submit_confirmation_modal').modal('show');
            $('#confirmSubmit').on('click', function () {
                $('#universityForm').submit();
            });
        }
        else
        {
            $('#overallValidation').html('re-check input requirements');
        }
    }

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

    function citySearchFilter() {
        var data = {
            '_token':"{{ csrf_token() }}"
        };
        //filter by location
        data['location'] = [$("#location").val()];

        $.ajax({
            type:'GET',
            url:"{{route('citySearchFilter')}}",
            data:data,
            success:function(data){
                var $cities = data.cities;
                var $locations = data.locations;
                //alert(data.locations);
                //console.log(values);
                var $city = $("#city");
                $city.empty(); // remove old options
                $city.append('<option value="">  Select City</option>');
                for (var a = 0; a < $locations.length; a++) {
                    $city.append('<option disabled value="' + $locations[a].locationName + '">' + $locations[a].locationName + '</option>');
                    for (var i = 0; i < $cities.length; i++) {
                        if($locations[a].locationName == $cities[i].locationName){
                            $city.append('<option value="' + $cities[i].cityID + '">' + $cities[i].cityName + '</option>');
                        }
                    }
                }

                $city.dropdown('restore default text').find('.text').addClass('default');
            }
        });
    }

    var imgPreview = document.getElementById('imgPreview');
    var logoPreview = document.getElementById('logoPreview');
    var logoFilechooser = document.getElementById('uniLogo');
    var imgFilechooser = document.getElementById('uniPictureLarge');
    var maxsize = 200 * 1024;
    logoFilechooser.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) {
                toLogoPreview(result);
                return;
            }
            img.onload = function() {
                var compressedDataUrl = compress(img, file.type);
                toLogoPreview(compressedDataUrl);
                img = null;
            };
            img.src = result;
        };
        reader.readAsDataURL(file);
    };

    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);
                return;
            }
            img.onload = function() {
                var compressedDataUrl = compress(img, file.type);
                toImgPreview(compressedDataUrl);
                img = null;
            };
            img.src = result;
        };
        reader.readAsDataURL(file);
    };

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

    function toLogoPreview(dataUrl) {
        logoPreview.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;
    }
</script>
<script src="{{asset('js/content.js')}}"></script>
@endsection