@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@addWebsiteSecondhand") }}" method="POST" id="addWebsiteSecondhand" class="form-horizontal form-bordered"  enctype="multipart/form-data">
                                <div id="addWebsiteSecondhand" class="alert alert-danger display-hide">
                                    <button class="close" data-close="alert"></button>
                                    您似乎有部分欄位有錯誤，請查看後再送出。
                                </div>
                                <div id="addWebsiteSecondhand" 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">商品價格</label>
                                    <div class="col-md-6">
                                        <input name="price" type="text" class="form-control" placeholder="例如:3600元">
                                    </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吋液晶螢幕">
                                    </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、電子零件">
                                    </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="例如:陳先生、王小姐">
                                    </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="get_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-6">
                                        <div class="input-group date form_datetime">
                                            <input name="get_time" 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="get_method" type="text" class="form-control" placeholder="例如:自取、宅配、7-11取貨">
                                    </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 cover_img" 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">
                                                <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="form-group input-cont" 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;">
                                            <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="col-md-3 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="col-md-3 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>
                                     <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;">
                                            <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="col-md-3 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><br>

                                </div>
                                <div class="form-group file">
                                    <label class="col-md-3 control-label pull-left">附帶檔案</label>
                                    <div class="col-md-3">
                                        <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});
    
    //驗證送出表單
    $('#addWebsiteSecondhand').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   
            $('#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() {
            $("#addWebsiteSecondhand").validate().element('input[name=cover_img]');
            $("#addWebsiteSecondhand").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