@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>{{ __('Edit 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" value="{{$wechat_info->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)
                                            @if(in_array($value2->id,$wechat_info->city_ids))
                                                <option selected value="{{$value2->id}}|{{$value2->cityNameChinese}}">{{$value2->cityNameChinese}}</option>
                                            @else
                                                <option value="{{$value2->id}}|{{$value2->cityNameChinese}}">{{$value2->cityNameChinese}}</option>
                                            @endif
                                            
                                        @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)
                                                    @if(in_array($value2->cityID,$wechat_info->city_ids))
                                                        <option selected value="{{$value2->cityID}}|{{$value2->cityName}}" >{{$value2->cityName}}</option>
                                                    @else
                                                        <option value="{{$value2->cityID}}|{{$value2->cityName}}" >{{$value2->cityName}}</option>
                                                    @endif
                                                @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">
                                    @foreach($universities as $key=> $value)
                                        @if($value->uniID==$wechat_info->uni_id)
                                            <option selected value="{{$value->uniID}}">{{$value->uniName}}</option>
                                        @else
                                            <option value="{{$value->uniID}}">{{$value->uniName}}</option>
                                        @endif
                                    @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" value="{{$wechat_info->sort}}" required>
                            </div>
                            <label style="font-size: 16px; margin-left: 20px; margin-top: 25px; margin-bottom: 25px;" id="wechatgroupnameValidation"></label>
                        </div>
                        
                        @if(!empty(json_decode($wechat_info->title)))
                            @foreach (json_decode($wechat_info->title) as $key=>$val)
                                @if($key==0)
                                    <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[]" value="{{$val}}" class="wechat_label" >
                                        </div>
                                        <div class="ui primary button"  id="add_label">+</div>
                                    </div>
                                @else
                                    <div class="fields">
                                        <div class="labelfield"></div>
                                        <div class="inputfield">
                                            <input type="text" placeholder="wechat_label" id="wechat_label" name="wechat_label[]" value="{{$val}}" class="wechat_label" >
                                        </div>
                                    </div>
                                @endif
                            @endforeach
                        @else
                            <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[]" value="" class="wechat_label" >
                                </div>
                                <div class="ui primary button"  id="add_label">+</div>
                            </div>
                        @endif

                        <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" value="{{$wechat_info->groupSize}}" 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" value="{{$wechat_info->groupOwner}}" 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" {{$wechat_info->is_hot==0 ? 'checked' : ''}}>
                                    <label for="noRadio">否</label>
                                </div>
                                <div class="ui radio checkbox" >
                                    <input name="is_hot" id="yesRadio"  type="radio" value="1" {{$wechat_info->is_hot==1 ? 'checked' : ''}}>
                                    <label for="yesRadio">是</label>
                                </div>
                            </div>
                        </div>

                            @if(!empty(json_decode($wechat_info->hot_topic)))
                                @foreach (json_decode($wechat_info->hot_topic) as $key=>$val)
                                <div class="fields">
                                    @if($key == 0)
                                    <div class="labelfield">{{ __('Discussion Topics') }}</div>
                                    @else
                                    <div class="labelfield"></div>
                                    @endif
                                    <div class="inputfield">
                                        <input type="text" placeholder="hot_topic"  value="{{$val}}" name="hot_topic[]" class="hot_topic" >
                                    </div>
                                @if($key == 0)
                                <div class="ui primary button"  id="add_topic">+</div>
                                @endif
                                </div>
                                @endforeach

                            @else
                            <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>
                        @endif


                        <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>{{$wechat_info->groupDescription}}</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('/admin/wechat/wechat_add',{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>2){
                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() == '') {
                $('#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;
            // }
            $('#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 = 500 * 500;
        // 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>Edit WeChat Group</span>
@endsection