<link href="<?php echo asset_url('css/fileinput.min.css')?>" media="all" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="<?php echo asset_url('js/fileinput.min.js') ?>"></script>
<script type="text/javascript" src="<?php echo asset_url('js/fileinput_locale_zh.js') ?>"></script>

<style type="text/css">
.form-group{width: 60%}
#container_map{height: 300px}
.file-footer-buttons button{display: none}
.file-drop-disabled{clear: both;}
.cursor{overflow: visible; position: absolute; z-index: 1000;  cursor: url("http://api.map.baidu.com/library/MarkerTool/1.2/src/images/transparent.cur"), default;}
</style>
<link rel="stylesheet" href="http://cache.amap.com/lbs/static/main1119.css"/>
<script src="http://cache.amap.com/lbs/static/es5.min.js"></script>
<script src="http://webapi.amap.com/maps?v=1.3&key=93cd0129276159ec3ff4c38a8831492a&plugin=AMap.Geocoder"></script>




<div class="col-md-10" role="main" id="bnb">
		<nav class="breadcrumb"></i> 五折卡模块<span class="c-gray en">&gt;</span>商家管理</nav>
		<div class="xgsj_wbox">
			    <div class="title-box" style="border:0;padding: 20px 0px;">
			        <p class="t-p" style="width: 500px;display: inline-block;">新增商家</p>
			        <button type="button" onclick="javascript:history.go(-1)" class="sjxg_fh" data-dismiss="modal" style="margin-top:8px;">返回</button>
			    </div>
				<div class="bs-example">
					<form action="<?php echo site_url('admin/shop/store')?>" method="post" class="registerForm regiswidth" enctype="multipart/form-data">
						<input name='loc' type="hidden" value="">
						<div class="form-group">
							<span class="dianm sjxg_tle_span">*店名：</span>
							<div class="examp">
								<input type="text" maxlength="15"  class="form-control" name="shopname" >
				            	<div class="lr_ts" style="float:none;margin: 10px 0px;">
			                         <img src="<?php echo asset_url('images/tips.png');?>" alt="" style="width: 14px;">
			                         <span style="font-size:12px;">提示：请输入不超过15个汉字含符号。</span>
                				</div>
				        	</div>
			        	</div>
			        	<div class="form-group">
				        	<span class="dianm sjxg_tle_span">*标题：</span>
				            <div class="examp">
				            	<input type="text" maxlength="20" name="title"  class="form-control">
				            	<div class="lr_ts" style="float:none;margin: 10px 0px;">
			                         <img src="<?php echo asset_url('images/tips.png');?>" alt="" style="width: 14px;">
			                         <span style="font-size:12px;">提示：请输入店铺优惠标题，不超过20个汉字符号。</span>
                				</div>
				        	</div>
			        	</div>
			        	<div class="form-group">
				        	<span class="dianm sjxg_tle_span">*登录密码：</span>
				            <div class="examp">
				            	<input type="password" name="password1"  class="form-control" >
				            	<div class="lr_ts" style="float:none;margin: 10px 0px;">
			                         <img src="<?php echo asset_url('images/tips.png');?>" alt="" style="width: 14px;">
			                         <span style="font-size:12px;">提示：密码为6-18位。</span>
	            				</div>
				        	</div>
			        	</div>
			        	<div class="form-group">
				        	<span class="dianm sjxg_tle_span">*确认密码：</span>
				            <div class="examp">
				            	<input type="password"  name="password2"  class="form-control">
				            	<div class="lr_ts" style="float:none;margin: 10px 0px;">
			                         <img src="<?php echo asset_url('images/tips.png');?>" alt="" style="width: 14px;">
			                         <span style="font-size:12px;">提示：请再次输入密码。</span>
                				</div>
				        	</div>
			        	</div>
			        	<div class="form-group form-phone">
					        <span class="dianm sjxg_tle_span">*商家电话：</span>
				            <div class="examp">
				            	<div class="qusq_in_box">
									<input vid="0" type="text"  name="phone[0]" required data-bv-notempty-message="电话号码不能为空" placeholder="0517-88532778" maxlength="13">
									<div class="qusq_in_btn qusq_in_add"> <img src="<?php echo asset_url('images/lALORKum1Cgo_40_40.png');?>">
							        </div>
								</div>

				            	<div class="lr_ts" style="float:none;margin: 10px 0px;">
			                         <img src="<?php echo asset_url('images/tips.png');?>" alt="" style="width: 14px;">
			                         <span style="font-size:12px;">提示：最多填写5个电话号码。</span>
                				</div>
				            </div>
			       		</div>
			       		<div class="form-group" >
				            <span class="dianm sjxg_tle_span">*地址：</span>
				            <div class="examp">
				            	<input type="text" name="address"  maxlength="20" class="form-control">

				            	<div id="container_map"></div>

				            	<div class="lr_ts" style="float:none;margin: 10px 0px;">
			                         <img src="<?php echo asset_url('images/tips.png');?>" alt="" style="width: 14px;">
			                         <span style="font-size:12px;">提示：请输入不超过20个汉字符号。如果地图地址显示不准确，单击地图重新标示。</span>
                				</div>
				        	</div>
			        	</div>
			        	<div class="form-group">
				        	<span class="jianjie sjxg_tle_span">*简介：</span>
				            <div class="examp">
				            	<textarea name="shop_des" class="form-control" id="shoptext" cols="30" maxlength="30" rows="3"></textarea>

				            	<div class="lr_ts" style="float:none;margin: 10px 0px;">
			                         <img src="<?php echo asset_url('images/tips.png');?>" alt="" style="width: 14px;">
			                         <span style="font-size:12px;">提示：请输入店铺普通优惠简介，不超过30个汉字符号。</span>
                				</div>
				            </div>
			        	</div>
			        	<div class="form-group"  style="padding-bottom:15px">
				            <span class="classification jianjie sjxg_tle_span">*商家分类：</span>
				            <div class="examp">
		            	<select name="category" class="selectmr" style="width:108px" name="country" data-bv-notempty data-bv-notempty-message="请选择一项" >
				            <option value="">请选择分类</option>
				            <option value="1" >经典美食</option>
				            <option value="2">休闲娱乐</option>
				            <option value="3">其他</option>
			            </select>

				            </div>
			        	</div>
		                <div class="form-group">
		                    <span class="classification jianjie sjxg_tle_span">区域/商圈：</span>
		                    <div class="examp">
		                        <select name="aid" class="selectmr sjxg_selt"  style="width:108px" data-bv-notempty data-bv-notempty-message="请选择一项" >
		                            <option value="0">全部</option>
		                        <?php foreach ($areaInfo  as $v):?>
		                           <option value="<?php echo $v['id'];?>" ><?php echo $v['area_name'];?></option>
                        		<?php endforeach;?>
		                        </select>
		                    </div>
		                </div>
			        	<div class="form-group form-group2">
				            <span class="smallimg jianjie sjxg_tle_span">*商家小图：</span>
				            <div class="examp" id="small_container">
				            	<p class="shaopupload sjxg_img_btn">
				            		<input type="file" name="avatar" id="small" multiple="" class="brefile">
					            	<div class="lr_ts" style="float:none;margin: 10px 0px;">
				                         <img src="<?php echo asset_url('images/tips.png');?>" alt="" style="width: 14px;">
				                         <span style="font-size:12px;">提示：商家列表展示图片，请上传202*148像素的图片。</span>
                					</div>
				            	</p>
				            </div>
			        	</div>
			        	<div class="form-group form-group2" style="width:60%">
				            <span class="cover jianjie sjxg_tle_span">*商家封面：</span>
				            <div class="examp" id="pic_container">
				            	<p class="shaopupload shaopupload1 sjxg_img_btn">
				            		<input type="file" name="avatar" id="pic" multiple="" class="brefile">
				            		<div class="lr_ts" style="float:none;margin: 10px 0px;">
				                         <img src="<?php echo asset_url('images/tips.png');?>" alt="" style="width: 14px;">
				                         <span style="font-size:12px;">商家详情头部图片，请上传720*403像素的图片，最多上传5张图片。</span>
                					</div>
				            	</p>

				            </div>

			        	</div>
			        	<div class="form-group form-group2" style="width:60%" id="message_container">
				            <span class="cover jianjie sjxg_tle_span">*详情图：</span>
				            <div class="examp">
				            	<p class="shaopupload shaopupload1 sjxg_img_btn">
				            		<input type="file" name="avatar" id="message_pic" multiple="" class="brefile">

					            	<div class="lr_ts" style="float:none;margin: 10px 0px;">
				                         <img src="<?php echo asset_url('images/tips.png');?>" alt="" style="width: 14px;">
				                         <span style="font-size:12px;">商家详情内容图片，请上传小于宽度670像素的图片，最多上传5张图片。</span>
                					</div>
				            	</p>
				            </div>
			        	</div>
			        	<div class="form-group form-group2" style="width:60%">
			            <span class="rule jianjie sjxg_tle_span">*商家详情及使用规则：</span>
			            <div class="examp">
			            	<textarea class="form-control" style="height:180px" id="summernote" name="message" cols="60"></textarea>

			            	<div class="lr_ts" style="float:none;margin: 10px 0px;">
				                         <img src="<?php echo asset_url('images/tips.png');?>" alt="" style="width: 14px;">
				                         <span style="font-size:12px;">请输入商家的优惠详细内容及优惠使用时间、用法等详细规则。</span>
                			</div>
			            </div>
			            </div>
			            <button class="edit_btn" id="save" type="submit">保存修改</button>


		            </form>
		        </div>
        </div>
	</div>

	<script type="text/javascript">
		$(function(){
			// 添加电话
			var addnum=1;

			$(document).on('click', '.qusq_in_add', function(event) {
				var phonenum = $(".qusq_in_box").last().children('input').attr('vid');
				phonenum = parseInt(phonenum) +1;
				if(addnum<5){
					var bqs='<div class="qusq_in_box"><input type="text" name="phone['+phonenum+']" vid="'+phonenum+'" required data-bv-notempty-message="电话号码不能为空" maxlength="13" placeholder="0517-88532778"><div class="qusq_in_btn qusq_ad_btn qusq_in_add"><img src="<?php echo asset_url("images/lALORKum1Cgo_40_40.png");?>"></div></div>';
					$(this).parent().after(bqs);
					$(this).find('img').attr('src','<?php echo asset_url("images/lajitong.png");?>');
					$(this).removeClass('qusq_in_add');
					$(this).addClass('qusq_in_off');
					addnum=addnum+1;

                    $('.registerForm').bootstrapValidator('addField', 'phone[' + phonenum + ']', tel_valid)
				}
			})

			$(document).on('click', '.qusq_in_off', function(event) {
				$(this).parent().remove();
				addnum=addnum-1;
			})

		})
	</script>

