@extends('layout.ucenter')

@section('css_page_level')
<link rel="stylesheet" type="text/css" href="{{ asset('assets/global/plugins/bootstrap-toastr/toastr.min.css') }}"/>
<link rel="stylesheet" type="text/css" href="{{ asset('assets/global/plugins/bootstrap-select/bootstrap-select.min.css') }}"/>
<link rel="stylesheet" type="text/css" href="{{ asset('assets/global/plugins/bootstrap-fileinput/bootstrap-fileinput.css') }}"/>
<link rel="stylesheet" type="text/css" href="{{ asset('assets/global/plugins/clockface/css/clockface.css') }}"/>
<link rel="stylesheet" type="text/css" href="{{ asset('assets/global/plugins/bootstrap-datepicker/css/bootstrap-datepicker3.min.css') }}"/>
<link rel="stylesheet" type="text/css" href="{{ asset('assets/global/plugins/bootstrap-timepicker/css/bootstrap-timepicker.min.css') }}"/>
<link rel="stylesheet" type="text/css" href="{{ asset('assets/global/plugins/bootstrap-daterangepicker/daterangepicker-bs3.css') }}"/>
<link rel="stylesheet" type="text/css" href="{{ asset('assets/global/plugins/bootstrap-datetimepicker/css/bootstrap-datetimepicker.min.css') }}"/>

<link href="{{ asset('assets/global/css/components-md.css') }}" id="style_components" rel="stylesheet" type="text/css"/>
<link href="{{ asset('assets/global/css/plugins-md.css') }}" rel="stylesheet" type="text/css"/>
<link href="{{ asset('assets/layouts/layout/css/layout.css') }}" rel="stylesheet" type="text/css"/>
<link href="{{ asset('assets/layouts/layout/css/themes/grey.css') }}" rel="stylesheet" type="text/css" id="style_color"/>
<link href="{{ asset('assets/layouts/layout/css/custom.css') }}" rel="stylesheet" type="text/css"/>

