@extends('layouts.main')
@section('content')

<link media="screen" rel="stylesheet" type="text/css" href="{{ asset('css/handsontable.full.css') }}">
<link media="screen" rel="stylesheet" type="text/css" href="{{ asset('css/handsontable.formula.css') }}">
<script type="text/javascript" src="{{ asset('js/handsontable.full.js') }}"></script>
<script type="text/javascript" src="{{ asset('js/handsontable.formula.js') }}"></script>
<script type="text/javascript" src="{{ asset('js/ruleJS.all.full.js') }}"></script>
<script type="text/javascript" src='{{ asset('js/jquery.autoKana.js') }}'></script>

<script type="text/javascript">
    $(document).ready(
        function() {               
            $.fn.autoKana('#itemname', '#itemnamek', {
                katakana : true  //true：カタカナ、false：ひらがな（デフォルト）
        });
    });
</script>

<script type="text/javascript">
	jQuery(document).ready(function(){
	   jQuery("#createform").validationEngine();
	});

	/**
	* @param {jqObject} the field where the validation applies
	* @param {Array[String]} validation rules for this field
	* @param {int} rule index
	* @param {Map} form options
	* @return an error string if validation failed
	*/
	function checkLtNumHifn(field, rules, i, options){
		if ( !field.val().match( /^[0-9a-zA-Z\-]+$/ ) ) {
			// un match
			return "* 半角英数 記号(-)で入力してください";
		}
	}

	function checkKatakana(field, rules, i, options){
		if ( !field.val().match( /^[ァ-ヺー]+$/ ) ) {
			// un match
			return "* 全角カタカナで入力してください";
		}
	}

</script>

