@extends('layouts.master')
@section('link')
    <link href="{{ asset('css/career/car020.css') }}" rel="stylesheet">
    <link href="{{ asset('css/common/common.css') }}" rel="stylesheet">
    <link href="{{ asset('css/common/nested_list.css') }}" rel="stylesheet">
    @include('layouts.header')
@stop
@section('content')
    <div class="container">
        <div class="col-xs-12">
            <div class="flash-message" id="editionMsg">
                @foreach (['danger', 'warning', 'success', 'info'] as $msg)
                    @if(Session::has('alert-' . $msg))
                        <p class="alert alert-{{ $msg }}">{{ Session::get('alert-' . $msg) }}
                            <a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a>
                        </p>
                    @endif
                @endforeach
            </div>
        </div>
        <div class="col-xs-12">
            <h4><strong>個人別の数値指標と職能基準の関連性設定</strong></h4>
        </div>
        <!-- 【評価観点】、【POINT】用のhiddenField -->
        {{ Form::hidden('mst_index_viewpoint', '') }}
        {{ Form::hidden('mst_index_point', '') }}
        @foreach($mstIndexs as $key => $item)
        {{ Form::hidden('mst_index_viewpoint'.$item->id, $item->viewpoint) }}
        {{ Form::hidden('mst_index_point'.$item->id, $item->point) }}
        @endforeach
        <div class="col-xs-12 mainContainer">
            <div class="col-xs-4">
                <h5><strong>数値指標</strong></h5>
            </div>
            <div class="col-xs-8">
                <h5><strong>職能基準</strong></h5>
            </div>
            {{ Form::open( array('url'=>route('postCar020'), 'id'=>'FormPost', 'method'=>'post') ) }}
            <div class="col-xs-12 padding_all_zero">
                <!-- left container -->
                <div class="col-xs-4 padding_all_zero">
                    <div class="col-xs-12 targetContainer">
                        <h5 class="targetLabel">目標</h5>
                        {{ Form::n_select('mstNumericalIndividualIndexId', $mstNumericalIndividualIndexs, '',  Message::get('C00001',['a']) , ['class' => 'form-control targetSelect'], null) }}
                    </div>
                    <div class="col-xs-12">
                        <h5 class="item_h5">【評価観点】</h5>
                    </div>
                    <div class="col-xs-12">
                        <h5 id="viewpoint" class="minHeight30 label_break"></h5>
                    </div>
                    <div class="col-xs-12">
                        <h5 class="item_h5">【POINT】</h5>
                    </div>
                    <div class="col-xs-12">
                        <h5 id="point" class="minHeight30 label_break"></h5>
                    </div>
                    <div class="col-xs-12">
                        <h5 class="item_h5">【数値指標と職能基準との関連性及びその比重】</h5>
                    </div>
                    <div class="col-xs-12">
                        <table>
                            <thead>
                                <th>関連性の表示</th>
                                <th>個人評価への影響度</th>
                            </thead>
                            <tbody>
                                <tr>
                                    <td>{{ Form::cd_label(Config::get('cd_const.RELATION'), Config::get('cd_const.RELATION_5')) }}</td>
                                    <td>関連性が高い</td>
                                </tr>
                                <tr>
                                    <td>{{ Form::cd_label(Config::get('cd_const.RELATION'), Config::get('cd_const.RELATION_4')) }}</td>
                                    <td rowspan="3" class="bothArrow">↕</td>
                                </tr>
                                <tr>
                                    <td>{{ Form::cd_label(Config::get('cd_const.RELATION'), Config::get('cd_const.RELATION_3')) }}</td>
                                </tr>
                                <tr>
                                    <td>{{ Form::cd_label(Config::get('cd_const.RELATION'), Config::get('cd_const.RELATION_2')) }}</td>
                                </tr>
                                <tr>
                                    <td>{{ Form::cd_label(Config::get('cd_const.RELATION'), Config::get('cd_const.RELATION_1')) }}</td>
                                    <td>関連性が低い</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
                <!-- right container -->
                <div class="col-xs-8" id="rightContainer">
                </div>
            </div>
            <div class="col-xs-12 text-right button-holder">
                <a href="{{route('getCareerIndex')}}" class="btn-cancel"><span class="link-color">キャンセル</span></a>
                <input id="submitBtn" name="Action" type="button" class="btn btn-primary disabled submitCls" value="確定">
            </div>
            {{ Form::close() }}
        </div>
    </div>