<link href="{{ asset('assets/global/plugins/font-awesome/css/font-awesome.min.css') }}" rel="stylesheet" type="text/css"/>
<link href="{{ asset('assets/global/plugins/simple-line-icons/simple-line-icons.min.css') }}" rel="stylesheet" type="text/css"/>
<link href="{{ asset('assets/global/plugins/bootstrap/css/bootstrap.min.css') }}" rel="stylesheet" type="text/css"/>
<link href="{{ asset('assets/global/plugins/uniform/css/uniform.default.css') }}" rel="stylesheet" type="text/css"/>
<link href="{{ asset('assets/global/plugins/bootstrap-switch/css/bootstrap-switch.min.css') }}" rel="stylesheet" type="text/css"/>
{{-- <link href="{{ asset('assets/global/plugins/pace/themes/pace-theme-center-circle.css') }}" rel="stylesheet" /> --}}
<link rel="stylesheet" type="text/css" href="{{ asset('assets/global/plugins/bootstrap-toastr/toastr.min.css') }}"/>
@endsection
@section('page-content')
            <!-- CONTENT -->
            <div class="wrap-fluid" id="paper-bg">
                <div class="row">
                    <div class="col-lg-12">
                        <div class="box">
                            <div class="box-header">
                                <!-- tools box -->
                                <h3 class="box-title"><i class="fontello-basket"></i> 
                                    <span>新增房屋</span>
                                </h3>
                            </div>
                            <!-- /.box-header -->
                            <div class="box-body">
                                 <div class="portlet-body form">
                            <form action="{{ route('website::ucenter::rentsale::rentsale_add_by_user') }}" method="POST" id="form_add_rentsale" class="form-horizontal form-bordered"  enctype="multipart/form-data">
								<div id="form_add_rentsale_error" class="alert alert-danger display-hide">
									<button class="close" data-close="alert"></button>
									您似乎有部分欄位有錯誤，請查看後再送出。
								</div>
								<div id="form_add_rentsale_success" class="alert alert-success display-hide">
									<button class="close" data-close="alert"></button>
									新增成功。
								</div>
								<div class="form-group">
									<label class="col-md-3 control-label">主題<span class="required" aria-required="true"> * </span></label>
									<div class="col-md-6">
										<input name="title" type="text" class="form-control" placeholder="請輸入房屋租售主題">
									</div>
								</div>
								<div class="form-group">
									<label class="col-md-3 control-label">類型<span class="required" aria-required="true"> * </span></label>
									<div class="col-md-6">
										<div class="icheck-inline">
												<label><input name="type" type="radio" class="icheck" data-checkbox="iradio_flat-blue" value="租屋">租屋</label>
												<label><input name="type" type="radio" class="icheck" data-checkbox="iradio_flat-blue" value="租屋">售屋</label>
											</div>
									</div>
								</div>
								<div class="form-group">
									<label class="col-md-3 control-label">費用</label>
									<div class="col-md-6">
										<input name="fee" type="text" class="form-control" placeholder="例如:5000元/月、500萬">
									</div>
								</div>
								<div class="form-group">
									<label class="col-md-3 control-label">押金</label>
									<div class="col-md-6">
										<input name="spawn" type="text" class="form-control" placeholder="例如:1個月、2個月">
									</div>
								</div>
								<div class="form-group">
									<label class="col-md-3 control-label">房屋格局</label>
									<div class="col-md-6">
										<input name="house_pattern" type="text" class="form-control" placeholder="例如:三房兩廳、套房">
									</div>
								</div>
								<div class="form-group">
									<label class="col-md-3 control-label">房屋用途</label>
									<div class="col-md-6">
										<input name="house_use" type="text" class="form-control" placeholder="例如:自住、商辦、工廠">
									</div>
								</div>
								<div class="form-group">
									<label class="col-md-3 control-label">房屋坪數</label>
									<div class="col-md-6">
										<input name="house_footage" type="text" class="form-control" placeholder="例如:45坪">
									</div>
								</div>
								<div class="form-group">
									<label class="col-md-3 control-label">房屋型態</label>
									<div class="col-md-6">
										<input name="house_type" type="text" class="form-control" placeholder="例如:大樓、公寓、華廈、透天">
									</div>
								</div>
								<div class="form-group">
									<label class="col-md-3 control-label">樓層</label>
									<div class="col-md-6">
										<input name="house_floor" type="text" class="form-control" placeholder="例如:3F/20F(所在樓層/總樓層)">
									</div>
								</div>
								<div class="form-group">
									<label class="col-md-3 control-label">經辦者</label>
									<div class="col-md-6">
										<input name="contact_1" type="text" class="form-control" placeholder="例如:陳先生、王小姐">
									</div>
								</div>
								<div class="form-group">
									<label class="col-md-3 control-label">聯絡人</label>
									<div class="col-md-6">
										<input name="contact_2" type="text" class="form-control" placeholder="例如:陳先生、王小姐">
									</div>
								</div>
								<div class="form-group">
									<label class="col-md-3 control-label">Email</label>
									<div class="col-md-6">
										<input name="contact_email" type="text" class="form-control" placeholder="例如:xxx@gmail.com">
									</div>
								</div>
								<div class="form-group">
									<label class="col-md-3 control-label">行動電話</label>
									<div class="col-md-6">
										<input name="contact_phone" type="text" class="form-control" placeholder="例如:0933-111-111">
									</div>
								</div>
								<div class="form-group">
									<label class="col-md-3 control-label">固定電話</label>
									<div class="col-md-6">
										<input name="contact_tel" type="text" class="form-control" placeholder="例如:02-2222-3333">
									</div>
								</div>
								<div class="form-group">
									<label class="col-md-3 control-label">管理方式</label>
									<div class="col-md-6">
										<input name="manage_method" type="text" class="form-control" placeholder="例如:保全、物業、有警衛">
									</div>
								</div>
								<div class="form-group">
									<label class="col-md-3 control-label">車位</label>
									<div class="col-md-6">
										<input name="parking_lot" type="text" class="form-control" placeholder="例如:附帶平面車位2個、機械車位">
									</div>
								</div>
								<div class="form-group">
									<label class="col-md-3 control-label">所屬社區</label>
									<div class="col-md-6">
										<input name="community" type="text" class="form-control" placeholder="例如:帝寶社區、狀元社區">
									</div>
								</div>
								<div class="form-group">
									<label class="col-md-3 control-label">朝向</label>
									<div class="col-md-6">
										<input name="toward" type="text" class="form-control" placeholder="例如:坐南朝北">
									</div>
								</div>
								<div class="form-group">
									<label class="col-md-3 control-label">最短租期</label>
									<div class="col-md-6">
										<input name="short_rent" type="text" class="form-control" placeholder="例如:半年、1個月">
									</div>
								</div>
								<div class="form-group">
									<label class="col-md-3 control-label">開伙</label>
									<div class="col-md-6">
										<input name="can_cook" type="text" class="form-control" placeholder="例如:可、不可、僅限電器類">
									</div>
								</div>
								<div class="form-group">
									<label class="col-md-3 control-label">性別限定</label>
									<div class="col-md-6">
										<input name="require_sexual" type="text" class="form-control" placeholder="例如:限女性、不限">
									</div>
								</div>
								<div class="form-group">
									<label class="col-md-3 control-label">身分限定</label>
									<div class="col-md-6">
										<input name="require_position" type="text" class="form-control" placeholder="例如:上班族、學生、本國人、不限">
									</div>
								</div>
								<div class="form-group">
									<label class="col-md-3 control-label">養寵物</label>
									<div class="col-md-6">
										<input name="can_pet" type="text" class="form-control" placeholder="例如:可、不可">
									</div>
								</div>
								<div class="form-group">
									<label class="col-md-3 control-label">房東同住</label>
									<div class="col-md-6">
										<input name="require_host" type="text" class="form-control" placeholder="例如:需要、不需要">
									</div>
								</div>
								<div class="form-group">
									<label class="col-md-3 control-label">可搬入時間<span class="required" aria-required="true"> * </span></label>
									<div class="col-md-6">
										<div class="input-group date form_datetime">
											<input name="time_movein" type="text" size="16" readonly class="form-control">
											<span class="input-group-btn">
											<button class="btn default date-set" type="button"><i class="fa fa-calendar"></i></button>
											</span>
										</div>
									</div>
								</div>
								<div class="form-group">
									<label class="col-md-3 control-label">地址</label>
									<div class="col-md-6">
										<input name="address" type="text" class="form-control" placeholder="例如:台北市XX區XX路X段X號">
									</div>
								</div>
								<div class="form-group">
									<label class="col-md-3 control-label">生活機能</label>
									<div class="col-md-9">
										<div class="input-group">
											<div class="icheck-inline">
												@foreach($life_function as $one)
												<label><input name="life_function[]" type="checkbox" class="icheck" data-checkbox="icheckbox_flat-purple" value="{{$one}}">{{$one}}</label>
												@endforeach
											</div>
										</div>
									</div>
								</div>
								<div class="form-group">
									<label class="col-md-3 control-label">提供設備</label>
									<div class="col-md-9">
										<div class="input-group">
											<div class="icheck-inline">
												@foreach($offer_facility as $one)
												<label><input name="offer_facility[]" type="checkbox" class="icheck" data-checkbox="icheckbox_flat-green" value="{{$one}}">{{$one}}</label>
												@endforeach
											</div>
										</div>
									</div>
								</div>
								<div class="form-group">
									<label class="col-md-3 control-label">提供家具</label>
									<div class="col-md-9">
										<div class="input-group">
											<div class="icheck-inline">
												@foreach($offer_furniture as $one)
												<label><input name="offer_furniture[]" type="checkbox" class="icheck" data-checkbox="icheckbox_flat-red" value="{{$one}}">{{$one}}</label>
												@endforeach
											</div>
										</div>
									</div>
								</div>
								<div class="form-group">
									<label class="col-md-3 control-label">附近地標</label>
									<div class="col-md-6">
										<input name="building_mark" type="text" class="form-control" placeholder="例如:鄰近XX捷運站、101旁">
									</div>
								</div>
								<div class="form-group">
									<label class="col-md-3 control-label">位置</label>
									<div class="col-md-6">
										<input name="location" type="text" class="form-control" placeholder="用於顯示在Google地圖上">
									</div>
								</div>
								<div class="form-group cover">
									<label class="col-md-3 control-label">房屋封面圖片</label>
									<div class="col-md-4">
										<div class="fileinput fileinput-new" data-provides="fileinput">
											<div class="fileinput-preview thumbnail" data-trigger="fileinput" style="width: 200px; height: 150px;">
												<img src="{{ asset('assets/images/blank_image01.jpg') }}" alt=""/>
											</div>
											<div>
												<span class="btn default btn-file">
												<span class="fileinput-new">
												選擇圖片 </span>
												<span class="fileinput-exists">
												更換 </span>
												<input type="file" name="cover_img" id="cover_img">
												</span>
												<a href="javascript:;" id="cover_reset" class="btn red fileinput-exists" data-dismiss="fileinput">
												移除 </a>
											</div>
										</div>
									</div>
								</div>
								
								<div class="input-cont form-group">
                                   <label class="col-md-3 control-label">房屋圖片上傳</label>
                                    <input name="_token" type="hidden" value="{{csrf_token()}}"/>
								<div class="col-md-6">
                                    <div class="fileinput fileinput-new" data-provides="fileinput">
                                        <div class="fileinput-preview thumbnail" data-trigger="fileinput" style="width: 200px; height: 150px;">
                                            <img src="{{ asset('assets/images/blank_image01.jpg') }}" alt=""/>
                                        </div>
                                        <div>
                                            <span class="btn default btn-file">
                                            <span class="fileinput-new">
                                            選擇圖片 </span>
                                            <span class="fileinput-exists">
                                            更換 </span>
                                            <input type="file" name="image1" id+"image1">
                                            </span>
                                            <a href="javascript:;" class="btn red fileinput" data-dismiss="fileinput">
                                            移除 </a>
                                        </div>
                                     </div>
                                     <div class="fileinput fileinput-new" data-provides="fileinput">
                                        <div class="fileinput-preview thumbnail" data-trigger="fileinput" style="width: 200px; height: 150px;">
                                            <img src="{{ asset('assets/images/blank_image01.jpg') }}" alt=""/>
                                        </div>
                                        <div>
                                            <span class="btn default btn-file">
                                            <span class="fileinput-new">
                                            選擇圖片 </span>
                                            <span class="fileinput-exists">
                                            更換 </span>
                                            <input type="file" name="image2">
                                            </span>
                                            <a href="javascript:;" class="btn red fileinput" data-dismiss="fileinput">
                                            移除 </a>
                                        </div>
                                     </div>
                                     <div class="fileinput fileinput-new" data-provides="fileinput">
                                        <div class="fileinput-preview thumbnail" data-trigger="fileinput" style="width: 200px; height: 150px;">
                                            <img src="{{ asset('assets/images/blank_image01.jpg') }}" alt=""/>
                                        </div>
                                        <div>
                                            <span class="btn default btn-file">
                                            <span class="fileinput-new">
                                            選擇圖片 </span>
                                            <span class="fileinput-exists">
                                            更換 </span>
                                            <input type="file" name="image3">
                                            </span>
                                            <a href="javascript:;" class="btn red fileinput" data-dismiss="fileinput">
                                            移除 </a>
                                        </div>
                                     </div><br>
                                     <div class="fileinput fileinput-new" data-provides="fileinput">
                                        <div class="fileinput-preview thumbnail" data-trigger="fileinput" style="width: 200px; height: 150px;">
                                            <img src="{{ asset('assets/images/blank_image01.jpg') }}" alt=""/>
                                        </div>
                                        <div>
                                            <span class="btn default btn-file">
                                            <span class="fileinput-new">
                                            選擇圖片 </span>
                                            <span class="fileinput-exists">
                                            更換 </span>
                                            <input type="file" name="image4">
                                            </span>
                                            <a href="javascript:;" class="btn red fileinput" data-dismiss="fileinput">
                                            移除 </a>
                                        </div>
                                     </div>
                                     <div class="fileinput fileinput-new" data-provides="fileinput">
                                        <div class="fileinput-preview thumbnail" data-trigger="fileinput" style="width: 200px; height: 150px;">
                                            <img src="{{ asset('assets/images/blank_image01.jpg') }}" alt=""/>
                                        </div>
                                        <div>
                                            <span class="btn default btn-file">
                                            <span class="fileinput-new">
                                            選擇圖片 </span>
                                            <span class="fileinput-exists">
                                            更換 </span>
                                            <input type="file" name="image5">
                                            </span>
                                            <a href="javascript:;" class="btn red fileinput" data-dismiss="fileinput">
                                            移除 </a>
                                        </div>
                                     </div>
								</div>
                                </div>
								
								<div class="form-group file">
									<label class="col-md-3 control-label">附帶檔案</label>
									<div class="col-md-4">
										<div class="fileinput fileinput-new" data-provides="fileinput">
											<div class="input-group input-large">
												<div class="form-control uneditable-input input-fixed input-medium" data-trigger="fileinput">
													<i class="fa fa-file fileinput-exists"></i>&nbsp; <span class="fileinput-filename">
													</span>
												</div>
												<span class="input-group-addon btn default btn-file">
												<span class="fileinput-new">
												選擇檔案 </span>
												<span class="fileinput-exists">
												更換 </span>
												<input type="file" name="file">
												</span>
												<a href="javascript:;" id="file_reset" class="input-group-addon btn red fileinput-exists" data-dismiss="fileinput">
												移除 </a>
											</div>
										</div>
									</div>
								</div>
								<div class="form-group">
									<label class="col-md-3 control-label">安全事項</label>
									<div class="col-md-8">
										<textarea name="safe_note" class="form-control" rows="3"></textarea>
									</div>
								</div>
								<div class="form-group">
									<label class="col-md-2">詳細說明<span class="required" aria-required="true"> * </span></label>
									<div class="col-md-12">
										<textarea name="content" id="content" rows="50" cols="80">
							            </textarea>
									</div>
								</div>
								<div class="form-actions">
									<div class="row">
										<div class="col-md-offset-3 col-md-9">
											<button type="submit" class="btn purple"><i class="fa fa-check"></i> 送出</button>
										</div>
									</div>
								</div>
								<input type="hidden" id="_token" name="_token" value="{{ csrf_token() }}">
							</form>
                        </div>
                                <!-- /.box-body -->
                                
                            </div>
                            <!-- /.box-body -->
                        </div>
                        <!-- /.box -->
                    </div>
                </div>


            </div>
            <!-- #/paper bg -->
