@extends('layouts.general')

@section('layouts.header')
    @include('layouts.header')
@stop

@section('optionalCss')
    <link href="{!! asset('css/numclass/index.css') !!}" rel="stylesheet">
    <link href="{!! asset('css/career/standardModify.css') !!}" rel="stylesheet">
@stop

@section('content')

    <div class="container">

        {{--Begin flash message--}}
        <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>
        {{--End flash message--}}

        <form id="FormStandardModify" action="{{route('post.career.standardModify.register')}}" method="post"
              name="FormStandardModify">
            <input class="hidden" type="hidden" id="deleteIds" name="deleteIds">
            {{csrf_field()}}

            <div class="col-xs-12">
                <h4><strong>職能基準（大項目）の新規登録・編集</strong></h4>
            </div>
            <div class="col-xs-12">
                @if( Session::has('checkAuth') )
                    @if( Session::get('checkAuth') == 'success')
                        <p class="alert alert-success">Success<a href="#" class="close" data-dismiss="alert"
                                                                 aria-label="close">&times;</a></p>
                        <script type="text/javascript">
                            $(function () {
                                setTimeout(function () {
                                    $('.close').trigger('click');
                                }, 1500);
                            })
                        </script>
                    @else
                        <script type="text/javascript">
                            $(function () {
                                $('#myModalError').modal('show');
                            })
                        </script>
                    @endif
                @endif

                @if(Session::has('validate'))
                    <p class="alert alert-danger">
                        {{ Message::get("C00001") }}
                        <a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a>
                    </p>
                    <script type="text/javascript">
                        $(function () {
                            setTimeout(function () {
                                $('.close').trigger('click');
                            }, 1500);
                        })
                    </script>
                @endif

            </div>

            <div class="col-xs-12 show-success"></div>

            <div class="col-xs-12" id="left-body">

                <div class="col-xs-4 title-main">

                    <div class="col-xs-12">
                        <h5><strong>職能区分</strong></h5>
                    </div>

                    <div class="col-xs-12">
                        <h6>職能基準を設定する職能区分をタブより選びます。</h6>
                    </div>


                    <div class="col-xs-12 info-select">
                        <select class="form-control" id="chooseSkill">
                            @foreach ($SkillClassList as $skill)
                                <option
                                        data-route="{{route('get.career.standardModify.chooseSkill', [
                                                'id' => $skill->id
                                            ])}}"
                                        value="{{ $skill->id }}"
                                        {{$SId == $skill->id ? 'selected="selected"' : ''}}>
                                    {{ $skill->name }}
                                </option>
                            @endforeach
                        </select>
                    </div>

                    <div class="col-xs-12">
                        <h5><strong>他の職能区分×職能基準のコピーから作成</strong></h5>
                    </div>

                    <div class="col-xs-12">
                        <h6>「職能基準をコピー」をクリックすると、 「職能基準の登録」に転記されます</h6>
                    </div>

                    <div class="col-xs-12">
                        <table class="table table-striped ">
                            <thead>
                            <tr>
                                <th>職能区分</th>
                                <th class="text-center">職能基準数 <br/>（大項目）</th>

                                <th class="text-center">職能基準を<br/>コピー</th>
                            </tr>
                            </thead>
                            <tbody>
                            @foreach ($SkillClassList as $skill)
                                <tr>
                                    <td>{{$skill->name}}</td>
                                    <td>{{$skill->count_skill}}</td>
                                    @if( $skill->count_skill == 0)
                                        <td class="text-center"><span class="glyphicon glyphicon-book"></span></td>
                                    @else
                                        <td class="text-center">
                                            <a href="#" class="clickCopyData"
                                               data-url="{{route('get.career.standardModify.copy-resource', [
                                                    'id' => $skill->id
                                               ])}}">
                                                <span class="glyphicon glyphicon-book"></span>
                                            </a>
                                        </td>
                                    @endif
                                </tr>
                            @endforeach

                            </tbody>
                        </table>
                    </div>

                </div>
                <div class="col-xs-8 rightbox">
                    <div class="col-xs-12">
                        <h5><strong>職能基準の登録 </strong></h5>
                    </div>
                    <div class="col-xs-12">
                        <h6>職能基準を入力します。作成済みの職能区分×職能基準のセットより複製してから編集することもできます。</h6>
                    </div>

                    <div id="mst_base_skill_container" class="col-xs-12 scroll-skill-class base_skill_container">

                        <div class="col-xs-12 rowBaseSkill" data-id="-1" style="display: none;">

                            <div class="col-xs-12 inline-display">

                                <h5 class="black_box_number">0</h5>
                                <input
                                        class="mst_base_skill_name form-control width-635"
                                        value=""
                                        data-name="{{sprintf('MstBaseSkill[%s/%s][name]', $SId, -1)}}"/>
                                <div class="change_order_container" style="margin-top: 5px; margin-left: 5px;">

                                    <a href="{{route('get.career.standardModify.changeOrder', [
                                                'id'       => -1,
                                                'anotherId' => -1
                                            ])}}">
                                        <span class="glyphicon glyphicon-circle-arrow-up fa-2x"></span>
                                    </a>

                                    <a href="{{route('get.career.standardModify.changeOrder', [
                                                'id'       => -1,
                                                'anotherId' => -1
                                            ])}}">
                                        <span class="glyphicon glyphicon-circle-arrow-down fa-2x"></span>
                                    </a>

                                </div>

                            </div>

                            <div class="col-xs-12 inline-display">
                                <h5 class="tranperent_box_number"></h5>
                                <h5 class="width-h5"><strong>評価シートの質疑表現（省略可）</strong></h5>
                                <h5><strong>得点配分</strong></h5>
                            </div>

                            <div class="col-xs-12 inline-display">

                                <h5 class="tranperent_box_number"></h5>

                                <input
                                        class="mst_base_skill_disp_name form-control width-476"
                                        value=""
                                        data-name="{{sprintf('MstBaseSkill[%s/%s][disp_name]', $SId, -1)}}"/>

                                <h5 class="tranperent_box_number"></h5>
                                <input
                                        type="number"
                                        class="mst_base_skill_score form-control text-center score-width base_skill_score"
                                        value=""
                                        data-name="{{sprintf('MstBaseSkill[%s/%s][score]', $SId, -1)}}"/>
                                <h5 class="title-h5"><strong>点</strong></h5>
                                <a
                                        type="button"
                                        class="arrow-icon deleteSkillBase">
                                    <span class="glyphicon glyphicon-trash "></span>
                                </a>
                            </div>

                            <div class="col-xs-12 inline-display">
                                <h5></h5>
                            </div>

                        </div>
                        @if (count($SkillBaseList) > 0)

                            @foreach($SkillBaseList as $key => $skillBase)

                                <div class="col-xs-12 rowBaseSkill" data-id="{{$skillBase->id}}">

                                    <div class="col-xs-12 inline-display">

                                        <h5 class="black_box_number">{{ $key + 1 }}</h5>
                                        <input
                                                class="mst_base_skill_name form-control width-635"
                                                value="{{ $skillBase->name }}"
                                                name="{{sprintf('MstBaseSkill[%s/%s][name]', $SId, $skillBase->id)}}"/>
                                        <div class="change_order_container" style="margin-top: 5px; margin-left: 5px;">

                                            @if(!$loop->first)

                                                <a href="{{route('get.career.standardModify.changeOrder', [
                                                    'id'       => $SkillBaseList->get($key),
                                                    'anotherId' => $SkillBaseList->get($key - 1)
                                                ])}}">
                                                    <span class="glyphicon glyphicon-circle-arrow-up fa-2x"></span>
                                                </a>

                                            @else
                                                <a href="#" style="visibility: hidden;">
                                                    <span class="glyphicon glyphicon-circle-arrow-up fa-2x"></span>
                                                </a>

                                            @endif

                                            @if(!$loop->last)

                                                <a href="{{route('get.career.standardModify.changeOrder', [
                                                    'id'       => $SkillBaseList->get($key),
                                                    'anotherId' => $SkillBaseList->get($key+1)
                                                ])}}">
                                                    <span class="glyphicon glyphicon-circle-arrow-down fa-2x"></span>
                                                </a>

                                            @else
                                                <a href="#" style="visibility: hidden;">
                                                    <span class="glyphicon glyphicon-circle-arrow-down fa-2x"></span>
                                                </a>

                                            @endif

                                        </div>

                                    </div>

                                    <div class="col-xs-12 inline-display">
                                        <h5 class="tranperent_box_number"></h5>
                                        <h5 class="width-h5"><strong>評価シートの質疑表現（省略可）</strong></h5>
                                        <h5><strong>得点配分</strong></h5>
                                    </div>

                                    <div class="col-xs-12 inline-display">

                                        <h5 class="tranperent_box_number"></h5>

                                        <input
                                                class="mst_base_skill_disp_name form-control width-476"
                                                value="{{ $skillBase->disp_name }}"
                                                name="{{sprintf('MstBaseSkill[%s/%s][disp_name]', $SId, $skillBase->id)}}"/>

                                        <h5 class="tranperent_box_number"></h5>
                                        <input
                                                type="number"
                                                class="mst_base_skill_score form-control text-center score-width base_skill_score"
                                                value="{{ $skillBase->score }}"
                                                name="{{sprintf('MstBaseSkill[%s/%s][score]', $SId, $skillBase->id)}}"/>
                                        <h5 class="title-h5"><strong>点</strong></h5>
                                        <a
                                                type="button"
                                                class="arrow-icon deleteSkillBase"
                                                data-route="{{route('get.career.standardModify.delete', [
                                                    'id' => $skillBase->id
                                                ])}}">
                                            <span class="glyphicon glyphicon-trash "></span>
                                        </a>
                                    </div>

                                    <div class="col-xs-12 inline-display">
                                        <h5></h5>
                                    </div>

                                </div>

                            @endforeach
                        @endif

                    </div>

                    <div class="col-xs-12 text-right total_score">
                        <input type="button" name="Action" id="addBaseSkill" class="btn btn-primary color btnAddBaseSkill-width" value="追 加">
                    </div>

                </div>
            </div>

            <div class="col-xs-12 text-right total_score">
                <strong>
                    (合計 <span class="total_score_change">{{$SkillBaseList->total_score}}</span> 点)
                </strong>
            </div>

            <div class="col-xs-12 text-right button-holder ">
                <a style="margin-right: 7px;" id="backMenu" href="{{route('getCareerIndex')}}">キャンセル</a>
                <button
                        name="Action"
                        type="button"
                        class="btn btn-primary color"
                        id="registerStandard">確定
                </button>
            </div>

        </form>

    </div>

    <!-- Modal -->
    <div class="modal fade" id="myModal" role="dialog">
        <div class="modal-dialog">
            <!-- Modal content-->
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                    <h4 class="modal-title">確定用パスワード入力</h4>
                    <h5>*確定にはパスワードが必要です。</h5>
                </div>
                <div class="modal-body">
                    <div class="col-xs-3">パスワード</div>
                    <div class="col-xs-9"><input type="password" name="password" id="passAuth" class="form-control">
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">戻る</button>
                    <button type="submit" class="btn btn-primary" id="confirmPass">確定</button>
                </div>
            </div>

        </div>
    </div>

    <div class="modal fade" id="myModalError" role="dialog">
        <div class="modal-dialog">
            <!-- Modal content-->
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                </div>
                <div class="modal-body">
                    <h4 class="modal-title">パスワードが不正です。</h4>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-primary" data-dismiss="modal">OK</button>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="myModalTotalScore" role="dialog">
        <div class="modal-dialog">
            <!-- Modal content-->
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                </div>
                <div class="modal-body">
                    <h4 class="modal-title">総計100を入力してください</h4>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-primary" data-dismiss="modal">OK</button>
                </div>
            </div>
        </div>
    </div>
    <div id="passErrModal" class="modal fade in" data-backdrop="static" data-keyboard="false" tabindex="-1" role="dialog">
        <div class="modal-dialog modal-sm">
            <div class="modal-content" style="width:300px;">
                <div class="modal-header" style="width:298px;">
                    <h4 id="modalTitle" class="modal-title"></h4>
                </div>
                <div class="modal-body">
                    パスワードが不正です。
                </div>
                <div class="modal-footer" style="width:298px;">
                    <a id="BackClose" class="btn btn-default" data-dismiss="modal"><i class="fa fa-close"></i> OK</a>
                </div>
            </div>
        </div>
    </div>
    <div id="passModal" class="modal fade in" data-backdrop="static" data-keyboard="false" tabindex="-1" role="dialog">
        <div class="modal-dialog modal-sm">
            <div class="modal-content" style="width:300px;">
                <div class="modal-header" style="width:298px;">
                    <h4 id="modalTitle" class="modal-title">確定用パスワード入力</h4>
                </div>
                <div class="modal-body submit-modal-title">
                    <div class="col-xs-12 inner-col-content submit-message">
                        *確定にはパスワードが必要です。
                    </div>
                    <div class="col-xs-12 inner-col-content submit-content">
                        <h5 id="SubmitHeader">パスワード</h5>
                        <input name ='Password' id="SubmitPassword" type="password" class=" form-control">
                    </div>
                </div>
                <div class="modal-footer" style="width:298px;">
                    <a class="btn btn-default" data-dismiss="modal"><i class="fa fa-close"></i>  戻る</a>
                    <a id="submitPass" onclick="" class="btn btn-primary" data-dismiss="modal"><i class="fa "></i>確定</a>
               </div>
            </div>
        </div>
    </div>
