@extends('layouts.master')

@section('link')
    <link href="{!! asset('css/common/chartist.css') !!}" rel="stylesheet">
    <link href="{!! asset('css/numclass/graph-view.css') !!}" rel="stylesheet">

    <script src="{!! asset('js/common/chartist.min.js') !!}" type="text/javascript"></script>
    <script src="{!! asset('js/common/chartist-plugin-axistitle.min.js') !!}" type="text/javascript"></script>
    <script src="{!! asset('js/numclass/graph.js') !!}" type="text/javascript"></script>

    @include('layouts.header')

    <script>
    $(document).ready(function () {
        // チーム名が選択されていない場合、または、グラフデータが存在しない場合
        // TODO 20180517 印刷PDFの修正が終わるまでリンクを塞ぐ
        // if($('#TeamName').val() ==='' || $('#ChartDetail div').length === 2){
        //     $('#SubmitButton').addClass('disabled');
        // }
        if($('#TeamName').val() ==='' || $('#ChartDetail div').length === 2){
            $('#SubmitButtonProvisional').addClass('disabled');
        }

    });
        $(document).ready(function () {
        	$('.hide-tooltip').tooltip('disable');
        	$('[data-toggle="tooltip"]').tooltip()
            window.setTimeout(function () {

                $('.ct-grids').each(function (idx, obj) {
                    var vertical = $(obj).find("[class*=ct-vertical]");
                    $(vertical[0]).css('stroke', '#337ab7');
                    $(vertical[0]).css('stroke-width', '2px');
                    $(vertical[0]).css('display', 'inherit');
                });

                $('.ct-labels').each(function (idx, obj) {

                    var vertical = $(obj).find('span:last-of-type:last');
                    $(vertical).text('（点）');
                    $(vertical).css('margin-left', '9px');
                    $(vertical).css('font-size', '8pt');

                    var vertical = $(obj).find('text:last-of-type:last');
                    $(vertical).text('　　（点）');
                    $(vertical).attr('x', 51);
                    $(vertical).css('font-size', '12px');
                });

                var height = $('.sub-header').height();
                var height = $('.sub-header').height(height + 70);
                $('.ct-label.ct-horizontal.ct-end').each(function (idx, obj) {
                    var x = $(obj).attr('x');
                    $(obj).attr('x', x - 25);

                });

            }, 50);

                    @foreach($GraphData as $index => $data)
                    {!!  $GraphData[$index] !!}
            var maxScore = 0;
            $.each({!!  $GraphData[$index] !!}, function(i, val){
                if(maxScore < val){
                    maxScore = val;
                }
            });
            var YRange = [0, 0.5, 1.0, 1.5, 2.0, 2.5, 3.0, 3.5, 4.0, 4.5, 5.0, 5.5];
            var YHigh = 5.5;
            if (maxScore <= 100 && maxScore > 50) {
                var YRange = [0, 10, 20, 20, 30, 40, , 50, 60, 70, 80, 90, 100, 110];
                var YHigh = 110;
            }
            if (maxScore <= 50 && maxScore > 20) {
                var YRange = [0, 5.0, 10, 15, 20, 25, 30, 35, 40, 45, 50, 55];
                var YHigh = 55;
            }
            if (maxScore <= 20 && maxScore > 5) {
                var YRange = [0, 2.0, 4.0, 6.0, 8.0, 10.0, 12.0, 14.0, 16.0, 18.0, 20, 22];
                var YHigh = 22;
            }
            new Chartist.Line(
                '#canvas{!! $index !!}',
                {
                    labels:{!! $GraphLabel[$index] !!},
                    series: [{!! $GraphData[$index] !!}]
                },
                {
                    height: 200,
                    axisY: {
                        type: Chartist.FixedScaleAxis,
                        low: 0,
                        high: YHigh,
                        ticks: YRange,
                        labelInterpolationFnc: function skipLabels(value, index, labels) {
                            if (value == 0 && YHigh == 110) {
                                return value.toFixed(0).toString();
                            }
                            if (value < 10) {
                                return value.toFixed(1).toString();
                            } else {
                                return value.toFixed(0).toString();
                            }
                        }
                    },
                    plugins: [
                        Chartist.plugins.ctAxisTitle({
                            axisX: {
                                axisTitle: '(年)',
                                axisClass: 'ct-axisx-title',
                                offset: {
                                    x: 130,
                                    y: 13
                                },
                                textAnchor: 'middle',
                            },
                            axisY: {
                                axisTitle: '',
                                axisClass: 'ct-axis-title',
                                offset: {
                                    x: 25,
                                    y: -10
                                },
                                textAnchor: 'middle',
                                flipTitle: false,
                            }
                        })
                    ]
                }
            );
            @endforeach

            @if(count($MainGraphData)>0)
            new Chartist.Line(
                '#canvas',
                {
                    labels:{!! $MainGraphLabel[0] !!},
                    series: [{!! $MainGraphData[0] !!}]
                },
                {
                    height: 250,
                    axisY: {
                        type: Chartist.FixedScaleAxis,
                        low: 0,
                        high: 110,
                        ticks: [0, 10, 20, 30, 40, 50, 60, 70, 80, 90, 100, 110],
                    },
                    plugins: [
                        Chartist.plugins.ctAxisTitle({
                            axisX: {
                                axisTitle: '(年)',
                                axisClass: 'ct-axisx-title',
                                offset: {
                                    x: 130,
                                    y: 13
                                },
                                textAnchor: 'middle',

                            },
                            axisY: {
                                axisTitle: '',
                                axisClass: 'ct-axisy-title',
                                offset: {
                                    x: -105,
                                    y: -30
                                },
                                textAnchor: 'middle',
                                flipTitle: false,
                                showGrid: false
                            }
                        })
                    ]
                }
            );
            @endif
        });

    </script>