@endsection

@section('plugins_page_level')


<script type="text/javascript" src="{{ asset('assets/global/plugins/jquery-validation/js/jquery.validate.min.js') }}"></script>
<script type="text/javascript" src="{{ asset('assets/global/plugins/bootstrap-fileinput/bootstrap-fileinput.js') }}"></script>
<script type="text/javascript" src="{{ asset('assets/global/plugins/bootstrap-fileinput/additional-methods.js') }}"></script>
<script type="text/javascript" src="{{ asset('assets/global/plugins/ckeditor/ckeditor.js') }}"></script>
<script type="text/javascript" src="{{ asset('assets/global/plugins/clockface/js/clockface.js') }}"></script>
<script type="text/javascript" src="{{ asset('assets/global/plugins/bootstrap-datetimepicker/js/bootstrap-datetimepicker.min.js') }}"></script>
<script src="{{ asset('assets/global/plugins/bootstrap-toastr/toastr.min.js') }}" type="text/javascript" ></script>

@endsection

@section('js_page_level')
<script>
$(document).ready(function(){
    CKEDITOR.replace( 'content' );

    $(".form_datetime").datetimepicker({autoclose: true});
    
    //驗證送出表單
    $('#form_add_rentsale').validate({
        errorElement: 'span', //default input error message container
        errorClass: 'help-block help-block-error', // default input error message class
        focusInvalid: false, // do not focus the last invalid input
        ignore: "",  // validate all fields including form hidden input
        rules:{
            title:{
                required:true 
            },
			type:{
				required:true
			},
            product_name:{
                required:true
            },
            cover_img:{
                extension:"jpg|gif",
            },
            file:{
                extension:"pdf"
            }
            
        },
        messages:{
            title:{
                required:'請輸入二手商品主題' 
            },
			type:{
				required:'請點選類型'
			},
            product_name:{
                required:'請輸入商品名稱'
            },
            cover_img:{
                extension: '請使用正確格式 jpg / gif上傳',
            },
            file:{
                extension: '請使用正確格式 pdf 上傳'
            }

        },

        invalidHandler: function (event, validator) { //display error alert on form submit   
            $('#addWebsiteSecondhand_success').hide();
            $('#addWebsiteSecondhand_error').show();
            $(document).scrollTop($('#form_add_secondhand_error'));
        },

        highlight: function (element) { // hightlight error inputs
           $(element)
                .closest('.form-group').addClass('has-error'); // set error class to the control group
        },

        unhighlight: function (element) { // revert the change done by hightlight
            $(element)
                .closest('.form-group').removeClass('has-error'); // set error class to the control group
        },

        success: function (label) {
            label
                .closest('.form-group').removeClass('has-error'); // set success class to the control group
        },

        submitHandler: function (form) {
            $('textarea.ckeditor').each(function () {
               var $textarea = $(this);
               $textarea.val(CKEDITOR.instances[$textarea.attr('name')].getData());
            });
            form.submit();
        },

        errorPlacement: function(error, element) {
            if (element.attr("name") === "cover_img" || element.attr("name") === "file") {
                error.appendTo( element.parent().parent() );
 
            } else {
                error.insertAfter( element );
            }
        },
    });

    $('.fileinput').on('change.bs.fileinput', function() {
            $("#form_add_rentsale").validate().element('input[name=cover_img]');
            $("#form_add_rentsale").validate().element('input[name=file]');   
    });
	

//判斷封面圖檔解析度必須小於640*480

	document.querySelector('#cover_img').addEventListener('change', function () {
    lrz(this.files[0], {
        width: 680
    })
        .then(function (rst) {
            // 处理成功会执行
            //console.log(rst);
            var data = "";
            data = rst.origin.name + ',' + rst.base64 ;
            $('#compressed_cover').val(data);

        })
        .catch(function (err) {
            $('#compressed_cover').val('');
        })
	});

	//封面圖檔格式錯誤時 刪除class (.has-error) 該欄位並不是required
	$('#cover_reset').click(function() {
    	$('.cover_img').fileinput('clear');
    	$("div.cover").removeClass('has-error');
    	$("#upload-error").remove();

	});
	//附件格式錯誤時 刪除class (.has-error) 該欄位並不是required
	$('#file_reset').click(function() {
    	$('.file').fileinput('clear');
    	$("div.file").removeClass('has-error');
    	$("#upload-error").remove();

	});

});
</script>
@endsection