{{--
This method is called. For career
@author co.danh
@return view ajax
--}}
@extends('layouts.master')
@section('link')
    <link href="{!! asset('css/career/num_relation_index.css') !!}?20180713-1300" rel="stylesheet">
    <link href="{{ asset('css/common/nested_list.css') }}" rel="stylesheet">
    <link href="{{ asset('css/common/common.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
                @if ($errors->any())
                    <div class="alert alert-danger">
                        <ul>
                            @foreach ($errors->all() as $error)
                                <li>{{ $error }}</li>
                            @endforeach
                        </ul>
                    </div>
                @endif
            </div>
        </div>
        <div class="col-xs-12">
            <h4><strong>クラスごとの数値指標と職能基準の関連性設定</strong></h4>
        </div>
        <div class="col-xs-12" style="margin-bottom: 5px;padding:0px">
            {!! Form::open( array('url'=>route('postNumRelationIndex') . '?group_id=' . $group_id . '&numerical_id=' . $numerical_id , 'name'=>'FormNumerical', 'id'=>'FormNumerical', 'method'=>'post') ) !!}
            {!! Form::hidden('numerical_id', null, ['id' => 'numerical-id']) !!}
            <div class="col-xs-4">
                <h5><strong>数値指標</strong></h5>
            </div>
            <div class="col-xs-8" style="display:inline-flex">
                <h5 style="width:110px;"><strong>職能基準</strong></h5>
            </div>
            <div class="col-xs-12" id="left-body">
                <div class="col-xs-4" style="padding-right:15px;">
                    <div class="col-xs-12" style="display:inline-flex;padding:0px;  ">
                        <h5 style="margin-right:5px; margin-top:-0px; width:80px;">数値指標<br>グループ</h5>
                        {!! Form::n_select('NumIndexGroup', $group_numericals, '',  Message::get('C00001',['a']) , ['data-url' => route('getNumRelationAjax'), 'class' => 'form-control numerical-group', "style" => "width:170px;"], null) !!}
                    </div>
                    <div class="col-xs-12" style="display:inline-flex;padding:0px;  ">
                        <h5 style="margin-right:5px; margin-top:-0px; width:80px; padding-top:10px;">数値指標</h5>

                            {!! Form::n_select('numerical_id', [], '' ,  Message::get('C00001',['a']) , ['data-url-form' => route('postNumRelationIndex'), 'data-url' => route('getBaseSkillAjax'), 'class' => 'form-control list-numerical-indexs', "style" => "width:250px;"], null) !!}

                    </div>
                    <div class="col-xs-12" style="display:inline-flex;padding:0px;  margin-bottom:5px;">
                        <h5 style=" margin: 0px 0px 0px -7px; width:90px;">【評価観点】</h5>
                    </div>
                    <div class="col-xs-12" style="display:inline-flex;padding:0px;  margin-bottom:20px;">
                        <h5 style="margin-right:5px; margin-top:-0px; width:340px;text-align: justify;" class="viewpoint"></h5>
                    </div>
                    <div class="col-xs-12" style="display:inline-flex;padding:0px;  margin-bottom:5px;">
                        <h5 style=" margin: 0px 0px 0px -7px; width:90px;">【POINT】</h5>
                    </div>
                    <div class="col-xs-12" style="display:inline-flex;padding:0px;  margin-bottom:20px;">
                        <h5 style="margin-right:5px; margin-top:-0px; width:350px;text-align: justify;" class="point"></h5>
                    </div>
                    <div class="col-xs-12" style="display:inline-flex;padding:0px;  margin-bottom:20px;">
                        <h5 style="margin-right:5px; margin-top:-0px; width:350px;text-align: justify;">【数値指標と職能基準との関連性及びその比重】</h5>
                    </div>
                    <div class="col-xs-12" style="display:inline-flex;padding:0px;  margin-bottom:20px;">
                        <table>
                            <thead>
                                <th>
                                    関連性の表示
                                </th>
                                <th>
                                    個人評価への影響度
                                </th>
                            </thead>
                            <tbody>
                                <tr>
                                    <td>★★★★★</td>
                                    <td>関連性が高い</td>
                                </tr>
                                <tr>
                                    <td>★★★★</td>
                                    <td rowspan="3" style="font-size:40px;">↕</td>
                                </tr>
                                <tr>
                                    <td>★★★</td>

                                </tr>
                                <tr>
                                    <td>★★</td>

                                </tr>
                                <tr>
                                    <td>★</td>
                                    <td>関連性が低い</td>
                                </tr>
                            </tbody>
                        </table>

                    </div>
                </div>
                <div class="col-xs-8 list-numerical-base-skill" style="margin-top: 5px;padding: 0px;">
                </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="submitNumRelation" name="Action" type="button" class="btn btn-primary disabled" value="確定" style="WIDTH: 105px !important;">
            </div>
            {!! Form::close() !!}
        </div>
    </div>
@stop
@section('optionalJs')
    <script type="text/javascript">
    $(document).ready(function () {
        $(function () {
        	$('.numerical-group').val(null)
            function BeforeSend( )
            {
                $('.list-numerical-base-skill').html( '<div class="loader"></div>' );
            }
            function OnSuccess(data)
            {
                var url_form = $('.list-numerical-indexs').attr('data-url-form');
                var numerical_id = $('.list-numerical-indexs').val();
                var group_id = $('.numerical-group').val();
                $('#FormNumerical').attr('action', url_form + '?group_id=' + group_id + '&numerical_id=' + numerical_id);
                $('.list-numerical-base-skill').html( data );
                if(data){
                    $('#submitNumRelation').removeClass('disabled');
                }else{
                    $('#submitNumRelation').addClass('disabled');
                }
            }

            $('.numerical-group').change(function(event) {
                var url = $(this).attr('data-url');
                var id = $(this).val();
                $('.list-numerical-base-skill').html( null );
                $('#submitNumRelation').addClass('disabled');
                if(id != 0){
                    $.get( url + "/" + id, function( data ) {
                        $('.list-numerical-indexs').html(data);
                    });
                }else{
                    // 数値指標項目グループ未選択時
                    $('.list-numerical-indexs').html('<option value="0">{{ Message::get("C00001") }}</option>');
                }
            });
            $('.list-numerical-indexs').change(function(event) {
                var url = $(this).attr('data-url');
                var viewpoint = $(this).find(':selected').attr('data-viewpoint');
                var point = $(this).find(':selected').attr('data-point');
                var id = $(this).val();
                $('.viewpoint').html(viewpoint);
                $('.point').html(point);
                $('#numerical-id').val(id);
                if(id != 0){
                    $.ajax({
                    	 url: url + "/" + id+'?gid='+ parseInt( $('.numerical-group').val()),
                        type:"Get",
                        beforeSend:BeforeSend,
                        success:OnSuccess,
                    });
                }else{
                    // 数値指標項目未選択時
                    OnSuccess(null);
                }
            });
            // 確定ボタン押下時
            $('#submitNumRelation').on('click', function(event) {
                event.preventDefault();
                $('#SubmitModal').modal('show');
            });
            // 保存ポップアップ「はい」押下時
            $('#btnOK').on('click', function (e) {
                $('#FormNumerical').submit();
                e.preventDefault();
            });
        });
    });

    /**
     * 職能区分押下時の処理
     * @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')