@stop
@section('optionalJs')
    <script type='text/javascript'>
        $(document).ready(function () {
            // セレクトの初期値を設定
            $('[name=mstNumericalIndividualIndexId]').val('')

            // 目標セレクトのチェンジイベント
            $('[name=mstNumericalIndividualIndexId]').change(function(event){
                var id = $(this).val(),
                    viewpoint = $('#viewpoint'),
                    point = $('#point'),
                    submitBtn = $('#submitBtn'),
                    pointText = $('[name=mst_index_point' + id +']').val();
                // ボタンを非活性にする。
                submitBtn.addClass('disabled');
                // 【評価観点】、【POINT】に値をセットする
                viewpoint.text($('[name=mst_index_viewpoint' + id +']').val());
                // 改行コードを変換する
                // 合わせてクロスサイトスクリプト対策を実施する
                if(pointText){
                    pointText = pointText.replace(/&/g, '&amp;');
                    pointText = pointText.replace(/</g, '&lt;');
                    pointText = pointText.replace(/>/g, '&gt;');
                    pointText = pointText.replace(/"/g, '&quot;');
                    pointText = pointText.replace(/'/g, '&#39;');
                    pointText = pointText.replace(/\n/g, '<br>');
                }
                point.html(pointText);
                if(id !== ''){
                    $.ajax({
                        url: '{{route("getBaseSkillByCar020Ajax")}}/' + id,
                        type: 'Get',
                        success: onSuccess
                    });
                }else{
                    onSuccess(null);
                }
            });

            // 確定ボタン押下時
            $('#submitBtn').on('click', function(event) {
                event.preventDefault();
                $('#SubmitModal').modal('show');
            });

            // 保存ポップアップ「はい」押下時
            $('#btnOK').on('click', function (event) {
                event.preventDefault();
                $('#FormPost').submit();
            });

            /**
             * 目標セレクトサーバ疎通後の処理
             * @param  view data rightContainer
             */
            function onSuccess(data){
                var rightContainer = $('#rightContainer');
                rightContainer.html(data),
                submitBtn = $('#submitBtn');
                // ボタンを活性にする
                if(data){
                    submitBtn.removeClass('disabled');
                }
            }
        });

        /**
         * 職能区分押下時の処理
         * @param  int index 職能区分のインデックス
         */
        function nestedBoxTap(index){
            var obj = $('#open' + index)[0];
            if(obj){
                var style = obj.style,
                    img = $('#img' + index)[0];
                style.display = (style.display === 'none') ? 'block' : 'none';
                img.src = (style.display === 'none') ? '{{ asset("img/allow.png") }}' : '{{ asset("img/allow2.png") }}';
            }
        }

        /**
         * 職能区分一括展開の処理
         * @param  int index 職能区分のインデックス
         */
        function nestedBoxAllOpen(){
            $('[id ^= open]').each(function(index, element){
                element.style.display = 'block';
            });
            $('[id ^= img]').each(function(index, element){
                element.src = '{{ asset("img/allow2.png") }}';
            });
        }

        /**
         * 職能区分一括で閉じる処理
         * @param  int index 職能区分のインデックス
         */
        function nestedBoxAllClose(){
            $('[id ^= open]').each(function(index, element){
                element.style.display = 'none';
            });
            $('[id ^= img]').each(function(index, element){
                element.src = '{{ asset("img/allow.png") }}';
            });
        }
    </script>
@append
@include ('layouts.footer')