<script type="text/javascript">

function init_upload(target, min, max, name,mode){

	var ele = $(target);
	ele.fileinput({
		minFileCount : min,
		dropZoneEnabled : false,
		maxFileCount : max,
		validateInitialCount: true,
    	deleteUrl : '<?php echo site_url('admin/shop/de');?>',
		uploadUrl : '<?php echo site_url('admin/shop/upload');?>'+'/'+mode,
		language: "zh",
		showUpload : false,
		previewSettings : {
		    image: {width: "130px", height: "auto"},
		    html: {width: "213px", height: "160px"},
		    text: {width: "160px", height: "136px"},
		    video: {width: "213px", height: "160px"},
		    audio: {width: "213px", height: "80px"},
		    flash: {width: "213px", height: "160px"},
		    object: {width: "213px", height: "160px"},
		    other: {width: "160px", height: "160px"}
		}

	});


	ele.on('fileuploaded', function(event, data, previewId, index){

		var input = '<input type="hidden" value="'+data.response.url+'" name="'+name+'"/>'
		$(input).appendTo('form');
	});

	ele.on('filebatchselected', function(event, files, extra) {

			$("#save").attr('disabled', false);
	});



	ele.on('fileclear', function(event) {
        $("input[name='"+name+"']").remove();
    });


    $('#input-id').on('filesuccessremove', function(event, id) {
   		console.log(id)
	});
	$('#input-id').on('filedeleted', function(event, key) {
    	console.log('Key = ' + key);
	});
}



