@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/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">

<div class="container">
    {{ Form::open(['url' => 'claim/index', '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="23%" />
                        <col width="8%" />
                        <col width="30%" />
                        <col width="8%" />
                        <col width="23%" />
                        <tr>

                            @if ($company_id == 0)
                            <td>{{ Form::label("company_id","得意先設定",["class"=>"control-label btn"]) }}</td>
                            <td>{{ Form::select('company_id', $company, $company_id, ['class' => 'form-control', 'id' => 'company_id']) }}</td>
                            @endif
                            
                            <td>{{ Form::label("auth_level","集計期間",["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>

                    @if ($company_id <> 0)
                        {{ Form::hidden("company_id", $company_id) }}
                    @endif
                    {{ 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"]) }}
                    {{ Form::button("新規登録", ["class" => "btn btn-info", "onClick" => "location.href='/ICS/public/users/create'"]) }}　
                </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": 40,
	        "marginLeft": 40,
	        "autoMarginOffset": 20,
	        "mouseWheelZoomEnabled":true,
	        "categoryField": "yearmonth",
                "startDuration": 0.2,
	        "valueAxes": [{
	            "id": "v1",
	            "axisAlpha": 0,
	            "position": "left",
	            "ignoreAxisWidth":true
	        }],
	        "balloon": {
	            "borderThickness": 1,
	            "shadowAlpha": 0
	        },
	        "graphs": [
                    @foreach ($datas as $data)
                        {
                            "id": "{!! $data->id !!}",
                            "bullet": "round",
                            "bulletBorderAlpha": 1,
                            "bulletColor": "#FFFFFF",
                            "bulletSize": 5,
                            "hideBulletsCount": 50,
                            "lineThickness": 2,
                            "title": "{!! $data->model !!}",
                            "useLineColorForBulletBorder": true,
                            "valueField": "{!! $data->id !!}",
                            "balloonText": "<span style=font-size:8px;>[[value]]</span>"
                        },
                    @endforeach
                ],
	        "chartScrollbar": {
	            "graph": "claimlist",
	            "oppositeAxis":false,
	            "offset":30,
	            "scrollbarHeight": 30,
	            "backgroundAlpha": 0,
	            "selectedBackgroundAlpha": 0.1,
	            "selectedBackgroundColor": "#888888",
	            "graphFillAlpha": 0,
	            "graphLineAlpha": 0.5,
	            "selectedGraphFillAlpha": 0,
	            "selectedGraphLineAlpha": 1,
	            "autoGridCount":true,
	            "color":"#AAAAAA"
	        },
	        "chartCursor": {
	            "pan": true,
	            "valueLineEnabled": true,
	            "valueLineBalloonEnabled": true,
	            "cursorAlpha":1,
	            "cursorColor":"#258cbb",
	            "valueLineAlpha":0.2,
	            "valueZoomable":true
	        },
	        "valueScrollbar":{
	          "oppositeAxis":false,
	          "offset":50,
	          "scrollbarHeight":10
	        },
	        "categoryAxis": {
	            "parseDates": false,
	            "dashLength": 1,
	            "minorGridEnabled": true
	        },
	        "export": {
	            "enabled": true
	        },
                "legend": {
                        "enabled": true,
                        "valueWidth": 100,
                        "useGraphSettings": true,
                        "align" : "center",
                        "position": "top",
                        "verticalGap": 0
                },

                "dataProvider": [
                    {"yearmonth"   : "2024-07",}, 
{"yearmonth"   : "2024-08",}, 
{"yearmonth"   : "2024-09",}, 
{"yearmonth"   : "2024-10",}, 
{"yearmonth"   : "2024-11",}, 
{"yearmonth"   : "2024-12",}, 
{"yearmonth"   : "2025-01",}, 
{"yearmonth"   : "2025-02",}, 
{"yearmonth"   : "2025-03",}, 
{"yearmonth"   : "2025-04",}, 
{"yearmonth"   : "2025-05",}, 
{"yearmonth"   : "2025-06",}, 
                ]
	    });
	</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:400px;"></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 ) 
                    {
                        name: '{!! $data->name !!}', 
                        model: '{!! $data->model !!}', 
                        '2024-07':'',
'2024-08':'',
'2024-09':'',
'2024-10':'',
'2024-11':'',
'2024-12':'',
'2025-01':'',
'2025-02':'',
'2025-03':'',
'2025-04':'',
'2025-05':'',
'2025-06':'',
                    },
                    @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: 2,
                    formulas: false,
                    headerTooltips: true,
                    minRows: 1,
//                    minSpareRows: 1,
                    manualColumnResize: true,
                    rowHeaders: true,
                    rowHeights: 30,
                    stretchH: 'all',
                    sortIndicator: false,
                    wordWrap: false,
                    colHeaders: ['製品名', '型番',
                                '2024-07',
'2024-08',
'2024-09',
'2024-10',
'2024-11',
'2024-12',
'2025-01',
'2025-02',
'2025-03',
'2025-04',
'2025-05',
'2025-06',
                    ],
                    colWidths: [70, 50,
                                40,40,40,40,40,40,40,40,40,40,40,40,                    ],
                    columns: [
                                {data: 'name',  type: 'text', className: 'htLeft', readOnly: true},
                                {data: 'model', type: 'text', className: 'htLeft', readOnly: true},
                                {data: '2024-07', type: 'numeric', className: 'htRight', format: '0,0', readOnly: true},
{data: '2024-08', type: 'numeric', className: 'htRight', format: '0,0', readOnly: true},
{data: '2024-09', type: 'numeric', className: 'htRight', format: '0,0', readOnly: true},
{data: '2024-10', type: 'numeric', className: 'htRight', format: '0,0', readOnly: true},
{data: '2024-11', type: 'numeric', className: 'htRight', format: '0,0', readOnly: true},
{data: '2024-12', type: 'numeric', className: 'htRight', format: '0,0', readOnly: true},
{data: '2025-01', type: 'numeric', className: 'htRight', format: '0,0', readOnly: true},
{data: '2025-02', type: 'numeric', className: 'htRight', format: '0,0', readOnly: true},
{data: '2025-03', type: 'numeric', className: 'htRight', format: '0,0', readOnly: true},
{data: '2025-04', type: 'numeric', className: 'htRight', format: '0,0', readOnly: true},
{data: '2025-05', type: 'numeric', className: 'htRight', format: '0,0', readOnly: true},
{data: '2025-06', type: 'numeric', className: 'htRight', format: '0,0', readOnly: true},
                    ],
                });
            });
        </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"></div>
	        </div>
	    </div><!-- /.panel panel-default -->
	</div><!-- /.col-md-12 -->
        
    @endif
    
</div>

<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>    

@endsection