@extends('Myadmin::layout.basic')

@section('header')
<script src="{{ App::make("myadmin")->asset('/ckeditor/ckeditor.js') }}"></script>
<script src="../../js/bootstrap-datetimepicker.min.js" type="text/javascript"></script>
<link rel="stylesheet" href="{{asset('css/bootstrap-datetimepicker.min.css')}}" />
@stop

@section('content')
<style type="text/css" media="screen">
    img#preview{
        width:150px;
        height:150px;
        padding:2px;
        border:1px solid #000;
    }
	.btn-my{  
		background: #006633;
		width: 100px;  
		height: 100px;  
		-moz-border-radius: 50%;  
		-webkit-border-radius: 50%;  
		border-radius: 50%;  
	}  
	.btn-my:hover {  
        background: #BFEC3E;   
        color:#e75616;  
    }  
</style>
<div>
    {{ Form::open(array(
        'action'=>$_CONST["CONTROLLER_ROUTE"].'.store',
        'class'=>'form-horizontal well',
        'files' => true
    ))}}

	@if ($errors->has('model_num'))
		<div class="alert alert-warning" role="alert">請輸入產品序號</div>
	@endif
	@if ($errors->has('title_tw'))
		<div class="alert alert-warning" role="alert">請輸入產品中文名稱</div>
	@endif
	@if ($errors->has('title_en'))
		<div class="alert alert-warning" role="alert">請輸入產品英文名稱</div>
	@endif
	@if ($errors->has('description_tw'))
		<div class="alert alert-warning" role="alert">請輸入產品中文描述</div>
	@endif
	@if ($errors->has('description_en'))
		<div class="alert alert-warning" role="alert">請輸入產品英文描述</div>
	@endif
	@if ($errors->has('price'))
		<div class="alert alert-warning" role="alert">請輸入產品價格</div>
	@endif

{{--				
	@if ($errors->has())
	    @foreach ($errors->all() as $error)
	    	<div class="alert alert-warning" role="alert">{{{ $error }}}</div>
        @endforeach				
	@endif
--}}

    <div class="form-group ">
		<label class="col-sm-2 control-label">商品分類</label>
		<div class="col-sm-10">
			{{ Form::select('category_id', $option, '', array('class' => 'form-control'))}}
		</div>
    </div>
    <div class="form-group ">
        <label class="col-sm-2 control-label">發佈</label>
        <div class="col-sm-10">
        	<div class="col-sm-1">    {{ Form::radio('publish', '1' )}}是 </div>
 	       <div class="col-sm-1">    {{ Form::radio('publish', '0', true )}}否 </div>
        </div>
    </div>
    <div class="form-group ">
        <label class="col-sm-2 control-label">商品編號</label>
        <div class="col-sm-10">
            {{ Form::text('model_num', null, array('class' => 'form-control'))}}
        </div>
    </div>    
    <div class="form-group ">
        <label class="col-sm-2 control-label">商品名稱(中文)</label>
        <div class="col-sm-10">
            {{ Form::text('title_tw', null, array('class' => 'form-control'))}}
        </div>
    </div>

    <div class="form-group ">
        <label class="col-sm-2 control-label">商品描述</label>
        <div class="col-sm-10">
            {{ Form::textarea('description_tw', null, array('class' => 'input-xxlarge form-control ckeditor'))}}		   
    	</div>
    </div>

    <div class="form-group ">
        <label class="col-sm-2 control-label">Product Name</label>
        <div class="col-sm-10">
            {{ Form::text('title_en', null, array('class' => 'form-control'))}}
        </div>
    </div>    

    <div class="form-group ">
        <label class="col-sm-2 control-label">Product Description</label>
        <div class="col-sm-10">
            {{ Form::textarea('description_en', null, array('class' => 'input-xxlarge form-control ckeditor'))}}		   
    	</div>
    </div>
    <hr>

