@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="{{  action("FrontController@secondhand_update")  }}" method="POST" id="form_edit_secondhand" class="form-horizontal form-bordered"  enctype="multipart/form-data">
								<input type="hidden" name="_token" value="{{ csrf_token() }}">
								<input type="hidden" name="id" value="{{ $secondhand->id }}">
								<div id="form_edit_secondhand_error" class="alert alert-danger display-hide">
									<button class="close" data-close="alert"></button>
									您似乎有部分欄位有錯誤，請查看後再送出。
								</div>
								<div id="form_edit_secondhand_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="請輸入二手商品主題" value="{{$secondhand->title}}">
									</div>
								</div>
								<div class="form-group">
									<label class="col-md-3 control-label">商品價格</label>
									<div class="col-md-6">
										<input name="price" type="text" class="form-control" placeholder="例如:3600元" value="{{$secondhand->price}}">
									</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">
										<input name="product_name" type="text" class="form-control" placeholder="例如:60吋液晶螢幕" value="{{$secondhand->product_name}}">
									</div>
								</div>
								<div class="form-group">
									<label class="col-md-3 control-label">物品類型</label>
									<div class="col-md-6">
										<input name="product_type" type="text" class="form-control" placeholder="例如:3C、電子零件" value="{{$secondhand->product_type}}">
									</div>
								</div>
								<div class="form-group">
									<label class="col-md-3 control-label">聯絡人</label>
									<div class="col-md-6">
										<input name="contact" type="text" class="form-control" placeholder="例如:陳先生、王小姐" value="{{$secondhand->contact_2}}">
									</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" value="{{$secondhand->contact_email}}">
									</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" value="{{$secondhand->contact_phone}}">
									</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" value="{{$secondhand->contact_tel}}">
									</div>
								</div>
								<div class="form-group">
									<label class="col-md-3 control-label">取貨地址</label>
									<div class="col-md-6">
										<input name="get_address" type="text" class="form-control" placeholder="例如:例如:台北市XX區XX路X段X號" value="{{$secondhand->get_address}}">
									</div>
								</div>
								<div class="form-group">
									<label class="col-md-3 control-label">取貨時間</label>
									<div class="col-md-6">
										<div class="input-group date form_datetime">
											<input name="get_time" type="text" size="16" readonly class="form-control" value="{{$secondhand->get_time}}">
											<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="get_method" type="text" class="form-control" placeholder="例如:自取、宅配、7-11取貨" value="{{$secondhand->get_method}}">
									</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地圖上" value="{{$secondhand->location}}">
									</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 cover_img" data-provides="fileinput">
											<div class="fileinput-preview thumbnail" data-trigger="fileinput" style="width: 200px; height: 150px;">
												@if($secondhand->cover_img != '')
												<img src="{{$secondhand->cover_img}}" alt=""/>
												@else
												<img src="{{ asset('assets/images/blank_image01.jpg') }}" alt=""/>
												@endif
											</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">
												<input type="hidden" name="compressed_cover" id="compressed_cover" value="">
												</span>
												<a href="javascript:;" class="btn red fileinput-exists" data-dismiss="fileinput" id="cover_reset">移除 </a>
											</div>
										</div>
									</div>
								</div>
								<div class="input-cont form-group" align="center">
                                   <label class="col-md-3 control-label">圖片上傳</label>
                                    <input name="_token" type="hidden" value="{{csrf_token()}}"/>
                                    <div class="col-md-3 fileinput fileinput-new" data-provides="fileinput">
                                        <div class="fileinput-preview thumbnail" data-trigger="fileinput" style="width: 200px; height: 150px;">
											@if($secondhand->image1 != '')
											<img src="{{$secondhand->image1}}" alt=""/>
											@else
                                            <img src="{{ asset('assets/images/blank_image01.jpg') }}" alt=""/>
                                            @endif
                                        </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="col-md-3 fileinput fileinput-new" data-provides="fileinput">
                                        <div class="fileinput-preview thumbnail" data-trigger="fileinput" style="width: 200px; height: 150px;">
											@if($secondhand->image2 != '')
											<img src="{{$secondhand->image2}}" alt=""/>
											@else
                                            <img src="{{ asset('assets/images/blank_image01.jpg') }}" alt=""/>
                                            @endif
                                        </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="col-md-3 fileinput fileinput-new" data-provides="fileinput">
                                        <div class="fileinput-preview thumbnail" data-trigger="fileinput" style="width: 200px; height: 150px;">
											@if($secondhand->image3 != '')
											<img src="{{$secondhand->image3}}" alt=""/>
											@else
                                            <img src="{{ asset('assets/images/blank_image01.jpg') }}" alt=""/>
                                            @endif
                                        </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="col-md-3 col-md-offset-3 fileinput fileinput-new" data-provides="fileinput">
                                        <div class="fileinput-preview thumbnail" data-trigger="fileinput" style="width: 200px; height: 150px;">
											@if($secondhand->image4 != '')
											<img src="{{$secondhand->image4}}" alt=""/>
											@else
											<img src="{{ asset('assets/images/blank_image01.jpg') }}" alt=""/>
											@endif
                                        </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="col-md-3 fileinput fileinput-new" data-provides="fileinput">
                                        <div class="fileinput-preview thumbnail" data-trigger="fileinput" style="width: 200px; height: 150px;">
											@if($secondhand->image5 != '')
											<img src="{{$secondhand->image5}}" alt=""/>
											@else
                                            <img src="{{ asset('assets/images/blank_image01.jpg') }}" alt=""/>
                                            @endif
                                        </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 class="form-group file">
									<label class="col-md-3 control-label">附帶檔案</label>
									<div class="col-md-4">
										<p>
											@if($secondhand->file != NULL)
												<a class="btn green btn-xs" href="{{$secondhand->file }}">{{$original_filename}}</a>
											@endif
										</p>
										<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">
											{{$secondhand->content}}
										</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">
										{{$secondhand->content}}
							            </textarea>
									</div>
								</div>
								<div class="form-actions pull-right">
									<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_edit_secondhand').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 
			},
			product_name:{
				required:true
			},
			cover_img:{
				extension:"jpg|gif"
			},
			file:{
				extension:"pdf"
			}
			
		},
		messages:{
			title:{
				required:'請輸入二手商品主題' 
			},
			product_name:{
                required:'請輸入商品名稱'
            },

			cover_img:{
				extension: '請使用正確格式 jpg / gif'
			},
			file:{
				extension: '請使用正確格式 pdf 上傳'
			}

		},

        invalidHandler: function (event, validator) { //display error alert on form submit   
            $('#form_edit_secondhand_success').hide();
            $('#form_edit_secondhand_error').show();
            $(document).scrollTop($('#form_edit_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_edit_secondhand").validate().element('input[name=cover_img]');
			$("#form_edit_secondhand").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