@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="col-sm-12">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <h5>{{ __('Edit 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">
                        <div>
                            <div class="ui">
                                <form class="form-horizontal" method="post" action="{{route('updateUniversity', ['ID'=>$university[0]->id])}}" enctype="multipart/form-data" id="universityForm">
                                    {{ csrf_field() }}
                                    <div class="row">
                                        <div class="col-sm-6">
                                            <div class="row">
                                                <div class="col-sm-6">
                                                    <label class="col-sm-12"><span class="red">*</span>{{ __('University Name in Chinese') }}</label>
                                                    <div class="col-sm-12">
                                                        <input type="text" value="{{$university[0]->uniNameChinese}}" class="form-control" placeholder="University Name in Chinese" name="uniNameChinese" id="uniNameChinese" required>
                                                    </div>
                                                </div>
                                                <div class="col-sm-6">
                                                    <label class="col-sm-12"><span class="red">*</span>{{ __('University Name in English') }}</label>
                                                    <div class="col-sm-12">
                                                        <input type="text" value="{{$university[0]->uniName}}" class="form-control" placeholder="University Name in English" name="uniName" id="uniName" required>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-sm-6">
                                            <div class="row">
                                                <div class="col-sm-6">
                                                    <label class="col-sm-12">{{ __('Search Term English') }}</label>
                                                    <div class="col-sm-12">
                                                        <input type="text" value="{{$university[0]->searchTermEnglish}}" class="form-control" placeholder="Search Term English" name="searchTermEnglish" id="searchTermEnglish">
                                                    </div>
                                                </div>
                                                <div class="col-sm-6">
                                                    <label class="col-sm-12">{{ __('Search Term Chinese') }}</label>
                                                    <div class="col-sm-12">
                                                        <input type="text" value="{{$university[0]->searchTermChinese}}" class="form-control" placeholder="Search Term Chinese" name="searchTermChinese" id="searchTermChinese">
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                    {{--TODO: replace chinese text--}}
                                    <div class="fields" style="display: none;">
                                        <div class="inline fields" style="margin: 0 10px">
                                            <div class="ui checkbox" style="margin-right:20px;width: 160px">
                                                <input type="checkbox" id="lightning" name="lightning[check]" @if($university[0]->lightning == 1) checked @endif tabindex="0">
                                                <label>闪电保障</label>
                                            </div>
                                            <label  style="margin-right:5px;width:100px">收费金额</label>
                                            <div class="ui mini icon input">
                                                <input class="lightning" type="text" name="lightning[charge][GBP]" @if($university[0]->lightning == 1) value="{{$university[0]->lightningDetails->charge->GBP}}" @endif placeholder="请输入金额" style="padding-right: 0.671429em !important;">
                                            </div>
                                            <label style="margin:0 5px">磅</label>
                                            <div class="ui mini icon input">
                                                <input class="lightning" type="text" name="lightning[charge][CNY]" @if($university[0]->lightning == 1) value="{{$university[0]->lightningDetails->charge->CNY}}" @endif placeholder="请输入金额" style="padding-right: 0.671429em !important;">
                                            </div>
                                            <label style="margin:0 5px">元</label>

                                            <label  style="margin-left:17px;margin-right:5px;width:100px">赔付金额</label>
                                            <div class="ui mini icon input">
                                                <input class="lightning" type="text" name="lightning[compensate][GBP]" @if($university[0]->lightning == 1) value="{{$university[0]->lightningDetails->compensate->GBP}}" @endif placeholder="请输入金额" style="padding-right: 0.671429em !important;">
                                            </div>
                                            <label style="margin:0 5px">磅</label>
                                            <div class="ui mini icon input">
                                                <input class="lightning" type="text" name="lightning[compensate][CNY]" @if($university[0]->lightning == 1) value="{{$university[0]->lightningDetails->compensate->CNY}}" @endif placeholder="请输入金额" style="padding-right: 0.671429em !important;">
                                            </div>
                                            <label style="margin:0 5px">元</label>
                                        </div>
                                    </div>
                                    <div class="fields" style="display: none;">
                                        <div class="inline fields" style="margin: 0 10px">
                                            <div class="ui checkbox" style="margin-right:20px;width: 200px">
                                                <input type="checkbox" id="VIPCAS" name="VIPCAS[check]"  @if($university[0]->VIPCAS == 1) checked @endif tabindex="0" >
                                                <label>VIPCAS保障</label>
                                            </div>
                                            <label  style="margin-right:5px;width:100px">收费金额</label>
                                            <div class="ui mini icon input">
                                                <input class="VIPCAS" type="text" name="VIPCAS[charge][GBP]" @if($university[0]->VIPCAS == 1) value="{{$university[0]->VIPCASDetails->charge->GBP}}" @endif placeholder="请输入金额" style="padding-right: 0.671429em !important;">
                                            </div>
                                            <label style="margin:0 5px">磅</label>
                                            <div class="ui mini icon input">
                                                <input class="VIPCAS" type="text" name="VIPCAS[charge][CNY]" @if($university[0]->VIPCAS == 1) value="{{$university[0]->VIPCASDetails->charge->CNY}}" @endif placeholder="请输入金额" style="padding-right: 0.671429em !important;">
                                            </div>
                                            <label style="margin:0 5px">元</label>

                                            <label  style="margin-left:17px;margin-right:5px;width:100px">赔付金额</label>
                                            <div class="ui mini icon input">
                                                <input class="VIPCAS" type="text" name="VIPCAS[compensate][GBP]" @if($university[0]->VIPCAS == 1) value="{{$university[0]->VIPCASDetails->compensate->GBP}}" @endif placeholder="请输入金额" style="padding-right: 0.671429em !important;">
                                            </div>
                                            <label style="margin:0 5px">磅</label>
                                            <div class="ui mini icon input">
                                                <input class="VIPCAS" type="text" name="VIPCAS[compensate][CNY]" @if($university[0]->VIPCAS == 1) value="{{$university[0]->VIPCASDetails->compensate->CNY}}" @endif placeholder="请输入金额" style="padding-right: 0.671429em !important;">
                                            </div>
                                            <label style="margin:0 5px">元</label>
                                        </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)
                                                        @if($university[0]->locationID==$value1->locationID)
                                                            <option value="{{$value1->locationID}}" selected>{{$value1->locationName}}</option>
                                                        @else
                                                            <option value="{{$value1->locationID}}">{{$value1->locationName}}</option>
                                                        @endif
                                                    @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)
                                                                @if($university[0]->cityID == $value2->cityID)
                                                                    <option value="{{$value2->cityID}}" selected>{{$value2->cityName}}</option>
                                                                @else
                                                                    <option value="{{$value2->cityID}}">{{$value2->cityName}}</option>
                                                                @endif
                                                            @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" value="{{$university[0]->recommendationIndex}}" min="0" class="form-control"placeholder="Recommendation Index" name="recIndex" id="recIndex" required>
                                            </div>
                                        </div>
                                        {{--<div class="field">--}}
                                        {{--<label>{{ __('Average Tuition') }}*</label>--}}
                                        {{--<input type="text" value="{{$university[0]->averageTuitionFee}}" placeholder="Average Tuition" name="averageTuitionFee" id="averageTuitionFee" required>--}}
                                        {{--</div>--}}
                                        <div class="col-sm-1 mt-10">
                                            <div class="ui checkbox">
                                                <input type="checkbox" id="thirdPartyStatus" name="thirdPartyStatus" value="checked" @if(isset($university[0]->thirdPartyStatus) && $university[0]->thirdPartyStatus == 1) checked @endif>
                                                <label>UCAS Fees</label>
                                            </div>
                                        </div>

                                        <div class="col-sm-1 mt-10">
                                            <div class="ui checkbox">
                                                <label>Partnership Status</label>
                                                <input type="checkbox" id="isPartner" name="isPartner" value="checked" @if(isset($university[0]->is_partner) && $university[0]->is_partner == 1) checked @endif>
                                            </div>
                                        </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" value="{{$university[0]->livingCost}}" 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" value="{{$university[0]->careerProspectus}}" 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" value="{{$university[0]->studentSatisfaction}}" placeholder="Student Satisfaction" name="studentSatisfaction" id="studentSatisfaction" required>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row mt-10">
                                        <div class="col-sm-6">
                                            <div class="row">
                                                <div class="col-sm-6">
                                                    <label class="col-sm-12"><span class="red">*</span>{{ __('International Student Rate') }}</label>
                                                    <div class="col-sm-12">
                                                        <input type="text" class="form-control" value="{{$university[0]->internationalStudent}}" placeholder="International Student Rate" name="internationalStudent" id="internationalStudent" required>
                                                    </div>
                                                </div>
                                                <div class="col-sm-6">
                                                    <label class="col-sm-12"><span class="red">*</span>{{ __('Minimum 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>
                                        </div>
                                        <div class="col-sm-6">
                                            <div class=" col-sm-6">
                                                <label class="col-sm-12"><span class="red">*</span>{{ __('Maximum IELTS Requirenent') }}</label>
                                                <div class="col-sm-12">
                                                    <select class="ui search dropdown form-control" id="maximumIELTS" name="maximumIELTS" 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-6">
                                                <label class="col-sm-12"><span class="red">*</span>{{ __('Slogan') }}</label>
                                                <div class="col-sm-12">
                                                    <input type="text" class="form-control" value="{{$university[0]->slogan}}" placeholder="Slogan" name="slogan" id="slogan" required>
                                                </div>
                                            </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') }} {{__('Enter 0 for unranked university')}}</label>
                                            <div class="col-sm-12">
                                                <input type="text" class="form-control" value="{{$university[0]->timesRanking}}" placeholder="Times UK Ranking" name="timesRanking" id="timesRanking" required>
                                            </div>
                                        </div>
                                        <div class="col-sm-4">
                                            <label class="col-sm-12"><span class="red">*</span>{{ __('CUG UK Ranking') }}  {{__('Enter 0 for unranked university')}}</label>
                                            <div class="col-sm-12">
                                                <input type="text" class="form-control" value="{{$university[0]->CUGRanking}}"  placeholder="CUG UK Ranking" id="CUGRanking" name="CUGRanking" required>
                                            </div>
                                        </div>
                                        <div class="col-sm-4">
                                            <label class="col-sm-12"><span class="red">*</span>{{ __('QS World Ranking') }}  {{__('Enter 0 for unranked university')}}</label>
                                            <div class="col-sm-12">
                                                <input type="text" class="form-control" value="{{$university[0]->QSRanking}}"  placeholder="QS World Ranking" id="QSRanking" name="QSRanking" required>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row mt-10">
                                        <div class="col-sm-12 mt-10">
                                            <label class="col-sm-12">{{ __('Distinction Courses') }}<button id="add_course">+</button></label>
                                            <div class="col-sm-12" id="course_div">
                                            @if(!empty(json_decode($university[0]->distinct_courses)))
                                                @foreach (json_decode($university[0]->distinct_courses) as $val)
                                                    <input type="text" value="{{$val}}" style="margin-top: 5px" placeholder="DistinctCourses" name="DistinctCourses[]" class="DistinctCourses form-control">
                                                @endforeach
                                            @else
                                                <input type="text" style="margin-top: 5px" placeholder="DistinctCourses" name="DistinctCourses[]" class="DistinctCourses form-control">
                                            @endif
                                           </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> {{$university[0]->descriptionChinese}} </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>{{$university[0]->description}}</textarea>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row mt-10">
                                        <div class="col-sm-6">
                                            <label class="col-sm-12">{{ __('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 pb-10" name="uniLogo" id="uniLogo">
                                            </div>
                                            <div class="col-sm-12 pic">
                                                <img alt="Logo Preview" id="logoPreview" src="{{config('locations.universityImage.asset').$university[0]->uniLogo}}?x-oss-process=image/resize,m_lfit,h_100,w_100" style="width: 300px;height: 200px;">
                                            </div>
                                        </div>
                                        <div class="col-sm-6">
                                            <label class="col-sm-12">{{ __('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 pb-10" id="uniPictureLarge" name="uniPictureLarge">
                                            </div>
                                            <div class="col-sm-12 pic">
                                                <img alt="Image Preview" id="imgPreview" src="{{config('locations.universityImage.asset').$university[0]->uniPictureLarge}}?x-oss-process=image/resize,m_lfit,h_100,w_100" 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 mt-10">
                                            <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>
                            <div class="col-sm-12">
                                <label class="red" id="overallValidation"></label>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="ui grid">
        <div class="two wide column"></div>
        <div class="twelve wide column">
            <div class ="content">
            </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="cancelSubmit()">{{ __('Cancel') }}</button>
                    <button type="button" class="btn btn-primary" id="confirmSubmit">{{ __('Confirm') }}</button>
                </div>
            </div>
        </div>
    </div>
    {{-- End Confirm Modal --}}

    <script>
        $(function(){
            $('.checkbox').checkbox();
            $('#courseAndUniversity, #university').addClass('active');
            $('#minimumIELTS').val('{{$university[0]->minimumIELTS}}');
            $('#maximumIELTS').val('{{$university[0]->maximumIELTS}}');
            // $('#universityForm').ajaxForm(function(){
            //     parent.triggerDataTableChange('universities');
            //     lay_close_tab();
            // });
        });

        var validate =  $("#universityForm").validate({});
        function storeUniversity() {
            if($('#uniName').val() != '' && $('#location').val() != '' && $('#city').val() != ''
                && $('#livingCost').val() != '' && $('#careerProspectus').val() != '' && $('#studentSatisfaction').val() != ''
                && $('#internationalStudent').val() != '' && $('#minimumIELTS').val() != '' && $('#maximumIELTS').val() != '' && $('#slogan').val() != '' && $('#recIndex').val() != ''&&
                $('#timesRanking').val() != '' && $('#CUGRanking').val() != ''	&& $('#QSRanking').val() != '' && $('#slogan').val() != '' && $('#description').val() != ''
                && validate.form()
            )
            {
                var commit = true;
                var vipcas = $('#VIPCAS').get(0).checked;
                if(vipcas == true){
                    $('.VIPCAS').each(function(){
                        if($(this).val() == ''){
                            alert('VIPCAS保障信息输入不完整');
                            commit = false;
                            return false;
                        }
                    })
                }

                var lightning = $('#lightning').get(0).checked;
                if(lightning == true){
                    $('.lightning').each(function(){
                        if($(this).val() == ''){
                            alert('极速保障信息输入不完整');
                            commit = false;
                            return false;
                        }
                    })
                }

                if(commit == false){
                    return false;
                }

                $('#overallValidation').empty();
                $('#submit_confirmation_modal').modal('show');
                $('#confirmSubmit').on('click', function () {
                    // $('#universityForm').submit();
                    var formData = new FormData($('#universityForm')[0]);
                    formData.append("_token", "{{ csrf_token() }}");
                    dynamicAjaxFormData('{{route('updateUniversity',['ID'=>$university[0]->id])}}', formData, 'submitSuccess', 0);
                });
            }
            else
            {
                $('#overallValidation').html('re-check input requirements');
            }
        }

        function submitSuccess() {
            $('#submit_confirmation_modal').modal('hide');
            parent.triggerDataTableChange('universities');
            lay_close_tab();
        }

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

        function citySearchFilter() {
            var data = {
                '_token':"{{ csrf_token() }}"
            };
            //filter by location
            var locationValue = new Array();
            locationValue.push($("#location").val());
            data['location'] = locationValue;
            $.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');
                }
            });
        }
        $("#location").change(function(){
            citySearchFilter();
        });
        $("#add_course").click(function(){
            var course_html = '<input type="text" style="margin-top: 5px" placeholder="DistinctCourses" name="DistinctCourses[]" class="DistinctCourses form-control" required>';
            var course_size = $(".DistinctCourses").length;
            if(course_size>2){
                alert('最多只能添加3个课程');
                return false;
            }
            $("#course_div").append(course_html);
        });

        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