{{--    
    <div class="form-group ">
        <label class="col-sm-2 control-label">品牌</label>
        <div class="col-sm-10">
			{{ Form::select('subheading', $brands, '', array('class' => 'form-control')) }}
        </div>
    </div>
    <div class="form-group ">
        <label class="col-sm-2 control-label">商品規格</label>
        <div class="col-sm-10">
            {{ Form::text('format', 'red / S', array('class' => 'form-control'))}}
        </div>
    </div>
    <div class="form-group ">
        <label class="col-sm-2 control-label">類別1(optional)</label>
        <div class="col-sm-2">
            {{ Form::text('tag_1', '', array('class' => 'form-control'))}}
        </div>
        <label class="col-sm-2 control-label">類別2(optional)</label>
        <div class="col-sm-2">
            {{ Form::text('tag_2', '', array('class' => 'form-control'))}}
        </div>
        <label class="col-sm-2 control-label">類別3(optional)</label>
        <div class="col-sm-2">
            {{ Form::text('tag_3', '', array('class' => 'form-control'))}}
        </div>
    </div>
--}}
    <div class="form-group ">
        <label class="col-sm-2 control-label">價格</label>
        <div class="col-sm-10">
            {{ Form::number('price', null, array('class' => 'form-control'))}}
        </div>
    </div>

{{--    
    <div class="form-group ">
        <label class="col-sm-2 control-label">特價</label>
        <div class="col-sm-10">
            {{ Form::number('selling_price', null, array('class' => 'form-control'))}}
        </div>
    </div>

    <div class="form-group">
        <label class="col-sm-2 control-label">官網連結</label>
        <div class="col-sm-10">
            {{ Form::text('official_url', null, array('class' => 'form-control'))}}
        </div>
    </div>

    <div class="form-group" id="close">
        <label class="col-sm-2 control-label">上架時間</label>
		<div id="datetimepicker" class="col-sm-3 input-append date">  
    		<input type="text" name="start_date"></input>  
	        <span class="glyphicon glyphicon-calendar add-on btn" data-time-icon="icon-time" data-date-icon="icon-calendar"></span>  
    	</div>  
    </div>


	<div id="update_shop">
    <div class="form-group ">
        <label class="col-sm-2 control-label">上架店名</label>
        <div class="col-sm-10">
			<a style="margin-top:10px" data-toggle="modal" data-target="#snModal">
				{{ Form::text('shop_name' , null , array('class' => 'form-control') ) }}
			</a>
        </div>
        <div class="col-sm-10" style="display:none">
			<a style="margin-top:10px">
				{{ Form::text('shops_id' , null , array('class' => 'form-control') ) }}
			</a>
        </div>
    </div>
	</div>
--}}

		<hr>
	<div id="update_pic">

    <div class="form-group" id="pic0">
        <label class="col-sm-2 control-label">大圖上傳區</label>
        <div class="col-sm-2">
			<input name="cover" type="file" onchange="loadFile(event)">		
            <img style="width:250px;height:150px" id = "img_show" class="preview image" src="{{ App::make("myadmin")->asset('images/photoshop.jpg') }}">
        </div>
<hr>
{{--
		<div class="col-sm-4">
			名稱 : 
			{{Form::text('img_title_tw[]', null, array('class' => 'form-control'))}}
			描述 : 
			{{Form::textarea('img_description_tw[]', null, array('class' => 'input-xlarge form-control' , 'style' => 'height:60px'))}}
		</div>
		<div class="col-sm-4">
			Name : 
			{{Form::text('img_title_en[]', null, array('class' => 'form-control'))}}
			Description : 
			{{Form::textarea('img_description_en[]', null, array('class' => 'input-xlarge form-control' , 'style' => 'height:60px'))}}
		</div>
--}}
	</div>

	</div>
	<button type="button" id="btnplus" class="btn btn-my glyphicon glyphicon-plus" style="margin-left:50%">圖片上傳</button>
	<hr>



    <div class="form-group">
        <label class="col-sm-2 control-label"></label>
        <div class="col-sm-10">
        	<a href="{{{ action('admin.product.index')}}}" class="btn btn-success">
            	<span class="glyphicon glyphicon-arrow-left"></span>
		            {{{ trans($_CONST["LANG_DEST"].".turn_back")}}}
        	</a>
            <input type="submit" name="" value="新增產品" class="btn btn-primary"  />
        </div>
    </div>
    {{ Form::close()}}