<div class="container">
    {{ Form::open([ 'url' => 'mstitem/create', 'method' => 'POST', 'name' => 'form', 'id' => 'createform' ]) }}

    <h5>製品情報登録（新規追加）</h5>
    <!-- データエリア -->
    <div class="col-md-12">
        <div class="panel panel-default">
            <div class="panel-heading">
                <h3 class="panel-title">製品情報</h3>
            </div>
            
            {{-- 通知メッセージ --}}
            @if ($message <> "")
                <div class="message">
                    {{ Form::label("message", $message, ["class"=>"form-control btn-success btn"]) }}
                </div>
            @endif
            
            @if (session()->has('errors'))
                <div class="alert alert-danger">
                    <ul>
                        @foreach ($errors->all() as $message)
                            <li>{{ $message }}</li>
                        @endforeach
                    </ul>
                </div>
            @endif
            
            <div class="panel-body">
                <table class="table">
                    <col width="10%" />
                    <col width="30%" />
                    <col width="10%" />
                    <col width="10%" />
                    <col width="10%" />
                    <col width="30%" />

                    <tr>
                        <td>{{ Form::label("itemcat","製品分類",["class"=>"control-label btn"]) }}</td>
                        <td>{{ Form::select('itemcat', $itemcat, '', ['class' => 'validate[required] form-control', 'id' => 'itemcat' ] ) }}</td>
                        <td>{{ Form::label("itemcode","製品コード",["class"=>"control-label btn"]) }}</td>
                        <td>{{ Form::text("itemcode", '', ["class"=>"validate[required,maxSize[32],funcCall[checkLtNumHifn]] form-control", "id"=>"itemcode"]) }}</td>
                        <td>{{ Form::label("itemmodel","製品型式",["class"=>"control-label btn"]) }}</td>
                        <td>{{ Form::text("itemmodel", '', ["class"=>"validate[required,funcCall[checkLtNumHifn]] form-control", "id"=>"itemmodel"]) }}</td>
                    </tr>

                    <tr>
                      <td>{{ Form::label("itemname","製品名",["class"=>"control-label btn"]) }}</td>
                      <td colspan="3">{{ Form::text("itemname", '', ["class"=>"validate[required,maxSize[128]] form-control", "id"=>"itemname"]) }}</td>
                      <td>{{ Form::label("itemnamek","製品名(カナ)",["class"=>"control-label btn"]) }}</td>
                      <td>{{ Form::text("itemnamek", '', ["class"=>"validate[maxSize[128]] form-control", "id"=>"itemnamek"]) }}</td>
                    </tr>
                    <tr>
                      <td>{{ Form::label("description","備考",["class"=>"control-label btn"]) }}</td>
                      <td colspan="5">{{ Form::textarea("description", '', ["class"=>"form-control", "id"=>"description", 'rows' => '3']) }}</td>
                    </tr>
                </table>


            </div><!-- /.panel-body -->
        </div><!-- /.panel panel-default -->
    </div><!-- /.col-md-12 -->
    <!-- /.データエリア -->


    <!-- 定期交換部品エリア -->
    <div class="col-md-12" style="width:50%">
        <div class="panel panel-default">
            <div class="panel-heading">
                <h3 class="panel-title">定期交換部品</h3>
            </div>
            <div class="panel-body">
                <!-- データエリア初期処理（明細部分） -->
                <script data-jsfiddle="hot_info">
                    var hot_info;

                    $(document).ready(function () {
                        var data1 = [];

                        container = document.getElementById('hot_info'),  //後ほど表を展開する要素を指定
                        hot_info = new Handsontable(container, {
                            data: data1,
                            autoColumnSize: true,
                            autoWrapRow: false,
                            contextMenu: false,
                            columnSorting: false,
                            copyPaste: true,
                            currentRowClassName: 'currentRow',
                            enterBeginsEditing: false,
                            fixedRowsTop: 0,
                            formulas: false,
                            manualColumnResize: true,
                            stretchH: true,
                            sortIndicator: true,
                            wordWrap: false,
                            rowHeaders: true,
                            minRows: 1,
                            minSpareRows: 1,
                            manualRowMove: true,

                            colHeaders: ['', '部品名'],
                            colWidths: [1, 400],
                            columns: [
                                { data: 'id', type: 'text'},
                                { data: 'contents', type: 'text', className: 'htLeft'
                                 ,validator: function(value, callback){ callback( value.length <= 255 ); }
                                 ,allowInvalid: true
                                },
                            ],
                            afterChange: function (change, source) {   //以下セル編集後の処理
                                var ht=this;
                                console.log( JSON.stringify( ht.getData() ) );
                            },

                        });

                    });
                </script>

                <div id="hot_info" class="handsontable" style="overflow:hidden;height:15vh"></div>
            </div><!-- /.panel-body -->
        </div><!-- /.panel panel-default -->
    </div><!-- /.col-md-12 -->
    <!-- /.定期交換部品エリア -->

    
    <!-- エラー内容エリア -->
    <div class="col-md-12" style="width:50%">
        <div class="panel panel-default">
            <div class="panel-heading">
                <h3 class="panel-title">エラー内容</h3>
            </div>
            <div class="panel-body">
                <!-- データエリア初期処理（エラー部分） -->
                <script data-jsfiddle="hot_error">
                    var hot_error;

                    $(document).ready(function () {
                        var data2 = [];

                        container = document.getElementById('hot_error'),  //後ほど表を展開する要素を指定
                        hot_error = new Handsontable(container, {
                            data: data2,
                            autoColumnSize: true,
                            autoWrapRow: false,
                            contextMenu: false,
                            columnSorting: false,
                            copyPaste: true,
                            currentRowClassName: 'currentRow',
                            enterBeginsEditing: false,
                            fixedRowsTop: 0,
                            formulas: false,
                            manualColumnResize: true,
                            stretchH: true,
                            sortIndicator: true,
                            wordWrap: false,
                            rowHeaders: true,
                            minRows: 1,
                            minSpareRows: 1,
                            manualRowMove: true,

                            colHeaders: ['', 'エラー名'],
                            colWidths: [1, 400],
                            columns: [
                                { data: 'id', type: 'text'},
                                { data: 'contents', type: 'text', className: 'htLeft'
                                 ,validator: function(value, callback){ callback( value.length <= 255 ); }
                                 ,allowInvalid: true
                                },
                            ],
                            afterChange: function (change, source) {   //以下セル編集後の処理
                                var ht=this;
                                console.log( JSON.stringify( ht.getData() ) );
                            },

                        });

                    });
                </script>

                <div id="hot_error" class="handsontable" style="overflow:hidden;height:15vh"></div>
            </div><!-- /.panel-body -->
        </div><!-- /.panel panel-default -->
    </div><!-- /.col-md-12 -->
    <!-- /.エラー内容エリア -->

    
    <!-- ユーザー設定エリア -->
    <div class="col-md-12" style="width:50%">
        <div class="panel panel-default">
            <div class="panel-heading">
                <h3 class="panel-title">利用可能得意先</h3>
            </div>
            <div class="panel-body">
                <!-- ユーザー設定エリア 初期処理（明細部分） -->
                <script data-jsfiddle="hot_user">
                    var hot_user;
                    $(document).ready(function () {
                        var data = [
                            @foreach( $userdata as $value )
                                { 
                                    id: '{{ $value->id }}', 
                                    name: '{{ $value->name1 }}', 
                                    @if ( isset($value->mstitem_id) )
                                        active: '1' 
                                    @else
                                        active: '0'
                                    @endif
                                },
                            @endforeach
                        ];

                        container = document.getElementById('hot_user'),  //後ほど表を展開する要素を指定
                        hot_user = new Handsontable(container, {
                            data: data,
                            autoColumnSize: true,
                            autoWrapRow: false,
                            contextMenu: false,
                            columnSorting: false,
                            copyPaste: true,
                            currentRowClassName: 'currentRow',
                            enterBeginsEditing: false,
                            fixedRowsTop: 0,
                            formulas: false,
                            manualColumnResize: true,
                            stretchH: true,
                            sortIndicator: true,
                            wordWrap: false,

                            rowHeaders: true,
                            colHeaders: ['', '利用可能ユーザ', '利用'],
                            colWidths: [1, 280, 40 ],
                            columns: [
                                { data: 'id', type: 'text'},
                                { data: 'name',  type: 'text', className: 'htLeft', readOnly: true },
                                { data: 'active', type: 'checkbox', className: 'htLeft', checkedTemplate: '1', uncheckedTemplate: '0' },
                            ],

                            afterChange: function (change, source) {   //以下セル編集後の処理
                                var ht=this;
                                console.log( JSON.stringify( ht.getSourceData() ) );
                            },

	                });

                    });
                </script>
                <!-- /. -->

                <div id="hot_user" class="handsontable" style="overflow:hidden;height:15vh"></div>

            </div><!-- /.panel-body -->
        </div><!-- /.panel panel-default -->
    </div><!-- /.col-md-12 -->
    <!-- /.ユーザー設定エリア -->

    {{ Form::hidden("id", '', ["id"=>"id"]) }}
    {{ Form::hidden("option1", "", ["id"=>"option1"]) }}
    {{ Form::hidden("option2", "", ["id"=>"option2"]) }}
    {{ Form::hidden("users", "", ["id"=>"users"]) }}

    {{ Form::submit("　登録　", ["class" => "btn btn-success", "onClick" => "execUpdate();" ]) }}
    {{ Form::button("キャンセル", ["class"=>"btn btn-default", "onClick"=>"javascript:window.history.back(-1);return false;"]) }}

    {{ Form::close() }}

</div>

<script Language="JavaScript">
    // 更新
    function execUpdate() {
		// json-txt化して全件post
        document.getElementById("option1").value = JSON.stringify(hot_info.getData());
        document.getElementById("option2").value = JSON.stringify( hot_error.getData() );
        document.getElementById("users").value = JSON.stringify( hot_user.getSourceData() );
    }
</script>
@endsection