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

<link media="screen" rel="stylesheet" type="text/css" href="/css/handsontable.full.css">
<link media="screen" rel="stylesheet" type="text/css" href="/css/jquery-ui.css">
<script type="text/javascript" src="/js/handsontable.full.0.33.0.js"></script>
<script type="text/javascript" src="/js/ruleJS.all.full.js"></script>
<script type="text/javascript" src="/js/jquery-ui.js"></script>
<script type="text/javascript" src="/js/sheetclip.js"></script>

<div class="container">
    {{ Form::open(['url' => 'order/arrivebulk', 'method' => 'POST', 'name' => 'form', 'id' => 'searchform']) }}
    <h5>入荷一括登録</h5>
    <div class="col-md-12" id="accordion">
        <div class="panel panel-default">
            <div class="panel-heading">
                <h3 class="panel-title"><a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">伝票番号登録</a></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

                
            <!-- 一覧表示 -->
            <script data-jsfiddle="list">
                    var hot;
                    var clipboardCache = '';

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

                        container = document.getElementById('list'),  //後ほど表を展開する要素を指定

                        hot = new Handsontable(container, { 
                            data: data,
//                            autoColumnSize: true,
                            autoWrapRow: false,
                            contextMenu: true,
                            columnSorting: true,
                            copyPaste: true,
                            currentRowClassName: 'currentRow',
                            enterBeginsEditing: false,
                            fixedRowsTop: 0,
                            fixedColumnsLeft: 3,
                            formulas: false,
                            headerTooltips: true,
                            minRows: 1,
                            minSpareRows: 1,
                            manualColumnResize: true,
                            rowHeaders: true,
                            rowHeights: 50,
                            stretchH: 'all',
                            sortIndicator: false,
                            wordWrap: true,
                            colHeaders: ['伝票番号','得意先名','商品名','id'
                            ],
                            colWidths: [120, 100, 150, 1,
                            ],
                            columns: [
                                        {data: 'denno', type: 'text', className: 'htCenter'},
                                        {data: 'customer_name', type: 'text', className: 'htLeft', readOnly: true},
                                        {data: 'itemname', type: 'text', className: 'htLeft', readOnly: true},
                                        {data: 'orderid', type: 'text', className: 'htLeft', readOnly: true},
                            ],
                            contextMenu: { 
                                items:{
                                    'copy': { name: 'コピー' },
                                    'cut': { name: '切り取り' },
                                    'paste' :{
                                        key: 'paste',
                                        name: '貼り付け',
                                        disabled: function() {
                                            return clipboardCache.length === 0;
                                        },
                                        callback: function() {
                                            var plugin = this.getPlugin('copyPaste');
                                            this.listen();
                                            plugin.paste(clipboardCache);
                                        }
                                    },
                                    "hsep": "---------",
                                    'row_above': { name: '１行挿入' },
                                    'col_left':  { name: '１列挿入' },
                                    'remove_row': { name: '行削除' },
                                    'remove_col': { name: '列削除' },
                                    "hsep": "---------",
                                    'undo': { name: '戻る' },
                                    
                                }
                            },      
                            afterCopy: function(changes) {
                                clipboardCache = SheetClip.stringify(changes);
                            },
                            afterCut: function(changes) {
                                clipboardCache = SheetClip.stringify(changes);
                            },
                            afterPaste: function(changes, coords) {
                                // we want to be sure that our cache is up to date, even if someone pastes data from another source than our tables.
                                clipboardCache = SheetClip.stringify(changes);

                                // ペーストされた個所に入力がある場合
                                if (changes != '') {
                                    var strCol = coords[0].startCol;
                                    var endCol = coords[0].endCol;
                                    var strRow = coords[0].startRow;
                                    var endRow = coords[0].endRow;
                                    var setCol = strCol;
                                    var setRow = strRow;
                                    
                                    // 縦軸でループ
                                    for (var y = 0; y < changes.length; y++) {
                                        var rowChange = changes[y];
                                        setRow = strRow + y;
                                        setCol = strCol;
                                        
                                        // 横軸でループ
                                        for (var x = 0; x < rowChange.length; x++) {
                                            setCol = setCol + x;

                                            // 伝票No列の場合
                                            if (setCol == 0) {
                                                // 商品名取得
                                                getItems(rowChange[x], setRow);
                                            }
                                        }   // ./横軸でループ
                                    }   // ./縦軸でループ
                                }   // ./ペーストされた個所に入力がある場合
                            },
      
                            // 入力後処理
                            afterChange: function(changes, source) {
                                if (source == 'edit' || source == 'paste') {
                                    for (var i = 0; i < changes.length; i++) {
                                        var rowChange = changes[i];
                                        // 伝票番号列
                                        if (rowChange[1] == 'denno') {
                                            // 商品名取得
                                            if (rowChange[2] != rowChange[3]) {
                                                getItems(rowChange[3], rowChange[0]);
                                            }
                                        }
                                    }
                                }
                            },
                        });

                        hot.updateSettings({
                            copyRowsLimit: hot.countRows()
                        });
                    });
                    
                </script>

                <style>
                    .handsontable .currentRow {
                        background-color: rgba(225, 250, 255, 1);
                    }
                    .handsontable .currentCol {
                        background-color: rgba(225, 250, 255, 1);
                    }
                    .handsontable td {
                        vertical-align: middle;
                    }
                    .copyPaste {
                        position: relative;
                        top: -9999px;
                        left: -9999px;
                    }
                </style>

            <!-- 一覧表示 -->
            <div id="list" class="handsontable"></div>

            <div class="panel-body collapse in" id="collapseOne">
                {{ Form::submit(" 登録 ", ["class"=>"btn btn-success", "onClick" => "store();"]) }}
                {{ Form::hidden("lists", "", ["id"=>"lists"]) }}
                {{ Form::hidden("download", "", ["class"=>"form-control", "id"=>"download"]) }}
                {{ Form::hidden("save", "", ["class"=>"form-control", "id"=>"save"]) }}
            </div>
                
        </div><!-- /.panel panel-default -->
    </div><!-- /.col-md-12 -->
    {{ Form::close() }}    
