@extends('layouts.main')
@section('content')
<link media="screen" rel="stylesheet" type="text/css" href='../../public/css/handsontable.full.css'>
<link media="screen" rel="stylesheet" type="text/css" href='../../public/css/handsontable.formula.css'>
<script type="text/javascript" src='../../public/js/handsontable.full.js'></script>
<script type="text/javascript" src='../../public/js/handsontable.formula.js'></script>
<script type="text/javascript" src='../../public/js/ruleJS.all.full.js'></script>
<script type="text/javascript" src='../../public/js/amcharts/amcharts.js'></script>
<script type="text/javascript" src='../../public/js/amcharts/serial.js'></script>
<script type="text/javascript" src='../../public/js/amcharts/themes/light.js'></script>
<script type="text/javascript" src='../../public/js/amcharts/plugins/export/export.min.js'></script>
<script type="text/javascript" src="../../public/js/jquery-ui.js"></script>
<link media="screen" rel="stylesheet" type="text/css" href='../../public/js/amcharts/plugins/export/export.css'>
<link media="screen" rel="stylesheet" type="text/css" href="../../public/css/jquery-ui.css">

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

<div class="container">
    {{ Form::open(['url' => 'claim/itemerror', '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>

            <div class="panel-body collapse in" id="collapseOne">
                <div class="search">
                    <table class="table">
                        <col width="8%" />
                        <col width="32%" />
                        <col width="8%" />
                        <col width="32%" />
                        <col width="8%" />
                        <col width="12%" />
                        <tr>
                            <td>{{ Form::label("machine","機種",["class"=>"control-label btn"]) }}</td>
                            <td>
                                {{ Form::select('itemcategory', $itemcat, $request->itemcategory, ["class"=>"form-control validate[required]", 'id' => 'itemcategory', 'style' => 'width:49%;', 'onChange' => 'makeList_Item()']) }}
                                {{ Form::select('item_id', $items, $request->item_id, ["class"=>"form-control validate[required]", 'id' => 'item_id', 'style' => 'width:49%;']) }}
                            </td>
                            <td>{{ Form::label("ymd1","集計期間",["class"=>"control-label btn"]) }}</td>
                            <td>
                                <input type="text" class="form-control validate[required, funcCall[compareWeekNo[<, ymd2]]]" id="ymd1" name="ymd1" style="width: 100px" value="{!!$ymd1!!}" readonly> ～ 
                                <input type="text" class="form-control validate[required, funcCall[compareWeekNo[>, ymd1]]]" id="ymd2" name="ymd2" style="width: 100px" value="{!!$ymd2!!}" readonly>
                            </td>
                            <td></td>
                            <td></td>
                        </tr>
                    </table>

                    {{ Form::submit(" 検索 ", ["class"=>"btn btn-success", "onClick" => "search();"]) }}
                    {{ Form::submit("CSVダウンロード ", ["class" => "btn btn-warning csv", "onClick" => "download_CSV();"]) }}
                    {{ Form::hidden("download", "", ["class"=>"form-control", "id"=>"download"]) }}
                </div><!-- /.search -->
            </div><!-- /.panel-body -->
        </div><!-- /.panel panel-default -->
    </div><!-- /.col-md-12 -->
    {!! Form::close() !!}

    <!-- **********************************************************************************************************************-->
    @if (!empty($datas) or count($datas) > 1)
	<!-- グラフエリア -->
	<!-- Chart code -->
        <script>
        var chart = AmCharts.makeChart("chartdiv", {
            "type": "serial",
            "theme": "light",
            "marginRight": 70,
            "dataProvider": [
                @foreach ($error_codes as $code)
                                {
                    "errors": "{!! $code->contents !!}",
                    "counts": {!! $datas[0]->$field !!},
                }, 
                @endforeach
            ],
      
            "startDuration": 1,
            "categoryField": "errors",
            "categoryAxis": {
                "gridPosition": "start",
                "labelRotation": 45
            },
            "valueAxes": [{
                    "axisAlpha": 0,
                    "position": "left",
                    "title": "エラー件数"
            }],
            "graphs": [{
                  "balloonText": "<b>[[category]]: [[value]]</b>",
//                  "fillColorsField": "color",
                  "fillAlphas": 0.9,
                  "lineAlpha": 0.2,
                  "type": "column",
                  "valueField": "counts"
            }],
            "chartCursor": {
                "categoryBalloonEnabled": false,
                "cursorAlpha": 0,
                "zoomable": false
            },
            "export": {
                "enabled": true
            }
        });
        </script>
	    
	<div class="col-md-12">
	    <div class="panel panel-default">
	        <div class="panel-heading">
	            <h3 class="panel-title">グラフ表示</h3>
	        </div>
	        <div class="panel-body">
	            <div id="chartdiv" style="width:100%; height:300px;"></div>
	        </div>
	    </div><!-- /.panel panel-default -->
	</div><!-- /.col-md-12 -->
	<!-- グラフエリア -->
	<!-- **********************************************************************************************************************-->


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

            $(document).ready(function () {
                var data = [
                    @foreach( $datas as $data ) 
                    {
                        category_code: '{!! $data->category_code !!}', 
                        category_name: '{!! $data->category_name !!}', 
                        item_name: '{!! $data->item_name !!}', 
                        model: '{!! $data->model !!}', 
                        @foreach ($error_codes as $code)
                                                        {!! $field !!}: '{!! $data->$field !!}',
                        @endforeach
                    },
                    @endforeach
                ];

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

                hot = new Handsontable(container, { 
                    data: data,
                    autoColumnSize: true,
                    autoWrapRow: true,
                    contextMenu: true,
                    columnSorting: true,
                    copyPaste: true,
                    currentRowClassName: 'currentRow',
                    enterBeginsEditing: false,
                    fixedRowsTop: 0,
                    fixedColumnsLeft: 4,
                    formulas: false,
                    headerTooltips: true,
                    minRows: 1,
                    manualColumnResize: true,
                    rowHeaders: true,
                    rowHeights: 30,
                    stretchH: 'all',
                    sortIndicator: false,
                    wordWrap: false,
                    colHeaders: ['分類コード', '製品分類名', '機種名', '機種型式', 
                                @foreach ($error_codes as $code)
                                    '{!! $code->contents !!}',
                                @endforeach
                    ],
                    colWidths: [40, 100, 100, 100,
                                @foreach ($error_codes as $code)
                                    100,
                                @endforeach
                    ],
                    columns: [
                                {data: 'category_code', type: 'text', className: 'htLeft', readOnly: true},
                                {data: 'category_name', type: 'text', className: 'htLeft', readOnly: true},
                                {data: 'item_name',     type: 'text', className: 'htLeft', readOnly: true},
                                {data: 'model',         type: 'text', className: 'htLeft', readOnly: true},
                                @foreach ($error_codes as $code)
                                    {data: 'error_code{!! $code->code !!}', type: 'numeric', className: 'htRight', format: '0,0', readOnly: true},
                                @endforeach
                    ],
                });
            });
        </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 class="col-md-12">
	    <div class="panel panel-default">
	        <div class="panel-heading">
	            <h3 class="panel-title">一覧表示</h3>
	        </div>
	        <div class="panel-body">
                    <div id="list" class="handsontable" style="overflow:hidden;height:100%"></div>
	        </div>
	    </div><!-- /.panel panel-default -->
	</div><!-- /.col-md-12 -->
        
    @endif
    
</div>

<script Language="JavaScript">
    function makeList_Item() {
        $('select#item_id').children().remove();

        var itemcategory = $("select#itemcategory").val();

        if (itemcategory == "") {
            window.alert("製品分類を設定してください");
        } else {
            // 処理前に Loading 画像を表示
            dispLoading("処理中...");

            $.ajax({
                    type : "GET",
                    url  : "item",
                    async : "true",
                    data : {"itemcategory" : itemcategory},
                    scriptCharset : "UTF-8",
                    dataType: 'json',
                    success: function(json){
                        var len = json.length;
                            for(var i=0; i < len; i++){
                                $("#item_id").append($("<option>").val(json[i].id).text(json[i].model));
                            }
                        },
                    error : function(msg, status){
                        alert('通信ができない状態です。');
                    },
            })
            .always( function(data) {
                // Lading 画像を消す
                removeLoading();
            });
        }
    }
</script>

<script Language="JavaScript">
    // 検索ボタン押下時
    function search() {
        document.getElementById("download").value = 0;
    }
    // CSVダウンロードフラグセット
    function download_CSV() {
        document.getElementById("download").value = 1;
    }

$(document).ready(function(){
    $(".clearForm").bind("click", function(){
        $(this.form).find("textarea, :text, radio, checkbox").val("").end().find(":checked").prop("checked", false);
    });
});
</script>

<script Language="JavaScript">
    // 週番号の比較
    function compareWeekNo(field, rules, i, options){
        var targetName = rules[i+3];
        var target = $( '#'+ targetName );
        var operator = rules[i+2];
        if ( operator == '<' ) {
            if ( field.val() >= target.val() ) {
                return target.val() + "より過去の週を選択してください";
            }
        } else if ( operator == '>' ) {
            if ( field.val() <= target.val() ) {
                return target.val() + "より最近の週を選択してください";
            }
        }
        
    }
</script>

<script>
  $(function() {
    $.datepicker.setDefaults({
        closeText: '閉じる',
        prevText: '<前',
        nextText: '次>',
        currentText: '今日',
        monthNames: ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月'],
        monthNamesShort: ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月'],
        dayNames: ['日曜日','月曜日','火曜日','水曜日','木曜日','金曜日','土曜日'],
        dayNamesShort: ['日','月','火','水','木','金','土'],
        dayNamesMin: ['日','月','火','水','木','金','土'],
        weekHeader: '週',
        dateFormat: 'yy/mm/dd',
        firstDay: 1,
        isRTL: false,
        showMonthAfterYear: true,
        yearSuffix: '年',
        changeYear: true,  // 年選択をプルダウン化
        changeMonth: true, // 月選択をプルダウン化
        showWeek: true,
        buttonImage: "../../public/css/images/calendar-icon.png",
        buttonText : "カレンダーから選択",
        buttonImageOnly: true,
        showOn: "both",
    });
    
    $('#ymd1').datepicker({
        onSelect: function(dat,inst){
            $('#ymd1').val(dat)
        },
        beforeShow: function() {
            setTimeout(function(){
                $('.ui-datepicker').css('z-index', 99999999999999);
	    }, 0);
	},
    });
    
    $('#ymd2').datepicker({
        onSelect: function(dat,inst){
            $('#ymd2').val(dat)
        },
        beforeShow: function() {
            setTimeout(function(){
                $('.ui-datepicker').css('z-index', 99999999999999);
	    }, 0);
	},
    });
});
</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("/ICS/public/img/loading.png") center center no-repeat;
}
</style>

@endsection