{{--
	<!-- Modal -->
	<div id="snModal" class="modal fade" role="dialog">
		<div class="modal-dialog">
		<!-- Modal content-->
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal">&times;</button>
					<h4 class="modal-title">店家</h4>
				</div>
				<div class="modal-body">
					@foreach ($shopname as $shop)
						@if($shop == "全選")
							{{ Form::checkbox('shopname', $shop , false, ['onClick' => 'checkall()']) }} 
							{{ $shop }} &nbsp&nbsp&nbsp
						@else
							{{ Form::checkbox('shopname', $shop , false) }} 
							{{ $shop }} &nbsp&nbsp&nbsp
						@endif	
					@endforeach
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-default" data-dismiss="modal" id="shopclose">確定</button>
				</div>
			</div>
		</div>
	</div>

	<!-- Modal -->
	<div id="wsModal" class="modal fade" role="dialog">
		<div class="modal-dialog">
		<!-- Modal content-->
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal">&times;</button>
					<h4 class="modal-title">區域</h4>
				</div>
				<div class="wsmodal-body">
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-default" data-dismiss="modal">確定</button>
				</div>
			</div>
		</div>
	</div>
--}}

</div>

<script type="text/javascript">
	$(function() {
		$("#datetimepicker").datetimepicker({
			language: 'en',
			pickTime: true,
			pickDate: true,
			format: 'yyyy-MM-dd hh:mm:ss',
		});
	});
