@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='../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/update', '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>
            <div class="panel-body">
                <table class="table">
                    <col width="10%" />
                    <col width="30%" />
                    <col width="10%" />
                    <col width="50%" />

                    <tr>
                        <td>{!! Form::label("ID","製品ID",["class"=>"control-label btn"]) !!}</td>
                        <td>{!! Form::text("ID", $id, ["class"=>"form-control", "id"=>"ID", "readonly", "style" => "width:100px"]) !!}</td>
                        <td>{!! Form::label("Code","製品コード",["class"=>"control-label btn"]) !!}</td>
                        <td>{!! Form::text("Code", $ItemCode, ["class"=>"validate[required,maxSize[32],funcCall[checkLtNumHifn]] form-control", "id"=>"Code", "style" => "width:100px"]) !!}</td>
                    </tr>
                    <tr>
                        <td>{!! Form::label("ItemCat","製品分類",["class"=>"control-label btn"]) !!}</td>
                        <td>
@if ( $csele<0 )
	@if ( !empty($ItemCat) )
	{!! Form::select('ItemCat', ['' => '製品分類を選択'] + array_pluck($ItemCat, 'name', 'id'), 0, ['class' => 'validate[required] form-control', 'id' => 'itemcat' ] ) !!}
	@endif
@else
	@if ( !empty($ItemCat) )
	{!! Form::select('ItemCat', array_pluck($ItemCat, 'name', 'id'), $csele, ['class' => 'validate[required] form-control', 'id' => 'itemcat' ] ) !!}
	@endif
@endif

                        </td>
                        <td></td>
                        <td></td>
                    </tr>

                    <tr>
                      <td>{!! Form::label("ItemName","製品名",["class"=>"control-label btn"]) !!}</td>
                      <td>{!! Form::text("ItemName", $ItemName, ["class"=>"validate[required,maxSize[128]] form-control", "id"=>"ItemName"]) !!}</td>
                      <td>{!! Form::label("ItemNameK","製品名(カナ)",["class"=>"control-label btn"]) !!}</td>
                      <td>{!! Form::text("ItemNameK", $ItemNamek, ["class"=>"validate[maxSize[128]] form-control", "id"=>"ItemNameK"]) !!}</td>
                    </tr>
                    <tr>
                      <td>{!! Form::label("Memo","備考",["class"=>"control-label btn"]) !!}</td>
                      <td colspan="3">{!! Form::textarea("Memo", $memo, ["class"=>"form-control", "id"=>"Memo", '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 = [
@foreach( $opt1 as $o1 )
	@if ( !empty($o1) )
		{  code: '{{$o1->code}}', contents: '{{$o1->contents}}' },
	@endif
@endforeach
                        ];

                        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: [400],
                            columns: [
                                {
                                	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 = [
@foreach( $opt2 as $o2 )
	@if ( !empty($o2) )
		{  code: '{{$o2->code}}', contents: '{{$o2->contents}}' },
	@endif
@endforeach
                        ];

                        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: [400],
                            columns: [
                                {
                                	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( $users as $u )
	@if ( !empty($u) )
		{ name: '{{$u->name}}', active: '{{$u->factive}}', id: '{{$u->id}}' },
	@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: ['利用可能ユーザ', 'use'],
                            colWidths: [280, 40 ],
                            columns: [
                                { 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 -->
    <!-- /.ユーザー設定エリア -->

<script Language="JavaScript">
//	hot_info
//	hot_error
//	hot_user

    // 更新
    function execUpdate() {
		// json-txt化して全件post
        document.getElementById("d_opt1").value = JSON.stringify( hot_info.getData() );
        document.getElementById("d_opt2").value = JSON.stringify( hot_error.getData() );
        document.getElementById("d_users").value = JSON.stringify( hot_user.getSourceData() );

        document.getElementById("update").value = 0;
    }
    // キャンセル
    function execCancel() {
        document.getElementById("update").value = 1;
    }
</script>
    {!! Form::hidden("update", "", ["class"=>"form-control", "id"=>"update"]) !!}
    {!! Form::hidden("d_opt1", "", ["class"=>"form-control", "id"=>"d_opt1"]) !!}
    {!! Form::hidden("d_opt2", "", ["class"=>"form-control", "id"=>"d_opt2"]) !!}
    {!! Form::hidden("d_users", "", ["class"=>"form-control", "id"=>"d_users"]) !!}

    {!! Form::submit("更新", ["class" => "btn btn-success", "onClick" => "execUpdate();" ]) !!}
    {!! Form::submit("キャンセル", ["class" => "btn btn-default clearForm", "onClick" => "execCancel();" ]) !!}

    {!! Form::close() !!}

</div>
@endsection