@extends('admin.base')
@section('title', 'Wechat management')
@section('account_content')
	<div class="ui grid">
		<div class="ten wide column">
            <div class ="content">
                <div >
                  <div class="ui left icon action input">
                  <div class="ui horizontal divider"><h3>{{ __('Create WechatGroup') }}</h3></div>
                </div>
                <div class="ui form">
                    <form  class="form-horizontal" method="POST" action="" enctype="multipart/form-data" id="wechatForm">
                        {{ csrf_field() }}
                        <input type="hidden" id="appKey" name="appKey" value="{{$appKey}}">
                        <div class="fields">
                            <div class="labelfield">
                                *{{ __('WechatGroup Name') }}
                            </div>
                            <div class="inputfield">
                                <input type="text" placeholder="wechatgroup_name" id="wechatgroup_name" name="wechatgroup_name" required>
                            </div>
                            <label style="font-size: 16px; margin-left: 20px; margin-top: 25px; margin-bottom: 25px;" id="wechatgroupnameValidation"></label>
                        </div>
                        <div class="fields">
                            <div class="labelfield">*{{__('City')}}</div>
                            <div class="inputfield">
                                <select class="ui search dropdown" name="cities[]" id="city"  autocomplete="off" required>
                                    <option value="">Select City</option>
                                    @if($appKey == 'uni_cn')
                                        @foreach($cities as $key => $value2)
                                            <option value="{{$value2->id}}|{{$value2->cityNameChinese}}">{{$value2->cityNameChinese}}</option>
                                        @endforeach
                                    @else
                                        @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}}">{{$value2->cityName}}</option>
                                                @endif
                                            @endforeach
                                        @endforeach
                                    @endif
                                </select>
                            </div>
                            <label style="font-size: 16px; margin-left: 20px; margin-top: 25px; margin-bottom: 25px;" id="cityValidation"></label>
                        </div>

                        <div class="fields">
                            <div class="labelfield">*{{__('University')}}</div>
                            <div class="inputfield">
                                <select class="ui search dropdown" id="uniNameFilter" name="university_id">
                                    <option value="">Select universities</option>
                                    {{--@foreach($universities as $key=> $value)--}}
                                        {{--<option value="{{$value->uniID}}">{{$value->uniName}}</option>--}}
                                    {{--@endforeach--}}
                                </select>
                            </div>
                        </div>

                        <div class="fields" >
                            <div class="labelfield">
                                *{{ __('WeChat group of sorting') }}
                            </div>
                            <div class="">
                                <input type="text"  width="100px" placeholder="WeChat group of sorting" id="sort" name="sort" required>
                            </div>
                            <label style="font-size: 16px; margin-left: 20px; margin-top: 25px; margin-bottom: 25px;" id="wechatgroupnameValidation"></label>
                        </div>

                        <div class="fields">
                            <div class="labelfield">{{ __('Group Label(s)') }}</div>
                            <div class="inputfield">
                                <input type="text" placeholder="wechat_label" id="wechat_label" name="wechat_label[]" class="wechat_label" >
                            </div>
                            <div class="ui primary button"  id="add_label">+</div>
                        </div>
                        <div class="fields" id="people_number">
                            <div class="labelfield">{{ __('Membership count') }}</div>
                            <div class="inputfield">
                                <input type="text" placeholder="wechatgroup_number" id="wechatgroup_number" name="wechatgroup_number" required>
                            </div>
                            <label style="font-size: 16px; margin-left: 20px; margin-top: 25px; margin-bottom: 25px;" id="numberValidation"></label>
                        </div>
                        <div class="fields">
                            <div class="labelfield">*{{ __('WechatGroup Owner') }}</div>
                            <div class="inputfield">
                                <input type="text" placeholder="wechat_owner" id="wechat_owner" name="wechat_owner" required>
                            </div>
                            <label style="font-size: 16px; margin-left: 20px; margin-top: 25px; margin-bottom: 25px;" id="ownerValidation"></label>
                        </div>

                        <div class="fields">
                            <div class="labelfield">{{ __('Popular Group') }}</div>
                            <div class="inputfield">
                                <div class="ui radio checkbox" style="margin-right: 78px;">
                                    <input name="is_hot" id="noRadio"  type="radio" value="0" checked>
                                    <label for="noRadio">No</label>
                                </div>
                                <div class="ui radio checkbox" >
                                    <input name="is_hot"  id="yesRadio" type="radio" value="1">
                                    <label for="yesRadio">Yes</label>
                                </div>
                            </div>
                        </div>
                        <div class="fields">
                            <div class="labelfield">{{ __('Discussion Topics') }}</div>
                            <div class="inputfield">
                                <input type="text" placeholder="hot_topic"  name="hot_topic[]" class="hot_topic" >
                            </div>
                            <div class="ui primary button"  id="add_topic">+</div>
                        </div>

                        <div class="fields" id="desc_div">
                            <div class="labelfield">*{{ __('Wechat Desc') }}</div>
                            <div class="inputfield">
                                <textarea rows="8" id="wechat_desc" name="wechat_desc" required></textarea>
                            </div>
                        </div>

                        <div>
                            <div class="ui primary button" tabindex="0" onclick="storeWechat()">{{ __('Submit') }} </div>
                            <div class="ui primary button" tabindex="0" onclick="location.href='{{route('admin-wechat-list')}}'">{{ __('Return') }} </div>
                        </div>
                    </form>
                </div>
                    <label style="font-size: 16px; color:red; margin-left: 20px; margin-top: 25px; margin-bottom: 25px;" id="overallValidation"></label>
                </div>
            </div>
        </div>
    </div>
	{{-- Start Confirm Modal --}}
	<div class="ui tiny modal" id="submit_confirmation_modal">
		<div class="header">
			{{ __('Confirm Submit') }}
		</div>
		<div class="actions">
			<div class="ui grey deny button" onclick="cancelSubmit()">
				{{ __('Cancel') }}
			</div>
			<button type="submit" class="ui yellow submit button" id="confirmSubmit"> {{ __('Confirm') }}</button>
		</div>
	</div>
	{{-- End Confirm Modal --}}
    <script src="{{ asset('semanticui/components/dropdown.js' ) }}"></script>
    <script>
        $(".label").click(function () {
            if($(this).parent().find("input").length>=3) {
                alert('最多添加3个标签');
                return false;
            }
          $input = $(this).next().clone();
          $(this).parent().append($input);
        });
        $("#city").change(function(){
//            universityNamesSearchFilter();
//            searchFilter(1);

            $.getJSON('',{cityId:$(this).val()},function (data) {

                $uniNameFilter = $("#uniNameFilter");
                $uniNameFilter.children().remove();
                $uniNameFilter.dropdown('clear');
                $str =" <option value=''>Select universities</option>";
//                console.log(data);
                if(data.error==0 ){
                    $.each(data.data,function (k,v) {
                        $str+="<option value="+v.uniID+">"+v.uniName+"</option>";
                    });

                    $uniNameFilter.append($str);
                }
            });

            $("#city").dropdown('hide');

        });
        $("#add_label").click(function(){

            var wechat_input = '<div class="fields"><div class="labelfield"></div>';
                wechat_input += '<div class="inputfield">';
                wechat_input += '<input type="text" placeholder="wechat_label" id="wechat_label" name="wechat_label[]" class="wechat_label" >';
                wechat_input += '</div>';
                wechat_input += '</div>';
            var wechat_label_size = $(".wechat_label").length;
            if(wechat_label_size>3){
                alert('最多只能添加3个标签');
                return false;
            }
            $("#people_number").before(wechat_input);
        });
        $("#add_topic").click(function(){
            var topic_html = '';
                topic_html += '<div class="fields"><div class="labelfield"></div>';
                topic_html += '<div class="inputfield">';
                topic_html += '<input type="text" placeholder="hot_topic" name="hot_topic[]" class="hot_topic" >';
                topic_html += '</div>';
                topic_html += '</div>';
            var topic_size = $(".hot_topic").length;
            if(topic_size>2){
                alert('最多只能添加3个标签');
                return false;
            }
            $("#desc_div").before(topic_html);
        });
        $('#weChatContainer').addClass('active');
        $('#wechat1').addClass('active');
    </script>
    <script>
        function storeWechat() {
            if($('#wechatgroup_name').val() == '' || $('#city').val() == '' || $('#wechat_owner').val() == '' || $('#wechat_desc').val() == '' || $('#university_id').val() == 0) {
                $('#overallValidation').html('re-check input requirements');
                return false;
            }
            var wechatgroup_number = parseInt($('#wechatgroup_number').val());
            if(isNaN(wechatgroup_number)){
                alert("群人数必须是数字");
                return false;
            }
            var wechat_label = new Array();
            $.each($(".wechat_label"), function () {
                wechat_label.push($(this).val());
            });
            if($('#wechat_desc').val().length >200){
                alert("群介绍不能超过200字");
                return false;
            }
            // if($('#wechat_notice').val().length >500){
            //     alert("群公告不能超过500字");
            //     return false;
            // }
            $sort = $('#sort').val();
            if($sort.length <=0){
                alert("排序不能为空");
                return false;
            }
            var regPos = /^\d+(\.\d+)?$/; //非负浮点数
            if(!regPos.test($sort)){
                alert("排序非数字");
                return false;
            }
            $('#overallValidation').empty();
            $('#submit_confirmation_modal').modal('show');
            $('#confirmSubmit').on('click', function () {
                $('#wechatForm').submit();
            });
        }
        function cancelSubmit () {
            $('#submit_confirmation_modal').modal('hide');
        }
        function citySearchFilter() {
            var data = {
                '_token': "{{ csrf_token() }}"
            };
            //filter by location
            var locationValues = new Array();
            $.each($("input[name='location[]']:checked"), function () {
                locationValues.push($(this).val());
            });
            data['location'] = locationValues;
            $.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
                    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>');
                        }
                    }
                }
            });
        }
        // var imgPreview = document.getElementById('imgPreview');
        // var imgFilechooser = document.getElementById('wechatQR');
        // 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);
        //             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 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;
        }


        // var groupLogoPreview = document.getElementById('groupLogoPreview');
        // var groupLogoFilechooser = document.getElementById('groupLogo');
        // var maxsize = 500 * 500;
        // groupLogoFilechooser.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) {
        //             togroupLogoPreview(result);
        //             return;
        //         }
        //         img.onload = function() {
        //             var compressedDataUrl = compress(img, file.type);
        //             togroupLogoPreview(compressedDataUrl);
        //             img = null;
        //         };
        //         img.src = result;
        //     };
        //     reader.readAsDataURL(file);
        // }
        // function togroupLogoPreview(dataUrl) {
        //     groupLogoPreview.src = dataUrl;
        // }
    </script>
@endsection

@section('breadcrumbs')
    <a href="{{route('admin-landing')}}">Backend Management</a><i class="right angle icon divider"></i><a href="{{route('admin-wechat-list')}}">WeChat Groups List</a><i class="right angle icon divider"></i><span>Add WeChat Group</span>
@endsection