function bd_decrypt( bd_lat,  bd_lon)
{
    x = bd_lon - 0.0065, y = bd_lat - 0.006;
    z = Math.sqrt(x * x + y * y) - 0.00002 * Math.sin(y * x_pi);
    theta = Math.atan2(y, x) - 0.000003 * Math.cos(x * x_pi);

    gg_lon = z * Math.cos(theta);
    gg_lat = z * Math.sin(theta);
    console.log('d');
}


$(function(){
	init_upload('#pic', 1, 5, 'pics[]','pic')
	init_upload('#small', 1, 1, 'small_pics[]','small_pics')
	init_upload('#message_pic', 1, 5, 'message_pics[]','message_pics')


	$('#small').on('filebatchuploadcomplete', function(event, files, extra) {
			$('#pic').fileinput('upload');
	});


	$('#pic').on('filebatchuploadcomplete', function(event, files, extra) {
    		$('#message_pic').fileinput('upload');
	});


  var map = new AMap.Map('container_map', {
        resizeEnable: true,
        zoom:15
    });






    map.on('click', function(e) {
    	console.log(e.lnglat.getLng(), e.lnglat.getLat())
    	addMarker(e.lnglat.getLng(), e.lnglat.getLat())
   });


    $("input[name='address']").focusout(function(){
		var address = $(this).val();

		if(address == ''){
			return false;
		}

		 var geocoder = new AMap.Geocoder({});
		geocoder.getLocation(address, function(status, result) {
            if (status === 'complete' && result.info === 'OK') {
            	var geocodes = result.geocodes
            	geocode = geocodes[0];
            	console.log(geocode.location.getLng(),geocode.location.getLat())
            	addMarker(geocode.location.getLng(),geocode.location.getLat())
            	map.setFitView();

            }
        });
	})








    var marker = null;
	function addMarker(x, y){
		if(marker){
    		marker.setMap(null);
    	}
		marker = new AMap.Marker({
			icon: "http://webapi.amap.com/theme/v1.3/markers/n/mark_b.png",
			position: [x, y]
		});
        marker.setMap(map);
        // 设置label标签
	    marker.setLabel({//label默认蓝框白底左上角显示，样式className为：amap-marker-label
	        offset: new AMap.Pixel(20, -20),//修改label相对于maker的位置
	        content: $("input[name='shopname']").val()
	    });

	    $("input[name='loc']").val(x+','+y)

	}










})
var tel_valid = {
            message: '电话号码不能为空',
            validators: {
                notEmpty: {
                    message: '电话号码不能为空',
                    container: '.qusq_in_box'
                },
                regexp: {
                    regexp: /(^(0|86|17951)?(13[0-9]|15[012356789]|17[678]|18[0-9]|14[57])[0-9]{8}$)|(^(\d{3,4}|\d{3,4}-|\s)?\d{8}$)/i,
                    message: '电话号码不正确',

                }
            },
            group : '.qusq_in_box',
        };
    var tel_index = 0;