</script>
<script type="text/javascript" charset="utf-8">
	$(document).ready(function(){
		var count_pic = 1;
		var count_shop = 0;

		/* adding images. */
		$("#btnplus").click(function(){
			//console.log("test");
			var str = '<div class="form-group id="pic'+count_pic+'"><label class="col-sm-2 control-label">圖片上傳'+count_pic+' <button type="button" id="btnminus'+count_pic+'" class="btn btn-my glyphicon glyphicon-minus"></button> </label> <div class="col-sm-2"> <input name="image[]" type="file" onchange="readURL(this, '+count_pic+');"> <img style="width:150px;height:150px" class="preview image'+count_pic+'" src="{{ App::make("myadmin")->asset('images/photoshop.jpg') }}"> </div> <hr><div class="col-sm-4">名稱 : <input class="form-control" name="img_title_tw[]" type="text">描述 : <textarea class="form-control" name="img_description_tw[]" style="height:60px"></textarea> </div><div class="col-sm-4">Name : <input class="form-control" name="img_title_en[]" type="text">Description : <textarea class="form-control" name="img_description_en[]" style="height:60px"></textarea> </div> </div> ';
   
			$("#update_pic").append(str);
			count_pic++;
			$(".glyphicon-minus").click(function(){
				if ( confirm('是否刪除此圖片?') )
					$(this).parent().parent().remove();
			});
		});

		/* choosing shops. */
	{{--	var optarr = {{$address}};--}}
//		console.log(optarr);
		var shopid = [];
		$("input[name=shopname]").on('click', function(){
			console.log($(this).val());
			if($(this).val() == "全選")
				shopid = [];
			$(".wsmodal-body").empty();
			if($(this).is(":checked")){
				var str = "<input type='checkbox' name='shopregion' value='全選' onclick=checklist() >全選&nbsp&nbsp&nbsp</input>";
				for(var i=0 ; i<optarr.length ; i++){
					if($(this).val() == optarr[i]['name']){
						str += "<input type='checkbox' name='shopregion' value=" + optarr[i]['region'] + " data-id=" + optarr[i]['id'] + ">"+ optarr[i]['region'] +"&nbsp&nbsp&nbsp</input>";
					}
					if($(this).val() == "全選")
						shopid.push(optarr[i]['id']);
				}

				if($(this).val() == "全選"){
					$("input[name=shops_id]").val(shopid);	
				}
				else{
					$(".wsmodal-body").append(str);
					$("#wsModal").modal('show');
				}
			}
			else{
				shopid = [];
				if($(this).val() == "全選"){
					$("input[name=shops_id]").val(shopid);	
				}
				else{
					$("input[value=全選]").prop("checked", false);
					for(var i=0 ; i<optarr.length ; i++){
						if($("input[value=" + optarr[i]['name'] + "]").is(":checked")){
							shopid.push(optarr[i]['id']);
						}
					}
					$("input[name=shops_id]").val(shopid);	
				}
			}

				$("input[name=shopregion]").on('click', function(){
					if($(this).is(":checked")){
						if($(this).val() == "全選"){
							var dataList = $("input[name=shopregion]").parent('div').children('input[data-id]').map(function() {
								shopid.push($(this).data("id"));
								return $(this).data("id");
							}).get();
						}
						else
							shopid.push($(this).data("id"));
					}
					else if($(this).is(":checked") == false){
						$("input[value=全選]").prop("checked", false);
						if($(this).val() == "全選"){
							var dataList = $("input[name=shopregion]").parent('div').children('input[data-id]').map(function() {
								var index = shopid.indexOf($(this).data("id"));
								if(index > -1)
									shopid.splice(index, 1);
								return $(this).data("id");
							}).get();
						}
						else{
							var index = shopid.indexOf($(this).data("id"));
							if(index > -1)
								shopid.splice(index, 1);
						}
					}
					var unique = shopid.filter(function(itm, i, shopid){
						return i==shopid.indexOf(itm);
					});
//					console.log(shopid);
//					console.log(unique);
					shopid = unique;
					$("input[name=shops_id]").val(unique);
				});
		});
		/* transform shop id to shop name. */
		$("#shopclose").click(function(){
			if($("input[name=shops_id]").val()){
				var shopid = $("input[name=shops_id]").val().split(",");
				var str = "";
				console.log(shopid);
				for(var i = 0 ; i<shopid.length ; i++){
					for(var j = 0 ; j<optarr.length ; j++){
						if(optarr[j]['id'] == shopid[i]){
							$("input[value=" + optarr[j]['name'] + "]").prop('checked', true);
							str += optarr[j]['name']+"-"+optarr[j]['region']+" , ";
							break;
						}
					}
				}
				$("input[name=shop_name]").val(str);
			}
		});

	});

		function checkall(){
			if($("input[value=全選]").is(":checked") == true)
				$("input[name=shopname]").prop('checked', true);
			else			
				$("input[name=shopname]").prop('checked', false);
		};

		function checklist(){
			if($("input[value=全選]").is(":checked") == true)
				$("input[name=shopregion]").prop('checked', true);
			else
				$("input[name=shopregion]").prop('checked', false);
		}
		
		function readURL(input, num) {
			console.log("aa");
			console.log(num);
			if (input.files && input.files[0]) {
				var reader = new FileReader();

				reader.onload = function (e) {
					$('.image'+num).attr('src', e.target.result);
				}
				reader.readAsDataURL(input.files[0]);
			}
		}
	var loadFile = function(event){
		var reader = new FileReader();
		reader.onload = function(){
			var output = document.getElementById('img_show');
			output.src = reader.result;		
		};
	reader.readAsDataURL(event.target.files[0]);
	}; 		
</script>


@stop

@section('js-snippet')
    @include('Myadmin::js.preview', array('bind' => 'input[name=image]','target' => '.preview'))
    @include('Myadmin::js.ckeditor', array(
        'target' => 'origin_content',
    ))
@stop