</div>
    
<script Language="JavaScript">
    // 検索ボタン押下時
    function search() {
        document.getElementById("download").value = 0;
        document.getElementById("save").value = 0;
    }
    // CSVダウンロードフラグセット
    function download_CSV() {
        document.getElementById("download").value = 1;
        document.getElementById("save").value = 0;
    }
    // 更新フラグセット
    function store() {
        if(confirm("入荷登録をします。よろしいですか。")){
            document.getElementById("lists").value = JSON.stringify( hot.getData() );
            document.getElementById("download").value = 0;
            document.getElementById("save").value = 1;
        }
    }
</script>

<script>
/* ------------------------------
 Loading イメージ表示関数
 引数： msg 画面に表示する文言
 ------------------------------ */
function dispLoading(msg){
    // 引数なし（メッセージなし）を許容
    if( msg == undefined ){
        msg = "";
    }
    
    // 画面表示メッセージ
    var dispMsg = "<div class='loadingMsg'>" + msg + "</div>";
    
    // ローディング画像が表示されていない場合のみ出力
    if($("#loading").length == 0){
        $("body").append("<div id='loading'>" + dispMsg + "</div>");
    }
}
 
/* ------------------------------
 Loading イメージ削除関数
 ------------------------------ */
function removeLoading(){
    $("#loading").remove();
}    
</script>

<style>
#loading {
  display: table;
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  background-color: #fff;
  opacity: 0.8;
}
 
#loading .loadingMsg {
  display: table-cell;
  text-align: center;
  vertical-align: middle;
  padding-top: 140px;
  background: url("/WASHMATE-ADMIN/public/img/loading.png") center center no-repeat;
}
</style>
<script Language="JavaScript">
    function getItems(denno, row) {
        // 処理前に Loading 画像を表示
        dispLoading("処理中...");
        
        $.ajax({
            type : "GET",
            url  : "getitems",
            data : {"denno" : denno},
            scriptCharset : "UTF-8",
            dataType: 'json',
                success: function(json){
                    var len = json.length;
                    for (var i = 0; i < len; i++){
                        hot.setDataAtCell(row, 1, json[i].order_company_name);
                        hot.setDataAtCell(row, 2, json[i].product_name);
                        hot.setDataAtCell(row, 3, json[i].id);
                    }
                },
                error : function(msg, status){
                    alert('通信ができない状態です。');
                }
        })
 
        .always( function(data) {
            // Lading 画像を消す
            removeLoading();
        });
    }

</script>

@endsection