@stop

@section('content')

    {!! Form::open(array('url'=>'numclass/back', 'class'=>'form-inline',  'id'=>'BackForm','method'=>'Post')) !!}
    {!! Form::close() !!}

    {!!Form::open(array('url'=>'numclass/graph', 'class'=>'form-inline','id'=>'SubmitForm','method'=>'Post')) !!}

    {!!Form::hidden('IsBack','', ['id'=>'IsBack']) !!}

    {!!Form::hidden('IsPrint','', ['id'=>'IsPrint']) !!}

    @if($TeamName ==''  ||   ($TeamName !=''   && count($GraphTitle) >0))

        <div class="container">
            <div class="col-xs-12">
                <h4><strong>推移グラフ閲覧・印刷</strong></h4>
            </div>
{!! strpos($MemberName4,'2') === true !!}
            <div class="col-xs-12" id="GraphHeaderInfo">
                <div class="col-xs-3" id="TeamNameHolder">
                    <h5>チーム名</h5>
                    {!! Form::n_select('TeamName', $TeamNames, old('TeamName',$TeamName ) ,  Message::get('C00001',['a']) , ['id' => 'TeamName', 'class' => 'form-control normal-input'], null) !!}
                </div>
                <div class="col-xs-3 " id="DateHolder">
                    <div class="col-xs-12">
                        <h6>最新の記録 ：</h6>
                        <label>{{ $EvlDate }}
                        </label>
                    </div>
                    <div id="LastRatioHolder" class="col-xs-12">
                        <h6>前　回　比：</h6>
                        <label> {{ $PrevRatio!= ''? $PrevRatio.'点':'' }}
                        </label>
                    </div>
                </div>
                <div class="col-xs-3 " id="TotalScoreHolder">
                    <div class="col-xs-12">
                        <h6>今回チーム結果：</h6>
                        <label>{{ $TotalScoreText }}
                        </label>
                    </div>
                    <div id="PrevScoreHolder" class="col-xs-12">
                        <h6>前回チーム結果：</h6>
                        <label> {{ $PrevScoreText }}
                        </label>
                    </div>
                </div>
                <div class="col-xs-8" id="MemberHolder">
                    <div class="col-xs-5" id="Member1Holder">
                        <h6>リーダー：</h6>
                         <a href="#"  class="{!! strpos($MemberName1,'&#010') === false ?'hide-tooltip':'' !!}" data-placement="bottom" data-toggle="tooltip" title="{{ $MemberName1 }}">{{ old('MemberName1', strpos(htmlentities($MemberName1),'#010;')  != 0 ?explode("&#010;",$MemberName1)[0] .'...' : $MemberName1  ) }}</a>
                    </div>
                    <div class="col-xs-7" id="Member2Holder">
                        <h6>サブリーダー：</h6>
                        <a href="#"  class="{!! strpos($MemberName2,'&#010') === false ?'hide-tooltip':'' !!}" data-placement="bottom" data-toggle="tooltip" title="{{ $MemberName2 }}">{{ old('MemberName2',  strpos(htmlspecialchars($MemberName2),'#010;') != 0  ?explode("&#010;",$MemberName2)[0] .'...' : $MemberName2  ) }}</a>
                    </div>
                    <div class="col-xs-5" id="Member3Holder">
                        <h6>メンバー：</h6>
                       <a href="#"  class="{!! strpos($MemberName3,'&#010') === false ?'hide-tooltip':'' !!}" data-placement="bottom" data-toggle="tooltip" title="{{ $MemberName3 }}">{{ old('MemberName3',  strpos(htmlspecialchars($MemberName3),'#010;')  != 0  ?explode("&#010;",$MemberName3)[0] .'...' : $MemberName3  ) }}</a>
                    </div>
                    <div class="col-xs-7" id="Member4Holder">
                        <h6>フリー：</h6>
                     <a href="#" class="{!! strpos($MemberName4,'&#010') === false ?'hide-tooltip':'' !!} " data-placement="bottom" data-toggle="tooltip" title="{{ $MemberName4 }}">{{ old('MemberName4',  strpos(htmlspecialchars($MemberName4),'#010;')  != 0  ?explode("&#010;",$MemberName4)[0] .'...' : $MemberName4  ) }}</a>
                    </div>
                </div>
            </div>
            <div class="col-xs-12  sub-header">

                <div class="col-xs-4" style="height: 300px;">

                    <div class="col-xs-12" id="CanvasTitleHolder">
                        <h6>数値指標総合点の推移：</h6>
                    </div>

                    <div class="col-xs-12  text-right" id="CanvasHolder" style="height: 230px;">
                        <div id="canvas"></div>
                    </div>

                    <div class="col-xs-12" id="ChartTitleHolder">
                        <h6>数値指標：</h6>
                    </div>

                    <div class="col-xs-12" id="ChartList">
                        <ol>
                            @foreach($GraphTitle as  $index =>  $data)
                                @if($GraphInGroup[$index] !== null)
                                    <li><b>{{ $data }}</b></li>
                                @else
                                    <li class='without-group-title'> {{ $data }}</li>
                                @endif
                            @endforeach
                        </ol>
                        <div class="col-xs-12">
                            <h6>※現在、数値指標グループに紐づいていない数値指標は<br>　グレーで表示されています。</h6>
                        </div>
                    </div>

                </div>

                <div class="col-xs-8 " id="ChartDetail">
                    <div class="col-xs-12 ">
                        <div class="col-xs-12 no-padding-div">
                            @foreach($GraphTitle as $index =>  $data)

                                <div class="col-xs-6 no-padding-div" style="height: 290px;">

                                    <div class="col-xs-12 ">
                                        @if($GraphInGroup[$index] !== null)
                                            <h5><b> {{ '　　'. ($index  +1) .'. ' .$data }}</b></h5>
                                        @else
                                            <h5><font class='without-group-title'> {{ '　　'. ($index  +1) .'. ' .$data }}</font></h5>
                                        @endif
                                    </div>

                                    <div class="col-xs-12" id="CanvasDetail">
                                        <div id="canvas{!! $index !!}"></div>
                                        @if(count($GraphData[$index]) == 6 )

                                            <table id="CanvasData5">

                                                <tr>
                                                    <td>
                                                        @if($GraphData[$index][1] !== null)
                                                            {{  $GraphData[$index][1] }} 点
                                                        @else
                                                            - 点
                                                        @endif
                                                    </td>
                                                    <td>
                                                        @if($GraphData[$index][2] !== null)
                                                            {{  $GraphData[$index][2] }} 点
                                                        @else
                                                            - 点
                                                        @endif
                                                    </td>
                                                    <td>
                                                        @if($GraphData[$index][3] !== null)
                                                            {{  $GraphData[$index][3] }} 点
                                                        @else
                                                            - 点
                                                        @endif
                                                    </td>
                                                    <td>
                                                        @if($GraphData[$index][4] !== null)
                                                            {{  $GraphData[$index][4] }} 点
                                                        @else
                                                            - 点
                                                        @endif
                                                    </td>
                                                    <td>
                                                        @if($GraphData[$index][5] !== null)
                                                            {{  $GraphData[$index][5] }} 点
                                                        @else
                                                            - 点
                                                        @endif
                                                    </td>
                                                </tr>

                                                <tr>
                                                    <td>
                                                        -
                                                    </td>
                                                    <td>
                                                        @if($GraphData[$index][1] !== null && $GraphData[$index][2] !== null)
                                                            {{ $GraphData[$index][2] - $GraphData[$index][1]>0?'+':'' }} {{ number_format($GraphData[$index][2] - $GraphData[$index][1],2,'.','') }}
                                                        @else
                                                            -
                                                        @endif
                                                    </td>
                                                    <td>
                                                        @if($GraphData[$index][2] !== null && $GraphData[$index][3] !== null)
                                                            {{ $GraphData[$index][3] - $GraphData[$index][2]>0?'+':'' }} {{ number_format($GraphData[$index][3] - $GraphData[$index][2],2,'.','') }}
                                                        @else
                                                            -
                                                        @endif
                                                    </td>
                                                    <td>
                                                        @if($GraphData[$index][3] !== null && $GraphData[$index][4] !== null)
                                                            {{ $GraphData[$index][4] - $GraphData[$index][3]>0?'+':'' }} {{ number_format($GraphData[$index][4] - $GraphData[$index][3],2,'.','') }}
                                                        @else
                                                            -
                                                        @endif
                                                    </td>
                                                    <td>
                                                        @if($GraphData[$index][4] !== null && $GraphData[$index][5] !== null)
                                                            {{ $GraphData[$index][5] - $GraphData[$index][4]>0?'+':'' }} {{ number_format($GraphData[$index][5] - $GraphData[$index][4],2,'.','') }}
                                                        @else
                                                            -
                                                        @endif
                                                    </td>
                                                </tr>

                                            </table>
                                        @endif
                                        @if(count($GraphData[$index]) == 5 )

                                            <table id="CanvasData4">

                                                <tr>
                                                    <td>
                                                        @if($GraphData[$index][1] !== null)
                                                            {{  $GraphData[$index][1] }} 点
                                                        @else
                                                            - 点
                                                        @endif
                                                    </td>
                                                    <td>
                                                        @if($GraphData[$index][2] !== null)
                                                            {{  $GraphData[$index][2] }} 点
                                                        @else
                                                            - 点
                                                        @endif
                                                    </td>
                                                    <td>
                                                        @if($GraphData[$index][3] !== null)
                                                            {{  $GraphData[$index][3] }} 点
                                                        @else
                                                            - 点
                                                        @endif
                                                    </td>
                                                    <td>
                                                        @if($GraphData[$index][4] !== null)
                                                            {{  $GraphData[$index][4] }} 点
                                                        @else
                                                            - 点
                                                        @endif
                                                    </td>
                                                </tr>

                                                <tr>
                                                    <td>
                                                        -
                                                    </td>
                                                    <td>
                                                        @if($GraphData[$index][1] !== null && $GraphData[$index][2] !== null)
                                                            {{ $GraphData[$index][2] - $GraphData[$index][1]>0?'+':'' }} {{ number_format($GraphData[$index][2] - $GraphData[$index][1],2,'.','') }}
                                                        @else
                                                            -
                                                        @endif
                                                    </td>
                                                    <td>
                                                        @if($GraphData[$index][2] !== null && $GraphData[$index][3] !== null)
                                                            {{ $GraphData[$index][3] - $GraphData[$index][2]>0?'+':'' }} {{ number_format($GraphData[$index][3] - $GraphData[$index][2],2,'.','') }}
                                                        @else
                                                            -
                                                        @endif
                                                    </td>
                                                    <td>
                                                        @if($GraphData[$index][3] !== null && $GraphData[$index][4] !== null)
                                                            {{ $GraphData[$index][4] - $GraphData[$index][3]>0?'+':'' }} {{ number_format($GraphData[$index][4] - $GraphData[$index][3],2,'.','') }}
                                                        @else
                                                            -
                                                        @endif
                                                    </td>
                                                </tr>

                                            </table>
                                        @endif
                                        @if(count($GraphData[$index]) == 4 )

                                            <table id="CanvasData3">

                                                <tr>
                                                    <td>
                                                        @if($GraphData[$index][1] !== null)
                                                            {{  $GraphData[$index][1] }} 点
                                                        @else
                                                            - 点
                                                        @endif
                                                    </td>
                                                    <td>
                                                        @if($GraphData[$index][2] !== null)
                                                            {{  $GraphData[$index][2] }} 点
                                                        @else
                                                            - 点
                                                        @endif
                                                    </td>
                                                    <td>
                                                        @if($GraphData[$index][3] !== null)
                                                            {{  $GraphData[$index][3] }} 点
                                                        @else
                                                            - 点
                                                        @endif
                                                    </td>
                                                </tr>

                                                <tr>
                                                    <td>
                                                        -
                                                    </td>
                                                    <td>
                                                        @if($GraphData[$index][1] !== null && $GraphData[$index][2] !== null)
                                                            {{ $GraphData[$index][2] - $GraphData[$index][1]>0?'+':'' }} {{ number_format($GraphData[$index][2] - $GraphData[$index][1],2,'.','') }}
                                                        @else
                                                            -
                                                        @endif
                                                    </td>
                                                    <td>
                                                        @if($GraphData[$index][2] !== null && $GraphData[$index][3] !== null)
                                                            {{ $GraphData[$index][3] - $GraphData[$index][2]>0?'+':'' }} {{ number_format($GraphData[$index][3] - $GraphData[$index][2],2,'.','') }}
                                                        @else
                                                            -
                                                        @endif
                                                    </td>
                                                </tr>

                                            </table>
                                        @endif
                                        @if(count($GraphData[$index]) == 3 )
                                            <table id="CanvasData2">

                                                <tr>
                                                    <td>
                                                        @if($GraphData[$index][1] !== null)
                                                            {{  $GraphData[$index][1] }} 点
                                                        @else
                                                            - 点
                                                        @endif
                                                    </td>
                                                    <td>
                                                        @if($GraphData[$index][2] !== null)
                                                            {{  $GraphData[$index][2] }} 点
                                                        @else
                                                            - 点
                                                        @endif
                                                    </td>
                                                </tr>

                                                <tr>
                                                    <td>
                                                        -
                                                    </td>
                                                    <td>
                                                        @if($GraphData[$index][1] !== null && $GraphData[$index][2] !== null)
                                                            {{ $GraphData[$index][2] - $GraphData[$index][1]>0?'+':'' }} {{ number_format($GraphData[$index][2] - $GraphData[$index][1],2,'.','') }}
                                                        @else
                                                            -
                                                        @endif
                                                    </td>
                                                </tr>

                                            </table>
                                        @endif
                                        @if(count($GraphData[$index]) == 2 )

                                            <table id="CanvasData1">

                                                <tr>
                                                    <td>
                                                        {{  $GraphData[$index][1] }} 点
                                                    </td>
                                                </tr>

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

                                            </table>

                                        @endif

                                    </div>

                                </div>
                            @endforeach
                        </div>
                    </div>
                </div>

            </div>
            <div id="ButtonHolder" class="col-xs-12">
                <div class="col-xs-12 text-right">
                    <input id="BackButton" class="btn btn-primary" readonly="readonly" value="メニューへ戻る">
                    <!-- TODO 20180517 印刷PDFの修正が終わるまでリンクを塞ぐ -->
                    <!-- <input id="SubmitButton" readonly="readonly"  class="btn btn-primary" value="印刷"> -->
                    <a id="SubmitButtonProvisional" class="btn btn-primary" data-container="body" data-toggle="tooltip" title = "印刷機能は現在利用できません。" style="width: 105px;">印刷</a>
                </div>
            </div>
        </div>
    @endif

    @if( $TeamName !='' &&  count($GraphTitle) ==0 && !$EvaEmpty)

        <script>      $(document).ready(function () {
                $('#EmptyDataModal').modal('show')
                $('.backAboutMenu, button.close').on('click', function (e) {
                    e.preventDefault();
                    history.go(-1);
                });
            });
        </script>

    @endif

    @if($EvaEmpty)
        <script>      $(document).ready(function () {
                $('#NoEvaModal').modal('show')
            });
        </script>
        <div id="NoEvaModal" class="modal fade in" data-backdrop="static" 
             data-keyboard="false" tabindex="-1" 
             role="dialog">
            <div class="modal-dialog modal-sm">
                <div class="modal-content">
                   <div class="modal-body no-eva-header">
                        <div class="col-xs-12 inner-col-content no-eva-message">
                            評価期間が設定されていません。<br/>基本設定で評価期間を設定してください。
                        </div>
                    </div>
                    <div class="modal-footer">
                        <a id="EmptyEvaluationOK" onclick="" class="btn btn-primary" 
                           data-dismiss="modal"><i class="fa "></i>
                           OK</a>
                    </div>
                    </div>
                </div>
            </div>
    @endif

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

@stop
@include ('layouts.footer')