@stop

@section('modal')
    @include('layouts.modal')
@stop

@section('layouts.footer')
    @include ('layouts.footer')
@stop

@section('optionalJs')
    <script>

        $(function () {

            var baseSkillModule = (function () {

                var copyBaseSkill = function () {
                        $('.clickCopyData')
                            .off('click.copyData')
                            .on('click.copyData', function (e) {

                                e.preventDefault();

                                var url = $(this).data('url');

                                $.ajaxSetup({
                                    header: $('meta[name="csrf-token"]').attr('content')
                                });

                                $.ajax({
                                    type: "GET",
                                    url: url,
                                    dataType: 'json',
                                    success: function (data) {
                                        for (var i = 0; i < data.length; i++) {

                                            var addItem = $('div.rowBaseSkill:last').clone();

                                            addItem
                                                .attr('data-id', function (index, id) {
                                                    if (id >= 0) {
                                                        return -1;
                                                    } else {
                                                        return id - 1;
                                                    }
                                                })
                                                .find('select, input')
                                                .each(function (index, ele) {
                                                    var name = (typeof undefined != typeof $(ele).attr('name')) ? $(ele).attr('name') : $(ele).data('name'),
                                                        new_name,
                                                        old_key = getKey(name)[0],
                                                        arr_key = old_key.split('/'),
                                                        new_key;
                                                    arr_key[arr_key.length - 1] = $(addItem).data('id');
                                                    new_key = arr_key.join('/');
                                                    new_name = name.replace(old_key, new_key);
                                                    $(ele).attr('name', new_name);
                                                })
                                                .end()
                                                .find('.black_box_number')
                                                .text(function (index, text) {
                                                    return text - 0 + 1;
                                                })
                                                .end()
                                                .find('.mst_base_skill_name')
                                                .val(data[i].name)
                                                .end()
                                                .find('.mst_base_skill_disp_name')
                                                .val(data[i].disp_name)
                                                .end()
                                                .find('.mst_base_skill_score')
                                                .val(data[i].score)
                                                .end()
                                                .find('.change_order_container')
                                                .remove()
                                                .end()
                                                .find('.deleteSkillBase')
                                                .removeAttr('data-route')
                                                .end()
                                                .show()
                                                .insertAfter("div.rowBaseSkill:last");

                                            $('.scroll-skill-class')
                                                .scrollTop($('.scroll-skill-class').prop('scrollHeight'));
                                        }
                                    },
                                    error: function (data) {
                                    }
                                })
                            });

                    },
                    checkScore = function () {
                        $('#registerStandard')
                            .off('click.checkScore')
                            .on('click.checkScore', function (e) {

                                e.preventDefault();

                                var errorMsg = '';
                                // 職能基準名項目の必須チェック
                                for(var i = 1; i < $('.mst_base_skill_name').length; i++){

                                    if($('.mst_base_skill_name')[i].value === ''){
                                        if(errorMsg){
                                            errorMsg = errorMsg + '<br/>';
                                        }
                                        errorMsg = errorMsg + '{!! Message::get("E00095", ["Field" => "職能基準(' + i + '行目)"]) !!}';
                                    }
                                }

                                var total_score = $('.total_score_change').text() - 0,
                                    that = this;

                                // 総計チェック
                                var checkTotalScore = {{Config::get('const.BASE_SKILL_TOTAL_SCORE')}};
                                if (checkTotalScore !== total_score) {
                                     if(errorMsg){
                                        errorMsg = errorMsg + '<br/>';
                                     }
                                     errorMsg = errorMsg + '{!! Message::get("E00104", ["Field" => "総計'+ checkTotalScore +'"]) !!}';
                                }

                                // エラーが存在する場合
                                if(errorMsg){
                                    $('#editionMsg').html('<p class="alert alert-danger col-md-12">' + errorMsg + '</p>');
                                    window.scrollTo(0, 0);
                                    return;

                                } else {
                                    $('#passModal')
                                        .modal('show')
                                        .off('click.ok', '#submitPass')
                                        .on('click.ok', '#submitPass', function () {
                                            jQuery.ajaxSetup({
                                                header: jQuery('meta[name="csrf-token"]').attr('content')
                                            });

                                            var pass = $('#SubmitPassword').val();
                                            $.ajax({
                                                type: 'GET',
                                                url: '{{route("get.basicEvaluation.confirm.check")}}',
                                                data: {pass:pass},
                                                dataType: 'json',
                                                success: function(data){
                                                    if(data == true){
                                                        $(that).closest('form').submit();
                                                    }else{
                                                        $('#passErrModal').modal('show');
                                                    }
                                                }
                                            });
                                        });
                                }
                            });
                    },
                    chooseSkill = function () {
                        $('#chooseSkill')
                            .off('change.chooseSkill')
                            .on('change.chooseSkill', function (e) {
                                var that = this;
                                window.location.href = $('option:selected', that).data('route');
                            });
                    },
                    deleteBaseSkill = function () {
                        $('.base_skill_container')
                            .off('click.deleteBaseSkill', '.deleteSkillBase')
                            .on('click.deleteBaseSkill', '.deleteSkillBase', function (e) {

                                e.preventDefault();

                                var that = this;

                                var deleteObj = $(that).closest('.rowBaseSkill');
                                if ($(that).data('route')) {
                                    var deleteId = deleteObj[0].getAttribute("data-id");
                                    var deleteIds = $('#deleteIds');
                                    if(deleteIds.val()){
                                        deleteIds.val(deleteIds.val() + ',' + deleteId);
                                    }else{
                                        deleteIds.val(deleteId);
                                    }
                                }
                                deleteObj.remove();
                            });
                    },
                    addBaseSkill = function () {
                        $('#addBaseSkill')
                            .off('click.addBaseSkill')
                            .on('click.addBaseSkill', function (e) {
                                e.preventDefault();
                                var container = $('.scroll-skill-class'),
                                    template = $('.rowBaseSkill:last', container).clone();
                                $(template)
                                    .attr('data-id', function (index, id) {
                                        if (id >= 0) {
                                            return -1;
                                        } else {
                                            return id - 1;
                                        }
                                    })
                                    .find('select, input')
                                    .each(function (index, ele) {
                                        var name = (typeof undefined != typeof $(ele).attr('name')) ? $(ele).attr('name') : $(ele).data('name'),
                                            new_name,
                                            old_key = getKey(name)[0],
                                            arr_key = old_key.split('/'),
                                            new_key;
                                        arr_key[arr_key.length - 1] = $(template).data('id');
                                        new_key = arr_key.join('/');
                                        new_name = name.replace(old_key, new_key);
                                        $(ele)
                                            .val('')
                                            .attr('name', new_name);
                                    })
                                    .end()
                                    .find('.black_box_number')
                                    .text(function (index, text) {
                                        return text - 0 + 1;
                                    })
                                    .end()
                                    .find('.deleteSkillBase')
                                    .data('route', '')
                                    .end()
                                    .find('.change_order_container')
                                    .remove()
                                    .end()
                                    .find('.deleteSkillBase')
                                    .removeAttr('data-route')
                                    .end()
                                    .show()
                                    .appendTo(container);
                            });
                    },
                    detectChangeAndRenderTotalScore = function (e) {

                        var MutationObserver = window.MutationObserver || window.WebKitMutationObserver || window.MozMutationObserver,
                            target = document.getElementById('mst_base_skill_container');

                        if (target) {

                            var observer = new MutationObserver(function (mutations) {

                                    mutations.forEach(function (mutation) {
                                        calculateBaseSkillTotalScore();
                                    });

                                }),
                                config = {
                                    childList: true,
                                    attributes: true,
                                    subtree: true,
                                };

                            observer.observe(target, config);

                            // observer.disconnect();
                        }
                    },
                    triggerValueChangeOnInput = function (e) {
                        $('#mst_base_skill_container')
                            .off('input.detectChange propertychange.detectChange', ':input')
                            .on('input.detectChange propertychange.detectChange', ':input', function (e) {

                                var that = this;

                                $(that)
                                    .attr('value_holder', $(that).val());
                            });
                    },
                    calculateBaseSkillTotalScore = function (e) {

                        var that = this,
                            total_score = 0;

                        $('.mst_base_skill_score')
                            .each(function (index, ele) {
                                total_score = $(ele).val() - 0 + total_score;
                            });

                        $('.total_score_change')
                            .text(total_score);
                    };

                return {
                    copyBaseSkill: copyBaseSkill,
                    checkScore: checkScore,
                    chooseSkill: chooseSkill,
                    deleteBaseSkill: deleteBaseSkill,
                    addBaseSkill: addBaseSkill,
                    detectChangeAndRenderTotalScore: detectChangeAndRenderTotalScore,
                    triggerValueChangeOnInput: triggerValueChangeOnInput,
                }
            })();

            baseSkillModule.copyBaseSkill();
            baseSkillModule.checkScore();
            baseSkillModule.chooseSkill();
            baseSkillModule.deleteBaseSkill();
            baseSkillModule.addBaseSkill();
            baseSkillModule.detectChangeAndRenderTotalScore();
            baseSkillModule.triggerValueChangeOnInput();
        });

        function getKey(string) {
            var found = [],
                pattern = /\[(.*?)\]/g,
                currentMatch;
            while (currentMatch = pattern.exec(string)) {
                found.push(currentMatch[1]);
            }
            return found;
        }

    </script>
@append