$(function(){

	$('.registerForm').bootstrapValidator({
        message: 'This value is not valid',
        feedbackIcons: {
            valid: 'glyphicon glyphicon-ok',
            invalid: 'glyphicon glyphicon-remove',
            validating: 'glyphicon glyphicon-refresh',
            excluded : ':disabled'
        },


        fields: {

        	shopname: {
                message: '商家名称无效',
                validators: {
                    notEmpty: {
                        message: '商家名不能是空的'
                    },
                    stringLength: {
                        max: 15,
                        message: '商家名不能大于15个字符'
                    }
                }
            },
            password1: {
                message: '密码无效',
                validators: {
                    notEmpty: {
                        message: '密码不能是空的'
                    },
                    stringLength: {
                    	min: 6,
                        max: 18,
                        message: '密码必须6-18位字符'
                    }
                }
            },
            password2: {
                message: '密码无效',
                validators: {
                    notEmpty: {
                        message: '密码不能是空的'
                    },
                    identical: {
                        field: 'password1',
                        message: '密码不相等'
                    }
                }
            },
            'phone[0]': tel_valid,
            address: {
                message: '地址无效',
                validators: {
                    notEmpty: {
                        message: '地址不能为空'
                    },
                    stringLength: {
                        max: 20,
                        message: '地址必须小于20字符'
                    }
                }
            },
            shop_des: {
                message: '商家简介无效',
                validators: {
                    notEmpty: {
                        message: '商家简介不能为空'
                    },
                    stringLength: {
                        max: 30,
                        message: '商家简介必须小于30字符'
                    }
                }
            },
            title  : {
                message: '标题无效',
                validators: {
                    notEmpty: {
                        message: '标题不能为空'
                    },
                    stringLength: {
                        max: 20,
                        message: '标题必须小于20字符'
                    }
                }
            },
            message :{
               message: '规则不能为空',
               validators: {
                    notEmpty: {
                        message: '规则不能为空'
                    }
                }
            }
        }
    })
	.on('success.form.bv',function(e){
			e.preventDefault();
            $('textarea').each(function() {
                replace = $(this).val();

                replace=replace.replace(/\n/g,'<br/>');
                $(this).val(replace);

            });
			var small_num = $('#small_container').find('.file-preview-thumbnails .file-preview-frame').length;
			var pic_num = $('#pic_container').find('.file-preview-thumbnails .file-preview-frame').length;
			var message_num = $('#message_container').find('.file-preview-thumbnails .file-preview-frame').length;



			var loc = $("input[name='loc']").val();

			if(loc == ''){
				alert('未能自动识别地址，请在地图上标注');
				return false;
			}
			if(small_num < 1){
				alert('请上传商家小图');
				window.location.href = '#small_container'
				return false;
			}


			if(pic_num < 1){
				alert('请上传商家封面');
				window.location.href = '#pic_container'
				return false;
			}

			if(message_num < 1){
				alert('请上传详情图');
				window.location.href = '#message_container'
				return false;
			}

			var form = this;
			e.preventDefault();


			$('#message_pic').on('filebatchuploadcomplete', function(event, files, extra) {
    			form.submit();
			});



			$('#small').fileinput('upload');

	})

})

</script>


